feat: update MediaWiki core ui styles

This commit is contained in:
alistair3149 2021-03-01 12:55:05 -05:00
parent 0884876972
commit 30d749ff22
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
2 changed files with 64 additions and 53 deletions

View file

@ -5,68 +5,82 @@
@import '../../../resources/variables.less';
.skin-citizen-dark {
.mw-ui-button {
border-color: @dark-bg-50;
background-color: @dark-bg-10;
color: @dark-text-90;
&:visited {
color: @dark-text-90;
}
&:hover {
border-color: @dark-bg-50;
background-color: @dark-bg-0;
color: @dark-text-80;
}
&:focus {
background-color: @dark-bg-0;
color: @dark-text-90;
}
&:active,
&.is-on {
border-color: @dark-bg-60;
background-color: @dark-bg-30;
color: @dark-text-100;
}
&:disabled {
border-color: @dark-bg-30 !important;
background-color: @dark-bg-30 !important;
color: @dark-text-100 !important;
&:hover,
&:active {
border-color: @dark-bg-20;
background-color: @dark-bg-20;
color: @dark-text-90;
}
}
.mw-ui-button {
background-color: var( --background-color-framed );
color: var( --color-base );
&.mw-ui-quiet,
&.mw-ui-quiet.mw-ui-progressive,
&.mw-ui-quiet.mw-ui-destructive {
color: @dark-text-90;
color: var( --color-base );
&:hover {
color: @dark-text-80;
background-color: var( --background-color-quiet--hover );
color: var( --color-base--emphasized );
}
&:active {
color: @dark-text-100;
background-color: var( --background-color-quiet--active );
color: var( --color-base--subtle );
}
&:focus {
color: @dark-text-90;
color: var( --color-base );
}
&:disabled,
&:disabled:hover,
&:disabled:active {
color: @dark-text-70;
color: var( --color-base--subtle );
}
}
&.mw-ui-progressive {
background-color: var( --color-primary );
&:hover {
background-color: var( --color-primary--hover );
}
&:active {
background-color: var( --color-primary--active );
}
&:focus {
background-color: var( --color-primary );
}
&.mw-ui-quiet {
color: var( --color-primary );
&:hover {
color: var( --color-primary--hover );
}
&:active {
color: var( --color-primary--active );
}
&:focus {
color: var( --color-primary );
}
}
}
&.mw-ui-destructive {
&.mw-ui-quiet {
color: var( --color-destructive );
&:hover {
color: var( --color-destructive--hover );
}
&:active {
color: var( --color-destructive--active );
}
&:focus {
color: var( --color-destructive );
}
}
}

View file

@ -5,20 +5,17 @@
@import '../../../resources/variables.less';
.skin-citizen-dark {
.mw-ui-input {
border: 1px solid @dark-bg-50;
background-color: @dark-bg-0;
box-shadow: inset 0 0 0 0.1em @dark-bg-0;
color: @dark-text-100;
.mw-ui-input {
border: 1px solid var( --border-color-input );
background-color: var( --background-color-input );
color: var( --color-base );
&:hover {
border-color: @dark-bg-60;
border-color: var( --border-color-input--hover );
}
&:disabled {
border-color: @dark-bg-20;
color: @dark-text-70;
}
border-color: var( --background-color-framed--active );
color: var( --color-base--subtle );
}
}