MediaWiki:Common.css: Difference between revisions

Revision as of 16:16, 27 December 2025

/* ===== Bitcraft Wiki base theme (Vector 2010) ===== */
/* All colours via :root variables so they only need changing once */

:root {
    /* Layout */
    --page-bg: #050b16;             /* overall page background */
    --surface-main: #ffffff;        /* article background */
    --surface-muted: #050b16;       /* sidebar / chrome */

    /* Text */
    --text-main: #111827;           /* main article text */
    --text-on-dark: #e5e7eb;        /* text on dark areas */
    --background-text-color: var(--text-on-dark); /* alias example you gave */

    /* Links */
    --link-color: #38bdf8;
    --link-hover-color: #0ea5e9;
    --link-visited-color: #0ea5e9;
    --link-new-color: #f97373;

    /* Nav tabs (top bar) */
    --nav-tab-bg: #050b16;
    --nav-tab-bg-active: #1f2937;
    --nav-tab-border: #1f2937;
    --nav-tab-text: #ffffff;
    --nav-tab-hover-text: #bfdbfe;

    /* Sidebar links */
    --sidebar-link-color: #bfdbfe;
    --sidebar-link-hover-color: #e0f2fe;

    /* Borders */
    --border-subtle: #e5e7eb;

    /* Search box */
    --search-bg: #050b16;
    --search-border: #1e293b;
    --search-placeholder: #64748b;

    /* Footer */
    --footer-bg: #050b16;
    --footer-text: #e5e7eb;
    --footer-link: #93c5fd;
}

/* ===== Global background ===== */

html,
body {
    background-color: var(--page-bg);
}

/* Remove the default Vector grey bar at the very top */
#mw-page-base,
#mw-head-base {
    background: transparent !important;
    box-shadow: none;
    border: 0;
}

/* ===== Sidebar (left nav) ===== */

#mw-panel {
    background-color: var(--surface-muted);
    color: var(--text-on-dark);
}

#mw-panel .vector-menu-heading {
    color: var(--text-on-dark) !important;
    font-weight: 600;
}

#mw-panel .vector-menu-content a,
#mw-panel .vector-menu-content a:visited {
    color: var(--sidebar-link-color) !important;
}

#mw-panel .vector-menu-content a:hover {
    color: var(--sidebar-link-hover-color) !important;
}

/* ===== Main article “card” ===== */

.mw-body {
    background-color: var(--surface-main);
    color: var(--text-main);
    border-color: transparent;
    box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}

/* Article headings */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
    color: var(--text-main);
    border-color: var(--border-subtle);
}

/* ===== Top tabs (Main / Discussion / Read / Edit / View history / More) ===== */

/* Modern Vector tab markup */
.vector-menu-tabs .vector-menu-content-list > li > a,
.vector-menu-tabs .vector-menu-content-list > li > a:visited {
    background-color: var(--nav-tab-bg) !important;
    color: var(--nav-tab-text) !important;
    border-color: var(--nav-tab-border) var(--nav-tab-border) transparent !important;
}

.vector-menu-tabs .vector-menu-content-list > li.selected > a {
    background-color: var(--nav-tab-bg-active) !important;
    color: var(--nav-tab-text) !important;
    border-bottom-color: transparent !important;
}

.vector-menu-tabs .vector-menu-content-list > li > a:hover {
    background-color: var(--nav-tab-bg) !important;
    color: var(--nav-tab-hover-text) !important;
}

/* Older Vector markup (.vectorTabs) – for safety */
.vectorTabs li a,
.vectorTabs li a:visited {
    background-color: var(--nav-tab-bg) !important;
    color: var(--nav-tab-text) !important;
    border-color: var(--nav-tab-border) var(--nav-tab-border) transparent !important;
}

.vectorTabs li.selected a {
    background-color: var(--nav-tab-bg-active) !important;
}

.vectorTabs li a:hover {
    background-color: var(--nav-tab-bg) !important;
    color: var(--nav-tab-hover-text) !important;
}

/* Personal links (Stewie, Talk, Preferences, etc.) */
#p-personal a,
#p-personal a:visited {
    color: var(--text-on-dark);
}

#p-personal a:hover {
    color: var(--nav-tab-hover-text);
}

/* ===== Search box ===== */

#p-search,
.vector-search-box {
    background: transparent;
}

.vector-search-box input,
.vector-search-box .cdx-text-input__input {
    background-color: var(--search-bg);
    color: var(--text-on-dark);
    border-color: var(--search-border);
}

.vector-search-box input::placeholder,
.vector-search-box .cdx-text-input__input::placeholder {
    color: var(--search-placeholder);
}

/* ===== Links inside article content ===== */

.mw-body a {
    color: var(--link-color);
}

.mw-body a:hover {
    color: var(--link-hover-color);
}

.mw-body a:visited {
    color: var(--link-visited-color);
}

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

/* ===== Footer ===== */

/* Footer background + base text colour */
.mw-footer,
#footer {
    background: var(--footer-bg);
    border-top: none;
}

/* Force footer text to readable white/near white */
.mw-footer,
.mw-footer * ,
#footer,
#footer * {
    color: var(--footer-text) !important;
}

/* Footer links */
.mw-footer a,
.mw-footer a:visited,
.mw-footer a:active,
#footer a,
#footer a:visited,
#footer a:active {
    color: var(--footer-link) !important;
}

/* ===== Footer icon styling ===== */

.footer-icons {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Wrap the icons in a nice white tile */
.footer-icons img {
    background: #ffffff;
    padding: 6px;
    border-radius: 6px;
    box-shadow: 0 0 4px rgba(0,0,0,0.4);
}