mirror of
https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git
synced 2024-11-24 00:13:28 +00:00
1f4436843f
* Add skeleton screen to avoid layout shift * Hide other sections before the module is loaded to avoid layout shift * Add noscript message * Header container is now saved in parser instead of being generated. If you have any issues with the script, try clearing out the parser cache or do an empty edit.
38 lines
807 B
Plaintext
38 lines
807 B
Plaintext
/**
|
|
* Critial rendering styles
|
|
*
|
|
* Since ext.tabberNeue is loaded a while after page load,
|
|
* inline styles are needed to create an inital state and
|
|
* avoid potential layout shifts. This should be kept as
|
|
* small as possible.
|
|
*
|
|
* Used in Tabber.php and TabberTransclude.php
|
|
*/
|
|
|
|
// Skeleton UI
|
|
.tabber__header {
|
|
height: 2.6em;
|
|
box-shadow: inset 0 -1px 0 0;
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.tabber__header:after {
|
|
position: absolute;
|
|
width: 16ch;
|
|
height: 0.5em;
|
|
margin-top: 1em;
|
|
margin-left: 0.75em;
|
|
background: #000;
|
|
border-radius: 40px;
|
|
// Use double quote in PHP
|
|
content: '';
|
|
}
|
|
|
|
// Hide all other panels
|
|
// All panels are stacked vertically initially
|
|
// Then panels are stacked horizontally after Tabber is loaded
|
|
// Causing lots of layout shift
|
|
.tabber__panel:not( :first-child ) {
|
|
display: none;
|
|
}
|