StarCitizenTools/mediawiki-extensions-TabberNeue
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-extensions-TabberNeue.git synced 2024-11-23 16:06:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: use Codex CSS variable directly

Browse source
This commit is contained in:
alistair3149 2024-11-15 19:29:58 -05:00 committed by alistair3149
parent 7477392b69
commit bd5738afe8
2 changed files with 26 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

38
modules/ext.tabberNeue.init/ext.tabberNeue.init.less
View file

@ -15,10 +15,17 @@
&__tab {
padding: 0.5em 0.75em;
color: var( --color-base, #202122 );
font-weight: 700;
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 );
@ -26,8 +33,8 @@
&:hover {
@media ( hover: hover ) {
color: var( --color-progressive--hover, #447ff5 );
box-shadow: inset 0 -2px 0 0 var( --box-shadow-color-progressive-selected--hover, #447ff5 );
color: var( --color-progressive--hover, #447ff5 );
}
}
@ -36,13 +43,6 @@
color: var( --color-progressive--active, #2a4b8d );
}
}
&,
&:hover,
&:active,
&:focus {
text-decoration: none;
}
}
&__section {
@ -67,8 +67,18 @@
}
}
// 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 {
@ -87,11 +97,3 @@
}
}
}
// Basic nojs support
.client-nojs {
.tabber__panel {
scroll-padding-top: 3rem;
height: auto;
}
}

22
modules/ext.tabberNeue/ext.tabberNeue.less
View file

@ -1,22 +1,11 @@
.tabber {
// Codex tokens aren't avaliable in older MW version
--tabber-color-progressive: var( --color-progressive, #36c ); // @color-progressive
--tabber-color-progressive--hover: var( --color-progressive--hover, #447ff5 ); // @color-progressive--hover
--tabber-color-progressive--active: var( --color-progressive--active, #2a4b8d ); // @color-progressive--active
--tabber-color-base: var( --color-base, #202122 ); // @color-base
--tabber-color-subtle: var( --color-subtle, #54595d ); // @color-subtle
--tabber-background-color-button-quiet--hover: var( --background-color-button-quiet--hover, rgba( 0, 24, 73, 0.027 ) ); // @background-color-button-quiet--hover
--tabber-background-color-button-quiet--active: var( --background-color-button-quiet--active, rgba( 0, 24, 73, 0.082 ) ); // @background-color-button-quiet--active
--tabber-border-color-base: var( --border-color-base, #a2a9b1 ); // @border-color-base
--tabber-height-indicator: 2px;
&__header {
position: relative;
display: flex;
flex-direction: column;
/* defend against <section> needing 100% */
flex-shrink: 0;
box-shadow: inset 0 -1px 0 0 var( --tabber-border-color-base );
box-shadow: inset 0 -1px 0 0 var( --border-color-base, #a2a9b1 );
/* fixes cross browser quarks */
min-block-size: fit-content;
@ -37,10 +26,10 @@
& &__prev,
& &__next {
position: absolute;
display: none; // Required as all:unset also unset display:none
z-index: 1;
top: 0;
bottom: 0;
display: none; // Required as all:unset also unset display:none
width: 20px;
border-radius: 4px;
cursor: pointer;
@ -110,7 +99,7 @@
animation-name: skeletonload;
animation-timing-function: linear;
background: #000;
background: linear-gradient( to right, var( --tabber-color-base ) 8%, var( --tabber-color-subtle ) 18%, var( --tabber-color-base ) 33% );
background: linear-gradient( to right, var( --color-base, #202122 ) 8%, var( --color-subtle, #54595d ) 18%, var( --color-base, #202122 ) 33% );
}
&::before,
@ -133,6 +122,7 @@
scroll-behavior: smooth;
}
/* stylelint-disable-next-line no-descending-specificity */
&__section,
&__tabs {
@media ( min-width: 720px ) {
@ -164,11 +154,11 @@
&__prev,
&__next {
&:hover {
background-color: var( --tabber-background-color-button-quiet--hover );
background-color: var( --background-color-button-quiet--hover, rgba( 0, 24, 73, 0.027 ) );
}
&:active {
background-color: var( --tabber-background-color-button-quiet--active );
background-color: var( --background-color-button-quiet--active, rgba( 0, 24, 73, 0.082 ) );
}
}
}