MediaWiki:Common.css: Difference between revisions

Latest revision as of 20:24, 14 September 2026

/* ==========================================================================
   PotterCraft Wiki — Official Theme Stylesheet (Token-Based Dark Architecture)
   ========================================================================== */

/* ── 1. Universal Design Tokens (:root) ──────────────────────────────────── */
:root {
    /* ── Core Palette ──────────────────────────────────────────────────────── */
    --bg-main: #1f1e1e;
    --bg-card: #282727;
    --border-main: #383838;
    --border-header: #484848;
    --accent-gold: #f59e0b;
    --accent-yellow: #fde047;
    --text-bright: #ffffff;
    --text-body: #e5e5e5;
    --text-muted: #d4d4d4;
    --text-subtle: #a3a3a3;
    --color-danger: #ef4444;

    /* ── MediaWiki & Codex Universal Background Tokens ─────────────────────── */
    --background-color-base:               var(--bg-main) !important;
    --background-color-surface:            var(--bg-card) !important;
    --background-color-surface-subtle:     #232222 !important;
    --background-color-interactive:        var(--bg-card) !important;
    --background-color-interactive-subtle: #333232 !important;
    --background-color-neutral:            var(--bg-card) !important;
    --background-color-neutral-subtle:     var(--bg-card) !important;
    --background-color-disabled:           #1a1a1a !important;
    --background-color-backdrop:           rgba(0, 0, 0, 0.65) !important;

    /* ── MediaWiki & Codex Universal Text & Foreground Tokens ──────────────── */
    --color-base:                          var(--text-body) !important;
    --color-base--hover:                   var(--text-bright) !important;
    --color-emphasized:                    var(--text-bright) !important;
    --color-subtle:                        var(--text-subtle) !important;
    --color-placeholder:                   #737373 !important;
    --color-disabled:                      #525252 !important;
    --color-inverted:                      #171717 !important;
    --color-progressive:                   var(--accent-gold) !important;
    --color-progressive--hover:            var(--accent-yellow) !important;
    --color-destructive:                   var(--color-danger) !important;

    /* ── MediaWiki & Codex Universal Border Tokens ─────────────────────────── */
    --border-color-base:                   var(--border-main) !important;
    --border-color-subtle:                 #2a2a2a !important;
    --border-color-muted:                  var(--border-main) !important;
    --border-color-interactive:            var(--border-header) !important;
    --border-color-progressive:            var(--accent-gold) !important;
    --border-color-destructive:            var(--color-danger) !important;

    /* ── Citizen Skin Native Variables (If Citizen is Active) ──────────────── */
    --color-surface-0: #171717 !important;
    --color-surface-1: #1f1e1e !important;
    --color-surface-2: #282727 !important;
    --color-surface-3: #333232 !important;
    --color-surface-4: #3f3e3e !important;
    --color-primary:   var(--accent-gold) !important;
}

/* ── 2. Base Page & Typography ────────────────────────────────────────────── */
html, body,
#mw-page-base, #mw-head-base,
#content, .mw-body,
#mw-navigation, #mw-head, #mw-panel,
.vector-header-container, .mw-page-container,
.mw-workspace-container, #mw-content-container,
#footer, .mw-footer {
    background-color: var(--bg-main) !important;
    background-image: none !important;
    color: var(--text-body) !important;
}

#content, .mw-body {
    border-color: var(--border-main) !important;
}

.mw-body-content, p, li, dd, dt, table {
    color: var(--text-body) !important;
}

/* Article Lists & Bullets (Scoped cleanly to wikitext content) */
.mw-parser-output li::marker {
    color: var(--accent-gold);
}

#footer, .mw-footer {
    color: var(--text-subtle) !important;
    border-top: 1px solid var(--border-main) !important;
}

#footer a, .mw-footer a {
    color: var(--text-muted) !important;
}

