MediaWiki:Common.css

From Rise of Agon Wiki
Revision as of 06:37, 24 January 2026 by Admin (talk | contribs) (Add fantasy Vector theme)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)

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.
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:wght@400;600;700&display=swap');

:root {
  --ink: #0f1b2c;
  --ink-soft: #1b2941;
  --parchment: #f7f0df;
  --parchment-strong: #e6d9b8;
  --gold: #d8a657;
  --gold-strong: #c48b2e;
  --accent: #5c7c9b;
  --glow: rgba(216, 166, 87, 0.25);
}

body {
  font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
  background: radial-gradient(circle at 20% 20%, rgba(216, 166, 87, 0.08), transparent 35%),
    radial-gradient(circle at 80% 0%, rgba(92, 124, 155, 0.12), transparent 45%),
    linear-gradient(145deg, #f5ecd7 0%, #efe3c6 35%, #e4d5b4 100%);
  color: var(--ink);
}

#content {
  background: #fffaf0;
  border: 1px solid #d8caa6;
  box-shadow: 0 12px 30px -14px rgba(15, 27, 44, 0.35), 0 0 0 1px rgba(216, 166, 87, 0.2);
  border-radius: 10px;
  padding: 18px 22px;
}

#mw-page-base, #mw-head-base { background: transparent; }

#mw-head, #p-personal, #left-navigation, #right-navigation, #mw-panel {
  background: none;
}

.vector-body .mw-body-header h1, .firstHeading {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: var(--ink);
  text-shadow: 0 2px 6px rgba(15, 27, 44, 0.18);
}

h2, h3, h4 {
  font-family: 'Playfair Display', 'Times New Roman', serif;
  color: var(--ink);
  border-bottom: 1px solid rgba(216, 166, 87, 0.45);
}

.mw-body a {
  color: #274b6d;
}
.mw-body a:visited { color: #2f3f5a; }
.mw-body a:hover { color: var(--gold-strong); text-decoration: none; }

.vector-menu-tabs, .vector-menu-tabs li a {
  background: transparent;
}
.vector-menu-tabs li a {
  border: 1px solid transparent;
  border-bottom: 2px solid transparent;
  padding: 6px 12px;
  font-weight: 600;
}
.vector-menu-tabs li.selected a, .vector-menu-tabs li a:hover {
  border-color: rgba(216, 166, 87, 0.6);
  background: rgba(216, 166, 87, 0.08);
  color: var(--ink);
}

#mw-panel {
  background: rgba(15, 27, 44, 0.75);
  color: #e9e3d8;
  border-right: 1px solid rgba(216, 166, 87, 0.35);
}
#mw-panel a { color: #f1e4c8; }
#mw-panel a:hover { color: var(--gold); }

#p-logo a { filter: drop-shadow(0 2px 4px rgba(0,0,0,0.25)); }

/* Tables */
.wikitable {
  background: #fffaf0;
  border: 1px solid #d5c6a4;
  box-shadow: inset 0 0 0 1px rgba(216, 166, 87, 0.12);
}
.wikitable th {
  background: linear-gradient(135deg, rgba(216, 166, 87, 0.65), rgba(216, 166, 87, 0.5));
  color: #0f1b2c;
  font-family: 'Playfair Display', 'Times New Roman', serif;
  font-weight: 700;
}
.wikitable td { border-color: #d5c6a4; }

/* Infobox-style tables */
.infobox, .portable-infobox {
  border: 1px solid #d5c6a4;
  background: #fffaf5;
  box-shadow: 0 6px 18px -10px rgba(15, 27, 44, 0.35), 0 0 0 1px rgba(216, 166, 87, 0.18);
}
.infobox th, .infobox td { border-color: #d5c6a4; }

/* Buttons */
.mw-ui-button, .mw-ui-button.mw-ui-progressive {
  background: linear-gradient(135deg, #d8a657, #c48b2e);
  border: 1px solid #b0741e;
  color: #0f1b2c;
  box-shadow: 0 6px 12px -6px rgba(15, 27, 44, 0.4);
}
.mw-ui-button:hover { filter: brightness(1.05); }
.mw-ui-button.mw-ui-destructive {
  background: linear-gradient(135deg, #a23f3f, #7a2d2d);
  border-color: #6a2424;
  color: #f9ede0;
}

/* Links and nav extras */
.mw-body .hatnote { color: #3b5574; }
.mw-body .toc { background: #fff7e6; border: 1px solid #d8caa6; }

/* Search box */
#p-search input {
  border-radius: 999px;
  border: 1px solid rgba(15, 27, 44, 0.2);
  padding: 6px 12px;
}

/* Footer */
#footer {
  background: rgba(15, 27, 44, 0.82);
  color: #e5dcc7;
  border-top: 1px solid rgba(216, 166, 87, 0.35);
}
#footer a { color: var(--gold); }

/* Main page tables: add gentle hover */
.wikitable tr:hover { background: rgba(216, 166, 87, 0.08); }

/* Code blocks */
pre, code { background: #f1e8d3; border: 1px solid #d5c6a4; }

/* Mobile tweaks */
@media (max-width: 980px) {
  #content { border-radius: 0; box-shadow: none; padding: 16px; }
  #mw-panel { background: rgba(15, 27, 44, 0.92); }
}