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.
/* Drivergence Wiki theme. The game's own tokens (ui.css :root), so the wiki reads as part of the game:
deep navy and violet glass, cyan links, pink and amber accents, the five rarity colours.
Orbitron for titles and headings, Rajdhani for text: the server links
https://drivergence.com/site/fonts/fonts.css.
Vector 2022 paints from Codex design tokens, not classes. A custom property inherits, so forcing
--background-color-base to a colour at :root paints every wrapper and leaves a rim round each box:
it is transparent at the root, and the few things that float or take typing get an opaque surface.
Padding overrides carry a `body` prefix, because the skin's stylesheet loads after this one at equal
specificity. When something will not style, list the rules that actually match the element. */
:root {
--dg-bg: #07040f;
--dg-bg2: #0d0820;
--dg-panel: #110a28;
--dg-panel2: #180f38;
--dg-input: #1a1236;
--dg-ink: #ece9ff;
--dg-mute: #8f8ab8;
--dg-dim: #4a4670;
--dg-cyan: #30e8ff;
--dg-pink: #ff3fb0;
--dg-amber: #ffb020;
--dg-lime: #5cff8a;
--dg-red: #ff5c5c;
--dg-violet: #8a5cff;
--dg-line: rgba(48, 232, 255, 0.28);
--dg-line2: rgba(255, 63, 176, 0.35);
--dg-display: 'Orbitron', 'Segoe UI', sans-serif;
--dg-body: 'Rajdhani', 'Segoe UI', sans-serif;
}
:root,
html,
body {
--background-color-base: transparent !important;
--background-color-base-fixed: transparent !important;
--background-color-neutral-subtle: transparent !important;
--background-color-interactive-subtle: transparent !important;
--background-color-neutral: #180f38;
--background-color-interactive: #180f38;
--background-color-interactive--hover: #221650;
--color-base: #ece9ff;
--color-subtle: #8f8ab8;
--color-emphasized: #ffffff;
--color-placeholder: #8f8ab8;
--color-progressive: #30e8ff;
--color-progressive--hover: #8af4ff;
--color-progressive--active: #8af4ff;
--color-visited: #b98aff;
--color-destructive: #ff5c5c;
--border-color-base: rgba(48, 232, 255, 0.28);
--border-color-subtle: rgba(48, 232, 255, 0.18);
--border-color-muted: rgba(48, 232, 255, 0.18);
--border-color-interactive: rgba(48, 232, 255, 0.45);
--border-color-progressive: #30e8ff;
color-scheme: dark;
}
/* the things that must sit on something solid: anything floating over the page, and any field you type in */
.vector-dropdown-content,
.cdx-menu,
.cdx-menu-item,
.cdx-text-input__input,
.cdx-search-input__input-wrapper,
.oo-ui-popupWidget-popup,
.oo-ui-windowManager,
.mw-message-box,
.cdx-message,
.suggestions-results,
.suggestions-special {
--background-color-base: #1a1236 !important;
--background-color-base-fixed: #1a1236 !important;
background-color: #1a1236;
color: var(--dg-ink);
}
/* --- the page ----------------------------------------------------------- */
html,
body {
background: var(--dg-bg);
background-image:
radial-gradient(ellipse at 20% 0%, rgba(138, 92, 255, 0.18), transparent 55%),
radial-gradient(ellipse at 90% 10%, rgba(255, 63, 176, 0.12), transparent 50%),
linear-gradient(180deg, #0d0820, #07040f 60%);
background-attachment: fixed;
color: var(--dg-ink);
font-family: var(--dg-body);
font-weight: 500;
}
.mw-page-container {
background: transparent;
max-width: 1400px;
}
/* the article sits on a glass panel, the way every menu in the game does */
.mw-content-container {
background: linear-gradient(160deg, rgba(24, 15, 56, 0.92), rgba(12, 7, 30, 0.92));
border: 1px solid var(--dg-line);
box-shadow: 0 0 40px rgba(48, 232, 255, 0.08), inset 0 0 0 1px rgba(255, 63, 176, 0.06);
color: var(--dg-ink);
}
.mw-content-container .vector-body {
padding: 1.25rem 1.5rem 2rem;
font-size: 1.05rem;
line-height: 1.6;
}
.vector-body:not(.mw-content-container .vector-body) {
background: none;
border: 0;
box-shadow: none;
}
/* one painted layer only: the wrappers stay bare */
.mw-body,
.mw-content-container .vector-body,
.vector-pinned-container,
.vector-pinned-container .vector-pinnable-element {
background: none;
border: 0;
box-shadow: none;
}
body .vector-pinned-container .vector-toc,
body .vector-pinned-container .vector-page-tools,
body .vector-pinned-container .vector-appearance,
body .vector-pinned-container .vector-main-menu {
background: var(--dg-panel);
border: 1px solid var(--dg-line);
box-shadow: 0 0 20px rgba(48, 232, 255, 0.06);
}
/* --- headings ----------------------------------------------------------- */
.mw-body h1,
.mw-first-heading,
.firstHeading,
.mw-page-title-main {
font-family: var(--dg-display);
font-weight: 700;
letter-spacing: 2px;
color: #fff;
text-shadow: 0 0 14px rgba(48, 232, 255, 0.55), 0 0 32px rgba(48, 232, 255, 0.2);
border-bottom: 1px solid var(--dg-line);
padding-bottom: 0.25em;
}
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
font-family: var(--dg-display);
font-weight: 600;
letter-spacing: 1.5px;
color: var(--dg-ink);
}
.mw-body h2 {
font-size: 1.25rem;
text-transform: uppercase;
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg, var(--dg-cyan), var(--dg-pink) 50%, transparent) 1;
padding-bottom: 0.2em;
margin-top: 1.6em;
}
.mw-body h3 {
font-size: 1rem;
color: var(--dg-cyan);
}
.vector-toc-text,
.vector-pinnable-header-label,
.vector-menu-heading {
font-family: var(--dg-display);
letter-spacing: 1px;
color: var(--dg-mute);
}
b,
strong {
color: #fff;
font-weight: 700;
}
/* --- links -------------------------------------------------------------- */
a,
.mw-body a,
.vector-toc a {
color: var(--dg-cyan);
}
a:visited,
.mw-body a:visited {
color: #b98aff;
}
a:hover,
.mw-body a:hover {
color: #8af4ff;
text-shadow: 0 0 10px rgba(48, 232, 255, 0.5);
}
a.new,
.mw-body a.new {
color: var(--dg-red);
}
a.external,
.mw-body a.external {
color: var(--dg-pink);
}
/* --- header, menus, tabs ------------------------------------------------ */
.vector-header-container,
.vector-header,
.mw-header,
.vector-sticky-header,
.vector-sticky-header-container {
background: linear-gradient(180deg, rgba(13, 8, 32, 0.98), rgba(7, 4, 15, 0.96));
border-bottom: 1px solid transparent;
border-image: linear-gradient(90deg, var(--dg-cyan), var(--dg-pink)) 1;
box-shadow: 0 2px 18px rgba(48, 232, 255, 0.12);
color: var(--dg-ink);
}
.vector-header-container,
.vector-header,
.mw-header,
.vector-header-end,
.vector-user-links,
.vector-user-links-main {
--background-color-base: transparent !important;
--background-color-base-fixed: transparent !important;
}
.vector-header-container a,
.vector-header-container button,
.vector-header-container .cdx-button,
.vector-header-container .vector-icon,
.vector-header-container .vector-dropdown-label-text,
.vector-header-container .mw-portlet a,
.vector-header-container .vector-menu-content a,
.vector-user-links a,
.vector-user-links .vector-dropdown-label-text,
.vector-sticky-header a {
color: var(--dg-ink);
}
.vector-header-container a:hover,
.vector-header-container button:hover {
color: var(--dg-cyan);
}
/* the icons are masks painted with the text colour, so they need the light colour too */
.vector-header-container .vector-icon,
.vector-sticky-header .vector-icon,
.vector-page-toolbar .vector-icon {
background-color: var(--dg-ink);
}
.vector-header-container .vector-menu,
.vector-header-container .vector-menu-content,
.vector-header-container .mw-portlet,
.vector-main-menu-container {
background: none;
border: 0;
box-shadow: none;
}
.vector-header-container .mw-logo-wordmark,
.mw-header .mw-logo-wordmark {
filter: drop-shadow(0 0 8px rgba(48, 232, 255, 0.5));
}
/* search */
.vector-header-container .cdx-text-input__input,
.vector-header-container .cdx-search-input__input-wrapper {
--background-color-base: #1a1236 !important;
background: var(--dg-input);
border: 1px solid var(--dg-line);
color: var(--dg-ink);
font-family: var(--dg-body);
}
.cdx-text-input__input::placeholder {
color: var(--dg-mute);
opacity: 1;
}
.cdx-search-input__end-button {
background: rgba(48, 232, 255, 0.1);
border: 1px solid var(--dg-line);
color: var(--dg-cyan);
font-family: var(--dg-display);
letter-spacing: 2px;
}
.cdx-search-input__end-button:hover {
background: rgba(48, 232, 255, 0.22);
color: #fff;
}
/* the side panels: contents, tools, appearance */
.vector-main-menu,
.vector-page-tools,
.vector-appearance,
.vector-toc,
.vector-column-start .vector-pinnable-element,
.vector-column-end .vector-pinnable-element,
#mw-panel {
background: var(--dg-panel);
color: var(--dg-ink);
}
body .vector-toc,
body .vector-main-menu,
body .vector-column-start .vector-pinnable-element,
body .vector-column-end .vector-pinnable-element,
body .vector-page-tools .vector-menu,
body .vector-appearance .vector-menu {
padding: 0.85rem 0.9rem;
}
body .vector-dropdown-content {
padding: 0.5rem 0.6rem;
}
body .vector-pinnable-header {
padding: 0 0 0.5rem;
margin-bottom: 0.5rem;
border-bottom: 1px solid var(--dg-line);
}
body .vector-toc-list-item,
body .vector-menu-content-list li {
padding: 0.15rem 0;
}
body .vector-appearance .cdx-field,
body .vector-settings .cdx-field {
margin-bottom: 0.75rem;
}
body .vector-page-toolbar,
body .vector-page-titlebar {
padding: 0 0.25rem;
}
.cdx-field,
.cdx-field__control,
.cdx-radio,
.cdx-checkbox,
.cdx-toggle-switch,
.vector-settings,
.vector-limited-width-toggle,
.vector-page-titlebar,
.vector-page-toolbar,
.vector-feature-zebra-design-enabled .mw-page-container,
.mw-table-of-contents-container,
.vector-toc-landmark {
background: transparent;
}
.cdx-radio__label,
.cdx-checkbox__label,
.cdx-label__label__text {
color: var(--dg-ink);
}
.vector-dropdown-content,
.cdx-menu {
background: var(--dg-panel2);
border: 1px solid var(--dg-line);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}
.vector-menu-content-list a,
.vector-toc-list-item a {
color: var(--dg-cyan);
}
.vector-toc .vector-toc-list-item-active > .vector-toc-link,
.vector-toc .vector-toc-list-item-active > .vector-toc-link .vector-toc-text {
color: #fff;
}
/* tabs */
.vector-page-toolbar,
.vector-page-titlebar {
border-bottom: 1px solid var(--dg-line);
}
.vector-tab-noicon a,
.vector-menu-tabs a,
#p-namespaces a {
font-family: var(--dg-display);
font-size: 0.8rem;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--dg-mute);
}
.vector-tab-noicon.selected a,
.vector-menu-tabs .selected a {
color: #fff;
border-bottom: 2px solid var(--dg-cyan);
}
/* --- widgets ------------------------------------------------------------ */
.cdx-button,
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
font-family: var(--dg-display);
letter-spacing: 1.5px;
background: rgba(48, 232, 255, 0.08);
border: 1px solid var(--dg-line);
color: var(--dg-ink);
}
.cdx-button:hover {
background: rgba(48, 232, 255, 0.18);
color: #fff;
}
.cdx-button--action-progressive.cdx-button--weight-primary {
background: linear-gradient(90deg, var(--dg-cyan), #4fb8ff);
border-color: transparent;
color: #061018;
}
.cdx-text-input__input,
.oo-ui-inputWidget-input,
input[type='text'],
input[type='search'],
textarea,
select {
background: var(--dg-input);
border: 1px solid var(--dg-line);
color: var(--dg-ink);
}
/* --- tables, the backbone of a stats wiki ------------------------------- */
table.wikitable {
background: rgba(13, 8, 32, 0.85);
border: 1px solid var(--dg-line);
color: var(--dg-ink);
border-collapse: collapse;
}
/* a table wider than the column scrolls on its own instead of squeezing its last columns to a word a line */
.mw-parser-output table.wikitable {
display: block;
width: fit-content;
max-width: 100%;
overflow-x: auto;
}
/* the hull tables: six stat columns of two-figure numbers, kept tight */
body table.wikitable.dg-hulls > * > tr > th {
font-size: 0.64rem;
letter-spacing: 0.5px;
padding: 0.45em 0.35em;
}
/* (the sort arrow's room, narrowed from the skin's 21px) */
html.client-js body table.wikitable.dg-hulls.sortable > * > tr:first-child > th:not(.unsortable) {
padding-right: 13px;
background-position: right 2px center;
}
body table.wikitable.dg-hulls > * > tr > td {
padding: 0.3em 0.45em;
}
body table.wikitable.dg-hulls > * > tr > td:nth-child(n+3):nth-child(-n+8) {
text-align: center;
}
table.wikitable small {
color: var(--dg-mute);
font-size: 0.85em;
}
table.wikitable > * > tr > th {
background: linear-gradient(180deg, #1e1446, #150d34);
border: 1px solid var(--dg-line);
font-family: var(--dg-display);
font-size: 0.72rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--dg-cyan);
padding: 0.45em 0.6em;
}
table.wikitable > * > tr > td {
border: 1px solid rgba(48, 232, 255, 0.14);
padding: 0.35em 0.6em;
vertical-align: middle;
}
table.wikitable > * > tr:nth-child(even) > td {
background: rgba(138, 92, 255, 0.07);
}
table.wikitable > * > tr:hover > td {
background: rgba(48, 232, 255, 0.07);
}
/* the sort arrows are dark glyphs by default */
table.jquery-tablesorter th.headerSort {
background-blend-mode: normal;
}
table.jquery-tablesorter th.headerSort::after {
filter: invert(1);
}
/* --- boxes and code ----------------------------------------------------- */
.mw-message-box,
.cdx-message {
background: var(--dg-input);
border: 1px solid var(--dg-line);
color: var(--dg-ink);
}
pre,
code,
.mw-code {
background: var(--dg-input);
border: 1px solid var(--dg-line);
color: var(--dg-lime);
}
blockquote {
border-left: 3px solid var(--dg-pink);
background: rgba(255, 63, 176, 0.06);
color: var(--dg-ink);
font-style: italic;
margin: 1em 0;
padding: 0.6em 1em;
}
hr {
border: 0;
border-top: 1px solid var(--dg-line);
}
/* --- footer ------------------------------------------------------------- */
.mw-footer,
.vector-footer {
background: transparent;
border-top: 1px solid var(--dg-line);
color: var(--dg-mute);
font-size: 0.9rem;
}
/* --- infoboxes ---------------------------------------------------------- */
.dg-infobox {
float: right;
clear: right;
width: 300px;
margin: 0 0 1rem 1.25rem;
background: linear-gradient(160deg, #1a1040, #0d0820);
border: 1px solid var(--dg-line);
box-shadow: 0 0 24px rgba(48, 232, 255, 0.12), inset 0 0 0 1px rgba(255, 63, 176, 0.12);
font-size: 0.95rem;
clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}
.dg-infobox .dg-infobox-title {
font-family: var(--dg-display);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
background: linear-gradient(90deg, rgba(48, 232, 255, 0.18), rgba(255, 63, 176, 0.18));
border-bottom: 1px solid var(--dg-line);
padding: 0.5rem 0.75rem 0.5rem 1rem;
text-align: center;
color: #fff;
text-shadow: 0 0 10px rgba(48, 232, 255, 0.6);
}
.dg-infobox .dg-infobox-image {
text-align: center;
padding: 0.6rem;
border-bottom: 1px solid rgba(48, 232, 255, 0.14);
}
.dg-infobox .dg-infobox-image img {
max-width: 100%;
max-height: 260px;
height: auto;
}
.dg-infobox table {
width: 100%;
border-collapse: collapse;
}
.dg-infobox th {
text-align: left;
vertical-align: top;
font-family: var(--dg-display);
font-size: 0.68rem;
font-weight: 600;
letter-spacing: 1.5px;
text-transform: uppercase;
color: var(--dg-mute);
padding: 0.35rem 0.4rem 0.35rem 0.75rem;
white-space: nowrap;
}
.dg-infobox td {
padding: 0.3rem 0.75rem 0.3rem 0.4rem;
}
.dg-infobox tr + tr > * {
border-top: 1px solid rgba(48, 232, 255, 0.08);
}
/* --- pictures from the game --------------------------------------------- */
.dg-icon img {
width: 48px;
height: 48px;
object-fit: contain;
vertical-align: middle;
}
/* a bigger icon, for a cup's crate and case side by side */
.dg-icon-l img {
width: 120px;
height: 120px;
}
/* a hull in a table: the wide three-quarter render */
.dg-hull img {
width: 112px;
height: 70px;
object-fit: contain;
vertical-align: middle;
}
/* a track's card in a table */
.dg-card img {
width: 120px;
height: 68px;
object-fit: cover;
vertical-align: middle;
border: 1px solid var(--dg-line);
}
/* a trail or glow: the game's own swatch, twice as wide as tall */
.dg-light img {
width: 80px;
height: 40px;
vertical-align: middle;
}
.dg-thumb img {
max-width: 100%;
height: auto;
}
.dg-hero {
line-height: 0;
margin: 0 0 1.2rem;
border: 1px solid var(--dg-line);
box-shadow: 0 0 40px rgba(48, 232, 255, 0.2);
}
.dg-hero img {
width: 100%;
height: auto;
max-height: 360px;
object-fit: cover;
}
/* the front page's four columns */
table.dg-front {
width: 100%;
border-collapse: separate;
border-spacing: 10px;
margin: 0 -10px;
}
table.dg-front td {
vertical-align: top;
width: 25%;
background: rgba(13, 8, 32, 0.85);
border: 1px solid var(--dg-line);
padding: 0.8rem 1rem;
line-height: 1.9;
}
table.dg-front td b {
font-family: var(--dg-display);
font-size: 0.78rem;
letter-spacing: 2px;
text-transform: uppercase;
color: var(--dg-pink);
}
/* --- rarity ------------------------------------------------------------- */
/* the game's five tiers (TIERS in data.js, --t0 to --t4 in ui.css), drawn by Template:Tier */
.dg-tier {
display: inline-block;
font-family: var(--dg-display);
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
padding: 0.12rem 0.45rem;
border: 1px solid currentColor;
border-radius: 2px;
white-space: nowrap;
vertical-align: middle;
background: rgba(7, 4, 15, 0.6);
}
.dg-tier-0 { color: #b8bcc8; }
.dg-tier-1 { color: #4fe06a; box-shadow: 0 0 8px rgba(79, 224, 106, 0.25); }
.dg-tier-2 { color: #4a9dff; box-shadow: 0 0 8px rgba(74, 157, 255, 0.3); }
.dg-tier-3 { color: #b86bff; box-shadow: 0 0 10px rgba(184, 107, 255, 0.35); }
.dg-tier-4 { color: #ff8f1f; box-shadow: 0 0 12px rgba(255, 143, 31, 0.45); }
/* --- hover previews ----------------------------------------------------- */
/* Popups is built for photographs on white: a cropped thumbnail and a white fade. Repainted on the
game's glass. Its fade rule is qualified by writing direction and inlined after site styles, so the
override needs both the [dir] qualifier and the body.mediawiki prefix. */
.mwe-popups {
background: var(--dg-panel2);
border: 1px solid var(--dg-line);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6), 0 0 20px rgba(48, 232, 255, 0.12);
color: var(--dg-ink);
}
.mwe-popups .mwe-popups-container,
.mwe-popups .mwe-popups-extract {
color: var(--dg-ink);
}
.mwe-popups .mwe-popups-extract b {
color: #fff;
}
.mwe-popups .mwe-popups-thumbnail {
object-fit: contain;
background: var(--dg-bg2);
border-bottom: 1px solid var(--dg-line);
padding: 0.5rem;
box-sizing: border-box;
}
.mwe-popups.mwe-popups-is-tall .mwe-popups-thumbnail {
border-bottom: 0;
border-right: 1px solid var(--dg-line);
}
.mwe-popups.mwe-popups-no-image-tri::before,
.mwe-popups.mwe-popups-no-image-tri::after {
border-bottom-color: var(--dg-panel2);
}
.mwe-popups.flipped-y::before,
.mwe-popups.flipped-y::after,
.mwe-popups.flipped-x-y::before,
.mwe-popups.flipped-x-y::after {
border-top-color: var(--dg-panel2);
}
.mwe-popups .mwe-popups-settings-button {
display: none;
}
body.mediawiki .mwe-popups .mwe-popups-extract[dir="ltr"]::after,
body.mediawiki .mwe-popups .mwe-popups-extract[dir="rtl"]::after {
display: none;
}
/* --- Play Now, if the header carries one (a dg-play list item) ---------- */
body.mediawiki .dg-play a.cdx-button {
background: linear-gradient(90deg, var(--dg-cyan), #4fb8ff);
color: #061018;
border: 0;
font-family: var(--dg-display);
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
padding: 0.35rem 1rem;
white-space: nowrap;
box-shadow: 0 0 18px rgba(48, 232, 255, 0.45);
}
body.mediawiki .dg-play a.cdx-button:hover,
body.mediawiki .dg-play a.cdx-button:focus {
background: linear-gradient(90deg, var(--dg-pink), #ff6ad0);
color: #1a0612;
}
body.mediawiki .dg-play.user-links-collapsible-item {
display: list-item;
}
/* --- phones ------------------------------------------------------------- */
@media (max-width: 720px) {
.dg-infobox {
float: none;
width: auto;
margin: 0 0 1rem;
}
table.dg-front,
table.dg-front tbody,
table.dg-front tr,
table.dg-front td {
display: block;
width: auto;
}
table.dg-front {
margin: 0;
border-spacing: 0;
}
table.dg-front td {
margin-bottom: 10px;
}
.mw-content-container .vector-body {
padding: 1rem;
}
}
/* the front page: each section's links with their pictures (frontTable in tools/wiki-seed.mjs) */
.dg-front-l { display: flex; align-items: center; gap: 10px; margin: 4px 0; }
.dg-front-l .dg-icon img { width: 32px; height: 32px; border-radius: 4px; }