/* ── 3. Links & Headings ─────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6,
.firstHeading, #firstHeading, .mw-first-heading {
    color: var(--accent-yellow) !important;
    font-family: 'Cinzel', Georgia, serif !important;
    border-bottom: 1px solid var(--border-main) !important;
}

h1, .firstHeading, #firstHeading {
    border-bottom: 2px solid var(--accent-gold) !important;
}

a, .mw-body-content a {
    color: var(--accent-gold) !important;
    font-weight: inherit !important;
    text-decoration: underline !important;
    text-decoration-color: var(--accent-gold) !important;
}

a:hover, .mw-body-content a:hover {
    color: var(--accent-yellow) !important;
    text-decoration: underline !important;
    text-decoration-color: var(--accent-yellow) !important;
}

a.new, .mw-body-content a.new {
    color: var(--color-danger) !important;
}

/* ── 4. Navigation, Sidebar & Logos ──────────────────────────────────────── */
.vector-menu-tabs, .vector-menu-tabs *,
.vector-tab-noicon, .vector-menu-dropdown {
    background: transparent !important;
}

.vector-menu-tabs li {
    background-color: var(--bg-card) !important;
    border-color: var(--border-main) !important;
}

.vector-menu-tabs li a {
    color: var(--text-muted) !important;
}

.vector-menu-tabs li.selected {
    background-color: var(--border-main) !important;
    border-color: var(--accent-gold) !important;
}

.vector-menu-tabs li.selected a {
    color: var(--accent-yellow) !important;
}

#mw-panel *, .vector-menu-portal * {
    color: var(--text-muted) !important;
}

/* Logo Scaling */
#p-logo,
#p-logo .mw-wiki-logo,
.mw-wiki-logo,
#p-logo a {
    background-size: contain !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
    width: 100% !important;
    max-width: 155px !important;
    height: 120px !important;
    margin: 0 auto 10px auto !important;
}

.mw-logo,
.mw-logo-icon,
.mw-logo-wordmark {
    object-fit: contain !important;
    max-height: 50px !important;
    max-width: 160px !important;
    width: auto !important;
}

/* ── 5. Form Inputs & OOUI Dialogs ───────────────────────────────────────── */
input, select, textarea, button,
.oo-ui-inputWidget-input,
.oo-ui-dropdownWidget-handle,
.oo-ui-dropdownInputWidget-select,
.oo-ui-buttonElement-button,
.mw-searchInput {
    background-color: var(--bg-card) !important;
    color: var(--text-bright) !important;
    border: 1px solid var(--border-main) !important;
}

/* Invert OOUI & VisualEditor SVG icons for dark mode contrast */
.oo-ui-iconElement-icon,
.oo-ui-indicatorElement-indicator {
    filter: invert(0.85) !important;
}

/* ── 6. Login Form & OAuth Priority Button ───────────────────────────────── */
#pt-createaccount,
#mw-createaccount-cta,
a[href*="Special:CreateAccount"] {
    display: none !important;
}

#userloginForm form,
form[name="userlogin"],
.mw-userlogin-form form,
.mw-htmlform-codex {
    display: flex !important;
    flex-direction: column !important;
    max-width: 440px !important;
    margin: 0 auto !important;
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 10px !important;
    padding: 24px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

div.cdx-field:has(#mw-input-pluggableauthlogin0),
div.mw-htmlform-field-HTMLSubmitField:has(#mw-input-pluggableauthlogin0),
div.mw-htmlform-field-HTMLSubmitField:has([name^="pluggableauthlogin"]) {
    order: -10 !important;
    margin: 0 0 24px 0 !important;
    padding-bottom: 20px !important;
    border-bottom: 1px solid var(--border-main) !important;
    display: flex !important;
    flex-direction: column !important;
}

#mw-input-pluggableauthlogin0 {
    width: 100% !important;
    background: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%) !important;
    border: 1px solid #8b5cf6 !important;
    color: #ffffff !important;
    font-weight: bold !important;
    font-size: 1.15em !important;
    padding: 14px 20px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    box-shadow: 0 4px 14px rgba(124, 58, 237, 0.4) !important;
    text-align: center !important;
}

#mw-input-pluggableauthlogin0:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-color: #a78bfa !important;
}

div.cdx-field:has(#mw-input-pluggableauthlogin0)::after {
    content: "— or local admin login —";
    display: block;
    text-align: center;
    color: var(--text-subtle);
    font-size: 0.82em;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-top: 18px;
}

