MediaWiki:Common.css: Difference between revisions

Latest revision as of 22:28, 29 April 2025

/* Deep blue and gold theme for desktop (Vector skin) */
.skin-vector #mw-page-base {
    background: #f5f2e9 !important; /* Beige background in light mode */
}
.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;
}

/* Dark mode for Vector skin */
@media (prefers-color-scheme: dark) {
    .skin-vector #mw-page-base {
        background: #1a2a44 !important; /* Deep blue background */
    }
    .skin-vector #mw-head {
        background: linear-gradient(135deg, #263859, #1a2a44) !important;
        border-bottom: 1px solid #ffd966 !important;
    }
    /* Increase specificity for text elements */
    .skin-vector #mw-content-text,
    .skin-vector #mw-content-text p,
    .skin-vector #mw-content-text li,
    .skin-vector #mw-content-text div,
    .skin-vector #mw-content-text span,
    .skin-vector #mw-content-text *,
    .skin-vector #mw-content-text p *,
    .skin-vector #mw-content-text li * {
        background: #1a2a44 !important;
        color: #e0e0e0 !important; /* Light gray text */
    }
    .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: #ffffff !important; /* White headings */
    }
    .skin-vector #mw-content-text a {
        color: #ffd966 !important; /* Lighter gold for links */
    }
    .skin-vector #mw-content-text a:visited {
        color: #d4a017 !important;
    }
    /* Adjust sidebar and other elements */
    .skin-vector #mw-panel {
        background: #263859 !important;
    }
    .skin-vector #mw-panel .portal h3,
    .skin-vector #mw-panel .portal .body li a {
        color: #e0e0e0 !important;
    }
    .skin-vector #mw-panel .portal .body li a:visited {
        color: #aaffff !important;
    }
    /* Ensure specific sections match the background */
    .skin-vector.page-Main_Page #mw-content-text .mf-section-0,
    .skin-vector.page-Main_Page #mw-content-text .mf-section-1 {
        background: #263859 !important;
        border: 1px solid #4b5e67 !important;
    }
    .skin-vector.page-Main_Page #mw-content-text .mf-section-1 blockquote {
        color: #d0d0d0 !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 the Tomes of the Touched section on desktop */
.skin-vector #mw-content-text h2#Tomes_of_the_Touched {
    font-size: 1.8em !important;
    color: #1a2a44 !important;
    border-bottom: 2px solid #d4a017 !important;
    padding-bottom: 8px !important;
    margin-bottom: 20px !important;
}
@media (prefers-color-scheme: dark) {
    .skin-vector #mw-content-text h2#Tomes_of_the_Touched {
        color: #ffffff !important;
        border-bottom: 2px solid #ffd966 !important;
    }
}
.skin-vector.page-Main_Page #mw-content-text .mf-section-1 {
    background: #fefefe !important;
    border-left: 4px solid #d4a017 !important;
    padding: 10px 15px !important;
    margin-bottom: 20px !important;
    border-radius: 3px !important;
}
@media (prefers-color-scheme: dark) {
    .skin-vector.page-Main_Page #mw-content-text .mf-section-1 {
        background: #2a3a54 !important;
        border-left: 4px solid #ffd966 !important;
    }
}
.skin-vector.page-Main_Page #mw-content-text .mf-section-1 blockquote {
    font-family: Georgia, serif !important; /* Serif font as per mockup */
    font-style: italic !important;
    color: #1a2a44 !important;
    margin: 0 auto !important;
    padding: 0 10px !important;
    text-align: center !important;
    max-width: 80% !important;
    line-height: 1.4 !important; /* Match mockup spacing */
}
@media (prefers-color-scheme: dark) {
    .skin-vector.page-Main_Page #mw-content-text .mf-section-1 blockquote {
        color: #ffffff !important; /* White text as per mockup */
    }
}
/* Right-align the attribution */
.skin-vector.page-Main_Page #mw-content-text .mf-section-1 .tome-attribution {
    display: block !important;
    text-align: right !important;
    font-family: Georgia, serif !important;
    font-style: italic !important;
    font-size: 0.9em !important;
    margin-top: 5px !important;
    color: #1a2a44 !important;
}
@media (prefers-color-scheme: dark) {
    .skin-vector.page-Main_Page #mw-content-text .mf-section-1 .tome-attribution {
        color: #ffffff !important; /* White text as per mockup */
    }
}

.infobox {
    width: 22em;
    font-size: 90%;
    text-align: left;
    border: 1px solid #AAAAAA;
    float: right;
    margin: 0 0 1em 1em;
}

.infobox-title {
    text-align: center;
    font-size: 125%;
    background-color: #E6E6E6;
    color: #000000;
}

.infobox-image {
    text-align: center;
}

/* Ensure text is white to match the global scheme */
.infobox-label,
.infobox-value {
    color: #FFFFFF !important; /* Match the wiki's white text */
}

/* Minerva-specific adjustments for mobile */
@media (max-width: 767px) {
    .skin-minerva .infobox,
    .skin-minerva .infobox th,
    .skin-minerva .infobox td,
    .skin-minerva .infobox tr th,
    .skin-minerva .infobox tr td {
        background-color: #1a2a44 !important; /* Match the wiki's dark mode blue */
        color: #FFFFFF !important; /* Ensure white text */
    }
    .skin-minerva .infobox-label,
    .skin-minerva .infobox-value {
        background-color: #1a2a44 !important; /* Match the wiki's dark mode blue */
        color: #FFFFFF !important; /* Ensure white text */
    }
    /* Fix scrolling overlap on mobile */
    .skin-minerva .infobox {
        float: none !important; /* Remove floating on mobile */
        width: 100% !important; /* Full width on mobile */
        margin: 0 0 1em 0 !important; /* Center the infobox */
    }
    .skin-minerva .content-wrapper {
        float: none !important; /* Remove floating on mobile */
        width: 100% !important; /* Full width on mobile */
        margin-right: 0 !important; /* Remove right margin */
    }
}

/* Existing layout styles */
.content-wrapper {
    float: left;
    width: calc(100% - 24em);
    margin-right: 1em;
}

.clearfix {
    clear: both;
}

.content-wrapper h2 {
    margin-bottom: 0.5em !important;
}

/* Adjust spacing in Appearances and Mentions sections */
.appearances h3,
.mentions h3 {
    margin-bottom: 0.3em !important; /* Slightly more space below subsection headers */
}
.appearances ul,
.mentions ul {
    margin-top: 0.3em !important; /* Slightly more space above the chapter list */
    margin-bottom: 0.5em !important; /* Slightly more space below the chapter list */
}
.appearances li,
.mentions li {
    margin-bottom: 0.2em !important; /* Slightly more space between list items */
}

/* Tighten space between Appearances and Mentions */
.content-wrapper .appearances + .mentions {
    margin-top: 0.1em !important; /* Further reduce space between sections */
}
.content-wrapper .appearances {
    margin-bottom: 0.1em !important; /* Further reduce space at the end of Appearances */
}

.mw-collapsible-toggle {
    background-color: #f8f9fa;
    padding: 2px 8px;
    border: 1px solid #a2a9b1;
    border-radius: 3px;
}
.mw-collapsible-toggle:hover {
    background-color: #eaecf0;
}