Template:Infobox styles.css: Difference between revisions

Revision as of 02:10, 16 February 2026

/* Shared Infobox Styles for EveryCRT Wiki */
/* Supports CRT model, AV device, Accessory, Part, Non-CRT model, and Document infoboxes */
/* Includes dark mode via skin-theme-clientpref classes */

/* ===== LIGHT MODE BASE STYLES ===== */

.infobox-crt-model,
.infobox-av-device,
.infobox-accessory,
.infobox-part,
.infobox-non-crt {
    background-color: #ffffff;
    border: 1px solid #a2a9b1;
    border-radius: 3px;
}

.infobox-crt-model .infobox-title,
.infobox-av-device .infobox-title,
.infobox-accessory .infobox-title,
.infobox-part .infobox-title {
    background-color: #6c5ce7;
    color: #ffffff;
    border-radius: 2px 2px 0 0;
}

.infobox-non-crt .infobox-title {
    background-color: #7a6b6b;
    color: #ffffff;
    border-radius: 2px 2px 0 0;
}

/* Non-CRT warning banner */
.non-crt-banner {
    background-color: #d4544a;
    color: #ffffff;
    font-size: 110%;
}

.infobox-crt-model .infobox-section-header,
.infobox-av-device .infobox-section-header,
.infobox-accessory .infobox-section-header,
.infobox-part .infobox-section-header {
    background-color: #d0d0d5;
    color: #333333;
}

.infobox-non-crt .infobox-section-header {
    background-color: #d5cccc;
    color: #333333;
}

.infobox-crt-model .infobox-label,
.infobox-av-device .infobox-label,
.infobox-accessory .infobox-label,
.infobox-part .infobox-label {
    background-color: #f0f0f5;
    color: #333333;
}

.infobox-non-crt .infobox-label {
    background-color: #f5f0f0;
    color: #333333;
}

.infobox-crt-model .infobox-value,
.infobox-av-device .infobox-value,
.infobox-accessory .infobox-value,
.infobox-part .infobox-value,
.infobox-non-crt .infobox-value {
    background-color: #ffffff;
    color: #333333;
}

.infobox-crt-model .infobox-image,
.infobox-av-device .infobox-image,
.infobox-accessory .infobox-image,
.infobox-part .infobox-image,
.infobox-non-crt .infobox-image {
    background-color: #ffffff;
}

/* Label that only covers its text, not the full row height */
.infobox-label-top {
    align-self: start !important;
}

/* Button styles */
.infobox-button {
    display: inline-block;
    padding: 0.4em 0.8em;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    font-size: 0.95em;
}

.infobox-button-primary {
    background-color: #6c5ce7;
    color: #ffffff !important;
    border: 1px solid #5a4bd1;
}

.infobox-button-secondary {
    background-color: #f0f0f5;
    color: #333333 !important;
    border: 1px solid #c0c0c5;
}

/* Mod not feasible styling */
.mod-not-feasible {
    color: #cc3333;
}

/* ===== TBC GROUP STYLES ===== */

.infobox-tbc-group {
    border-left: 3px solid #d0d0d5;
    margin: 2px 0;
    padding-left: 0;
}

.infobox-tbc-group + .infobox-tbc-group {
    margin-top: 6px;
}

/* ===== I/O LOCATION GROUP STYLES ===== */

.infobox-io-location-group {
    border-left: 3px solid #d0d0d5;
    margin: 8px 0 0 0;
}

.infobox-io-location-group:first-child {
    margin-top: 0;
}

.infobox-io-location-header {
    padding: 0.15em 0.4em;
    font-weight: bold;
    background-color: #e8e8ed;
    color: #333333;
}

.infobox-io-location-content {
    padding: 0.15em 0.4em 0.1em 0.4em;
}

/* ===== MOBILE RESPONSIVE STYLES ===== */

@media screen and (max-width: 720px) {
    .infobox-crt-model,
    .infobox-av-device,
    .infobox-accessory,
    .infobox-part,
    .infobox-non-crt {
        float: none !important;
        width: 100% !important;
        margin: 0 0 1em 0 !important;
        box-sizing: border-box;
    }
    
    .infobox-crt-model .infobox-image img,
    .infobox-av-device .infobox-image img,
    .infobox-accessory .infobox-image img,
    .infobox-part .infobox-image img,
    .infobox-non-crt .infobox-image img {
        max-width: 100%;
        height: auto;
    }
}

