Template:Infobox styles.css: Difference between revisions
Change TBC group border accent color to #d0d0d5 (matches section header background) (via update-page on MediaWiki MCP Server) |
Add .infobox-accessory class support for accessory infoboxes (via update-page on MediaWiki MCP Server) |
||
| Line 1: | Line 1: | ||
/* Shared Infobox Styles for EveryCRT Wiki */ | /* Shared Infobox Styles for EveryCRT Wiki */ | ||
/* Supports CRT model, AV device, and Document infoboxes */ | /* Supports CRT model, AV device, Accessory, and Document infoboxes */ | ||
/* Includes dark mode via skin-theme-clientpref classes */ | /* Includes dark mode via skin-theme-clientpref classes */ | ||
| Line 6: | Line 6: | ||
.infobox-crt-model, | .infobox-crt-model, | ||
.infobox-av-device { | .infobox-av-device, | ||
.infobox-accessory { | |||
background-color: #ffffff; | background-color: #ffffff; | ||
border: 1px solid #a2a9b1; | border: 1px solid #a2a9b1; | ||
| Line 13: | Line 14: | ||
.infobox-crt-model .infobox-title, | .infobox-crt-model .infobox-title, | ||
.infobox-av-device .infobox-title { | .infobox-av-device .infobox-title, | ||
.infobox-accessory .infobox-title { | |||
background-color: #6c5ce7; | background-color: #6c5ce7; | ||
color: #ffffff; | color: #ffffff; | ||
| Line 20: | Line 22: | ||
.infobox-crt-model .infobox-section-header, | .infobox-crt-model .infobox-section-header, | ||
.infobox-av-device .infobox-section-header { | .infobox-av-device .infobox-section-header, | ||
.infobox-accessory .infobox-section-header { | |||
background-color: #d0d0d5; | background-color: #d0d0d5; | ||
color: #333333; | color: #333333; | ||
| Line 26: | Line 29: | ||
.infobox-crt-model .infobox-label, | .infobox-crt-model .infobox-label, | ||
.infobox-av-device .infobox-label { | .infobox-av-device .infobox-label, | ||
.infobox-accessory .infobox-label { | |||
background-color: #f0f0f5; | background-color: #f0f0f5; | ||
color: #333333; | color: #333333; | ||
| Line 32: | Line 36: | ||
.infobox-crt-model .infobox-value, | .infobox-crt-model .infobox-value, | ||
.infobox-av-device .infobox-value { | .infobox-av-device .infobox-value, | ||
.infobox-accessory .infobox-value { | |||
background-color: #ffffff; | background-color: #ffffff; | ||
color: #333333; | color: #333333; | ||
| Line 38: | Line 43: | ||
.infobox-crt-model .infobox-image, | .infobox-crt-model .infobox-image, | ||
.infobox-av-device .infobox-image { | .infobox-av-device .infobox-image, | ||
.infobox-accessory .infobox-image { | |||
background-color: #ffffff; | background-color: #ffffff; | ||
} | } | ||
| Line 85: | Line 91: | ||
@media screen and (max-width: 720px) { | @media screen and (max-width: 720px) { | ||
.infobox-crt-model, | .infobox-crt-model, | ||
.infobox-av-device { | .infobox-av-device, | ||
.infobox-accessory { | |||
float: none !important; | float: none !important; | ||
width: 100% !important; | width: 100% !important; | ||
| Line 93: | Line 100: | ||
.infobox-crt-model .infobox-image img, | .infobox-crt-model .infobox-image img, | ||
.infobox-av-device .infobox-image img { | .infobox-av-device .infobox-image img, | ||
.infobox-accessory .infobox-image img { | |||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
| Line 150: | Line 158: | ||
/* User preference: night mode */ | /* User preference: night mode */ | ||
html.skin-theme-clientpref-night .infobox-crt-model, | html.skin-theme-clientpref-night .infobox-crt-model, | ||
html.skin-theme-clientpref-night .infobox-av-device { | html.skin-theme-clientpref-night .infobox-av-device, | ||
html.skin-theme-clientpref-night .infobox-accessory { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
border-color: #45475a; | border-color: #45475a; | ||
| Line 156: | Line 165: | ||
html.skin-theme-clientpref-night .infobox-crt-model .infobox-title, | html.skin-theme-clientpref-night .infobox-crt-model .infobox-title, | ||
html.skin-theme-clientpref-night .infobox-av-device .infobox-title { | html.skin-theme-clientpref-night .infobox-av-device .infobox-title, | ||
html.skin-theme-clientpref-night .infobox-accessory .infobox-title { | |||
background-color: #7c6cf7; | background-color: #7c6cf7; | ||
color: #ffffff; | color: #ffffff; | ||
| Line 162: | Line 172: | ||
html.skin-theme-clientpref-night .infobox-crt-model .infobox-section-header, | html.skin-theme-clientpref-night .infobox-crt-model .infobox-section-header, | ||
html.skin-theme-clientpref-night .infobox-av-device .infobox-section-header { | html.skin-theme-clientpref-night .infobox-av-device .infobox-section-header, | ||
html.skin-theme-clientpref-night .infobox-accessory .infobox-section-header { | |||
background-color: #45475a; | background-color: #45475a; | ||
color: #cdd6f4; | color: #cdd6f4; | ||
| Line 168: | Line 179: | ||
html.skin-theme-clientpref-night .infobox-crt-model .infobox-label, | html.skin-theme-clientpref-night .infobox-crt-model .infobox-label, | ||
html.skin-theme-clientpref-night .infobox-av-device .infobox-label { | html.skin-theme-clientpref-night .infobox-av-device .infobox-label, | ||
html.skin-theme-clientpref-night .infobox-accessory .infobox-label { | |||
background-color: #313244; | background-color: #313244; | ||
color: #cdd6f4; | color: #cdd6f4; | ||
| Line 174: | Line 186: | ||
html.skin-theme-clientpref-night .infobox-crt-model .infobox-value, | html.skin-theme-clientpref-night .infobox-crt-model .infobox-value, | ||
html.skin-theme-clientpref-night .infobox-av-device .infobox-value { | html.skin-theme-clientpref-night .infobox-av-device .infobox-value, | ||
html.skin-theme-clientpref-night .infobox-accessory .infobox-value { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
color: #cdd6f4; | color: #cdd6f4; | ||
| Line 180: | Line 193: | ||
html.skin-theme-clientpref-night .infobox-crt-model .infobox-image, | html.skin-theme-clientpref-night .infobox-crt-model .infobox-image, | ||
html.skin-theme-clientpref-night .infobox-av-device .infobox-image { | html.skin-theme-clientpref-night .infobox-av-device .infobox-image, | ||
html.skin-theme-clientpref-night .infobox-accessory .infobox-image { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
} | } | ||
| Line 201: | Line 215: | ||
html.skin-theme-clientpref-night .infobox-crt-model a, | html.skin-theme-clientpref-night .infobox-crt-model a, | ||
html.skin-theme-clientpref-night .infobox-av-device a { | html.skin-theme-clientpref-night .infobox-av-device a, | ||
html.skin-theme-clientpref-night .infobox-accessory a { | |||
color: #89b4fa; | color: #89b4fa; | ||
} | } | ||
html.skin-theme-clientpref-night .infobox-crt-model a:visited, | html.skin-theme-clientpref-night .infobox-crt-model a:visited, | ||
html.skin-theme-clientpref-night .infobox-av-device a:visited { | html.skin-theme-clientpref-night .infobox-av-device a:visited, | ||
html.skin-theme-clientpref-night .infobox-accessory a:visited { | |||
color: #cba6f7; | color: #cba6f7; | ||
} | } | ||
| Line 274: | Line 290: | ||
@media (prefers-color-scheme: dark) { | @media (prefers-color-scheme: dark) { | ||
html.skin-theme-clientpref-os .infobox-crt-model, | html.skin-theme-clientpref-os .infobox-crt-model, | ||
html.skin-theme-clientpref-os .infobox-av-device { | html.skin-theme-clientpref-os .infobox-av-device, | ||
html.skin-theme-clientpref-os .infobox-accessory { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
border-color: #45475a; | border-color: #45475a; | ||
| Line 280: | Line 297: | ||
html.skin-theme-clientpref-os .infobox-crt-model .infobox-title, | html.skin-theme-clientpref-os .infobox-crt-model .infobox-title, | ||
html.skin-theme-clientpref-os .infobox-av-device .infobox-title { | html.skin-theme-clientpref-os .infobox-av-device .infobox-title, | ||
html.skin-theme-clientpref-os .infobox-accessory .infobox-title { | |||
background-color: #7c6cf7; | background-color: #7c6cf7; | ||
color: #ffffff; | color: #ffffff; | ||
| Line 286: | Line 304: | ||
html.skin-theme-clientpref-os .infobox-crt-model .infobox-section-header, | html.skin-theme-clientpref-os .infobox-crt-model .infobox-section-header, | ||
html.skin-theme-clientpref-os .infobox-av-device .infobox-section-header { | html.skin-theme-clientpref-os .infobox-av-device .infobox-section-header, | ||
html.skin-theme-clientpref-os .infobox-accessory .infobox-section-header { | |||
background-color: #45475a; | background-color: #45475a; | ||
color: #cdd6f4; | color: #cdd6f4; | ||
| Line 292: | Line 311: | ||
html.skin-theme-clientpref-os .infobox-crt-model .infobox-label, | html.skin-theme-clientpref-os .infobox-crt-model .infobox-label, | ||
html.skin-theme-clientpref-os .infobox-av-device .infobox-label { | html.skin-theme-clientpref-os .infobox-av-device .infobox-label, | ||
html.skin-theme-clientpref-os .infobox-accessory .infobox-label { | |||
background-color: #313244; | background-color: #313244; | ||
color: #cdd6f4; | color: #cdd6f4; | ||
| Line 298: | Line 318: | ||
html.skin-theme-clientpref-os .infobox-crt-model .infobox-value, | html.skin-theme-clientpref-os .infobox-crt-model .infobox-value, | ||
html.skin-theme-clientpref-os .infobox-av-device .infobox-value { | html.skin-theme-clientpref-os .infobox-av-device .infobox-value, | ||
html.skin-theme-clientpref-os .infobox-accessory .infobox-value { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
color: #cdd6f4; | color: #cdd6f4; | ||
| Line 304: | Line 325: | ||
html.skin-theme-clientpref-os .infobox-crt-model .infobox-image, | html.skin-theme-clientpref-os .infobox-crt-model .infobox-image, | ||
html.skin-theme-clientpref-os .infobox-av-device .infobox-image { | html.skin-theme-clientpref-os .infobox-av-device .infobox-image, | ||
html.skin-theme-clientpref-os .infobox-accessory .infobox-image { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
} | } | ||
| Line 325: | Line 347: | ||
html.skin-theme-clientpref-os .infobox-crt-model a, | html.skin-theme-clientpref-os .infobox-crt-model a, | ||
html.skin-theme-clientpref-os .infobox-av-device a { | html.skin-theme-clientpref-os .infobox-av-device a, | ||
html.skin-theme-clientpref-os .infobox-accessory a { | |||
color: #89b4fa; | color: #89b4fa; | ||
} | } | ||
html.skin-theme-clientpref-os .infobox-crt-model a:visited, | html.skin-theme-clientpref-os .infobox-crt-model a:visited, | ||
html.skin-theme-clientpref-os .infobox-av-device a:visited { | html.skin-theme-clientpref-os .infobox-av-device a:visited, | ||
html.skin-theme-clientpref-os .infobox-accessory a:visited { | |||
color: #cba6f7; | color: #cba6f7; | ||
} | } | ||
