StarCitizenTools/mediawiki-skins-Citizen
1
0
Fork 0
mirror of https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git synced 2024-11-24 06:24:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(core): tweak and clean up ToC card styles

Browse source
This commit is contained in:
alistair3149 2022-05-13 13:42:22 -04:00
parent 03d853c50e
commit 7bfc9f88d7
No known key found for this signature in database
GPG key ID: 94D081060FD3DD9C
1 changed files with 38 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -14,7 +14,7 @@
width: 100%;
max-width: ~'calc( var( --width-toc ) - var( --padding-page ) * 2 )';
color: var( --color-base--subtle );
font-size: @ui-menu-text;
font-size: 0.875rem;
&::-webkit-scrollbar {
width: 0; // Hide bar on toc
@ -23,7 +23,7 @@
&title {
h2 {
margin: 0;
color: var( --color-base--subtle ) !important;
color: var( --color-base--subtle );
font-size: inherit;
font-weight: normal;
letter-spacing: 0.75px;
@ -48,7 +48,7 @@
&.toclevel-4,
&.toclevel-5,
&.toclevel-6 {
margin-left: 10px;
margin-left: 0.75rem;
}
}
@ -56,14 +56,16 @@
border-color: var( --color-primary );
color: var( --color-primary );
> a {
color: inherit !important;
> a,
> a:hover,
> a:active {
color: inherit;
}
}
a {
display: block;
padding: 0.25rem 0 0.25rem 10px;
padding: 0.25rem 0 0.25rem 0.75rem;
color: var( --color-base );
&:hover {
@ -77,7 +79,7 @@
&number {
display: none;
margin-right: 4px;
margin-right: 0.25rem;
opacity: 0.7;
}
@ -86,7 +88,6 @@
}
ul {
margin: 0 !important;
list-style: none;
}
@ -96,36 +97,34 @@
display: block;
overflow: visible auto;
max-height: ~'calc( 100vh - var( --height-header ) - 3rem )'; // Somehow it works
padding-right: 10px;
margin: @content-margin-top * 0.75 0 0 0 !important;
padding-right: 0.75rem;
margin: 0.6rem 0 0 0;
font-weight: 450;
overscroll-behavior: contain;
ul {
margin: 0;
}
}
}
@media ( max-width: @width-breakpoint-desktop-wide ) {
.toc {
z-index: 11; // Higher than header
z-index: 3; // Lower than header
pointer-events: none;
&:before,
&:after {
content: unset; // Disable fade
}
&toggle {
&span {
display: block;
font-size: 0 !important;
font-size: 0;
}
&label {
--label-position: ~'calc( var( --width-toc ) - 20px )';
position: fixed;
z-index: 2;
left: var( --label-position );
width: 40px;
height: 40px;
width: 2.5rem;
height: 2.5rem;
border-radius: 0 var( --border-radius--medium ) var( --border-radius--medium ) 0;
cursor: pointer;
pointer-events: auto;
@ -150,6 +149,7 @@
&:before {
.resource-loader-icon;
display: block;
background-size: 1rem;
opacity: var( --opacity-icon-base );
}
}
@ -172,17 +172,29 @@
position: absolute;
z-index: 3;
width: ~'calc( 100% - var( --padding-page ) * 2 )';
padding: 20px var( --padding-page ) 10px var( --padding-page );
background: var( --color-surface-1 );
border-radius: var( --border-radius--medium ) 0 0 0;
padding: 1rem var( --padding-page );
&:before {
position: absolute;
z-index: -1;
top: 0;
right: 0;
left: 0;
height: 100%;
background: var( --color-surface-1 );
border-radius: var( --border-radius--medium );
content: '';
-webkit-mask-image: linear-gradient( 180deg, #000, transparent );
mask-image: linear-gradient( 180deg, #000, transparent );
}
}
> ul {
display: block !important; // So that animation is visible
max-height: ~'calc( 100vh - var( --height-header ) * 3 )';
padding: 0 var( --padding-page ) 20px var( --padding-page ); // hardcoded for now
margin: 45px 0 0 0 !important;
border-radius: 0 0 var( --border-radius--medium ) var( --border-radius--medium );
padding: 2.6rem var( --padding-page ) 1rem var( --padding-page ); // hardcoded for now
margin-top: 0;
border-radius: var( --border-radius--medium ) 0 var( --border-radius--medium ) var( --border-radius--medium );
pointer-events: auto;
.citizen-card( false );
}