MediaWiki:Common.css: Difference between revisions

/* ===================================================== */
/* SFGD Wiki – Global Dark Theme (Vector Legacy Compatible) */
/* ===================================================== */

/* Futuristic font */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@700&display=swap');

/* -------------------- */
/* Global base styling – Expanded for broader coverage */
/* -------------------- */
html,
body,
div#globalWrapper,
div#content,
div#mw-page-base,
div#mw-head-base {
    background-color: #000000 !important;
    color: #ffffff !important;
}

/* Main content container – Added more selectors for special pages */
.mw-body,
div#mw-content-text,
div.mw-code,
pre,
code {
    background-color: #0030c2 !important;
    color: #ffffff !important;
    border-color: #00aaff !important;
}

/* -------------------- */
/* Header bar & tabs – Enhanced for dropdowns and menus */
/* -------------------- */
#mw-head-base,
#mw-head,
div.vectorTabs,
div.vectorTabs ul,
div.vectorTabs li,
div.vectorTabs li.selected,
div.vectorMenu h3,
div.vectorMenu h5,
div.vectorMenu .menu,
div#p-variants,
div#p-cactions {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
    border-color: #00aaff !important;
}

div.vectorTabs li,
div.vectorTabs li.selected {
    background: none !important;
    border: none !important;
}

div.vectorTabs li a,
div.vectorTabs li a span,
div.vectorTabs li.selected a,
div.vectorTabs li.selected a span,
#p-personal li a,
#p-namespaces a,
#p-views a,
div.vectorMenu h3 a,
div.vectorMenu .menu ul li a {
    color: #7ad7ff !important;
}

div.vectorTabs li a:hover,
#p-personal li a:hover,
#p-namespaces a:hover,
#p-views a:hover,
div.vectorMenu h3 a:hover,
div.vectorMenu .menu ul li a:hover {
    color: #00fbff !important;
}

/* -------------------- */
/* Sidebar – Added portal body background for consistency */
/* -------------------- */
.skin-vector-legacy #mw-panel,
.skin-vector-legacy #mw-panel .portal,
.skin-vector-legacy #mw-panel .portal h3,
.skin-vector-legacy #mw-panel .portal .body {
    background-color: #000000 !important;
    background-image: none !important;
    color: #ffffff !important;
}

.skin-vector-legacy #mw-panel .portal .body ul li a,
.skin-vector-legacy #mw-panel .portal .body ul li a:visited {
    color: #7ad7ff !important;
}

.skin-vector-legacy #mw-panel .portal .body ul li a:hover {
    color: #00fbff !important;
}

/* -------------------- */
/* Content links – Added external link styles */
/* -------------------- */
.mw-body a,
.mw-body a.external {
    color: #7ad7ff !important;
}

.mw-body a:visited,
.mw-body a.external:visited {
    color: #cccccc !important;
}

.mw-body a.new {
    color: #ff3300 !important;
}

.mw-body a:hover,
.mw-body a.new:hover,
.mw-body a.external:hover {
    color: #00fbff !important;
}

/* -------------------- */
/* Headings – No changes needed, but ensured parser-output coverage */
/* -------------------- */
#firstHeading,
.mw-body h1,
.mw-body h2,
.mw-body h3,
.mw-body h4,
.mw-body h5,
.mw-body h6,
.mw-parser-output h1,
.mw-parser-output h2,
.mw-parser-output h3,
.mw-parser-output h4,
.mw-parser-output h5,
.mw-parser-output h6 {
    font-family: 'Orbitron', sans-serif !important;
    font-weight: 700 !important;
    color: #ffffff !important;
}

.subpages {
    display: block !important;  /* Ensures it's shown, overriding any hides */
    font-size: 0.85em;  /* Smaller text for subtlety */
    margin: 0.5em 0;  /* Spacing above/below */
    color: #ffffff;  /* White text for dark background visibility */
    background-color: #000000;  /* Matches your black theme */
}

.subpages a {
    color: #00bfff;  /* Blue links to match your headers */
    text-decoration: none;  /* No underline for clean look */
}

.subpages a:hover {
    text-decoration: underline;  /* Underline on hover for usability */
}

/* -------------------- */
/* Tables / Infoboxes – Added more classes for extensions like Semantic MediaWiki */
/* -------------------- */
.mw-parser-output table,
.mw-parser-output table.wikitable,
.mw-parser-output .infobox,
.mw-parser-output .navbox,
table.mw-datatable,
table.smwtable {
    background-color: #0030c2 !important;
    color: #ffffff !important;
    border: 1px solid #00aaff !important;
    border-collapse: collapse !important;
}

.mw-parser-output table th,
.mw-parser-output .infobox th,
.mw-parser-output .navbox th,
table.mw-datatable th,
table.smwtable th {
    background-color: #00aaff !important;
    color: #ffffff !important;
    border: 1px solid #00aaff !important;
}

.mw-parser-output table td,
.mw-parser-output .infobox td,
.mw-parser-output .navbox td,
table.mw-datatable td,
table.smwtable td {
    background-color: #0030c2 !important;
    color: #ffffff !important;
    border: 1px solid #00aaff !important;
}

.mw-parser-output table tr:nth-child(even),
.mw-parser-output table tr:nth-child(odd) {
    background-color: #0030c2 !important;
}

