mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-09-24 02:38:44 +00:00
refactor: merge CSS variables in core styles
This commit is contained in:
alistair3149
parent
dde77d19dc
commit
9d3df250de
|
|
@ -390,6 +390,7 @@ class SkinCitizen extends SkinMustache {
|
|||
$skin = $this;
|
||||
|
||||
return [
|
||||
'data-logos' => ResourceLoaderSkinModule::getAvailableLogos( $this->getConfig() ),
|
||||
'msg-sitetitle' => $skin->msg( 'sitetitle' )->text(),
|
||||
'html-mainpage-attributes' => Xml::expandAttributes(
|
||||
Linker::tooltipAndAccesskeyAttribs( 'p-logo' ) + [
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
<div class="mw-wiki-title">{{{msg-sitetitle}}}</div>
|
||||
<a {{{html-mainpage-attributes}}} class="mw-logo">
|
||||
{{#data-logos}}
|
||||
{{#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>
|
||||
|
|
@ -62,29 +62,23 @@
|
|||
.menu-container() {
|
||||
display: block;
|
||||
padding: 8px 0;
|
||||
background-color: var( --menu-container-background-color );
|
||||
background-color: var( --background-color-dp-08 );
|
||||
border-radius: @border-radius-medium;
|
||||
}
|
||||
|
||||
.menu-item-link() {
|
||||
display: flex;
|
||||
color: var( --menu-item-link-color ) !important;
|
||||
color: var( --color-base ) !important;
|
||||
font-weight: 450;
|
||||
transition: @transition-background-quick, @transition-color-quick;
|
||||
}
|
||||
|
||||
.menu-item-link-hover() {
|
||||
background-color: var( --menu-item-link-hover-background-color );
|
||||
color: var( --menu-item-link-hover-color ) !important;
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
|
||||
.menu-item-link-active() {
|
||||
background-color: var( --menu-item-link-active-focus-background-color );
|
||||
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;
|
||||
background-color: var( --background-color-quiet--active );
|
||||
}
|
||||
|
||||
// Button Styles
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
|
||||
--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-a-color: @dark-text-70;
|
||||
|
|
|
|||
|
|
@ -34,23 +34,23 @@
|
|||
a {
|
||||
display: block;
|
||||
padding: @margin-side / 4 @margin-side / 2;
|
||||
border: 1px solid var( --catlinks-ul-li-a-border-color );
|
||||
background-color: var( --catlinks-ul-li-a-background-color );
|
||||
color: var( --catlinks-ul-li-a-color ) !important; // Overr
|
||||
border: 1px solid var( --border-color-base--lighter );
|
||||
background-color: var( --background-color-framed );
|
||||
color: var( --color-base--subtle ) !important; // Override
|
||||
transition: @transition-background-quick, @transition-color-quick, @transition-border-quick, @transition-transform-quick, @transition-box-shadow-quick;
|
||||
.boxshadow(1);
|
||||
|
||||
&:hover {
|
||||
border-color: @color-link-active;
|
||||
background-color: @color-link-active;
|
||||
border-color: @color-link--hover;
|
||||
background-color: @color-link--hover;
|
||||
color: @base-100 !important;
|
||||
transform: translateY( -2px );
|
||||
.boxshadow(2);
|
||||
}
|
||||
|
||||
&.new:hover {
|
||||
border-color: @color-link-new-active;
|
||||
background-color: @color-link-new-active;
|
||||
border-color: @color-link-new--hover;
|
||||
background-color: @color-link-new--hover;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -40,12 +40,6 @@
|
|||
transform: rotate( 45deg ) translate( -5px, -7px );
|
||||
}
|
||||
}
|
||||
|
||||
.mw-drawer-button-icon {
|
||||
&-div {
|
||||
opacity: @opacity-icon;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Show drawer
|
||||
|
|
@ -65,7 +59,17 @@
|
|||
|
||||
.mw-drawer-button-icon {
|
||||
&-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
|
||||
height: 100%;
|
||||
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;
|
||||
transform: translate( -110%, 0 ); // shadow bleeding with 100%
|
||||
transform-origin: 0 0;
|
||||
|
|
@ -93,23 +97,7 @@
|
|||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: @header-height @margin-side @margin-side / 2 @margin-side;
|
||||
border-bottom: 1px solid var( --drawer-mw-drawer-menu-logo-border-color );
|
||||
|
||||
.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;
|
||||
}
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
&-main {
|
||||
|
|
@ -121,21 +109,22 @@
|
|||
h3 {
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
margin: @margin-side / 2 0 0 0;
|
||||
color: var( --drawer-mw-drawer-menu-main-h3-color );
|
||||
font-size: @ui-menu-header;
|
||||
color: var( --color-base--subtle );
|
||||
font-size: inherit;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
letter-spacing: 0.75px;
|
||||
}
|
||||
}
|
||||
|
||||
&-main,
|
||||
&-user {
|
||||
font-size: @ui-menu-text;
|
||||
|
||||
a {
|
||||
.menu-item-link;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: @padding-menu-item-big;
|
||||
font-size: @ui-menu-text-big;
|
||||
|
||||
&:after {
|
||||
.resource-loader-list-icon;
|
||||
|
|
@ -157,10 +146,6 @@
|
|||
&:active {
|
||||
.menu-item-link-active;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.menu-item-link-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -175,9 +160,8 @@
|
|||
width: @icon-size;
|
||||
height: 2px;
|
||||
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;
|
||||
opacity: @opacity-icon;
|
||||
transform-origin: 4px 0;
|
||||
transition: @transition-transform-quick, @transition-background-quick, @transition-opacity-quick;
|
||||
}
|
||||
|
|
@ -187,7 +171,7 @@
|
|||
|
||||
#p-personal {
|
||||
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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -28,7 +28,7 @@
|
|||
z-index: -1;
|
||||
right: 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
19
resources/skins.citizen.styles/Logo.less
Normal 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;
|
||||
}
|
||||
}
|
||||
|
|
@ -17,17 +17,22 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border: 1px solid var( --pagelinks-p-namespaces-ul-li-a-border-color );
|
||||
background-color: var( --pagelinks-p-namespaces-ul-li-a-background-color );
|
||||
color: var( --pagelinks-p-namespaces-ul-li-a-color );
|
||||
border: 1px solid var( --border-color-base--lighter );
|
||||
background-color: var( --background-color-framed );
|
||||
color: var( --color-base--subtle );
|
||||
transition: @transition-background-quick, @transition-box-shadow-quick;
|
||||
.boxshadow(1);
|
||||
|
||||
&:hover {
|
||||
background-color: var( --pagelinks-p-namespaces-ul-li-a-hover-background-color );
|
||||
background-color: var( --background-color-framed--hover );
|
||||
.boxshadow(2);
|
||||
}
|
||||
|
||||
&:active {
|
||||
background-color: var( --background-color-framed--active );
|
||||
.boxshadow(0);
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: relative;
|
||||
width: 14px;
|
||||
|
|
|
|||
|
|
@ -80,10 +80,6 @@
|
|||
&:active {
|
||||
.menu-item-link-active;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
.menu-item-link-focus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -58,7 +58,6 @@
|
|||
height: @header-height;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: @opacity-icon;
|
||||
transition: @transition-transform-quick, @transition-height-quick, @transition-opacity-quick, @transition-border-color-quick;
|
||||
|
||||
&-1 {
|
||||
|
|
@ -71,7 +70,8 @@
|
|||
&-2 {
|
||||
width: 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-left: -2px;
|
||||
border-radius: 100%;
|
||||
|
|
@ -89,7 +89,7 @@
|
|||
&-1,
|
||||
&-3 {
|
||||
width: 2px;
|
||||
background-color: var( --search-toggle-icon-1-3-background-color );
|
||||
background-color: var( --background-color-icon );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -144,6 +144,22 @@
|
|||
&-3 {
|
||||
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 {
|
||||
~ #search-toggle-icon {
|
||||
opacity: @opacity-icon-active;
|
||||
|
||||
#search-toggle-icon {
|
||||
&-1 {
|
||||
height: 6px;
|
||||
background-color: var( --background-color-icon--hover );
|
||||
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 );
|
||||
height: @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;
|
||||
-moz-appearance: none;
|
||||
appearance: none;
|
||||
background: var( --search-Input-background-color );
|
||||
background: var( --background-color-dp-03 );
|
||||
border-radius: @border-radius-small;
|
||||
transition: @transition-width, @transition-box-shadow;
|
||||
|
||||
|
|
@ -263,18 +296,6 @@
|
|||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
&-toggle {
|
||||
&-icon {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
~ #search-toggle-icon {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -287,7 +308,7 @@
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
background: var( --search-searchform-before-background-color );
|
||||
background: var( --background-color-dp-03 );
|
||||
content: '';
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
}
|
||||
|
||||
a.mw-wiki-title {
|
||||
color: var( --sidebar-a-mw-wiki-title-color );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
@media ( max-width: @screen2 ) {
|
||||
|
|
|
|||
|
|
@ -11,11 +11,20 @@ body {
|
|||
min-height: 100%;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: var( --common-html-background );
|
||||
color: var( --common-html-color );
|
||||
background: var( --background-color-dp-00 );
|
||||
color: var( --color-base );
|
||||
overflow-x: hidden; // prevent overflow from scrollbar
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: var( --color-base--emphasized );
|
||||
}
|
||||
|
||||
table {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
|
|
@ -45,9 +54,8 @@ dl {
|
|||
pre,
|
||||
code,
|
||||
.mw-code {
|
||||
border: var( --common-pre-border );
|
||||
background-color: var( --common-pre-background );
|
||||
color: var( --common-pre-color );
|
||||
border: 1px solid var( --border-color-base );
|
||||
background-color: var( --background-color-framed );
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
@ -64,16 +72,13 @@ pre,
|
|||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: var( --common-input-border );
|
||||
background-color: var( --common-input-background );
|
||||
color: var( --common-input-color );
|
||||
background-color: var( --background-color-framed );
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
padding: @content-margin-top / 2 @margin-side;
|
||||
border-color: var( --common-fieldset-border-color );
|
||||
margin: @content-margin-top 0;
|
||||
color: var( --common-fieldset-color );
|
||||
}
|
||||
|
||||
fieldset > table {
|
||||
|
|
@ -83,7 +88,7 @@ fieldset > table {
|
|||
legend {
|
||||
padding: 4px;
|
||||
margin: 0;
|
||||
color: var( --common-legend-color );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
input,
|
||||
|
|
@ -92,7 +97,7 @@ code,
|
|||
fieldset,
|
||||
select,
|
||||
textarea {
|
||||
border: var( --common-input-border );
|
||||
border: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -130,7 +135,7 @@ td {
|
|||
}
|
||||
|
||||
a {
|
||||
color: @color-link;
|
||||
color: var( --color-link );
|
||||
text-decoration: none !important;
|
||||
|
||||
&:not( [ href ] ) {
|
||||
|
|
@ -139,14 +144,22 @@ a {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: var( --common-link-color );
|
||||
color: var( --color-link--hover );
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: var( --color-link--active );
|
||||
}
|
||||
|
||||
&.new {
|
||||
color: var( --common-link-new-color ) !important; // Override visited
|
||||
color: var( --color-link-new ) !important; // Override visited
|
||||
|
||||
&: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 {
|
||||
padding: 2px 4px;
|
||||
background-color: @red-90;
|
||||
background-color: var( --background-color-destructive );
|
||||
}
|
||||
|
||||
.nowrap {
|
||||
|
|
@ -237,13 +250,27 @@ figcaption,
|
|||
&.new {
|
||||
display: block;
|
||||
padding: @margin-side / 2;
|
||||
background-color: @base-80;
|
||||
background-color: var( --background-color-framed );
|
||||
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 {
|
||||
/* Ensure that this is displayed on top of .mw-body-content and clickable */
|
||||
position: relative;
|
||||
|
|
@ -251,6 +278,15 @@ figcaption,
|
|||
float: right;
|
||||
}
|
||||
|
||||
.printfooter {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.patrollink {
|
||||
font-size: 75%;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
/* Wider page width for special pages */
|
||||
.ns--1 {
|
||||
.firstHeading,
|
||||
|
|
|
|||
|
|
@ -1,13 +1,11 @@
|
|||
.firstHeading {
|
||||
margin: 0;
|
||||
color: var( --content-firstHeading-color );
|
||||
overflow-wrap: break-word; // Break word instead of overflow if title is too long
|
||||
}
|
||||
|
||||
#siteSub {
|
||||
display: block;
|
||||
margin: 0.4rem 0 1.6rem;
|
||||
color: var( --content-sub-color );
|
||||
}
|
||||
|
||||
.firstHeading,
|
||||
|
|
@ -15,9 +13,10 @@
|
|||
.content-center;
|
||||
}
|
||||
|
||||
#siteSub,
|
||||
#contentSub,
|
||||
#contentSub2 {
|
||||
color: var( --content-sub-color );
|
||||
color: var( --color-base--subtle );
|
||||
}
|
||||
|
||||
#mw-content-text {
|
||||
|
|
@ -26,10 +25,10 @@
|
|||
* Only apply to internal links in article
|
||||
*/
|
||||
a[ href^='/' ]:not( .image ) {
|
||||
.link-content-text(@color-link-active);
|
||||
.link-content-text(@color-link--active);
|
||||
|
||||
&.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 {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
color: @color-content-header;
|
||||
}
|
||||
|
||||
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 ) {
|
||||
#mw-content-text {
|
||||
> .mw-parser-output {
|
||||
|
|
|
|||
84
resources/skins.citizen.styles/common/rootvariables.less
Normal file
84
resources/skins.citizen.styles/common/rootvariables.less
Normal 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;
|
||||
}
|
||||
|
|
@ -14,5 +14,5 @@
|
|||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border: 4px solid transparent;
|
||||
background-color: var( --scrollbar-color );
|
||||
background-color: var( --background-color-icon );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
table.wikitable {
|
||||
border: 0;
|
||||
background-color: transparent;
|
||||
border: 0; // Override core MW styles
|
||||
background-color: transparent; // Override core MW styles
|
||||
border-collapse: collapse;
|
||||
color: var( --wikitable-color );
|
||||
color: var( --color-base ); // Override core MW styles
|
||||
|
||||
caption {
|
||||
margin-top: @content-margin-top;
|
||||
|
|
@ -14,7 +14,7 @@ table.wikitable {
|
|||
|
||||
th {
|
||||
background-color: transparent;
|
||||
color: var( --wikitable-tr-th-color );
|
||||
color: var( --color-base--subtle );
|
||||
font-size: @content-caption-size;
|
||||
text-align: left;
|
||||
}
|
||||
|
|
@ -27,11 +27,11 @@ table.wikitable {
|
|||
td {
|
||||
padding: @margin-side / 2 @margin-side @margin-side / 2 0;
|
||||
border: 0;
|
||||
border-bottom: 1px solid var( --wikitable-tr-th-border-color );
|
||||
border-bottom: 1px solid var( --border-color-base );
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var( --wikitable-tr-hover-background-color );
|
||||
background-color: var( --background-color-quiet--hover );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
@import '../mixins.less';
|
||||
|
||||
@media screen {
|
||||
@import 'css-vars';
|
||||
@import 'common/rootvariables.less';
|
||||
@import 'common/common.less';
|
||||
@import 'common/content.less';
|
||||
@import 'common/typography.less';
|
||||
|
|
@ -16,6 +16,7 @@
|
|||
// Components
|
||||
@import 'Header.less';
|
||||
@import 'Drawer.less';
|
||||
@import 'Logo.less';
|
||||
@import 'Searchbox.less';
|
||||
@import 'Pagetools.less';
|
||||
@import 'Menu.less';
|
||||
|
|
|
|||
|
|
@ -1,11 +1,140 @@
|
|||
/*
|
||||
* Citizen - Navigation Styles
|
||||
* Citizen - LESS variables
|
||||
* https://starcitizen.tools
|
||||
*/
|
||||
|
||||
// Import MediaWiki-supplied 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
|
||||
*/
|
||||
|
|
@ -77,13 +206,6 @@
|
|||
@color-content-header: @base-10;
|
||||
@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
|
||||
@header-background-color-light: @base-100;
|
||||
@header-background-color-dark: @dark-bg-0;
|
||||
|
|
@ -110,10 +232,6 @@
|
|||
@dark-text-70: #86888c;
|
||||
@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
|
||||
*/
|
||||
|
|
|
|||
48
skin.json
48
skin.json
|
|
@ -78,6 +78,14 @@
|
|||
"desktop",
|
||||
"mobile"
|
||||
],
|
||||
"features": {
|
||||
"normalize": false,
|
||||
"elements": false,
|
||||
"content": false,
|
||||
"interface": false,
|
||||
"legacy": false,
|
||||
"toc": false
|
||||
},
|
||||
"styles": [ "resources/skins.citizen.styles/skin.less" ]
|
||||
},
|
||||
"skins.citizen.styles.theme": {
|
||||
|
|
@ -86,6 +94,14 @@
|
|||
"desktop",
|
||||
"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" ]
|
||||
},
|
||||
"skins.citizen.styles.fonts": {
|
||||
|
|
@ -94,6 +110,14 @@
|
|||
"desktop",
|
||||
"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" ]
|
||||
},
|
||||
"skins.citizen.styles.lazyload": {
|
||||
|
|
@ -102,6 +126,14 @@
|
|||
"desktop",
|
||||
"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" ]
|
||||
},
|
||||
"skins.citizen.styles.search": {
|
||||
|
|
@ -110,6 +142,14 @@
|
|||
"desktop",
|
||||
"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" ]
|
||||
},
|
||||
"skins.citizen.styles.toc": {
|
||||
|
|
@ -118,6 +158,14 @@
|
|||
"desktop",
|
||||
"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" ]
|
||||
},
|
||||
"skins.citizen.scripts": {
|
||||
|
|
|
|||
Loading…
Reference in a new issue