mediawiki-skins-Citizen/skinStyles/extensions/UniversalLanguageSelector/ext.uls.languagesettings.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.5 KiB
Plaintext

/*
* Citizen
*
* SkinStyles for Extension:UniversalLanguageSelector
* Module: ext.uls.languagesettings
* Version: MLEB 2021.12
*
* Date: 2022-05-17
*/
.languagesettings-menu {
h1 {
color: var( --color-base--emphasized );
}
.menu-section {
color: var( --color-base );
&.active {
border-left-color: var( --color-primary );
background-color: var( --color-surface-1 );
color: var( --color-base--emphasized );
}
&:hover {
background-color: var( --color-surface-1 );
}
&:focus {
border-color: var( --color-primary );
}
.settings-text {
color: var( --color-base--subtle );
}
&:hover .settings-text {
color: var( --color-base );
}
&.display-settings-block,
&.input-settings-block {
filter: var( --filter-invert );
}
}
}
#languagesettings-settings-panel {
background: var( --color-surface-1 );
color: var( --color-base );
}
#languagesettings-settings-panel h3 {
color: var( --color-base );
}
#languagesettings-settings-panel h4 {
color: var( --color-base );
}
.language-settings-dialog {
background: var( --color-surface-2 );
}
.uls-language-settings-close-block {
background: var( --color-surface-1 );
}
.language-settings-buttons {
border-top-color: var( --border-color-base );
}
.uls-ui-languages p,
.checkbox {
color: var( --color-base--subtle );
}
#languagesettings-panels .mw-ui-pressed {
border-color: var( --color-primary--active );
background-color: var( --color-primary--active );
}
.checkbox strong {
color: var( --color-base );
}
.uls-icon-close {
filter: var( --filter-invert );
}