MediaWiki:Common.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

• Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
• Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
• Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* ==========================================================================
   PotterCraft Wiki — Official Theme Stylesheet
   ========================================================================== */

/* ── 1. Color Palette & Variables (:root) ────────────────────────────────── */
:root {
    --bg-main: #1f1e1e;
    /*#171717*/
    --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;
}

/* ── 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-bright) !important;
}

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

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

/* Lists & Bullet Visibility on Dark Backgrounds */
.mw-body-content ul,
.mw-parser-output ul,
ul {
    list-style-type: disc !important;
    list-style-image: none !important;
}

.mw-body-content ol,
.mw-parser-output ol,
ol {
    list-style-image: none !important;
}

.mw-body-content li::marker,
.mw-parser-output li::marker,
li::marker {
    color: var(--accent-gold) !important;
}

#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. Vector Navigation & Sidebar ──────────────────────────────────────── */
.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;
}

/* Sidebar & Header 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 Popup Modals ─────────────────────────────────── */
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;
    border-radius: 6px;
}

/* ── 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;
}

/* 1. PotterCraft OAuth Button (Hero CTA at Top) */
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;
    transition: all 0.2s ease-in-out !important;
    text-align: center !important;
}

#mw-input-pluggableauthlogin0:hover {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%) !important;
    border-color: #a78bfa !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(124, 58, 237, 0.55) !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;
}

/* 2. Deemphasize Local Admin Inputs Below */
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;
}

.oo-ui-window-frame,
.oo-ui-window-content,
.oo-ui-window-body,
.oo-ui-panelLayout,
.oo-ui-panelLayout-padded,
.oo-ui-panelLayout-framed,
.ve-ui-mwSaveDialog,
.ve-ui-mwSaveDialog-options,
.ve-ui-mwSaveDialog-checkboxes,
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget,
.oo-ui-menuOptionWidget,
.oo-ui-selectWidget,
.oo-ui-optionWidget,
.oo-ui-toolbar,
.oo-ui-toolbar-bar,
.ve-ui-toolbar,
.ve-ui-toolbar-bar,
.ve-init-mw-desktopArticleTarget-toolbar,
.ve-init-mw-target-surface .ve-ui-toolbar-bar,
.oo-ui-toolGroup-tools,
.oo-ui-popupToolGroup-tools,
.oo-ui-listToolGroup-tools,
.oo-ui-menuToolGroup-tools,
.oo-ui-toolGroup-tools .oo-ui-tool,
.oo-ui-toolGroup-tools .oo-ui-tool-link,
.oo-ui-popupHeader,
.mwe-popups,
.ve-ui-overlay,
.editor-toolbar {
    background-color: var(--bg-card) !important;
    background-image: none !important;
    color: var(--text-bright) !important;
    border-color: var(--border-main) !important;
}

.oo-ui-menuOptionWidget-highlighted,
.oo-ui-menuOptionWidget-selected,
.oo-ui-optionWidget-highlighted,
.oo-ui-optionWidget-selected,
.oo-ui-tool-active,
.oo-ui-tool-active .oo-ui-tool-link,
.oo-ui-tool:hover,
.oo-ui-tool-link:hover,
.oo-ui-toolGroup-header:hover,
.oo-ui-popupToolGroup-header:hover,
.oo-ui-listToolGroup-header:hover,
.oo-ui-menuToolGroup-header:hover,
.oo-ui-toolGroup-handle:hover,
.oo-ui-popupToolGroup-handle:hover,
.oo-ui-listToolGroup-handle:hover,
.oo-ui-menuToolGroup-handle:hover,
.oo-ui-toolGroup-active .oo-ui-toolGroup-handle,
.oo-ui-popupToolGroup-active .oo-ui-popupToolGroup-handle,
.oo-ui-toolGroup-tools .oo-ui-tool:hover {
    background-color: var(--border-main) !important;
    background-image: none !important;
    color: var(--accent-yellow) !important;
}

.oo-ui-toolGroup-handle,
.oo-ui-popupToolGroup-handle,
.oo-ui-listToolGroup-handle,
.oo-ui-menuToolGroup-handle {
    background-color: var(--bg-card) !important;
    background-image: none !important;
    color: var(--text-bright) !important;
}

.oo-ui-labelElement-label,
.oo-ui-tool-name,
.oo-ui-tool-title,
.oo-ui-fieldLayout-header,
.oo-ui-fieldLayout-body,
.oo-ui-messageWidget,
.oo-ui-optionWidget .oo-ui-labelElement-label,
.oo-ui-toolGroup-tools .oo-ui-tool-title,
.oo-ui-toolGroup-tools .oo-ui-tool-name {
    color: var(--text-bright) !important;
}

