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:
/* ===== Layout background ===== */
/* ===== Bitcraft global layout & background ===== */


/* Remove default grey/white stripes */
/* Dark outer background + hero image */
html,
body {
    background-color: #050b16; /* deep navy */
    background-image: url("/images/background.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 1100px auto; /* tweak this to fit your art */
}
 
/* Remove the default Vector gradient blocks so the body background shows */
#mw-page-base,
#mw-page-base,
#mw-head-base {
#mw-head-base,
     background: #0B1220 !important;
.vector-header,
.vector-header-container,
.vector-sticky-header {
     background: transparent !important;
    box-shadow: none;
    border: 0;
}
}


/* Body + sidebar background */
/* Article box (keep this light like Brighter Shores) */
body {
.mw-body {
     background: #0B1220;
    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 */
.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-color: #0B1220;
     background: rgba(3, 7, 18, 0.96); /* almost black, lets art peek around it */
    color: #e5e7eb;
}
 
#mw-panel .vector-menu-heading {
    color: #e5e7eb !important;
    font-weight: 600;
}
}


/* Content area stays light for readability */
#mw-panel .vector-menu-content a,
#content {
#mw-panel .vector-menu-content a:visited {
    background: #ffffff;
     color: #bfdbfe !important;   /* light blue links */
     color: #000000;
}
}


/* ===== Header hero image across nav + top bar ===== */
#mw-panel .vector-menu-content a:hover {
#mw-head {
     color: #e0f2fe !important;
     /* fallback colour behind the image */
}
    background-color: #0B1220;


    /* your hero image */
/* ===== Top tab bar (Read / Edit / View history / More) ===== */
    background-image: url("/images/3/3a/Background.png"); /* <-- use your real path */
    background-repeat: no-repeat;
    background-position: left top;  /* start at top-left */
    background-size: auto 100%;      /* image height = header height, width auto */


     min-height: 180px;               /* make the band tall enough to show it */
.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;
}
}


/* Make the tab strips themselves transparent so the image shows through */
.vector-menu-tabs .vector-menu-content-list > li.selected > a {
#left-navigation,
    background-color: rgba(15, 23, 42, 0.85); /* subtle pill for active tab */
#right-navigation,
    border-color: #1d4ed8 #1d4ed8 transparent;
#p-personal,
     color: #ffffff;
#p-search {
     background: transparent !important;
}
}


/* ===== Top navigation text colours ===== */
.vector-menu-tabs .vector-menu-content-list > li > a:hover {
    color: #bfdbfe;
}


/* Personal links (Stewie, Talk, Preferences, etc.) */
#p-personal a,
#p-personal a,
#right-navigation .vector-menu-tabs a,
#p-personal a:visited {
#left-navigation .vector-menu-tabs a {
     color: #e5e7eb;
     color: #ffffff !important;
}
}


#p-personal a:hover,
#p-personal a:hover {
#right-navigation .vector-menu-tabs a:hover,
     color: #bfdbfe;
#left-navigation .vector-menu-tabs a:hover {
     color: #5EB6FF !important;
}
}


/* ===== Global links (inside articles, sidebar, etc.) ===== */
/* ===== Search box ===== */


#bodyContent a,
.vector-search-box input,
#mw-panel a {
.vector-search-box .cdx-text-input__input {
     color: #3399FF;
     background-color: #020617;
    color: #e5e7eb;
    border-color: #1e293b;
}
}


#bodyContent a:hover,
.vector-search-box input::placeholder,
#mw-panel a:hover {
.vector-search-box .cdx-text-input__input::placeholder {
     color: #5EB6FF;
     color: #64748b;
}
}


/* ===== Footer colours ===== */
/* ===== Page links (inside articles) ===== */
 
.mw-body a {
    color: #38bdf8;
}
 
.mw-body a:visited,
.mw-body a:active {
    color: #0ea5e9;
}
 
.mw-body a.new {
    color: #f97373 !important; /* redlinks */
}
 
/* ===== Footer ===== */
 
.mw-footer,
#footer {
    background: transparent;
    color: #e5e7eb;
}
 
.mw-footer a,
.mw-footer a:visited,
.mw-footer a:active {
    color: #93c5fd;
}


#footer,
/* Optional: center content a bit more like Brighter Shores */
#footer * {
body .mw-body {
     color: #d0d7ff !important;
     max-width: 75em;
     background-color: #020819;
    margin-left: auto;
     margin-right: auto;
}
}

Revision as of 14:40, 27 December 2025

/* ===== Bitcraft global layout & background ===== */

/* Dark outer background + hero image */
html,
body {
    background-color: #050b16; /* deep navy */
    background-image: url("/images/background.png");
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 1100px auto; /* tweak this to fit your art */
}

/* Remove the default Vector gradient blocks so the body background shows */
#mw-page-base,
#mw-head-base,
.vector-header,
.vector-header-container,
.vector-sticky-header {
    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 */
.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 {
    background: rgba(3, 7, 18, 0.96); /* almost black, lets art peek around it */
    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;   /* light blue links */
}

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

/* ===== Top tab bar (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); /* subtle pill for active tab */
    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 ===== */

.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;
}

/* ===== Page links (inside articles) ===== */

.mw-body a {
    color: #38bdf8;
}

.mw-body a:visited,
.mw-body a:active {
    color: #0ea5e9;
}

.mw-body a.new {
    color: #f97373 !important; /* redlinks */
}

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

.mw-footer,
#footer {
    background: transparent;
    color: #e5e7eb;
}

.mw-footer a,
.mw-footer a:visited,
.mw-footer a:active {
    color: #93c5fd;
}

/* Optional: center content a bit more like Brighter Shores */
body .mw-body {
    max-width: 75em;
    margin-left: auto;
    margin-right: auto;
}