/* ===== WIKI STYLES — Wikipedia Theme ===== The wiki view (article, list, home, editor) is restyled to look like Wikipedia: serif body type, Wikipedia-blue links, a floated infobox with a light-gray panel, and section headings underlined by a thin gray rule. This file overrides the v5 design-system variables for any containing .wiki-container, so the existing wiki-* selectors below inherit the Wikipedia palette and fonts without each one needing to be rewritten against bare hex codes. The wiki theme is always light; it ignores the global light/dark toggle. */ /* ---------- WIKIPEDIA VARIABLE OVERRIDES ---------- */ body:has(.wiki-container) { /* Surfaces */ --bg-body: #ffffff; --bg-panel: #ffffff; --bg-card: #f8f9fa; --bg-input: #ffffff; --bg-hover: #eaecf0; /* Text */ --text-bright: #000000; --text-primary: #202122; --text-secondary: #54595d; --text-muted: #72777d; --text-dim: #72777d; --text-faint: #c8ccd1; /* Borders */ --border-main: #a2a9b1; --border-light: #c8ccd1; --border-mid: #a2a9b1; --border-strong: #72777d; /* Accent / links */ --accent: #3366cc; --accent-hover: #2a4b8d; --blue: #3366cc; --red: #d33; --green: #00af89; /* Fonts — UI is sans-serif, body is serif (Wikipedia stack) */ --font-mono: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-ui: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif; --font-serif: 'Linux Libertine', Georgia, 'Times New Roman', Times, serif; background: #ffffff; color: #202122; font-family: 'Linux Libertine', Georgia, 'Times New Roman', Times, serif; font-size: 14px; line-height: 1.6; height: auto; min-height: 100vh; overflow: auto; } /* Hide the in-game top bar rows on wiki pages — wiki has its own bar */ body:has(.wiki-container) #top-bar .top-bar-row1, body:has(.wiki-container) #top-bar .nav-tabs, body:has(.wiki-container) #top-bar .hamburger-btn { display: none; } /* ---------- WIKI TOP BAR ---------- */ .wiki-top-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 20px; background: #f6f6f6; border-bottom: 1px solid #a7d7f9; font-family: var(--font-ui); } .wiki-top-bar-brand { font-family: var(--font-ui); font-size: 14px; font-weight: 400; color: #54595d; text-decoration: none; text-transform: none; letter-spacing: 0; } .wiki-top-bar-brand:hover { text-decoration: underline; color: #3366cc; } .wiki-top-bar-right { display: flex; align-items: center; gap: 8px; } .wiki-btn-return { background: #f8f9fa; } /* ---------- GLOBAL SEARCH BAR ---------- */ .wiki-global-search { position: relative; margin-bottom: 16px; } .wiki-global-search-input { width: 100%; box-sizing: border-box; } /* ---------- LAYOUT ---------- */ .wiki-container { max-width: 960px; margin: 0 auto; padding: 20px 16px 60px; font-family: var(--font-serif); color: #202122; } /* ---------- PAGE HEADER (title + actions) ---------- */ .wiki-page-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; margin: 0 0 14px; border-bottom: 1px solid #a2a9b1; padding-bottom: 4px; } .wiki-page-title, .wiki-page-header h1 { font-family: var(--font-serif); font-size: 28px; font-weight: 400; line-height: 1.25; color: #000000; margin: 0; flex: 1; border: none; padding: 0; } .wiki-header-actions { display: flex; gap: 6px; flex-shrink: 0; padding-bottom: 4px; } /* ---------- BUTTONS ---------- */ .wiki-btn { font-family: var(--font-ui); font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 4px 10px; border: 1px solid #a2a9b1; border-radius: 2px; background: #f8f9fa; color: #202122; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; transition: background 0.1s, border-color 0.1s; } .wiki-btn:hover { background: #eaecf0; color: #202122; border-color: #72777d; text-decoration: none; } .wiki-btn-primary { background: #3366cc; color: #ffffff; border-color: #2a4b8d; } .wiki-btn-primary:hover { background: #2a4b8d; color: #ffffff; border-color: #2a4b8d; } .wiki-btn-danger { color: #d33; border-color: #d33; background: #ffffff; } .wiki-btn-danger:hover { background: #d33; color: #ffffff; } .wiki-btn-disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ---------- BODY CONTENT (article body) ---------- */ .wiki-body-content { background: transparent; border: none; border-radius: 0; padding: 0; line-height: 1.6; color: #202122; font-family: var(--font-serif); font-size: 15px; } .wiki-body-content::after { content: ''; display: block; clear: both; } .wiki-body-content p { margin: 0 0 12px 0; } .wiki-body-content h1, .wiki-body-content h2, .wiki-body-content h3, .wiki-body-content h4 { font-family: var(--font-serif); font-weight: 400; color: #000000; margin: 1em 0 0.3em; line-height: 1.3; } .wiki-body-content h1 { font-size: 24px; border-bottom: 1px solid #a2a9b1; padding-bottom: 4px; } .wiki-body-content h2 { font-size: 20px; border-bottom: 1px solid #a2a9b1; padding-bottom: 3px; } .wiki-body-content h3 { font-size: 17px; } .wiki-body-content h4 { font-size: 14px; font-weight: 700; } .wiki-body-content img { max-width: 100%; border: 1px solid #c8ccd1; margin: 8px 0; } .wiki-body-content ul, .wiki-body-content ol { margin: 0 0 12px 24px; } .wiki-body-content li { margin-bottom: 4px; } .wiki-body-content a, .wiki-infobox a, .wiki-backlinks a { color: #3366cc; text-decoration: none; } .wiki-body-content a:hover, .wiki-infobox a:hover, .wiki-backlinks a:hover { text-decoration: underline; } .wiki-body-content a:visited { color: #6b4ba1; } a.wiki-link-missing { color: #d33; } a.wiki-link-missing:hover { color: #b32424; text-decoration: underline; } .wiki-body-content blockquote { margin: 12px 0; padding: 4px 12px; border-left: 3px solid #c8ccd1; color: #54595d; } .wiki-body-content code { background: #f8f9fa; border: 1px solid #eaecf0; border-radius: 2px; padding: 1px 4px; font-family: 'Consolas', 'Menlo', monospace; font-size: 13px; color: #202122; } /* ---------- INFOBOX (floated right) ---------- */ .wiki-infobox { float: right; clear: right; margin: 0 0 14px 18px; width: 290px; background: #f8f9fa; border: 1px solid #a2a9b1; border-radius: 2px; font-family: var(--font-ui); font-size: 13px; color: #202122; overflow: hidden; box-sizing: border-box; } .wiki-infobox-title { font-family: var(--font-serif); font-size: 17px; font-weight: 700; text-align: center; padding: 8px 12px; color: #000000; background: transparent; border-bottom: 1px solid #a2a9b1; } .wiki-infobox-type { font-family: var(--font-ui); font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; text-align: center; padding: 4px 12px; color: #54595d; background: transparent; border-bottom: 1px solid #a2a9b1; font-style: italic; } .wiki-infobox-image { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; border: none; border-bottom: 1px solid #a2a9b1; } .wiki-infobox-table { width: 100%; border-collapse: collapse; margin: 0; } .wiki-infobox-table tr { border-bottom: 1px solid #eaecf0; } .wiki-infobox-table tr:last-child { border-bottom: none; } .wiki-infobox-table td { padding: 6px 10px; font-size: 13px; line-height: 1.4; vertical-align: top; color: #202122; background: transparent; } .wiki-infobox-table td:first-child { font-weight: 700; color: #000000; width: 42%; white-space: normal; } /* ---------- EXPLORE CARD INFOBOX OVERRIDES ---------- */ .wiki-explore-sidebar .wiki-infobox { float: none; width: 100%; border: none; border-radius: 0; margin: 0; background: transparent; } .wiki-explore-sidebar .wiki-infobox-image { aspect-ratio: auto; max-height: 160px; border-radius: 2px; border-bottom: none; margin-bottom: 8px; } .wiki-explore-sidebar .wiki-infobox-table td { padding: 4px 8px; font-size: 12px; } /* ---------- EMPTY STATE ---------- */ .wiki-empty { text-align: center; padding: 60px 20px; color: #54595d; font-family: var(--font-serif); } .wiki-empty h2 { font-family: var(--font-serif); font-size: 22px; font-weight: 400; color: #000000; margin: 0 0 8px; border-bottom: 1px solid #a2a9b1; padding-bottom: 4px; display: inline-block; } .wiki-empty p { margin-bottom: 16px; font-size: 14px; } /* ---------- EDITOR ---------- */ .wiki-editor-form { max-width: 900px; margin: 0 auto; font-family: var(--font-ui); } .wiki-field { margin-bottom: 16px; } .wiki-field label { display: block; font-family: var(--font-ui); font-size: 13px; font-weight: 700; text-transform: none; color: #202122; margin-bottom: 4px; letter-spacing: 0; } .wiki-input, .wiki-select { width: 100%; padding: 6px 10px; font-family: var(--font-ui); font-size: 14px; background: #ffffff; border: 1px solid #a2a9b1; border-radius: 2px; color: #202122; outline: none; } .wiki-input:focus, .wiki-select:focus { border-color: #3366cc; box-shadow: inset 0 0 0 1px #3366cc; } .wiki-infobox-editor { background: #f8f9fa; border: 1px solid #a2a9b1; border-radius: 2px; padding: 14px; margin-bottom: 16px; } .wiki-infobox-editor-title { font-family: var(--font-ui); font-size: 13px; font-weight: 700; text-transform: none; color: #000000; margin-bottom: 10px; letter-spacing: 0; } .wiki-image-upload-area { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; } .wiki-image-preview { width: 80px; height: 80px; border-radius: 2px; object-fit: cover; border: 1px solid #a2a9b1; background: #f8f9fa; } .wiki-kv-row { display: flex; gap: 8px; margin-bottom: 6px; align-items: center; } .wiki-kv-row input { flex: 1; padding: 5px 8px; font-family: var(--font-ui); font-size: 13px; background: #ffffff; border: 1px solid #a2a9b1; border-radius: 2px; color: #202122; outline: none; } .wiki-kv-row input:first-child { flex: 0.4; } .wiki-kv-row input:focus { border-color: #3366cc; } .wiki-kv-remove { background: none; border: none; color: #72777d; cursor: pointer; font-size: 18px; padding: 2px 6px; line-height: 1; } .wiki-kv-remove:hover { color: #d33; } /* Quill editor — Wikipedia-style */ .ql-toolbar.ql-snow { background: #f8f9fa; border-color: #a2a9b1 !important; border-radius: 2px 2px 0 0; font-family: var(--font-ui); } .ql-container.ql-snow { border-color: #a2a9b1 !important; border-radius: 0 0 2px 2px; background: #ffffff; font-family: var(--font-serif); font-size: 15px; min-height: 320px; } .ql-editor { color: #202122; min-height: 320px; line-height: 1.6; } .ql-editor.ql-blank::before { color: #72777d; font-style: normal; } .ql-snow .ql-stroke { stroke: #54595d !important; } .ql-snow .ql-fill { fill: #54595d !important; } .ql-snow .ql-picker-label { color: #54595d !important; } .ql-snow .ql-picker-options { background: #ffffff !important; border-color: #a2a9b1 !important; } .ql-snow .ql-picker-item { color: #202122 !important; } /* ---------- PAGE LIST ---------- */ .wiki-list-header { display: flex; justify-content: space-between; align-items: flex-end; margin: 0 0 14px; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid #a2a9b1; padding-bottom: 4px; } .wiki-list-header h1 { font-family: var(--font-serif); font-size: 26px; font-weight: 400; color: #000000; margin: 0; border: none; padding: 0; } .wiki-list-filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; padding-bottom: 4px; } .wiki-search-input { padding: 4px 8px; font-family: var(--font-ui); font-size: 13px; background: #ffffff; border: 1px solid #a2a9b1; border-radius: 2px; color: #202122; outline: none; width: 220px; } .wiki-search-input:focus { border-color: #3366cc; box-shadow: inset 0 0 0 1px #3366cc; } .wiki-filter-btn { font-family: var(--font-ui); font-size: 12px; font-weight: 400; text-transform: none; padding: 4px 8px; border: 1px solid #a2a9b1; border-radius: 2px; background: #f8f9fa; color: #202122; cursor: pointer; transition: background 0.1s; } .wiki-filter-btn.active { background: #3366cc; color: #ffffff; border-color: #2a4b8d; } .wiki-filter-btn:hover:not(.active) { background: #eaecf0; color: #202122; } .wiki-page-list { display: flex; flex-direction: column; gap: 0; border: 1px solid #c8ccd1; border-radius: 2px; overflow: hidden; background: #ffffff; } .wiki-page-row { display: flex; align-items: center; padding: 8px 12px; background: #ffffff; border: none; border-bottom: 1px solid #eaecf0; gap: 12px; cursor: pointer; transition: background 0.1s; text-decoration: none; font-family: var(--font-ui); } .wiki-page-row:last-child { border-bottom: none; } .wiki-page-row:hover { background: #f8f9fa; } .wiki-page-row-title { font-family: var(--font-serif); font-size: 15px; font-weight: 400; color: #3366cc; flex: 1; } .wiki-page-row:hover .wiki-page-row-title { text-decoration: underline; } .wiki-page-row-type { font-family: var(--font-ui); font-size: 10px; font-weight: 400; text-transform: lowercase; letter-spacing: 0; padding: 2px 6px; border-radius: 2px; background: #f8f9fa; color: #54595d; border: 1px solid #c8ccd1; } .wiki-page-row-meta { font-family: var(--font-ui); font-size: 11px; color: #72777d; white-space: nowrap; } /* ---------- EDITOR ACTIONS ---------- */ .wiki-editor-actions { display: flex; gap: 10px; margin-top: 16px; justify-content: space-between; } .wiki-editor-actions-left { display: flex; gap: 10px; } /* ---------- SEARCH DROPDOWN ---------- */ .wiki-search-bar { position: relative; } .wiki-search-dropdown { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; border: 1px solid #a2a9b1; border-top: none; border-radius: 0 0 2px 2px; z-index: 100; max-height: 360px; overflow-y: auto; box-shadow: 0 2px 6px rgba(0,0,0,0.1); font-family: var(--font-ui); } .wiki-search-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; font-family: var(--font-ui); font-size: 13px; color: #202122; text-decoration: none; cursor: pointer; border-bottom: 1px solid #eaecf0; transition: background 0.1s; } .wiki-search-item:last-child { border-bottom: none; } .wiki-search-item:hover { background: #f8f9fa; } .wiki-search-empty { color: #72777d; cursor: default; } .wiki-search-empty:hover { background: transparent; } .wiki-search-tag-hint { font-size: 11px; color: #54595d; opacity: 0.8; margin-left: auto; } .wiki-search-create { color: #3366cc; font-weight: 500; } /* ---------- HOME PAGE ---------- */ .wiki-home-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; } .wiki-home-section { margin-bottom: 0; } .wiki-home-card { background: #ffffff; border: 1px solid #c8ccd1; border-radius: 2px; overflow: hidden; } .wiki-home-card-title { font-family: var(--font-serif); font-size: 17px; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 8px 12px; color: #000000; background: #f8f9fa; border-bottom: 1px solid #c8ccd1; } .wiki-home-card-body { padding: 14px; font-family: var(--font-serif); font-size: 14px; line-height: 1.6; color: #202122; } .wiki-home-card-body p { margin: 0 0 10px 0; } .wiki-home-card-body p:last-child { margin-bottom: 0; } .wiki-home-card-body code { background: #f8f9fa; border: 1px solid #eaecf0; padding: 1px 6px; border-radius: 2px; font-size: 13px; color: #202122; font-family: 'Consolas', 'Menlo', monospace; } .wiki-home-card-body a { color: #3366cc; text-decoration: none; } .wiki-home-card-body a:hover { text-decoration: underline; } .wiki-home-card .wiki-page-list { border: none; background: transparent; } .wiki-home-card .wiki-page-row { background: transparent; border-left: none; border-right: none; } .wiki-home-card .wiki-page-row:first-child { border-top: none; } /* ---------- PAGE META (attribution) ---------- */ .wiki-page-meta, .wiki-attribution { font-family: var(--font-ui); font-size: 12px; color: #54595d; margin: -6px 0 14px; padding: 0; font-style: italic; } .wiki-page-meta strong, .wiki-attribution strong { color: #202122; font-weight: 700; font-style: normal; } /* ---------- BACKLINKS ---------- */ .wiki-backlinks { clear: both; margin-top: 24px; background: #f8f9fa; border: 1px solid #c8ccd1; border-radius: 2px; overflow: hidden; font-family: var(--font-ui); } .wiki-backlinks-title { font-family: var(--font-serif); font-size: 16px; font-weight: 400; text-transform: none; letter-spacing: 0; padding: 6px 12px; color: #000000; background: transparent; border-bottom: 1px solid #c8ccd1; } .wiki-backlinks-list { display: flex; flex-direction: column; } .wiki-backlink-item { display: block; padding: 6px 12px; font-family: var(--font-ui); font-size: 13px; color: #3366cc; text-decoration: none; border-bottom: 1px solid #eaecf0; transition: background 0.1s; } .wiki-backlink-item:last-child { border-bottom: none; } .wiki-backlink-item:hover { background: #eaecf0; text-decoration: underline; } /* ---------- PAGE LOCK ---------- */ .wiki-lock-badge { display: inline-block; font-family: var(--font-ui); font-size: 11px; font-weight: 400; text-transform: none; padding: 2px 6px; border-radius: 2px; background: #f8f9fa; color: #72777d; border: 1px solid #c8ccd1; vertical-align: middle; margin-left: 8px; font-style: italic; } /* ---------- IMAGE GALLERY ---------- */ .wiki-image-gallery { margin-top: 12px; background: #f8f9fa; border: 1px solid #c8ccd1; border-radius: 2px; padding: 12px; } .wiki-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; margin-top: 8px; max-height: 240px; overflow-y: auto; } .wiki-gallery-thumb { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; border: 1px solid #c8ccd1; cursor: pointer; transition: border-color 0.1s, transform 0.1s; } .wiki-gallery-thumb:hover { border-color: #3366cc; transform: scale(1.05); } /* ---------- TAG SYSTEM ---------- */ .wiki-tag-section { background: #f8f9fa; border: 1px solid #c8ccd1; border-radius: 2px; padding: 14px; margin-bottom: 16px; font-family: var(--font-ui); } .wiki-tag-container { background: #ffffff; border: 1px solid #a2a9b1; border-radius: 2px; padding: 6px 10px; display: flex; align-items: flex-start; gap: 6px; min-height: 32px; flex-wrap: wrap; cursor: text; } .wiki-tag-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-ui); font-size: 11px; font-weight: 400; color: #54595d; background: #eaecf0; border: 1px solid #c8ccd1; padding: 2px 6px; border-radius: 2px; line-height: 18px; white-space: nowrap; text-transform: lowercase; text-decoration: none; } .wiki-tag-chip:hover { background: #d4d8de; color: #202122; } .wiki-tag-chip-remove { background: none; border: none; color: #72777d; font-size: 12px; cursor: pointer; padding: 0 1px; line-height: 1; font-family: inherit; } .wiki-tag-chip-remove:hover { color: #d33; } .wiki-tag-badge { font-size: 9px; font-weight: 400; margin-left: 3px; text-transform: uppercase; } .wiki-tag-badge-new { color: #3366cc; } .wiki-tag-badge-existing { color: #72777d; } .wiki-tag-autocomplete-new { border-top: 1px solid #eaecf0; } .wiki-tag-input { border: none; background: transparent; color: #202122; font-family: var(--font-ui); font-size: 12px; outline: none; min-width: 80px; flex: 1; line-height: 22px; padding: 0; } .wiki-tag-input::placeholder { color: #72777d; } .wiki-tag-display { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 0 0; margin-top: 16px; border-top: 1px solid #eaecf0; clear: both; } .wiki-tag-display .wiki-tag-chip { cursor: pointer; text-decoration: none; } .wiki-tag-display .wiki-tag-chip:hover { color: #202122; border-color: #72777d; } .wiki-tag-search { margin-bottom: 16px; } .wiki-tag-search-input-wrap { display: flex; align-items: flex-start; gap: 6px; flex-wrap: wrap; background: #ffffff; border: 1px solid #a2a9b1; border-radius: 2px; padding: 6px 10px; min-height: 34px; cursor: text; } .wiki-tag-search-input-wrap:focus-within { border-color: #3366cc; } .wiki-tag-search-input { border: none; background: transparent; color: #202122; font-family: var(--font-ui); font-size: 13px; outline: none; min-width: 200px; flex: 1; line-height: 22px; padding: 0; } .wiki-tag-search-input::placeholder { color: #72777d; } .wiki-popular-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .wiki-popular-tag { font-family: var(--font-ui); font-size: 11px; color: #54595d; background: #eaecf0; border: 1px solid #c8ccd1; border-radius: 2px; padding: 2px 8px; cursor: pointer; line-height: 18px; text-transform: lowercase; } .wiki-popular-tag:hover { color: #202122; border-color: #72777d; } .wiki-popular-tag-count { color: #72777d; font-size: 10px; margin-left: 3px; } .wiki-tag-autocomplete { position: absolute; top: 100%; left: 0; right: 0; background: #ffffff; border: 1px solid #a2a9b1; border-top: none; z-index: 100; max-height: 220px; overflow-y: auto; box-shadow: 0 2px 6px rgba(0,0,0,0.1); } .wiki-tag-autocomplete-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; cursor: pointer; font-family: var(--font-ui); font-size: 12px; color: #202122; } .wiki-tag-autocomplete-item:hover { background: #f8f9fa; } .wiki-tag-autocomplete-count { color: #72777d; font-size: 11px; } .wiki-tag-match { color: #3366cc; font-weight: 700; } /* ---------- WIKI PAGE FOOTER (static pages) ---------- */ .wiki-page-footer { margin-top: 30px; padding-top: 12px; border-top: 1px solid #c8ccd1; display: flex; gap: 8px; font-family: var(--font-ui); clear: both; } /* ---------- RESPONSIVE ---------- */ @media (max-width: 768px) { .wiki-infobox { float: none; width: 100%; margin: 0 0 14px 0; } .wiki-list-header, .wiki-page-header { flex-direction: column; align-items: stretch; gap: 8px; } .wiki-header-actions { padding-bottom: 0; } .wiki-home-columns { grid-template-columns: 1fr; } } @media (max-width: 480px) { .wiki-container { padding: 14px 10px 40px; } .wiki-search-input { width: 100%; } .wiki-editor-form { padding: 0 6px; } .ql-container.ql-snow { min-height: 220px; } .wiki-page-row { padding: 6px 10px; } .wiki-page-title, .wiki-page-header h1 { font-size: 22px; } .wiki-home-columns { gap: 12px; } .wiki-infobox { float: none; width: 100%; margin: 0 0 14px 0; } }