MediaWiki:Common.css: Difference between revisions

Latest revision as of 23:41, 29 April 2026

/* === SAS Gaming Wiki — Common.css === */

/* Lighten dark theme background — closer to Vikunja dark gray */
:root.skin-citizen-dark,
:root[data-theme="dark"],
:root.skin-theme-clientpref-night,
html.skin-citizen-dark {
    --color-surface-0-oklch__l: 18% !important;
    --color-surface-0-oklch__c: 0.015 !important;
    --color-surface-0-hsl__l: 10% !important;
    --color-surface-0-hsl__s: 20% !important;
}

/* Also override pure-black mode for any user who has it enabled */
:root.citizen-feature-pure-black-clientpref-1 {
    --color-surface-0-oklch__l: 18% !important;
    --color-surface-0-oklch__c: 0.015 !important;
    --color-surface-0-hsl__l: 10% !important;
    --color-surface-0-hsl__s: 20% !important;
}

/* === P:G Imported Styles (adapted for dark theme) === */

/* Infobox header image + title */
.ib-tbl-hd { width:100%; height:29px; }
.ib-tbl-hd img { display:block; width:100%; height:29px; border:none; }
.ib-tbl-hdt { width:100%; font:bold 19px/1em Arial; text-align:center; position:absolute; left:0; top:13px; border-radius:2px; }
.ib-tbl-hdt, .ib-tbl-hdt a, .ib-tbl-hdt a:visited { color:#eaeaea; }

/* Infobox content blocks */
.block1 { background-color:#2a1f1a; color:#d4b896; }
.block2 a:link, .block2 a:visited { color:#e5b964; }

/* Item tooltip template */
.gg-itemt { border:1px solid #423930; width:400px; padding:6px; background:#0e0a08; color:#b09066; text-align:left; }
.gg-itemt p { font:13px/15px Arial, sans-serif; color:#b09066; margin:0 0 7px; }
.gg-itemt-hd { position:relative; padding:0 0 0 47px; min-height:40px; overflow:visible; }
.gg-itemt-img { position:absolute; left:0; top:0; width:32px; height:32px; padding:3px; overflow:hidden; background:#0f0c0a; border:1px solid #1d1713; }
.gg-itemt-img img { display:block; border:none; width:32px; height:32px; }
.gg-itemt .gg-hd {
    font:bold 16px/1.1em "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
    color:#fff; white-space:nowrap; margin:0 0 8px; padding:0;
}
.gg-itemt dl { margin:0; padding:0; }
.gg-itemt dt { margin:0; padding:0 0 9px 0; }
.gg-itemt dd { margin:0 0 0 15px; padding:0 0 9px 0; line-height:14px; }

/* Icon tooltips */
.gg-icon-tt {
    position:absolute; border:1px solid #423930; padding:6px 10px; background:#0e0a08; margin:0 0 7px; white-space:nowrap;
    font:bold 16px/1.1em "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif; color:#fff;
    box-shadow:0 0 3px rgba(0,0,0,.3);
}

/* Main page table headers */
.gg-tbl-hd { width:100%; height:29px; background:#6B21A8; }
.gg-tbl-hd img { display:block; width:100%; height:29px; border:none; }
.gg-tbl-hdt { width:100%; font:bold 15px/1em Georgia,serif; text-align:center; position:absolute; left:0; top:8px; }
.gg-tbl-hdt, .gg-tbl-hdt a, .gg-tbl-hdt a:visited { color:#eaeaea; }

/* Light bullet lists */
.gg-light-bullets li { list-style-image:none; color:#ccc; }

/* Common tables */
.table { margin:10px 0; border-collapse:collapse; border:1px solid #444; font-size:12px; }
.table th { background:#2a2040; border-bottom:1px solid #555; padding:0.25em; color:#ddd; }
.table td { padding:0.25em 0.5em; }
.table > tbody > tr:nth-child(even) { background:rgba(255,255,255,0.03); }
table.zebra > tbody > tr:nth-child(even) { background:rgba(255,255,255,0.05); }

/* Ambox (message boxes) */
.ambox {
    font-size:95%; width:80%; margin:0 auto;
    border:1px solid #555; border-left:10px solid #228b22;
    border-collapse:collapse; background:#1a1a2e; color:#ddd;
}
.ambox a { color:#e5b964; }
.ambox-blue   { border-left-color:#1e90ff; }
.ambox-red    { border-left-color:#b22222; }
.ambox-orange { border-left-color:#f28500; }
.ambox-yellow { border-left-color:#f4c430; }
.ambox-purple { border-left-color:#9932cc; }
.ambox-gray   { border-left-color:#888; }
.ambox-green  { border-left-color:#228b22; }
.ambox-smalltext { font-size:smaller; margin-top:0.5em; margin-left:0.8em; }
.ambox-image { width:60px; padding:2px 0 2px 0.5em; text-align:center; }
@media print { .ambox { display:none; } }

/* Spoiler boxes */
.spoilbox {
    padding:2px; margin:3px 0; width:100%;
    border-radius:0 0 10px 10px; border:0 solid #1e1615;
    text-align:left; background:#2a1f1a; color:#d4b896; font-weight:bold;
}
.spoilbox a:visited, .spoilbox a.external:visited, .spoilbox a:link { color:#e5b964; }
.mw-collapsible-toggle a { color:#e5b964; }

/* External image sizing */
.extimage16px img { width:16px; }
.extimage32px img { width:32px; }
.extimage64px img { width:64px; }

/* Keyboard keys */
kbd {
    border:2px solid #555; color:#eee; border-radius:.5em;
    background-color:#2a2a3e; padding:2px;
}

/* Documentation template */
.template-documentation .color1,
#bodyContent .template-documentation .color1 a,
#bodyContent .template-documentation .color1 a.external { background-color:#36C; color:white; }

/* Hide main page title */
body.page-Main_Page .mw-page-title { display:none; }
/* ===== SAS Gaming Unified — palette overrides (added 2026-04-29) ===== */

:root,
:root.skin-citizen-dark,
html.skin-citizen-dark {
    --sas-bg-base:      #0d0e12;
    --sas-bg-panel:     #1a1a2e;
    --sas-accent:       #6B21A8;
    --sas-accent-hi:    #7c3aed;
    --sas-accent-lt:    #c4b5fd;
    --sas-text:         #ffffff;
}

/* Replace gold link accents with the unified accent-light. The wiki's
 * existing rules used #e5b964 (gold) for .block2 a and .ambox a.
 * .gg-tbl-hd already uses #6B21A8 — leave it alone. */
:root.skin-citizen-dark a:link,
:root.skin-citizen-dark a:visited,
.block2 a:link, .block2 a:visited,
.ambox a {
    color: var(--sas-accent-lt) !important;
}
:root.skin-citizen-dark a:hover,
.ambox a:hover { color: var(--sas-text) !important; }

/* Tooltip + infobox: shift bg + text to the unified scheme */
.gg-itemt, .gg-icon-tt {
    background: var(--sas-bg-panel) !important;
    color: var(--sas-text) !important;
    border-color: var(--sas-accent) !important;
}
.gg-itemt p,
.gg-itemt dd { color: var(--sas-text) !important; }
.gg-itemt-img {
    background: var(--sas-bg-base) !important;
    border-color: var(--sas-accent) !important;
}

/* Common tables — match the existing #6B21A8 main page header */
.table th {
    background: #2a2040 !important;
    color: var(--sas-text) !important;
}

/* Ambox — recolor blue-left ambox-blue to our accent-light */
.ambox-blue { border-left-color: var(--sas-accent-hi) !important; }

/* Optional brand banner at top of Main_Page (only fires if a wiki editor
 * adds <div class="sas-wiki-banner"><img src="..."/></div>) */
.sas-wiki-banner {
    max-width: 800px;
    margin: 16px auto;
    border: 1px solid var(--sas-accent);
    border-radius: 4px;
    overflow: hidden;
}
.sas-wiki-banner img { display: block; width: 100%; height: auto; }