|
|
| Line 1: |
Line 1: |
| /**
| |
| * MediaWiki:Citizen.css
| |
| * Gruvbox dark palette applied directly to the Citizen skin.
| |
| * - Headings: gothic font (Sorgath, self-hosted — see @font-face below)
| |
| * - Code: Space Mono
| |
| * No blur, no transparency, no transform tricks — solid colors only,
| |
| * for reliable cross-browser behavior.
| |
| */
| |
|
| |
|
| @import url('https://fonts.googleapis.com/css2?family=UnifrakturMaguntia&family=Space+Mono:wght@400;700&display=swap');
| |
|
| |
| /* Sorgath must be self-hosted (not on Google Fonts). Fill in your uploaded
| |
| URL below; until then this silently falls back to UnifrakturMaguntia. */
| |
| @font-face {
| |
| font-family: 'Sorgath';
| |
| src: url('https://your-font-host.example/Sorgath.woff2') format('woff2');
| |
| font-weight: 400;
| |
| font-style: normal;
| |
| font-display: swap;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 1. GRUVBOX PALETTE (original, unmodified hex values)
| |
| ========================================================================== */
| |
|
| |
| :root {
| |
| --gb-bg0-hard: #1d2021;
| |
| --gb-bg0: #282828;
| |
| --gb-bg0-soft: #32302f;
| |
| --gb-bg1: #3c3836;
| |
| --gb-bg2: #504945;
| |
| --gb-bg3: #665c54;
| |
| --gb-bg4: #7c6f64;
| |
|
| |
| --gb-fg0: #fbf1c7;
| |
| --gb-fg1: #ebdbb2;
| |
| --gb-fg2: #d5c4a1;
| |
| --gb-fg3: #bdae93;
| |
| --gb-fg4: #a89984;
| |
|
| |
| --gb-red: #fb4934;
| |
| --gb-green: #b8bb26;
| |
| --gb-yellow: #fabd2f;
| |
| --gb-blue: #83a598;
| |
| --gb-purple: #d3869b;
| |
| --gb-aqua: #8ec07c;
| |
| --gb-orange: #fe8019;
| |
| --gb-gray: #928374;
| |
|
| |
| --gb-font-gothic: 'Sorgath', 'UnifrakturMaguntia', 'Old English Text MT', serif;
| |
| --gb-font-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 2. CITIZEN SKIN VARIABLES — mapped directly to Gruvbox, always dark
| |
| ========================================================================== */
| |
|
| |
| html {
| |
| --background-color-base: var(--gb-bg0);
| |
| --background-color-neutral: var(--gb-bg0-soft);
| |
| --background-color-neutral-subtle: var(--gb-bg1);
| |
| --background-color-interactive: var(--gb-bg1);
| |
| --background-color-interactive-subtle: var(--gb-bg0-soft);
| |
|
| |
| --color-base: var(--gb-fg1);
| |
| --color-base--subtle: var(--gb-fg3);
| |
| --color-emphasized: var(--gb-fg0);
| |
| --color-subtle: var(--gb-fg4);
| |
| --color-disabled: var(--gb-bg4);
| |
|
| |
| --color-link: var(--gb-blue);
| |
| --color-link--hover: var(--gb-aqua);
| |
| --color-link--visited: var(--gb-purple);
| |
| --color-link-red: var(--gb-red);
| |
|
| |
| --border-color-base: var(--gb-bg3);
| |
| --border-color-subtle: var(--gb-bg2);
| |
|
| |
| --background-color-progressive: var(--gb-blue);
| |
| --color-progressive: var(--gb-blue);
| |
| --background-color-destructive: var(--gb-red);
| |
| --color-destructive: var(--gb-red);
| |
| --background-color-warning: var(--gb-yellow);
| |
| --background-color-success: var(--gb-green);
| |
|
| |
| --color-content-added: var(--gb-green);
| |
| --color-content-removed: var(--gb-red);
| |
|
| |
| color-scheme: dark;
| |
| }
| |
|
| |
| /* Hide the light/dark toggle since this theme is dark-only */
| |
| .citizen-theme-toggle,
| |
| #citizen-theme-toggle-form {
| |
| display: none !important;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 3. 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); }
| |
|
| |
| .citizen-header,
| |
| .citizen-header-container,
| |
| #mw-panel,
| |
| .citizen-footer,
| |
| .citizen-sidebar {
| |
| background-color: var(--background-color-neutral);
| |
| border-color: var(--border-color-base);
| |
| }
| |
|
| |
| .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);
| |
| }
| |
|
| |
| .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-fg0);
| |
| }
| |
| .cdx-button--action-destructive {
| |
| background-color: var(--background-color-destructive);
| |
| color: var(--gb-fg0);
| |
| }
| |
|
| |
| .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); }
| |
|
| |
| /* ==========================================================================
| |
| 4. TYPOGRAPHY — GOTHIC HEADINGS + YELLOW ACCENTS
| |
| ========================================================================== */
| |
|
| |
| .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-yellow);
| |
| padding-bottom: 0.2em;
| |
| }
| |
|
| |
| .mw-body h2 {
| |
| font-size: 1.8em;
| |
| border-bottom: 1px solid var(--gb-yellow);
| |
| }
| |
|
| |
| .mw-body h3 { font-size: 1.4em; }
| |
| .mw-body h4 { font-size: 1.15em; }
| |
|
| |
| ::selection {
| |
| background-color: var(--gb-yellow);
| |
| color: var(--gb-bg0-hard);
| |
| }
| |
|
| |
| .mw-body blockquote {
| |
| border-left: 3px solid var(--gb-yellow);
| |
| padding-left: 1em;
| |
| color: var(--color-base--subtle);
| |
| }
| |
|
| |
| .citizen-menu__item--active > a,
| |
| li.selected a {
| |
| color: var(--gb-yellow);
| |
| font-weight: 700;
| |
| }
| |
|
| |
| /* ==========================================================================
| |
| 5. TYPOGRAPHY — SPACE MONO FOR CODE
| |
| ========================================================================== */
| |
|
| |
| code,
| |
| pre,
| |
| kbd,
| |
| samp,
| |
| tt,
| |
| .mw-code,
| |
| textarea#wpTextbox1 {
| |
| font-family: var(--gb-font-mono);
| |
| }
| |
|
| |
| pre,
| |
| .mw-highlight {
| |
| background-color: var(--gb-bg0-hard);
| |
| color: var(--gb-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-orange);
| |
| padding: 0.1em 0.35em;
| |
| border-radius: 3px;
| |
| font-size: 0.9em;
| |
| }
| |
|
| |
| .mw-highlight .k { color: var(--gb-red); }
| |
| .mw-highlight .s,
| |
| .mw-highlight .s2 { color: var(--gb-green); }
| |
| .mw-highlight .c,
| |
| .mw-highlight .c1 { color: var(--gb-fg4); font-style: italic; }
| |
| .mw-highlight .nf { color: var(--gb-blue); }
| |
| .mw-highlight .mi,
| |
| .mw-highlight .mf { color: var(--gb-purple); }
| |
| .mw-highlight .o { color: var(--gb-orange); }
| |
|
| |
| /* ==========================================================================
| |
| 6. SCROLLBAR
| |
| ========================================================================== */
| |
|
| |
| ::-webkit-scrollbar {
| |
| width: 12px;
| |
| height: 12px;
| |
| }
| |
| ::-webkit-scrollbar-track {
| |
| background: var(--gb-bg0);
| |
| }
| |
| ::-webkit-scrollbar-thumb {
| |
| background: var(--gb-bg3);
| |
| border-radius: 6px;
| |
| }
| |
