|
|
| (6 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* 1. Import Decorative and Monospace Fonts from Google Fonts */
| |
| @import url('https://googleapis.com');
| |
|
| |
|
| :root,
| |
| .skin-theme-clientpref-night,
| |
| html.skin-citizen-dark {
| |
| /* Background & Container Tones */
| |
| background: linear-gradient(145deg, #1f2e22 0%, #2a3d2e 60%, #364f3b 100%) !important;
| |
| background-attachment: fixed !important;
| |
| --color-surface-0: transparent !important;
| |
| --color-surface-1: #231c18 !important;
| |
| --color-surface-2: #2d241f !important;
| |
| --color-surface-3: #382d27 !important;
| |
|
| |
| /* Accents & Typography */
| |
| --color-primary: #76a035 !important;
| |
| --color-primary-variant: #8cb943 !important;
| |
| --color-base: #f4f0e6 !important;
| |
| --color-base-variant: #c2bbae !important;
| |
| --border-radius-base: 12px !important;
| |
|
| |
| /* 2. Map Fonts into Citizen's Native Font Variables */
| |
| --font-family-serif: 'Grenze Gotisch', serif !important;
| |
| --font-family-sans-serif: 'Grenze Gotisch', serif !important;
| |
| --font-family-monospace: 'Space Mono', monospace !important;
| |
| }
| |
|
| |
| /* Apply the decorative font to all UI layout elements, buttons, and headings */
| |
| body,
| |
| .mw-body,
| |
| #mw-header,
| |
| .skin-citizen-sidebar,
| |
| .mw-portlet,
| |
| .oo-ui-widget {
| |
| font-family: var(--font-family-serif) !important;
| |
| letter-spacing: 0.03em; /* Slightly increases readability for decorative text */
| |
| }
| |
|
| |
| /* Apply Space Mono explicitly to all technical code blocks and preformatted tags */
| |
| code,
| |
| pre,
| |
| .mw-code,
| |
| kbd,
| |
| samp,
| |
| .syntaxhighlight {
| |
| font-family: var(--font-family-monospace) !important;
| |
| font-size: 0.9em !important; /* Balances Space Mono's natural height */
| |
| background-color: var(--color-surface-2) !important;
| |
| padding: 0.2em 0.4em !important;
| |
| border-radius: 6px !important;
| |
| }
| |
|
| |
| /* Container Polish */
| |
| .mw-body,
| |
| .mw-page-container,
| |
| .skin-citizen-sidebar,
| |
| .mw-portlet {
| |
| background-color: var(--color-surface-1) !important;
| |
| border-radius: var(--border-radius-base) !important;
| |
| border: 1px solid #332923 !important;
| |
| box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
| |
| }
| |
|
| |
| .mw-body { padding: 2em !important; }
| |
| #mw-header { background-color: #1a1512 !important; border-bottom: 1px solid #231c18 !important; }
| |
