StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-24 06:24:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: simplify background color variables in core styles

Browse source 
--background-color-dp-XX is soft depreciated, please use --color-surface-X instead
This commit is contained in:
alistair3149 2021-07-25 19:16:05 -04:00
parent 4190ab1904
commit 7dc0d14c70
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
14 changed files with 66 additions and 35 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
resources/mixins.less
View file

@ -3,6 +3,16 @@
* https://starcitizen.tools
*/
.citizen-card( @border-radius: true ) {
border: 1px solid var( --border-color-base );
background-color: var( --color-surface-1 );
box-shadow: 0 14px 28px rgba( 0, 0, 0, 0.0625 ), 0 10px 10px rgba( 0, 0, 0, 0.055 );
& when ( @border-radius ) {
border-radius: var( --border-radius--medium );
}
}
// To hide objects, but keep them accessible for screen-readers
.hidden() {
position: absolute;
@ -59,14 +69,6 @@
content: '';
}
// Material-like menu
.menu-container() {
display: block;
padding: 8px 0;
background-color: var( --background-color-dp-08 );
border-radius: var( --border-radius--medium );
}
.menu-item-link() {
display: flex;
color: var( --color-base ) !important;

5
resources/skins.citizen.preferences/skins.citizen.preferences.less
View file

@ -38,10 +38,7 @@
top: var( --height-header );
right: var( --padding-page );
left: var( --padding-page );
border: 1px solid var( --border-color-base--lighter );
background: var( --background-color-dp-08 );
border-radius: var( --border-radius--medium );
.boxshadow(4);
.citizen-card;
fieldset {
padding: 10px var( --padding-page );

4
resources/skins.citizen.scripts/skin.js
View file

@ -122,6 +122,10 @@ function main( window ) {
}, false );
mw.loader.load( 'skins.citizen.preferences' );
// Soft depreciation message for CSS var
// TODO: Remove when hard depreciated
mw.log.warn( 'CITIZEN: --background-color-dp-XX is depreciated; use --color-surface-X instead.' );
}
main( window );

6
resources/skins.citizen.search/skins.citizen.search.less
View file

@ -10,11 +10,9 @@
width: 100%;
max-height: ~'calc( 100vh - var( --height-header ) )';
box-sizing: border-box;
border: 1px solid var( --border-color-base--lighter );
margin: 0;
background: var( --background-color-dp-08 );
border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
.boxshadow(4);
.citizen-card( @border-radius: false );
&-suggestion {
padding-top: 6px;
@ -115,7 +113,7 @@
height: var( --border-radius--small );
margin-top: ~'calc( var( --border-radius--small ) * -1 )';
margin-left: -1px;
background: var( --background-color-dp-08 );
background: var( --color-surface-1 );
content: '';
}
}

6
resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less
View file

