Template:Remote control/styles.css

/* ==========================================================================
   Remote Control Infobox - Base Styles (Light Mode)
   ========================================================================== */

.infobox-remote-control {
    border: 1px solid #a2a9b1;
    background: #f8f9fa;
}

.infobox-remote-control .infobox-section-header {
    background: #e0e0e0;
    color: #202122;
}

.infobox-remote-control .infobox-label {
    color: #202122;
}

.infobox-remote-control .infobox-value {
    color: #202122;
}

.infobox-remote-control .infobox-title {
    color: #202122;
}

/* 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;
}

/* ==========================================================================
   Night Mode Styles
   ========================================================================== */

html.skin-theme-clientpref-night .infobox-remote-control {
    border-color: #72777d;
    background: #27292d;
}

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

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

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

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

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

/* ==========================================================================
   Night Mode - System Preference
   ========================================================================== */

@media screen and (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .infobox-remote-control {
        border-color: #72777d;
        background: #27292d;
    }
    
    html.skin-theme-clientpref-os .infobox-remote-control .infobox-section-header {
        background: #3c3f44;
        color: #f8f9fa;
    }
    
    html.skin-theme-clientpref-os .infobox-remote-control .infobox-label {
        color: #f8f9fa;
    }
    
    html.skin-theme-clientpref-os .infobox-remote-control .infobox-value {
        color: #eaecf0;
    }
    
    html.skin-theme-clientpref-os .infobox-remote-control .infobox-title {
        color: #f8f9fa;
    }
    
    html.skin-theme-clientpref-os .infobox-button-primary {
        background-color: #3b82f6;
        color: #ffffff;
        border-color: #3b82f6;
    }
}

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

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