MediaWiki:Common.css: Difference between revisions

Latest revision as of 06:03, 3 September 2026

/* Cosmic Wiki skin.
 *
 * Deployed by the sync bot from Wiki-src/content/MediaWiki-Common.css - edit it there,
 * not here, or the next sync reverts you.
 *
 * The rarity colours are the client's own, copied from
 * Client-src/src/com/company/assembleegameclient/util/RarityUtils.as so that an item's
 * name reads the same colour on the wiki as it does on its in-game tooltip. Two bands,
 * Divine and Admin, have no client colour and are wiki-side choices.
 */

:root {
    --cosmic-bg: #12101a;
    --cosmic-panel: #1c1926;
    --cosmic-panel-alt: #241f30;
    --cosmic-border: #3a3350;
    --cosmic-text: #e6e2f0;
    --cosmic-muted: #9d97b0;
    --cosmic-accent: #b48eff;
    --cosmic-accent-dim: #6f5a9c;
    --cosmic-glow: rgba(180, 142, 255, 0.16);

    /* Headings are set in a condensed grotesque, uppercase and tracked out, because that
       is the register of the game's own UI labels - not the serif of an encyclopedia.
       MediaWiki strips @import out of this page, so a webfont is not available and the
       identity has to come from the TREATMENT rather than the face: whichever of these
       resolves, the caps and the tracking read the same. */
    --cosmic-display: "Franklin Gothic Medium", "Arial Narrow", "Helvetica Neue",
                      Arial, sans-serif;

    --rarity-untiered: #8a2be2;
    --rarity-epic-untiered: #8a2be2;
    --rarity-uncommon: #00ff00;
    --rarity-common: #ffffff;
    --rarity-tiered: #ffffff;
    --rarity-rare: #ff9900;
    --rarity-item-set: #ff9900;
    --rarity-legendary: #ffd700;
    --rarity-mythical: #e90000;
    --rarity-champion: #9e5132;
    --rarity-treasure: #7540aa;
    --rarity-forging: #00ff00;
    --rarity-divine: #d5fbfc;
    --rarity-admin: #dc143c;
    --rarity-undefined: #9b9b9b;
    --rarity-unknown: #9b9b9b;
}

/* ------------------------------------------------------------------ page shell */

/* The backdrop is drawn, not photographed: three tiled star layers over two nebula
   washes, all in CSS. A real image would mean an upload to maintain, a request on every
   page, and a file the sync would have to own. This costs nothing and cannot rot.
   Fixed attachment so the field stays put while a long item list scrolls over it. */
body {
    background-color: var(--cosmic-bg);
    background-image:
        radial-gradient(1.2px 1.2px at 40px 60px, rgba(230, 226, 240, 0.30), transparent 100%),
        radial-gradient(1px 1px at 150px 210px, rgba(180, 142, 255, 0.26), transparent 100%),
        radial-gradient(1.6px 1.6px at 265px 95px, rgba(230, 226, 240, 0.16), transparent 100%),
        radial-gradient(58em 42em at 78% -12%, var(--cosmic-glow), transparent 70%),
        radial-gradient(46em 34em at 8% 108%, rgba(117, 64, 170, 0.14), transparent 70%);
    background-size: 320px 320px, 420px 420px, 540px 540px, 100% 100%, 100% 100%;
    background-attachment: fixed;
    color: var(--cosmic-text);
}

/* .mw-body is the one container every skin agrees on; the others are each skin's own
   wrapper. Timeless is the default and Vector is kept loadable via ?useskin=, so both
   are named here rather than swapping one set for the other. */
/* Transparent, not dark: the panels below carry the colour so the star field reads
   through the whole page rather than only in the margins. */
.mw-body,
.mw-body-content,
#mw-content,
#mw-content-container,
.mw-page-container,
.vector-body {
    background: transparent;
    color: var(--cosmic-text);
}

/* Section headings in the game's own register - caps, tracked, over an accent rule.
   The rule is the structural device: one accent, used everywhere a section begins, the
   way Calamity uses a single orange for every heading and panel edge. */
.mw-body h1,
.mw-body h2,
.mw-body-content h1,
.mw-body-content h2,
#firstHeading,
.firstHeading {
    font-family: var(--cosmic-display);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
    color: var(--cosmic-text);
    border-bottom: 2px solid var(--cosmic-accent);
    padding-bottom: 0.25em;
}

/* h3 and below sit inside a section rather than starting one, so they take the caps
   but not the rule - a rule under every one of them turns an item page into a ladder. */
