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

refactor: merge CSS variables in core styles

Browse source
This commit is contained in:
alistair3149 2021-01-12 14:31:35 -05:00
parent dde77d19dc
commit 9d3df250de
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
21 changed files with 460 additions and 424 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
includes/SkinCitizen.php
View file

@ -390,6 +390,7 @@ class SkinCitizen extends SkinMustache {
$skin = $this; $skin = $this;
return [ return [
'data-logos' => ResourceLoaderSkinModule::getAvailableLogos( $this->getConfig() ),
'msg-sitetitle' => $skin->msg( 'sitetitle' )->text(), 'msg-sitetitle' => $skin->msg( 'sitetitle' )->text(),
'html-mainpage-attributes' => Xml::expandAttributes( 'html-mainpage-attributes' => Xml::expandAttributes(
Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [ Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [

30
includes/templates/Logo.mustache
View file

@ -1,6 +1,28 @@
{{! {{!
LogoDefinition logo
string html-mainpage-attributes link to the main page
string msg-sitesubtitle the contents of the sitesubtitle message key
}} }}
<a {{{html-mainpage-attributes}}} class="mw-wiki-logo"> <a {{{html-mainpage-attributes}}} class="mw-logo">
</a> {{#data-logos}}
<div class="mw-wiki-title">{{{msg-sitetitle}}}</div> {{#icon}}
{{! alt is provided for valid HTML but given aria-hidden not needed. }}
<img class="mw-logo-icon" src="{{.}}" alt=""
aria-hidden="true" height="50" width="50">
{{/icon}}
<span class="mw-logo-container">
{{#wordmark}}
<img class="mw-logo-wordmark" alt="{{msg-sitetitle}}"
src="{{src}}" width="{{width}}" height="{{height}}">
{{/wordmark}}
{{^wordmark}}
<strong class="mw-logo-wordmark">{{msg-sitetitle}}</strong>
{{/wordmark}}
{{#tagline}}
<img class="mw-logo-tagline"
alt="{{msg-sitesubtitle}}"
src="{{src}}" width="{{width}}" height="{{height}}">
{{/tagline}}
</span>
{{/data-logos}}
</a>

16
resources/mixins.less
View file

@ -62,29 +62,23 @@
.menu-container() { .menu-container() {
display: block; display: block;
padding: 8px 0; padding: 8px 0;
background-color: var( --menu-container-background-color ); background-color: var( --background-color-dp-08 );
border-radius: @border-radius-medium; border-radius: @border-radius-medium;
} }
.menu-item-link() { .menu-item-link() {
display: flex; display: flex;
color: var( --menu-item-link-color ) !important; color: var( --color-base ) !important;
font-weight: 450;
transition: @transition-background-quick, @transition-color-quick; transition: @transition-background-quick, @transition-color-quick;
} }
.menu-item-link-hover() { .menu-item-link-hover() {
background-color: var( --menu-item-link-hover-background-color ); background-color: var( --background-color-quiet--hover );
color: var( --menu-item-link-hover-color ) !important;
} }
.menu-item-link-active() { .menu-item-link-active() {
background-color: var( --menu-item-link-active-focus-background-color ); background-color: var( --background-color-quiet--active );
color: var( --menu-item-link-active-focus-color ) !important;
}
.menu-item-link-focus() {
background-color: var( --menu-item-link-active-focus-background-color );
color: var( --menu-item-link-active-focus-color ) !important;
} }
// Button Styles // Button Styles

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

@ -23,7 +23,7 @@
--toc-title-h2-color: @base-50; --toc-title-h2-color: @base-50;
--toc-li-active-color: @dark-color-link; --toc-li-active-color: @color-link--active;
--toc-li-active-a-li-color: @dark-text-80; --toc-li-active-a-li-color: @dark-text-80;
--toc-a-color: @dark-text-70; --toc-a-color: @dark-text-70;

14
resources/skins.citizen.styles/Catlinks.less
View file

@ -34,23 +34,23 @@
a { a {
display: block; display: block;
padding: @margin-side / 4 @margin-side / 2; padding: @margin-side / 4 @margin-side / 2;
border: 1px solid var( --catlinks-ul-li-a-border-color ); border: 1px solid var( --border-color-base--lighter );
background-color: var( --catlinks-ul-li-a-background-color ); background-color: var( --background-color-framed );
color: var( --catlinks-ul-li-a-color ) !important; // Overr color: var( --color-base--subtle ) !important; // Override
transition: @transition-background-quick, @transition-color-quick, @transition-border-quick, @transition-transform-quick, @transition-box-shadow-quick; transition: @transition-background-quick, @transition-color-quick, @transition-border-quick, @transition-transform-quick, @transition-box-shadow-quick;
.boxshadow(1); .boxshadow(1);
&:hover { &:hover {
border-color: @color-link-active; border-color: @color-link--hover;
background-color: @color-link-active; background-color: @color-link--hover;
color: @base-100 !important; color: @base-100 !important;
transform: translateY( -2px ); transform: translateY( -2px );
.boxshadow(2); .boxshadow(2);
} }
&.new:hover { &.new:hover {
border-color: @color-link-new-active; border-color: @color-link-new--hover;
background-color: @color-link-new-active; background-color: @color-link-new--hover;
} }
} }
} }

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

@ -40,12 +40,6 @@
transform: rotate( 45deg ) translate( -5px, -7px ); transform: rotate( 45deg ) translate( -5px, -7px );
} }
} }
.mw-drawer-button-icon {
&-div {
opacity: @opacity-icon;
}
}
} }
// Show drawer // Show drawer
@ -65,7 +59,17 @@
.mw-drawer-button-icon { .mw-drawer-button-icon {
&-div { &-div {
opacity: @opacity-icon-active; background-color: var( --background-color-icon--hover );
}
}
}
}
&:active {
~ #mw-drawer-button-icon {
.mw-drawer-button-icon {
&-div {
background-color: var( --background-color-icon--active );
} }
} }
} }
@ -81,7 +85,7 @@
max-width: 100vw; // in case if someone has super small screen max-width: 100vw; // in case if someone has super small screen
height: 100%; height: 100%;
flex-direction: column; flex-direction: column;
background: var( --drawer-mw-drawer-menu-background-color ); background-color: var( --background-color-dp-16 );
border-radius: 0 @border-radius-large @border-radius-large 0; border-radius: 0 @border-radius-large @border-radius-large 0;
transform: translate( -110%, 0 ); // shadow bleeding with 100% transform: translate( -110%, 0 ); // shadow bleeding with 100%
transform-origin: 0 0; transform-origin: 0 0;
@ -93,23 +97,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: @header-height @margin-side @margin-side / 2 @margin-side; padding: @header-height @margin-side @margin-side / 2 @margin-side;
border-bottom: 1px solid var( --drawer-mw-drawer-menu-logo-border-color ); border-bottom: 1px solid var( --border-color-base );
.mw-wiki-logo {
display: block;
width: 120px;
height: 120px;
margin-bottom: @margin-side / 2;
background-position: left center;
background-repeat: no-repeat;
background-size: contain;
}
.mw-wiki-title {
height: 0;
color: var( --drawer-mw-drawer-menu-logo-mw-wiki-title-color );
opacity: 0;
}
} }
&-main { &-main {
@ -121,21 +109,22 @@
h3 { h3 {
padding: @margin-side / 2 @margin-side; padding: @margin-side / 2 @margin-side;
margin: @margin-side / 2 0 0 0; margin: @margin-side / 2 0 0 0;
color: var( --drawer-mw-drawer-menu-main-h3-color ); color: var( --color-base--subtle );
font-size: @ui-menu-header; font-size: inherit;
font-weight: normal; font-weight: normal;
letter-spacing: 1px; letter-spacing: 0.75px;
} }
} }
&-main, &-main,
&-user { &-user {
font-size: @ui-menu-text;
a { a {
.menu-item-link; .menu-item-link;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: @padding-menu-item-big; padding: @padding-menu-item-big;
font-size: @ui-menu-text-big;
&:after { &:after {
.resource-loader-list-icon; .resource-loader-list-icon;
@ -157,10 +146,6 @@
&:active { &:active {
.menu-item-link-active; .menu-item-link-active;
} }
&:focus {
.menu-item-link-focus;
}
} }
} }
} }
@ -175,9 +160,8 @@
width: @icon-size; width: @icon-size;
height: 2px; height: 2px;
margin: 1.5px 0; margin: 1.5px 0;
background: var( --drawer-mw-drawer-button-icon-div-background-color ); background-color: var( --background-color-icon );
border-radius: @border-radius-large; border-radius: @border-radius-large;
opacity: @opacity-icon;
transform-origin: 4px 0; transform-origin: 4px 0;
transition: @transition-transform-quick, @transition-background-quick, @transition-opacity-quick; transition: @transition-transform-quick, @transition-background-quick, @transition-opacity-quick;
} }
@ -187,7 +171,7 @@
#p-personal { #p-personal {
padding-top: @margin-side / 2; padding-top: @margin-side / 2;
border-top: 1px solid var( --drawer-p-personal-border-color ); border-top: 1px solid var( --border-color-base );
#pt-userpage { #pt-userpage {
margin-bottom: @margin-side / 2; margin-bottom: @margin-side / 2;
@ -255,43 +239,5 @@
} }
} }
} }
&-button {
&:hover {
~ #mw-drawer-button-icon {
.mw-drawer-button-icon {
&-div {
opacity: 0.6;
}
}
}
}
}
}
.mw-drawer {
&-button {
&-icon {
&-div {
opacity: 0.4;
}
}
}
}
}
// Only show title when screen height is less than 800px
@media ( max-height: 800px ) {
#mw-drawer-menu-logo {
.mw-wiki-logo {
height: 0;
margin: 0;
}
.mw-wiki-title {
height: auto;
margin-top: 20px;
opacity: 1;
}
} }
} }

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

