mediawiki-skins-Citizen/skinStyles/mediawiki/ui/mediawiki.ui.button.less

206 lines
5 KiB
Plaintext
Raw Normal View History

/*
* Citizen
*
* SkinStyles for MediaWiki
* Module: mediawiki.ui.button
* Version: REL1_39
*
* Date: 2022-11-30
*/
.mw-ui-button {
font-weight: var( --font-weight-medium );
color: var( --color-emphasized );
background-color: var( --color-surface-2 );
border-color: var( --border-color-base );
border-radius: var( --border-radius--small );
&:not( :disabled ) {
&:visited {
color: var( --color-emphasized );
}
// Simplify hover style to only change background color
&:hover {
color: var( --color-emphasized );
background-color: var( --color-surface-2--hover );
border-color: var( --border-color-base );
}
&:focus {
color: var( --color-emphasized );
border-color: var( --color-progressive );
box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-surface-0 );
}
&:active,
&.is-on {
color: var( --color-subtle );
background-color: var( --color-surface-2--active );
border-color: var( --color-surface-2--active );
}
}
&:disabled {
color: var( --color-subtle );
background-color: var( --color-surface-4 );
border-color: var( --color-surface-4 );
}
&.mw-ui-quiet,
&.mw-ui-quiet.mw-ui-progressive,
&.mw-ui-quiet.mw-ui-destructive {
font-weight: var( --font-weight-medium );
color: var( --color-emphasized );
input[ type='checkbox' ]:hover + &,
&:hover {
color: var( --color-emphasized );
background-color: var( --background-color-button-quiet--hover );
}
input[ type='checkbox' ]:focus + &,
&:focus {
color: var( --color-emphasized );
border-color: var( --color-progressive );
box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-surface-0 );
}
input[ type='checkbox' ]:active + &,
&:active {
color: var( --color-emphasized );
background-color: var( --background-color-button-quiet--active );
border-color: transparent;
}
&:disabled,
&:disabled:hover,
&:disabled:active {
color: var( --color-subtle );
}
}
&.mw-ui-progressive {
&:not( :disabled ) {
background-color: var( --color-progressive );
border-color: var( --color-progressive );
&:hover {
color: var( --color-inverted-primary );
background-color: var( --color-progressive--hover );
border-color: var( --color-progressive--hover );
}
&:focus {
box-shadow: inset 0 0 0 1px var( --color-progressive ), inset 0 0 0 2px var( --color-inverted-primary );
}
&:active,
&.is-on {
color: var( --color-inverted-primary );
background-color: var( --color-progressive--active );
border-color: var( --color-progressive--active );
}
}
&:disabled {
color: var( --color-subtle );
background-color: var( --color-surface-4 );
border-color: var( --color-surface-4 );
}
&.mw-ui-quiet {
color: var( --color-progressive );
input[ type='checkbox' ]:hover + &,
&:hover {
color: var( --color-progressive--hover );
// Simplify quiet hover style
background-color: var( --background-color-button-quiet--hover );
}
input[ type='checkbox' ]:focus + &,
&:focus {
color: var( --color-progressive );
border-color: var( --color-progressive );
}
input[ type='checkbox' ]:active + &,
&:active {
background-color: var( --color-progressive--active );
border-color: var( --color-progressive--active );
}
}
}
&.mw-ui-destructive {
&:not( :disabled ) {
background-color: var( --color-destructive );
border-color: var( --color-destructive );
&:hover {
color: var( --color-inverted-fixed );
background-color: var( --color-destructive--hover );
border-color: var( --color-destructive--hover );
}
&:focus {
box-shadow: inset 0 0 0 1px var( --color-destructive ), inset 0 0 0 2px var( --color-inverted-fixed );
}
&:active,
&.is-on {
color: var( --color-inverted-fixed );
background-color: var( --color-destructive--active );
border-color: var( --color-destructive--active );
}
}
&:disabled {
color: var( --color-subtle );
background-color: var( --color-surface-4 );
border-color: var( --color-surface-4 );
}
&.mw-ui-quiet {
color: var( --color-destructive );
input[ type='checkbox' ]:hover + &,
&:hover {
color: var( --color-destructive--hover );
// Simplify quiet hover style
background-color: var( --background-color-button-quiet--hover );
}
input[ type='checkbox' ]:focus + &,
&:focus {
color: var( --color-destructive );
border-color: var( --color-destructive );
}
input[ type='checkbox' ]:active + &,
&:active {
background-color: var( --color-destructive--active );
border-color: var( --color-destructive--active );
}
}
}
&.mw-ui-big {
// Smaller font size since MW UI assume a 14px base font size
font-size: 1.125em;
}
& > * {
&:first-child {
border-top-left-radius: var( --border-radius--small );
border-bottom-left-radius: var( --border-radius--small );
}
&:last-child {
border-top-right-radius: var( --border-radius--small );
border-bottom-right-radius: var( --border-radius--small );
}
}
}