mirror of
https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git
synced 2024-11-24 00:13:28 +00:00
56619bf56f
Instead of doing JS hashing, just append the tabber count to the end of the ID. Having the same tab label within the same Tabber breaks in the previous behavior anyways
104 lines
1.8 KiB
Plaintext
104 lines
1.8 KiB
Plaintext
.tabber {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&__header {
|
|
box-shadow: inset 0 -1px 0 0 var( --border-color-base, #a2a9b1 );
|
|
|
|
&__prev,
|
|
&__next {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&__tabs {
|
|
display: flex;
|
|
overflow-x: auto;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
&__tab {
|
|
padding: 0.5em 0.75em;
|
|
font-weight: bold;
|
|
white-space: nowrap;
|
|
|
|
&,
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* stylelint-disable-next-line no-descending-specificity */
|
|
&,
|
|
&:visited {
|
|
color: var( --color-base, #202122 );
|
|
}
|
|
|
|
&:hover {
|
|
@media ( hover: hover ) {
|
|
box-shadow: inset 0 -2px 0 0 var( --box-shadow-color-progressive-selected--hover, #447ff5 );
|
|
color: var( --color-progressive--hover, #447ff5 );
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
@media ( hover: hover ) {
|
|
color: var( --color-progressive--active, #2a4b8d );
|
|
}
|
|
}
|
|
}
|
|
|
|
&__section {
|
|
display: grid;
|
|
overflow: hidden;
|
|
block-size: 100%;
|
|
grid-auto-columns: 100%;
|
|
grid-auto-flow: column;
|
|
scroll-snap-type: x mandatory;
|
|
}
|
|
|
|
&__panel {
|
|
height: max-content;
|
|
overflow-x: auto;
|
|
scroll-snap-align: start;
|
|
|
|
// Hide edit buttons for non-transclusion tabs since they don't work
|
|
/* stylelint-disable-next-line selector-class-pattern */
|
|
&:not( [ data-mw-tabber-page-title ] ) .mw-editsection {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Basic nojs support
|
|
/* stylelint-disable-next-line selector-class-pattern */
|
|
.client-nojs {
|
|
.tabber__panel {
|
|
height: auto;
|
|
scroll-padding-top: 3rem;
|
|
}
|
|
}
|
|
|
|
// Set tabber height to the height of first tabpanel by
|
|
// setting subsequent tabpanels to have 0 height
|
|
/* stylelint-disable-next-line selector-class-pattern */
|
|
.client-js {
|
|
.tabber {
|
|
&__tabs {
|
|
scrollbar-width: none;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0;
|
|
height: 0;
|
|
}
|
|
}
|
|
|
|
&--init {
|
|
.tabber__panel ~ .tabber__panel {
|
|
height: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|