mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-04 18:59:03 +00:00
b0817115ea
Clean up the CSS class name to follow the MW CSS coding conventions. The structure is refactored to be similar to Vector for easier maintainenace.
184 lines
4.4 KiB
Plaintext
184 lines
4.4 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: 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;
|
|
}
|
|
|
|
&:hover {
|
|
background-color: var( --background-color-button-quiet--hover );
|
|
}
|
|
|
|
&:active {
|
|
background-color: var( --background-color-button-quiet--active );
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
&-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 {
|
|
&--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 !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
|
|
display: flex;
|
|
flex-direction: column-reverse; // HACK: Place button below ToC
|
|
pointer-events: none; // HACK: Make background clickable
|
|
transition: var( --transition-menu );
|
|
transition-property: bottom; // Transform won't work with the backdrop
|
|
|
|
&-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-xs );
|
|
transform-origin: var( --transform-origin-offset-start ) var( --transform-origin-offset-end );
|
|
}
|
|
|
|
.citizen-dropdown {
|
|
&-summary {
|
|
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; // HACK: Make button clickable
|
|
background-color: var( --color-surface-1 );
|
|
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;
|
|
}
|
|
}
|
|
}
|