@ -28,7 +28,7 @@
z-index: -1; z-index: -1;
right: 0; right: 0;
left: 0; left: 0;
box-shadow: 0 0 50px @header-height var( --header-mw-header-background-box-shadow-color ); box-shadow: 0 0 50px @header-height var( --background-color-dp-00 );
} }
} }

19
resources/skins.citizen.styles/Logo.less Normal file
View file

@ -0,0 +1,19 @@
.mw-logo {
display: flex;
flex-direction: column;
}
.mw-logo-icon {
margin-bottom: 10px;
}
.mw-logo-wordmark {
display: block;
}
// Only show title when screen height is less than 800px
@media ( max-height: 800px ) {
.mw-logo-icon {
display: none;
}
}

13
resources/skins.citizen.styles/Pagelinks.less
View file

@ -17,17 +17,22 @@
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
border: 1px solid var( --pagelinks-p-namespaces-ul-li-a-border-color ); border: 1px solid var( --border-color-base--lighter );
background-color: var( --pagelinks-p-namespaces-ul-li-a-background-color ); background-color: var( --background-color-framed );
color: var( --pagelinks-p-namespaces-ul-li-a-color ); color: var( --color-base--subtle );
transition: @transition-background-quick, @transition-box-shadow-quick; transition: @transition-background-quick, @transition-box-shadow-quick;
.boxshadow(1); .boxshadow(1);
&:hover { &:hover {
background-color: var( --pagelinks-p-namespaces-ul-li-a-hover-background-color ); background-color: var( --background-color-framed--hover );
.boxshadow(2); .boxshadow(2);
} }
&:active {
background-color: var( --background-color-framed--active );
.boxshadow(0);
}
&:after { &:after {
position: relative; position: relative;
width: 14px; width: 14px;

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

@ -80,10 +80,6 @@
&:active { &:active {
.menu-item-link-active; .menu-item-link-active;
} }
&:focus {
.menu-item-link-focus;
}
} }
} }

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

