mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-17 19:32:00 +00:00
188 lines
3.3 KiB
Plaintext
188 lines
3.3 KiB
Plaintext
@import '../variables.less';
|
|
@import '../mixins.less';
|
|
|
|
.toc {
|
|
position: fixed;
|
|
z-index: -1; // So that it is below float objects in content
|
|
top: @header-height;
|
|
left: 0;
|
|
max-width: 450px;
|
|
padding: @margin-side;
|
|
color: var( --color-base--subtle );
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0; // Hide bar on toc
|
|
}
|
|
|
|
&title {
|
|
h2 {
|
|
margin: 0;
|
|
color: var( --color-base--subtle ) !important;
|
|
font-size: @ui-menu-text;
|
|
font-weight: normal;
|
|
letter-spacing: 0.75px;
|
|
}
|
|
}
|
|
|
|
&toggle {
|
|
&span {
|
|
display: none;
|
|
}
|
|
|
|
&checkbox:checked ~ ul {
|
|
display: block !important; // Force display
|
|
}
|
|
}
|
|
|
|
li {
|
|
&.toclevel-2,
|
|
&.toclevel-3,
|
|
&.toclevel-4,
|
|
&.toclevel-5,
|
|
&.toclevel-6 {
|
|
border-left: 1px dashed;
|
|
margin-left: 9px;
|
|
}
|
|
}
|
|
|
|
li.active {
|
|
color: var( --color-primary );
|
|
|
|
> a {
|
|
border-color: currentColor;
|
|
color: inherit !important;
|
|
}
|
|
|
|
a,
|
|
li {
|
|
color: var( --color-base );
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
padding-left: 9px;
|
|
border-left: 3px solid transparent;
|
|
margin: @content-margin-top / 4 0;
|
|
color: var( --color-base--subtle );
|
|
|
|
&:hover {
|
|
color: var( --color-base );
|
|
}
|
|
|
|
&:active {
|
|
color: var( --color-base--subtle );
|
|
}
|
|
}
|
|
|
|
&number {
|
|
.mixin-screen-reader-text;
|
|
}
|
|
|
|
ul {
|
|
margin: 0 !important;
|
|
list-style: none;
|
|
}
|
|
|
|
> ul {
|
|
position: relative;
|
|
z-index: 2;
|
|
display: block;
|
|
overflow: visible auto;
|
|
max-width: ~'calc( (100vw - '@page-width + @margin-side * 4 ~' ) / 2 )';
|
|
max-height: ~'calc( 100vh - '@header-height * 2 + @margin-side * 4 ~' )';
|
|
border-left: 1px dashed;
|
|
margin: @content-margin-top * 0.75 0 0 0 !important;
|
|
overscroll-behavior: contain;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @screen3 ) {
|
|
.toc {
|
|
z-index: 10;
|
|
height: 100%;
|
|
padding: 0;
|
|
margin-top: -@header-height;
|
|
transform: translateX( -100% );
|
|
|
|
&:before,
|
|
&:after {
|
|
content: unset; // Disable fade
|
|
}
|
|
|
|
&toggle {
|
|
&span {
|
|
display: block;
|
|
font-size: 0 !important;
|
|
}
|
|
|
|
&label {
|
|
position: fixed;
|
|
z-index: 7;
|
|
right: -100vw;
|
|
bottom: 0;
|
|
display: block;
|
|
width: 39px;
|
|
height: 56px;
|
|
padding: 0 @margin-side / 2;
|
|
margin: @margin-side;
|
|
background-color: var( --background-color-dp-06 );
|
|
border-radius: 100%;
|
|
.boxshadow(4);
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-dp-12 );
|
|
.boxshadow(5);
|
|
|
|
&:before {
|
|
opacity: @opacity-icon-active;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --background-color-dp-02 );
|
|
}
|
|
|
|
&:before {
|
|
.resource-loader-icon;
|
|
display: block;
|
|
opacity: @opacity-icon;
|
|
}
|
|
}
|
|
|
|
&checkbox:not( :checked ) ~ ul {
|
|
transform: translateX( -300px - @margin-side );
|
|
}
|
|
}
|
|
|
|
&title h2 {
|
|
display: none;
|
|
}
|
|
|
|
> ul {
|
|
display: block !important; // So that animation is visible
|
|
max-width: none;
|
|
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( --background-color-dp-16 );
|
|
border-radius: 0 @border-radius-large @border-radius-large 0;
|
|
transform: translateX( 100% );
|
|
transition: @transition-transform;
|
|
.boxshadow(3);
|
|
}
|
|
}
|
|
|
|
.skin-citizen-dark {
|
|
.toc {
|
|
&togglelabel {
|
|
&:before {
|
|
filter: invert( 1 );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|