mirror of
https://github.com/StarCitizenTools/mediawiki-skins-Citizen.git
synced 2024-12-05 03:08:52 +00:00
c9d98e477a
--height-sticky-header will always return the current height of sticky header. It can be used to offset sticky elements so that it adjusts to the sticky header.
169 lines
3.7 KiB
Plaintext
169 lines
3.7 KiB
Plaintext
/**
|
|
* Dark theme mixin
|
|
* Dark theme needs a mixin because it is being used by the auto theme as well
|
|
*/
|
|
.theme-dark() {
|
|
--color-primary__l: 60%;
|
|
|
|
--color-surface-0__s: 20%;
|
|
--color-surface-0__l: 8%;
|
|
|
|
--color-surface-1__s: 25%;
|
|
--color-surface-1__l: 10%;
|
|
|
|
--color-surface-2__s: 25%;
|
|
--color-surface-2__l: 13%;
|
|
|
|
--color-surface-3__s: 15%;
|
|
--color-surface-3__l: 18%;
|
|
|
|
--color-surface-4__s: 15%;
|
|
--color-surface-4__l: 23%;
|
|
|
|
--color-emphasized: ~'hsl( var( --color-primary__h ), 80%, 95% )';
|
|
--color-base: ~'hsl( var( --color-primary__h ), 25%, 80% )';
|
|
--color-subtle: ~'hsl( var( --color-primary__h ), 25%, 65% )';
|
|
|
|
--background-color-progressive-subtle: ~'hsl( var( --color-primary__h ), var( --color-primary__s ), 10% )';
|
|
--background-color-destructive-subtle: #360003;
|
|
--background-color-warning-subtle: #251400;
|
|
--background-color-success-subtle: #001f12;
|
|
--background-color-button-quiet--hover: rgba( 255, 255, 255, 0.04 );
|
|
--background-color-button-quiet--active: rgba( 255, 255, 255, 0.08 );
|
|
--background-color-icon: ~'rgba( 255, 255, 255, var( --opacity-icon-base ) )';
|
|
--background-color-icon--hover: ~'rgba( 255, 255, 255, var( --opacity-icon-base--hover ) )';
|
|
--background-color-icon--active: ~'rgba( 255, 255, 255, var( --opacity-icon-base--active ) )';
|
|
|
|
--border-color-base: rgba( 255, 255, 255, 0.05 );
|
|
--border-color-subtle: rgba( 255, 255, 255, 0.02 );
|
|
--border-color-interactive: rgba( 255, 255, 255, 0.08 );
|
|
|
|
--surface-shadow: var( --color-primary__h ), 50%, 3%;
|
|
--shadow-strength: 0.8;
|
|
|
|
--filter-invert: invert( 1 ) hue-rotate( 180deg );
|
|
|
|
--font-grade: -25;
|
|
|
|
// FIXME: Browsers seem to treat GRAD differently, disabling for now
|
|
// Dark theme usually have an illusion of thicker fonts
|
|
// So we have to tune it back
|
|
// font-variation-settings: 'GRAD' -90;
|
|
|
|
color-scheme: dark;
|
|
}
|
|
|
|
.feature-pure-black() {
|
|
--color-surface-0__l: 0%;
|
|
|
|
--color-surface-1__s: 20%;
|
|
|
|
--color-surface-1__l: 4%;
|
|
|
|
--color-surface-2__l: 6%;
|
|
|
|
--color-surface-3__l: 9%;
|
|
|
|
--color-surface-4__l: 14%;
|
|
|
|
--shadow-strength: 0.06;
|
|
}
|
|
|
|
.skin-theme-clientpref-night {
|
|
:root& {
|
|
.theme-dark();
|
|
}
|
|
}
|
|
|
|
.skin-theme-clientpref-os {
|
|
@media ( prefers-color-scheme: dark ) {
|
|
:root& {
|
|
.theme-dark();
|
|
}
|
|
}
|
|
}
|
|
|
|
.citizen-feature-custom-font-size-clientpref-small {
|
|
:root& {
|
|
--font-size-base: 0.875rem;
|
|
}
|
|
}
|
|
|
|
.citizen-feature-custom-font-size-clientpref-large {
|
|
:root& {
|
|
--font-size-base: 1.125rem;
|
|
}
|
|
}
|
|
|
|
.citizen-feature-custom-width-clientpref-standard {
|
|
:root& {
|
|
--width-layout: 1080px;
|
|
}
|
|
}
|
|
|
|
.citizen-feature-custom-width-clientpref-wide {
|
|
:root& {
|
|
--width-layout: 1600px;
|
|
}
|
|
}
|
|
|
|
.citizen-feature-custom-width-clientpref-full {
|
|
:root& {
|
|
--width-layout: 100vw;
|
|
}
|
|
}
|
|
|
|
.citizen-feature-pure-black-clientpref-1 {
|
|
:root.skin-theme-clientpref-night& {
|
|
.feature-pure-black();
|
|
}
|
|
|
|
@media ( prefers-color-scheme: dark ) {
|
|
:root.skin-theme-clientpref-os& {
|
|
.feature-pure-black();
|
|
}
|
|
}
|
|
}
|
|
|
|
.citizen-feature-autohide-navigation-clientpref-1 {
|
|
@media ( max-width: @max-width-breakpoint-tablet ) {
|
|
.citizen-scroll--down {
|
|
--height-sticky-header: 0 !important;
|
|
|
|
.citizen-header {
|
|
transform: translateY( 100% );
|
|
}
|
|
|
|
.citizen-toc {
|
|
bottom: var( --space-xs );
|
|
}
|
|
|
|
.page-actions {
|
|
box-shadow: none;
|
|
opacity: 0;
|
|
transform: translateY( 250% );
|
|
}
|
|
|
|
&.citizen-page-header--sticky {
|
|
.citizen-page-header {
|
|
transform: translateY( -150% );
|
|
|
|
.citizen-page-heading {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.citizen-scroll--up {
|
|
// Page actions needed to have a scroll up handler to avoid clipping issue
|
|
.page-actions {
|
|
opacity: 1;
|
|
transition: var( --transition-menu );
|
|
transition-delay: 250ms;
|
|
transition-property: opacity, transform;
|
|
}
|
|
}
|
|
}
|
|
}
|