mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-13 17:49:25 +00:00
refactor: use common CSS variables for ToC
This commit is contained in:
parent
ed5a9a9741
commit
24319fd190
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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% );
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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 );
|
||||
|
|
Loading…
Reference in a new issue