MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 191: | Line 191: | ||
} | } | ||
/* | /* Icons — make them inherit text color so they show up on dark bg. | ||
.cdx-icon { color: inherit; } | 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; } | .cdx-button .cdx-icon { fill: currentColor; } | ||
Revision as of 04:50, 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,
.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; }
.mw-logo-container .mw-logo-wordmark { color: var(--akka-text) !important; }
/* Header buttons / 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); }
.vector-header .cdx-icon { fill: var(--akka-text-mute); color: var(--akka-text-mute); }
.vector-header .cdx-icon:hover { fill: var(--akka-text); color: var(--akka-text); }
/* 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,
.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 vector-tab-noicon */
.vector-tab-noicon,
li.vector-tab-noicon,
.vector-tab-noicon a,
li.vector-tab-noicon a {
color: var(--akka-text-mute) !important;
background: transparent !important;
}
.vector-tab-noicon a:hover,
li.vector-tab-noicon a:hover { color: var(--akka-text) !important; }
li.selected.vector-tab-noicon a,
.selected.vector-tab-noicon a {
color: var(--akka-text) !important;
}
li.selected.vector-tab-noicon {
border-bottom: 2px solid var(--akka-accent) !important;
}
/* Tools dropdown trigger + secondary action buttons */
#vector-page-tools-dropdown,
.vector-page-tools-pinnable-element,
.vector-page-actions-pinnable-element,
.vector-page-toolbar .cdx-button,
.cdx-tab { color: var(--akka-text-mute); }
.vector-page-toolbar .cdx-button:hover,
.cdx-tab:hover { color: var(--akka-text); }
/* TOC toggle on title bar */
.vector-toc-collapse-button,
.vector-page-titlebar-toc { color: var(--akka-text-mute); fill: var(--akka-text-mute); }
/* Hamburger / page-tools toggle icons */
.mw-checkbox-hack-button,
.vector-pinnable-header-toggle-button { color: var(--akka-text-mute); fill: var(--akka-text-mute); }
.mw-checkbox-hack-button:hover { color: var(--akka-text); fill: var(--akka-text); }
/* 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;
}
/* Quiet buttons in sidebar/header */
.cdx-button--weight-quiet {
color: var(--akka-text-mute);
background: transparent;
}
.cdx-button--weight-quiet:hover {
color: var(--akka-text);
background: var(--akka-surface);
}
/* 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; }
/* 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. The badge img is in the
.mw-footer .noprint section. */
.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,
#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;
}
.editButtons input, .editOptions input { color: var(--akka-text); }
/* Misc ---------------------------------------------------------------- */
hr { border-color: var(--akka-line); }
.mw-indicators { color: var(--akka-text-mute); }
.mw-jump-link { color: var(--akka-accent-blue); }