MediaWiki:Common.css
From Rise of Agon Wiki
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); }
}