mirror of
https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git
synced 2024-11-28 02:00:43 +00:00
bb110c6d98
To ensure easier development and maintenance, IE support is dropped to allow modern Javascript features. The old tabber module is rewritten into newer standard and using classes to ensure proper scoping.
46 lines
952 B
Plaintext
46 lines
952 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
|
|
*/
|
|
|
|
/* stylelint-disable selector-class-pattern */
|
|
|
|
/* Skeleton UI */
|
|
.client-js .tabber__header {
|
|
height: 2.6em;
|
|
box-shadow: inset 0 -1px 0 0;
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.client-js .tabber__header::after {
|
|
position: absolute;
|
|
width: 16ch;
|
|
height: 0.5em;
|
|
border-radius: 40px;
|
|
margin-top: 1em;
|
|
margin-left: 0.75em;
|
|
background: #000;
|
|
/* Use double quote in PHP */
|
|
content: '';
|
|
}
|
|
|
|
.client-js .tabber__noscript {
|
|
display: none;
|
|
}
|
|
|
|
/*
|
|
* Hide all other panels
|
|
* All panels are stacked vertically initially
|
|
* then panels are stacked horizontally after Tabber is loaded
|
|
* Causing lots of layout shift
|
|
*/
|
|
.client-js .tabber__panel:not( :first-child ) {
|
|
display: none;
|
|
}
|