Template:Infobox styles.css

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

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

.infobox-crt-model, .infobox-av-device {

   background-color: #ffffff;
   border: 1px solid #a2a9b1;
   border-radius: 3px;

}

.infobox-crt-model .infobox-title, .infobox-av-device .infobox-title {

   background-color: #6c5ce7;
   color: #ffffff;
   border-radius: 2px 2px 0 0;

}

.infobox-crt-model .infobox-section-header, .infobox-av-device .infobox-section-header {

   background-color: #d0d0d5;
   color: #333333;

}

.infobox-crt-model .infobox-label, .infobox-av-device .infobox-label {

   background-color: #f0f0f5;
   color: #333333;

}

.infobox-crt-model .infobox-value, .infobox-av-device .infobox-value {

   background-color: #ffffff;
   color: #333333;

}

.infobox-crt-model .infobox-image, .infobox-av-device .infobox-image {

   background-color: #ffffff;

}

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

}

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

/* User preference: night mode */ html.skin-theme-clientpref-night .infobox-crt-model, html.skin-theme-clientpref-night .infobox-av-device {

   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 {

   background-color: #7c6cf7;
   color: #ffffff;

}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-section-header, html.skin-theme-clientpref-night .infobox-av-device .infobox-section-header {

   background-color: #45475a;
   color: #cdd6f4;

}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-label, html.skin-theme-clientpref-night .infobox-av-device .infobox-label {

   background-color: #313244;
   color: #cdd6f4;

}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-value, html.skin-theme-clientpref-night .infobox-av-device .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 {

   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 {

   color: #89b4fa;

}

html.skin-theme-clientpref-night .infobox-crt-model a:visited, html.skin-theme-clientpref-night .infobox-av-device a:visited {

   color: #cba6f7;

}

/* 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 {
       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 {
       background-color: #7c6cf7;
       color: #ffffff;
   }

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

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

   html.skin-theme-clientpref-os .infobox-crt-model .infobox-value,
   html.skin-theme-clientpref-os .infobox-av-device .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 {
       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 {
       color: #89b4fa;
   }

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

}