mediawiki-skins-Citizen/skinStyles/extensions/TabberNeue/ext.tabberNeue.legacy.less
alistair3149 2bf20397e1
feat(core): use filter-invert CSS variable to flip color
This decouple the filter style from the  class.
Instead, filter-invert can be redefined if needed (e.g. :root.skin-citizen-dark)
2023-07-10 16:56:56 -04:00

90 lines
1.4 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for Extension:TabberNeue
* Module: ext.tabberNeue.legacy
* Version: 1.7.5 (dcc4bc1)
*
* Date: 2023-07-05
*/
.tabber {
&__tab {
color: var( --color-base );
font-weight: var( --font-weight-medium );
&:visited {
color: var( --color-base );
}
&[ aria-selected='true' ],
&[ aria-selected='true' ]:visited {
color: var( --color-primary );
}
}
&__indicator {
background: var( --color-primary );
}
&__header {
box-shadow: inset 0 -1px 0 0 var( --border-color-base--darker );
&__prev,
&__next {
&::after {
opacity: var( --opacity-icon-base );
}
}
}
&__transclusion {
&--loading {
.tabber__loading-indicator,
&::before,
&::after {
background-color: var( --color-primary );
}
}
}
}
@media ( hover: hover ) {
.tabber {
&__tab {
&:hover {
color: var( --color-primary--hover );
}
&:active {
color: var( --color-primary--active );
}
}
&__header {
&__prev,
&__next {
&:hover {
background-color: var( --background-color-quiet--hover );
&::after {
opacity: var( --opacity-icon-base--hover );
}
}
&:active {
background-color: var( --background-color-quiet--active );
&::after {
opacity: var( --opacity-icon-base--active );
}
}
&::after {
filter: var( --filter-invert );
}
}
}
}
}