MediaWiki:Common.css
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;
--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 */
body {
background: var(--cosmic-bg);
color: var(--cosmic-text);
}
.mw-body,
.mw-page-container,
.vector-body {
background: var(--cosmic-bg);
color: var(--cosmic-text);
}
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body-content h1,
.mw-body-content h2 {
color: var(--cosmic-text);
border-bottom-color: var(--cosmic-border);
font-family: Georgia, "Times New Roman", serif;
}
a,
a:visited {
color: var(--cosmic-accent);
}
a.new,
a.new:visited {
color: #d9534f;
}
/* ------------------------------------------------------------------ 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 */
.cosmic-infobox {
float: right;
clear: right;
width: 22em;
max-width: 100%;
margin: 0 0 1em 1.5em;
padding: 0.75em;
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;
}
.cosmic-infobox-title {
font-family: Georgia, "Times New Roman", serif;
font-size: 1.35em;
text-align: center;
padding-bottom: 0.4em;
color: var(--rarity-current, var(--rarity-unknown));
}
.cosmic-infobox-image {
text-align: center;
padding: 0.5em 0;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
}
.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: 2em 1em;
margin-bottom: 1.5em;
text-align: center;
background: linear-gradient(160deg, #241f30 0%, #12101a 100%);
border: 1px solid var(--cosmic-border);
border-radius: 6px;
}
.cosmic-hero-title {
font-family: Georgia, "Times New Roman", serif;
font-size: 2.2em;
color: var(--cosmic-accent);
}
.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));
}
/* ------------------------------------------------------------------ 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); }