@ -58,7 +58,6 @@
height: @header-height; height: @header-height;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
opacity: @opacity-icon;
transition: @transition-transform-quick, @transition-height-quick, @transition-opacity-quick, @transition-border-color-quick; transition: @transition-transform-quick, @transition-height-quick, @transition-opacity-quick, @transition-border-color-quick;
&-1 { &-1 {
@ -71,7 +70,8 @@
&-2 { &-2 {
width: 10px; width: 10px;
height: 10px; height: 10px;
border: solid 2px var( --search-toggle-icon-2-border-color ); /* Use background-color variable because it is a part of the logo */
border: solid 2px var( --background-color-icon );
margin-top: -2px; margin-top: -2px;
margin-left: -2px; margin-left: -2px;
border-radius: 100%; border-radius: 100%;
@ -89,7 +89,7 @@
&-1, &-1,
&-3 { &-3 {
width: 2px; width: 2px;
background-color: var( --search-toggle-icon-1-3-background-color ); background-color: var( --background-color-icon );
} }
} }
@ -144,6 +144,22 @@
&-3 { &-3 {
height: 12px; height: 12px;
} }
&-1,
&-3 {
background-color: var( --background-color-icon--hover );
}
}
}
}
&:active {
~ #search-toggle-icon {
#search-toggle-icon {
&-1,
&-3 {
background-color: var( --background-color-icon--active );
}
} }
} }
} }
@ -151,13 +167,30 @@
&:hover { &:hover {
~ #search-toggle-icon { ~ #search-toggle-icon {
opacity: @opacity-icon-active;
#search-toggle-icon { #search-toggle-icon {
&-1 { &-1 {
height: 6px; height: 6px;
background-color: var( --background-color-icon--hover );
transform: translate( 2px, 2px ) rotate( -45deg ); transform: translate( 2px, 2px ) rotate( -45deg );
} }
&-2 {
border-color: var( --background-color-icon--hover );
}
}
}
}
&:active {
~ #search-toggle-icon {
#search-toggle-icon {
&-1 {
background-color: var( --background-color-icon--active );
}
&-2 {
border-color: var( --background-color-icon--active );
}
} }
} }
} }
@ -169,11 +202,11 @@
max-width: calc( ~'100vw -'@margin-side ); max-width: calc( ~'100vw -'@margin-side );
height: @search-bar-height; height: @search-bar-height;
padding: 8px @icon-box-size + @icon-padding + @search-bar-height + @margin-side / 2 8px @search-bar-height; padding: 8px @icon-box-size + @icon-padding + @search-bar-height + @margin-side / 2 8px @search-bar-height;
border: 1px solid var( --search-Input-border-color ); border: 1px solid var( --border-color-base--lighter );
-webkit-appearance: none; -webkit-appearance: none;
-moz-appearance: none; -moz-appearance: none;
appearance: none; appearance: none;
background: var( --search-Input-background-color ); background: var( --background-color-dp-03 );
border-radius: @border-radius-small; border-radius: @border-radius-small;
transition: @transition-width, @transition-box-shadow; transition: @transition-width, @transition-box-shadow;
@ -263,18 +296,6 @@
opacity: 0.6; opacity: 0.6;
} }
} }
&-toggle {
&-icon {
opacity: 0.4;
}
&:hover {
~ #search-toggle-icon {
opacity: 0.6;
}
}
}
} }
} }
@ -287,7 +308,7 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
display: block; display: block;
background: var( --search-searchform-before-background-color ); background: var( --background-color-dp-03 );
content: ''; content: '';
opacity: 0.9; opacity: 0.9;
} }

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