.mw-body h3,
.mw-body h4,
.mw-body-content h3,
.mw-body-content h4 {
    font-family: var(--cosmic-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    color: var(--cosmic-accent);
    border-bottom: 0;
}

a,
a:visited {
    color: var(--cosmic-accent);
}

a.new,
a.new:visited {
    color: #d9534f;
}

/* ------------------------------------------------------- Timeless chrome

   Every selector below was read off the rendered page rather than guessed: these six
   containers ship with a white background, and on a dark wiki each one reads as a hole
   punched in the page. They are the whole of the "unstyled" problem - the content was
   already themed. Matching Timeless's own id-level specificity is enough to win, since
   this stylesheet loads after the skin's; none of this needs !important.             */

#mw-header-container,
#personal-inner,
#mw-content-block,
.sidebar-inner,
#menus-cover {
    background: transparent;
}

#mw-header-container {
    background: rgba(28, 25, 38, 0.92);
    border-bottom: 1px solid var(--cosmic-border);
}

/* Timeless brands the header with a red bar in three pieces. One accent per page, and
   on this page it is not red. */
.color-left,
.color-middle,
.color-right {
    background: var(--cosmic-accent) !important;
}

#p-logo-text a {
    font-family: var(--cosmic-display);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cosmic-text);
}

/* Search: the one control a reader uses on every visit, so it gets the accent on focus
   rather than the browser's default ring. */
#simpleSearch,
#searchInput,
#searchInput-container {
    background: var(--cosmic-panel-alt);
    border: 1px solid var(--cosmic-border);
    color: var(--cosmic-text);
}

#searchInput::placeholder {
    color: var(--cosmic-muted);
}

#searchInput:focus,
#simpleSearch:focus-within {
    border-color: var(--cosmic-accent);
    outline: 2px solid var(--cosmic-glow);
}

/* Both rails. The left one is navigation, the right one is page tools; they get the
   same panel treatment so the page reads as three columns of one material. */
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
    background: rgba(28, 25, 38, 0.92);
    border: 1px solid var(--cosmic-border);
    border-radius: 4px;
}

#mw-site-navigation .sidebar-chunk h2,
#mw-related-navigation .sidebar-chunk h2,
#mw-site-navigation .sidebar-chunk h3,
#mw-related-navigation .sidebar-chunk h3 {
    font-family: var(--cosmic-display);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.8em;
    color: var(--cosmic-muted);
    background: transparent;
    border-bottom: 1px solid var(--cosmic-border);
}

/* The article column itself, floating on the star field like Calamity's does. */
#mw-content {
    background: rgba(24, 21, 33, 0.94);
    border: 1px solid var(--cosmic-border);
    border-radius: 4px;
}

/* Tabs read as tabs: the current one is attached to the page by the accent. */
#mw-page-header-links li.selected a,
#mw-page-header-links li a:hover {
    color: var(--cosmic-accent);
    border-bottom: 2px solid var(--cosmic-accent);
}

#catlinks,
.catlinks {
    background: rgba(28, 25, 38, 0.92);
    border: 1px solid var(--cosmic-border);
    color: var(--cosmic-text);
}

/* Timeless declares this one more specifically than a bare id, so it has to be matched
   rather than merely named. */
#personal #personal-inner,
#mw-header #personal-inner {
    background: transparent;
}

/* The table of contents only appears on articles with four or more sections, which is
   why it was missed the first time round: the item page I was checking has three. */
.toc,
#toc,
.toccolours,
#mw-content .toc {
    background: rgba(36, 31, 48, 0.92);
    border: 1px solid var(--cosmic-border);
    border-radius: 4px;
    color: var(--cosmic-text);
}

.toc h2,
#toc h2,
.toctitle h2 {
    font-family: var(--cosmic-display);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.85em;
    color: var(--cosmic-muted);
    border-bottom: 0;
}

.tocnumber {
    color: var(--cosmic-muted);
}

/* Code and pre ship light on every MediaWiki install. The COSMIC-BOT marker on a synced
   page is a <code>, so this one is on screen constantly. */
code,
pre,
.mw-code,
tt {
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--cosmic-border);
    color: var(--cosmic-text);
}

#footer,
#mw-footer,
.mw-footer {
    color: var(--cosmic-muted);
    border-top: 1px solid var(--cosmic-border);
}

/* ------------------------------------------------------------------ tables */

.wikitable {
    background: var(--cosmic-panel);
    color: var(--cosmic-text);
    border: 1px solid var(--cosmic-border);
    border-collapse: collapse;
}

.wikitable > tr > th,
.wikitable > * > tr > th {
    background: var(--cosmic-panel-alt);
    color: var(--cosmic-text);
    border: 1px solid var(--cosmic-border);
}

