Difference between revisions of "MediaWiki:Common.css"
Jump to navigation
Jump to search
| Line 1: | Line 1: | ||
| − | /***** Holdfast Wiki – Modern Base Theme **************************************** | + | /***** Holdfast Wiki – Modern Base Theme **************************************** Safe, incremental overrides for Vector/Vector-2022. Keep selectors scoped. *******************************************************************************/ /* ===== 0) CSS Vars (easy theming) ===== */ :root { --hf-font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; --hf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --hf-fg: #16181d; --hf-fg-muted: #5c6773; --hf-bg: #ffffff; --hf-bg-subtle: #f6f7f9; --hf-accent: #2563eb; /* link blue */ --hf-accent-visited: #7c3aed;/* visited purple */ --hf-accent-hover: #1d4ed8; --hf-border: #e5e7eb; --hf-border-strong: #d1d5db; --hf-h2-bg: #3c553c; /* your green header bar */ --hf-h2-fg: #ffffff; --hf-code-bg: #0f172a; /* dark code panel */ --hf-code-fg: #e5e7eb; --hf-table-header-bg: #f3f4f6; --hf-table-row-alt: #fafafa; --hf-warning: #a16207; --hf-error: #b91c1c; --hf-info: #1d4ed8; --hf-success: #15803d; } /* ===== 1) Base Typography & Layout ===== */ body, .vector-body { color: var(--hf-fg); background: var(--hf-bg); font-family: var(--hf-font-sans); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mw-parser-output > p { margin: 0.6em 0 0.9em; font-size: 0.98rem; } /* Tighten content width a touch on large screens */ @media (min-width: 1200px) { .vector-body .mw-content-container { max-width: 980px; } } /* ===== 2) Headings ===== */ .mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3, .mw-parser-output h4 { font-weight: 700; letter-spacing: .2px; } /* Section bar style for H2 */ .mw-parser-output h2 { background: var(--hf-h2-bg); color: var(--hf-h2-fg); border: 1px solid var(--hf-border-strong); padding: 0.35em 0.6em; margin-top: 1.6em; margin-bottom: 0.4em; font-variant: small-caps; } /* Sub-head underline for H3 */ .mw-parser-output h3 { border-bottom: 1px solid var(--hf-border); padding-bottom: .2em; margin-top: 1.2em; } /* ===== 3) Links ===== */ .mw-parser-output a, a.mw-selflink { color: var(--hf-accent); text-decoration: none; } .mw-parser-output a:hover { color: var(--hf-accent-hover); text-decoration: underline; } .mw-parser-output a:visited { color: var(--hf-accent-visited); } /* ===== 4) TOC ===== */ .toc, .mw-table-of-contents { background: var(--hf-bg-subtle); border: 1px solid var(--hf-border); border-radius: 8px; padding: 0.6em 0.8em; } .tocnumber { color: var(--hf-fg-muted); } /* ===== 5) Collapsible [show]/[hide] – make it link-blue ===== */ .mw-collapsible-toggle, .mw-collapsible-toggle .mw-collapsible-text { color: var(--hf-accent); cursor: pointer; } .mw-collapsible-toggle:hover .mw-collapsible-text { text-decoration: underline; } /* If you’re using mw-collapsible mw-collapsed on sections */ .mw-collapsible .mw-collapsible-content { padding-top: .4em; } /* ===== 6) Tables ===== */ .wikitable, table.wikitable.sortable { width: 100%; border: 1px solid var(--hf-border); border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; background: #fff; font-size: 0.95rem; } .wikitable > tr > th, .wikitable > * > tr > th { background: var(--hf-table-header-bg); font-weight: 700; border-bottom: 1px solid var(--hf-border-strong); padding: 0.55em 0.6em; } .wikitable > tr > td, .wikitable > * > tr > td { border-top: 1px solid var(--hf-border); padding: 0.5em 0.6em; } .wikitable tr:nth-child(even) td { background: var(--hf-table-row-alt); } /* Sort arrows breathing room */ .wikitable.sortable th { white-space: nowrap; } /* ===== 7) Infobox / Navbox (generic) ===== */ .infobox, .navbox, .mw-infobox { border: 1px solid var(--hf-border); border-radius: 10px; background: #fff; padding: 0; overflow: hidden; } .infobox .infobox-header, .navbox .navbox-title { background: var(--hf-table-header-bg); font-weight: 700; padding: 0.6em 0.75em; border-bottom: 1px solid var(--hf-border); } .infobox td, .infobox th { padding: 0.5em 0.75em !important; border-top: 1px solid var(--hf-border); } /* ===== 8) Notices / Admonitions ===== */ .hf-notice { border-left: 4px solid var(--hf-info); background: #eef4ff; padding: 0.7em 0.9em; margin: 1em 0; border-radius: 6px; } .hf-notice.warn { border-left-color: var(--hf-warning); background: #fff7e6; } .hf-notice.error{ border-left-color: var(--hf-error); background: #ffefef; } .hf-notice.ok { border-left-color: var(--hf-success); background: #ecfdf3; } /* Usage in wikitext: <div class="hf-notice warn">Watch out…</div> */ /* ===== 9) Code Blocks – dark theme ===== */ pre, code, .mw-code, pre .mw-code, .syntaxhighlight, pre.mw-code { font-family: var(--hf-font-mono); } pre, pre.mw-code, .syntaxhighlight { background: var(--hf-code-bg) !important; color: var(--hf-code-fg) !important; border: 1px solid #0b1220 !important; border-radius: 10px; padding: 0.8em 1em !important; overflow: auto; } /* Inline code */ code { background: #0b1220; color: var(--hf-code-fg); padding: 0.05em 0.35em; border-radius: 4px; } /* ===== 10) Buttons / Links-as-buttons ===== */ .hf-btn, a.hf-btn { display: inline-block; background: var(--hf-accent); color: #fff !important; padding: 0.45em 0.75em; border-radius: 8px; border: 1px solid transparent; text-decoration: none !important; font-weight: 600; } .hf-btn:hover { background: var(--hf-accent-hover); } .hf-btn.ghost { background: transparent; color: var(--hf-accent) !important; border-color: var(--hf-accent); } /* ===== 11) Images / Thumbs ===== */ .thumb, .mw-halign-left .thumb, .mw-halign-right .thumb { border: 1px solid var(--hf-border); border-radius: 10px; overflow: hidden; background: #fff; } .thumb .thumbcaption { background: var(--hf-bg-subtle); border-top: 1px solid var(--hf-border); padding: 0.4em 0.6em; } /* ===== 12) Cleanup odds & ends ===== */ /* Make “External links” icons less loud */ .mw-parser-output .external { padding-right: 0.1em; } /* Reduce overly large firstHeading margins without hiding the title */ .mw-page-title-main { margin-bottom: 0.2em; } /* Optional: soften category box */ .catlinks { background: var(--hf-bg-subtle); border: 1px solid var(--hf-border); border-radius: 8px; padding: .3em .6em; } |
| − | |||
| − | *******************************************************************************/ | ||
| − | |||
| − | /* ===== 0) CSS Vars (easy theming) ===== */ | ||
| − | :root { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | /* ===== 1) Base Typography & Layout ===== */ | ||
| − | body, | ||
| − | .vector-body { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | .mw-parser-output > p { | ||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | /* Tighten content width a touch on large screens */ | ||
| − | @media (min-width: 1200px) { | ||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | /* ===== 2) Headings ===== */ | ||
| − | .mw-parser-output h1, | ||
| − | .mw-parser-output h2, | ||
| − | .mw-parser-output h3, | ||
| − | .mw-parser-output h4 { | ||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | /* Section bar style for H2 */ | ||
| − | .mw-parser-output h2 { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | /* Sub-head underline for H3 */ | ||
| − | .mw-parser-output h3 { | ||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | /* ===== 3) Links ===== */ | ||
| − | .mw-parser-output a, | ||
| − | a.mw-selflink { | ||
| − | |||
| − | |||
| − | } | ||
| − | .mw-parser-output a:hover { | ||
| − | |||
| − | |||
| − | } | ||
| − | .mw-parser-output a:visited { | ||
| − | |||
| − | } | ||
| − | |||
| − | /* ===== 4) TOC ===== */ | ||
| − | .toc, | ||
| − | .mw-table-of-contents { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | .tocnumber { color: var(--hf-fg-muted); } | ||
| − | |||
| − | /* ===== 5) Collapsible [show]/[hide] – make it link-blue ===== */ | ||
| − | .mw-collapsible-toggle, | ||
| − | .mw-collapsible-toggle .mw-collapsible-text { | ||
| − | |||
| − | |||
| − | } | ||
| − | .mw-collapsible-toggle:hover .mw-collapsible-text { | ||
| − | |||
| − | } | ||
| − | |||
| − | /* If you’re using mw-collapsible mw-collapsed on sections */ | ||
| − | .mw-collapsible .mw-collapsible-content { | ||
| − | |||
| − | } | ||
| − | |||
| − | /* ===== 6) Tables ===== */ | ||
| − | .wikitable, | ||
| − | table.wikitable.sortable { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | .wikitable > tr > th, | ||
| − | .wikitable > * > tr > th { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | .wikitable > tr > td, | ||
| − | .wikitable > * > tr > td { | ||
| − | |||
| − | |||
| − | } | ||
| − | .wikitable tr:nth-child(even) td { | ||
| − | |||
| − | } | ||
| − | |||
| − | /* Sort arrows breathing room */ | ||
| − | .wikitable.sortable th { | ||
| − | |||
| − | } | ||
| − | |||
| − | /* ===== 7) Infobox / Navbox (generic) ===== */ | ||
| − | .infobox, | ||
| − | .navbox, | ||
| − | .mw-infobox { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | .infobox .infobox-header, | ||
| − | .navbox .navbox-title { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | .infobox td, | ||
| − | .infobox th { | ||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | /* ===== 8) Notices / Admonitions ===== */ | ||
| − | .hf-notice { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | .hf-notice.warn { border-left-color: var(--hf-warning); background: #fff7e6; } | ||
| − | .hf-notice.error{ border-left-color: var(--hf-error); | ||
| − | .hf-notice.ok | ||
| − | |||
| − | /* Usage in wikitext: | ||
| − | <div class="hf-notice warn">Watch out…</div> | ||
| − | */ | ||
| − | |||
| − | /* ===== 9) Code Blocks – dark theme ===== */ | ||
| − | pre, code, .mw-code, | ||
| − | pre .mw-code, | ||
| − | .syntaxhighlight, pre.mw-code { | ||
| − | |||
| − | } | ||
| − | pre, | ||
| − | pre.mw-code, | ||
| − | .syntaxhighlight { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | /* Inline code */ | ||
| − | code { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | /* ===== 10) Buttons / Links-as-buttons ===== */ | ||
| − | .hf-btn, | ||
| − | a.hf-btn { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | .hf-btn:hover { background: var(--hf-accent-hover); } | ||
| − | .hf-btn.ghost { | ||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | /* ===== 11) Images / Thumbs ===== */ | ||
| − | .thumb, | ||
| − | .mw-halign-left .thumb, | ||
| − | .mw-halign-right .thumb { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | .thumb .thumbcaption { | ||
| − | |||
| − | |||
| − | |||
| − | } | ||
| − | |||
| − | /* ===== 12) Cleanup odds & ends ===== */ | ||
| − | /* Make “External links” icons less loud */ | ||
| − | .mw-parser-output .external { padding-right: 0.1em; } | ||
| − | |||
| − | /* Reduce overly large firstHeading margins without hiding the title */ | ||
| − | .mw-page-title-main { | ||
| − | |||
| − | } | ||
| − | |||
| − | /* Optional: soften category box */ | ||
| − | .catlinks { | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | } | ||
Revision as of 08:23, 10 October 2025
/***** Holdfast Wiki – Modern Base Theme **************************************** Safe, incremental overrides for Vector/Vector-2022. Keep selectors scoped. *******************************************************************************/ /* ===== 0) CSS Vars (easy theming) ===== */ :root { --hf-font-sans: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, "Noto Sans", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; --hf-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; --hf-fg: #16181d; --hf-fg-muted: #5c6773; --hf-bg: #ffffff; --hf-bg-subtle: #f6f7f9; --hf-accent: #2563eb; /* link blue */ --hf-accent-visited: #7c3aed;/* visited purple */ --hf-accent-hover: #1d4ed8; --hf-border: #e5e7eb; --hf-border-strong: #d1d5db; --hf-h2-bg: #3c553c; /* your green header bar */ --hf-h2-fg: #ffffff; --hf-code-bg: #0f172a; /* dark code panel */ --hf-code-fg: #e5e7eb; --hf-table-header-bg: #f3f4f6; --hf-table-row-alt: #fafafa; --hf-warning: #a16207; --hf-error: #b91c1c; --hf-info: #1d4ed8; --hf-success: #15803d; } /* ===== 1) Base Typography & Layout ===== */ body, .vector-body { color: var(--hf-fg); background: var(--hf-bg); font-family: var(--hf-font-sans); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .mw-parser-output > p { margin: 0.6em 0 0.9em; font-size: 0.98rem; } /* Tighten content width a touch on large screens */ @media (min-width: 1200px) { .vector-body .mw-content-container { max-width: 980px; } } /* ===== 2) Headings ===== */ .mw-parser-output h1, .mw-parser-output h2, .mw-parser-output h3, .mw-parser-output h4 { font-weight: 700; letter-spacing: .2px; } /* Section bar style for H2 */ .mw-parser-output h2 { background: var(--hf-h2-bg); color: var(--hf-h2-fg); border: 1px solid var(--hf-border-strong); padding: 0.35em 0.6em; margin-top: 1.6em; margin-bottom: 0.4em; font-variant: small-caps; } /* Sub-head underline for H3 */ .mw-parser-output h3 { border-bottom: 1px solid var(--hf-border); padding-bottom: .2em; margin-top: 1.2em; } /* ===== 3) Links ===== */ .mw-parser-output a, a.mw-selflink { color: var(--hf-accent); text-decoration: none; } .mw-parser-output a:hover { color: var(--hf-accent-hover); text-decoration: underline; } .mw-parser-output a:visited { color: var(--hf-accent-visited); } /* ===== 4) TOC ===== */ .toc, .mw-table-of-contents { background: var(--hf-bg-subtle); border: 1px solid var(--hf-border); border-radius: 8px; padding: 0.6em 0.8em; } .tocnumber { color: var(--hf-fg-muted); } /* ===== 5) Collapsible [show]/[hide] – make it link-blue ===== */ .mw-collapsible-toggle, .mw-collapsible-toggle .mw-collapsible-text { color: var(--hf-accent); cursor: pointer; } .mw-collapsible-toggle:hover .mw-collapsible-text { text-decoration: underline; } /* If you’re using mw-collapsible mw-collapsed on sections */ .mw-collapsible .mw-collapsible-content { padding-top: .4em; } /* ===== 6) Tables ===== */ .wikitable, table.wikitable.sortable { width: 100%; border: 1px solid var(--hf-border); border-collapse: separate; border-spacing: 0; border-radius: 10px; overflow: hidden; background: #fff; font-size: 0.95rem; } .wikitable > tr > th, .wikitable > * > tr > th { background: var(--hf-table-header-bg); font-weight: 700; border-bottom: 1px solid var(--hf-border-strong); padding: 0.55em 0.6em; } .wikitable > tr > td, .wikitable > * > tr > td { border-top: 1px solid var(--hf-border); padding: 0.5em 0.6em; } .wikitable tr:nth-child(even) td { background: var(--hf-table-row-alt); } /* Sort arrows breathing room */ .wikitable.sortable th { white-space: nowrap; } /* ===== 7) Infobox / Navbox (generic) ===== */ .infobox, .navbox, .mw-infobox { border: 1px solid var(--hf-border); border-radius: 10px; background: #fff; padding: 0; overflow: hidden; } .infobox .infobox-header, .navbox .navbox-title { background: var(--hf-table-header-bg); font-weight: 700; padding: 0.6em 0.75em; border-bottom: 1px solid var(--hf-border); } .infobox td, .infobox th { padding: 0.5em 0.75em !important; border-top: 1px solid var(--hf-border); } /* ===== 8) Notices / Admonitions ===== */ .hf-notice { border-left: 4px solid var(--hf-info); background: #eef4ff; padding: 0.7em 0.9em; margin: 1em 0; border-radius: 6px; } .hf-notice.warn { border-left-color: var(--hf-warning); background: #fff7e6; } .hf-notice.error{ border-left-color: var(--hf-error); background: #ffefef; } .hf-notice.ok { border-left-color: var(--hf-success); background: #ecfdf3; } /* Usage in wikitext: <div class="hf-notice warn">Watch out…</div> */ /* ===== 9) Code Blocks – dark theme ===== */ pre, code, .mw-code, pre .mw-code, .syntaxhighlight, pre.mw-code { font-family: var(--hf-font-mono); } pre, pre.mw-code, .syntaxhighlight { background: var(--hf-code-bg) !important; color: var(--hf-code-fg) !important; border: 1px solid #0b1220 !important; border-radius: 10px; padding: 0.8em 1em !important; overflow: auto; } /* Inline code */ code { background: #0b1220; color: var(--hf-code-fg); padding: 0.05em 0.35em; border-radius: 4px; } /* ===== 10) Buttons / Links-as-buttons ===== */ .hf-btn, a.hf-btn { display: inline-block; background: var(--hf-accent); color: #fff !important; padding: 0.45em 0.75em; border-radius: 8px; border: 1px solid transparent; text-decoration: none !important; font-weight: 600; } .hf-btn:hover { background: var(--hf-accent-hover); } .hf-btn.ghost { background: transparent; color: var(--hf-accent) !important; border-color: var(--hf-accent); } /* ===== 11) Images / Thumbs ===== */ .thumb, .mw-halign-left .thumb, .mw-halign-right .thumb { border: 1px solid var(--hf-border); border-radius: 10px; overflow: hidden; background: #fff; } .thumb .thumbcaption { background: var(--hf-bg-subtle); border-top: 1px solid var(--hf-border); padding: 0.4em 0.6em; } /* ===== 12) Cleanup odds & ends ===== */ /* Make “External links” icons less loud */ .mw-parser-output .external { padding-right: 0.1em; } /* Reduce overly large firstHeading margins without hiding the title */ .mw-page-title-main { margin-bottom: 0.2em; } /* Optional: soften category box */ .catlinks { background: var(--hf-bg-subtle); border: 1px solid var(--hf-border); border-radius: 8px; padding: .3em .6em; }