Template:Form styles.css: Difference between revisions
Add support for info boxes and additional form elements in dark mode (via update-page on MediaWiki MCP Server) |
Fix token text and helper text visibility in dark mode with higher specificity selectors (via update-page on MediaWiki MCP Server) |
||
| Line 113: | Line 113: | ||
} | } | ||
/* Token input fields */ | /* Token input fields - with high specificity */ | ||
html.skin-theme-clientpref-night .pfTokens { | html.skin-theme-clientpref-night .pfTokens { | ||
background-color: #313244 !important; | background-color: #313244 !important; | ||
| Line 125: | Line 125: | ||
} | } | ||
html.skin-theme-clientpref-night .pfTokens .token .close { | /* Token text - multiple selectors for specificity */ | ||
color: # | html.skin-theme-clientpref-night .pfTokens .token, | ||
html.skin-theme-clientpref-night .pfTokens .token span, | |||
html.skin-theme-clientpref-night .pfTokens .token a, | |||
html.skin-theme-clientpref-night .pfTokens .token * { | |||
color: #cdd6f4 !important; | |||
} | |||
html.skin-theme-clientpref-night .pfTokens .token .close, | |||
html.skin-theme-clientpref-night .pfTokens .token .close span { | |||
color: #f38ba8 !important; | |||
} | } | ||
| Line 132: | Line 141: | ||
background-color: #313244 !important; | background-color: #313244 !important; | ||
color: #cdd6f4 !important; | color: #cdd6f4 !important; | ||
} | |||
/* Token input placeholder and helper text */ | |||
html.skin-theme-clientpref-night .pfTokens input[type="text"]::placeholder { | |||
color: #a6adc8 !important; | |||
opacity: 1 !important; | |||
} | |||
html.skin-theme-clientpref-night .pfTokens input::placeholder { | |||
color: #a6adc8 !important; | |||
opacity: 1 !important; | |||
} | } | ||
| Line 212: | Line 232: | ||
} | } | ||
/* Placeholder text */ | /* Placeholder text - all inputs */ | ||
html.skin-theme-clientpref-night input::placeholder, | html.skin-theme-clientpref-night input::placeholder, | ||
html.skin-theme-clientpref-night textarea::placeholder { | html.skin-theme-clientpref-night textarea::placeholder { | ||
color: # | color: #a6adc8 !important; | ||
opacity: 1 !important; | |||
} | } | ||
| Line 268: | Line 289: | ||
} | } | ||
html.skin-theme-clientpref-os .pfTokens .token .close { | html.skin-theme-clientpref-os .pfTokens .token, | ||
color: # | html.skin-theme-clientpref-os .pfTokens .token span, | ||
html.skin-theme-clientpref-os .pfTokens .token a, | |||
html.skin-theme-clientpref-os .pfTokens .token * { | |||
color: #cdd6f4 !important; | |||
} | |||
html.skin-theme-clientpref-os .pfTokens .token .close, | |||
html.skin-theme-clientpref-os .pfTokens .token .close span { | |||
color: #f38ba8 !important; | |||
} | } | ||
| Line 275: | Line 304: | ||
background-color: #313244 !important; | background-color: #313244 !important; | ||
color: #cdd6f4 !important; | color: #cdd6f4 !important; | ||
} | |||
html.skin-theme-clientpref-os .pfTokens input[type="text"]::placeholder, | |||
html.skin-theme-clientpref-os .pfTokens input::placeholder { | |||
color: #a6adc8 !important; | |||
opacity: 1 !important; | |||
} | } | ||
| Line 349: | Line 384: | ||
html.skin-theme-clientpref-os input::placeholder, | html.skin-theme-clientpref-os input::placeholder, | ||
html.skin-theme-clientpref-os textarea::placeholder { | html.skin-theme-clientpref-os textarea::placeholder { | ||
color: # | color: #a6adc8 !important; | ||
opacity: 1 !important; | |||
} | } | ||
