MediaWiki:Common.css
From Cosmic Wiki
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.
/* 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);
}
#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. */
.cosmic-infobox {
float: right;
clear: right;
width: 22em;
max-width: 100%;
margin: 0 0 1em 1.5em;
padding: 0;
background: var(--cosmic-panel);
border: 1px solid var(--cosmic-border);
border-top: 3px solid var(--rarity-current, var(--rarity-unknown));
border-radius: 4px;
font-size: 0.9em;
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: 0.75em;
padding: 0.9em 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: 0.75em;
margin-right: 0.75em;
}
.cosmic-infobox-table {
margin-bottom: 0.75em;
}
.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); }
