MediaWiki:Common.css

/* ======================================================
   Chesapeake Studios Wiki CSS
   ====================================================== */
   
/* ================================
   1. Import External Styles
   ================================ */
/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&family=Roboto+Slab:wght@700&display=swap');

/* Import Font Awesome */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css');

/* ================================
   Hide Elements with Class 'branding-box'
   ================================ */
.branding-box {
    display: none !important;
}

wfLoadExtension Minerva
/* ================================
   2. Color Variables
   ================================ */,
:root {
    /* Primary Colors */
    --primary-color: #2980b9; /* Blue */
    --primary-hover: #1abc9c; /* Teal */
    
    /* Secondary Colors */
    --secondary-color: #2c3e50; /* Dark blue-gray */
    --secondary-hover: #34495e; /* Slightly lighter */
    
    /* Background Colors */
    --background-light: #f9f9f9; /* Light gray */
    --background-dark: #1a1a1a; /* Near black */
    
    /* Text Colors */
    --text-color: #333333; /* Dark gray */
    --text-light: #ecf0f1; /* Light gray for dark mode */
    
    /* Border Colors */
    --border-color: #dcdfe4; /* Light gray borders */
    --border-dark: #34495e; /* Darker borders for dark mode */
    
    /* Button Colors */
    --button-bg: linear-gradient(135deg, #6fa8d1, #4f7f94);
    --button-hover-bg: linear-gradient(135deg, #84b8db, #6b95a6);
    --button-dark-bg: linear-gradient(135deg, #203b50, #16273b);
    --button-dark-hover-bg: linear-gradient(135deg, #2a4e68, #1b3244);
}

/* ================================
   3. Typography
   ================================ */

/* Base Font for Body */
body {
    font-family: 'Open Sans', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-light);
    transition: background-color 0.5s ease, color 0.5s ease;
}

/* Dark Mode Body */
body.dark-mode {
    background-color: var(--background-dark);
    color: var(--text-light);
}

/* Heading Fonts */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Roboto Slab', serif;
    color: var(--secondary-color);
}

body.dark-mode h1, 
body.dark-mode h2, 
body.dark-mode h3, 
body.dark-mode h4, 
body.dark-mode h5, 
body.dark-mode h6 {
    color: #ffffff;
}

/* Link Styles */
a {
    color: var(--primary-color);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover, a:focus {
    color: var(--primary-hover);
    text-decoration: underline;
}

body.dark-mode a {
    color: #66aaff;
}

body.dark-mode a:hover, 
body.dark-mode a:focus {
    color: #1abc9c;
    text-decoration: underline;
}

/* Button Text */
.button, input[type="button"], input[type="submit"], button, a.button, div.button {
    font-family: 'Open Sans', Arial, sans-serif;
    font-weight: 600; /* Semi-bold for buttons */
}

/* ================================
   4. Buttons and Action Elements
   ================================ */

/* Generic Button Styles */
.button, 
input[type="button"], 
input[type="submit"], 
button, 
a.button, 
div.button {
    background: var(--button-bg);
    color: white;
    border: none;
    border-radius: 20px; /* Increased for more curvature */
    padding: 10px 20px;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    transition: all 0.5s ease; /* Smooth and comprehensive animations */
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* Remove underline for anchor buttons */
    outline: none; /* Remove default outlines */
}

/* Dark Mode Buttons */
body.dark-mode .button, 
body.dark-mode input[type="button"], 
body.dark-mode input[type="submit"], 
body.dark-mode button, 
body.dark-mode a.button, 
body.dark-mode div.button {
    background: var(--button-dark-bg);
}

/* Hover States */
.button:hover, 
input[type="button"]:hover, 
input[type="submit"]:hover, 
button:hover, 
a.button:hover, 
div.button:hover {
    background: var(--button-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/* Dark Mode Hover States */
body.dark-mode .button:hover, 
body.dark-mode input[type="button"]:hover, 
body.dark-mode input[type="submit"]:hover, 
body.dark-mode button:hover, 
body.dark-mode a.button:hover, 
body.dark-mode div.button:hover {
    background: var(--button-dark-hover-bg);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(255, 255, 255, 0.3);
}

/* Active State for Buttons */
.button:active, 
input[type="button"]:active, 
input[type="submit"]:active, 
button:active, 
a.button:active, 
div.button:active {
    transform: translateY(0); /* Reset position */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Maintain shadow */
}

/* Icon Styling within Buttons */
.button i, 
input[type="button"] i, 
input[type="submit"] i, 
button i, 
a.button i, 
div.button i {
    margin-right: 8px;
    font-size: 1.2rem;
}

/* Optional: Add spacing between image and text if buttons have both */
.button img + span, 
input[type="button"] img + span, 
input[type="submit"] img + span, 
button img + span, 
a.button img + span, 
div.button img + span {
    margin-left: 8px; /* Adjust spacing as needed */
}

/* ================================
   5. Dropdown Styling
   ================================ */

/* Dropdown Container */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ffffff; /* Default light mode background */
    min-width: 160px;
    border-radius: 5px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    opacity: 0;
    visibility: hidden;
}

/* Show Dropdown on Hover */
.dropdown:hover .dropdown-content {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Dropdown Links */
.dropdown-content a {
    color: var(--text-color);
    padding: 12px 16px;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Hover Effects for Dropdown Links */
.dropdown-content a:hover {
    background-color: #f5f7fa;
    color: var(--text-color);
}

/* Dark Mode Dropdown */
body.dark-mode .dropdown-content {
    background-color: #2c2f33;
    border: 1px solid var(--border-dark);
}

body.dark-mode .dropdown-content a {
    color: #ffffff;
}

body.dark-mode .dropdown-content a:hover {
    background-color: #7289da;
    color: #ffffff;
}

/* ================================
   6. Infobox and Table Styling
   ================================ */

/* Infobox Styling */
.infobox {
    border: 1px solid var(--border-color);
    background-color: #f0f4f9;
    border-radius: 10px;
    padding: 15px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.dark-mode .infobox {
    background-color: #1a2535;
    border-color: var(--border-dark);
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.1);
}

.infobox-header {
    background-color: #d4e1f5;
    color: var(--text-color);
    padding: 10px 15px;
    border-radius: 10px 10px 0 0;
    font-size: 1.4rem;
    font-weight: bold;
}

body.dark-mode .infobox-header {
    background-color: #122a40;
    color: #ffffff;
}

/* Table Styling */
table {
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}

th, td {
    border: 1px solid var(--border-color);
    padding: 12px 15px;
    text-align: left;
}

th {
    background-color: var(--primary-color);
    color: white;
}

tbody tr:nth-child(even) {
    background-color: #f2f2f2;
}

body.dark-mode table, 
body.dark-mode th, 
body.dark-mode td {
    border-color: var(--border-dark);
}

body.dark-mode th {
    background-color: #7289da;
}

body.dark-mode tbody tr:nth-child(even) {
    background-color: #2c2f33;
}

body.dark-mode th, 
body.dark-mode td {
    color: #ffffff;
}

/* ================================
   7. Minerva Skin Specific Styling
   ================================ */

/* ================================
   a. Minerva Header Styling
   ================================ */

/* Minerva Header */
.header-container {
    background-color: var(--secondary-color);
    padding: 15px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Minerva Logo */
.header-container .logo {
    background: url('/path/to/your/logo.png') no-repeat center center;
    background-size: contain;
    width: 150px; /* Adjust as needed */
    height: 50px; /* Adjust as needed */
    text-indent: -9999px; /* Hide text */
}

/* Minerva Navigation Links */
.header-container .nav-links {
    display: flex;
    gap: 15px;
}

.header-container .nav-links a {
    color: white;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 8px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header-container .nav-links a:hover, 
.header-container .nav-links a:focus {
    background-color: var(--primary-hover);
    color: white;
    text-decoration: none;
}

/* ================================
   b. Minerva Sidebar Styling
   ================================ */

/* Minerva Sidebar */
.sidebar-container {
    background-color: var(--background-light);
    padding: 15px;
    border-right: 1px solid var(--border-color);
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

body.dark-mode .sidebar-container {
    background-color: #2c2f33;
    border-color: var(--border-dark);
}

/* Sidebar Links */
.sidebar-container a {
    display: block;
    color: var(--text-color);
    padding: 10px 0;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.3s ease, background-color 0.3s ease;
}

.sidebar-container a:hover, 
.sidebar-container a:focus {
    background-color: var(--primary-hover);
    color: white;
    border-radius: 5px;
}

/* ================================
   c. Minerva Content Area Styling
   ================================ */

/* Content Area */
.content-container {
    padding: 20px;
    background-color: var(--background-light);
    min-height: 80vh;
    transition: background-color 0.3s ease;
}

body.dark-mode .content-container {
    background-color: var(--background-dark);
}

/* ================================
   d. Minerva Footer Styling
   ================================ */

/* Minerva Footer */
.footer-container {
    background-color: var(--secondary-color);
    color: white;
    padding: 20px;
    text-align: center;
    font-size: 0.9rem;
    transition: background-color 0.3s ease;
}

body.dark-mode .footer-container {
    background-color: #1a1a1a;
}

/* Footer Links */
.footer-container a {
    color: #ecf0f1;
    text-decoration: underline;
}

.footer-container a:hover, 
.footer-container a:focus {
    color: var(--primary-hover);
    text-decoration: none;
}

/* ================================
   8. Text Rendering Enhancement
   ================================ */

/* Enhance Text Rendering */
body {
    -webkit-font-smoothing: antialiased; /* For Chrome, Safari, and Opera */
    -moz-osx-font-smoothing: grayscale;  /* For Firefox on macOS */
    text-rendering: optimizeLegibility;   /* Enhances legibility and kerning */
}

/* Ensure all textual elements benefit from improved font smoothing */
p, span, div, h1, h2, h3, h4, h5, h6, a, li, td, th, blockquote, pre {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Optional: Enhance font sharpness on high-resolution displays */
@media screen and (-webkit-min-device-pixel-ratio: 2), 
       screen and (min-resolution: 192dpi) { 
    body {
        -webkit-font-smoothing: subpixel-antialiased;
        -moz-osx-font-smoothing: auto;
    }
}

/* ================================
   9. Responsive Design and Mobile Optimization
   ================================ */

/* Responsive Adjustments */
@media (max-width: 768px) {
    /* Minerva Header Adjustments */
    .header-container {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .header-container .nav-links {
        flex-direction: column;
        width: 100%;
    }
    
    .header-container .nav-links a {
        width: 100%;
        padding: 10px 0;
    }
    
    /* Sidebar Collapse for Mobile */
    .sidebar-container {
        display: none; /* Hide sidebar on mobile */
    }
    
    /* Content Area Full Width */
    .content-container {
        padding: 15px;
    }
    
    /* Adjust Buttons */
    .button, 
    input[type="button"], 
    input[type="submit"], 
    button, 
    a.button, 
    div.button {
        padding: 8px 16px;
        font-size: 0.9rem;
        border-radius: 15px;
    }
    
    /* Hamburger Menu for Mobile Navigation */
    .hamburger {
        display: flex;
        flex-direction: column;
        cursor: pointer;
        padding: 10px;
    }

    .hamburger div {
        width: 25px;
        height: 3px;
        background-color: var(--secondary-color);
        margin: 4px 0;
        transition: all 0.3s ease;
    }

    /* Mobile Navigation Toggle */
    .nav-links.active {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
}

/* ================================
   10. Accessibility Enhancements
   ================================ */

/* Custom Focus Styles for All Interactive Elements */
.button:focus, 
input[type="button"]:focus, 
input[type="submit"]:focus, 
button:focus, 
a.button:focus, 
div.button:focus, 
.dropdown-content a:focus,
.header-container .nav-links a:focus,
.sidebar-container a:focus,
.footer-container a:focus {
    box-shadow: 0 0 0 3px rgba(111, 168, 209, 0.5); /* Custom focus shadow */
    outline: none; /* Remove default outline */
}

/* High Contrast Mode for better visibility */
@media (prefers-contrast: high) {
    body {
        background-color: #ffffff;
        color: #000000;
    }

    .header-container, 
    .footer-container {
        background-color: #ffffff;
        color: #000000;
    }

    .header-container .nav-links a, 
    .sidebar-container a, 
    .footer-container a {
        color: #000000;
    }

    .header-container .nav-links a:hover, 
    .header-container .nav-links a:focus, 
    .sidebar-container a:hover, 
    .sidebar-container a:focus, 
    .footer-container a:hover, 
    .footer-container a:focus {
        color: var(--primary-hover);
        text-decoration: underline;
    }
}

/* ================================
   Expand Main Content Area in Minerva Skin
   ================================ */

/* Adjust the main content container to occupy more width */
.mw-body-content {
    max-width: 2900px; /* Increase from default, adjust as needed */
    width: 100%;
    margin: 0 auto; /* Center align */
    padding: 20px; /* Adjust padding if necessary */
}