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

refactor: use common CSS variables for ToC

Browse source
This commit is contained in:
alistair3149 2021-01-12 15:13:24 -05:00
parent ed5a9a9741
commit 24319fd190
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
6 changed files with 33 additions and 58 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,40 +1,6 @@
@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: @color-link--active;
--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
@ -42,7 +8,7 @@
left: 0;
max-width: 450px;
padding: @margin-side;
color: var( --toc-color );
color: var( --color-base--subtle );
&::-webkit-scrollbar {
width: 0; // Hide bar on toc
@ -51,8 +17,10 @@
&title {
h2 {
margin: 0;
color: var( --toc-title-h2-color ) !important;
font-size: @ui-menu-text-big;
color: var( --color-base--subtle ) !important;
font-size: @ui-menu-text;
font-weight: normal;
letter-spacing: 0.75px;
}
}
@ -78,7 +46,7 @@
}
li.active {
color: var( --toc-li-active-a-li-color );
color: var( --color-primary );
> a {
border-color: currentColor;
@ -87,7 +55,7 @@
a,
li {
color: var( --toc-li-active-a-li-color );
color: var( --color-base );
}
}
@ -96,10 +64,14 @@
padding-left: 9px;
border-left: 3px solid transparent;
margin: @content-margin-top / 4 0;
color: var( --toc-a-color );
color: var( --color-base--subtle );
&:hover {
color: var( --toc-a-hover-color );
color: var( --color-base );
}
&:active {
color: var( --color-base--subtle );
}
}
@ -154,12 +126,12 @@
height: 56px;
padding: 0 @margin-side / 2;
margin: @margin-side;
background-color: var( --screen3-toc-toggle-label-background-color );
background-color: var( --background-color-dp-06 );
border-radius: 100%;
.boxshadow(4);
&:hover {
background-color: var( --screen3-toc-toggle-label-hover-background-color );
background-color: var( --background-color-dp-12 );
.boxshadow(5);
&:before {
@ -167,8 +139,8 @@
}
}
&:focus {
background-color: var( --screen3-toc-toggle-label-focus-background-color );
&:active {
background-color: var( --background-color-dp-02 );
}
&:before {
@ -193,8 +165,9 @@
height: 100%;
max-height: ~'calc( 100vh - '@header-height + @margin-side * 3 ~')';
padding: @header-height + @margin-side @margin-side @margin-side * 2 @margin-side / 2 !important; // More scroll spaces
border-color: transparent;
margin: 0 !important;
background: var( --screen3-toc-ul-background-color );
background: var( --background-color-dp-16 );
border-radius: 0 @border-radius-large @border-radius-large 0;
transform: translateX( 100% );
transition: @transition-transform;

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

@ -41,8 +41,8 @@
.boxshadow(1);
&:hover {
border-color: @color-link--hover;
background-color: @color-link--hover;
border-color: @color-primary--hover;
background-color: @color-primary--hover;
color: @base-100 !important;
transform: translateY( -2px );
.boxshadow(2);

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

@ -135,7 +135,7 @@ td {
}
a {
color: var( --color-link );
color: var( --color-primary );
text-decoration: none !important;
&:not( [ href ] ) {
@ -144,11 +144,11 @@ a {
}
&:hover {
color: var( --color-link--hover );
color: var( --color-primary--hover );
}
&:active {
color: var( --color-link--active );
color: var( --color-primary--active );
}
&.new {

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

@ -25,7 +25,7 @@
* Only apply to internal links in article
*/
a[ href^='/' ]:not( .image ) {
.link-content-text(@color-link--active);
.link-content-text(@color-primary--active);
&.new {
background-image: linear-gradient( to right, @color-link-new--hover 0, @color-link-new--hover 100% );

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

@ -34,13 +34,14 @@
--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;
--color-primary: @color-primary;
--color-primary--hover: @color-primary--hover;
--color-primary--active: @color-primary--active;
/* Border Colors */
--border-color-base: @border-color-base;
--border-color-base--lighter: @border-color-base--lighter;

7
resources/variables.less
View file

@ -88,13 +88,14 @@
@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;
@color-primary: @color-accent50;
@color-primary--hover: @color-accent50--lighten;
@color-primary--active: @color-accent30;
/* Border Colors */
@border-color-base: rgba( 0, 0, 0, 0.05 );
@border-color-base--lighter: rgba( 0, 0, 0, 0.02 );