mediawiki-skins-Citizen/skinStyles/extensions/TabberNeue/ext.tabberNeue.less
alistair3149 969cd787d6
feat(core): use different font weight in different themes
The same font weight do not provide the same contrast in different themes.
We should be able to change the scaling
2022-11-21 17:42:26 -05:00

97 lines
1.4 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for Extension:TabberNeue
* Module: ext.tabberNeue
* Version: 1.3.1 (656f396)
*
* Date: 2022-10-23
*/
.tabber {
&__tab {
color: var( --color-base--subtle );
font-weight: var( --font-weight-medium );
&:visited {
color: var( --color-base--subtle );
}
&[ 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 );
}
}
}
}
}
}
.skin-citizen-dark {
.tabber__header {
&__prev,
&__next {
&:after {
filter: invert( 1 );
}
}
}
}