MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 240: | Line 240: | ||
.mw-indicators { color: var(--akka-text-mute); } | .mw-indicators { color: var(--akka-text-mute); } | ||
.mw-jump-link { color: var(--akka-accent-blue); } | .mw-jump-link { color: var(--akka-accent-blue); } | ||
/* Dropdown labels acting as fake buttons (Tools dropdown, TOC toggle, etc.). | |||
These are LABEL elements with cdx-button classes — vendor sets dark color | |||
that doesn't fall through our .cdx-button selectors. */ | |||
body.skin-vector-2022 label.cdx-button, | |||
body.skin-vector-2022 label.vector-dropdown-label, | |||
body.skin-vector-2022 .vector-page-titlebar label, | |||
body.skin-vector-2022 .vector-page-titlebar .vector-icon, | |||
body.skin-vector-2022 .vector-toc-collapse-button, | |||
body.skin-vector-2022 .vector-toc-pinnable-header label, | |||
body.skin-vector-2022 .vector-page-toolbar label, | |||
body.skin-vector-2022 .vector-dropdown-label-text { | |||
color: var(--akka-text) !important; | |||
} | |||
body.skin-vector-2022 label.cdx-button:hover, | |||
body.skin-vector-2022 label.vector-dropdown-label:hover, | |||
body.skin-vector-2022 .vector-page-titlebar label:hover { color: var(--akka-accent) !important; } | |||
Revision as of 04:56, 10 May 2026
/* ==========================================================================
AKKA Game Studios — wiki theme
Cosmic Editorial palette + Fraunces/Inter typography matching akkadev.games.
Skin: Vector 2022. Edit in MediaWiki:Common.css.
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Fraunces:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&display=swap');
:root {
--akka-bg: #060810;
--akka-bg-deep: #04050b;
--akka-surface: #11151f;
--akka-surface-2: #161b27;
--akka-line: #1d2334;
--akka-line-bright: #2d3548;
--akka-text: #f4eed7;
--akka-text-mute: #c8cee0;
--akka-text-faint: #8c92a6;
--akka-accent: #f6c91e;
--akka-accent-blue: #4d8cf5;
--akka-cta-hi: #2f7af5;
--akka-cta-lo: #1f5fcf;
--akka-display: 'Fraunces', 'Bodoni Moda', Georgia, serif;
--akka-smcp: 'Space Grotesk', sans-serif;
--akka-body: 'Inter', system-ui, -apple-system, sans-serif;
}
/* Global body --------------------------------------------------------- */
html, body { background: var(--akka-bg); }
body {
color: var(--akka-text);
font-family: var(--akka-body);
font-size: 15px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
.mw-page-container,
.mw-page-container-inner,
body.skin-vector-2022 .mw-page-container { background: transparent; }
/* Header (top bar) ---------------------------------------------------- */
.vector-header-container,
.vector-header {
background: var(--akka-bg-deep) !important;
border-bottom: 1px solid var(--akka-line);
color: var(--akka-text);
}
/* Logo: img element. content: trick to swap source via CSS only. */
.mw-logo-icon {
content: url('https://akkadev.games/assets/akka-mark-history.svg');
width: 56px !important;
height: 56px !important;
object-fit: contain;
}
.mw-logo-wordmark,
.mw-logo .mw-logo-wordmark {
color: var(--akka-text) !important;
font-family: var(--akka-display);
font-weight: 600;
letter-spacing: -0.01em;
}
.mw-logo-container.skin-invert { filter: none; }
/* Header text + icons */
.vector-header a,
.vector-header-end a,
.vector-header .cdx-button { color: var(--akka-text-mute); }
.vector-header a:hover,
.vector-header .cdx-button:hover { color: var(--akka-text); }
/* Icons — make them inherit text color so they show up on dark bg.
Vector 2022 uses CSS masks with background-color for icons. MW default is
dark which becomes invisible against our dark header. */
.vector-icon,
.mw-ui-icon-element,
[class*="mw-ui-icon-"] { background-color: currentColor !important; }
.cdx-icon { color: inherit; fill: currentColor; }
.cdx-button .cdx-icon { fill: currentColor; }
/* Search input */
.cdx-text-input__input,
.vector-search-box input {
background: var(--akka-surface);
color: var(--akka-text);
border-color: var(--akka-line-bright);
}
.cdx-text-input__input::placeholder { color: var(--akka-text-faint); }
/* Sidebar / main menu (vector-2022 left rail) ------------------------- */
.vector-main-menu-container,
.vector-main-menu,
.vector-pinnable-element { background: var(--akka-bg-deep); border-color: var(--akka-line); }
.vector-main-menu-link, .vector-menu a, .mw-portlet a { color: var(--akka-text-mute); }
.vector-main-menu-link:hover, .vector-menu a:hover, .mw-portlet a:hover { color: var(--akka-text); background: var(--akka-surface); }
.vector-main-menu h3,
.mw-portlet-label,
.vector-menu-heading {
color: var(--akka-accent);
font-family: var(--akka-smcp);
text-transform: uppercase;
letter-spacing: 0.16em;
font-size: 11px;
font-weight: 700;
}
/* Main content card --------------------------------------------------- */
.mw-body,
.mw-body-content {
background: var(--akka-surface);
color: var(--akka-text);
border-radius: 14px;
border: 1px solid var(--akka-line);
padding: clamp(1.5rem, 3vw, 2.25rem);
}
.mw-body-header { border-bottom: 1px solid var(--akka-line); padding-bottom: 0.75rem; margin-bottom: 1rem; }
/* Headings ------------------------------------------------------------ */
.mw-body h1, .mw-body h2, .mw-body h3, .mw-body h4, .mw-body h5, .mw-body h6,
#firstHeading {
font-family: var(--akka-display);
color: var(--akka-text);
font-weight: 500;
letter-spacing: -0.02em;
border-color: var(--akka-line);
}
#firstHeading { font-size: clamp(2rem, 4vw, 2.6rem); }
.mw-body h2 { font-size: 1.6rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--akka-line); }
.mw-body h3 { font-size: 1.25rem; }
/* Body text ----------------------------------------------------------- */
.mw-body p, .mw-body li, .mw-body dt, .mw-body dd { color: var(--akka-text); }
.mw-body p { margin: 0 0 1rem; }
/* Links --------------------------------------------------------------- */
.mw-body a, .mw-parser-output a { color: var(--akka-accent-blue); }
.mw-body a:hover, .mw-parser-output a:hover { color: var(--akka-accent); text-decoration: underline; }
.mw-body a.new, .mw-parser-output a.new { color: #f06a3a !important; }
.mw-body a.external::after { display: none; }
/* Page tabs (Read/Edit/View history/Tools) — Vector 2022.
The skin defines selected tabs with high-specificity rules + !important
that target a.mw-list-item__link and similar nested selectors. We use
body.skin-vector-2022 prefix and target both possible link patterns. */
body.skin-vector-2022 .vector-menu-tabs li,
body.skin-vector-2022 .vector-menu-tabs li a,
body.skin-vector-2022 .vector-menu-tabs li a:visited,
body.skin-vector-2022 li.vector-tab-noicon,
body.skin-vector-2022 li.vector-tab-noicon a,
body.skin-vector-2022 li.vector-tab-noicon a:visited,
body.skin-vector-2022 li.vector-tab-noicon a.mw-list-item__link,
body.skin-vector-2022 li.vector-tab-noicon.selected a,
body.skin-vector-2022 li.vector-tab-noicon.selected a:visited,
body.skin-vector-2022 li.vector-tab-noicon.selected a.mw-list-item__link,
body.skin-vector-2022 .vector-page-toolbar a,
body.skin-vector-2022 .vector-page-toolbar .cdx-tab,
body.skin-vector-2022 .cdx-tab,
body.skin-vector-2022 .cdx-tab a {
color: var(--akka-text) !important;
background: transparent !important;
}
body.skin-vector-2022 li.vector-tab-noicon a:hover,
body.skin-vector-2022 .cdx-tab:hover { color: var(--akka-accent) !important; }
body.skin-vector-2022 li.selected.vector-tab-noicon,
body.skin-vector-2022 .vector-menu-tabs li.selected {
border-bottom: 2px solid var(--akka-accent) !important;
}
body.skin-vector-2022 li.selected.vector-tab-noicon a,
body.skin-vector-2022 .vector-menu-tabs li.selected a {
font-weight: 600 !important;
}
/* Red links for missing pages stay distinct */
body.skin-vector-2022 li.new.vector-tab-noicon a,
body.skin-vector-2022 li.new.vector-tab-noicon a:visited,
body.skin-vector-2022 li.new.vector-tab-noicon a.mw-list-item__link { color: #f06a3a !important; }
/* Buttons ------------------------------------------------------------- */
.cdx-button.cdx-button--action-progressive,
.cdx-button--action-progressive {
background: linear-gradient(180deg, var(--akka-cta-hi) 0%, var(--akka-cta-lo) 100%) !important;
color: #fff !important;
border-color: var(--akka-cta-lo) !important;
}
.cdx-button--weight-quiet { color: var(--akka-text-mute); background: transparent; }
.cdx-button--weight-quiet:hover { color: var(--akka-text); background: var(--akka-surface); }
/* Tables -------------------------------------------------------------- */
.mw-body table, .wikitable {
background: var(--akka-surface-2);
color: var(--akka-text);
border-color: var(--akka-line-bright);
}
.wikitable th { background: var(--akka-bg-deep); color: var(--akka-accent); border-color: var(--akka-line-bright); }
.wikitable td, .wikitable th { border-color: var(--akka-line); }
/* Code blocks --------------------------------------------------------- */
code, pre {
background: var(--akka-bg-deep);
color: var(--akka-text);
border: 1px solid var(--akka-line);
border-radius: 6px;
font-family: 'Space Grotesk', monospace;
}
/* TOC ----------------------------------------------------------------- */
.toc, .mw-pt-translate-header { background: var(--akka-surface-2); border: 1px solid var(--akka-line); border-radius: 10px; }
/* Footer -------------------------------------------------------------- */
.mw-footer-container,
#footer,
.mw-footer {
background: var(--akka-bg-deep);
color: var(--akka-text-mute);
border-top: 1px solid var(--akka-line);
}
.mw-footer a { color: var(--akka-accent-blue); }
.mw-footer a:hover { color: var(--akka-accent); }
/* "Powered by MediaWiki" badge — invert + dim */
.mw-footer .noprint a img,
#footer .noprint a img,
.mw-footer-icons img {
filter: invert(1) hue-rotate(180deg) brightness(0.85);
opacity: 0.55;
transition: opacity 140ms ease;
}
.mw-footer .noprint a:hover img,
.mw-footer-icons:hover img { opacity: 0.95; }
/* Edit mode form ------------------------------------------------------ */
#wpTextbox1 {
background: var(--akka-bg-deep);
color: var(--akka-text);
border: 1px solid var(--akka-line-bright);
font-family: 'Space Grotesk', monospace;
}
/* Misc ---------------------------------------------------------------- */
hr { border-color: var(--akka-line); }
.mw-indicators { color: var(--akka-text-mute); }
.mw-jump-link { color: var(--akka-accent-blue); }
/* Dropdown labels acting as fake buttons (Tools dropdown, TOC toggle, etc.).
These are LABEL elements with cdx-button classes — vendor sets dark color
that doesn't fall through our .cdx-button selectors. */
body.skin-vector-2022 label.cdx-button,
body.skin-vector-2022 label.vector-dropdown-label,
body.skin-vector-2022 .vector-page-titlebar label,
body.skin-vector-2022 .vector-page-titlebar .vector-icon,
body.skin-vector-2022 .vector-toc-collapse-button,
body.skin-vector-2022 .vector-toc-pinnable-header label,
body.skin-vector-2022 .vector-page-toolbar label,
body.skin-vector-2022 .vector-dropdown-label-text {
color: var(--akka-text) !important;
}
body.skin-vector-2022 label.cdx-button:hover,
body.skin-vector-2022 label.vector-dropdown-label:hover,
body.skin-vector-2022 .vector-page-titlebar label:hover { color: var(--akka-accent) !important; }