MediaWiki:Citizen.css
MediaWiki interface page
More actions
Poznámka: Po zveřejnění musíte vyprázdnit cache vašeho prohlížeče, jinak změny neuvidíte.
- Firefox / Safari: Při kliknutí na Aktualizovat držte Shift nebo stiskněte Ctrl-F5 nebo Ctrl-R (na Macu ⌘-R)
- Google Chrome: Stiskněte Ctrl-Shift-R (na Macu ⌘-Shift-R)
- Edge: Při kliknutí na Aktualizovat držte Ctrl nebo stiskněte Ctrl-F5.
.mw-portlet-skin-client-prefs-skin-theme,
.mw-portlet-skin-client-prefs-citizen-feature-pure-black,
.citizen-footer__desc,
#ca-talk {
display: none !important;
}
.mw-parser-output .citizen-section .mw-heading,
.mw-parser-output .citizen-section .citizen-section-heading {
margin: 0 !important;
padding: 0 !important;
}
.mw-parser-output .citizen-section .mw-heading > h2 {
margin-top: 25px !important;
}
.mw-parser-output .citizen-section .mw-heading > h3 {
margin-top: 20px !important;
}
.mw-parser-output .citizen-section .mw-heading > h4 {
margin-top: 15px !important;
}
.mw-parser-output .citizen-section .mw-heading > h5 {
margin-top: 10px !important;
}
.mw-parser-output .citizen-section .mw-heading > h6 {
margin-top: 5px !important;
}
.ve-ce-documentNode h2 { margin-top: 20px !important; }
.ve-ce-documentNode h3 { margin-top: 15px !important; }
.ve-ce-documentNode h4 { margin-top: 10px !important; }
.ve-ce-documentNode h5 { margin-top: 5px !important; }
.ve-ce-documentNode h6 { margin-top: 0 !important; }
.ve-ui-surface .ve-ce-documentNode h2 { margin-top: 20px !important; }
.ve-ui-surface .ve-ce-documentNode h3 { margin-top: 15px !important; }
.ve-ui-surface .ve-ce-documentNode h4 { margin-top: 10px !important; }
.ve-ui-surface .ve-ce-documentNode h5 { margin-top: 5px !important; }
.ve-ui-surface .ve-ce-documentNode h6 { margin-top: 0 !important; }
:root {
/* === HUE separace === */
--ui-oklch__h: 256.57; /* temně MODRÁ pro UI (texty/surfaces) */
--ui-hsl__h: 257; /* HSL fallback přibližně k 256.57° */
/* === ZÁKLADNÍ BARVY (UI modrá, NE z akcentu) === */
--color-base: oklch(var(--color-base-oklch__l) var(--color-base-oklch__c) var(--ui-oklch__h));
--color-base-fixed: #e9eefb;
--color-base--hover: oklch(calc(var(--color-base-oklch__l) + var(--delta-lightness-hover-state)) var(--color-base-oklch__c) var(--ui-oklch__h));
--color-emphasized: oklch(var(--color-emphasized-oklch__l) var(--color-emphasized-oklch__c) var(--ui-oklch__h));
--color-subtle: oklch(var(--color-subtle-oklch__l) var(--color-subtle-oklch__c) var(--ui-oklch__h));
--color-placeholder: oklch(var(--color-placeholder-oklch__l) var(--color-placeholder-oklch__c) var(--ui-oklch__h));
--color-disabled: oklch(var(--color-disabled-oklch__l) var(--color-disabled-oklch__c) var(--ui-oklch__h));
--color-inverted: #0b0f1a;
--color-inverted-fixed: #fff;
/* Akcent (gold) */
--background-color-progressive: var(--color-progressive);
--background-color-progressive--hover: var(--color-progressive--hover);
--background-color-progressive--active: var(--color-progressive--active);
--background-color-progressive--focus: var(--color-progressive);
--background-color-progressive-subtle: hsl(38,85%,16%);
/* === Stavové barvy === */
--color-destructive: hsl(var(--color-destructive__h),100%,var(--color-destructive__l));
--color-destructive--hover: hsl(var(--color-destructive__h),100%,calc(var(--color-destructive__l) + var(--delta-lightness-hover-state)));
--color-destructive--active: hsl(var(--color-destructive__h),100%,calc(var(--color-destructive__l) + var(--delta-lightness-active-state)));
--color-destructive--focus: var(--color-progressive);
--color-warning: hsl(var(--color-warning__h),100%,var(--color-warning__l));
--color-success: hsl(var(--color-success__h),100%,var(--color-success__l));
--color-notice: var(--color-base);
--color-content-added: var(--color-success);
--color-content-removed: var(--color-destructive);
--filter-invert-icon: 0;
--filter-invert-primary-button-icon: 0;
/* === Stíny === */
--box-shadow-color-base: var(--box-shadow-color-alpha-base);
--box-shadow-color-progressive--active: var(--color-progressive--active);
--box-shadow-color-progressive--focus: var(--color-progressive);
--box-shadow-color-progressive-selected: var(--color-progressive);
--box-shadow-color-progressive-selected--hover: var(--color-progressive--hover);
--box-shadow-color-progressive-selected--active: var(--color-progressive--active);
--box-shadow-color-destructive--focus: var(--color-progressive);
--box-shadow-color-inverted: #fff;
--box-shadow-color-transparent: transparent;
/* === Surfaces (zakotveno na oklch(0.15 0.03 256.57)) === */
--background-color-base: var(--color-surface-0);
--background-color-base-fixed: oklch(15% 0.03 var(--ui-oklch__h)); /* hlavní barva pozadí */
--background-color-neutral: var(--color-surface-2);
--background-color-neutral-subtle: var(--color-surface-1);
--background-color-interactive: var(--color-surface-2);
--background-color-interactive-subtle: var(--color-surface-1);
--background-color-disabled: var(--color-surface-3);
--background-color-disabled-subtle: var(--color-surface-1);
--background-color-inverted: #101418;
/* Hover/Active podklady – modré/neutral */
--background-color-interactive--hover: var(--color-surface-2--hover);
--background-color-interactive--active: var(--color-surface-2--active);
--background-color-interactive-subtle--hover: var(--color-surface-1--hover);
--background-color-interactive-subtle--active: var(--color-surface-1--active);
/* Další pozadí */
--background-color-error: var(--color-destructive);
--background-color-error--hover: var(--color-destructive--hover);
--background-color-error--active: var(--color-destructive--active);
--background-color-error-subtle: var(--background-color-destructive-subtle);
--background-color-warning-subtle: hsl(var(--color-warning__h),var(--background-color-subtle__s),var(--background-color-subtle__l));
--background-color-success-subtle: hsl(var(--color-success__h),var(--background-color-subtle__s),var(--background-color-subtle__l));
--background-color-notice-subtle: var(--color-surface-2);
--background-color-content-added: var(--background-color-success-subtle);
--background-color-content-removed: var(--background-color-destructive-subtle);
--background-color-transparent: transparent;
/* Backdrop/glass – modrý nádech */
--backdrop-opacity: 0.75;
--background-color-backdrop-light: oklch(var(--color-surface-0-oklch__l) var(--color-surface-0-oklch__c) var(--ui-oklch__h) / var(--backdrop-opacity));
--background-color-backdrop-dark: rgba(0,0,0,var(--backdrop-opacity));
/* Quiet/ghost */
--background-color-button-quiet--hover: rgba(255,255,255,0.08);
--background-color-button-quiet--active: rgba(255,255,255,0.14);
/* Framed tab list hover/active */
--background-color-tab-list-item-framed--hover: rgba(255,255,255,0.18);
--background-color-tab-list-item-framed--active: rgba(255,255,255,0.36);
/* Ikony a opacities */
--opacity-icon-base: 0.66;
--opacity-icon-base--hover: 0.8;
--opacity-icon-base--selected: 1;
--opacity-icon-base--disabled: 0.5;
--opacity-icon-placeholder: 0.5;
--opacity-icon-subtle: 0.67;
/* Rámečky – jemně zlehka (pozadí je světlejší než dřív) */
--border-color-base: rgba(255,255,255,0.16);
--border-color-subtle: rgba(255,255,255,0.10);
--border-color-muted: rgba(255,255,255,0.06);
--border-color-interactive: rgba(255,255,255,0.20);
--border-color-disabled: var(--border-color-subtle);
--border-color-inverted: #000;
--border-color-progressive: var(--color-progressive);
--border-color-progressive--hover: var(--color-progressive--hover);
--border-color-progressive--active: var(--color-progressive--active);
--border-color-progressive--focus: var(--color-progressive);
--border-color-error: var(--border-color-base);
--border-color-error--hover: var(--border-color-base);
--border-color-warning: var(--border-color-base);
--border-color-success: var(--border-color-base);
--border-color-notice: var(--border-color-base);
--border-color-content-added: var(--border-color-base);
--border-color-content-removed: var(--border-color-base);
--border-color-transparent: transparent;
--border-color-divider: var(--border-color-base);
--outline-color-progressive--focus: var(--color-progressive);
/* Linky (gold) */
--color-link: var(--color-progressive);
--color-visited: #a56f0c;
--color-visited--hover: var(--color-progressive--hover);
--color-visited--active: var(--color-progressive--active);
/* Binary inputs */
--border-color-input--hover: var(--border-color-interactive);
--border-color-input-binary: var(--border-color-interactive);
--border-color-input-binary--hover: var(--border-color-progressive--hover);
--border-color-input-binary--active: var(--border-color-progressive--active);
--border-color-input-binary--focus: var(--border-color-progressive--focus);
--border-color-input-binary--checked: var(--border-color-progressive);
--background-color-input-binary--checked: var(--color-progressive);
/* Stíny – modrá fáze */
--box-shadow-color-alpha-base: oklch(var(--shadow-color-oklch__l) var(--shadow-color-oklch__c) var(--ui-oklch__h) / var(--shadow-opacity));
/* Typografie a systémové věci */
--font-size-x-small: 0.75rem;
--font-size-small: 0.875rem;
--font-size-medium: 1rem;
--font-size-large: 1.10rem;
--font-size-x-large: 1.25rem;
--font-size-xx-large: 1.40rem;
--font-size-xxx-large: 1.6rem;
--line-height-x-small: 1.25rem;
--line-height-small: 1.375rem;
--line-height-medium: 1.625rem;
--line-height-large: 1.75rem;
--line-height-x-large: 1.875rem;
--line-height-xx-large: 2.125rem;
--line-height-xxx-large: 2.375rem;
--line-height-content: 1.625
}
/* ===== OKLCH → HSL fallbacky ===== */
@supports not (color: oklch(100% 0 0)) {
:root {
--color-base: hsl(var(--ui-hsl__h),var(--color-base-hsl__s),var(--color-base-hsl__l));
--color-base--hover: hsl(var(--ui-hsl__h),var(--color-base-hsl__s),calc(var(--color-base-hsl__l) + var(--delta-lightness-hover-state)));
--color-emphasized: hsl(var(--ui-hsl__h),var(--color-emphasized-hsl__s),var(--color-emphasized-hsl__l));
--color-subtle: hsl(var(--ui-hsl__h),var(--color-subtle-hsl__s),var(--color-subtle-hsl__l));
--color-placeholder: hsl(var(--ui-hsl__h),var(--color-placeholder-hsl__s),var(--color-placeholder-hsl__l));
--color-disabled: hsl(var(--ui-hsl__h),var(--color-disabled-hsl__s),var(--color-disabled-hsl__l));
/* GOLD akcent */
--color-progressive-hsl__h: 38;
--color-progressive-hsl__s: 85%;
--color-progressive-hsl__l: 50%;
--color-progressive: hsl(var(--color-progressive-hsl__h),var(--color-progressive-hsl__s),var(--color-progressive-hsl__l));
--color-progressive--hover: hsl(var(--color-progressive-hsl__h),var(--color-progressive-hsl__s),calc(var(--color-progressive-hsl__l) + var(--delta-lightness-hover-state)));
--color-progressive--active: hsl(var(--color-progressive-hsl__h),var(--color-progressive-hsl__s),calc(var(--color-progressive-hsl__l) + var(--delta-lightness-active-state)));
--background-color-backdrop-light: hsl(var(--ui-hsl__h),var(--color-surface-0-hsl__s),var(--color-surface-0-hsl__l) / var(--backdrop-opacity));
--box-shadow-color-alpha-base: hsl(var(--ui-hsl__h) var(--shadow-color-hsl__s) var(--shadow-color-hsl__l) / var(--shadow-opacity))
}
}
/* ===== Ladder (odvozené povrchy okolo hlavní barvy) ===== */
:root {
/* Δ světla */
--delta-lightness-state-base: 5%;
--delta-lightness-hover-state: calc(var(--delta-lightness-state-base) * 1);
--delta-lightness-active-state: calc(var(--delta-lightness-state-base) * -1);
--delta-lightness-surface-base: -2%;
/* SURFACE LADDER – zakotveno na 15%/0.03/256.57° */
--color-surface-0-oklch__l: 15%;
--color-surface-0-oklch__c: 0.030;
--color-surface-1-oklch__l: 17.5%;
--color-surface-1-oklch__c: 0.034;
--color-surface-2-oklch__l: 20%;
--color-surface-2-oklch__c: 0.038;
--color-surface-3-oklch__l: 22.5%;
--color-surface-3-oklch__c: 0.043;
--color-surface-4-oklch__l: 26%;
--color-surface-4-oklch__c: 0.048;
--color-surface-0: oklch(var(--color-surface-0-oklch__l) var(--color-surface-0-oklch__c) var(--ui-oklch__h));
--color-surface-1: oklch(var(--color-surface-1-oklch__l) var(--color-surface-1-oklch__c) var(--ui-oklch__h));
--color-surface-1--hover: oklch(calc(var(--color-surface-1-oklch__l) + var(--delta-lightness-hover-state)) var(--color-surface-1-oklch__c) var(--ui-oklch__h));
--color-surface-1--active: oklch(calc(var(--color-surface-1-oklch__l) + var(--delta-lightness-active-state)) var(--color-surface-1-oklch__c) var(--ui-oklch__h));
--color-surface-2: oklch(var(--color-surface-2-oklch__l) var(--color-surface-2-oklch__c) var(--ui-oklch__h));
--color-surface-2--hover: oklch(calc(var(--color-surface-2-oklch__l) + var(--delta-lightness-hover-state)) var(--color-surface-2-oklch__c) var(--ui-oklch__h));
--color-surface-2--active: oklch(calc(var(--color-surface-2-oklch__l) + var(--delta-lightness-active-state)) var(--color-surface-2-oklch__c) var(--ui-oklch__h));
--color-surface-3: oklch(var(--color-surface-3-oklch__l) var(--color-surface-3-oklch__c) var(--ui-oklch__h));
--color-surface-4: oklch(var(--color-surface-4-oklch__l) var(--color-surface-4-oklch__c) var(--ui-oklch__h));
/* Textové OKLCH složky */
--color-emphasized-oklch__l: 97%;
--color-emphasized-oklch__c: 0.02;
--color-base-oklch__l: 93%;
--color-base-oklch__c: 0.02;
--color-subtle-oklch__l: 75%;
--color-subtle-oklch__c: 0.05;
--color-placeholder-oklch__l: 68%;
--color-placeholder-oklch__c: 0.04;
--color-disabled-oklch__l: 62%;
--color-disabled-oklch__c: 0.035;
--color-inverted-primary: #fff;
/* Stavové H hodnoty */
--color-destructive__h: 5;
--color-destructive__l: 50%;
--color-success__h: 150;
--color-success__l: 40%;
--color-warning__h: 48;
--color-warning__l: 50%;
/* Subtle pozadí */
--background-color-subtle__s: 95%;
--background-color-subtle__l: 16%;
--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));
/* Syntax (ponecháno) */
--color-link: var(--color-progressive);
--color-link--hover: var(--color-progressive--hover);
--color-link--active: var(--color-progressive--active);
--color-syntax-red: #e53935;
--color-syntax-orange: #f76d47;
--color-syntax-yellow: #e2931d;
--color-syntax-green: #91b859;
--color-syntax-cyan: #39adb5;
--color-syntax-blue: #6182b8;
--color-syntax-paleblue: #8796b0;
--color-syntax-purple: #9c3eda;
--color-syntax-brown: #916b53;
--color-syntax-pink: #ff5370;
--color-syntax-violet: #945eb8;
--color-syntax-grey: #90a4ae;
/* Sklo & stín */
--backdrop-filter-frosted-glass: blur(16px) saturate(140%);
--opacity-glass: 0.85;
--font-grade: 25;
--shadow-color-oklch__l: 20%;
--shadow-color-oklch__c: 0.02;
--shadow-color-hsl__s: 10%;
--shadow-color-hsl__l: 20%;
--shadow-opacity: 0.12;
/* Režim: DARK */
color-scheme: dark;
/* HSL fallback pro surfaces (přibližné ekvivalenty) */
--color-surface-0-hsl__s: 22%;
--color-surface-0-hsl__l: 15%;
--color-surface-1-hsl__s: 22%;
--color-surface-1-hsl__l: 17.5%;
--color-surface-2-hsl__s: 23%;
--color-surface-2-hsl__l: 20%;
--color-surface-3-hsl__s: 24%;
--color-surface-3-hsl__l: 22.5%;
--color-surface-4-hsl__s: 26%;
--color-surface-4-hsl__l: 26%;
/* …(layout/proměnné beze změn)… */
--border-radius-medium: calc(var(--border-radius-base) * 2);
--border-radius-large: calc(var(--border-radius-base) * 3);
--box-shadow-border: var(--border-color-base) 0 0 0 1px;
--filter-invert-fixed: invert(1) hue-rotate(180deg);
--font-family-citizen-base: 'Roboto','Roboto-fallback';
--font-family-citizen-serif: 'Roboto Serif','Roboto Serif-fallback';
--font-family-citizen-monospace: 'Roboto Mono','Roboto Mono-fallback';
--font-family-language-base: '';
--font-family-language-serif: '';
--font-family-language-monospace: '';
--size-icon: 1.25rem;
--toolbar-size: 2.5rem;
--height-sticky-header: 0px;
--header-size: 3.5rem;
--header-card-maxheight: 80vh;
--overflow-gradient-size: 2rem;
--width-layout: 1080px;
--width-layout--extended: calc(var(--width-layout) * 1.5);
--width-toc: 240px;
--width-page: 1080px;
--padding-page: 16px;
--space-unit: 1rem;
--space-xxs: calc(0.25 * var(--space-unit));
--space-xs: calc(0.5 * var(--space-unit));
--space-sm: calc(0.75 * var(--space-unit));
--space-md: var(--space-unit);
--space-lg: calc(1.25 * var(--space-unit));
--space-xl: calc(1.5 * var(--space-unit));
--space-xxl: calc(2 * var(--space-unit));
--transition-delay-menu: 100ms;
--transition-timing-function-ease: cubic-bezier(0.44,0.21,0,1);
--transition-timing-function-ease-in: cubic-bezier(0.75,0,1,1);
--transition-timing-function-ease-out: cubic-bezier(0.215,0.61,0.355,1);
--transform-image-hover: scale(1.1);
--border-base: var(--border-width-base) solid var(--border-color-base);
--border-subtle: var(--border-width-base) solid var(--border-color-subtle);
--border-width-base: 1px;
--border-width-thick: 2px;
--border-radius-base: 4px;
--border-radius-sharp: 0;
--border-radius-pill: 9999px;
--border-radius-circle: 50%;
--box-shadow-small: 0 0 0 1px var(--border-color-base);
--box-shadow-medium: 0 0.5px 0.6px var(--box-shadow-color-alpha-base),0 1.6px 1.8px -0.8px var(--box-shadow-color-alpha-base),0 4px 4.5px -1.7px var(--box-shadow-color-alpha-base),0 9.8px 11px -2.5px var(--box-shadow-color-alpha-base);
--box-shadow-large: 0 0.5px 0.6px var(--box-shadow-color-alpha-base),0 2.8px 3.1px -0.4px var(--box-shadow-color-alpha-base),0 5.3px 6px -0.7px var(--box-shadow-color-alpha-base),0 8.7px 9.8px -1.1px var(--box-shadow-color-alpha-base),0 13.9px 15.6px -1.4px var(--box-shadow-color-alpha-base),0 21.8px 24.5px -1.8px var(--box-shadow-color-alpha-base);
--font-family-base: var(--font-family-citizen-base),var(--font-family-language-base),system-ui,-apple-system,sans-serif;
--font-family-serif: var(--font-family-citizen-serif),var(--font-family-language-serif),'Linux Libertine','Georgia','Times','Source Serif Pro',serif;
--font-family-monospace: var(--font-family-citizen-monospace),var(--font-family-language-monospace),'Menlo','Consolas','Liberation Mono','Fira Code','Courier New',monospace;
--font-weight-normal: 400;
--font-weight-medium: calc(var(--font-weight-normal) + 100);
--font-weight-semi-bold: calc(var(--font-weight-normal) + 200);
--font-weight-bold: calc(var(--font-weight-normal) + 300);
--font-family-overline: var(--font-family-base);
--font-weight-overline: var(--font-weight-medium);
--font-size-overline: var(--font-size-small);
--line-height-overline: var(--line-height-small);
--text-transform-overline: none;
--letter-spacing-overline: normal;
--header-direction: row;
--header-size-inline-start: 0px;
--header-size-inline-end: 0px;
--header-size-block-start: 0px;
--header-size-block-end: 0px;
--header-inset-block-start: 0px;
--header-inset-block-end: 0px;
--header-inset-inline-start: 0px;
--header-inset-inline-end: 0px;
--header-border-block-start-width: 0px;
--header-border-block-end-width: 0px;
--header-border-inline-start-width: 0px;
--header-border-inline-end-width: 0px;
--header-offset-block-start: calc(var(--header-size-block-start) + var(--height-sticky-header));
--header-offset-block-end: var(--header-size-block-end);
--color-primary__h: var(--color-progressive-hsl__h);
--color-primary__s: var(--color-progressive-hsl__s);
--color-primary__l: var(--color-progressive-hsl__l);
--font-size-base: var(--font-size-medium);
--line-height: 1.6;
--line-height-xxx-small: 1.25;
--line-height-xx-small: 1.375;
--box-shadow-drop-small: var(--box-shadow-small);
--box-shadow-drop-medium: var(--box-shadow-medium);
--box-shadow-drop-xx-large: var(--box-shadow-large)
}
/* HSL fallback povrchy (přibližně) */
@supports not (color: oklch(100% 0 0)) {
:root {
--color-surface-0:hsl(var(--ui-hsl__h),var(--color-surface-0-hsl__s),var(--color-surface-0-hsl__l));
--color-surface-1:hsl(var(--ui-hsl__h),var(--color-surface-1-hsl__s),var(--color-surface-1-hsl__l));
--color-surface-1--hover:hsl(var(--ui-hsl__h),var(--color-surface-1-hsl__s),calc(var(--color-surface-1-hsl__l) + var(--delta-lightness-hover-state)));
--color-surface-1--active:hsl(var(--ui-hsl__h),var(--color-surface-1-hsl__s),calc(var(--color-surface-1-hsl__l) + var(--delta-lightness-active-state)));
--color-surface-2:hsl(var(--ui-hsl__h),var(--color-surface-2-hsl__s),var(--color-surface-2-hsl__l));
--color-surface-2--hover:hsl(var(--ui-hsl__h),var(--color-surface-2-hsl__s),calc(var(--color-surface-2-hsl__l) + var(--delta-lightness-hover-state)));
--color-surface-2--active:hsl(var(--ui-hsl__h),var(--color-surface-2-hsl__s),calc(var(--color-surface-2-hsl__l) + var(--delta-lightness-active-state)));
--color-surface-3:hsl(var(--ui-hsl__h),var(--color-surface-3-hsl__s),var(--color-surface-3-hsl__l));
--color-surface-4:hsl(var(--ui-hsl__h),var(--color-surface-4-hsl__s),var(--color-surface-4-hsl__l))
}
}
/* media queries beze změn */
@media (min-width: 640px) {
:root { --padding-page:calc(16px * 1.5) }
}
@media (min-width: 1120px) {
:root { --padding-page:calc(16px * 2); --header-card-maxheight: calc(100vh - var(--space-sm) * 2) }
}
@media (prefers-contrast:more) { :root { --font-weight-normal: 500 } }
@media (prefers-contrast:less) { :root { --font-weight-normal: 300 } }
@media (max-width: calc(1120px - 1px)) {
:root {
--header-direction:row;
--header-inset-inline-start: 0px;
--header-inset-inline-end: 0px;
--header-size-block-end: var(--header-size);
--header-inset-block-start: auto;
--header-inset-block-end: 0;
--header-border-block-start-width: var(--border-width-base)
}
}
@media (min-width: 1120px) {
:root.citizen-header-position-left,:root.citizen-header-position-right {
--header-direction:column; --header-inset-block-start: 0px; --header-inset-block-end: 0px
}
:root.citizen-header-position-top,:root.citizen-header-position-bottom {
--header-direction: row; --header-inset-inline-start: 0px; --header-inset-inline-end: 0px
}
:root.citizen-header-position-left {
--header-size-inline-start: var(--header-size);
--header-inset-inline-start: 0px; --header-inset-inline-end: auto;
--header-border-inline-end-width: var(--border-width-base)
}
:root.citizen-header-position-right {
--header-size-inline-end: var(--header-size);
--header-inset-inline-start: auto; --header-inset-inline-end: 0px;
--header-border-inline-start-width: var(--border-width-base)
}
:root.citizen-header-position-top {
--header-size-block-start: var(--header-size);
--header-inset-block-start: 0px; --header-inset-block-end: auto;
--header-border-block-end-width: var(--border-width-base)
}
:root.citizen-header-position-bottom {
--header-size-block-end: var(--header-size);
--header-inset-block-start: auto; --header-inset-block-end: 0px;
--header-border-block-start-width: var(--border-width-base)
}
}
/*
* Star Citizen Wiki
* This stylesheet only contains site-wide styles.
* For template styles, check the specific template documentation.
*/
/* Adjust primary color */
:root {
--color-progressive-oklch__l: 64%;
--color-progressive-oklch__c: 0.1323;
--color-progressive-oklch__h: 74.16;
--color-progressive-hsl__h: 205;
}
h1,
h2,
h3,
h4,
h5,
h6,
.mw-logo-wordmark,
.citizen-sticky-header-page-title {
font-weight: var( --font-weight-medium );
}
h4,
h5,
h6 {
letter-spacing: 0.0125em;
}
/*
* Menu
* Rich format menu to have more hierarchy
*/
/* Remove bottom spacing as it is handled in footer portlet */
.citizen-drawer__menu {
margin-bottom: 0;
padding-bottom: 0;
}
.mw-portlet-External {
position: sticky;
bottom: 0;
margin-top: var( --space-md );
margin-inline: calc( var( --space-xs ) * -1 );
padding: var( --space-xs );
border-top: var( --border-base );
backdrop-filter: var( --backdrop-filter-frosted-glass );
font-size: var( --font-size-x-small );
grid-column: 1 / -1;
white-space: nowrap;
}
.mw-portlet-External .citizen-menu__heading {
display: none;
}
.mw-portlet-External ul {
display: flex;
overflow: auto;
}
.mw-portlet-External .mw-list-item a {
gap: 0;
}
/* Label */
.citizen-drawer__menu [id^="n-sidebar-label-"] a {
pointer-events: none;
margin-left: var( --space-xs );
padding-left: var( --space-md );
padding-right: var( --space-xs );
border-left: 1px solid var( --border-color-base );
border-radius: 0;
letter-spacing: 0.05em;
font-weight: var( --font-weight-normal );
color: var( --color-subtle ) !important;
}
/* Icons */
.citizen-drawer__menu [id^="n-sidebar-icon-"] a {
font-size: 0;
content-visibility: auto;
}
.citizen-drawer__menu [id^="n-sidebar-icon-"] a:before {
display: block;
content: "";
width: var( --size-icon );
height: var( --size-icon );
background-color: currentColor;
mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;
}
#n-sidebar-icon-discord a:before {
mask-image: url( https://media.starcitizen.tools/7/77/Discord_-_Simple_Icons.svg );
}
#n-sidebar-icon-twitter a:before {
mask-image: url( https://media.starcitizen.tools/6/6a/Twitter_-_Simple_Icons.svg );
}
#n-sidebar-icon-mastodon a:before {
mask-image: url( https://media.starcitizen.tools/d/de/Mastodon_-_Simple_Icons.svg );
}
#n-sidebar-icon-threads a:before {
mask-image: url( https://media.starcitizen.tools/9/9b/Threads_-_Simple_Icons.svg );
}
#n-sidebar-icon-bluesky a:before {
mask-image: url( https://media.starcitizen.tools/8/8b/Bluesky_-_Simple_Icons.svg );
}
#n-sidebar-icon-patreon a:before {
mask-image: url( https://media.starcitizen.tools/e/e9/Patreon_-_Simple_Icons.svg );
}
#n-sidebar-icon-kofi a:before {
mask-image: url( https://media.starcitizen.tools/4/48/Kofi_-_Simple_Icons.svg );
}
#n-sidebar-icon-github a:before {
mask-image: url( https://media.starcitizen.tools/8/85/Github_-_Simple_Icons.svg );
}
#n-sidebar-icon-reddit a:before {
mask-image: url( https://media.starcitizen.tools/e/e8/Reddit_-_Simple_Icons.svg );
}
/* Footer changes */
.citizen-footer {
padding-block: 6rem;
background-color: transparent;
}
.citizen-footer__siteinfo {
justify-content: space-between;
}
.citizen-footer__sitetitle .mw-logo-wordmark {
display: none;
}
/*
* Footer icons
* We use custom footer icons so we need to fine tune it
*/
#footer-icons a {
border: 0;
padding: 0;
background: transparent;
opacity: var( --opacity-icon-base );
transition: opacity 250ms ease;
}
#footer-icons a:hover {
opacity: var( --opacity-icon-base--hover );
}
#footer-icons a:active {
opacity: var( --opacity-icon-base--active );
}
/* More space between icons */
#footer-icons ul,
#footer-icons li {
column-gap: var( --space-md );
}
#footer-icons img {
width: auto;
height: 32px;
}
/* Darken the footer icon in light mode */
.skin-citizen-light #footer-icons a {
filter: invert( 1 ) hue-rotate( 180deg );
}
/*
* Very important checkmark
* Blue checkmark near wordmark
*/
.mw-logo-wordmark {
display: flex;
align-items: center;
gap: var( --space-sm );
}
/* CookieWarning tweaks */
.mw-cookiewarning-container {
max-width: 480px;
}
.mw-cookiewarning-text {
gap: var(--space-xs);
}
.mw-cookiewarning-text::before {
content: '🍪';
font-size: 2rem;
}
/* hide on pageload to prevent FoUC */
.client-js .mw-cookiewarning-container {
opacity: 0;
visibility: hidden;
transition: opacity 250ms ease, visibility 250ms ease;
}
/* citizen-animations-ready is added when scripts are loaded */
.client-js.citizen-animations-ready .mw-cookiewarning-container {
opacity: 1;
visibility: visible;
}
/* Site notice styles */
/*
#scw-birthday {
padding: var( --space-sm ) var( --space-md );
background-color: var( --color-surface-2 );
font-size: var( --font-size-small );
font-weight: var( --font-weight-semibold );
}
#scw-birthday-canvas {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
*/
/* Full-width for pledge vehicle list page */
.page-List_of_pledge_vehicles {
--width-layout: 100vw;
}
/* Alternative theme */
/*
:root {
--font-family-citizen-base: monospace;
--font-size-base: 0.875rem;
--color-primary__h: 30;
--border-radius-base: 0;
--border-color-base: hsla( var( --color-primary__h ), 85%, 65%, 25% ) !important;
letter-spacing: -0.025em;
}
.mw-logo.citizen-header__button:after {
content: "🎃";
position: absolute;
left: 0;
}
*/
/* Pride month */
/*
.citizen-loading::after {
background-image: linear-gradient( 90deg, #FF3333 0%, #FF9933 20%, #FFFF66 40%, #66BB66 60%, #6666FF 80%, #BB66FF 100% );
}
*/
/* Verified badge */
/*
.mw-logo-wordmark:after {
content: "";
width: 1em;
height: 1em;
display: block;
background-image: url( https://media.starcitizen.tools/5/5f/SCW-Verified.svg );
}
*/
/* Animated gradient */
@property --gradient-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}
.scw-gradient-glow {
position: relative;
--clr-3: var( --color-progressive );
--clr-4: var( --border-color-base );
--clr-5: var( --border-color-subtle );
--gradient: var( --clr-3 ), var( --clr-4 ), var( --clr-5 ), var( --clr-4 ), var( --clr-3 );
--gradient-blur: 4px;
--gradient-time: 5s;
}
.scw-gradient-glow::before {
position: absolute;
inset: 0px;
z-index: -1;
content: '';
background: conic-gradient( from var( --gradient-angle ), var( --gradient ) );
border-radius: inherit;
animation: scw-gradient-rotate var( --gradient-time ) linear infinite;
filter: blur( var( --gradient-blur ) );
transition: filter 100ms ease;
}
@keyframes scw-gradient-rotate {
0% {
--gradient-angle: 0deg;
}
100% {
--gradient-angle: 360deg;
}
}
/* HACK: Hide UploadWizard personal purpose option */
.mwe-upwiz-deed-purpose > label:last-child {
display: none !important;
}