MediaWiki:Common.css

From Bitcraft Wiki
Revision as of 15:11, 27 December 2025 by Stewiee (talk | contribs)
Jump to navigation Jump to search

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.
/* ===== Bitcraft Wiki base theme (Vector 2010) ===== */
/* No background images, just colours – tweak hex codes later */

/* --- Global colour variables --- */
:root {
    --bitcraft-bg: #050b16;              /* outer background */
    --bitcraft-surface: #ffffff;         /* article background */
    --bitcraft-surface-muted: #0b1220;   /* sidebars / bars */
    --bitcraft-text-main: #111827;       /* article text */
    --bitcraft-link: #38bdf8;
    --bitcraft-link-hover: #0ea5e9;
    --bitcraft-border-subtle: #e5e7eb;
    --bitcraft-footer-bg: #020617;
    --bitcraft-footer-text: #e5e7eb;
}

/* --- Overall page background --- */
html,
body {
    background-color: var(--bitcraft-bg);
}

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

/* --- Left sidebar --- */
#mw-panel {
    background-color: var(--bitcraft-surface-muted);
    color: #e5e7eb;
}

#mw-panel .vector-menu-heading {
    color: #e5e7eb !important;
    font-weight: 600;
}

#mw-panel .vector-menu-content a,
#mw-panel .vector-menu-content a:visited {
    color: #bfdbfe !important;
}
#mw-panel .vector-menu-content a:hover {
    color: #e0f2fe !important;
}

/* --- Main article “card” --- */
.mw-body {
    background-color: var(--bitcraft-surface);
    color: var(--bitcraft-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(--bitcraft-text-main);
    border-color: var(--bitcraft-border-subtle);
}

/* ===== Top tabs: Main/Discussion + Read/Edit/View history/More ===== */

/* Modern Vector tabs */
.vector-menu-tabs .vector-menu-content-list > li > a,
.vector-menu-tabs .vector-menu-content-list > li > a:visited {
    background-color: #111827 !important;          /* dark pill */
    color: #ffffff !important;                     /* white text */
    border-color: #1f2937 #1f2937 transparent !important;
}

/* Selected tab */
.vector-menu-tabs .vector-menu-content-list > li.selected > a {
    background-color: #1f2937 !important;          /* slightly lighter */
    color: #ffffff !important;
    border-bottom-color: transparent !important;
}

/* Hover state */
.vector-menu-tabs .vector-menu-content-list > li > a:hover {
    background-color: #111827 !important;
    color: #bfdbfe !important;
}

/* Older Vector markup (.vectorTabs) – belt-and-braces */
.vectorTabs li a,
.vectorTabs li a:visited {
    background-color: #111827 !important;
    color: #ffffff !important;
    border-color: #1f2937 #1f2937 transparent !important;
}

.vectorTabs li.selected a {
    background-color: #1f2937 !important;
}

.vectorTabs li a:hover {
    background-color: #111827 !important;
    color: #bfdbfe !important;
}

/* Personal links (Stewie, Talk, Preferences, etc.) */
#p-personal a,
#p-personal a:visited {
    color: #e5e7eb;
}
#p-personal a:hover {
    color: #bfdbfe;
}

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

.vector-search-box input,
.vector-search-box .cdx-text-input__input {
    background-color: #020617;
    color: #e5e7eb;
    border-color: #1e293b;
}
.vector-search-box input::placeholder,
.vector-search-box .cdx-text-input__input::placeholder {
    color: #64748b;
}

/* --- Links inside article content --- */
.mw-body a {
    color: var(--bitcraft-link);
}
.mw-body a:hover {
    color: var(--bitcraft-link-hover);
}
.mw-body a:visited {
    color: var(--bitcraft-link-hover);
}
.mw-body a.new {
    color: #f97373 !important; /* redlinks */
}

/* --- Footer --- */
.mw-footer,
#footer {
    background: var(--bitcraft-footer-bg);
    color: var(--bitcraft-footer-text);
    border-top: none;
}
.mw-footer a,
.mw-footer a:visited,
.mw-footer a:active {
    color: #93c5fd;
}