|
|
| Line 1: |
Line 1: |
| /* All CSS here will be loaded for users of the Citizen skin */
| |
| /***** Faeloria — Citizen Skin “Fantasy” Theme *****
| |
| Drop this into MediaWiki:Citizen.css
| |
| Replace TEXTURE URLs below with your assets.
| |
| ********************************************************/
| |
|
| |
| /* ========== Font imports (if CSP allows) ========== */
| |
| /* If your wiki CSP blocks @import, install these fonts locally or skip this block. */
| |
| @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap');
| |
|
| |
| /* ========== Theme variables ========== */
| |
| :root {
| |
| --fae-bg-page: #f7f2e7; /* parchment */
| |
| --fae-bg-ink: #2b2118; /* deep brown/ink */
| |
| --fae-accent: #c6a664; /* antique gold */
| |
| --fae-accent-2: #2f6a4f; /* emerald */
| |
| --fae-link: #2c6c6c; /* teal-ink */
| |
| --fae-link-hover: #0f7777;
| |
| --fae-muted: #7a6b5b;
| |
| --fae-line: rgba(43,33,24,0.18);
| |
| --fae-card: #fbf8f1;
| |
| --fae-card-edge: rgba(43,33,24,0.25);
| |
| --fae-shadow: 0 6px 20px rgba(43,33,24,0.18);
| |
| --fae-ring: 0 0 0 2px rgba(198,166,100,0.35);
| |
|
| |
| /* Dark mode counterparts */
| |
| --fae-bg-page-dark: #0f1213; /* night slate */
| |
| --fae-bg-ink-dark: #e9e3d6;
| |
| --fae-card-dark: #161a1c;
| |
| --fae-card-edge-dark: rgba(233,227,214,0.15);
| |
| --fae-line-dark: rgba(233,227,214,0.12);
| |
| --fae-link-dark: #7fd3c8;
| |
| --fae-link-hover-dark: #a6e4da;
| |
| --fae-accent-dark: #e2c78a;
| |
| --fae-accent-2-dark: #8cd9b9;
| |
| }
| |
|
| |
| /* ========== Base page background & typography ========== */
| |
| html.skin-citizen body {
| |
| /* Subtle parchment texture + radial light vignette */
| |
| background:
| |
| radial-gradient(1000px 600px at 50% -10%, rgba(198,166,100,0.12), transparent 70%),
| |
| url('https://upload.wikimedia.org/wikipedia/commons/4/4a/Old_paper_texture_background.jpg') center/cover fixed, /* placeholder */
| |
| var(--fae-bg-page);
| |
| color: var(--fae-bg-ink);
| |
| font-family: "Crimson Text", Georgia, "Times New Roman", Times, serif;
| |
| line-height: 1.65;
| |
| font-size: 17px;
| |
| }
| |
|
| |
| /* Dark theme toggle (Citizen generally sets a class or respects prefers-color-scheme) */
| |
| html.skin-citizen.theme-dark body,
| |
| @media (prefers-color-scheme: dark) {
| |
| html.skin-citizen body {
| |
| background:
| |
| radial-gradient(1000px 600px at 50% -10%, rgba(226,199,138,0.07), transparent 70%),
| |
| url('https://upload.wikimedia.org/wikipedia/commons/2/2c/Black_paper_texture.jpg') center/cover fixed, /* placeholder */
| |
| var(--fae-bg-page-dark);
| |
| color: var(--fae-bg-ink-dark);
| |
| }
| |
| }
| |
|
| |
| /* ========== Headings (engraved fantasy look) ========== */
| |
| .mw-parser-output h1,
| |
| .mw-parser-output h2,
| |
| .mw-parser-output h3,
| |
| .mw-parser-output h4 {
| |
| font-family: "Cinzel", "Crimson Text", serif;
| |
| letter-spacing: 0.02em;
| |
| text-rendering: optimizeLegibility;
| |
| color: var(--fae-bg-ink);
| |
| position: relative;
| |
| }
| |
|
| |
| .mw-parser-output h1 {
| |
| font-weight: 700;
| |
| font-size: 2.25rem;
| |
| margin: 1.2em 0 0.4em;
| |
| text-shadow: 0 1px 0 #fff, 0 0 8px rgba(198,166,100,0.25);
| |
| border-bottom: 2px solid var(--fae-line);
| |
| padding-bottom: 0.3em;
| |
| }
| |
|
| |
| .mw-parser-output h2 {
| |
| font-weight: 600;
| |
| font-size: 1.75rem;
| |
| margin: 1.1em 0 0.35em;
| |
| border-bottom: 1px dashed var(--fae-line);
| |
| padding-bottom: 0.25em;
| |
| }
| |
|
| |
| .mw-parser-output h3 {
| |
| font-weight: 600;
| |
| font-size: 1.35rem;
| |
| margin: 1em 0 0.25em;
| |
| }
| |
|
| |
| /* Dark */
| |
| html.skin-citizen.theme-dark .mw-parser-output h1,
| |
| html.skin-citizen.theme-dark .mw-parser-output h2,
| |
| html.skin-citizen.theme-dark .mw-parser-output h3 {
| |
| color: var(--fae-bg-ink-dark);
| |
| text-shadow: 0 0 8px rgba(226,199,138,0.18);
| |
| border-color: var(--fae-line-dark);
| |
| }
| |
|
| |
| /* Elegant section separators */
| |
| .mw-parser-output hr {
| |
| border: none;
| |
| height: 16px;
| |
| margin: 2.2rem 0;
| |
| background:
| |
| linear-gradient(to right, transparent, var(--fae-accent), transparent) center/60% 1px no-repeat,
| |
| url('https://upload.wikimedia.org/wikipedia/commons/3/38/Ornament_divider.png') center/auto 16px no-repeat; /* placeholder ornament */
| |
| opacity: 0.6;
| |
| }
| |
|
| |
| /* ========== Links ========== */
| |
| .mw-parser-output a,
| |
| a {
| |
| color: var(--fae-link);
| |
| text-decoration-color: rgba(47,106,79,0.35);
| |
| text-underline-offset: 3px;
| |
| transition: color .15s ease, text-decoration-color .15s ease, text-shadow .15s ease;
| |
| }
| |
| .mw-parser-output a:hover,
| |
| a:hover {
| |
| color: var(--fae-link-hover);
| |
| text-decoration-color: var(--fae-accent);
| |
| text-shadow: 0 0 6px rgba(47,106,79,0.25);
| |
| }
| |
|
| |
| /* Dark */
| |
| html.skin-citizen.theme-dark a { color: var(--fae-link-dark); }
| |
| html.skin-citizen.theme-dark a:hover {
| |
| color: var(--fae-link-hover-dark);
| |
| text-decoration-color: var(--fae-accent-dark);
| |
| }
| |
|
| |
| /* ========== Header / top bar ========== */
| |
| .citizen-header {
| |
| backdrop-filter: blur(4px);
| |
| background:
| |
| linear-gradient(to bottom, rgba(247,242,231,0.8), rgba(247,242,231,0.6));
| |
| border-bottom: 1px solid var(--fae-line);
| |
| }
| |
| html.skin-citizen.theme-dark .citizen-header {
| |
| background:
| |
| linear-gradient(to bottom, rgba(15,18,19,0.65), rgba(15,18,19,0.45));
| |
| border-bottom-color: var(--fae-line-dark);
| |
| }
| |
|
| |
| /* Site title flair */
| |
| .citizen-header__title a {
| |
| font-family: "Cinzel", serif !important;
| |
| font-weight: 700;
| |
| letter-spacing: 0.04em;
| |
| color: var(--fae-bg-ink);
| |
| text-shadow: 0 1px 0 #fff, 0 0 8px rgba(198,166,100,0.25);
| |
| }
| |
| html.skin-citizen.theme-dark .citizen-header__title a {
| |
| color: var(--fae-bg-ink-dark);
| |
| text-shadow: 0 0 10px rgba(226,199,138,0.25);
| |
| }
| |
|
| |
| /* ========== Sidebar / navigation ========== */
| |
| .citizen-drawer,
| |
| .citizen-sidebar {
| |
| background:
| |
| linear-gradient(to bottom, rgba(198,166,100,0.08), transparent),
| |
| url('https://upload.wikimedia.org/wikipedia/commons/8/8e/Paper_texture_04.jpg') center/cover; /* placeholder */
| |
| border-right: 1px solid var(--fae-line);
| |
| }
| |
| html.skin-citizen.theme-dark .citizen-drawer,
| |
| html.skin-citizen.theme-dark .citizen-sidebar {
| |
| background:
| |
| linear-gradient(to bottom, rgba(226,199,138,0.05), transparent),
| |
| url('https://upload.wikimedia.org/wikipedia/commons/2/2c/Black_paper_texture.jpg') center/cover;
| |
| border-right-color: var(--fae-line-dark);
| |
| }
| |
|
| |
| .citizen-drawer a,
| |
| .citizen-sidebar a {
| |
| font-family: "Crimson Text", serif;
| |
| }
| |
|
| |
| /* ========== Content “cards” ========== */
| |
| .mw-body,
| |
| .citizen-body,
| |
| .mw-parser-output .infobox,
| |
| .mw-message-box,
| |
| .portal,
| |
| .navbox,
| |
| .thumb,
| |
| .wikitable,
| |
| .toc {
| |
| background: var(--fae-card);
| |
| border: 1px solid var(--fae-card-edge);
| |
| box-shadow: var(--fae-shadow);
| |
| border-radius: 10px;
| |
| }
| |
|
| |
| html.skin-citizen.theme-dark .mw-body,
| |
| html.skin-citizen.theme-dark .citizen-body,
| |
| html.skin-citizen.theme-dark .mw-parser-output .infobox,
| |
| html.skin-citizen.theme-dark .mw-message-box,
| |
| html.skin-citizen.theme-dark .portal,
| |
| html.skin-citizen.theme-dark .navbox,
| |
| html.skin-citizen.theme-dark .thumb,
| |
| html.skin-citizen.theme-dark .wikitable,
| |
| html.skin-citizen.theme-dark .toc {
| |
| background: var(--fae-card-dark);
| |
| border-color: var(--fae-card-edge-dark);
| |
| }
| |
|
| |
| /* Give inner content some breathing room (Citizen already does, we add a touch) */
| |
| .mw-body .mw-parser-output {
| |
| padding: 0.5rem 0.25rem;
| |
| }
| |
|
| |
| /* ========== Table of Contents (grimoire) ========== */
| |
| .toc {
| |
| font-family: "Crimson Text", serif;
| |
| border-left: 4px solid var(--fae-accent);
| |
| position: relative;
| |
| }
| |
| .toc .toctitle {
| |
| font-family: "Cinzel", serif;
| |
| font-weight: 700;
| |
| letter-spacing: .03em;
| |
| }
| |
| .toc a { text-decoration: none; }
| |
| .toc a:hover { text-decoration: underline; }
| |
|
| |
| /* ========== Infobox ========== */
| |
| .infobox {
| |
| float: right;
| |
| margin: 0 0 1rem 1.25rem;
| |
| min-width: 260px;
| |
| border-image: repeating-linear-gradient(0deg, var(--fae-accent), var(--fae-accent) 3px, transparent 3px, transparent 8px) 1;
| |
| }
| |
| .infobox caption,
| |
| .infobox .infobox-title,
| |
| .infobox .infobox-header {
| |
| font-family: "Cinzel", serif;
| |
| font-variant: small-caps;
| |
| background: linear-gradient(to right, rgba(198,166,100,0.25), transparent);
| |
| color: var(--fae-bg-ink);
| |
| padding: 0.5rem 0.75rem;
| |
| border-bottom: 1px solid var(--fae-line);
| |
| }
| |
| html.skin-citizen.theme-dark .infobox caption,
| |
| html.skin-citizen.theme-dark .infobox .infobox-title,
| |
| html.skin-citizen.theme-dark .infobox .infobox-header {
| |
| color: var(--fae-bg-ink-dark);
| |
| border-bottom-color: var(--fae-line-dark);
| |
| background: linear-gradient(to right, rgba(226,199,138,0.18), transparent);
| |
| }
| |
|
| |
| /* ========== Tables & navboxes ========== */
| |
| .wikitable > tr > th,
| |
| .wikitable > * > tr > th {
| |
| background: rgba(198,166,100,0.14);
| |
| color: inherit;
| |
| }
| |
| .navbox {
| |
| border-left: 4px solid var(--fae-accent-2);
| |
| }
| |
|
| |
| /* ========== Buttons & forms ========== */
| |
| .mw-ui-button,
| |
| button,
| |
| input[type="submit"],
| |
| input[type="button"] {
| |
| font-family: "Cinzel", serif;
| |
| border-radius: 999px;
| |
| border: 1px solid var(--fae-accent);
| |
| background: linear-gradient(to bottom, rgba(198,166,100,0.18), rgba(198,166,100,0.10));
| |
| color: var(--fae-bg-ink);
| |
| box-shadow: 0 2px 6px rgba(43,33,24,0.15);
| |
| transition: transform .06s ease, box-shadow .15s ease;
| |
| }
| |
| .mw-ui-button:hover,
| |
| button:hover,
| |
| input[type="submit"]:hover,
| |
| input[type="button"]:hover {
| |
| box-shadow: 0 0 0 2px rgba(198,166,100,0.25), 0 6px 18px rgba(43,33,24,0.18);
| |
| transform: translateY(-1px);
| |
| }
| |
| .mw-ui-button:focus,
| |
| button:focus,
| |
| input[type="submit"]:focus,
| |
| input[type="button"]:focus {
| |
| outline: none;
| |
| box-shadow: var(--fae-ring);
| |
| }
| |
|
| |
| /* ========== Search field ========== */
| |
| .citizen-search__input,
| |
| input[type="search"] {
| |
| border-radius: 999px;
| |
| border: 1px solid var(--fae-card-edge);
| |
| background: rgba(255,255,255,0.7);
| |
| transition: box-shadow .15s ease;
| |
| }
| |
| html.skin-citizen.theme-dark .citizen-search__input,
| |
| html.skin-citizen.theme-dark input[type="search"] {
| |
| background: rgba(22,26,28,0.9);
| |
| }
| |
| .citizen-search__input:focus,
| |
| input[type="search"]:focus {
| |
| box-shadow: var(--fae-ring);
| |
| }
| |
|
| |
| /* ========== Category chips ========== */
| |
| #catlinks,
| |
| .mw-normal-catlinks {
| |
| background: var(--fae-card);
| |
| border: 1px dashed var(--fae-line);
| |
| padding: 0.4rem 0.6rem;
| |
| border-radius: 8px;
| |
| }
| |
| .mw-normal-catlinks a {
| |
| display: inline-block;
| |
| margin: 0.15rem 0.25rem;
| |
| padding: 0.15rem 0.5rem;
| |
| border-radius: 999px;
| |
| background: rgba(47,106,79,0.10);
| |
| border: 1px solid rgba(47,106,79,0.25);
| |
| }
| |
|
| |
| /* ========== Breadcrumbs / page indicators ========== */
| |
| .mw-indicators,
| |
| .mw-breadcrumbs {
| |
| font-family: "Crimson Text", serif;
| |
| color: var(--fae-muted);
| |
| }
| |
|
| |
| /* ========== Thumbnails ========== */
| |
| .thumb .thumbinner {
| |
| border-radius: 10px;
| |
| overflow: hidden;
| |
| border: 1px solid var(--fae-card-edge);
| |
| background:
| |
| linear-gradient(to bottom, rgba(198,166,100,0.10), rgba(198,166,100,0.03));
| |
| }
| |
|
| |
| /* ========== Notices (success/warn/error) ========== */
| |
| .mw-message-box {
| |
| border-left-width: 5px;
| |
| }
| |
| .mw-message-box-success { border-left-color: var(--fae-accent-2); }
| |
| .mw-message-box-warning { border-left-color: var(--fae-accent); }
| |
| .mw-message-box-error { border-left-color: #a33; }
| |
|
| |
| /* ========== Footer ========== */
| |
| .citizen-footer {
| |
| background:
| |
| linear-gradient(to top, rgba(198,166,100,0.10), transparent),
| |
| url('https://upload.wikimedia.org/wikipedia/commons/8/8e/Paper_texture_04.jpg') center/cover;
| |
| border-top: 1px solid var(--fae-line);
| |
| color: var(--fae-muted);
| |
| }
| |
| html.skin-citizen.theme-dark .citizen-footer {
| |
| background:
| |
| linear-gradient(to top, rgba(226,199,138,0.08), transparent),
| |
| url('https://upload.wikimedia.org/wikipedia/commons/2/2c/Black_paper_texture.jpg') center/cover;
| |
| border-top-color: var(--fae-line-dark);
| |
| color: #b9b2a2;
| |
| }
| |
|
| |
| /* ========== Small embellishments ========== */
| |
| /* Drop caps for the first paragraph on article pages (optional, tweak as you like) */
| |
| .mw-parser-output > p:first-of-type::first-letter {
| |
| font-family: "Cinzel", serif;
| |
| float: left;
| |
| font-size: 3.1rem;
| |
| line-height: 0.9;
| |
| padding-right: 8px;
| |
| padding-top: 4px;
| |
| color: var(--fae-accent-2);
| |
| text-shadow: 0 0 10px rgba(47,106,79,0.15);
| |
| }
| |
|
| |
| /* Slight glow on active tabs/selected elements */
| |
| .citizen-tabs .selected a,
| |
| .citizen-tabs .selected a:visited {
| |
| box-shadow: inset 0 -2px 0 var(--fae-accent);
| |
| }
| |
|
| |
| /* ========== Mobile tweaks ========== */
| |
| @media (max-width: 720px) {
| |
| .infobox { float: none; margin: 0.75rem 0; }
| |
| .mw-parser-output h1 { font-size: 1.9rem; }
| |
| .mw-parser-output h2 { font-size: 1.45rem; }
| |
| }
| |
|
| |
| /* End Faeloria theme */
| |
|
| |
| /***** Citizen Dark Contrast – Faeloria ***** | | /***** Citizen Dark Contrast – Faeloria ***** |
| Paste in MediaWiki:Citizen.css | | Paste in MediaWiki:Citizen.css |
