/* 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;
}
/* Per-type title colors */
.infobox-crt-model .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 {
background-color: #5f6b7a;
color: #ffffff;
border-radius: 2px 2px 0 0;
}
.infobox-non-crt .infobox-title {
background-color: #7a6b6b;
color: #ffffff;
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%;
}
.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;
}
/* Default button-primary (fallback) */
.infobox-button-primary {
background-color: #6c5ce7;
color: #ffffff !important;
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;
}
.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;
}
/* Per-type title colors - night mode */
html.skin-theme-clientpref-night .infobox-crt-model .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 {
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;
}
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;
}
/* 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;
}
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;
}
/* Infobox link colors - night mode (exclude red links) */
html.skin-theme-clientpref-night .infobox-crt-model a:not(.new),
html.skin-theme-clientpref-night .infobox-av-device a:not(.new),
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;
}
html.skin-theme-clientpref-night .infobox-crt-model a:visited:not(.new),
html.skin-theme-clientpref-night .infobox-av-device a:visited:not(.new),
html.skin-theme-clientpref-night .infobox-accessory a:visited:not(.new),
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;
}
/* 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;
}
/* 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;
}
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;
}
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;
}
/* Per-type title colors - OS dark mode */
html.skin-theme-clientpref-os .infobox-crt-model .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 {
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;
}
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;
}
/* 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;
}
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;
}
/* Infobox link colors - OS dark mode (exclude red links) */
html.skin-theme-clientpref-os .infobox-crt-model a:not(.new),
html.skin-theme-clientpref-os .infobox-av-device a:not(.new),
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;
}
html.skin-theme-clientpref-os .infobox-crt-model a:visited:not(.new),
html.skin-theme-clientpref-os .infobox-av-device a:visited:not(.new),
html.skin-theme-clientpref-os .infobox-accessory a:visited:not(.new),
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;
}
/* 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 {
border-left-color: #45475a;
}
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;
}
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;
}
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;
}
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;
}
}