@ -169,7 +169,7 @@
z-index: 3;
width: ~'calc( 100% - var( --padding-page ) * 2 )';
padding: 20px var( --padding-page ) 10px var( --padding-page );
background: var( --background-color-dp-04 );
background: var( --color-surface-1 );
border-radius: var( --border-radius--large ) var( --border-radius--large ) 0 0;
}
@ -177,9 +177,9 @@
display: block !important; // So that animation is visible
max-height: ~'calc( 100vh - var( --height-header ) * 3 )';
padding: 0 var( --padding-page ) 20px var( --padding-page ); // hardcoded for now
border: 1px solid var( --border-color-base--lighter );
border: 1px solid var( --border-color-base );
margin: 45px 0 0 0 !important;
background: var( --background-color-dp-04 );
background: var( --color-surface-1 );
border-radius: 0 0 var( --border-radius--large ) var( --border-radius--large );
/**

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

@ -126,14 +126,13 @@
&-input {
width: 200px;
padding: 8px;
background: var( --background-color-dp-03 );
background: var( --color-surface-1 );
border-radius: var( --border-radius--small );
text-align: center;
transition: @transition-background-quick;
.boxshadow(1);
&:focus {
background: var( --background-color-dp-08 );
outline: 0;
.boxshadow(3);
}

2
resources/skins.citizen.styles/Header.less
View file

@ -32,7 +32,7 @@
position: absolute;
right: 0;
left: 0;
box-shadow: 0 0 ~'calc( var( --height-header ) - 15px )' var( --height-header ) var( --background-color-dp-00 );
box-shadow: 0 0 ~'calc( var( --height-header ) - 15px )' var( --height-header ) var( --color-surface-0 );
content: '';
}

5
resources/skins.citizen.styles/Pagetools.less
View file

@ -19,14 +19,13 @@
z-index: -1;
right: var( --padding-page );
left: var( --padding-page );
border: 1px solid var( --border-color-base--lighter );
padding-top: 5px;
margin-top: 5px;
cursor: auto; // reset cursor pointer set by parent
opacity: 0;
pointer-events: none;
transition: @transition-opacity-quick, @transition-box-shadow-quick;
.menu-container;
.boxshadow(4);
.citizen-card;
a {
.menu-item-link;

5
resources/skins.citizen.styles/Personalmenu.less
View file

@ -61,10 +61,7 @@
ul {
overflow: hidden; // So that hover state is rounded
border: 1px solid var( --border-color-base--lighter );
background-color: var( --background-color-dp-08 );
border-radius: var( --border-radius--medium );
.boxshadow(4);
.citizen-card;
}
li:not( #pt-usergroups ):not( #pt-userpage ) {

7
resources/skins.citizen.styles/Searchbox.less
View file

@ -208,14 +208,12 @@
max-width: ~'calc( 100vw - var( --padding-page ) )';
height: var( --height-search-bar );
padding: 8px ~'calc( var( --height-search-bar ) * 2 )' 8px var( --height-search-bar );
border: 1px solid var( --border-color-base--lighter );
appearance: none;
background: var( --background-color-dp-03 );
border-radius: var( --border-radius--small );
transition: @transition-background-quick, @transition-box-shadow-quick;
.citizen-card( @border-radius: false );
&:focus {
background-color: var( --background-color-dp-08 );
outline: 0;
.boxshadow(5);
}
@ -266,9 +264,8 @@
bottom: 0;
left: 0;
display: block;
background: var( --background-color-dp-03 );
background: rgba( 0, 0, 0, 0.7 );
content: '';
opacity: 0.9;
}
}
}

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

@ -10,7 +10,7 @@ body {
min-height: 100%;
padding: 0;
margin: 0;
background: var( --background-color-dp-00 );
background: var( --color-surface-0 );
color: var( --color-base );
}

23
resources/skins.citizen.styles/common/theme.less Normal file
View file

@ -0,0 +1,23 @@
@import '../../variables.less';
/**
* Base theme
*/
:root {
--color-surface-0: @color-surface-0;
--color-surface-1: @color-surface-1;
--color-surface-2: @color-surface-2;
--color-surface-3: @color-surface-3;
--color-surface-4: @color-surface-4;
}
/**
* Dark theme
*/
:root.skin-citizen-dark {
--color-surface-0: @color-surface-0-dark;
--color-surface-1: @color-surface-1-dark;
--color-surface-2: @color-surface-2-dark;
--color-surface-3: @color-surface-3-dark;
--color-surface-4: @color-surface-4-dark;
}

1
resources/skins.citizen.styles/skin.less
View file

@ -5,6 +5,7 @@
@import 'common/typography.less';
@media screen {
@import 'common/theme.less';
@import 'common/cssvariables.less';
@import 'layout.less';
@import 'common/common.less';

14
resources/variables.less
View file

@ -33,6 +33,20 @@
@width-breakpoint-desktop-extrawide: 2000px;
/* == Colors == */
/* Base theme */
@color-surface-0: #fff;
@color-surface-1: #fff;
@color-surface-2: #f8f9fa;
@color-surface-3: #eaecf0;
@color-surface-4: #c8ccd1;
/* Dark theme */
@color-surface-0-dark: #131a21;
@color-surface-1-dark: #242a31;
@color-surface-2-dark: #282f35;
@color-surface-3-dark: #30363c;
@color-surface-4-dark: #363c42;
/**
* Based WikimediaUI (`wmui`) color palette
* See https://design.wikimedia.org/style-guide/visual-style_colors.html