|
|
| Line 1: |
Line 1: |
| @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Source+Sans+3:wght@400;600;700&display=swap');
| | /* Append to existing Common.css */ |
|
| |
|
| :root {
| | /* Leaflet Map Container */ |
| --ink: #0f1b2c;
| | .agon-map-container { |
| --ink-soft: #1b2941; | | width: 100%; |
| --parchment: #f7f0df; | | height: 600px; |
| --parchment-strong: #e6d9b8; | | border: 2px solid #d8a657; |
| --gold: #d8a657; | | border-radius: 8px; |
| --gold-strong: #c48b2e; | | margin: 20px 0; |
| --accent: #5c7c9b; | | position: relative; |
| --glow: rgba(216, 166, 87, 0.25); | | background: #1b2941; |
| } | | } |
|
| |
|
| body {
| | #agon-world-map { |
| font-family: 'Source Sans 3', 'Helvetica Neue', Arial, sans-serif;
| | width: 100%; |
| background: radial-gradient(circle at 20% 20%, rgba(216, 166, 87, 0.08), transparent 35%), | | height: 100%; |
| 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 {
| | .leaflet-container { |
| background: #fffaf0; | | background: #1b2941; |
| border: 1px solid #d8caa6; | | font-family: 'Source Sans 3', sans-serif; |
| 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; }
| | .leaflet-popup-content-wrapper { |
| | | background: #fffaf0; |
| #mw-head, #p-personal, #left-navigation, #right-navigation, #mw-panel {
| | border: 1px solid #d8a657; |
| background: none;
| | border-radius: 6px; |
| | box-shadow: 0 8px 20px rgba(15, 27, 44, 0.4); |
| } | | } |
|
| |
|
| .vector-body .mw-body-header h1, .firstHeading { | | .leaflet-popup-content { |
| font-family: 'Playfair Display', 'Times New Roman', serif; | | font-family: 'Source Sans 3', sans-serif; |
| font-weight: 700;
| | color: #0f1b2c; |
| letter-spacing: 0.5px;
| |
| color: var(--ink); | |
| text-shadow: 0 2px 6px rgba(15, 27, 44, 0.18);
| |
| } | | } |
|
| |
|
| h2, h3, h4 {
| | .leaflet-popup-content h3 { |
| font-family: 'Playfair Display', 'Times New Roman', serif; | | font-family: 'Playfair Display', serif; |
| color: var(--ink); | | color: #0f1b2c; |
| | margin-top: 0; |
| border-bottom: 1px solid rgba(216, 166, 87, 0.45); | | border-bottom: 1px solid rgba(216, 166, 87, 0.45); |
| | padding-bottom: 5px; |
| } | | } |
|
| |
|
| .mw-body a { | | .leaflet-popup-tip { |
| 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; | | 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 */
| | .marker-info { |
| .infobox, .portable-infobox {
| | max-width: 300px; |
| 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 */
| | .marker-info strong { |
| @media (max-width: 980px) {
| | color: #c48b2e; |
| #content { border-radius: 0; box-shadow: none; padding: 16px; } | |
| #mw-panel { background: rgba(15, 27, 44, 0.92); }
| |
| } | | } |
/* Append to existing Common.css */
/* Leaflet Map Container */
.agon-map-container {
width: 100%;
height: 600px;
border: 2px solid #d8a657;
border-radius: 8px;
margin: 20px 0;
position: relative;
background: #1b2941;
}
#agon-world-map {
width: 100%;
height: 100%;
}
.leaflet-container {
background: #1b2941;
font-family: 'Source Sans 3', sans-serif;
}
.leaflet-popup-content-wrapper {
background: #fffaf0;
border: 1px solid #d8a657;
border-radius: 6px;
box-shadow: 0 8px 20px rgba(15, 27, 44, 0.4);
}
.leaflet-popup-content {
font-family: 'Source Sans 3', sans-serif;
color: #0f1b2c;
}
.leaflet-popup-content h3 {
font-family: 'Playfair Display', serif;
color: #0f1b2c;
margin-top: 0;
border-bottom: 1px solid rgba(216, 166, 87, 0.45);
padding-bottom: 5px;
}
.leaflet-popup-tip {
background: #fffaf0;
}
.marker-info {
max-width: 300px;
}
.marker-info strong {
color: #c48b2e;
}
