MediaWiki:Common.css: Difference between revisions

From Bitcraft Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
Line 1: Line 1:
/* ===== Bitcraft global layout & background ===== */
/* ===== Bitcraft base theme (Vector 2010) ===== */


/* Dark outer background + hero image */
/* Global colour variables – tweak later */
:root {
    --bitcraft-body-bg: #050b16;          /* dark outer background */
    --bitcraft-body-main: #ffffff;      /* article background */
    --bitcraft-text-color: #111827;
    --bitcraft-link: #38bdf8;
    --bitcraft-link-hover: #0ea5e9;
    --bitcraft-footer-text: #e5e7eb;
    --bitcraft-footer-bg: #020617;
    --body-background-image: url("/images/background.png");
}
 
/* Overall page background + hero image behind logo & top bar */
html,
html,
body {
body {
     background-color: #050b16; /* deep navy */
     background-color: var(--bitcraft-body-bg);
    background-image: var(--body-background-image);
     background-repeat: no-repeat;
     background-repeat: no-repeat;
     background-position: left top;
     background-position: left top;
     background-size: 1100px auto; /* tweak this to fit your art */
     background-size: 1000px auto; /* adjust width/height as needed */
}
 
 
#mw-page-base {
    background: #050b16 url("/images/background.png") no-repeat left top;
    background-size: 900px auto;  /* tweak this number to fit your art */
}
}


/* Remove default Vector grey/white header blocks */
#mw-page-base,
#mw-head-base {
#mw-head-base {
     background: none !important;
     background: transparent !important;
}
     box-shadow: none;
 
     border: 0;
/* Article box (keep this light like Brighter Shores) */
.mw-body {
    background-color: #ffffff;
    color: #111827; /* dark text */
    border-color: transparent;
     box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
     margin-top: 0;
}
}


/* Headings inside articles */
/* Sidebar: let the art show at top, dark lower down */
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6 {
    color: #111827;
    border-color: #e5e7eb;
}
 
/* ===== Sidebar (left menu) ===== */
 
#mw-panel {
#mw-panel {
     background: rgba(3, 7, 18, 0.96); /* almost black, lets art peek around it */
     background: linear-gradient(
        to bottom,
        rgba(5, 11, 22, 0) 0,
        rgba(5, 11, 22, 0.9) 140px,
        rgba(5, 11, 22, 1) 100%
    );
     color: #e5e7eb;
     color: #e5e7eb;
}
}


/* Sidebar headings + links */
#mw-panel .vector-menu-heading {
#mw-panel .vector-menu-heading {
     color: #e5e7eb !important;
     color: #e5e7eb !important;
Line 54: Line 50:
#mw-panel .vector-menu-content a,
#mw-panel .vector-menu-content a,
#mw-panel .vector-menu-content a:visited {
#mw-panel .vector-menu-content a:visited {
     color: #bfdbfe !important;   /* light blue links */
     color: #bfdbfe !important;
}
}
#mw-panel .vector-menu-content a:hover {
#mw-panel .vector-menu-content a:hover {
     color: #e0f2fe !important;
     color: #e0f2fe !important;
}
}


/* ===== Top tab bar (Read / Edit / View history / More) ===== */
/* Article “card” in the middle */
.mw-body {
    background-color: var(--bitcraft-body-main);
    color: var(--bitcraft-text-color);
    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-color);
    border-color: #e5e7eb;
}


/* Top tabs (Read / Edit / View history / More) */
.vector-menu-tabs .vector-menu-content-list > li > a,
.vector-menu-tabs .vector-menu-content-list > li > a,
.vector-menu-tabs .vector-menu-content-list > li > a:visited {
.vector-menu-tabs .vector-menu-content-list > li > a:visited {
Line 71: Line 84:


.vector-menu-tabs .vector-menu-content-list > li.selected > a {
.vector-menu-tabs .vector-menu-content-list > li.selected > a {
     background-color: rgba(15, 23, 42, 0.85); /* subtle pill for active tab */
     background-color: rgba(15, 23, 42, 0.85);
     border-color: #1d4ed8 #1d4ed8 transparent;
     border-color: #1d4ed8 #1d4ed8 transparent;
     color: #ffffff;
     color: #ffffff;
Line 85: Line 98:
     color: #e5e7eb;
     color: #e5e7eb;
}
}
#p-personal a:hover {
#p-personal a:hover {
     color: #bfdbfe;
     color: #bfdbfe;
}
}


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


