EveryCRT Wiki

Template:Infobox styles.css: Difference between revisions

← Older edit
Add .infobox-part class support for part infoboxes (via update-page on MediaWiki MCP Server)
Fix red links turning blue in dark mode — exclude .new links from blue color override and add explicit red link styling (via update-page on MediaWiki MCP Server)
 
(3 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Shared Infobox Styles for EveryCRT Wiki */
/* Shared Infobox Styles for EveryCRT Wiki */
/* Supports CRT model, AV device, Accessory, Part, and Document infoboxes */
/* Supports CRT model, AV device, Accessory, Part, Non-CRT model, and Document infoboxes */
/* Includes dark mode via skin-theme-clientpref classes */
/* Includes dark mode via skin-theme-clientpref classes */


Line 8: Line 8:
.infobox-av-device,
.infobox-av-device,
.infobox-accessory,
.infobox-accessory,
.infobox-part {
.infobox-part,
.infobox-non-crt {
     background-color: #ffffff;
     background-color: #ffffff;
     border: 1px solid #a2a9b1;
     border: 1px solid #a2a9b1;
Line 14: Line 15:
}
}


.infobox-crt-model .infobox-title,
/* Per-type title colors */
.infobox-av-device .infobox-title,
.infobox-crt-model .infobox-title {
.infobox-accessory .infobox-title,
    background-color: #6c5ce7;
    color: #ffffff;
    border-radius: 2px 2px 0 0;
}
 
.infobox-av-device .infobox-title {
    background-color: #2d6cdf;
    color: #ffffff;
    border-radius: 2px 2px 0 0;
}
 
.infobox-accessory .infobox-title {
    background-color: #c0713a;
    color: #ffffff;
    border-radius: 2px 2px 0 0;
}
 
.infobox-part .infobox-title {
.infobox-part .infobox-title {
     background-color: #6c5ce7;
     background-color: #5f6b7a;
    color: #ffffff;
    border-radius: 2px 2px 0 0;
}
 
.infobox-non-crt .infobox-title {
    background-color: #7a6b6b;
     color: #ffffff;
     color: #ffffff;
     border-radius: 2px 2px 0 0;
     border-radius: 2px 2px 0 0;
}
/* Type badge (sits below the title as a second colored band) */
.infobox-type-badge {
    text-align: center;
    padding: 0.2em 0.5em;
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
/* Badge link styling — links must inherit badge text color */
.infobox-type-badge a,
.infobox-type-badge a:visited {
    color: rgba(255, 255, 255, 0.9) !important;
    text-decoration: none;
}
.infobox-type-badge a:hover {
    text-decoration: underline;
}
.infobox-crt-model .infobox-type-badge {
    background-color: #5a4bc9;
    color: rgba(255, 255, 255, 0.9);
}
.infobox-av-device .infobox-type-badge {
    background-color: #255ec4;
    color: rgba(255, 255, 255, 0.9);
}
.infobox-accessory .infobox-type-badge {
    background-color: #a86230;
    color: rgba(255, 255, 255, 0.9);
}
.infobox-part .infobox-type-badge {
    background-color: #515c68;
    color: rgba(255, 255, 255, 0.9);
}
/* Non-CRT warning banner */
.non-crt-banner {
    background-color: #d4544a;
    color: #ffffff;
    font-size: 110%;
}
}


Line 28: Line 99:
.infobox-part .infobox-section-header {
.infobox-part .infobox-section-header {
     background-color: #d0d0d5;
     background-color: #d0d0d5;
    color: #333333;
}
.infobox-non-crt .infobox-section-header {
    background-color: #d5cccc;
     color: #333333;
     color: #333333;
}
}
Line 36: Line 112:
.infobox-part .infobox-label {
.infobox-part .infobox-label {
     background-color: #f0f0f5;
     background-color: #f0f0f5;
    color: #333333;
}
.infobox-non-crt .infobox-label {
    background-color: #f5f0f0;
     color: #333333;
     color: #333333;
}
}
Line 42: Line 123:
.infobox-av-device .infobox-value,
.infobox-av-device .infobox-value,
.infobox-accessory .infobox-value,
.infobox-accessory .infobox-value,
.infobox-part .infobox-value {
.infobox-part .infobox-value,
.infobox-non-crt .infobox-value {
     background-color: #ffffff;
     background-color: #ffffff;
     color: #333333;
     color: #333333;
Line 50: Line 132:
.infobox-av-device .infobox-image,
.infobox-av-device .infobox-image,
.infobox-accessory .infobox-image,
.infobox-accessory .infobox-image,
.infobox-part .infobox-image {
.infobox-part .infobox-image,
.infobox-non-crt .infobox-image {
     background-color: #ffffff;
     background-color: #ffffff;
}
}
Line 69: Line 152:
}
}


/* Default button-primary (fallback) */
.infobox-button-primary {
.infobox-button-primary {
     background-color: #6c5ce7;
     background-color: #6c5ce7;
     color: #ffffff !important;
     color: #ffffff !important;
     border: 1px solid #5a4bd1;
     border: 1px solid #5a4bd1;
}
/* Per-type button-primary colors */
.infobox-crt-model .infobox-button-primary {
    background-color: #6c5ce7;
    border-color: #5a4bd1;
}
.infobox-av-device .infobox-button-primary {
    background-color: #2d6cdf;
    border-color: #255ec4;
}
.infobox-accessory .infobox-button-primary {
    background-color: #c0713a;
    border-color: #a86230;
}
.infobox-part .infobox-button-primary {
    background-color: #5f6b7a;
    border-color: #515c68;
}
}


Line 126: Line 231:
     .infobox-av-device,
     .infobox-av-device,
     .infobox-accessory,
     .infobox-accessory,
     .infobox-part {
     .infobox-part,
    .infobox-non-crt {
         float: none !important;
         float: none !important;
         width: 100% !important;
         width: 100% !important;
Line 136: Line 242:
     .infobox-av-device .infobox-image img,
     .infobox-av-device .infobox-image img,
     .infobox-accessory .infobox-image img,
     .infobox-accessory .infobox-image img,
     .infobox-part .infobox-image img {
     .infobox-part .infobox-image img,
    .infobox-non-crt .infobox-image img {
         max-width: 100%;
         max-width: 100%;
         height: auto;
         height: auto;
Line 195: Line 302:
html.skin-theme-clientpref-night .infobox-av-device,
html.skin-theme-clientpref-night .infobox-av-device,
html.skin-theme-clientpref-night .infobox-accessory,
html.skin-theme-clientpref-night .infobox-accessory,
html.skin-theme-clientpref-night .infobox-part {
html.skin-theme-clientpref-night .infobox-part,
html.skin-theme-clientpref-night .infobox-non-crt {
     background-color: #1e1e2e;
     background-color: #1e1e2e;
     border-color: #45475a;
     border-color: #45475a;
}
}


html.skin-theme-clientpref-night .infobox-crt-model .infobox-title,
/* Per-type title colors - night mode */
html.skin-theme-clientpref-night .infobox-av-device .infobox-title,
html.skin-theme-clientpref-night .infobox-crt-model .infobox-title {
html.skin-theme-clientpref-night .infobox-accessory .infobox-title,
    background-color: #7c6cf7;
    color: #ffffff;
}
 
html.skin-theme-clientpref-night .infobox-av-device .infobox-title {
    background-color: #4a8af4;
    color: #ffffff;
}
 
html.skin-theme-clientpref-night .infobox-accessory .infobox-title {
    background-color: #d4874e;
    color: #ffffff;
}
 
html.skin-theme-clientpref-night .infobox-part .infobox-title {
html.skin-theme-clientpref-night .infobox-part .infobox-title {
     background-color: #7c6cf7;
     background-color: #7a8594;
    color: #ffffff;
}
 
html.skin-theme-clientpref-night .infobox-non-crt .infobox-title {
    background-color: #8a7b7b;
    color: #ffffff;
}
 
/* Type badge - night mode */
html.skin-theme-clientpref-night .infobox-crt-model .infobox-type-badge {
    background-color: #6a5ae0;
    color: rgba(255, 255, 255, 0.85);
}
 
html.skin-theme-clientpref-night .infobox-av-device .infobox-type-badge {
    background-color: #3b78e0;
    color: rgba(255, 255, 255, 0.85);
}
 
html.skin-theme-clientpref-night .infobox-accessory .infobox-type-badge {
    background-color: #b87640;
    color: rgba(255, 255, 255, 0.85);
}
 
html.skin-theme-clientpref-night .infobox-part .infobox-type-badge {
    background-color: #687382;
    color: rgba(255, 255, 255, 0.85);
}
 
/* Badge link styling - night mode */
html.skin-theme-clientpref-night .infobox-type-badge a,
html.skin-theme-clientpref-night .infobox-type-badge a:visited {
    color: rgba(255, 255, 255, 0.85) !important;
}
 
html.skin-theme-clientpref-night .non-crt-banner {
    background-color: #c44a40;
     color: #ffffff;
     color: #ffffff;
}
}
Line 213: Line 371:
html.skin-theme-clientpref-night .infobox-part .infobox-section-header {
html.skin-theme-clientpref-night .infobox-part .infobox-section-header {
     background-color: #45475a;
     background-color: #45475a;
    color: #cdd6f4;
}
html.skin-theme-clientpref-night .infobox-non-crt .infobox-section-header {
    background-color: #4a4555;
     color: #cdd6f4;
     color: #cdd6f4;
}
}
Line 221: Line 384:
html.skin-theme-clientpref-night .infobox-part .infobox-label {
html.skin-theme-clientpref-night .infobox-part .infobox-label {
     background-color: #313244;
     background-color: #313244;
    color: #cdd6f4;
}
html.skin-theme-clientpref-night .infobox-non-crt .infobox-label {
    background-color: #352e2e;
     color: #cdd6f4;
     color: #cdd6f4;
}
}
Line 227: Line 395:
html.skin-theme-clientpref-night .infobox-av-device .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-accessory .infobox-value,
html.skin-theme-clientpref-night .infobox-part .infobox-value {
html.skin-theme-clientpref-night .infobox-part .infobox-value,
html.skin-theme-clientpref-night .infobox-non-crt .infobox-value {
     background-color: #1e1e2e;
     background-color: #1e1e2e;
     color: #cdd6f4;
     color: #cdd6f4;
Line 235: Line 404:
html.skin-theme-clientpref-night .infobox-av-device .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-accessory .infobox-image,
html.skin-theme-clientpref-night .infobox-part .infobox-image {
html.skin-theme-clientpref-night .infobox-part .infobox-image,
html.skin-theme-clientpref-night .infobox-non-crt .infobox-image {
     background-color: #1e1e2e;
     background-color: #1e1e2e;
}
/* Per-type button-primary - night mode */
html.skin-theme-clientpref-night .infobox-crt-model .infobox-button-primary {
    background-color: #7c6cf7;
    color: #ffffff !important;
    border-color: #6c5ce7;
}
html.skin-theme-clientpref-night .infobox-av-device .infobox-button-primary {
    background-color: #4a8af4;
    color: #ffffff !important;
    border-color: #3b78e0;
}
html.skin-theme-clientpref-night .infobox-accessory .infobox-button-primary {
    background-color: #d4874e;
    color: #ffffff !important;
    border-color: #b87640;
}
html.skin-theme-clientpref-night .infobox-part .infobox-button-primary {
    background-color: #7a8594;
    color: #ffffff !important;
    border-color: #687382;
}
}


Line 255: Line 450:
}
}


html.skin-theme-clientpref-night .infobox-crt-model a,
/* Infobox link colors - night mode (exclude red links) */
html.skin-theme-clientpref-night .infobox-av-device a,
html.skin-theme-clientpref-night .infobox-crt-model a:not(.new),
html.skin-theme-clientpref-night .infobox-accessory a,
html.skin-theme-clientpref-night .infobox-av-device a:not(.new),
html.skin-theme-clientpref-night .infobox-part a {
html.skin-theme-clientpref-night .infobox-accessory a:not(.new),
html.skin-theme-clientpref-night .infobox-part a:not(.new),
html.skin-theme-clientpref-night .infobox-non-crt a:not(.new) {
     color: #89b4fa;
     color: #89b4fa;
}
}


html.skin-theme-clientpref-night .infobox-crt-model a:visited,
html.skin-theme-clientpref-night .infobox-crt-model a:visited:not(.new),
html.skin-theme-clientpref-night .infobox-av-device a:visited,
html.skin-theme-clientpref-night .infobox-av-device a:visited:not(.new),
html.skin-theme-clientpref-night .infobox-accessory a:visited,
html.skin-theme-clientpref-night .infobox-accessory a:visited:not(.new),
html.skin-theme-clientpref-night .infobox-part a:visited {
html.skin-theme-clientpref-night .infobox-part a:visited:not(.new),
html.skin-theme-clientpref-night .infobox-non-crt a:visited:not(.new) {
     color: #cba6f7;
     color: #cba6f7;
}
/* Red links (non-existent pages) - night mode */
html.skin-theme-clientpref-night .infobox-crt-model a.new,
html.skin-theme-clientpref-night .infobox-av-device a.new,
html.skin-theme-clientpref-night .infobox-accessory a.new,
html.skin-theme-clientpref-night .infobox-part a.new,
html.skin-theme-clientpref-night .infobox-non-crt a.new {
    color: #f38ba8 !important;
}
}


Line 300: Line 507:
}
}


/* Document buttons stay blue in dark mode for consistency */
html.skin-theme-clientpref-night .document-button-primary {
html.skin-theme-clientpref-night .document-button-primary {
     background-color: #3b82f6;
     background-color: #3b82f6;
Line 313: Line 519:
}
}


/* Wikitable dark mode (for tables inside document infobox) */
html.skin-theme-clientpref-night .document-infobox .wikitable {
html.skin-theme-clientpref-night .document-infobox .wikitable {
     background-color: #1e1e2e;
     background-color: #1e1e2e;
Line 345: Line 550:
     html.skin-theme-clientpref-os .infobox-av-device,
     html.skin-theme-clientpref-os .infobox-av-device,
     html.skin-theme-clientpref-os .infobox-accessory,
     html.skin-theme-clientpref-os .infobox-accessory,
     html.skin-theme-clientpref-os .infobox-part {
     html.skin-theme-clientpref-os .infobox-part,
    html.skin-theme-clientpref-os .infobox-non-crt {
         background-color: #1e1e2e;
         background-color: #1e1e2e;
         border-color: #45475a;
         border-color: #45475a;
     }
     }


     html.skin-theme-clientpref-os .infobox-crt-model .infobox-title,
    /* Per-type title colors - OS dark mode */
     html.skin-theme-clientpref-os .infobox-av-device .infobox-title,
     html.skin-theme-clientpref-os .infobox-crt-model .infobox-title {
     html.skin-theme-clientpref-os .infobox-accessory .infobox-title,
        background-color: #7c6cf7;
        color: #ffffff;
    }
 
     html.skin-theme-clientpref-os .infobox-av-device .infobox-title {
        background-color: #4a8af4;
        color: #ffffff;
    }
 
     html.skin-theme-clientpref-os .infobox-accessory .infobox-title {
        background-color: #d4874e;
        color: #ffffff;
    }
 
     html.skin-theme-clientpref-os .infobox-part .infobox-title {
     html.skin-theme-clientpref-os .infobox-part .infobox-title {
         background-color: #7c6cf7;
         background-color: #7a8594;
        color: #ffffff;
    }
 
    html.skin-theme-clientpref-os .infobox-non-crt .infobox-title {
        background-color: #8a7b7b;
        color: #ffffff;
    }
 
    /* Type badge - OS dark mode */
    html.skin-theme-clientpref-os .infobox-crt-model .infobox-type-badge {
        background-color: #6a5ae0;
        color: rgba(255, 255, 255, 0.85);
    }
 
    html.skin-theme-clientpref-os .infobox-av-device .infobox-type-badge {
        background-color: #3b78e0;
        color: rgba(255, 255, 255, 0.85);
    }
 
    html.skin-theme-clientpref-os .infobox-accessory .infobox-type-badge {
        background-color: #b87640;
        color: rgba(255, 255, 255, 0.85);
    }
 
    html.skin-theme-clientpref-os .infobox-part .infobox-type-badge {
        background-color: #687382;
        color: rgba(255, 255, 255, 0.85);
    }
 
    /* Badge link styling - OS dark mode */
    html.skin-theme-clientpref-os .infobox-type-badge a,
    html.skin-theme-clientpref-os .infobox-type-badge a:visited {
        color: rgba(255, 255, 255, 0.85) !important;
    }
 
    html.skin-theme-clientpref-os .non-crt-banner {
        background-color: #c44a40;
         color: #ffffff;
         color: #ffffff;
     }
     }
Line 363: Line 619:
     html.skin-theme-clientpref-os .infobox-part .infobox-section-header {
     html.skin-theme-clientpref-os .infobox-part .infobox-section-header {
         background-color: #45475a;
         background-color: #45475a;
        color: #cdd6f4;
    }
    html.skin-theme-clientpref-os .infobox-non-crt .infobox-section-header {
        background-color: #4a4555;
         color: #cdd6f4;
         color: #cdd6f4;
     }
     }
Line 371: Line 632:
     html.skin-theme-clientpref-os .infobox-part .infobox-label {
     html.skin-theme-clientpref-os .infobox-part .infobox-label {
         background-color: #313244;
         background-color: #313244;
        color: #cdd6f4;
    }
    html.skin-theme-clientpref-os .infobox-non-crt .infobox-label {
        background-color: #352e2e;
         color: #cdd6f4;
         color: #cdd6f4;
     }
     }
Line 377: Line 643:
     html.skin-theme-clientpref-os .infobox-av-device .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-accessory .infobox-value,
     html.skin-theme-clientpref-os .infobox-part .infobox-value {
     html.skin-theme-clientpref-os .infobox-part .infobox-value,
    html.skin-theme-clientpref-os .infobox-non-crt .infobox-value {
         background-color: #1e1e2e;
         background-color: #1e1e2e;
         color: #cdd6f4;
         color: #cdd6f4;
Line 385: Line 652:
     html.skin-theme-clientpref-os .infobox-av-device .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-accessory .infobox-image,
     html.skin-theme-clientpref-os .infobox-part .infobox-image {
     html.skin-theme-clientpref-os .infobox-part .infobox-image,
    html.skin-theme-clientpref-os .infobox-non-crt .infobox-image {
         background-color: #1e1e2e;
         background-color: #1e1e2e;
    }
    /* Per-type button-primary - OS dark mode */
    html.skin-theme-clientpref-os .infobox-crt-model .infobox-button-primary {
        background-color: #7c6cf7;
        color: #ffffff !important;
        border-color: #6c5ce7;
    }
    html.skin-theme-clientpref-os .infobox-av-device .infobox-button-primary {
        background-color: #4a8af4;
        color: #ffffff !important;
        border-color: #3b78e0;
    }
    html.skin-theme-clientpref-os .infobox-accessory .infobox-button-primary {
        background-color: #d4874e;
        color: #ffffff !important;
        border-color: #b87640;
    }
    html.skin-theme-clientpref-os .infobox-part .infobox-button-primary {
        background-color: #7a8594;
        color: #ffffff !important;
        border-color: #687382;
     }
     }


Line 405: Line 698:
     }
     }


     html.skin-theme-clientpref-os .infobox-crt-model a,
    /* Infobox link colors - OS dark mode (exclude red links) */
     html.skin-theme-clientpref-os .infobox-av-device a,
     html.skin-theme-clientpref-os .infobox-crt-model a:not(.new),
     html.skin-theme-clientpref-os .infobox-accessory a,
     html.skin-theme-clientpref-os .infobox-av-device a:not(.new),
     html.skin-theme-clientpref-os .infobox-part a {
     html.skin-theme-clientpref-os .infobox-accessory a:not(.new),
     html.skin-theme-clientpref-os .infobox-part a:not(.new),
    html.skin-theme-clientpref-os .infobox-non-crt a:not(.new) {
         color: #89b4fa;
         color: #89b4fa;
     }
     }


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


     /* TBC group OS dark mode */
     /* Red links (non-existent pages) - OS dark mode */
    html.skin-theme-clientpref-os .infobox-crt-model a.new,
    html.skin-theme-clientpref-os .infobox-av-device a.new,
    html.skin-theme-clientpref-os .infobox-accessory a.new,
    html.skin-theme-clientpref-os .infobox-part a.new,
    html.skin-theme-clientpref-os .infobox-non-crt a.new {
        color: #f38ba8 !important;
    }
 
     html.skin-theme-clientpref-os .infobox-tbc-group {
     html.skin-theme-clientpref-os .infobox-tbc-group {
         border-left-color: #45475a;
         border-left-color: #45475a;
     }
     }


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


    /* Document infobox OS dark mode */
     html.skin-theme-clientpref-os .document-infobox {
     html.skin-theme-clientpref-os .document-infobox {
         background-color: #313244;
         background-color: #313244;
Line 450: Line 752:
     }
     }


    /* Document buttons stay blue in dark mode */
     html.skin-theme-clientpref-os .document-button-primary {
     html.skin-theme-clientpref-os .document-button-primary {
         background-color: #3b82f6;
         background-color: #3b82f6;
Line 463: Line 764:
     }
     }


    /* Wikitable OS dark mode */
     html.skin-theme-clientpref-os .document-infobox .wikitable {
     html.skin-theme-clientpref-os .document-infobox .wikitable {
         background-color: #1e1e2e;
         background-color: #1e1e2e;
Retrieved from "https://wiki.everycrt.com/wiki/Template:Infobox_styles.css"
MediaWiki Appliance - Powered by TurnKey Linux