|
|
| Line 1: |
Line 1: |
| /*
| | false |
| * Menhirs Fate Wiki – Functional CSS + Custom Header
| |
| * Default Citizen theme colours preserved — no colour overrides
| |
| */
| |
| | |
| /* ═══════════════════════════════════════════════════════════════════════════
| |
| IMAGE SIZING — constrain external images
| |
| ═══════════════════════════════════════════════════════════════════════════ */
| |
| | |
| .mw-body-content img:not(.mw-file-element):not([class*="citizen"]):not([class*="oo-ui"]) {
| |
| max-width: 350px;
| |
| max-height: 450px;
| |
| height: auto;
| |
| width: auto;
| |
| object-fit: cover;
| |
| border-radius: 6px;
| |
| float: right;
| |
| margin: 0 0 1em 1.5em;
| |
| }
| |
| | |
| @media (max-width: 768px) {
| |
| .mw-body-content img:not(.mw-file-element):not([class*="citizen"]):not([class*="oo-ui"]) {
| |
| float: none;
| |
| display: block;
| |
| margin: 1em auto !important;
| |
| max-width: 100%;
| |
| }
| |
| }
| |
| | |
| /* ═══════════════════════════════════════════════════════════════════════════
| |
| NATION IMAGE GRID
| |
| ═══════════════════════════════════════════════════════════════════════════ */
| |
| | |
| .nation-grid {
| |
| display: grid !important;
| |
| grid-template-columns: repeat(3, 1fr) !important;
| |
| gap: 12px;
| |
| margin: 1.5em 0;
| |
| max-width: 900px;
| |
| clear: both;
| |
| }
| |
| | |
| .nation-grid-item {
| |
| position: relative;
| |
| overflow: hidden;
| |
| border-radius: 8px;
| |
| aspect-ratio: 2/3;
| |
| background-color: var(--color-surface-2, #1c1c1f);
| |
| background-size: cover;
| |
| background-position: center top;
| |
| transition: transform 0.3s ease;
| |
| }
| |
| | |
| .nation-grid-item:hover {
| |
| transform: scale(1.03);
| |
| }
| |
| | |
| .nation-grid-item p {
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| height: 100%;
| |
| }
| |
| | |
| .nation-grid-item a {
| |
| display: flex !important;
| |
| align-items: flex-end !important;
| |
| justify-content: center !important;
| |
| width: 100%;
| |
| height: 100%;
| |
| text-decoration: none !important;
| |
| position: absolute;
| |
| top: 0;
| |
| left: 0;
| |
| background: linear-gradient(transparent 50%, rgba(0,0,0,0.7)) !important;
| |
| padding: 0 0 15px 0;
| |
| }
| |
| | |
| .nation-grid-item .nation-label {
| |
| color: #f6f6f6 !important;
| |
| font-size: 1.1rem;
| |
| font-weight: 600;
| |
| font-style: italic;
| |
| text-align: center;
| |
| text-shadow: 0 1px 4px rgba(0,0,0,0.6);
| |
| }
| |
| | |
| .nation-grid-item a:hover .nation-label {
| |
| color: var(--color-primary, #36c) !important;
| |
| }
| |
| | |
| @media (max-width: 600px) {
| |
| .nation-grid {
| |
| grid-template-columns: repeat(2, 1fr) !important;
| |
| }
| |
| }
| |
| | |
| /* ─── Nation grid background images ─────────────────────────────────────── */
| |
| | |
| .nation-avereaux { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/11/DSC02283-684x1024.jpg'); }
| |
| .nation-wonder { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/11/DSC02033-684x1024.jpg'); }
| |
| .nation-valdraeth { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/11/DSC02067-684x1024.jpg'); }
| |
| .nation-portavas { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/11/MF_13_IntroRules-684x1024.jpg'); }
| |
| .nation-hammerstadt{ background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/11/MF_11_DamageGameEffects-681x1024.jpg'); }
| |
| .nation-urdrevan { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/10/DSC03197-684x1024.jpg'); }
| |
| .nation-kairos { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/10/DSC02402-684x1024.jpg'); }
| |
| .nation-syradonia { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/10/DSC02552-684x1024.jpg'); }
| |
| .nation-morvalis { background-image: url('https://www.menhirsfate.com/wp-content/uploads/2024/10/DSC02441-684x1024.jpg'); }
| |
| | |
| /* ═══════════════════════════════════════════════════════════════════════════
| |
| CUSTOM HEADER
| |
| ═══════════════════════════════════════════════════════════════════════════ */
| |
| | |
| #mf-header {
| |
| position: relative;
| |
| z-index: 200;
| |
| width: 100%;
| |
| font-family: 'Crimson Text', Georgia, serif;
| |
| }
| |
| | |
| /* ─── Dark top bar with logo ────────────────────────────────────────────── */
| |
| | |
| #mf-header-top {
| |
| background: #111;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| padding: 22px 20px;
| |
| position: relative;
| |
| }
| |
| | |
| #mf-logo {
| |
| height: 55px;
| |
| width: auto;
| |
| }
| |
| | |
| #mf-logo-link {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| }
| |
| | |
| /* ─── Parchment ribbon navigation ───────────────────────────────────────── */
| |
| | |
| #mf-ribbon {
| |
| background: #e8ddc4;
| |
| position: relative;
| |
| z-index: 200;
| |
| margin-left: 3.5rem;
| |
| }
| |
| | |
| #mf-ribbon::after {
| |
| content: '';
| |
| position: absolute;
| |
| right: -20px;
| |
| top: 0;
| |
| bottom: 0;
| |
| width: 20px;
| |
| background: #e8ddc4;
| |
| clip-path: polygon(0 0, 100% 50%, 0 100%);
| |
| }
| |
| | |
| /* ─── Nav inner: CSS grid ───────────────────────────────────────────────── */
| |
| | |
| #mf-ribbon-inner {
| |
| display: grid;
| |
| align-items: center;
| |
| padding: 0;
| |
| max-width: 1080px;
| |
| margin: 0 auto;
| |
| /* grid-template-columns set dynamically by JS */
| |
| }
| |
| | |
| /* ─── Nav items ─────────────────────────────────────────────────────────── */
| |
| | |
| .mf-nav-item {
| |
| color: #844725 !important;
| |
| text-decoration: none !important;
| |
| font-size: 17px;
| |
| font-weight: 600;
| |
| padding: 0 17px;
| |
| line-height: 50px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| cursor: pointer;
| |
| white-space: nowrap;
| |
| transition: color 0.2s ease, background 0.2s ease;
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .mf-nav-item:hover {
| |
| color: #5c2e12 !important;
| |
| background: rgba(0, 0, 0, 0.06);
| |
| }
| |
| | |
| .mf-nav-back {
| |
| justify-content: flex-start;
| |
| font-style: italic;
| |
| font-weight: 400;
| |
| font-size: 15px;
| |
| opacity: 0.85;
| |
| }
| |
| | |
| .mf-nav-back:hover {
| |
| opacity: 1;
| |
| }
| |
| | |
| /* ─── Dropdown menus ────────────────────────────────────────────────────── */
| |
| | |
| .mf-has-dropdown {
| |
| position: relative;
| |
| width: 100%;
| |
| }
| |
| | |
| .mf-nav-label {
| |
| color: #844725;
| |
| font-size: 17px;
| |
| font-weight: 600;
| |
| padding: 0 17px;
| |
| line-height: 50px;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| cursor: pointer;
| |
| transition: color 0.2s ease, background 0.2s ease;
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| }
| |
| | |
| .mf-nav-label:hover {
| |
| color: #5c2e12;
| |
| background: rgba(0, 0, 0, 0.06);
| |
| }
| |
| | |
| .mf-caret {
| |
| font-size: 10px;
| |
| margin-left: 5px;
| |
| transition: transform 0.2s ease;
| |
| }
| |
| | |
| .mf-dropdown {
| |
| display: none;
| |
| position: absolute;
| |
| top: 100%;
| |
| left: 0;
| |
| min-width: 220px;
| |
| background: #f5efe4;
| |
| border: 1px solid #d4c9b0;
| |
| border-radius: 4px;
| |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
| |
| z-index: 10001;
| |
| padding: 6px 0;
| |
| }
| |
| | |
| .mf-dropdown a {
| |
| display: block !important;
| |
| padding: 9px 20px !important;
| |
| color: #844725 !important;
| |
| text-decoration: none !important;
| |
| font-size: 15px;
| |
| font-weight: 400;
| |
| transition: background 0.15s ease;
| |
| }
| |
| | |
| .mf-dropdown a:hover {
| |
| background: rgba(132, 71, 37, 0.1) !important;
| |
| color: #5c2e12 !important;
| |
| }
| |
| | |
| .mf-has-dropdown:hover > .mf-dropdown {
| |
| display: block;
| |
| }
| |
| | |
| .mf-has-dropdown:hover .mf-caret {
| |
| transform: rotate(180deg);
| |
| }
| |
| | |
| .mf-has-dropdown.mf-dropdown-open > .mf-dropdown {
| |
| display: block;
| |
| }
| |
| | |
| .mf-has-dropdown.mf-dropdown-open .mf-caret {
| |
| transform: rotate(180deg);
| |
| }
| |
| | |
| /* ─── Inline search (inside ribbon) ─────────────────────────────────────── */
| |
| | |
| #mf-search-wrap {
| |
| position: relative;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: flex-end;
| |
| padding: 0 12px 0 8px;
| |
| }
| |
| | |
| #mf-search-form {
| |
| display: flex;
| |
| align-items: center;
| |
| }
| |
| | |
| #mf-search-input {
| |
| width: 160px;
| |
| padding: 5px 10px;
| |
| border: 1px solid #c4b79a;
| |
| border-right: none;
| |
| border-radius: 4px 0 0 4px;
| |
| font-family: 'Crimson Text', Georgia, serif;
| |
| font-size: 14px;
| |
| color: #3a2a1a;
| |
| background: #f5efe4;
| |
| outline: none;
| |
| transition: width 0.3s ease, border-color 0.2s ease, box-shadow 0.2s ease;
| |
| }
| |
| | |
| #mf-search-input::placeholder {
| |
| color: #9a8b72;
| |
| font-style: italic;
| |
| }
| |
| | |
| #mf-search-input:focus {
| |
| width: 220px;
| |
| border-color: #844725;
| |
| box-shadow: 0 0 0 2px rgba(132, 71, 37, 0.15);
| |
| }
| |
| | |
| #mf-search-btn {
| |
| padding: 5px 10px;
| |
| background: #844725;
| |
| border: 1px solid #844725;
| |
| border-radius: 0 4px 4px 0;
| |
| color: #f5efe4;
| |
| cursor: pointer;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| transition: background 0.2s ease;
| |
| line-height: 1;
| |
| }
| |
| | |
| #mf-search-btn:hover {
| |
| background: #5c2e12;
| |
| }
| |
| | |
| /* Icon-only search button (hidden on wide screens) */
| |
| #mf-search-icon {
| |
| display: none;
| |
| background: none;
| |
| border: none;
| |
| color: #844725;
| |
| cursor: pointer;
| |
| padding: 6px;
| |
| line-height: 1;
| |
| transition: color 0.2s ease;
| |
| }
| |
| | |
| #mf-search-icon:hover {
| |
| color: #5c2e12;
| |
| }
| |
| | |
| /* Suggestions dropdown */
| |
| #mf-search-suggestions {
| |
| display: none;
| |
| position: absolute;
| |
| top: 100%;
| |
| right: 12px;
| |
| width: 260px;
| |
| background: #f5efe4;
| |
| border: 1px solid #c4b79a;
| |
| border-top: none;
| |
| border-radius: 0 0 4px 4px;
| |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
| |
| z-index: 10001;
| |
| }
| |
| | |
| .mf-suggestion {
| |
| display: block;
| |
| padding: 8px 14px;
| |
| color: #844725 !important;
| |
| text-decoration: none !important;
| |
| font-family: 'Crimson Text', Georgia, serif;
| |
| font-size: 14px;
| |
| transition: background 0.15s ease;
| |
| }
| |
| | |
| .mf-suggestion:hover {
| |
| background: rgba(132, 71, 37, 0.1);
| |
| color: #5c2e12 !important;
| |
| }
| |
| | |
| /* ─── Hamburger button (hidden on desktop) ──────────────────────────────── */
| |
| | |
| #mf-burger {
| |
| display: none;
| |
| position: absolute;
| |
| right: 16px;
| |
| top: 50%;
| |
| transform: translateY(-50%);
| |
| background: none;
| |
| border: none;
| |
| cursor: pointer;
| |
| padding: 6px;
| |
| z-index: 300;
| |
| }
| |
| | |
| #mf-burger span {
| |
| display: block;
| |
| width: 26px;
| |
| height: 3px;
| |
| background: #ddd;
| |
| margin: 5px 0;
| |
| border-radius: 2px;
| |
| transition: transform 0.3s ease, opacity 0.3s ease;
| |
| }
| |
| | |
| #mf-burger.mf-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
| |
| #mf-burger.mf-open span:nth-child(2) { opacity: 0; }
| |
| #mf-burger.mf-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
| |
| | |
| /* ─── Keep Citizen link colours inside wiki content ─────────────────────── */
| |
| | |
| .mw-body-content a:not(.new) {
| |
| color: var(--color-link) !important;
| |
| }
| |
| | |
| .mw-body-content a:hover {
| |
| color: var(--color-link-active) !important;
| |
| }
| |
| | |
| /* ─── Citizen site header must appear above custom ribbon ───────────────── */
| |
| | |
| .citizen-header {
| |
| z-index: 10000;
| |
| }
| |
| | |
| /* ═══════════════════════════════════════════════════════════════════════════
| |
| DARK MODE — adapts header to Citizen night theme
| |
| ═══════════════════════════════════════════════════════════════════════════ */
| |
| | |
| .skin-theme-clientpref-night #mf-ribbon,
| |
| .skin-theme-clientpref-night #mf-ribbon::after {
| |
| background: var(--color-surface-1);
| |
| }
| |
| | |
| .skin-theme-clientpref-night .mf-nav-item,
| |
| .skin-theme-clientpref-night .mf-nav-label {
| |
| color: var(--color-base) !important;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .mf-nav-item:hover,
| |
| .skin-theme-clientpref-night .mf-nav-label:hover {
| |
| color: #fff !important;
| |
| background: rgba(255, 255, 255, 0.08);
| |
| }
| |
| | |
| .skin-theme-clientpref-night .mf-nav-back {
| |
| opacity: 0.7;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .mf-caret {
| |
| color: var(--color-base);
| |
| }
| |
| | |
| .skin-theme-clientpref-night .mf-dropdown {
| |
| background: var(--color-surface-2);
| |
| border-color: var(--color-surface-3, rgba(255,255,255,0.1));
| |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
| |
| }
| |
| | |
| .skin-theme-clientpref-night .mf-dropdown a {
| |
| color: var(--color-base) !important;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .mf-dropdown a:hover {
| |
| background: rgba(255, 255, 255, 0.08) !important;
| |
| color: #fff !important;
| |
| }
| |
| | |
| /* Search input */
| |
| .skin-theme-clientpref-night #mf-search-input {
| |
| background: var(--color-surface-0);
| |
| color: var(--color-base);
| |
| border-color: var(--color-surface-3, rgba(255,255,255,0.15));
| |
| }
| |
| | |
| .skin-theme-clientpref-night #mf-search-input::placeholder {
| |
| color: rgba(255, 255, 255, 0.4);
| |
| }
| |
| | |
| .skin-theme-clientpref-night #mf-search-input:focus {
| |
| border-color: var(--color-link);
| |
| box-shadow: 0 0 0 2px rgba(100, 140, 255, 0.2);
| |
| }
| |
| | |
| .skin-theme-clientpref-night #mf-search-btn {
| |
| background: var(--color-surface-3, #3a3a4a);
| |
| border-color: var(--color-surface-3, #3a3a4a);
| |
| color: var(--color-base);
| |
| }
| |
| | |
| .skin-theme-clientpref-night #mf-search-btn:hover {
| |
| background: rgba(255, 255, 255, 0.15);
| |
| }
| |
| | |
| .skin-theme-clientpref-night #mf-search-icon {
| |
| color: var(--color-base);
| |
| }
| |
| | |
| .skin-theme-clientpref-night #mf-search-icon:hover {
| |
| color: #fff;
| |
| }
| |
| | |
| /* Suggestions dropdown */
| |
| .skin-theme-clientpref-night #mf-search-suggestions {
| |
| background: var(--color-surface-2);
| |
| border-color: var(--color-surface-3, rgba(255,255,255,0.1));
| |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
| |
| }
| |
| | |
| .skin-theme-clientpref-night .mf-suggestion {
| |
| color: var(--color-base) !important;
| |
| }
| |
| | |
| .skin-theme-clientpref-night .mf-suggestion:hover {
| |
| background: rgba(255, 255, 255, 0.08);
| |
| color: #fff !important;
| |
| }
| |
| | |
| /* Hamburger lines */
| |
| .skin-theme-clientpref-night #mf-burger span {
| |
| background: var(--color-base);
| |
| }
| |
| | |
| /* Expanded search overlay on narrow screens */
| |
| .skin-theme-clientpref-night #mf-search-wrap.mf-search-expanded {
| |
| background: var(--color-surface-1);
| |
| }
| |
| | |
| /* Mobile menu separator */
| |
| .skin-theme-clientpref-night .mf-nav-back {
| |
| border-bottom-color: rgba(255, 255, 255, 0.1) !important;
| |
| }
| |
| | |
| .skin-theme-clientpref-night #mf-search-wrap {
| |
| border-top-color: rgba(255, 255, 255, 0.1);
| |
| }
| |
| | |
| /* Also support @media prefers-color-scheme for "auto" mode */
| |
| @media (prefers-color-scheme: dark) {
| |
| .skin-theme-clientpref-os #mf-ribbon,
| |
| .skin-theme-clientpref-os #mf-ribbon::after {
| |
| background: var(--color-surface-1);
| |
| }
| |
| .skin-theme-clientpref-os .mf-nav-item,
| |
| .skin-theme-clientpref-os .mf-nav-label {
| |
| color: var(--color-base) !important;
| |
| }
| |
| .skin-theme-clientpref-os .mf-nav-item:hover,
| |
| .skin-theme-clientpref-os .mf-nav-label:hover {
| |
| color: #fff !important;
| |
| background: rgba(255, 255, 255, 0.08);
| |
| }
| |
| .skin-theme-clientpref-os .mf-nav-back {
| |
| opacity: 0.7;
| |
| }
| |
| .skin-theme-clientpref-os .mf-dropdown {
| |
| background: var(--color-surface-2);
| |
| border-color: var(--color-surface-3, rgba(255,255,255,0.1));
| |
| box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
| |
| }
| |
| .skin-theme-clientpref-os .mf-dropdown a {
| |
| color: var(--color-base) !important;
| |
| }
| |
| .skin-theme-clientpref-os .mf-dropdown a:hover {
| |
| background: rgba(255, 255, 255, 0.08) !important;
| |
| color: #fff !important;
| |
| }
| |
| .skin-theme-clientpref-os #mf-search-input {
| |
| background: var(--color-surface-0);
| |
| color: var(--color-base);
| |
| border-color: var(--color-surface-3, rgba(255,255,255,0.15));
| |
| }
| |
| .skin-theme-clientpref-os #mf-search-input::placeholder {
| |
| color: rgba(255, 255, 255, 0.4);
| |
| }
| |
| .skin-theme-clientpref-os #mf-search-input:focus {
| |
| border-color: var(--color-link);
| |
| box-shadow: 0 0 0 2px rgba(100, 140, 255, 0.2);
| |
| }
| |
| .skin-theme-clientpref-os #mf-search-btn {
| |
| background: var(--color-surface-3, #3a3a4a);
| |
| border-color: var(--color-surface-3, #3a3a4a);
| |
| color: var(--color-base);
| |
| }
| |
| .skin-theme-clientpref-os #mf-search-btn:hover {
| |
| background: rgba(255, 255, 255, 0.15);
| |
| }
| |
| .skin-theme-clientpref-os #mf-search-icon {
| |
| color: var(--color-base);
| |
| }
| |
| .skin-theme-clientpref-os #mf-search-suggestions {
| |
| background: var(--color-surface-2);
| |
| border-color: var(--color-surface-3, rgba(255,255,255,0.1));
| |
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
| |
| }
| |
| .skin-theme-clientpref-os .mf-suggestion {
| |
| color: var(--color-base) !important;
| |
| }
| |
| .skin-theme-clientpref-os .mf-suggestion:hover {
| |
| background: rgba(255, 255, 255, 0.08);
| |
| color: #fff !important;
| |
| }
| |
| .skin-theme-clientpref-os #mf-burger span {
| |
| background: var(--color-base);
| |
| }
| |
| .skin-theme-clientpref-os #mf-search-wrap.mf-search-expanded {
| |
| background: var(--color-surface-1);
| |
| }
| |
| .skin-theme-clientpref-os .mf-nav-back {
| |
| border-bottom-color: rgba(255, 255, 255, 0.1) !important;
| |
| }
| |
| .skin-theme-clientpref-os #mf-search-wrap {
| |
| border-top-color: rgba(255, 255, 255, 0.1);
| |
| }
| |
| }
| |
| | |
| /* ═══════════════════════════════════════════════════════════════════════════
| |
| RESPONSIVE: narrow screens — search becomes icon only
| |
| ═══════════════════════════════════════════════════════════════════════════ */
| |
| | |
| @media (max-width: 1100px) {
| |
| #mf-search-form {
| |
| display: none;
| |
| }
| |
| #mf-search-icon {
| |
| display: flex;
| |
| }
| |
| #mf-search-suggestions {
| |
| display: none !important;
| |
| }
| |
| | |
| /* Expanded state: search overlays the ribbon */
| |
| #mf-search-wrap.mf-search-expanded {
| |
| position: absolute;
| |
| left: 0;
| |
| right: 0;
| |
| top: 0;
| |
| bottom: 0;
| |
| background: #e8ddc4;
| |
| z-index: 100;
| |
| display: flex;
| |
| align-items: center;
| |
| justify-content: center;
| |
| padding: 0 12px;
| |
| }
| |
| #mf-search-wrap.mf-search-expanded #mf-search-form {
| |
| display: flex;
| |
| flex: 1;
| |
| max-width: 600px;
| |
| }
| |
| #mf-search-wrap.mf-search-expanded #mf-search-input {
| |
| width: 100%;
| |
| flex: 1;
| |
| }
| |
| #mf-search-wrap.mf-search-expanded #mf-search-icon {
| |
| margin-left: 8px;
| |
| color: #844725;
| |
| }
| |
| #mf-search-wrap.mf-search-expanded #mf-search-suggestions {
| |
| display: block !important;
| |
| position: absolute;
| |
| top: 100%;
| |
| left: 50%;
| |
| transform: translateX(-50%);
| |
| width: 600px;
| |
| max-width: calc(100% - 24px);
| |
| right: auto;
| |
| }
| |
| #mf-search-wrap.mf-search-expanded #mf-search-suggestions:empty {
| |
| display: none !important;
| |
| }
| |
| }
| |
| | |
| /* ═══════════════════════════════════════════════════════════════════════════
| |
| MOBILE RESPONSIVE
| |
| ═══════════════════════════════════════════════════════════════════════════ */
| |
| | |
| @media (max-width: 800px) {
| |
| #mf-ribbon {
| |
| margin-left: 0;
| |
| }
| |
| | |
| #mf-burger {
| |
| display: block;
| |
| }
| |
| | |
| #mf-ribbon-inner {
| |
| display: none !important;
| |
| flex-direction: column;
| |
| align-items: stretch;
| |
| background: #e8ddc4;
| |
| padding: 10px 0;
| |
| }
| |
| | |
| #mf-ribbon-inner.mf-open {
| |
| display: flex !important;
| |
| }
| |
| | |
| #mf-ribbon::after {
| |
| display: none;
| |
| }
| |
| | |
| .mf-nav-item,
| |
| .mf-nav-label {
| |
| padding: 0 24px;
| |
| line-height: 44px;
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| justify-content: flex-start;
| |
| }
| |
| | |
| .mf-nav-back {
| |
| border-bottom: 1px solid rgba(132, 71, 37, 0.15);
| |
| }
| |
| | |
| .mf-has-dropdown {
| |
| width: 100%;
| |
| }
| |
| | |
| .mf-dropdown {
| |
| position: static;
| |
| box-shadow: none;
| |
| border: none;
| |
| border-radius: 0;
| |
| background: rgba(0, 0, 0, 0.05);
| |
| padding: 0;
| |
| }
| |
| | |
| .mf-dropdown a {
| |
| padding: 10px 40px !important;
| |
| font-size: 14px;
| |
| }
| |
| | |
| .mf-has-dropdown:hover > .mf-dropdown {
| |
| display: none;
| |
| }
| |
| | |
| .mf-has-dropdown.mf-dropdown-open > .mf-dropdown {
| |
| display: block;
| |
| }
| |
| | |
| /* Show search as full-width input in hamburger menu */
| |
| #mf-search-form {
| |
| display: flex !important;
| |
| flex: 1;
| |
| }
| |
| #mf-search-input {
| |
| width: 100% !important;
| |
| flex: 1;
| |
| }
| |
| #mf-search-icon {
| |
| display: none !important;
| |
| }
| |
| #mf-search-wrap {
| |
| padding: 8px 24px;
| |
| justify-content: stretch;
| |
| line-height: normal;
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| border-top: 1px solid rgba(132, 71, 37, 0.15);
| |
| }
| |
| #mf-search-suggestions {
| |
| display: block !important;
| |
| position: absolute;
| |
| left: 24px;
| |
| right: 24px;
| |
| width: auto;
| |
| top: auto;
| |
| }
| |
| #mf-search-suggestions:empty {
| |
| display: none !important;
| |
| }
| |
| }
| |
| | |
| /* ═══════════════════════════════════════════════════════════════════════════
| |
| REALM COLUMNS (Main Page Nations section)
| |
| ═══════════════════════════════════════════════════════════════════════════ */
| |
| | |
| .mf-realms-grid {
| |
| display: grid;
| |
| grid-template-columns: repeat(3, 1fr);
| |
| gap: 1.5em;
| |
| margin: 1em 0 2em;
| |
| }
| |
| | |
| @media (max-width: 700px) {
| |
| .mf-realms-grid {
| |
| grid-template-columns: 1fr;
| |
| }
| |
| }
| |
| | |
| .mf-realm-card {
| |
| display: flex;
| |
| flex-direction: column;
| |
| }
| |
| | |
| .mf-realm-banner {
| |
| position: relative;
| |
| overflow: hidden;
| |
| border-radius: 6px;
| |
| line-height: 0;
| |
| }
| |
| | |
| /* Strip MediaWiki image wrapper margins/padding inside banner */
| |
| .mf-realm-banner figure,
| |
| .mf-realm-banner .mw-file-element,
| |
| .mf-realm-banner .floatnone,
| |
| .mf-realm-banner .center,
| |
| .mf-realm-banner .mw-halign-center {
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| display: block;
| |
| line-height: 0;
| |
| }
| |
| | |
| .mf-realm-banner img {
| |
| width: 100%;
| |
| height: auto;
| |
| display: block;
| |
| }
| |
| | |
| /* Title pill centred over the image */
| |
| .mf-realm-overlay {
| |
| position: absolute;
| |
| top: 50%;
| |
| left: 50%;
| |
| transform: translate(-50%, -50%);
| |
| text-align: center;
| |
| padding: 0.35em 1.4em 0.45em;
| |
| background: rgba(0, 0, 0, 0.58);
| |
| border-radius: 5px;
| |
| white-space: nowrap;
| |
| line-height: normal;
| |
| pointer-events: none;
| |
| }
| |
| | |
| .mf-realm-overlay a {
| |
| pointer-events: auto;
| |
| color: #fff !important;
| |
| text-decoration: none !important;
| |
| font-family: 'Crimson Text', Georgia, serif;
| |
| font-size: 1.35em;
| |
| font-weight: 700;
| |
| text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9);
| |
| letter-spacing: 0.02em;
| |
| }
| |
| | |
| .mf-realm-overlay a:hover {
| |
| color: #f0d89a !important;
| |
| text-decoration: none !important;
| |
| }
| |
| | |
| .mf-realm-card > ul {
| |
| margin: 0.6em 0 0 1.4em;
| |
| padding: 0;
| |
| line-height: normal;
| |
| }
| |
| | |
| .mf-realm-card > ul li {
| |
| margin: 0.3em 0;
| |
| }
| |
| | |
| /* Dark mode */
| |
| .skin-theme-clientpref-night .mf-realm-overlay {
| |
| background: rgba(0, 0, 0, 0.65);
| |
| }
| |
| | |
| @media (prefers-color-scheme: dark) {
| |
| .skin-theme-clientpref-os .mf-realm-overlay {
| |
| background: rgba(0, 0, 0, 0.65);
| |
| }
| |
| }
| |
