mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-11-26 15:24:22 +00:00
5d3ecd9edd
This is an on-going work to adapt Codex into Citizen. Some of the CSS variables are soft depreciated, see tokens.less for updated info.
215 lines
4.6 KiB
Plaintext
215 lines
4.6 KiB
Plaintext
.citizen-toc {
|
|
font-size: var( --font-size-small );
|
|
line-height: var( --line-height-xs );
|
|
|
|
&__top {
|
|
.citizen-ui-icon {
|
|
transform: rotate( 90deg );
|
|
}
|
|
}
|
|
|
|
&__contents,
|
|
&__list {
|
|
margin: 0 0 0 var( --space-xs );
|
|
list-style: none;
|
|
border-left: 1px 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-base );
|
|
border-radius: var( --border-radius--small );
|
|
|
|
&.citizen-toc__top {
|
|
height: 0;
|
|
padding-top: 0;
|
|
padding-bottom: 0;
|
|
opacity: 0;
|
|
transition-property: opacity, height, padding;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-quiet--hover );
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --background-color-quiet--active );
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&__indicator {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
flex-shrink: 0;
|
|
width: 3px;
|
|
margin-top: var( --space-xs );
|
|
margin-bottom: var( --space-xs );
|
|
margin-left: -2px;
|
|
border-radius: var( --border-radius--pill );
|
|
}
|
|
|
|
&__text {
|
|
display: flex;
|
|
gap: var( --space-xs );
|
|
}
|
|
|
|
&__numb {
|
|
display: none;
|
|
color: var( --color-subtle );
|
|
}
|
|
|
|
&__listItem {
|
|
&--active {
|
|
> .citizen-toc__link {
|
|
color: var( --color-progressive );
|
|
|
|
.citizen-toc__indicator {
|
|
background-color: var( --color-progressive );
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
}
|
|
|
|
@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-page-header + 1; // Need to be higher than the page actions
|
|
// Allow click through
|
|
pointer-events: none;
|
|
transition: var( --transition-menu );
|
|
transition-property: transform;
|
|
|
|
&__card {
|
|
// 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-md );
|
|
margin: var( --space-xs );
|
|
overflow: auto;
|
|
overscroll-behavior: contain;
|
|
-webkit-user-select: none;
|
|
user-select: none;
|
|
.citizen-card;
|
|
.citizen-card-hide( bottom left, '', false );
|
|
.citizen-card-transition();
|
|
}
|
|
|
|
// Move down when site header is hidden
|
|
.citizen-scroll--down & {
|
|
transform: translateY( var( --header-size ) );
|
|
}
|
|
}
|
|
|
|
#citizen-toc {
|
|
&__checkbox:checked {
|
|
~ .citizen-toc__card {
|
|
.citizen-card-show( false );
|
|
}
|
|
}
|
|
|
|
&__buttonCheckbox {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
display: grid;
|
|
place-content: center;
|
|
width: var( --toolbar-size );
|
|
height: var( --toolbar-size );
|
|
margin: var( --space-xs );
|
|
pointer-events: auto;
|
|
background-color: var( --color-surface-1 );
|
|
border-radius: var( --border-radius--medium );
|
|
box-shadow: var( --box-shadow-dialog );
|
|
transition: var( --transition-menu );
|
|
transition-property: transform;
|
|
transform: none;
|
|
transform-origin: bottom left;
|
|
|
|
// The hover state colors are not great but it will do for now
|
|
&:hover {
|
|
background-color: var( --color-surface-3 );
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --color-surface-1 );
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hide dismiss button when JS is enabled
|
|
// Since clicking outside will dismiss ToC already
|
|
.client-js {
|
|
#citizen-toc {
|
|
&__checkbox:checked {
|
|
// Fake seamless transition
|
|
~ #citizen-toc__buttonCheckbox {
|
|
pointer-events: none;
|
|
background-color: transparent;
|
|
box-shadow: none;
|
|
transform: scale( 1.2 );
|
|
|
|
.citizen-ui-icon {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@media ( min-width: @min-width-breakpoint-desktop ) {
|
|
.citizen-toc {
|
|
--toc-margin-top: var( --space-xs );
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top: var( --toc-margin-top );
|
|
max-height: ~'calc( 100vh - var( --toc-margin-top ) - var( --space-md ) )';
|
|
overflow-y: auto;
|
|
overscroll-behavior: contain;
|
|
|
|
// Sticky header styles
|
|
.citizen-page-header--sticky & {
|
|
--toc-margin-top: ~'calc( var( --header-size ) + var( --space-xxl ) )';
|
|
|
|
// Sticky header is shorter without buttons
|
|
@media ( max-height: 800px ) {
|
|
--toc-margin-top: ~'calc( var( --header-size ) + var( --space-md ) )';
|
|
}
|
|
}
|
|
}
|
|
|
|
// Hide button in desktop viewport
|
|
#citizen-toc__buttonCheckbox {
|
|
display: none;
|
|
}
|
|
}
|