/* ===== DOCUMENT INFOBOX STYLES ===== */

.document-infobox {
    margin-bottom: 1em;
    padding: 0.5em;
    border: 1px solid #a2a9b1;
    background-color: #f8f9fa;
    border-radius: 3px;
    color: #333333;
}

.document-infobox b,
.document-infobox strong {
    color: #333333;
}

.document-section-header {
    margin-top: 0.5em;
}

.document-buttons {
    text-align: center;
    margin-top: 0.5em;
}

.document-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
}

.document-button-primary {
    background-color: #2563eb;
    color: #ffffff !important;
    border: 1px solid #2563eb;
}

.document-button-secondary {
    background-color: #eff6ff;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe;
}

/* ===== DARK MODE STYLES ===== */

/* User preference: night mode */
html.skin-theme-clientpref-night .infobox-crt-model,
html.skin-theme-clientpref-night .infobox-av-device,
html.skin-theme-clientpref-night .infobox-accessory,
html.skin-theme-clientpref-night .infobox-part,
html.skin-theme-clientpref-night .infobox-non-crt {
    background-color: #1e1e2e;
    border-color: #45475a;
}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-title,
html.skin-theme-clientpref-night .infobox-av-device .infobox-title,
html.skin-theme-clientpref-night .infobox-accessory .infobox-title,
html.skin-theme-clientpref-night .infobox-part .infobox-title {
    background-color: #7c6cf7;
    color: #ffffff;
}

html.skin-theme-clientpref-night .infobox-non-crt .infobox-title {
    background-color: #8a7b7b;
    color: #ffffff;
}

html.skin-theme-clientpref-night .non-crt-banner {
    background-color: #c44a40;
    color: #ffffff;
}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-section-header,
html.skin-theme-clientpref-night .infobox-av-device .infobox-section-header,
html.skin-theme-clientpref-night .infobox-accessory .infobox-section-header,
html.skin-theme-clientpref-night .infobox-part .infobox-section-header {
    background-color: #45475a;
    color: #cdd6f4;
}

html.skin-theme-clientpref-night .infobox-non-crt .infobox-section-header {
    background-color: #4a4555;
    color: #cdd6f4;
}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-label,
html.skin-theme-clientpref-night .infobox-av-device .infobox-label,
html.skin-theme-clientpref-night .infobox-accessory .infobox-label,
html.skin-theme-clientpref-night .infobox-part .infobox-label {
    background-color: #313244;
    color: #cdd6f4;
}

html.skin-theme-clientpref-night .infobox-non-crt .infobox-label {
    background-color: #352e2e;
    color: #cdd6f4;
}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-value,
html.skin-theme-clientpref-night .infobox-av-device .infobox-value,
html.skin-theme-clientpref-night .infobox-accessory .infobox-value,
html.skin-theme-clientpref-night .infobox-part .infobox-value,
html.skin-theme-clientpref-night .infobox-non-crt .infobox-value {
    background-color: #1e1e2e;
    color: #cdd6f4;
}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-image,
html.skin-theme-clientpref-night .infobox-av-device .infobox-image,
html.skin-theme-clientpref-night .infobox-accessory .infobox-image,
html.skin-theme-clientpref-night .infobox-part .infobox-image,
html.skin-theme-clientpref-night .infobox-non-crt .infobox-image {
    background-color: #1e1e2e;
}

html.skin-theme-clientpref-night .infobox-button-primary {
    background-color: #7c6cf7;
    color: #ffffff !important;
    border-color: #6c5ce7;
}

html.skin-theme-clientpref-night .infobox-button-secondary {
    background-color: #45475a;
    color: #cdd6f4 !important;
    border-color: #585b70;
}

html.skin-theme-clientpref-night .mod-not-feasible {
    color: #f38ba8;
}

html.skin-theme-clientpref-night .infobox-crt-model a,
html.skin-theme-clientpref-night .infobox-av-device a,
html.skin-theme-clientpref-night .infobox-accessory a,
html.skin-theme-clientpref-night .infobox-part a,
html.skin-theme-clientpref-night .infobox-non-crt a {
    color: #89b4fa;
}

