mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-24 14:34:09 +00:00
refactor: Convert colors to css variables
This commit is contained in:
Hannes
parent
0910842eeb
commit
044f27c5ba
|
|
@ -61,30 +61,30 @@
|
|||
// Material-like menu
|
||||
.menu-container() {
|
||||
padding: 8px 0;
|
||||
background-color: @menu-background;
|
||||
background-color: var( --menu-container-background-color );
|
||||
border-radius: @border-radius-medium;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.menu-item-link() {
|
||||
display: flex;
|
||||
color: @color-item-text !important;
|
||||
color: var( --menu-item-link-color ) !important;
|
||||
transition: @transition-background-quick, @transition-color-quick;
|
||||
}
|
||||
|
||||
.menu-item-link-hover() {
|
||||
color: @color-item-text-hover !important;
|
||||
background-color: @menu-item-link-hover;
|
||||
color: var( --menu-item-link-hover-color ) !important;
|
||||
background-color: var( --menu-item-link-hover-background-color );
|
||||
}
|
||||
|
||||
.menu-item-link-active() {
|
||||
color: @color-item-text-active !important;
|
||||
background-color: @menu-item-link-active;
|
||||
color: var( --menu-item-link-active-focus-color ) !important;
|
||||
background-color: var( --menu-item-link-active-focus-background-color );
|
||||
}
|
||||
|
||||
.menu-item-link-focus() {
|
||||
color: @color-item-text-active !important;
|
||||
background-color: @menu-item-link-active;
|
||||
color: var( --menu-item-link-active-focus-color ) !important;
|
||||
background-color: var( --menu-item-link-active-focus-background-color );
|
||||
}
|
||||
|
||||
// Button Styles
|
||||
|
|
|
|||
|
|
@ -5,9 +5,17 @@
|
|||
|
||||
@import '../variables.less';
|
||||
|
||||
:root {
|
||||
--lazyload-mw-body-content-a-image-background-color: @base-90;
|
||||
}
|
||||
|
||||
:root.skin-citizen-dark {
|
||||
--lazyload-mw-body-content-a-image-background-color: @dark-bg-10;
|
||||
}
|
||||
|
||||
.mw-body-content {
|
||||
a.image {
|
||||
background-color: @base-90;
|
||||
background-color: var( --lazyload-mw-body-content-a-image-background-color );
|
||||
|
||||
.lazy {
|
||||
opacity: 0;
|
||||
|
|
@ -19,11 +27,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.mw-body-content {
|
||||
a.image {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,6 +6,44 @@
|
|||
@import '../variables.less';
|
||||
@import '../mixins.less';
|
||||
|
||||
:root {
|
||||
--suggestion-dropdown-background-color: @base-100;
|
||||
|
||||
--suggestion-link-active-background-color: @accent-90;
|
||||
--suggestion-link-active-suggestion-title-color: @accent-50;
|
||||
|
||||
--suggestion-title-color: @base-10;
|
||||
|
||||
--suggestion-highlight-color: @base-30;
|
||||
|
||||
--suggestion-description-color: @base-30;
|
||||
|
||||
--suggestion-thumbnail-background-color: @base-80;
|
||||
|
||||
--suggestion-special-border-color: @base-80;
|
||||
--suggestion-special-hover-background-color: @accent-90;
|
||||
--suggestion-special-color: @base-10;
|
||||
}
|
||||
|
||||
:root.skin-citizen-dark {
|
||||
--suggestion-dropdown-background-color: @dark-bg-50;
|
||||
|
||||
--suggestion-link-active-background-color: @accent-10;
|
||||
--suggestion-link-active-suggestion-title-color: @accent-90;
|
||||
|
||||
--suggestion-title-color: @dark-text-90;
|
||||
|
||||
--suggestion-highlight-color: @dark-text-70;
|
||||
|
||||
--suggestion-description-color: @dark-text-70;
|
||||
|
||||
--suggestion-thumbnail-background-color: @base-80;
|
||||
|
||||
--suggestion-special-border-color: @dark-bg-40;
|
||||
--suggestion-special-hover-background-color: @accent-10;
|
||||
--suggestion-special-color: @dark-text-90;
|
||||
}
|
||||
|
||||
#typeahead-suggestions {
|
||||
position: absolute;
|
||||
top: 38px;
|
||||
|
|
@ -18,7 +56,7 @@
|
|||
max-width: calc( ~'100vw -'@icon-box-size + @icon-padding * 2 + @margin-side );
|
||||
display: flex; // Needed to show margin
|
||||
flex-direction: column;
|
||||
background: @base-100;
|
||||
background: var( --suggestion-dropdown-background-color );
|
||||
border-radius: 0 0 @border-radius-large @border-radius-large;
|
||||
.boxshadow(4);
|
||||
}
|
||||
|
|
@ -30,10 +68,10 @@
|
|||
align-items: center;
|
||||
|
||||
&.active {
|
||||
background-color: @accent-90;
|
||||
background-color: var( --suggestion-link-active-background-color );
|
||||
|
||||
.suggestion-title {
|
||||
color: @accent-50;
|
||||
color: var( --suggestion-link-active-suggestion-title-color );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -45,18 +83,18 @@
|
|||
&-title {
|
||||
margin: 0 0 0.78rem * @content-scaling 0;
|
||||
display: inline-block; // so that the margin does not occupy space
|
||||
color: @base-10;
|
||||
color: var( --suggestion-title-color );
|
||||
font-size: @content-h6-size;
|
||||
line-height: 1.872rem * @content-scaling;
|
||||
}
|
||||
|
||||
&-highlight {
|
||||
color: @base-30;
|
||||
color: var( --suggestion-highlight-color );
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: @base-30;
|
||||
color: var( --suggestion-description-color );
|
||||
margin: 0;
|
||||
font-family: @fonts;
|
||||
font-size: @content-caption-size;
|
||||
|
|
@ -68,7 +106,7 @@
|
|||
min-width: 70px; // so it won't be squeezed by the content text
|
||||
height: 60px;
|
||||
border-radius: @border-radius-small;
|
||||
background-color: @base-80;
|
||||
background-color: var( --suggestion-thumbnail-background-color );
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
|
|
@ -137,44 +175,3 @@ a.suggestion-link:hover {
|
|||
max-width: 100vw;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.suggestions-dropdown {
|
||||
background: @dark-bg-50;
|
||||
}
|
||||
|
||||
.suggestion {
|
||||
&-link {
|
||||
&.active {
|
||||
background-color: @accent-10;
|
||||
|
||||
.suggestion-title {
|
||||
color: @accent-90;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-title {
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
&-highlight {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
|
||||
&-description {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
}
|
||||
|
||||
#suggestion {
|
||||
&-special {
|
||||
border-color: @dark-bg-40;
|
||||
color: @dark-text-90;
|
||||
|
||||
&:hover {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,40 @@
|
|||
@import '../variables.less';
|
||||
@import '../mixins.less';
|
||||
|
||||
:root {
|
||||
--toc-color: @base-70;
|
||||
|
||||
--toc-title-h2-color: @base-50;
|
||||
|
||||
--toc-li-active-color: @accent-50;
|
||||
--toc-li-active-a-li-color: @base-30;
|
||||
|
||||
--toc-a-color: @base-50;
|
||||
--toc-a-hover-color: @base-30;
|
||||
|
||||
--screen3-toc-toggle-label-background-color: @base-90;
|
||||
--screen3-toc-toggle-label-hover-background-color: @base-80;
|
||||
--screen3-toc-toggle-label-focus-background-color: @accent-90;
|
||||
--screen3-toc-ul-background-color: @base-100;
|
||||
}
|
||||
|
||||
:root.skin-citizen-dark {
|
||||
--toc-color: @dark-text-60;
|
||||
|
||||
--toc-title-h2-color: @base-50;
|
||||
|
||||
--toc-li-active-color: @dark-color-link;
|
||||
--toc-li-active-a-li-color: @dark-text-80;
|
||||
|
||||
--toc-a-color: @dark-text-70;
|
||||
--toc-a-hover-color: @dark-text-80;
|
||||
|
||||
--screen3-toc-toggle-label-background-color: @dark-bg-50;
|
||||
--screen3-toc-toggle-label-hover-background-color: @accent-10;
|
||||
--screen3-toc-toggle-label-focus-background-color: @accent-10;
|
||||
--screen3-toc-ul-background-color: @dark-bg-40;
|
||||
}
|
||||
|
||||
.toc {
|
||||
position: fixed;
|
||||
z-index: -1; // So that it is below float objects in content
|
||||
|
|
@ -8,7 +42,7 @@
|
|||
top: @header-height;
|
||||
left: 0;
|
||||
padding: @margin-side;
|
||||
color: @base-70;
|
||||
color: var( --toc-color );
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 0; // Hide bar on toc
|
||||
|
|
@ -17,7 +51,7 @@
|
|||
&title {
|
||||
h2 {
|
||||
margin: 0;
|
||||
color: @base-50 !important;
|
||||
color: var( --toc-title-h2-color ) !important;
|
||||
font-size: @ui-menu-text-big;
|
||||
}
|
||||
}
|
||||
|
|
@ -44,7 +78,7 @@
|
|||
}
|
||||
|
||||
li.active {
|
||||
color: @accent-50;
|
||||
color: var( --toc-li-active-a-li-color );
|
||||
|
||||
> a {
|
||||
color: inherit !important;
|
||||
|
|
@ -53,7 +87,7 @@
|
|||
|
||||
a,
|
||||
li {
|
||||
color: @base-30;
|
||||
color: var( --toc-li-active-a-li-color );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -61,11 +95,11 @@
|
|||
display: inline-block;
|
||||
margin: @content-margin-top / 4 0;
|
||||
padding-left: 9px;
|
||||
color: @base-50;
|
||||
color: var( --toc-a-color );
|
||||
border-left: 3px solid transparent;
|
||||
|
||||
&:hover {
|
||||
color: @base-30;
|
||||
color: var( --toc-a-hover-color );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -119,12 +153,12 @@
|
|||
width: 39px;
|
||||
height: 56px;
|
||||
display: block;
|
||||
background-color: @base-90;
|
||||
background-color: var( --screen3-toc-toggle-label-background-color );
|
||||
border-radius: 100%;
|
||||
.boxshadow(4);
|
||||
|
||||
&:hover {
|
||||
background-color: @menu-item-link-hover;
|
||||
background-color: var( --screen3-toc-toggle-label-hover-background-color );
|
||||
.boxshadow(5);
|
||||
|
||||
&:before {
|
||||
|
|
@ -133,7 +167,7 @@
|
|||
}
|
||||
|
||||
&:focus {
|
||||
background-color: @menu-item-link-active;
|
||||
background-color: var( --screen3-toc-toggle-label-focus-background-color );
|
||||
}
|
||||
|
||||
&:before {
|
||||
|
|
@ -159,54 +193,20 @@
|
|||
max-width: none;
|
||||
height: 100%;
|
||||
max-height: ~'calc( 100vh - '@header-height + @margin-side * 3 ~')';
|
||||
background: @base-100;
|
||||
background: var( --screen3-toc-ul-background-color );
|
||||
border-radius: 0 @border-radius-large @border-radius-large 0;
|
||||
.boxshadow(3);
|
||||
transform: translateX( -300px - @margin-side );
|
||||
transition: @transition-transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.toc {
|
||||
color: @dark-text-60;
|
||||
|
||||
a {
|
||||
color: @dark-text-70;
|
||||
|
||||
&:hover {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
|
||||
li.active {
|
||||
color: @dark-color-link;
|
||||
|
||||
a,
|
||||
li {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @screen3 ) {
|
||||
.skin-citizen-dark {
|
||||
.toc {
|
||||
&togglelabel {
|
||||
background-color: @dark-bg-50;
|
||||
|
||||
&:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: @accent-10;
|
||||
}
|
||||
}
|
||||
|
||||
> ul {
|
||||
background: @dark-bg-40;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,9 +34,9 @@
|
|||
a {
|
||||
padding: @margin-side / 4 @margin-side / 2;
|
||||
display: block;
|
||||
border: 1px solid @base-90;
|
||||
background-color: @base-90;
|
||||
color: @color-content-caption !important; // Override other styles
|
||||
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
|
||||
.boxshadow(1);
|
||||
transition: @transition-background-quick, @transition-color-quick, @transition-border-quick, @transition-transform-quick, @transition-box-shadow-quick;
|
||||
|
||||
|
|
@ -70,10 +70,3 @@
|
|||
margin: 0 ~'calc((100vw - @{page-width}) / -2)';
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.catlinks .mw-normal-catlinks > ul li a {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-10;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,11 +11,11 @@
|
|||
justify-content: center;
|
||||
|
||||
&-1 {
|
||||
transform-origin: 0% 0%;
|
||||
transform-origin: 0 0;
|
||||
}
|
||||
|
||||
&-2 {
|
||||
transform-origin: 0% 100%;
|
||||
transform-origin: 0 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -81,17 +81,17 @@
|
|||
height: 100%;
|
||||
.boxshadow(3);
|
||||
border-radius: 0 @border-radius-large @border-radius-large 0;
|
||||
background: @menu-background;
|
||||
background: var( --drawer-mw-drawer-menu-background-color );
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform-origin: 0% 0%;
|
||||
transform-origin: 0 0;
|
||||
transform: translate( -110%, 0 ); // shadow bleeding with 100%
|
||||
transition: @transition-transform;
|
||||
will-change: transform; // help with performance
|
||||
|
||||
&-logo {
|
||||
padding: @header-height @margin-side @margin-side / 2 @margin-side;
|
||||
border-bottom: 1px solid @base-80;
|
||||
border-bottom: 1px solid var( --drawer-mw-drawer-menu-logo-border-color );
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
|
|
@ -108,6 +108,7 @@
|
|||
.mw-wiki-title {
|
||||
opacity: 0;
|
||||
height: 0;
|
||||
color: var( --drawer-mw-drawer-menu-logo-mw-wiki-title-color );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -120,7 +121,7 @@
|
|||
h3 {
|
||||
margin: @margin-side / 2 0 0 0;
|
||||
padding: @margin-side / 2 @margin-side;
|
||||
color: @color-item-header;
|
||||
color: var( --drawer-mw-drawer-menu-main-h3-color );
|
||||
font-size: @ui-menu-header;
|
||||
font-weight: normal;
|
||||
letter-spacing: 1px;
|
||||
|
|
@ -175,7 +176,7 @@
|
|||
height: 2px;
|
||||
border-radius: @border-radius-large;
|
||||
display: block;
|
||||
background: @base-0;
|
||||
background: var( --drawer-mw-drawer-button-icon-div-background-color );
|
||||
opacity: @opacity-icon;
|
||||
transform-origin: 4px 0;
|
||||
transition: @transition-transform-quick, @transition-background-quick, @transition-opacity-quick;
|
||||
|
|
@ -186,7 +187,7 @@
|
|||
|
||||
#p-personal {
|
||||
padding-top: @margin-side / 2;
|
||||
border-top: 1px solid @base-80;
|
||||
border-top: 1px solid var( --drawer-p-personal-border-color );
|
||||
|
||||
#pt-userpage {
|
||||
margin-bottom: @margin-side / 2;
|
||||
|
|
@ -242,6 +243,44 @@
|
|||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
#mw-drawer {
|
||||
&-menu {
|
||||
&-main,
|
||||
&-user {
|
||||
a {
|
||||
&:after {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-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 {
|
||||
|
|
@ -257,74 +296,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#mw-drawer {
|
||||
&-button {
|
||||
&:hover {
|
||||
~ #mw-drawer-button-icon {
|
||||
.mw-drawer-button-icon {
|
||||
&-div {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-menu {
|
||||
background: @dark-bg-40;
|
||||
|
||||
&-logo {
|
||||
border-color: @dark-bg-50;
|
||||
|
||||
.mw-wiki-title {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
}
|
||||
|
||||
&-main {
|
||||
h3 {
|
||||
color: @dark-text-100;
|
||||
}
|
||||
}
|
||||
|
||||
&-main,
|
||||
&-user {
|
||||
a {
|
||||
color: @dark-text-80 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: @dark-bg-60;
|
||||
color: @dark-text-90 !important;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
color: @dark-text-100 !important;
|
||||
background-color: @accent-10;
|
||||
}
|
||||
|
||||
&:after {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.mw-drawer {
|
||||
&-button {
|
||||
&-icon {
|
||||
&-div {
|
||||
opacity: 0.4;
|
||||
background: @base-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#p-personal {
|
||||
border-color: @dark-bg-50;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
box-shadow: 0 0 50px @header-height @header-background-color-light;
|
||||
box-shadow: 0 0 50px @header-height var( --header-mw-header-background-box-shadow-color );
|
||||
z-index: -1;
|
||||
transition: @transition-box-shadow;
|
||||
}
|
||||
|
|
@ -41,11 +41,3 @@
|
|||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#mw-header {
|
||||
&-background {
|
||||
box-shadow: 0 0 50px @header-height @header-background-color-dark !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,14 +17,14 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0.4rem 0.8rem;
|
||||
border: 1px solid @base-80;
|
||||
color: @base-20;
|
||||
background-color: @base-90;
|
||||
border: 1px solid var( --pagelinks-p-namespaces-ul-li-a-border-color );
|
||||
color: var( --pagelinks-p-namespaces-ul-li-a-color );
|
||||
background-color: var( --pagelinks-p-namespaces-ul-li-a-background-color );
|
||||
transition: @transition-background-quick, @transition-box-shadow-quick;
|
||||
.boxshadow(1);
|
||||
|
||||
&:hover {
|
||||
background-color: @base-80;
|
||||
background-color: var( --pagelinks-p-namespaces-ul-li-a-hover-background-color );
|
||||
.boxshadow(2);
|
||||
}
|
||||
|
||||
|
|
@ -45,6 +45,16 @@
|
|||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
#p-namespaces {
|
||||
ul li a {
|
||||
&:after {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @screen1 ) {
|
||||
#p-namespaces {
|
||||
margin: 0 !important; // somehow got overrided
|
||||
|
|
@ -57,20 +67,3 @@
|
|||
margin: 0 ~'calc((100vw - @{page-width}) / -2)';
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#p-namespaces {
|
||||
ul li a {
|
||||
background-color: @dark-bg-10;
|
||||
border-color: @dark-bg-20;
|
||||
|
||||
&:hover {
|
||||
background-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
&:after {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -99,6 +99,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
#p-actions {
|
||||
&:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
#p-views {
|
||||
li > a:after {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// TODO: Flexible value
|
||||
@media ( max-width: @screen2 ) {
|
||||
#page-tools {
|
||||
|
|
@ -123,36 +137,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
#p-actions {
|
||||
ul {
|
||||
background: @dark-bg-50;
|
||||
|
||||
a {
|
||||
color: @dark-text-80 !important;
|
||||
|
||||
&:hover {
|
||||
background-color: @dark-bg-60;
|
||||
color: @dark-text-90 !important;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:focus {
|
||||
color: @dark-text-100 !important;
|
||||
background-color: @accent-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
#p-views {
|
||||
li > a:after {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -70,7 +70,7 @@
|
|||
margin-left: -2px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border: solid 2px @base-0;
|
||||
border: solid 2px var( --search-toggle-icon-2-border-color );
|
||||
border-radius: 100%;
|
||||
transform: rotate( -45deg );
|
||||
}
|
||||
|
|
@ -86,7 +86,7 @@
|
|||
&-1,
|
||||
&-3 {
|
||||
width: 2px;
|
||||
background-color: @base-0;
|
||||
background-color: var( --search-toggle-icon-1-3-background-color );
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -169,8 +169,8 @@
|
|||
width: 0;
|
||||
height: @search-bar-height;
|
||||
max-width: calc( ~'100vw -'@margin-side );
|
||||
background: @base-100;
|
||||
border: 1px solid @base-90;
|
||||
background: var( --search-Input-background-color );
|
||||
border: 1px solid var( --search-Input-border-color );
|
||||
border-radius: @border-radius-small;
|
||||
transition: @transition-width, @transition-box-shadow;
|
||||
|
||||
|
|
@ -247,27 +247,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @search-bar-width ) {
|
||||
#search {
|
||||
&form:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: @base-100;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&Input {
|
||||
transition: none; // Width transition does not play well on mobile
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
.skin-citizen-dark {
|
||||
#search {
|
||||
&form {
|
||||
&-icon,
|
||||
|
|
@ -284,15 +264,6 @@
|
|||
&-toggle {
|
||||
&-icon {
|
||||
opacity: 0.4;
|
||||
|
||||
&-2 {
|
||||
border-color: @base-100;
|
||||
}
|
||||
|
||||
&-1,
|
||||
&-3 {
|
||||
background: @base-100;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
|
|
@ -301,16 +272,25 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @search-bar-width ) {
|
||||
#search {
|
||||
&form:before {
|
||||
content: '';
|
||||
display: block;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: var( --search-searchform-before-background-color );
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
&Input {
|
||||
border-color: @dark-bg-60;
|
||||
background: @dark-bg-50;
|
||||
transition: none; // Width transition does not play well on mobile
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @search-bar-width ) and ( prefers-color-scheme: dark ) {
|
||||
#searchform:before {
|
||||
background: @dark-bg-50;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -14,15 +14,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
a.mw-wiki-title {
|
||||
color: var( --sidebar-a-mw-wiki-title-color );
|
||||
}
|
||||
|
||||
@media ( max-width: @screen2 ) {
|
||||
.mw-sidebar-sitename {
|
||||
z-index: -1; // remove link
|
||||
opacity: 0; // hide visual
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
a.mw-wiki-title {
|
||||
color: @dark-text-70;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,8 +12,8 @@ body {
|
|||
overflow-x: hidden; // prevent overflow from scrollbar
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
background: @base-100;
|
||||
color: @color-content-text;
|
||||
background: var( --common-html-background );
|
||||
color: var( --common-html-color );
|
||||
}
|
||||
|
||||
table {
|
||||
|
|
@ -45,8 +45,9 @@ dl {
|
|||
pre,
|
||||
code,
|
||||
.mw-code {
|
||||
color: @base-0;
|
||||
background-color: @base-90;
|
||||
color: var( --common-pre-color );
|
||||
background-color: var( --common-pre-background );
|
||||
border: var( --common-pre-border );
|
||||
}
|
||||
|
||||
code {
|
||||
|
|
@ -60,8 +61,17 @@ pre,
|
|||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
color: var( --common-input-color );
|
||||
background-color: var( --common-input-background );
|
||||
border: var( --common-input-border );
|
||||
}
|
||||
|
||||
fieldset {
|
||||
color: @base-30;
|
||||
color: var( --common-fieldset-color );
|
||||
border-color: var( --common-fieldset-border-color );
|
||||
margin: @content-margin-top 0;
|
||||
padding: @content-margin-top / 2 @margin-side;
|
||||
}
|
||||
|
|
@ -71,7 +81,7 @@ fieldset > table {
|
|||
}
|
||||
|
||||
legend {
|
||||
color: @base-30;
|
||||
color: var( --common-legend-color );
|
||||
margin: 0;
|
||||
padding: 4px;
|
||||
}
|
||||
|
|
@ -82,7 +92,7 @@ code,
|
|||
fieldset,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid @base-80;
|
||||
border: var( --common-input-border );
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -129,11 +139,11 @@ a {
|
|||
}
|
||||
|
||||
&:hover {
|
||||
color: @color-link-active;
|
||||
color: var( --common-link-color );
|
||||
}
|
||||
|
||||
&.new {
|
||||
color: @color-link-new !important; // Override visited
|
||||
color: var( --common-link-new-color ) !important; // Override visited
|
||||
|
||||
&:hover {
|
||||
color: @color-link-new-active !important;
|
||||
|
|
@ -250,63 +260,15 @@ figcaption,
|
|||
}
|
||||
}
|
||||
|
||||
.skin-citizen-dark {
|
||||
.mw-editsection > a:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
|
||||
@media ( max-width: @screen2 ) {
|
||||
.mw-editsection {
|
||||
position: relative !important;
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
html,
|
||||
body {
|
||||
background: @dark-bg-0;
|
||||
color: @dark-text-90;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: @dark-bg-60;
|
||||
}
|
||||
|
||||
* {
|
||||
scrollbar-color: @dark-bg-60 transparent;
|
||||
}
|
||||
|
||||
pre,
|
||||
code,
|
||||
.mw-code {
|
||||
color: @dark-text-90;
|
||||
background-color: @dark-bg-10;
|
||||
border: 1px solid @dark-bg-20;
|
||||
}
|
||||
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
border: 1px solid @dark-bg-50;
|
||||
background: @dark-bg-40;
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
color: @dark-text-90;
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
legend {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
a,
|
||||
a.external {
|
||||
color: @dark-color-link;
|
||||
}
|
||||
|
||||
a.new {
|
||||
color: @dark-color-link-new !important;
|
||||
}
|
||||
|
||||
.mw-editsection > a:before {
|
||||
filter: invert( 1 );
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,13 +1,13 @@
|
|||
.firstHeading {
|
||||
margin: 0;
|
||||
color: @base-10;
|
||||
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: @base-30;
|
||||
color: var( --content-sub-color );
|
||||
}
|
||||
|
||||
.firstHeading,
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
|
||||
#contentSub,
|
||||
#contentSub2 {
|
||||
color: @base-30;
|
||||
color: var( --content-sub-color );
|
||||
}
|
||||
|
||||
#mw-content-text {
|
||||
|
|
@ -214,6 +214,24 @@
|
|||
}
|
||||
}
|
||||
|
||||
.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 {
|
||||
|
|
@ -323,21 +341,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: 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: @dark-text-100;
|
||||
}
|
||||
|
||||
.mw-body-content #contentSub,
|
||||
.mw-body-content #contentSub2,
|
||||
.mw-body #siteSub {
|
||||
color: @dark-text-80 !important;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
* {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: @base-70 transparent;
|
||||
scrollbar-color: var( --scrollbar-color ) transparent;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
|
|
@ -13,6 +13,6 @@
|
|||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: @base-70;
|
||||
background-color: var( --scrollbar-color );
|
||||
border: 4px solid transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
table.wikitable {
|
||||
background-color: transparent;
|
||||
color: @base-20;
|
||||
color: var( --wikitable-color );
|
||||
border: 0;
|
||||
border-collapse: collapse;
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ table.wikitable {
|
|||
vertical-align: top;
|
||||
|
||||
th {
|
||||
color: @base-30;
|
||||
color: var( --wikitable-tr-th-color );
|
||||
background-color: transparent;
|
||||
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 @base-80;
|
||||
border-bottom: 1px solid var( --wikitable-tr-th-border-color );
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @base-90;
|
||||
background-color: var( --wikitable-tr-hover-background-color );
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -41,24 +41,3 @@ table.wikitable {
|
|||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
@media ( prefers-color-scheme: dark ) {
|
||||
table.wikitable {
|
||||
color: @dark-text-90;
|
||||
|
||||
tr {
|
||||
th {
|
||||
color: @dark-text-80;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
border-color: @dark-bg-20;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: @dark-bg-10;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
239
resources/skins.citizen.styles/css-vars.less
Normal file
239
resources/skins.citizen.styles/css-vars.less
Normal file
|
|
@ -0,0 +1,239 @@
|
|||
@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,6 +4,7 @@
|
|||
@import '../mixins.less';
|
||||
|
||||
@media only screen {
|
||||
@import 'css-vars';
|
||||
@import 'common/common.less';
|
||||
@import 'common/content.less';
|
||||
@import 'common/typography.less';
|
||||
|
|
|
|||
Loading…
Reference in a new issue