Jump to content

MediaWiki:Common.css

From Sacred Universe Wiki
Revision as of 03:36, 18 August 2026 by SiteAdmin (talk | contribs) (Phase 0: site styling and navigation)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

Note: After publishing, you may have to bypass your browser's cache to see the changes.

  • Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
  • Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
  • Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ==========================================================================
   Sacred Universe Wiki - site styles
   TemplateStyles is not available on this install, so all shared styling
   lives here. Edit with care: this file affects every page.
   ========================================================================== */

/* --- Palette -------------------------------------------------------------
   Gold is the Sacred Symbol. Each kingdom carries its element's accent.     */
:root {
    --sw-gold: #b8892b;
    --sw-gold-soft: #f3e6c8;
    --sw-ink: #202122;
    --sw-rule: #c8ccd1;
    --sw-panel: #f8f9fa;
    --sw-land: #3f7d3f;
    --sw-water: #2b6cb0;
    --sw-fire: #b8412b;
    --sw-air: #6b7787;
}

/* --- Infoboxes ---------------------------------------------------------- */
.sw-infobox {
    float: right;
    clear: right;
    width: 23em;
    max-width: 100%;
    margin: 0 0 1.2em 1.5em;
    border: 1px solid var(--sw-rule);
    border-top: 3px solid var(--sw-gold);
    border-radius: 3px;
    background: var(--sw-panel);
    font-size: 88%;
    line-height: 1.5;
    box-shadow: 0 1px 3px rgba(0,0,0,.07);
    overflow: hidden;
}
.sw-infobox-title {
    padding: .6em .8em;
    background: var(--sw-gold-soft);
    border-bottom: 1px solid var(--sw-rule);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.25;
    text-align: center;
    color: var(--sw-ink);
}
.sw-infobox-image { padding: .8em .8em .2em; text-align: center; }
.sw-infobox-image img { max-width: 100%; height: auto; }
.sw-infobox-caption {
    padding-top: .4em;
    font-size: .92em;
    font-style: italic;
    color: #54595d;
}
.sw-infobox-noimage {
    margin: .8em .8em 0;
    padding: 1.6em .5em;
    border: 1px dashed var(--sw-rule);
    border-radius: 3px;
    text-align: center;
    font-size: .92em;
    color: #72777d;
}
.sw-infobox-data {
    width: 100%;
    margin: .8em 0 0;
    border-collapse: collapse;
    background: transparent;
}
.sw-infobox-data th,
.sw-infobox-data td {
    padding: .4em .8em;
    border-top: 1px solid #eaecf0;
    text-align: left;
    vertical-align: top;
}
.sw-infobox-data th {
    width: 38%;
    font-weight: 600;
    color: #54595d;
}
.sw-infobox-section th {
    background: #eef0f2;
    font-size: .92em;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* Kingdom accents. Add the class to an infobox or a main-page tile. */
.sw-land  { --sw-gold: #3f7d3f; }
.sw-water { --sw-gold: #2b6cb0; }
.sw-fire  { --sw-gold: #b8412b; }
.sw-air   { --sw-gold: #6b7787; }
.sw-land .sw-infobox-title,  .sw-land.sw-tile  h3 { background: #e6f0e6; }
.sw-water .sw-infobox-title, .sw-water.sw-tile h3 { background: #e3edf8; }
.sw-fire .sw-infobox-title,  .sw-fire.sw-tile  h3 { background: #f8e6e2; }
.sw-air .sw-infobox-title,   .sw-air.sw-tile   h3 { background: #eceef1; }

/* --- Banners ------------------------------------------------------------ */
.sw-banner {
    margin: 0 0 1em;
    padding: .7em 1em;
    border: 1px solid var(--sw-rule);
    border-left: 4px solid var(--sw-gold);
    border-radius: 3px;
    background: var(--sw-panel);
    font-size: 95%;
}
.sw-banner-spoiler { border-left-color: #b8412b; background: #fdf3f1; }
.sw-banner-stub    { border-left-color: #6b7787; font-style: italic; }

/* --- Pull quotes -------------------------------------------------------- */
.sw-quote {
    margin: 1em 0 1em 1.5em;
    padding: .2em 0 .2em 1em;
    border-left: 3px solid var(--sw-gold);
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.05em;
    font-style: italic;
    color: #3c4043;
}
.sw-quote-attr {
    display: block;
    margin-top: .4em;
    font-size: .85em;
    font-style: normal;
    color: #72777d;
}

/* --- Navboxes ----------------------------------------------------------- */
.sw-navbox {
    clear: both;
    width: 100%;
    margin: 1.5em 0 0;
    border: 1px solid var(--sw-rule);
    border-radius: 3px;
    background: var(--sw-panel);
    font-size: 88%;
}
.sw-navbox-title {
    padding: .45em .8em;
    background: var(--sw-gold-soft);
    border-bottom: 1px solid var(--sw-rule);
    font-weight: 600;
    text-align: center;
}
.sw-navbox-row { display: flex; border-top: 1px solid #eaecf0; }
.sw-navbox-group {
    flex: 0 0 10em;
    padding: .45em .8em;
    background: #eef0f2;
    font-weight: 600;
    font-size: .95em;
}
.sw-navbox-list { flex: 1; padding: .45em .8em; }

/* --- Kingdom tiles on the Main Page ------------------------------------- */
.sw-tiles { display: flex; flex-wrap: wrap; gap: 1em; margin: 1em 0; }
.sw-tile {
    flex: 1 1 13em;
    border: 1px solid var(--sw-rule);
    border-top: 3px solid var(--sw-gold);
    border-radius: 3px;
    background: var(--sw-panel);
    overflow: hidden;
}
.sw-tile h3 {
    margin: 0;
    padding: .5em .8em;
    border: none;
    font-size: 1.05em;
    font-family: Georgia, 'Times New Roman', serif;
}
.sw-tile p { margin: 0; padding: .7em .8em; font-size: .92em; color: #54595d; }

/* --- Misc --------------------------------------------------------------- */
.sw-lead { font-size: 1.03em; }
.sw-dablink { margin: 0 0 .8em; padding-left: 1.6em; font-style: italic; color: #54595d; }

/* --- Mobile ------------------------------------------------------------- */
@media screen and (max-width: 720px) {
    .sw-infobox { float: none; width: auto; margin: 0 0 1.2em; }
    .sw-navbox-row { display: block; }
    .sw-navbox-group { flex: none; }
}

/* --- Night mode (Vector 2022) ------------------------------------------- */
@media screen {
    html.skin-theme-clientpref-night .sw-infobox,
    html.skin-theme-clientpref-night .sw-navbox,
    html.skin-theme-clientpref-night .sw-banner,
    html.skin-theme-clientpref-night .sw-tile {
        background: #27292d;
        border-color: #54595d;
    }
    html.skin-theme-clientpref-night .sw-infobox-title,
    html.skin-theme-clientpref-night .sw-navbox-title,
    html.skin-theme-clientpref-night .sw-tile h3 { background: #35302250; color: #eaecf0; }
    html.skin-theme-clientpref-night .sw-navbox-group,
    html.skin-theme-clientpref-night .sw-infobox-section th { background: #33363a; }
    html.skin-theme-clientpref-night .sw-infobox-data th,
    html.skin-theme-clientpref-night .sw-infobox-data td { border-top-color: #404449; }
    html.skin-theme-clientpref-night .sw-infobox-data th,
    html.skin-theme-clientpref-night .sw-quote,
    html.skin-theme-clientpref-night .sw-tile p { color: #c8ccd1; }
}
Retrieved from "https://sacreduniverse.wiki/w/index.php?title=MediaWiki:Common.css&oldid=2"