Template:CRT model/styles.css

/* ==========================================================================
   CRT Model Infobox - Base Styles (Light Mode)
   ========================================================================== */

.infobox-crt-model {
    border: 1px solid #a2a9b1;
    background: #f8f9fa;
}

.infobox-crt-model .infobox-section-header {
    background: #e0e0e0;
    color: #202122;
}

.infobox-crt-model .infobox-label {
    color: #202122;
}

.infobox-crt-model .infobox-value {
    color: #202122;
}

.infobox-crt-model .infobox-title {
    color: #202122;
}

/* Mod not feasible styling - light mode */
.infobox-crt-model .mod-not-feasible {
    color: #dc2626;
}

/* Button base styles */
.infobox-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

/* Primary button (Edit this data) - light mode */
.infobox-button-primary {
    background-color: #2563eb;
    color: #ffffff;
    border: 1px solid #2563eb;
}

/* Secondary button (Add a document) - light mode */
.infobox-button-secondary {
    background-color: #eff6ff;
    color: #1d4ed8;
    border: 1px solid #bfdbfe;
}

/* ==========================================================================
   Night Mode Styles (using MediaWiki standard selectors)
   
   Minerva Neue uses skin-theme-clientpref-night class on html element
   when night mode is active (via ?minervanightmode=1 or user preference)
   ========================================================================== */

/* Night mode - explicit preference */
html.skin-theme-clientpref-night .infobox-crt-model {
    border-color: #72777d;
    background: #27292d;
}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-section-header {
    background: #3c3f44;
    color: #f8f9fa;
}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-label {
    color: #f8f9fa;
}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-value {
    color: #eaecf0;
}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-title {
    color: #f8f9fa;
}

/* Mod not feasible styling - night mode */
html.skin-theme-clientpref-night .infobox-crt-model .mod-not-feasible {
    color: #f87171;
}

/* Primary button - night mode */
html.skin-theme-clientpref-night .infobox-button-primary {
    background-color: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6;
}

/* Secondary button - night mode */
html.skin-theme-clientpref-night .infobox-button-secondary {
    background-color: #1e3a5f;
    color: #93c5fd;
    border-color: #1e40af;
}

/* ==========================================================================
   Night Mode - System Preference (prefers-color-scheme)
   
   When user has skin-theme-clientpref-os class AND system prefers dark
   ========================================================================== */

@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .infobox-crt-model {
        border-color: #72777d;
        background: #27292d;
    }
    
    html.skin-theme-clientpref-os .infobox-crt-model .infobox-section-header {
        background: #3c3f44;
        color: #f8f9fa;
    }
    
    html.skin-theme-clientpref-os .infobox-crt-model .infobox-label {
        color: #f8f9fa;
    }
    
    html.skin-theme-clientpref-os .infobox-crt-model .infobox-value {
        color: #eaecf0;
    }
    
    html.skin-theme-clientpref-os .infobox-crt-model .infobox-title {
        color: #f8f9fa;
    }
    
    /* Mod not feasible styling - system dark preference */
    html.skin-theme-clientpref-os .infobox-crt-model .mod-not-feasible {
        color: #f87171;
    }
    
    /* Primary button - system dark preference */
    html.skin-theme-clientpref-os .infobox-button-primary {
        background-color: #3b82f6;
        color: #ffffff;
        border-color: #3b82f6;
    }
    
    /* Secondary button - system dark preference */
    html.skin-theme-clientpref-os .infobox-button-secondary {
        background-color: #1e3a5f;
        color: #93c5fd;
        border-color: #1e40af;
    }
}

/* ==========================================================================
   Mobile Responsiveness
   ========================================================================== */

@media (max-width: 600px) {
    .infobox-crt-model {
        float: none !important;
        width: 100% !important;
        margin: 0 0 1em 0 !important;
        max-width: 100% !important;
    }
}