StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-12-01 01:16:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: update input field styles

Browse source
This commit is contained in:
alistair3149 2021-01-14 19:09:15 -05:00
parent 745db063bb
commit d647a8453d
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
6 changed files with 22 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
resources/skins.citizen.styles/common/common.less
View file

@ -73,12 +73,13 @@ input,
select,
textarea {
border: 1px solid var( --border-color-input );
background-color: var( --background-color-framed );
background-color: var( --background-color-input );
color: inherit;
}
fieldset {
padding: @content-margin-top / 2 @margin-side;
border: 1px solid var( --border-color-base );
margin: @content-margin-top 0;
}

2
resources/skins.citizen.styles/common/rootvariables.less
View file

@ -25,6 +25,7 @@
--background-color-framed: @background-color-framed;
--background-color-framed--hover: @background-color-framed--hover;
--background-color-framed--active: @background-color-framed--active;
--background-color-input: @background-color-input;
--background-color-icon: @background-color-icon;
--background-color-icon--hover: @background-color-icon--hover;
--background-color-icon--active: @background-color-icon--active;
@ -87,6 +88,7 @@
--background-color-framed: @dark-background-color-framed;
--background-color-framed--hover: @dark-background-color-framed--hover;
--background-color-framed--active: @dark-background-color-framed--active;
--background-color-input: @dark-background-color-input;
--background-color-icon: @dark-background-color-icon;
--background-color-icon--hover: @dark-background-color-icon--hover;
--background-color-icon--active: @dark-background-color-icon--active;

10
resources/variables.less
View file

@ -78,6 +78,8 @@
@background-color-framed--hover: @color-base100;
@background-color-framed--active: @color-base70;
@background-color-input: rgba( 255, 255, 255, 0.2 );
@background-color-icon: rgba( 0, 0, 0, 0.4 );
@background-color-icon--hover: rgba( 0, 0, 0, 0.6 );
@background-color-icon--active: rgba( 0, 0, 0, 0.8 );
@ -117,7 +119,8 @@
@border-color-base: rgba( 0, 0, 0, 0.05 );
@border-color-base--lighter: rgba( 0, 0, 0, 0.02 );
@border-color-base--darker: rgba( 0, 0, 0, 0.08 );
@border-color-input: rgba( 0, 0, 0, 0.2 );
// To blend better with OOUI styles
@border-color-input: @border-color-base;
@border-color-input--hover: rgba( 0, 0, 0, 0.4 );
/* Background Colors */
@ -135,6 +138,9 @@
@dark-background-color-framed: @dark-color-base10;
@dark-background-color-framed--hover: @dark-color-base30;
@dark-background-color-framed--active: @dark-color-base0;
@dark-background-color-input: rgba( 0, 0, 0, 0.2 );
@dark-background-color-icon: rgba( 255, 255, 255, 0.4 );
@dark-background-color-icon--hover: rgba( 255, 255, 255, 0.6 );
@dark-background-color-icon--active: rgba( 255, 255, 255, 0.2 );
@ -163,7 +169,7 @@
@dark-border-color-base: rgba( 255, 255, 255, 0.05 );
@dark-border-color-base--lighter: rgba( 255, 255, 255, 0.02 );
@dark-border-color-base--darker: rgba( 255, 255, 255, 0.08 );
@dark-border-color-input: rgba( 255, 255, 255, 0.4 );
@dark-border-color-input: @dark-border-color-base;
@dark-border-color-input--hover: rgba( 255, 255, 255, 0.5 );
/* Technical debt below */

3
skinStyles/extensions/VisualEditor/ext.visualEditor.less
View file

@ -60,8 +60,8 @@
&-mwSaveDialog {
&-options {
background-color: var( --background-color-framed );
border-color: var( --border-color-base );
background-color: var( --background-color-framed );
}
&--editSummary-count {
@ -179,4 +179,3 @@
}
}
}

8
skinStyles/oojs/oojs-ui-core.less
View file

@ -351,11 +351,11 @@
.oo-ui-checkboxInputWidget [ type='checkbox' ] + span {
border-color: var( --border-color-input );
background-color: var( --background-color-dp-00 );
background-color: var( --background-color-input );
}
.oo-ui-checkboxInputWidget [ type='checkbox' ]:indeterminate + span:before {
background-color: var( --background-color-dp-00 );
background-color: var( --background-color-input );
}
.oo-ui-checkboxInputWidget [ type='checkbox' ]:disabled + span {
@ -446,7 +446,7 @@
.oo-ui-radioInputWidget [ type='radio' ] + span {
border-color: var( --border-color-input );
background-color: var( --background-color-dp-00 );
background-color: var( --background-color-input );
}
.oo-ui-radioInputWidget [ type='radio' ]:disabled + span {
@ -482,7 +482,7 @@
.oo-ui-textInputWidget .oo-ui-inputWidget-input {
border: 1px solid var( --border-color-input );
background-color: var( --background-color-dp-00 );
background-color: var( --background-color-input );
color: var( --color-base--emphasized );
}

8
skinStyles/oojs/oojs-ui-widgets.less
View file

@ -111,11 +111,11 @@
.oo-ui-selectFileWidget-dropTarget {
border: 1px solid var( --border-color-input );
background-color: var( --background-color-dp-00 );
background-color: var( --background-color-input );
}
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
background-color: var( --background-color-dp-00 );
background-color: var( --background-color-input );
}
.oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget:hover {
@ -158,7 +158,7 @@
}
.oo-ui-outlineControlsWidget {
background-color: var( --background-color-dp-00 );
background-color: var( --background-color-input );
}
.oo-ui-tabSelectWidget-framed {
@ -236,7 +236,7 @@
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
background-color: var( --background-color-dp-00 );
background-color: var( --background-color-input );
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle {