diff --git a/modules/ext.tabberNeue.init/ext.tabberNeue.init.less b/modules/ext.tabberNeue.init/ext.tabberNeue.init.less index 76ba762..f1ae659 100644 --- a/modules/ext.tabberNeue.init/ext.tabberNeue.init.less +++ b/modules/ext.tabberNeue.init/ext.tabberNeue.init.less @@ -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; - } -} \ No newline at end of file diff --git a/modules/ext.tabberNeue/ext.tabberNeue.less b/modules/ext.tabberNeue/ext.tabberNeue.less index 63e3bd4..0b0d9fd 100644 --- a/modules/ext.tabberNeue/ext.tabberNeue.less +++ b/modules/ext.tabberNeue/ext.tabberNeue.less @@ -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
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 ) ); } } }