div.cdx-field:has(#wpName1) { order: 1 !important; }
div.cdx-field:has(#wpPassword1) { order: 2 !important; }
div.cdx-field:has(#wpRemember) { order: 3 !important; }
div.cdx-field:has(#wpLoginAttempt) { order: 4 !important; }

#wpLoginAttempt {
    background-color: var(--border-main) !important;
    border: 1px solid var(--border-header) !important;
    color: var(--text-muted) !important;
    font-size: 0.95em !important;
    border-radius: 6px !important;
}

#wpLoginAttempt:hover {
    background-color: #454545 !important;
    color: var(--text-bright) !important;
}

div.mw-form-related-link-container {
    order: 5 !important;
}

/* ── 7. Timeline Component Styles (.tl-*) ────────────────────────────────── */
.tl-container {
    position: relative;
    max-width: 800px;
    margin: 30px auto;
    padding: 10px 0;
}

.tl-container::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-main);
    transform: translateX(-50%);
}

.tl-item {
    display: flex;
    margin-bottom: 35px;
    position: relative;
}

.tl-left { justify-content: flex-start; }
.tl-right { justify-content: flex-end; }

.tl-card {
    width: 44%;
    background: var(--bg-card);
    border: 1px solid var(--border-main);
    border-radius: 8px;
    padding: 14px 18px;
}

.tl-left .tl-card { text-align: right; }
.tl-right .tl-card { text-align: left; }

.tl-date {
    color: var(--text-subtle);
    font-size: 0.85em;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
}

.tl-title {
    color: var(--accent-gold);
    font-size: 1.35em;
    font-weight: bold;
    font-family: 'Cinzel', Georgia, serif;
    margin-bottom: 6px;
}

.tl-text {
    color: var(--text-muted);
    font-size: 0.95em;
    line-height: 1.45;
}

.tl-dot {
    position: absolute;
    left: 50%;
    top: 22px;
    width: 12px;
    height: 12px;
    background: var(--accent-gold);
    border-radius: 50%;
    transform: translate(-50%, -50%);
}

/* ── 8. Wikitables, Code & Table of Contents ─────────────────────────────── */
table.wikitable {
    background-color: var(--bg-card) !important;
    color: var(--text-bright) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 8px;
    overflow: hidden;
}

table.wikitable th {
    background-color: var(--border-main) !important;
    color: var(--accent-yellow) !important;
    border-color: var(--border-header) !important;
}

table.wikitable td {
    border-color: var(--border-main) !important;
}

table.wikitable tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.03) !important;
}

code, pre {
    background-color: var(--bg-card) !important;
    color: var(--accent-yellow) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 4px;
}

#toc, .toc, .mw-toc, .vector-toc {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 8px !important;
    padding: 14px 18px !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
    color: var(--text-body) !important;
}

#toctitle, .toctitle, .mw-toc-heading, #toctitle h2, .toctitle h2 {
    color: var(--accent-yellow) !important;
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 1.15em !important;
    border-bottom: 1px solid var(--border-main) !important;
    padding-bottom: 6px !important;
    margin-bottom: 10px !important;
}

.toctogglelabel { color: var(--accent-gold) !important; }
.tocnumber { color: var(--accent-gold) !important; font-weight: bold !important; margin-right: 4px !important; }
.toctext { color: var(--text-bright) !important; }
#toc a:hover .toctext, .toc a:hover .toctext { color: var(--accent-yellow) !important; }

/* ── 9. MediaWiki System Messages & Uploads ──────────────────────────────── */
.mw-message-box,
.messagebox,
.warningbox,
.errorbox,
.successbox,
.cdx-message,
.mw-destfile-warning,
.mw-warning-with-logexcerpt,
#mw-upload-permitted,
#wpDestFile-warning {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-main) !important;
    color: var(--text-body) !important;
    border-radius: 6px !important;
    padding: 12px 16px !important;
    margin: 12px 0 !important;
}

.mw-message-box-notice,
.cdx-message--notice,
.mw-destfile-warning,
#wpDestFile-warning {
    border-left: 4px solid var(--accent-gold) !important;
    color: var(--text-bright) !important;
}

.mw-message-box-warning,
.warningbox,
.cdx-message--warning {
    border-left: 4px solid var(--accent-yellow) !important;
    color: var(--text-bright) !important;
}

.mw-message-box-error,
.errorbox,
.cdx-message--error {
    border-left: 4px solid #ef4444 !important;
    color: var(--text-bright) !important;
}

