Module:CRTModel: Difference between revisions
Replace hardcoded inline colors with CSS classes for night mode compatibility (via update-page on MediaWiki MCP Server) |
Add embedded styles with night mode support (skin-theme-clientpref-night selector) (via update-page on MediaWiki MCP Server) |
||
| Line 18: | Line 18: | ||
end | end | ||
return node | return node | ||
end | |||
-- Generate the CSS for night mode support | |||
local function getStyles() | |||
return [[<style> | |||
/* 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; | |||
} | |||
.infobox-crt-model .mod-not-feasible { | |||
color: #dc2626; | |||
} | |||
.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; | |||
} | |||
.infobox-button-primary { | |||
background-color: #2563eb; | |||
color: #ffffff; | |||
border: 1px solid #2563eb; | |||
} | |||
.infobox-button-secondary { | |||
background-color: #eff6ff; | |||
color: #1d4ed8; | |||
border: 1px solid #bfdbfe; | |||
} | |||
/* Night Mode - Explicit preference (Minerva: ?minervanightmode=1 or user setting) */ | |||
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; | |||
} | |||
html.skin-theme-clientpref-night .infobox-crt-model .mod-not-feasible { | |||
color: #f87171; | |||
} | |||
html.skin-theme-clientpref-night .infobox-button-primary { | |||
background-color: #3b82f6; | |||
color: #ffffff; | |||
border-color: #3b82f6; | |||
} | |||
html.skin-theme-clientpref-night .infobox-button-secondary { | |||
background-color: #1e3a5f; | |||
color: #93c5fd; | |||
border-color: #1e40af; | |||
} | |||
/* Night Mode - System preference (prefers-color-scheme: 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; | |||
} | |||
html.skin-theme-clientpref-os .infobox-crt-model .mod-not-feasible { | |||
color: #f87171; | |||
} | |||
html.skin-theme-clientpref-os .infobox-button-primary { | |||
background-color: #3b82f6; | |||
color: #ffffff; | |||
border-color: #3b82f6; | |||
} | |||
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; | |||
} | |||
} | |||
</style>]] | |||
end | end | ||
| Line 508: | Line 630: | ||
editDiv:wikitext('[' .. tostring(editUrl) .. ' <span class="infobox-button infobox-button-primary">Edit this data</span>]') | editDiv:wikitext('[' .. tostring(editUrl) .. ' <span class="infobox-button infobox-button-primary">Edit this data</span>]') | ||
return tostring(container) | -- Return styles + container HTML | ||
return getStyles() .. tostring(container) | |||
end | end | ||
return p | return p | ||
