From cebbf32b0b4733e4332c435f74b17121a55867e9 Mon Sep 17 00:00:00 2001 From: alistair3149 Date: Tue, 27 Jul 2021 16:24:26 -0400 Subject: [PATCH] feat: rewrite MediaWiki UI skinstyles to the new system --- .../ui/mediawiki.ui.components.button.less | 37 ++++++----- .../ui/mediawiki.ui.components.checkbox.less | 66 +++++++++++++++---- .../ui/mediawiki.ui.components.input.less | 22 ++++--- 3 files changed, 86 insertions(+), 39 deletions(-) diff --git a/skinStyles/mediawiki/ui/mediawiki.ui.components.button.less b/skinStyles/mediawiki/ui/mediawiki.ui.components.button.less index 867dcb6c..6fa59be9 100644 --- a/skinStyles/mediawiki/ui/mediawiki.ui.components.button.less +++ b/skinStyles/mediawiki/ui/mediawiki.ui.components.button.less @@ -1,48 +1,51 @@ /* - * Citizen - Buttons - * https://starcitizen.tools + * Citizen + * + * SkinStyles for MediaWiki UI + * Module: mediawiki.ui.button + * Version: Core REL1_35 086b4f1 + * + * Date: 2021-07-27 */ -@import '../../../resources/variables.less'; - .mw-ui-button { border-color: var( --border-color-base ); - background-color: var( --background-color-framed ); - color: var( --color-base ); + background-color: var( --color-surface-2 ); + color: var( --color-base--emphasized ); &:visited { - color: var( --color-base ); + color: var( --color-base--emphasized ); } &:hover { border-color: var( --border-color-base ); - background-color: var( --background-color-framed--hover ); - color: var( --color-base--emphasized ); + background-color: var( --color-surface-2--hover ); + color: var( --color-base ); } &:focus { border-color: var( --color-primary ); - background-color: var( --background-color-framed ); + background-color: var( --color-surface-2 ); box-shadow: inset 0 0 0 1px var( --color-primary ); color: var( --color-base ); } &:active, &.is-on { - border-color: var( --background-color-framed--active ); - background-color: var( --background-color-framed--active ); - color: var( --color-base--subtle ); + border-color: var( --color-surface-2--active ); + background-color: var( --color-surface-2--active ); + color: var( --color-base--emphasized ); } &:disabled { - border-color: var( --background-color-framed--active ); - background-color: var( --background-color-framed--active ); + border-color: var( --color-surface-4 ); + background-color: var( --color-surface-4 ); color: var( --color-base--subtle ); &:hover, &:active { - border-color: var( --background-color-framed--active ); - background-color: var( --background-color-framed--active ); + border-color: var( --color-surface-4 ); + background-color: var( --color-surface-4 ); color: var( --color-base--subtle ); } } diff --git a/skinStyles/mediawiki/ui/mediawiki.ui.components.checkbox.less b/skinStyles/mediawiki/ui/mediawiki.ui.components.checkbox.less index 14cf8d25..828e7a98 100644 --- a/skinStyles/mediawiki/ui/mediawiki.ui.components.checkbox.less +++ b/skinStyles/mediawiki/ui/mediawiki.ui.components.checkbox.less @@ -1,23 +1,63 @@ /* - * Citizen - Checkbox - * https://starcitizen.tools + * Citizen + * + * SkinStyles for MediaWiki UI + * Module: mediawiki.ui.checkbox + * Version: Core REL1_35 086b4f1 + * + * Date: 2021-07-27 */ -@import '../../../resources/variables.less'; +.mw-ui-checkbox:not( #noop ) { + [ type='checkbox' ] { + & + label:before { + border-color: var( --border-color-base ); + background-color: var( --color-surface-1 ); + } -.skin-citizen-dark { - .mw-ui-checkbox:not( #noop ) { - [ type='checkbox' ] { - & + label:before { - border: 1px solid @dark-bg-60; - background-color: @dark-bg-0; + &:enabled { + &:focus + label:before { + border-color: var( --color-primary ); } - // disabled checkboxes have a gray background - &:disabled + label:before { - border-color: @dark-bg-30; - background-color: @dark-bg-30; + &:hover + label:before { + border-color: var( --color-primary--hover ); } + + &:active + label:before { + border-color: var( --color-primary--active ); + background-color: var( --color-primary--active ); + box-shadow: inset 0 0 0 1px var( --color-primary--active ); + } + + &:checked { + & + label:before { + border-color: var( --color-primary ); + background-color: var( --color-primary ); + } + + &:focus + label:before { + border-color: var( --color-primary ); + background-color: var( --color-primary ); + box-shadow: inset 0 0 0 1px var( --color-primary ), inset 0 0 0 2px #fff; + } + + &:hover + label:before { + border-color: var( --color-primary--hover ); + // FIXME: Replace with WikimediaUI Base vars when available. + background-color: var( --color-primary--hover ); + } + + &:active + label:before { + border-color: var( --color-primary--active ); + background-color: var( --color-primary--active ); + } + } + } + + &:disabled + label:before { + border-color: var( --color-surface-4 ); + background-color: var( --color-surface-4 ); } } } diff --git a/skinStyles/mediawiki/ui/mediawiki.ui.components.input.less b/skinStyles/mediawiki/ui/mediawiki.ui.components.input.less index eca0ad8c..68cd9c8d 100644 --- a/skinStyles/mediawiki/ui/mediawiki.ui.components.input.less +++ b/skinStyles/mediawiki/ui/mediawiki.ui.components.input.less @@ -1,21 +1,25 @@ /* - * Citizen - Inputs - * https://starcitizen.tools + * Citizen + * + * SkinStyles for MediaWiki UI + * Module: mediawiki.ui.input + * Version: Core REL1_35 086b4f1 + * + * Date: 2021-07-27 */ -@import '../../../resources/variables.less'; - .mw-ui-input { - border: 1px solid var( --border-color-input ); - background-color: var( --background-color-input ); - color: var( --color-base ); + border-color: var( --border-color-base ); + background-color: var( --color-surface-1 ); + color: var( --color-base--emphasized ); &:hover { - border-color: var( --border-color-input--hover ); + border-color: var( --border-color-base--darker ); } &:disabled { - border-color: var( --background-color-framed--active ); + border-color: var( --border-color-base--darker ); + background-color: var( --color-surface-3 ); color: var( --color-base--subtle ); } }