MediaWiki:Common.css: Difference between revisions

Revision as of 23:25, 25 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 */
    }
}

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