mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-17 19:32:00 +00:00
bf8909e2bb
Previous behaviour was to remove the toc from view by applying a transform to the .toc > ul but *not* .toc itself.
This meant that .toc was still covering the body when the toc was "closed", eating clicks on anything that would be covered by the toc when opened.
This change puts a transform on .toc itself (and changes the transforms on the ul to match), fixing the issue. However, this creates a new stacking context, which affects .toctogglelabel, since its fixed position is now with respect to .toc, not the viewport. Setting .toctogglelabel { right: -100vw } keeps it in the same place.
215 lines
3.4 KiB
Plaintext
215 lines
3.4 KiB
Plaintext
@import '../variables.less';
|
|
@import '../mixins.less';
|
|
|
|
.toc {
|
|
position: fixed;
|
|
z-index: -1; // So that it is below float objects in content
|
|
max-width: 450px;
|
|
top: @header-height;
|
|
left: 0;
|
|
padding: @margin-side;
|
|
color: @base-70;
|
|
|
|
&::-webkit-scrollbar {
|
|
width: 0; // Hide bar on toc
|
|
}
|
|
|
|
&title {
|
|
h2 {
|
|
margin: 0;
|
|
color: @base-50 !important;
|
|
font-size: @ui-menu-text-big;
|
|
}
|
|
}
|
|
|
|
&toggle {
|
|
&span {
|
|
display: none;
|
|
}
|
|
|
|
&checkbox:checked ~ ul {
|
|
display: block !important; // Force display
|
|
}
|
|
}
|
|
|
|
li {
|
|
&.toclevel-2,
|
|
&.toclevel-3,
|
|
&.toclevel-4,
|
|
&.toclevel-5,
|
|
&.toclevel-6 {
|
|
margin-left: 9px;
|
|
border-left: 1px dashed;
|
|
}
|
|
}
|
|
|
|
li.active {
|
|
color: @accent-50;
|
|
|
|
> a {
|
|
color: inherit !important;
|
|
border-color: currentColor;
|
|
}
|
|
|
|
a,
|
|
li {
|
|
color: @base-30;
|
|
}
|
|
}
|
|
|
|
a {
|
|
display: inline-block;
|
|
margin: @content-margin-top / 4 0;
|
|
padding-left: 9px;
|
|
color: @base-50;
|
|
border-left: 3px solid transparent;
|
|
|
|
&:hover {
|
|
color: @base-30;
|
|
}
|
|
}
|
|
|
|
&number {
|
|
.mixin-screen-reader-text;
|
|
}
|
|
|
|
ul {
|
|
margin: 0 !important;
|
|
list-style: none;
|
|
}
|
|
|
|
> ul {
|
|
margin: @content-margin-top * 0.75 0 0 0 !important;
|
|
position: relative;
|
|
z-index: 2;
|
|
border-left: 1px dashed;
|
|
max-width: ~'calc( (100vw - '@page-width + @margin-side * 4 ~' ) / 2 )';
|
|
max-height: ~'calc( 100vh - '@header-height * 2 + @margin-side * 4 ~' )';
|
|
overflow: visible auto;
|
|
overscroll-behavior: contain;
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: @screen3 ) {
|
|
.toc {
|
|
z-index: 10;
|
|
height: 100%;
|
|
margin-top: -@header-height;
|
|
padding: 0;
|
|
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;
|
|
margin: @margin-side;
|
|
padding: 0 @margin-side / 2;
|
|
width: 39px;
|
|
height: 56px;
|
|
display: block;
|
|
background-color: @base-90;
|
|
border-radius: 100%;
|
|
.boxshadow(4);
|
|
|
|
&:hover {
|
|
background-color: @menu-item-link-hover;
|
|
.boxshadow(5);
|
|
|
|
&:before {
|
|
opacity: @opacity-icon-active;
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
background-color: @menu-item-link-active;
|
|
}
|
|
|
|
&:before {
|
|
.resource-loader-icon;
|
|
display: block;
|
|
opacity: @opacity-icon;
|
|
}
|
|
}
|
|
|
|
&checkbox:not( :checked ) ~ ul {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
&title h2 {
|
|
display: none;
|
|
}
|
|
|
|
> ul {
|
|
display: block !important; // So that animation is visible
|
|
margin: 0 !important;
|
|
padding: @header-height + @margin-side @margin-side @margin-side * 2 @margin-side / 2 !important; // More scroll spaces
|
|
max-width: none;
|
|
height: 100%;
|
|
max-height: ~'calc( 100vh - '@header-height + @margin-side * 3 ~')';
|
|
background: @base-100;
|
|
border-radius: 0 @border-radius-large @border-radius-large 0;
|
|
.boxshadow(3);
|
|
transform: translateX(100%);
|
|
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 ) {
|
|
.toc {
|
|
&togglelabel {
|
|
background-color: @dark-bg-50;
|
|
|
|
&:before {
|
|
filter: invert( 1 );
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background-color: @accent-10;
|
|
}
|
|
}
|
|
|
|
> ul {
|
|
background: @dark-bg-40;
|
|
}
|
|
}
|
|
}
|
|
}
|