@ -15,7 +15,7 @@
} }
a.mw-wiki-title { a.mw-wiki-title {
color: var( --sidebar-a-mw-wiki-title-color ); color: var( --color-base--subtle );
} }
@media ( max-width: @screen2 ) { @media ( max-width: @screen2 ) {

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

@ -11,11 +11,20 @@ body {
min-height: 100%; min-height: 100%;
padding: 0; padding: 0;
margin: 0; margin: 0;
background: var( --common-html-background ); background: var( --background-color-dp-00 );
color: var( --common-html-color ); color: var( --color-base );
overflow-x: hidden; // prevent overflow from scrollbar overflow-x: hidden; // prevent overflow from scrollbar
} }
h1,
h2,
h3,
h4,
h5,
h6 {
color: var( --color-base--emphasized );
}
table { table {
display: block; display: block;
overflow: auto; overflow: auto;
@ -45,9 +54,8 @@ dl {
pre, pre,
code, code,
.mw-code { .mw-code {
border: var( --common-pre-border ); border: 1px solid var( --border-color-base );
background-color: var( --common-pre-background ); background-color: var( --background-color-framed );
color: var( --common-pre-color );
} }
code { code {
@ -64,16 +72,13 @@ pre,
input, input,
select, select,
textarea { textarea {
border: var( --common-input-border ); background-color: var( --background-color-framed );
background-color: var( --common-input-background ); color: inherit;
color: var( --common-input-color );
} }
fieldset { fieldset {
padding: @content-margin-top / 2 @margin-side; padding: @content-margin-top / 2 @margin-side;
border-color: var( --common-fieldset-border-color );
margin: @content-margin-top 0; margin: @content-margin-top 0;
color: var( --common-fieldset-color );
} }
fieldset > table { fieldset > table {
@ -83,7 +88,7 @@ fieldset > table {
legend { legend {
padding: 4px; padding: 4px;
margin: 0; margin: 0;
color: var( --common-legend-color ); color: var( --color-base--subtle );
} }
input, input,
@ -92,7 +97,7 @@ code,
fieldset, fieldset,
select, select,
textarea { textarea {
border: var( --common-input-border ); border: 1px solid var( --border-color-base );
} }
textarea { textarea {
@ -130,7 +135,7 @@ td {
} }
a { a {
color: @color-link; color: var( --color-link );
text-decoration: none !important; text-decoration: none !important;
&:not( [ href ] ) { &:not( [ href ] ) {
@ -139,14 +144,22 @@ a {
} }
&:hover { &:hover {
color: var( --common-link-color ); color: var( --color-link--hover );
}
&:active {
color: var( --color-link--active );
} }
&.new { &.new {
color: var( --common-link-new-color ) !important; // Override visited color: var( --color-link-new ) !important; // Override visited
&:hover { &:hover {
color: @color-link-new-active !important; color: var( --color-link-new--hover ) !important;
}
&:active {
color: var( --color-link-new--active ) !important;
} }
} }
@ -168,7 +181,7 @@ a {
.error { .error {
padding: 2px 4px; padding: 2px 4px;
background-color: @red-90; background-color: var( --background-color-destructive );
} }
.nowrap { .nowrap {
@ -237,13 +250,27 @@ figcaption,
&.new { &.new {
display: block; display: block;
padding: @margin-side / 2; padding: @margin-side / 2;
background-color: @base-80; background-color: var( --background-color-framed );
transition: @transition-background-quick, @transition-color-quick; transition: @transition-background-quick, @transition-color-quick;
} }
} }
} }
} }
div.tleft,
div.floatleft,
table.floatleft {
clear: left;
float: left;
}
div.tright,
div.floatright,
table.floatright {
clear: right;
float: right;
}
.mw-indicators { .mw-indicators {
/* Ensure that this is displayed on top of .mw-body-content and clickable */ /* Ensure that this is displayed on top of .mw-body-content and clickable */
position: relative; position: relative;
@ -251,6 +278,15 @@ figcaption,
float: right; float: right;
} }
.printfooter {
display: none;
}
div.patrollink {
font-size: 75%;
text-align: right;
}
/* Wider page width for special pages */ /* Wider page width for special pages */
.ns--1 { .ns--1 {
.firstHeading, .firstHeading,

28
resources/skins.citizen.styles/common/content.less
View file

@ -1,13 +1,11 @@
.firstHeading { .firstHeading {
margin: 0; margin: 0;
color: var( --content-firstHeading-color );
overflow-wrap: break-word; // Break word instead of overflow if title is too long overflow-wrap: break-word; // Break word instead of overflow if title is too long
} }
#siteSub { #siteSub {
display: block; display: block;
margin: 0.4rem 0 1.6rem; margin: 0.4rem 0 1.6rem;
color: var( --content-sub-color );
} }
.firstHeading, .firstHeading,
@ -15,9 +13,10 @@
.content-center; .content-center;
} }
#siteSub,
#contentSub, #contentSub,
#contentSub2 { #contentSub2 {
color: var( --content-sub-color ); color: var( --color-base--subtle );
} }
#mw-content-text { #mw-content-text {
@ -26,10 +25,10 @@
* Only apply to internal links in article * Only apply to internal links in article
*/ */
a[ href^='/' ]:not( .image ) { a[ href^='/' ]:not( .image ) {
.link-content-text(@color-link-active); .link-content-text(@color-link--active);
&.new { &.new {
background-image: linear-gradient( to right, @color-link-new-active 0, @color-link-new-active 100% ); background-image: linear-gradient( to right, @color-link-new--hover 0, @color-link-new--hover 100% );
} }
} }
/* /*
@ -162,7 +161,6 @@
h6 { h6 {
padding: 0; padding: 0;
margin: 0; margin: 0;
color: @color-content-header;
} }
h1, h1,
@ -214,24 +212,6 @@
} }
} }
.skin-citizen-dark {
.mw-body .firstHeading,
.mw-body-content h1,
.mw-body-content h2,
.mw-body-content h3,
.mw-body-content h4,
.mw-body-content h5,
.mw-body-content h6 {
color: var( --content-firstHeading-color );
}
.mw-body-content #contentSub,
.mw-body-content #contentSub2,
.mw-body #siteSub {
color: var( --content-sub-color ) !important;
}
}
@media ( max-width: @screen0 ) { @media ( max-width: @screen0 ) {
#mw-content-text { #mw-content-text {
> .mw-parser-output { > .mw-parser-output {

84
resources/skins.citizen.styles/common/rootvariables.less Normal file
View file

@ -0,0 +1,84 @@
/*
* Citizen - CSS variables
* https://starcitizen.tools
*/
@import '../../variables.less';
:root {
/* == Colors == */
/* Background Colors */
--background-color-dp-00: @background-color-dp-00;
--background-color-dp-01: @background-color-dp-01;
--background-color-dp-02: @background-color-dp-02;
--background-color-dp-03: @background-color-dp-03;
--background-color-dp-04: @background-color-dp-04;
--background-color-dp-06: @background-color-dp-06;
--background-color-dp-08: @background-color-dp-08;
--background-color-dp-12: @background-color-dp-12;
--background-color-dp-16: @background-color-dp-16;
--background-color-dp-24: @background-color-dp-24;
--background-color-framed: @background-color-framed;
--background-color-framed--hover: @background-color-framed--hover;
--background-color-framed--active: @background-color-framed--active;
--background-color-icon: @background-color-icon;
--background-color-icon--hover: @background-color-icon--hover;
--background-color-icon--active: @background-color-icon--active;
--background-color-quiet--hover: @background-color-quiet--hover;
--background-color-quiet--active: @background-color-quiet--active;
--background-color-destructive: @background-color-destructive;
/* Foreground Colors */
--color-base: @color-base;
--color-base--emphasized: @color-base--emphasized;
--color-base--subtle: @color-base--subtle;
--color-link: @color-link;
--color-link--hover: @color-link--hover;
--color-link--active: @color-link--active;
--color-link-new: @color-link-new;
--color-link-new--hover: @color-link-new--hover;
--color-link-new--active: @color-link-new--active;
/* Border Colors */
--border-color-base: @border-color-base;
--border-color-base--lighter: @border-color-base--lighter;
--border-color-base--darker: @border-color-base--darker;
}
:root.skin-citizen-dark {
/* == Colors == */
/* Background Colors */
--background-color-dp-00: @dark-background-color-dp-00;
--background-color-dp-01: @dark-background-color-dp-01;
--background-color-dp-02: @dark-background-color-dp-02;
--background-color-dp-03: @dark-background-color-dp-03;
--background-color-dp-04: @dark-background-color-dp-04;
--background-color-dp-06: @dark-background-color-dp-06;
--background-color-dp-08: @dark-background-color-dp-08;
--background-color-dp-12: @dark-background-color-dp-12;
--background-color-dp-16: @dark-background-color-dp-16;
--background-color-dp-24: @dark-background-color-dp-24;
--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-icon: @dark-background-color-icon;
--background-color-icon--hover: @dark-background-color-icon--hover;
--background-color-icon--active: @dark-background-color-icon--active;
--background-color-quiet--hover: @dark-background-color-quiet--hover;
--background-color-quiet--active: @dark-background-color-quiet--active;
--background-color-destructive: @dark-background-color-destructive;
/* Foreground Colors */
--color-base: @dark-color-base;
--color-base--emphasized: @dark-color-base--emphasized;
--color-base--subtle: @dark-color-base--subtle;
/* Border Colors */
--border-color-base: @dark-border-color-base;
--border-color-base--lighter: @dark-border-color-base--lighter;
--border-color-base--darker: @dark-border-color-base--darker;
}

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

@ -14,5 +14,5 @@
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
border: 4px solid transparent; border: 4px solid transparent;
background-color: var( --scrollbar-color ); background-color: var( --background-color-icon );
} }

12
resources/skins.citizen.styles/common/wikitable.less
View file

@ -1,8 +1,8 @@
table.wikitable { table.wikitable {
border: 0; border: 0; // Override core MW styles
background-color: transparent; background-color: transparent; // Override core MW styles
border-collapse: collapse; border-collapse: collapse;
color: var( --wikitable-color ); color: var( --color-base ); // Override core MW styles
caption { caption {
margin-top: @content-margin-top; margin-top: @content-margin-top;
@ -14,7 +14,7 @@ table.wikitable {
th { th {
background-color: transparent; background-color: transparent;
color: var( --wikitable-tr-th-color ); color: var( --color-base--subtle );
font-size: @content-caption-size; font-size: @content-caption-size;
text-align: left; text-align: left;
} }
@ -27,11 +27,11 @@ table.wikitable {
td { td {
padding: @margin-side / 2 @margin-side @margin-side / 2 0; padding: @margin-side / 2 @margin-side @margin-side / 2 0;
border: 0; border: 0;
border-bottom: 1px solid var( --wikitable-tr-th-border-color ); border-bottom: 1px solid var( --border-color-base );
} }
&:hover { &:hover {
background-color: var( --wikitable-tr-hover-background-color ); background-color: var( --background-color-quiet--hover );
} }
} }
} }

235
resources/skins.citizen.styles/css-vars.less
View file

@ -1,235 +0,0 @@
@import '../variables.less';
/**
This definitely needs to be slimmed down
*/
:root {
/**
Mixins
*/
--menu-item-link-color: @base-30;
--menu-item-link-hover-color: @base-20;
--menu-item-link-hover-background-color: @base-80;
--menu-item-link-active-focus-color: @accent-50;
--menu-item-link-active-focus-background-color: @accent-90;
--menu-container-background-color: @base-100;
/**
Common
*/
--common-html-background: @base-100;
--common-html-color: @base-20;
--common-pre-background: @base-90;
--common-pre-color: @base-0;
--common-pre-border: initial;
--common-input-color: inherit;
--common-input-background: inherit;
--common-input-border: 1px solid @base-80;
--common-fieldset-color: @base-30;
--common-fieldset-border-color: initial;
--common-legend-color: @base-30;
--common-link-color: @color-link;
--common-link-new-color: @color-link-new;
/**
Content
*/
--content-firstHeading-color: @base-10;
--content-sub-color: @base-30;
/**
Scrollbar
*/
--scrollbar-color: @base-70;
/**
Wikitable
*/
--wikitable-color: @base-20;
--wikitable-tr-th-color: @base-30;
--wikitable-tr-th-border-color: @base-80;
--wikitable-tr-hover-background-color: @base-90;
/**
Catlinks
*/
--catlinks-ul-li-a-color: @base-30;
--catlinks-ul-li-a-background-color: @base-90;
--catlinks-ul-li-a-border-color: @base-90;
/**
Drawer
*/
--drawer-mw-drawer-menu-background-color: @menu-background;
--drawer-mw-drawer-menu-logo-border-color: @base-80;
--drawer-mw-drawer-menu-logo-mw-wiki-title-color: inherit;
--drawer-mw-drawer-menu-main-h3-color: @color-item-header;
--drawer-mw-drawer-menu-main-a-color: @dark-text-90;
--drawer-mw-drawer-menu-main-a-hover-color: @dark-bg-60;
--drawer-mw-drawer-menu-main-a-hover-background-color: @dark-text-90;
--drawer-mw-drawer-menu-main-a-active-color: @dark-text-100;
--drawer-mw-drawer-menu-main-a-active-background-color: @accent-10;
--drawer-mw-drawer-button-icon-div-background-color: @base-0;
--drawer-p-personal-border-color: @base-80;
/**
Header
*/
--header-mw-header-background-box-shadow-color: @base-100;
/**
Pagelinks
*/
--pagelinks-p-namespaces-ul-li-a-color: @base-20;
--pagelinks-p-namespaces-ul-li-a-background-color: @base-90;
--pagelinks-p-namespaces-ul-li-a-border-color: @base-80;
--pagelinks-p-namespaces-ul-li-a-hover-background-color: @base-80;
/**
Searchbox
*/
--search-toggle-icon-2-border-color: @base-0;
--search-toggle-icon-1-3-background-color: @base-0;
--search-Input-border-color: @base-90;
--search-Input-background-color: @base-100;
--search-searchform-before-background-color: @base-100;
/**
Sidebar
*/
--sidebar-a-mw-wiki-title-color: inherit;
}
:root.skin-citizen-dark {
/**
Mixins
*/
--menu-item-link-color: @dark-text-80;
--menu-item-link-hover-color: @dark-text-90;
--menu-item-link-hover-background-color: @dark-bg-60;
--menu-item-link-active-focus-color: @dark-text-100;
--menu-item-link-active-focus-background-color: @accent-10;
--menu-container-background-color: @dark-bg-50;
/**
Common
*/
--common-html-background: @dark-bg-0;
--common-html-color: @dark-text-90;
--common-pre-background: @dark-bg-10;
--common-pre-color: @dark-text-90;
--common-pre-border: 1px solid @dark-bg-20;
--common-input-color: @dark-text-80;
--common-input-background: @dark-bg-40;
--common-input-border: 1px solid @dark-bg-50;
--common-fieldset-color: @dark-text-90;
--common-fieldset-border-color: @dark-bg-20;
--common-legend-color: @dark-text-80;
--common-link-color: @dark-color-link;
--common-link-new-color: @dark-color-link-new;
/**
Content
*/
--content-firstHeading-color: @dark-text-100;
--content-sub-color: @dark-text-80;
/**
Scrollbar
*/
--scrollbar-color: @dark-bg-60;
/**
Wikitable
*/
--wikitable-color: @dark-text-90;
--wikitable-tr-th-color: @dark-text-80;
--wikitable-tr-th-border-color: @dark-bg-20;
--wikitable-tr-hover-background-color: @dark-bg-10;
/**
Catlinks
*/
--catlinks-ul-li-a-color: @dark-text-70;
--catlinks-ul-li-a-background-color: @dark-bg-10;
--catlinks-ul-li-a-border-color: @dark-bg-10;
/**
Drawer
*/
--drawer-mw-drawer-menu-background-color: @dark-bg-40;
--drawer-mw-drawer-menu-logo-border-color: @dark-bg-50;
--drawer-mw-drawer-menu-logo-mw-wiki-title-color: @dark-text-100;
--drawer-mw-drawer-menu-main-h3-color: @dark-text-100;
--drawer-mw-drawer-menu-main-a-color: @dark-text-90;
--drawer-mw-drawer-menu-main-a-hover-color: @dark-bg-60;
--drawer-mw-drawer-menu-main-a-hover-background-color: @dark-text-90;
--drawer-mw-drawer-menu-main-a-active-color: @dark-text-100;
--drawer-mw-drawer-menu-main-a-active-background-color: @accent-10;
--drawer-mw-drawer-button-icon-div-background-color: @base-100;
--drawer-p-personal-border-color: @dark-bg-50;
/**
Header
*/
--header-mw-header-background-box-shadow-color: @dark-bg-0;
/**
Pagelinks
*/
--pagelinks-p-namespaces-ul-li-a-color: @dark-text-80;
--pagelinks-p-namespaces-ul-li-a-background-color: @dark-bg-10;
--pagelinks-p-namespaces-ul-li-a-border-color: @dark-bg-20;
--pagelinks-p-namespaces-ul-li-a-hover-background-color: @dark-bg-20;
/**
Searchbox
*/
--search-toggle-icon-2-border-color: @base-100;
--search-toggle-icon-1-3-background-color: @base-100;
--search-Input-border-color: @dark-bg-60;
--search-Input-background-color: @dark-bg-50;
--search-searchform-before-background-color: @dark-bg-50;
/**
Sidebar
*/
--sidebar-a-mw-wiki-title-color: @dark-text-70;
}

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

@ -4,7 +4,7 @@
@import '../mixins.less'; @import '../mixins.less';
@media screen { @media screen {
@import 'css-vars'; @import 'common/rootvariables.less';
@import 'common/common.less'; @import 'common/common.less';
@import 'common/content.less'; @import 'common/content.less';
@import 'common/typography.less'; @import 'common/typography.less';
@ -16,6 +16,7 @@
// Components // Components
@import 'Header.less'; @import 'Header.less';
@import 'Drawer.less'; @import 'Drawer.less';
@import 'Logo.less';
@import 'Searchbox.less'; @import 'Searchbox.less';
@import 'Pagetools.less'; @import 'Pagetools.less';
@import 'Menu.less'; @import 'Menu.less';

142
resources/variables.less
View file

@ -1,11 +1,140 @@
/* /*
* Citizen - Navigation Styles * Citizen - LESS variables
* https://starcitizen.tools * https://starcitizen.tools
*/ */
// Import MediaWiki-supplied mixins // Import MediaWiki-supplied mixins
@import 'mediawiki.mixins'; @import 'mediawiki.mixins';
/* == Colors == */
/**
* Based WikimediaUI (`wmui`) color palette
* See https://design.wikimedia.org/style-guide/visual-style_colors.html
* Don't use those variables directly, instead define your vars
* referring to them as applied further below.
*/
@color-base0: #000; // = HSB 0°, 0%, 0%
@color-base10: #202122; // = HSB 210°, 6%, 13%
@color-base20: #54595d; // = HSB 207°, 10%, 36%; WCAG 2.0 level AAA 7.09:1 contrast ratio on `#fff`
@color-base30: #72777d; // = HSB 210°, 9%, 49%; WCAG 2.0 level AA at 4.52:1 contrast ratio on `#fff`
@color-base50: #a2a9b1; // = HSB 212°, 8%, 69%
@color-base70: #c8ccd1; // = HSB 213°, 4%, 82%
@color-base80: #eaecf0; // = HSB 220°, 3%, 94%
@color-base90: #f8f9fa; // = HSB 210°, 1%, 98%
@color-base100: #fff; // = HSB 0°, 0%, 100%
@color-accent30: #2a4b8d; // = HSB 220°, 70%, 55%
@color-accent50: #36c; // = HSB 220°, 75%, 80%
@color-accent90: #eaf3ff; // = HSB 214°, 8%, 100%
@color-red30: #b32424; // = HSB 360°, 80%, 70%
@color-red50: #d33; // = HSB 360°, 77%, 87%
@color-red90: #fee7e6; // = HSB 3°, 9%, 100%
@color-yellow30: #ac6600; // = HSB 36°, 100%, 67%
@color-yellow50: #fc3; // = HSB 45°, 80%, 100%
@color-yellow90: #fef6e7; // = HSB 39°, 9%, 100%
@color-green30: #14866d; // = HSB 167°, 85%, 53%
@color-green50: #00af89; // = HSB 167°, 100%, 69%
@color-green90: #d5fdf4; // = HSB 166°, 16%, 99%
@color-accent50--lighten: #5b84d6;
@color-red50--lighten: #e35b5b;
/**
* Dark theme color palette
* Background color is used instead of shadow to show elevation
* and hierarchy in dark theme
* See https://material.io/design/color/dark-theme.html#properties
*/
@dark-color-base0: #131a21; // Surface color
@dark-color-base10: #1f262c; // 5% white overlay
@dark-color-base20: #242a31; // 7% white overlay
@dark-color-base30: #262c32; // 8% white overlay
@dark-color-base40: #282f35; // 9% white overlay
@dark-color-base50: #2d3339; // 11% white overlay
@dark-color-base60: #30363c; // 12% white overlay
@dark-color-base70: #343a40; // 14% white overlay
@dark-color-base80: #363c42; // 15% white overlay
@dark-color-base90: #393f45; // 16% white overlay
/* Background Colors */
@background-color-dp-00: @color-base100;
@background-color-dp-01: @color-base100;
@background-color-dp-02: @color-base100;
@background-color-dp-03: @color-base100;
@background-color-dp-04: @color-base100;
@background-color-dp-06: @color-base100;
@background-color-dp-08: @color-base100;
@background-color-dp-12: @color-base100;
@background-color-dp-16: @color-base100;
@background-color-dp-24: @color-base100;
@background-color-framed: @color-base90;
@background-color-framed--hover: @color-base80;
@background-color-framed--active: @color-base70;
@background-color-icon: rgba( 0, 0, 0, 0.3 );
@background-color-icon--hover: rgba( 0, 0, 0, 0.4 );
@background-color-icon--active: rgba( 0, 0, 0, 0.6 );
@background-color-quiet: transparent;
@background-color-quiet--hover: rgba( 0, 0, 0, 0.04 );
@background-color-quiet--active: rgba( 0, 0, 0, 0.06 );
@background-color-destructive: @color-red90;
/* Foreground Colors */
@color-base: @color-base20;
@color-base--emphasized: @color-base10;
@color-base--subtle: @color-base30;
@color-link: @color-accent50;
@color-link--hover: @color-accent50--lighten;
@color-link--active: @color-accent30;
@color-link-new: @color-red50;
@color-link-new--hover: @color-red50--lighten;
@color-link-new--active: @color-red30;
/* Border Colors */
@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 );
/* Background Colors */
@dark-background-color-dp-00: @dark-color-base0;
@dark-background-color-dp-01: @dark-color-base10;
@dark-background-color-dp-02: @dark-color-base20;
@dark-background-color-dp-03: @dark-color-base30;
@dark-background-color-dp-04: @dark-color-base40;
@dark-background-color-dp-06: @dark-color-base50;
@dark-background-color-dp-08: @dark-color-base60;
@dark-background-color-dp-12: @dark-color-base70;
@dark-background-color-dp-16: @dark-color-base80;
@dark-background-color-dp-24: @dark-color-base90;
@dark-background-color-framed: @dark-color-base20;
@dark-background-color-framed--hover: @dark-color-base30;
@dark-background-color-framed--active: @dark-color-base10;
@dark-background-color-icon: rgba( 255, 255, 255, 0.3 );
@dark-background-color-icon--hover: rgba( 255, 255, 255, 0.4 );
@dark-background-color-icon--active: rgba( 255, 255, 255, 0.2 );
// @dark-background-color-quiet: transparent;
@dark-background-color-quiet--hover: rgba( 255, 255, 255, 0.04 );
@dark-background-color-quiet--active: rgba( 255, 255, 255, 0.06 );
@dark-background-color-destructive: @color-red30;
/* Foreground Colors */
@dark-color-base: rgba( 255, 255, 255, 0.6 );
@dark-color-base--emphasized: rgba( 255, 255, 255, 0.87 );
@dark-color-base--subtle: rgba( 255, 255, 255, 0.38 );
/* Border Colors */
@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 );
/* Technical debt below */
/* /*
* Framework * Framework
*/ */
@ -77,13 +206,6 @@
@color-content-header: @base-10; @color-content-header: @base-10;
@color-content-caption: @base-30; @color-content-caption: @base-30;
@color-link: #3366cc;
@color-link-active: #5b84d6;
@color-link-new: #dd3333;
@color-link-new-active: #e35b5b;
// @color-link-visited: #6b4ba1;
// @color-link-visited-active: #886eb3;
// Citizen colors // Citizen colors
@header-background-color-light: @base-100; @header-background-color-light: @base-100;
@header-background-color-dark: @dark-bg-0; @header-background-color-dark: @dark-bg-0;
@ -110,10 +232,6 @@
@dark-text-70: #86888c; @dark-text-70: #86888c;
@dark-text-60: #6c6e73; @dark-text-60: #6c6e73;
@dark-color-link: @color-link-active;
@dark-color-link-new: @color-link-new-active;
// @dark-color-link-visited: @color-link-visited-active;
/* /*
* Transitions * Transitions
*/ */

48
skin.json
View file

@ -78,6 +78,14 @@
"desktop", "desktop",
"mobile" "mobile"
], ],
"features": {
"normalize": false,
"elements": false,
"content": false,
"interface": false,
"legacy": false,
"toc": false
},
"styles": [ "resources/skins.citizen.styles/skin.less" ] "styles": [ "resources/skins.citizen.styles/skin.less" ]
}, },
"skins.citizen.styles.theme": { "skins.citizen.styles.theme": {
@ -86,6 +94,14 @@
"desktop", "desktop",
"mobile" "mobile"
], ],
"features": {
"normalize": false,
"elements": false,
"content": false,
"interface": false,
"legacy": false,
"toc": false
},
"styles": [ "resources/skins.citizen.styles.theme/skins.citizen.styles.theme.less" ] "styles": [ "resources/skins.citizen.styles.theme/skins.citizen.styles.theme.less" ]
}, },
"skins.citizen.styles.fonts": { "skins.citizen.styles.fonts": {
@ -94,6 +110,14 @@
"desktop", "desktop",
"mobile" "mobile"
], ],
"features": {
"normalize": false,
"elements": false,
"content": false,
"interface": false,
"legacy": false,
"toc": false
},
"styles": [ "resources/skins.citizen.styles.fonts/skins.citizen.styles.fonts.less" ] "styles": [ "resources/skins.citizen.styles.fonts/skins.citizen.styles.fonts.less" ]
}, },
"skins.citizen.styles.lazyload": { "skins.citizen.styles.lazyload": {
@ -102,6 +126,14 @@
"desktop", "desktop",
"mobile" "mobile"
], ],
"features": {
"normalize": false,
"elements": false,
"content": false,
"interface": false,
"legacy": false,
"toc": false
},
"styles": [ "resources/skins.citizen.styles.lazyload/skins.citizen.styles.lazyload.less" ] "styles": [ "resources/skins.citizen.styles.lazyload/skins.citizen.styles.lazyload.less" ]
}, },
"skins.citizen.styles.search": { "skins.citizen.styles.search": {
@ -110,6 +142,14 @@
"desktop", "desktop",
"mobile" "mobile"
], ],
"features": {
"normalize": false,
"elements": false,
"content": false,
"interface": false,
"legacy": false,
"toc": false
},
"styles": [ "resources/skins.citizen.styles.search/skins.citizen.styles.search.less" ] "styles": [ "resources/skins.citizen.styles.search/skins.citizen.styles.search.less" ]
}, },
"skins.citizen.styles.toc": { "skins.citizen.styles.toc": {
@ -118,6 +158,14 @@
"desktop", "desktop",
"mobile" "mobile"
], ],
"features": {
"normalize": false,
"elements": false,
"content": false,
"interface": false,
"legacy": false,
"toc": false
},
"styles": [ "resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less" ] "styles": [ "resources/skins.citizen.styles.toc/skins.citizen.styles.toc.less" ]
}, },
"skins.citizen.scripts": { "skins.citizen.scripts": {