.oo-ui-tool:hover .oo-ui-tool-title,
.oo-ui-tool:hover .oo-ui-tool-name,
.oo-ui-toolGroup-header:hover .oo-ui-labelElement-label,
.oo-ui-popupToolGroup-header:hover .oo-ui-labelElement-label,
.oo-ui-toolGroup-handle:hover .oo-ui-labelElement-label,
.oo-ui-popupToolGroup-handle:hover .oo-ui-labelElement-label {
    color: var(--accent-yellow) !important;
}

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

/* ── 6. Component Styles (.tl-* Timeline, wikitables, code) ─────────────── */
/* Timeline System */
.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%);
}

/* Wikitables */
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 Blocks */
code, pre {
    background-color: var(--bg-card) !important;
    color: var(--accent-yellow) !important;
    border: 1px solid var(--border-main) !important;
    border-radius: 4px;
}

/* Table of Contents (#toc Dark Card Theme) */
#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;
}

/* ── MediaWiki Message Boxes & Special:Upload Notices ─────────────────────── */
.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;
    background-color: var(--bg-card) !important;
    color: var(--text-bright) !important;
}

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

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

.mw-message-box-success,
.successbox,
.cdx-message--success {
    border-left: 4px solid #22c55e !important;
    background-color: var(--bg-card) !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;
}

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

/* ── Standard 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;
}

/* ── Edit Saved Toast Notification ───────────────────────────────────────── */
.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;
}

/* ── 7. Revision History & Diff Pages ────────────────────────────────────── */
#pagehistory,
#pagehistory li,
.mw-history-line,
.mw-history-revision,
.citizen-history-revision,
.cdx-card,
.cdx-card--framed,
fieldset#mw-history-search,
.mw-history-legend {
    background-color: var(--bg-card) !important;
    background-image: none !important;
    color: var(--text-body) !important;
    border-color: var(--border-main) !important;
}

#pagehistory li {
    border: 1px solid var(--border-main) !important;
    border-radius: 6px !important;
    padding: 8px 12px !important;
    margin-bottom: 6px !important;
}

#pagehistory li:hover {
    background-color: #302f2f !important;
    border-color: var(--border-header) !important;
}

#pagehistory li.selected,
#pagehistory li.mw-history-line-selected {
    background-color: #383535 !important;
    border-color: var(--accent-gold) !important;
}

#pagehistory li * {
    color: var(--text-body) !important;
}

#pagehistory li a,
.mw-history-histlinks a,
.mw-userlink,
.mw-history-undo a {
    color: var(--accent-gold) !important;
}

#pagehistory li a:hover,
.mw-userlink:hover {
    color: var(--accent-yellow) !important;
}

.mw-history-date,
.mw-history-revisiondate {
    color: var(--accent-yellow) !important;
    font-weight: bold !important;
}

.comment,
.mw-history-comment {
    color: var(--text-subtle) !important;
    font-style: italic !important;
}

.mw-plusminus-pos {
    color: #22c55e !important;
}

.mw-plusminus-neg {
    color: #ef4444 !important;
}

.mw-plusminus-null {
    color: var(--text-subtle) !important;
}

.mw-tag-marker {
    background-color: var(--border-main) !important;
    color: var(--accent-yellow) !important;
    border: 1px solid var(--border-header) !important;
    border-radius: 4px !important;
    padding: 1px 6px !important;
}

/* Diff Comparison Table */
table.diff,
.diff-context,
.diff-lineno {
    background-color: var(--bg-card) !important;
    color: var(--text-body) !important;
    border-color: var(--border-main) !important;
}

.diff-deletedline {
    background-color: rgba(239, 68, 68, 0.15) !important;
    border-color: #ef4444 !important;
    color: #fca5a5 !important;
}

.diff-deletedline del,
.diffchange-inline {
    background-color: rgba(239, 68, 68, 0.35) !important;
    color: #ffffff !important;
}

.diff-addedline {
    background-color: rgba(34, 197, 94, 0.15) !important;
    border-color: #22c55e !important;
    color: #86efac !important;
}

.diff-addedline ins,
.diffchange-inline {
    background-color: rgba(34, 197, 94, 0.35) !important;
    color: #ffffff !important;
}

.diff-marker {
    color: var(--accent-gold) !important;
    font-weight: bold !important;
}