html.skin-theme-clientpref-night .infobox-crt-model a:visited,
html.skin-theme-clientpref-night .infobox-av-device a:visited,
html.skin-theme-clientpref-night .infobox-accessory a:visited,
html.skin-theme-clientpref-night .infobox-part a:visited,
html.skin-theme-clientpref-night .infobox-non-crt a:visited {
    color: #cba6f7;
}

/* TBC group dark mode */
html.skin-theme-clientpref-night .infobox-tbc-group {
    border-left-color: #45475a;
}

/* I/O location group dark mode */
html.skin-theme-clientpref-night .infobox-io-location-group {
    border-left-color: #45475a;
}

html.skin-theme-clientpref-night .infobox-io-location-header {
    background-color: #3a3a4e;
    color: #cdd6f4;
}

/* Document infobox dark mode */
html.skin-theme-clientpref-night .document-infobox {
    background-color: #313244;
    border-color: #45475a;
    color: #cdd6f4;
}

html.skin-theme-clientpref-night .document-infobox b,
html.skin-theme-clientpref-night .document-infobox strong {
    color: #cdd6f4;
}

html.skin-theme-clientpref-night .document-infobox a {
    color: #89b4fa;
}

/* Document buttons stay blue in dark mode for consistency */
html.skin-theme-clientpref-night .document-button-primary {
    background-color: #3b82f6;
    color: #ffffff !important;
    border-color: #2563eb;
}

html.skin-theme-clientpref-night .document-button-secondary {
    background-color: #1e3a5f;
    color: #93c5fd !important;
    border-color: #3b82f6;
}

/* Wikitable dark mode (for tables inside document infobox) */
html.skin-theme-clientpref-night .document-infobox .wikitable {
    background-color: #1e1e2e;
    color: #cdd6f4;
    border-color: #45475a;
}

html.skin-theme-clientpref-night .document-infobox .wikitable th {
    background-color: #45475a;
    color: #cdd6f4;
    border-color: #585b70;
}

html.skin-theme-clientpref-night .document-infobox .wikitable td {
    background-color: #313244;
    color: #cdd6f4;
    border-color: #45475a;
}

html.skin-theme-clientpref-night .document-infobox .wikitable tr.row-odd td {
    background-color: #2a2a3c;
}

html.skin-theme-clientpref-night .document-infobox .wikitable a {
    color: #89b4fa;
}

