Template:Infobox styles.css: Difference between revisions
Add .infobox-part class support for part infoboxes (via update-page on MediaWiki MCP Server) |
Add Non-CRT model infobox and banner 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 CRT model, AV device, Accessory, Part, and Document infoboxes */ | /* Supports CRT model, AV device, Accessory, Part, Non-CRT model, and Document infoboxes */ | ||
/* Includes dark mode via skin-theme-clientpref classes */ | /* Includes dark mode via skin-theme-clientpref classes */ | ||
| Line 8: | Line 8: | ||
.infobox-av-device, | .infobox-av-device, | ||
.infobox-accessory, | .infobox-accessory, | ||
.infobox-part { | .infobox-part, | ||
.infobox-non-crt { | |||
background-color: #ffffff; | background-color: #ffffff; | ||
border: 1px solid #a2a9b1; | border: 1px solid #a2a9b1; | ||
| Line 21: | Line 22: | ||
color: #ffffff; | color: #ffffff; | ||
border-radius: 2px 2px 0 0; | border-radius: 2px 2px 0 0; | ||
} | |||
.infobox-non-crt .infobox-title { | |||
background-color: #7a6b6b; | |||
color: #ffffff; | |||
border-radius: 2px 2px 0 0; | |||
} | |||
/* Non-CRT warning banner */ | |||
.non-crt-banner { | |||
background-color: #d4544a; | |||
color: #ffffff; | |||
font-size: 110%; | |||
} | } | ||
| Line 28: | Line 42: | ||
.infobox-part .infobox-section-header { | .infobox-part .infobox-section-header { | ||
background-color: #d0d0d5; | background-color: #d0d0d5; | ||
color: #333333; | |||
} | |||
.infobox-non-crt .infobox-section-header { | |||
background-color: #d5cccc; | |||
color: #333333; | color: #333333; | ||
} | } | ||
| Line 36: | Line 55: | ||
.infobox-part .infobox-label { | .infobox-part .infobox-label { | ||
background-color: #f0f0f5; | background-color: #f0f0f5; | ||
color: #333333; | |||
} | |||
.infobox-non-crt .infobox-label { | |||
background-color: #f5f0f0; | |||
color: #333333; | color: #333333; | ||
} | } | ||
| Line 42: | Line 66: | ||
.infobox-av-device .infobox-value, | .infobox-av-device .infobox-value, | ||
.infobox-accessory .infobox-value, | .infobox-accessory .infobox-value, | ||
.infobox-part .infobox-value { | .infobox-part .infobox-value, | ||
.infobox-non-crt .infobox-value { | |||
background-color: #ffffff; | background-color: #ffffff; | ||
color: #333333; | color: #333333; | ||
| Line 50: | Line 75: | ||
.infobox-av-device .infobox-image, | .infobox-av-device .infobox-image, | ||
.infobox-accessory .infobox-image, | .infobox-accessory .infobox-image, | ||
.infobox-part .infobox-image { | .infobox-part .infobox-image, | ||
.infobox-non-crt .infobox-image { | |||
background-color: #ffffff; | background-color: #ffffff; | ||
} | } | ||
| Line 126: | Line 152: | ||
.infobox-av-device, | .infobox-av-device, | ||
.infobox-accessory, | .infobox-accessory, | ||
.infobox-part { | .infobox-part, | ||
.infobox-non-crt { | |||
float: none !important; | float: none !important; | ||
width: 100% !important; | width: 100% !important; | ||
| Line 136: | Line 163: | ||
.infobox-av-device .infobox-image img, | .infobox-av-device .infobox-image img, | ||
.infobox-accessory .infobox-image img, | .infobox-accessory .infobox-image img, | ||
.infobox-part .infobox-image img { | .infobox-part .infobox-image img, | ||
.infobox-non-crt .infobox-image img { | |||
max-width: 100%; | max-width: 100%; | ||
height: auto; | height: auto; | ||
| Line 195: | Line 223: | ||
html.skin-theme-clientpref-night .infobox-av-device, | html.skin-theme-clientpref-night .infobox-av-device, | ||
html.skin-theme-clientpref-night .infobox-accessory, | html.skin-theme-clientpref-night .infobox-accessory, | ||
html.skin-theme-clientpref-night .infobox-part { | html.skin-theme-clientpref-night .infobox-part, | ||
html.skin-theme-clientpref-night .infobox-non-crt { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
border-color: #45475a; | border-color: #45475a; | ||
| Line 205: | Line 234: | ||
html.skin-theme-clientpref-night .infobox-part .infobox-title { | html.skin-theme-clientpref-night .infobox-part .infobox-title { | ||
background-color: #7c6cf7; | background-color: #7c6cf7; | ||
color: #ffffff; | |||
} | |||
html.skin-theme-clientpref-night .infobox-non-crt .infobox-title { | |||
background-color: #8a7b7b; | |||
color: #ffffff; | |||
} | |||
html.skin-theme-clientpref-night .non-crt-banner { | |||
background-color: #c44a40; | |||
color: #ffffff; | color: #ffffff; | ||
} | } | ||
| Line 213: | Line 252: | ||
html.skin-theme-clientpref-night .infobox-part .infobox-section-header { | html.skin-theme-clientpref-night .infobox-part .infobox-section-header { | ||
background-color: #45475a; | background-color: #45475a; | ||
color: #cdd6f4; | |||
} | |||
html.skin-theme-clientpref-night .infobox-non-crt .infobox-section-header { | |||
background-color: #4a4555; | |||
color: #cdd6f4; | color: #cdd6f4; | ||
} | } | ||
| Line 221: | Line 265: | ||
html.skin-theme-clientpref-night .infobox-part .infobox-label { | html.skin-theme-clientpref-night .infobox-part .infobox-label { | ||
background-color: #313244; | background-color: #313244; | ||
color: #cdd6f4; | |||
} | |||
html.skin-theme-clientpref-night .infobox-non-crt .infobox-label { | |||
background-color: #352e2e; | |||
color: #cdd6f4; | color: #cdd6f4; | ||
} | } | ||
| Line 227: | Line 276: | ||
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, | html.skin-theme-clientpref-night .infobox-accessory .infobox-value, | ||
html.skin-theme-clientpref-night .infobox-part .infobox-value { | html.skin-theme-clientpref-night .infobox-part .infobox-value, | ||
html.skin-theme-clientpref-night .infobox-non-crt .infobox-value { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
color: #cdd6f4; | color: #cdd6f4; | ||
| Line 235: | Line 285: | ||
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, | html.skin-theme-clientpref-night .infobox-accessory .infobox-image, | ||
html.skin-theme-clientpref-night .infobox-part .infobox-image { | html.skin-theme-clientpref-night .infobox-part .infobox-image, | ||
html.skin-theme-clientpref-night .infobox-non-crt .infobox-image { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
} | } | ||
| Line 258: | Line 309: | ||
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, | html.skin-theme-clientpref-night .infobox-accessory a, | ||
html.skin-theme-clientpref-night .infobox-part a { | html.skin-theme-clientpref-night .infobox-part a, | ||
html.skin-theme-clientpref-night .infobox-non-crt a { | |||
color: #89b4fa; | color: #89b4fa; | ||
} | } | ||
| Line 265: | Line 317: | ||
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, | html.skin-theme-clientpref-night .infobox-accessory a:visited, | ||
html.skin-theme-clientpref-night .infobox-part a:visited { | html.skin-theme-clientpref-night .infobox-part a:visited, | ||
html.skin-theme-clientpref-night .infobox-non-crt a:visited { | |||
color: #cba6f7; | color: #cba6f7; | ||
} | } | ||
| Line 345: | Line 398: | ||
html.skin-theme-clientpref-os .infobox-av-device, | html.skin-theme-clientpref-os .infobox-av-device, | ||
html.skin-theme-clientpref-os .infobox-accessory, | html.skin-theme-clientpref-os .infobox-accessory, | ||
html.skin-theme-clientpref-os .infobox-part { | html.skin-theme-clientpref-os .infobox-part, | ||
html.skin-theme-clientpref-os .infobox-non-crt { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
border-color: #45475a; | border-color: #45475a; | ||
| Line 355: | Line 409: | ||
html.skin-theme-clientpref-os .infobox-part .infobox-title { | html.skin-theme-clientpref-os .infobox-part .infobox-title { | ||
background-color: #7c6cf7; | background-color: #7c6cf7; | ||
color: #ffffff; | |||
} | |||
html.skin-theme-clientpref-os .infobox-non-crt .infobox-title { | |||
background-color: #8a7b7b; | |||
color: #ffffff; | |||
} | |||
html.skin-theme-clientpref-os .non-crt-banner { | |||
background-color: #c44a40; | |||
color: #ffffff; | color: #ffffff; | ||
} | } | ||
| Line 363: | Line 427: | ||
html.skin-theme-clientpref-os .infobox-part .infobox-section-header { | html.skin-theme-clientpref-os .infobox-part .infobox-section-header { | ||
background-color: #45475a; | background-color: #45475a; | ||
color: #cdd6f4; | |||
} | |||
html.skin-theme-clientpref-os .infobox-non-crt .infobox-section-header { | |||
background-color: #4a4555; | |||
color: #cdd6f4; | color: #cdd6f4; | ||
} | } | ||
| Line 371: | Line 440: | ||
html.skin-theme-clientpref-os .infobox-part .infobox-label { | html.skin-theme-clientpref-os .infobox-part .infobox-label { | ||
background-color: #313244; | background-color: #313244; | ||
color: #cdd6f4; | |||
} | |||
html.skin-theme-clientpref-os .infobox-non-crt .infobox-label { | |||
background-color: #352e2e; | |||
color: #cdd6f4; | color: #cdd6f4; | ||
} | } | ||
| Line 377: | Line 451: | ||
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, | html.skin-theme-clientpref-os .infobox-accessory .infobox-value, | ||
html.skin-theme-clientpref-os .infobox-part .infobox-value { | html.skin-theme-clientpref-os .infobox-part .infobox-value, | ||
html.skin-theme-clientpref-os .infobox-non-crt .infobox-value { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
color: #cdd6f4; | color: #cdd6f4; | ||
| Line 385: | Line 460: | ||
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, | html.skin-theme-clientpref-os .infobox-accessory .infobox-image, | ||
html.skin-theme-clientpref-os .infobox-part .infobox-image { | html.skin-theme-clientpref-os .infobox-part .infobox-image, | ||
html.skin-theme-clientpref-os .infobox-non-crt .infobox-image { | |||
background-color: #1e1e2e; | background-color: #1e1e2e; | ||
} | } | ||
| Line 408: | Line 484: | ||
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, | html.skin-theme-clientpref-os .infobox-accessory a, | ||
html.skin-theme-clientpref-os .infobox-part a { | html.skin-theme-clientpref-os .infobox-part a, | ||
html.skin-theme-clientpref-os .infobox-non-crt a { | |||
color: #89b4fa; | color: #89b4fa; | ||
} | } | ||
| Line 415: | Line 492: | ||
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, | html.skin-theme-clientpref-os .infobox-accessory a:visited, | ||
html.skin-theme-clientpref-os .infobox-part a:visited { | html.skin-theme-clientpref-os .infobox-part a:visited, | ||
html.skin-theme-clientpref-os .infobox-non-crt a:visited { | |||
color: #cba6f7; | color: #cba6f7; | ||
} | } | ||