.wikitable > tr > td,
.wikitable > * > tr > td {
    border: 1px solid var(--cosmic-border);
}

.wikitable > * > tr:nth-child(even) > td {
    background: rgba(255, 255, 255, 0.02);
}

/* Item lists are wide and pixel-art heavy: keep the icons crisp and let a narrow
   screen scroll the table rather than the whole page. */
.cosmic-itemlist {
    display: block;
    overflow-x: auto;
    max-width: 100%;
}

.cosmic-itemlist img,
.cosmic-infobox img {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.cosmic-stats {
    min-width: 18em;
}

/* ------------------------------------------------------------------ infobox */

/* Rarity is the axis players actually sort by, so it is the axis the page is built on:
   the card is banded, edged and lit in the item's own colour, taken from the client's
   RarityUtils. A Legendary page should be recognisable as Legendary from across the
   room, before a word of it is read. The --rarity-current indirection already existed;
   this is what finally spends it. */
/* 266px, not 22em. Measured off the Calamity page at 1440px, where the data card is
   deliberately narrow: it is a card to glance at beside the prose, not a second column
   competing with it. Ours was 22em (~350px), wide enough that the article text was
   squeezed into a channel on long pages. Their padding is 6px and their radius 8px, both
   tighter than what we had, which is what makes the card read as dense rather than roomy. */
.cosmic-infobox {
    float: right;
    clear: right;
    width: 266px;
    max-width: 100%;
    margin: 0 0 0.5em 1em;
    padding: 0;
    background: var(--cosmic-panel);
    border: 1px solid var(--cosmic-border);
    border-top: 3px solid var(--rarity-current, var(--rarity-unknown));
    border-radius: 8px;
    font-size: 0.85em;
    overflow: hidden;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.4),
                0 6px 22px rgba(0, 0, 0, 0.45);
}

/* colour-mix keeps one source of truth per band: the tint is derived from the rarity
   rather than declared again for each of the fourteen. Browsers without it fall back to
   the flat panel, which is what the card looked like before. */
.cosmic-infobox-title {
    font-family: var(--cosmic-display);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: 1.2em;
    font-weight: 600;
    text-align: center;
    padding: 0.5em 0.6em;
    color: var(--rarity-current, var(--rarity-unknown));
    background: var(--cosmic-panel-alt);
    background: color-mix(in srgb, var(--rarity-current, var(--rarity-unknown)) 14%, var(--cosmic-panel-alt));
    border-bottom: 1px solid var(--cosmic-border);
}

/* The sprite is the item. Give it a plate of its own, edged in the rarity, so it reads
   as an artifact on display rather than an image dropped into a table. */
/* Each colour-mix line is preceded by a plain one. MediaWiki sanitises this page and
   drops declarations it cannot parse, so if colour-mix does not survive, the card keeps
   a dark plate and a border rather than losing both. */
.cosmic-infobox-image {
    text-align: center;
    margin: 6px;
    padding: 0.8em 0;
    background: rgba(0, 0, 0, 0.32);
    background:
        radial-gradient(70% 70% at 50% 40%,
            color-mix(in srgb, var(--rarity-current, var(--rarity-unknown)) 12%, transparent),
            transparent 70%),
        rgba(0, 0, 0, 0.32);
    border: 1px solid var(--cosmic-border);
    border-color: color-mix(in srgb, var(--rarity-current, var(--rarity-unknown)) 45%, var(--cosmic-border));
    border-radius: 3px;
}

/* Sprites are 8 or 16 px of pixel art blown up; never let them be smoothed. */
.cosmic-infobox-image img {
    image-rendering: pixelated;
}

.cosmic-infobox-flavor,
.cosmic-infobox-table,
.cosmic-infobox-stats {
    margin-left: 6px;
    margin-right: 6px;
}

.cosmic-infobox-table {
    margin-bottom: 6px;
}

/* The article column, to the same measurements: 24px of side padding on a 1px edge.
   Their heading rule is 1px, not the 2px I had - at 2px every section shouts, and on an
   item page with five of them the page reads as a stack of banners. The accent stays;
   only the weight comes down. */
#mw-content {
    padding: 20px 24px 24px;
}

.mw-body h1,
.mw-body h2,
.mw-body-content h1,
.mw-body-content h2,
#firstHeading,
.firstHeading {
    border-bottom-width: 1px;
    padding-bottom: 4px;
    margin-bottom: 14px;
}

.cosmic-infobox-flavor {
    padding: 0.6em 0.2em;
    color: var(--cosmic-muted);
    font-style: italic;
    text-align: center;
}

.cosmic-infobox-table {
    width: 100%;
    border-collapse: collapse;
}