.vector-search-box input,
.vector-search-box input,
Line 98: Line 114:
     border-color: #1e293b;
     border-color: #1e293b;
}
}
.vector-search-box input::placeholder,
.vector-search-box input::placeholder,
.vector-search-box .cdx-text-input__input::placeholder {
.vector-search-box .cdx-text-input__input::placeholder {
Line 104: Line 119:
}
}


/* ===== Page links (inside articles) ===== */
/* Links inside article content */
 
.mw-body a {
.mw-body a {
     color: #38bdf8;
     color: var(--bitcraft-link);
}
}
 
.mw-body a:hover {
.mw-body a:visited,
    color: var(--bitcraft-link-hover);
.mw-body a:active {
}
     color: #0ea5e9;
.mw-body a:visited {
     color: var(--bitcraft-link-hover);
}
}
.mw-body a.new {
.mw-body a.new {
     color: #f97373 !important; /* redlinks */
     color: #f97373 !important; /* redlinks */
}
}


/* ===== Footer ===== */
/* Footer */
 
.mw-footer,
.mw-footer,
#footer {
#footer {
     background: transparent;
     background: var(--bitcraft-footer-bg);
     color: #e5e7eb;
     color: var(--bitcraft-footer-text);
    border-top: none;
}
}
.mw-footer a,
.mw-footer a,
.mw-footer a:visited,
.mw-footer a:visited,
Line 133: Line 146:
}
}


/* Optional: center content a bit more like Brighter Shores */
/* Center the main content a bit, like Brighter Shores */
body .mw-body {
body .mw-body {
     max-width: 75em;
     max-width: 75em;

Revision as of 14:50, 27 December 2025

/* ===== Bitcraft base theme (Vector 2010) ===== */

/* Global colour variables – tweak later */
:root {
    --bitcraft-body-bg: #050b16;          /* dark outer background */
    --bitcraft-body-main: #ffffff;       /* article background */
    --bitcraft-text-color: #111827;
    --bitcraft-link: #38bdf8;
    --bitcraft-link-hover: #0ea5e9;
    --bitcraft-footer-text: #e5e7eb;
    --bitcraft-footer-bg: #020617;
    --body-background-image: url("/images/background.png");
}

/* Overall page background + hero image behind logo & top bar */
html,
body {
    background-color: var(--bitcraft-body-bg);
    background-image: var(--body-background-image);
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 1000px auto; /* adjust width/height as needed */
}

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

/* Sidebar: let the art show at top, dark lower down */
#mw-panel {
    background: linear-gradient(
        to bottom,
        rgba(5, 11, 22, 0) 0,
        rgba(5, 11, 22, 0.9) 140px,
        rgba(5, 11, 22, 1) 100%
    );
    color: #e5e7eb;
}

/* Sidebar headings + links */
#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;
}

/* Article “card” in the middle */
.mw-body {
    background-color: var(--bitcraft-body-main);
    color: var(--bitcraft-text-color);
    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-color);
    border-color: #e5e7eb;
}

/* Top tabs (Read / Edit / View history / More) */
.vector-menu-tabs .vector-menu-content-list > li > a,
.vector-menu-tabs .vector-menu-content-list > li > a:visited {
    color: #e5e7eb;
    background: transparent;
    border-color: transparent;
}

.vector-menu-tabs .vector-menu-content-list > li.selected > a {
    background-color: rgba(15, 23, 42, 0.85);
    border-color: #1d4ed8 #1d4ed8 transparent;
    color: #ffffff;
}

.vector-menu-tabs .vector-menu-content-list > li > a:hover {
    color: #bfdbfe;
}

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

/* Center the main content a bit, like Brighter Shores */
body .mw-body {
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
}