Template:CRT model/styles.css

/* ==========================================================================

  CRT Model Infobox - Base Styles (Light Mode)
  ========================================================================== */

.infobox-crt-model {

   border: 1px solid #a2a9b1;
   background: #f8f9fa;

}

.infobox-crt-model .infobox-section-header {

   background: #e0e0e0;
   color: #202122;

}

.infobox-crt-model .infobox-label {

   color: #202122;

}

.infobox-crt-model .infobox-value {

   color: #202122;

}

.infobox-crt-model .infobox-title {

   color: #202122;

}

/* Mod not feasible styling - light mode */ .infobox-crt-model .mod-not-feasible {

   color: #dc2626;

}

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

}

/* Secondary button (Add a document) - light mode */ .infobox-button-secondary {

   background-color: #eff6ff;
   color: #1d4ed8;
   border: 1px solid #bfdbfe;

}

/* ==========================================================================

  Night Mode Styles (using MediaWiki standard selectors)
  
  Minerva Neue uses skin-theme-clientpref-night class on html element
  when night mode is active (via ?minervanightmode=1 or user preference)
  ========================================================================== */

/* Night mode - explicit preference */ html.skin-theme-clientpref-night .infobox-crt-model {

   border-color: #72777d;
   background: #27292d;

}

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

   background: #3c3f44;
   color: #f8f9fa;

}

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

   color: #f8f9fa;

}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-value {

   color: #eaecf0;

}

html.skin-theme-clientpref-night .infobox-crt-model .infobox-title {

   color: #f8f9fa;

}

/* Mod not feasible styling - night mode */ html.skin-theme-clientpref-night .infobox-crt-model .mod-not-feasible {

   color: #f87171;

}

/* Primary button - night mode */ html.skin-theme-clientpref-night .infobox-button-primary {

   background-color: #3b82f6;
   color: #ffffff;
   border-color: #3b82f6;

}

/* Secondary button - night mode */ html.skin-theme-clientpref-night .infobox-button-secondary {

   background-color: #1e3a5f;
   color: #93c5fd;
   border-color: #1e40af;

}

/* ==========================================================================

  Night Mode - System Preference (prefers-color-scheme)
  
  When user has skin-theme-clientpref-os class AND system prefers dark
  ========================================================================== */

@media screen and (prefers-color-scheme: dark) {

   html.skin-theme-clientpref-os .infobox-crt-model {
       border-color: #72777d;
       background: #27292d;
   }
   
   html.skin-theme-clientpref-os .infobox-crt-model .infobox-section-header {
       background: #3c3f44;
       color: #f8f9fa;
   }
   
   html.skin-theme-clientpref-os .infobox-crt-model .infobox-label {
       color: #f8f9fa;
   }
   
   html.skin-theme-clientpref-os .infobox-crt-model .infobox-value {
       color: #eaecf0;
   }
   
   html.skin-theme-clientpref-os .infobox-crt-model .infobox-title {
       color: #f8f9fa;
   }
   
   /* Mod not feasible styling - system dark preference */
   html.skin-theme-clientpref-os .infobox-crt-model .mod-not-feasible {
       color: #f87171;
   }
   
   /* Primary button - system dark preference */
   html.skin-theme-clientpref-os .infobox-button-primary {
       background-color: #3b82f6;
       color: #ffffff;
       border-color: #3b82f6;
   }
   
   /* Secondary button - system dark preference */
   html.skin-theme-clientpref-os .infobox-button-secondary {
       background-color: #1e3a5f;
       color: #93c5fd;
       border-color: #1e40af;
   }

}

/* ==========================================================================

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

@media (max-width: 600px) {

   .infobox-crt-model {
       float: none !important;
       width: 100% !important;
       margin: 0 0 1em 0 !important;
       max-width: 100% !important;
   }

}