/* OS preference: dark mode (when user has "auto" selected) */
@media (prefers-color-scheme: dark) {
    html.skin-theme-clientpref-os .infobox-crt-model,
    html.skin-theme-clientpref-os .infobox-av-device,
    html.skin-theme-clientpref-os .infobox-accessory,
    html.skin-theme-clientpref-os .infobox-part,
    html.skin-theme-clientpref-os .infobox-non-crt {
        background-color: #1e1e2e;
        border-color: #45475a;
    }

    html.skin-theme-clientpref-os .infobox-crt-model .infobox-title,
    html.skin-theme-clientpref-os .infobox-av-device .infobox-title,
    html.skin-theme-clientpref-os .infobox-accessory .infobox-title,
    html.skin-theme-clientpref-os .infobox-part .infobox-title {
        background-color: #7c6cf7;
        color: #ffffff;
    }

    html.skin-theme-clientpref-os .infobox-non-crt .infobox-title {
        background-color: #8a7b7b;
        color: #ffffff;
    }

    html.skin-theme-clientpref-os .non-crt-banner {
        background-color: #c44a40;
        color: #ffffff;
    }

    html.skin-theme-clientpref-os .infobox-crt-model .infobox-section-header,
    html.skin-theme-clientpref-os .infobox-av-device .infobox-section-header,
    html.skin-theme-clientpref-os .infobox-accessory .infobox-section-header,
    html.skin-theme-clientpref-os .infobox-part .infobox-section-header {
        background-color: #45475a;
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .infobox-non-crt .infobox-section-header {
        background-color: #4a4555;
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .infobox-crt-model .infobox-label,
    html.skin-theme-clientpref-os .infobox-av-device .infobox-label,
    html.skin-theme-clientpref-os .infobox-accessory .infobox-label,
    html.skin-theme-clientpref-os .infobox-part .infobox-label {
        background-color: #313244;
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .infobox-non-crt .infobox-label {
        background-color: #352e2e;
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .infobox-crt-model .infobox-value,
    html.skin-theme-clientpref-os .infobox-av-device .infobox-value,
    html.skin-theme-clientpref-os .infobox-accessory .infobox-value,
    html.skin-theme-clientpref-os .infobox-part .infobox-value,
    html.skin-theme-clientpref-os .infobox-non-crt .infobox-value {
        background-color: #1e1e2e;
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .infobox-crt-model .infobox-image,
    html.skin-theme-clientpref-os .infobox-av-device .infobox-image,
    html.skin-theme-clientpref-os .infobox-accessory .infobox-image,
    html.skin-theme-clientpref-os .infobox-part .infobox-image,
    html.skin-theme-clientpref-os .infobox-non-crt .infobox-image {
        background-color: #1e1e2e;
    }

    html.skin-theme-clientpref-os .infobox-button-primary {
        background-color: #7c6cf7;
        color: #ffffff !important;
        border-color: #6c5ce7;
    }

    html.skin-theme-clientpref-os .infobox-button-secondary {
        background-color: #45475a;
        color: #cdd6f4 !important;
        border-color: #585b70;
    }

    html.skin-theme-clientpref-os .mod-not-feasible {
        color: #f38ba8;
    }

    html.skin-theme-clientpref-os .infobox-crt-model a,
    html.skin-theme-clientpref-os .infobox-av-device a,
    html.skin-theme-clientpref-os .infobox-accessory a,
    html.skin-theme-clientpref-os .infobox-part a,
    html.skin-theme-clientpref-os .infobox-non-crt a {
        color: #89b4fa;
    }

    html.skin-theme-clientpref-os .infobox-crt-model a:visited,
    html.skin-theme-clientpref-os .infobox-av-device a:visited,
    html.skin-theme-clientpref-os .infobox-accessory a:visited,
    html.skin-theme-clientpref-os .infobox-part a:visited,
    html.skin-theme-clientpref-os .infobox-non-crt a:visited {
        color: #cba6f7;
    }

    /* TBC group OS dark mode */
    html.skin-theme-clientpref-os .infobox-tbc-group {
        border-left-color: #45475a;
    }

    /* I/O location group OS dark mode */
    html.skin-theme-clientpref-os .infobox-io-location-group {
        border-left-color: #45475a;
    }

    html.skin-theme-clientpref-os .infobox-io-location-header {
        background-color: #3a3a4e;
        color: #cdd6f4;
    }

    /* Document infobox OS dark mode */
    html.skin-theme-clientpref-os .document-infobox {
        background-color: #313244;
        border-color: #45475a;
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .document-infobox b,
    html.skin-theme-clientpref-os .document-infobox strong {
        color: #cdd6f4;
    }

    html.skin-theme-clientpref-os .document-infobox a {
        color: #89b4fa;
    }

    /* Document buttons stay blue in dark mode */
    html.skin-theme-clientpref-os .document-button-primary {
        background-color: #3b82f6;
        color: #ffffff !important;
        border-color: #2563eb;
    }

    html.skin-theme-clientpref-os .document-button-secondary {
        background-color: #1e3a5f;
        color: #93c5fd !important;
        border-color: #3b82f6;
    }

    /* Wikitable OS dark mode */
    html.skin-theme-clientpref-os .document-infobox .wikitable {
        background-color: #1e1e2e;
        color: #cdd6f4;
        border-color: #45475a;
    }

    html.skin-theme-clientpref-os .document-infobox .wikitable th {
        background-color: #45475a;
        color: #cdd6f4;
        border-color: #585b70;
    }

    html.skin-theme-clientpref-os .document-infobox .wikitable td {
        background-color: #313244;
        color: #cdd6f4;
        border-color: #45475a;
    }

    html.skin-theme-clientpref-os .document-infobox .wikitable tr.row-odd td {
        background-color: #2a2a3c;
    }

    html.skin-theme-clientpref-os .document-infobox .wikitable a {
        color: #89b4fa;
    }
}