mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-05 03:08:52 +00:00
240 lines
5.6 KiB
Plaintext
240 lines
5.6 KiB
Plaintext
.citizen-toc {
|
|
--citizen-toc-toggle-size: ~'calc( var( --font-size-small ) * var( --line-height-sm ) + var( --space-xs ) * 2 )';
|
|
font-size: var( --font-size-small );
|
|
line-height: var( --line-height-sm );
|
|
|
|
&-top {
|
|
.citizen-ui-icon {
|
|
transform: rotate( 90deg );
|
|
}
|
|
}
|
|
|
|
&-contents,
|
|
&-list {
|
|
margin: 0 0 0 var( --space-xs );
|
|
list-style: none;
|
|
border-left: var( --border-width-thick ) solid var( --border-color-base );
|
|
|
|
.citizen-toc-link {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
}
|
|
|
|
&-link {
|
|
position: relative;
|
|
display: flex;
|
|
gap: var( --space-xs );
|
|
padding: var( --space-xs );
|
|
font-weight: var( --font-weight-medium );
|
|
color: var( --color-emphasized );
|
|
|
|
&.citizen-toc-top {
|
|
height: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
opacity: 0 !important;
|
|
transition-property: opacity, height, padding !important;
|
|
}
|
|
|
|
&:has( + .citizen-toc-toggle ) {
|
|
/* Make space for toggle */
|
|
margin-right: var( --citizen-toc-toggle-size );
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --background-color-button-quiet--active );
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&-toggle {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
display: none;
|
|
width: var( --citizen-toc-toggle-size );
|
|
height: var( --citizen-toc-toggle-size );
|
|
padding: 0;
|
|
background: transparent;
|
|
}
|
|
|
|
&-indicator {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
flex-shrink: 0;
|
|
width: var( --border-width-thick );
|
|
margin-top: var( --space-xs );
|
|
margin-bottom: var( --space-xs );
|
|
margin-left: ~'calc( var( --border-width-thick ) * -1 )';
|
|
}
|
|
|
|
&-text {
|
|
display: flex;
|
|
gap: var( --space-xs );
|
|
}
|
|
|
|
&-numb {
|
|
display: none;
|
|
color: var( --color-subtle );
|
|
}
|
|
|
|
&-list-item {
|
|
position: relative;
|
|
|
|
&--active {
|
|
> .citizen-toc-link {
|
|
color: var( --color-progressive );
|
|
|
|
.citizen-toc-indicator {
|
|
background-color: var( --color-progressive );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Collapse ToC sections by default, excluding no-js
|
|
.client-js .citizen-toc {
|
|
.citizen-toc-level-1 .citizen-toc-list-item {
|
|
display: none;
|
|
}
|
|
|
|
.citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-list-item {
|
|
display: block;
|
|
}
|
|
|
|
.citizen-toc-toggle {
|
|
--size-icon: var( --font-size-x-small );
|
|
display: grid;
|
|
place-content: center;
|
|
cursor: pointer;
|
|
border-radius: var( --border-radius--small );
|
|
|
|
.citizen-ui-icon {
|
|
&::before {
|
|
transition: var( --transition-hover );
|
|
transition-property: transform;
|
|
transform: rotate3d( 1, 0, 0, 180deg );
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --background-color-button-quiet--active );
|
|
}
|
|
}
|
|
|
|
.citizen-toc-level-1.citizen-toc-list-item--expanded .citizen-toc-toggle .citizen-ui-icon::before {
|
|
transform: none;
|
|
}
|
|
}
|
|
|
|
// Sticky header styles
|
|
.citizen-page-header--sticky {
|
|
.citizen-toc-top.citizen-toc-link {
|
|
height: 2rem; // 1rem text + 1rem padding
|
|
padding-top: var( --space-xs );
|
|
padding-bottom: var( --space-xs );
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
@media ( max-width: ( @max-width-breakpoint-tablet ) ) {
|
|
.citizen-toc {
|
|
position: fixed;
|
|
bottom: ~'calc( var( --header-size ) + var( --space-xs ) )';
|
|
left: 0;
|
|
z-index: @z-index-sticky; // Keep ToC above sticky header and page action, but below site header
|
|
pointer-events: none; // HACK: Make background clickable
|
|
|
|
&-card {
|
|
position: absolute;
|
|
// Get consistent margin
|
|
bottom: ~'calc( 100% - var( --space-xs ) )';
|
|
width: max-content;
|
|
// This is not bulletproof since it will get covered by page header
|
|
// in extremely short height. but it should be good for now
|
|
max-height: ~'calc( var( --header-card-maxheight ) - 8rem )';
|
|
padding: var( --space-xs );
|
|
transform-origin: var( --transform-origin-offset-start ) var( --transform-origin-offset-end );
|
|
}
|
|
|
|
.citizen-dropdown {
|
|
&-summary {
|
|
display: grid;
|
|
place-content: center;
|
|
width: var( --toolbar-size );
|
|
height: var( --toolbar-size );
|
|
margin: var( --space-xs );
|
|
pointer-events: auto; // HACK: Make button clickable
|
|
background-color: var( --color-surface-1 );
|
|
border: 1px solid var( --border-color-base );
|
|
border-radius: var( --border-radius-medium );
|
|
box-shadow: var( --box-shadow-drop-xx-large );
|
|
|
|
// The hover state colors are not great but it will do for now
|
|
&:hover {
|
|
background: ~'linear-gradient( var( --background-color-button-quiet--hover ), var( --background-color-button-quiet--hover ) ) var( --color-surface-1 )';
|
|
}
|
|
|
|
&:active {
|
|
background: ~'linear-gradient( var( --background-color-button-quiet--active ), var( --background-color-button-quiet--active ) ) var( --color-surface-1 )';
|
|
}
|
|
}
|
|
|
|
&-details[ open ] {
|
|
+ .citizen-menu__card {
|
|
pointer-events: auto; // HACK: Make ToC clickable after ToC is expanded
|
|
}
|
|
|
|
> .citizen-dropdown-summary {
|
|
background: ~'linear-gradient( var( --background-color-button-quiet--active ), var( --background-color-button-quiet--active ) ) var( --color-surface-1 )';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
|
.citizen-toc {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: var( --height-sticky-header );
|
|
max-height: ~'calc( 100vh - var( --height-sticky-header ) )';
|
|
padding: var( --space-xs ) 0;
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
|
|
.citizen-menu__card {
|
|
margin: 0;
|
|
background: transparent;
|
|
border: 0;
|
|
box-shadow: none;
|
|
transform: none;
|
|
|
|
> * {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Hide button in desktop viewport
|
|
.citizen-dropdown-summary {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|