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