MediaWiki:Common.css: Difference between revisions

Revision as of 03:06, 4 April 2026

/* ===== OHMS Wiki theme ===== */

:root {
  --ohms-bg: #0d0f14;
  --ohms-surface: #1a1d24;
  --ohms-surface-2: #11141a;
  --ohms-text: #f3f4f6;
  --ohms-text-soft: #9ca3af;
  --ohms-red: #d91e00;
  --ohms-red-dark: #b31800;
  --ohms-trim: #24364d;
  --ohms-border: #2a3240;
}

/* Base */
html,
body {
  background: var(--ohms-bg) !important;
  color: var(--ohms-text) !important;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

/* Links */
a,
.mw-parser-output a {
  color: var(--ohms-red) !important;
}

a:visited,
.mw-parser-output a:visited {
  color: #ff5a3d !important;
}

a:hover,
.mw-parser-output a:hover {
  color: #ff6a4f !important;
  text-decoration: underline;
}

/* Main containers */
#content,
.mw-body,
.mw-page-container,
.vector-body,
.skin-minerva .content,
#mw-content-text,
.mw-parser-output {
  background: var(--ohms-bg) !important;
  color: var(--ohms-text) !important;
  border: none !important;
  box-shadow: none !important;
}

/* Header / nav */
#mw-navigation,
.vector-header,
.minerva-header,
#p-navigation,
#p-personal,
#left-navigation,
#right-navigation,
header,
nav {
  background: var(--ohms-surface-2) !important;
  color: var(--ohms-text) !important;
  border-bottom: 1px solid var(--ohms-trim) !important;
}

/* Footer */
#footer,
.mw-footer {
  background: var(--ohms-surface-2) !important;
  color: var(--ohms-text-soft) !important;
  border-top: 1px solid var(--ohms-trim) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.firstHeading,
#firstHeading {
  color: var(--ohms-text) !important;
  font-weight: 800;
  letter-spacing: -0.02em;
}

h2,
h3 {
  border-bottom: 1px solid var(--ohms-trim) !important;
  padding-bottom: 8px;
}

/* Secondary text */
.mw-body-content,
#siteSub,
#contentSub,
.mw-credits,
.mw-footer-info,
.mw-ui-quiet,
.mw-comment,
small {
  color: var(--ohms-text-soft) !important;
}

/* Buttons */
button,
input[type="submit"],
input[type="button"],
.mw-ui-button,
a.mw-ui-button {
  background: var(--ohms-red) !important;
  color: #ffffff !important;
  border: none !important;
  border-radius: 14px !important;
  padding: 10px 18px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.mw-ui-button:hover,
a.mw-ui-button:hover {
  background: var(--ohms-red-dark) !important;
  color: #ffffff !important;
}

/* Inputs */
input,
textarea,
select {
  background: var(--ohms-surface) !important;
  color: var(--ohms-text) !important;
  border: 1px solid var(--ohms-border) !important;
  border-radius: 12px !important;
  box-shadow: none !important;
}

input:focus,
textarea:focus,
select:focus {
  outline: none !important;
  border-color: var(--ohms-red) !important;
}

/* Tables / infoboxes / wiki boxes */
table,
.wikitable,
.infobox,
.thumbinner,
.mw-message-box,
pre,
code {
  background: var(--ohms-surface) !important;
  color: var(--ohms-text) !important;
  border: 1px solid var(--ohms-trim) !important;
  border-radius: 18px !important;
}

th,
td {
  border-color: var(--ohms-border) !important;
}

th {
  background: var(--ohms-surface-2) !important;
  color: var(--ohms-text) !important;
}

/* Page tabs / menus */
.vector-menu,
.vector-tab-noicon,
.vector-pinnable-element,
.portal,
.mw-portlet {
  background: transparent !important;
  color: var(--ohms-text) !important;
}

/* Lists and page text */
.mw-body-content {
  font-size: 17px;
  line-height: 1.75;
}

/* Category / special page boxes */
.catlinks,
#toc,
.toc,
.mw-warning,
.notice,
.successbox,
.errorbox {
  background: var(--ohms-surface) !important;
  color: var(--ohms-text) !important;
  border: 1px solid var(--ohms-trim) !important;
  border-radius: 18px !important;
}

/* Search */
#searchInput,
.cdx-text-input__input {
  background: var(--ohms-surface) !important;
  color: var(--ohms-text) !important;
  border: 1px solid var(--ohms-border) !important;
}

/* Red accent on important labels */
.mw-parser-output .mw-headline,
.vector-tab-noicon a,
.minerva__tab,
#p-personal a:hover,
#mw-panel a:hover {
  color: var(--ohms-red) !important;
}

/* Images */
img {
  border-radius: 12px;
}

/* Make cards/boxes feel like the app */
.thumbinner,
.infobox,
.wikitable,
.catlinks,
#toc,
.toc,
.mw-message-box {
  overflow: hidden;
}

/* Mobile feel */
.skin-minerva .minerva-header,
.skin-minerva .content {
  background: var(--ohms-bg) !important;
  color: var(--ohms-text) !important;
}