/* -------------------- */
/* TOC – Right aligned – Added ul/li styles for nested TOC */
/* -------------------- */
#toc,
.toc,
div.toc ul,
div.toc li {
    float: right !important;
    clear: right !important;
    margin: 0 0 1em 1.5em !important;
    background-color: #0030c2 !important;
    color: #ffffff !important;
    border: 1px solid #00aaff !important;
    padding: 0.6em 0.8em !important;
    max-width: 320px;
}

#toc #toctitle,
.toc #toctitle {
    background-color: #00aaff !important;
    color: #ffffff !important;
    padding: 0.4em 0.6em !important;
    margin: -0.6em -0.8em 0.5em -0.8em !important;
}

#toc .tocnumber {
    color: #00fbff !important;
}

#toc a,
#toc a:visited {
    color: #7ad7ff !important;
}

#toc a:hover {
    color: #00fbff !important;
}

/* TOC hide/show link */
#toc .toctogglelabel,
#toc .toctogglelink {
    color: #7ad7ff !important;
}

#toc .toctogglelabel:hover,
#toc .toctogglelink:hover {
    color: #00fbff !important;
}

/* -------------------- */
/* Inputs & buttons – Expanded for edit previews and forms */
/* -------------------- */
#searchInput,
input[type="text"],
input[type="search"],
input[type="password"],
textarea,
select,
div.editOptions,
div#editpage-copywarn,
div.mw-code,
div#mw-editform {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #00aaff !important;
}

input[type="submit"],
input[type="button"],
button,
a.mw-ui-button {
    background-color: #0030c2 !important;
    border-color: #00aaff !important;
    color: #ffffff !important;
}

input[type="submit"]:hover,
input[type="button"]:hover,
button:hover,
a.mw-ui-button:hover {
    background-color: #00fbff !important;
    color: #000000 !important;
}

/* -------------------- */
/* Special pages & diffs – New section for consistency on history/diff/category pages */
/* -------------------- */
div.diff,
table.diff,
td.diff-addedline,
td.diff-deletedline,
td.diff-context {
    background-color: #0030c2 !important;
    color: #ffffff !important;
    border-color: #00aaff !important;
}

td.diff-addedline {
    background-color: #0040e0 !important;  /* Slightly lighter blue for additions */
}

td.diff-deletedline {
    background-color: #0020a0 !important;  /* Darker blue for deletions */
}

ul.special,
div#mw-content-text ul,
div.catlinks,
div#mw-pages {
    background-color: #0030c2 !important;
    color: #ffffff !important;
    border: 1px solid #00aaff !important;
    padding: 0.5em;
}

ul.special li a,
div.catlinks a {
    color: #7ad7ff !important;
}

ul.special li a:hover,
div.catlinks a:hover {
    color: #00fbff !important;
}

/* Preferences and other forms */
div.prefsection,
fieldset,
legend {
    background-color: #0030c2 !important;
    color: #ffffff !important;
    border-color: #00aaff !important;
}

/* -------------------- */
/* Footer – Minor tweaks for lists */
/* -------------------- */
#footer,
#footer-info,
#footer-places,
#footer-icons,
#footer ul,
#footer li {
    background-color: #000000 !important;
    color: #d6d6d6 !important;
}

#footer a,
#footer a:visited {
    color: #7ad7ff !important;
}

#footer a:hover {
    color: #00fbff !important;
}

/* Remove Powered by MediaWiki */
#footer-poweredbyico,
#footer-poweredby {
    display: none !important;
}

#footer-icons {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* ========================= */
/* REMOVE SEMANTIC MW BADGE  */
/* ========================= */

#footer-smw,
#footer-icons .smw-footer,
#footer-icons img[alt*="Semantic"],
#footer-icons a[href*="semantic-mediawiki"] {
    display: none !important;
}

/* ===================================================== */
/* VECTOR LEGACY – TAB ANCHOR BACKGROUND OVERRIDE */
/* ===================================================== */

/* Namespace + view tabs */
.skin-vector-legacy #p-namespaces li,
.skin-vector-legacy #p-views li {
    background-color: #000000 !important;
    background-image: none !important;
}

/* The ACTUAL white culprit: anchor elements */
.skin-vector-legacy #p-namespaces li a,
.skin-vector-legacy #p-views li a,
.skin-vector-legacy #p-namespaces li a span,
.skin-vector-legacy #p-views li a span {
    background-color: #000000 !important;
    background-image: none !important;
    color: #7ad7ff !important;
}

/* Selected tab */
.skin-vector-legacy #p-namespaces li.selected a,
.skin-vector-legacy #p-views li.selected a,
.skin-vector-legacy #p-namespaces li.selected a span,
.skin-vector-legacy #p-views li.selected a span {
    background-color: #000000 !important;
    color: #00fbff !important;
}

/* Hover state */
.skin-vector-legacy #p-namespaces li a:hover,
.skin-vector-legacy #p-views li a:hover,
.skin-vector-legacy #p-namespaces li a:hover span,
.skin-vector-legacy #p-views li a:hover span {
    background-color: #000000 !important;
    color: #00fbff !important;
}

/* Kill Vector gradients & borders */
.skin-vector-legacy #p-namespaces li,
.skin-vector-legacy #p-views li,
.skin-vector-legacy #p-namespaces li a,
.skin-vector-legacy #p-views li a {
    border: none !important;
    box-shadow: none !important;
}