.cosmic-infobox-table th,
.cosmic-infobox-table td {
    padding: 0.25em 0.4em;
    border-top: 1px solid var(--cosmic-border);
    text-align: left;
    vertical-align: top;
}

.cosmic-infobox-table th {
    color: var(--cosmic-muted);
    font-weight: normal;
    width: 45%;
}

.cosmic-infobox-table tr.cosmic-group th {
    background: var(--cosmic-panel-alt);
    color: var(--cosmic-text);
    text-align: center;
    font-weight: bold;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    font-size: 0.85em;
}

.cosmic-infobox-stats {
    line-height: 1.6;
}

@media (max-width: 720px) {
    .cosmic-infobox {
        float: none;
        width: auto;
        margin: 0 0 1em 0;
    }
}

/* ------------------------------------------------------------------ main page */

.cosmic-hero {
    padding: 2.6em 1em;
    margin-bottom: 1.5em;
    text-align: center;
    background:
        radial-gradient(40em 18em at 50% -30%, var(--cosmic-glow), transparent 70%),
        linear-gradient(160deg, #241f30 0%, #12101a 100%);
    border: 1px solid var(--cosmic-border);
    border-top: 2px solid var(--cosmic-accent);
    border-radius: 6px;
}

.cosmic-hero-title {
    font-family: var(--cosmic-display);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    font-size: 2.2em;
    line-height: 1.15;
    color: var(--cosmic-text);
    text-shadow: 0 0 26px var(--cosmic-glow);
}

.cosmic-hero-sub {
    color: var(--cosmic-muted);
    padding-top: 0.5em;
}

/* ------------------------------------------------------------------ rarity */

/* One rule per band, setting a single variable. Everything that needs to be tinted -
   the label, the infobox border, the infobox title - reads --rarity-current, so adding
   a band means adding one line here and one in :root. */
.cosmic-rarity-untiered      { --rarity-current: var(--rarity-untiered); }
.cosmic-rarity-epic-untiered { --rarity-current: var(--rarity-epic-untiered); }
.cosmic-rarity-uncommon      { --rarity-current: var(--rarity-uncommon); }
.cosmic-rarity-common        { --rarity-current: var(--rarity-common); }
.cosmic-rarity-tiered        { --rarity-current: var(--rarity-tiered); }
.cosmic-rarity-rare          { --rarity-current: var(--rarity-rare); }
.cosmic-rarity-item-set      { --rarity-current: var(--rarity-item-set); }
.cosmic-rarity-legendary     { --rarity-current: var(--rarity-legendary); }
.cosmic-rarity-mythical      { --rarity-current: var(--rarity-mythical); }
.cosmic-rarity-champion      { --rarity-current: var(--rarity-champion); }
.cosmic-rarity-treasure      { --rarity-current: var(--rarity-treasure); }
.cosmic-rarity-forging       { --rarity-current: var(--rarity-forging); }
.cosmic-rarity-divine        { --rarity-current: var(--rarity-divine); }
.cosmic-rarity-admin         { --rarity-current: var(--rarity-admin); }

.cosmic-rarity-label {
    font-weight: bold;
    color: var(--rarity-current, var(--rarity-unknown));
}

/* The same idea carried into the lists: a 3px edge in the item's rarity down the left of
   its row. A thousand-row table becomes scannable by band without reading the column,
   which is how a player actually uses these pages. */
.cosmic-itemlist > tbody > tr[class*="cosmic-rarity-"] > td:first-child {
    border-left: 3px solid var(--rarity-current, var(--rarity-unknown));
}

/* Damage ranges and DPS only line up in a column if the digits are the same width. */
.cosmic-itemlist td,
.cosmic-infobox-table td {
    font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ enemies */

/* Enemy cards take their accent from what the enemy IS, the same way an item's comes
   from its rarity. The escalation - ordinary enemy, hero, quest boss, god, Oryx - is
   the game's own, read off the flags on the object. */
.cosmic-infobox.cosmic-kind-enemy     { --rarity-current: var(--cosmic-muted); }
.cosmic-infobox.cosmic-kind-encounter { --rarity-current: #00ced1; }
.cosmic-infobox.cosmic-kind-hero      { --rarity-current: #00ff00; }
.cosmic-infobox.cosmic-kind-boss      { --rarity-current: #ff9900; }
.cosmic-infobox.cosmic-kind-god       { --rarity-current: #ffd700; }
.cosmic-infobox.cosmic-kind-cube-god  { --rarity-current: #8a2be2; }
.cosmic-infobox.cosmic-kind-oryx      { --rarity-current: #e90000; }
.cosmic-infobox.cosmic-dungeon        { --rarity-current: var(--cosmic-accent); }