Template:Infobox styles.css: Difference between revisions
Arclight changed the content model of the page Template:Infobox styles.css from "wikitext" to "Sanitized CSS" |
Add document infobox styles with dark mode support (via update-page on MediaWiki MCP Server) |
||
| Line 1: | Line 1: | ||
/* Shared Infobox Styles for EveryCRT Wiki */ | /* Shared Infobox Styles for EveryCRT Wiki */ | ||
/* Supports | /* Supports CRT model, AV device, and Document infoboxes */ | ||
/* Includes dark mode via skin-theme-clientpref classes */ | /* Includes dark mode via skin-theme-clientpref classes */ | ||
| Line 67: | Line 67: | ||
.mod-not-feasible { | .mod-not-feasible { | ||
color: #cc3333; | color: #cc3333; | ||
} | |||
/* ===== 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; | |||
} | } | ||
| Line 131: | Line 178: | ||
html.skin-theme-clientpref-night .infobox-av-device a:visited { | html.skin-theme-clientpref-night .infobox-av-device a:visited { | ||
color: #cba6f7; | color: #cba6f7; | ||
} | |||
/* 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: #7c6cf7; | |||
color: #ffffff !important; | |||
border-color: #6c5ce7; | |||
} | |||
html.skin-theme-clientpref-night .document-button-secondary { | |||
background-color: #45475a; | |||
color: #cdd6f4 !important; | |||
border-color: #585b70; | |||
} | } | ||
| Line 194: | Line 269: | ||
html.skin-theme-clientpref-os .infobox-av-device a:visited { | html.skin-theme-clientpref-os .infobox-av-device a:visited { | ||
color: #cba6f7; | color: #cba6f7; | ||
} | |||
/* Document infobox OS dark mode */ | |||
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: #7c6cf7; | |||
color: #ffffff !important; | |||
border-color: #6c5ce7; | |||
} | |||
html.skin-theme-clientpref-os .document-button-secondary { | |||
background-color: #45475a; | |||
color: #cdd6f4 !important; | |||
border-color: #585b70; | |||
} | } | ||
} | } | ||
