|
|
| (One intermediate revision by the same user not shown) |
| Line 1: |
Line 1: |
| /**
| |
| * MediaWiki:Citizen.css
| |
| * Gruvbox-themed skin for the Citizen skin
| |
| * - Palette: original Gruvbox (dark + light, hard/medium/soft contrast bg0 used)
| |
| * - Headings: gothic (blackletter) display font
| |
| * - Code/monospace: Space Mono
| |
| *
| |
| * Import fonts first (Google Fonts). If your wiki blocks external font
| |
| * requests, self-host these instead and swap the @import for @font-face.
| |
| */
| |
|
| |
|
| @import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Space+Mono:wght@400;700&display=swap');
| |
|
| |
| /* Sorgath is not on Google Fonts / a free CDN — it must be self-hosted.
| |
| Upload the font file to your wiki (e.g. via Special:Upload) or another
| |
| host you control, then point src at that URL. Until you fill this in,
| |
| the stack below falls back to UnifrakturMaguntia. */
| |
| @font-face {
| |
| font-family: 'Sorgath';
| |
| src: url('https://your-wiki-domain.example/path/to/Sorgath.woff2') format('woff2'),
| |
| url('https://your-wiki-domain.example/path/to/Sorgath.otf') format('opentype');
| |
| font-weight: 400;
| |
| font-style: normal;
| |
| font-display: swap;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 1. GRUVBOX PALETTE (original, unmodified hex values from morhetz/gruvbox)
| |
| ========================================================================== */
| |
|
| |
| :root {
| |
| /* Dark mode - background */
| |
| --gb-dark-bg0-hard: #1d2021;
| |
| --gb-dark-bg0: #282828;
| |
| --gb-dark-bg0-soft: #32302f;
| |
| --gb-dark-bg1: #3c3836;
| |
| --gb-dark-bg2: #504945;
| |
| --gb-dark-bg3: #665c54;
| |
| --gb-dark-bg4: #7c6f64;
| |
|
| |
| /* Dark mode - foreground */
| |
| --gb-dark-fg0: #fbf1c7;
| |
| --gb-dark-fg1: #ebdbb2;
| |
| --gb-dark-fg2: #d5c4a1;
| |
| --gb-dark-fg3: #bdae93;
| |
| --gb-dark-fg4: #a89984;
| |
|
| |
| /* Light mode - background */
| |
| --gb-light-bg0-hard: #f9f5d7;
| |
| --gb-light-bg0: #fbf1c7;
| |
| --gb-light-bg0-soft: #f2e5bc;
| |
| --gb-light-bg1: #ebdbb2;
| |
| --gb-light-bg2: #d5c4a1;
| |
| --gb-light-bg3: #bdae93;
| |
| --gb-light-bg4: #a89984;
| |
|
| |
| /* Light mode - foreground */
| |
| --gb-light-fg0: #282828;
| |
| --gb-light-fg1: #3c3836;
| |
| --gb-light-fg2: #504945;
| |
| --gb-light-fg3: #665c54;
| |
| --gb-light-fg4: #7c6f64;
| |
|
| |
| /* Neutral accents (same value both modes, per original palette) */
| |
| --gb-neutral-red: #cc241d;
| |
| --gb-neutral-green: #98971a;
| |
| --gb-neutral-yellow: #d79921;
| |
| --gb-neutral-blue: #458588;
| |
| --gb-neutral-purple: #b16286;
| |
| --gb-neutral-aqua: #689d6a;
| |
| --gb-neutral-orange: #d65d0e;
| |
| --gb-neutral-gray: #928374;
| |
|
| |
| /* Bright accents (dark mode) */
| |
| --gb-bright-red: #fb4934;
| |
| --gb-bright-green: #b8bb26;
| |
| --gb-bright-yellow: #fabd2f;
| |
| --gb-bright-blue: #83a598;
| |
| --gb-bright-purple: #d3869b;
| |
| --gb-bright-aqua: #8ec07c;
| |
| --gb-bright-orange: #fe8019;
| |
| --gb-bright-gray: #928374;
| |
|
| |
| /* Faded accents (light mode) */
| |
| --gb-faded-red: #9d0006;
| |
| --gb-faded-green: #79740e;
| |
| --gb-faded-yellow: #b57614;
| |
| --gb-faded-blue: #076678;
| |
| --gb-faded-purple: #8f3f71;
| |
| --gb-faded-aqua: #427b58;
| |
| --gb-faded-orange: #af3a03;
| |
| --gb-faded-gray: #7c6f64;
| |
|
| |
| /* Fonts */
| |
| --gb-font-gothic: 'Sorgath', 'UnifrakturMaguntia', 'Old English Text MT', 'Pfeffer Mediaeval', serif;
| |
| --gb-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 2. CITIZEN SKIN — DARK MODE MAPPING
| |
| ========================================================================== */
| |
|
| |
| html,
| |
| html.skin-theme-clientpref-night,
| |
| html.skin-theme-clientpref-day,
| |
| html.skin-theme-clientpref-os {
| |
| --background-color-base: var(--gb-dark-bg0);
| |
| --background-color-neutral: var(--gb-dark-bg0-soft);
| |
| --background-color-neutral-subtle: var(--gb-dark-bg1);
| |
| --background-color-interactive: var(--gb-dark-bg1);
| |
| --background-color-interactive-subtle: var(--gb-dark-bg0-soft);
| |
|
| |
| --color-base: var(--gb-dark-fg1);
| |
| --color-base--subtle: var(--gb-dark-fg3);
| |
| --color-emphasized: var(--gb-dark-fg0);
| |
| --color-subtle: var(--gb-dark-fg4);
| |
| --color-disabled: var(--gb-dark-bg4);
| |
|
| |
| --color-link: var(--gb-bright-blue);
| |
| --color-link--hover: var(--gb-bright-aqua);
| |
| --color-link--visited: var(--gb-bright-purple);
| |
| --color-link-red: var(--gb-bright-red);
| |
|
| |
| --border-color-base: var(--gb-dark-bg3);
| |
| --border-color-subtle: var(--gb-dark-bg2);
| |
|
| |
| --background-color-progressive: var(--gb-neutral-blue);
| |
| --color-progressive: var(--gb-bright-blue);
| |
| --background-color-destructive: var(--gb-neutral-red);
| |
| --color-destructive: var(--gb-bright-red);
| |
| --background-color-warning: var(--gb-neutral-yellow);
| |
| --background-color-success: var(--gb-neutral-green);
| |
|
| |
| --color-content-added: var(--gb-bright-green);
| |
| --color-content-removed: var(--gb-bright-red);
| |
|
| |
| color-scheme: dark;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 3. LIGHT MODE — DISABLED (dark mode is forced site-wide, see §2)
| |
| The light-mode variable block has been removed on purpose. The theme
| |
| toggle is also hidden below so visitors can't flip back to light.
| |
| ========================================================================== */
| |
|
| |
| .citizen-theme-toggle,
| |
| #citizen-theme-toggle-form,
| |
| [data-mw-loader-name*="theme.toggle"] {
| |
| display: none !important;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 4. BASE APPLICATION
| |
| ========================================================================== */
| |
|
| |
| body,
| |
| .citizen-page,
| |
| #mw-content-text {
| |
| background-color: var(--background-color-base);
| |
| color: var(--color-base);
| |
| }
| |
|
| |
| a {
| |
| color: var(--color-link);
| |
| }
| |
| a:visited {
| |
| color: var(--color-link--visited);
| |
| }
| |
| a:hover {
| |
| color: var(--color-link--hover);
| |
| }
| |
| a.new {
| |
| color: var(--color-link-red);
| |
| }
| |
|
| |
| /* Header / sidebar / footer surfaces */
| |
| .citizen-header,
| |
| .citizen-header-container,
| |
| #mw-panel,
| |
| .citizen-footer,
| |
| .citizen-sidebar {
| |
| background-color: var(--background-color-neutral);
| |
| border-color: color-mix(in srgb, var(--border-color-base) 40%, transparent);
| |
| }
| |
|
| |
| /* Cards, boxes, infoboxes */
| |
| .citizen-card,
| |
| .mw-message-box,
| |
| .infobox,
| |
| table.wikitable {
| |
| background-color: var(--background-color-neutral-subtle);
| |
| border-color: var(--border-color-subtle);
| |
| color: var(--color-base);
| |
| }
| |
|
| |
| table.wikitable > tr > th,
| |
| table.wikitable > * > tr > th {
| |
| background-color: var(--background-color-interactive);
| |
| color: var(--color-emphasized);
| |
| }
| |
|
| |
| /* Buttons */
| |
| .cdx-button,
| |
| .citizen-button {
| |
| background-color: var(--background-color-interactive);
| |
| border-color: var(--border-color-base);
| |
| color: var(--color-base);
| |
| }
| |
| .cdx-button--action-progressive,
| |
| .citizen-button--primary {
| |
| background-color: var(--background-color-progressive);
| |
| color: var(--gb-dark-fg0);
| |
| }
| |
| .cdx-button--action-destructive {
| |
| background-color: var(--background-color-destructive);
| |
| color: var(--gb-dark-fg0);
| |
| }
| |
|
| |
| /* diff colors */
| |
| .diff-addedline {
| |
| background-color: color-mix(in srgb, var(--color-content-added) 20%, transparent);
| |
| }
| |
| .diff-deletedline {
| |
| background-color: color-mix(in srgb, var(--color-content-removed) 20%, transparent);
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 5. TYPOGRAPHY — GOTHIC HEADINGS
| |
| ========================================================================== */
| |
|
| |
| .mw-body h1,
| |
| .mw-body h2,
| |
| .mw-body h3,
| |
| .mw-body h4,
| |
| .mw-body h5,
| |
| .mw-body h6,
| |
| .citizen-page-header .mw-page-title,
| |
| .citizen-sitename {
| |
| font-family: var(--gb-font-gothic);
| |
| font-weight: 400;
| |
| letter-spacing: 0.02em;
| |
| color: var(--color-emphasized);
| |
| }
| |
|
| |
| .mw-body h1,
| |
| .citizen-page-header .mw-page-title {
| |
| font-size: 2.4em;
| |
| border-bottom: 2px solid var(--gb-bright-yellow);
| |
| padding-bottom: 0.2em;
| |
| }
| |
|
| |
| .mw-body h2 {
| |
| font-size: 1.8em;
| |
| border-bottom: 1px solid var(--gb-neutral-yellow);
| |
| }
| |
|
| |
| /* Text selection - a Gruvbox signature */
| |
| ::selection {
| |
| background-color: var(--gb-bright-yellow);
| |
| color: var(--gb-dark-bg0-hard);
| |
| }
| |
|
| |
| /* Blockquotes get a yellow rail */
| |
| .mw-body blockquote {
| |
| border-left: 3px solid var(--gb-bright-yellow);
| |
| padding-left: 1em;
| |
| color: var(--color-base--subtle);
| |
| }
| |
|
| |
| /* Active nav / tab state picks up yellow instead of the default blue */
| |
| .citizen-menu__item--active > a,
| |
| .vector-tab-noicon.selected a,
| |
| li.selected a {
| |
| color: var(--gb-bright-yellow);
| |
| font-weight: 700;
| |
| }
| |
|
| |
| .mw-body h3 { font-size: 1.4em; }
| |
| .mw-body h4 { font-size: 1.15em; }
| |
|
| |
| /* ==========================================================================
| |
| 6. TYPOGRAPHY — SPACE MONO FOR CODE
| |
| ========================================================================== */
| |
|
| |
| code,
| |
| pre,
| |
| kbd,
| |
| samp,
| |
| tt,
| |
| .mw-code,
| |
| .cdx-text-input__input.cdx-mono,
| |
| textarea#wpTextbox1 {
| |
| font-family: var(--gb-font-mono);
| |
| }
| |
|
| |
| pre,
| |
| .mw-highlight {
| |
| background-color: var(--gb-dark-bg0-hard);
| |
| color: var(--gb-dark-fg1);
| |
| border: 1px solid var(--border-color-base);
| |
| border-radius: 4px;
| |
| padding: 0.75em 1em;
| |
| overflow-x: auto;
| |
| }
| |
|
| |
| code {
| |
| background-color: var(--background-color-interactive-subtle);
| |
| color: var(--gb-bright-orange);
| |
| padding: 0.1em 0.35em;
| |
| border-radius: 3px;
| |
| font-size: 0.9em;
| |
| }
| |
|
| |
| /* Syntax highlighting accents (if SyntaxHighlight/Pygments classes are present) */
| |
| .mw-highlight .k { color: var(--gb-bright-red); } /* keyword */
| |
| .mw-highlight .s,
| |
| .mw-highlight .s2 { color: var(--gb-bright-green); } /* string */
| |
| .mw-highlight .c,
| |
| .mw-highlight .c1 { color: var(--gb-dark-fg4); font-style: italic; } /* comment */
| |
| .mw-highlight .nf { color: var(--gb-bright-blue); } /* function name */
| |
| .mw-highlight .mi,
| |
| .mw-highlight .mf { color: var(--gb-bright-purple); } /* numbers */
| |
| .mw-highlight .o { color: var(--gb-bright-orange); } /* operator */
| |
|
| |
| /* ==========================================================================
| |
| 7. SCROLLBAR (dark mode nicety)
| |
| ========================================================================== */
| |
|
| |
| ::-webkit-scrollbar {
| |
| width: 12px;
| |
| }
| |
| ::-webkit-scrollbar-track {
| |
| background: var(--gb-dark-bg0);
| |
| }
| |
| ::-webkit-scrollbar-thumb {
| |
| background: var(--gb-dark-bg3);
| |
| border-radius: 6px;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 8. BLUR & TRANSPARENCY (glassmorphism)
| |
| ========================================================================== */
| |
|
| |
| body {
| |
| /* subtle depth behind the glass panels — this gradient is deliberately
| |
| large and soft so it reads as one continuous surface rather than a
| |
| flat backdrop behind separate boxes */
| |
| background-color: var(--gb-dark-bg0-hard);
| |
| background-image:
| |
| radial-gradient(ellipse 80% 60% at 15% 0%, color-mix(in srgb, var(--gb-neutral-blue) 14%, transparent) 0%, transparent 55%),
| |
| radial-gradient(ellipse 70% 60% at 100% 100%, color-mix(in srgb, var(--gb-bright-yellow) 10%, transparent) 0%, transparent 55%),
| |
| radial-gradient(ellipse 60% 50% at 50% 50%, color-mix(in srgb, var(--gb-bright-orange) 5%, transparent) 0%, transparent 60%);
| |
| background-attachment: fixed;
| |
| }
| |
|
| |
| /* Header, sidebar, footer, and cards all pull from the SAME gradient ramp
| |
| (bg0-hard -> bg0-soft -> bg1) at low opacity, so adjoining panels share
| |
| tone instead of butting up against each other as separate flat blocks.
| |
| Borders are faded to near-invisible so the blur/gradient does the work
| |
| of separating regions instead of a hard line. */
| |
| .citizen-header,
| |
| .citizen-header-container,
| |
| #mw-panel,
| |
| .citizen-sidebar,
| |
| .citizen-footer,
| |
| .citizen-page-header {
| |
| background-image: linear-gradient(
| |
| 180deg,
| |
| color-mix(in srgb, var(--gb-dark-bg0-hard) 55%, transparent) 0%,
| |
| color-mix(in srgb, var(--gb-dark-bg0-soft) 60%, transparent) 50%,
| |
| color-mix(in srgb, var(--gb-dark-bg1) 55%, transparent) 100%
| |
| );
| |
| backdrop-filter: blur(14px) saturate(140%);
| |
| -webkit-backdrop-filter: blur(14px) saturate(140%);
| |
| border-color: color-mix(in srgb, var(--gb-dark-bg3) 25%, transparent);
| |
| }
| |
|
| |
| .citizen-card,
| |
| .mw-message-box,
| |
| .infobox,
| |
| table.wikitable,
| |
| .cdx-card,
| |
| .citizen-page-toc,
| |
| #toc,
| |
| .toc {
| |
| background-image: linear-gradient(
| |
| 145deg,
| |
| color-mix(in srgb, var(--gb-dark-bg1) 45%, transparent) 0%,
| |
| color-mix(in srgb, var(--gb-dark-bg0-soft) 50%, transparent) 100%
| |
| );
| |
| backdrop-filter: blur(10px) saturate(130%);
| |
| -webkit-backdrop-filter: blur(10px) saturate(130%);
| |
| border: 1px solid color-mix(in srgb, var(--gb-dark-bg3) 25%, transparent);
| |
| }
| |
|
| |
| .cdx-button,
| |
| .citizen-button,
| |
| .cdx-text-input__input,
| |
| .cdx-search-input__input {
| |
| background-color: color-mix(in srgb, var(--gb-dark-bg1) 85%, transparent);
| |
| border-color: color-mix(in srgb, var(--gb-dark-bg3) 70%, transparent);
| |
| }
| |
|
| |
| /* Mobile bottom toolbar (settings + personal menu icons) must NOT use
| |
| backdrop-filter — on Android Chrome, blurred fixed elements repaint per
| |
| scroll frame and leave a ghosted duplicate behind. Solid-ish background
| |
| instead. (No transform/translateZ here — that breaks position:sticky on
| |
| the sidebar, which is why the sidebar broke last time.) */
| |
| .citizen-personal-menu,
| |
| .citizen-page-tools,
| |
| #p-personal {
| |
| backdrop-filter: none !important;
| |
| -webkit-backdrop-filter: none !important;
| |
| background-color: color-mix(in srgb, var(--gb-dark-bg0-soft) 92%, transparent);
| |
| }
| |
|
| |
| @media (pointer: coarse) {
| |
| /* Touch devices: blur-on-scroll ghosting is a widespread mobile Chrome/
| |
| WebView bug, not just this skin. Kill backdrop-filter everywhere on
| |
| touch and fall back to a mostly-opaque background so the frosted look
| |
| degrades gracefully instead of smearing. */
| |
| .citizen-header,
| |
| .citizen-header-container,
| |
| #mw-panel,
| |
| .citizen-sidebar,
| |
| .citizen-footer,
| |
| .citizen-page-header,
| |
| .citizen-card,
| |
| .mw-message-box,
| |
| .infobox,
| |
| table.wikitable,
| |
| .cdx-card,
| |
| .citizen-page-toc,
| |
| #toc,
| |
| .toc,
| |
| .citizen-dropdown-content,
| |
| .cdx-menu,
| |
| .citizen-typeahead-search__content,
| |
| pre,
| |
| .mw-highlight {
| |
| backdrop-filter: none !important;
| |
| -webkit-backdrop-filter: none !important;
| |
| background-color: color-mix(in srgb, var(--gb-dark-bg0-soft) 95%, transparent);
| |
| }
| |
| }
| |
|
| |
| /* Code blocks stay solid (no blur) on purpose — a blurred element with its
| |
| own internal horizontal scroll (overflow-x: auto) is the same class of
| |
| mobile-compositor bug that caused ghosting earlier, but manifests as
| |
| broken/unresponsive horizontal scrolling instead. A solid terminal-like
| |
| background also just reads better for code anyway. *//* Dropdowns / popovers benefit most from a strong blur since they float over content */
| |
| .citizen-dropdown-content,
| |
| .cdx-menu,
| |
| .citizen-typeahead-search__content {
| |
| background-color: color-mix(in srgb, var(--gb-dark-bg0-soft) 75%, transparent);
| |
| backdrop-filter: blur(18px) saturate(150%);
| |
| -webkit-backdrop-filter: blur(18px) saturate(150%);
| |
| border: 1px solid color-mix(in srgb, var(--gb-dark-bg3) 60%, transparent);
| |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
| |
| }
| |