.mw-message-box-success,
.successbox,
.cdx-message--success {
    border-left: 4px solid #22c55e !important;
    color: var(--text-bright) !important;
}

#mw-upload-thumbnail,
.mw-upload-editform {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-main) !important;
    color: var(--text-body) !important;
}

#catlinks,
.catlinks {
    background-color: var(--bg-card) !important;
    border-color: var(--border-main) !important;
}

/* ── 10. Wikipedia Infobox ────────────────────────────────────────────────── */
.infobox {
    border: 1px solid var(--border-main) !important;
    background-color: var(--bg-card) !important;
    color: var(--text-body) !important;
    margin: 0.5em 0 1em 1.5em !important;
    padding: 0 !important;
    float: right !important;
    clear: right !important;
    width: 290px !important;
    font-size: 88% !important;
    line-height: 1.5em !important;
    border-collapse: collapse !important;
}

.infobox th,
.infobox td {
    padding: 6px 10px !important;
    border-bottom: 1px solid var(--border-main) !important;
    vertical-align: top !important;
}

.infobox-title {
    background-color: #202020 !important;
    color: var(--accent-yellow) !important;
    font-family: 'Cinzel', Georgia, serif !important;
    font-size: 1.2em !important;
    text-align: center !important;
    padding: 10px 12px !important;
    border-bottom: 2px solid var(--accent-gold) !important;
}

.infobox-subheader {
    text-align: center !important;
    font-size: 90% !important;
    color: #c4b5fd !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    background-color: #24202c !important;
}

.infobox-image {
    text-align: center !important;
    padding: 10px !important;
    background-color: #171717 !important;
}

.infobox-header {
    background-color: #333333 !important;
    color: var(--accent-yellow) !important;
    text-align: center !important;
    font-weight: bold !important;
}

.infobox-label {
    text-align: left !important;
    color: var(--accent-gold) !important;
    font-weight: bold !important;
    width: 35% !important;
}

.infobox-data {
    text-align: left !important;
    color: var(--text-body) !important;
}

.infobox-below {
    text-align: center !important;
    font-size: 85% !important;
    color: var(--text-muted) !important;
}

.mw-notification,
.mw-notification-visible,
.mw-notification-area .mw-notification {
    background-color: var(--bg-card) !important;
    color: var(--text-bright) !important;
    border-color: var(--border-main) !important;
}

/* ── 11. Front Page & Portal Components ───────────────────────────────────── */
.portal-card-grid,
.card-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 16px !important;
    margin-bottom: 30px !important;
}

.portal-card {
    background: #282727 !important;
    border: 1px solid #383838 !important;
    border-radius: 8px !important;
    padding: 18px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3) !important;
}

.portal-card h3 {
    margin-top: 0 !important;
    color: #ffffff !important;
    border: none !important;
    font-size: 1.2em !important;
}

.portal-card p {
    font-size: 0.95em !important;
    color: #d4d4d4 !important;
    line-height: 1.5 !important;
}

.page-header-box {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-main) !important;
    padding: 22px 20px !important;
    border-radius: 8px !important;
    margin-bottom: 24px !important;
}

.page-header-box h1 {
    color: var(--accent-yellow) !important;
    font-size: 2.2em !important;
    margin: 0 0 8px 0 !important;
    border: none !important;
    font-family: 'Cinzel', Georgia, serif !important;
}

.page-header-box p {
    margin: 0 0 8px 0 !important;
    color: var(--text-muted) !important;
    font-size: 1.05em !important;
    line-height: 1.5 !important;
}

.page-header-box p:last-child {
    margin-bottom: 0 !important;
}

.create-page-box {
    background-color: var(--bg-card) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 8px !important;
    padding: 24px !important;
    text-align: center !important;
    max-width: 600px !important;
    margin: 20px auto !important;
}

.create-page-box h2 {
    color: var(--accent-yellow) !important;
    font-family: 'Cinzel', Georgia, serif !important;
    margin: 0 0 12px 0 !important;
    border: none !important;
}

.create-page-box p {
    color: var(--text-muted) !important;
    font-size: 0.95em !important;
    line-height: 1.5 !important;
    margin: 0 0 16px 0 !important;
}

.create-page-box .create-page-subtext {
    color: var(--text-subtle) !important;
    font-size: 0.88em !important;
    margin: 16px 0 0 0 !important;
}