MediaWiki:Common.css

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.

/* Clear Vector skin defaults */
.mw-body, .skin-vector .mw-body, .mw-page-container {
    background: none !important;
    background-color: transparent !important;
}

/* Base body styles */
body.skin-vector {
    background-color: #1a1a1a !important;
    color: #e0e0e0 !important;
    font-family: 'Georgia', serif !important;
}

/* Main Page with image and overlay */
body.skin-vector.page-Main_Page {
    background-color: #1a1a1a !important;
    background-image: url('https://sunderingthegodswiki.com/images/e/e4/STG_Wiki_Background.jpg') !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

body.skin-vector.page-Main_Page::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Adjust opacity (0.2 to 0.6) as needed */
    z-index: -1;
}

/* Infobox and content layout */
.infobox {
    float: right;
    width: 22em;
    margin: 0 0 1em 1em;
}
.mw-parser-output {
    color: #FFFFFF !important; /* White text for dark background */
}
.mw-parser-output h2, .mw-parser-output h3, .mw-parser-output h4, .mw-parser-output h5, .mw-parser-output h6 {
    color: #FFFFFF !important; /* White headings for dark background */
}

/* Increase font size for Main Page on desktop */
.skin-vector.page-Main_Page .mw-body,
.skin-vector.page-Main_Page #mw-content-text,
.skin-vector.page-Main_Page p,
.skin-vector.page-Main_Page li {
    font-size: 16px !important; /* Boost from ~14px to 16px */
    line-height: 1.6 !important;
}

/* Deep blue and gold theme for desktop (Vector skin) */
.skin-vector #mw-page-base {
    background: #f5f2e9 !important; /* Beige background */
}
.skin-vector #mw-head {
    background: linear-gradient(135deg, #1a2a44, #263859) !important;
    border-bottom: 1px solid #d4a017 !important;
}
.skin-vector #mw-content-text,
.skin-vector #mw-content-text p,
.skin-vector #mw-content-text li,
.skin-vector #mw-content-text h1,
.skin-vector #mw-content-text h2,
.skin-vector #mw-content-text h3,
.skin-vector #mw-content-text h4,
.skin-vector #mw-content-text h5,
.skin-vector #mw-content-text h6 {
    color: #1a2a44 !important;
}
.skin-vector #mw-content-text a {
    color: #d4a017 !important;
    text-decoration: none !important;
}
.skin-vector #mw-content-text a:visited {
    color: #a67f12 !important;
}

/* Increase font size for Main Page on desktop */
.skin-vector.page-Main_Page .mw-body,
.skin-vector.page-Main_Page #mw-content-text,
.skin-vector.page-Main_Page p,
.skin-vector.page-Main_Page li {
    font-size: 16px !important;
    line-height: 1.6 !important;
}

/* Style the Featured Content section on desktop */
.skin-vector.page-Main_Page #mw-content-text .mf-section-0 {
    background: #fff !important;
    border: 1px solid #d1d5db !important;
    border-radius: 5px !important;
    padding: 15px !important;
    margin-bottom: 20px !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05) !important;
}

/* Style headings */
.skin-vector #mw-content-text h1,
.skin-vector #mw-content-text h2 {
    border-bottom: 2px solid #d4a017 !important;
    padding-bottom: 5px !important;
    margin-bottom: 15px !important;
}