mirror of
https://github.com/ancsemi/Haven.git
synced 2026-10-26 16:45:16 +00:00
51 lines
2.5 KiB
CSS
51 lines
2.5 KiB
CSS
/* ═══════════════════════════════════════════════════════════
|
|
FORM CONTROLS: every native <select> in the app
|
|
Settings, admin, modals and the create-channel box all use plain
|
|
<select> elements, many with no class of their own, so they used to draw
|
|
as the system's white control and open a white list on a dark theme.
|
|
These rules give every one the theme's input colors. :where() keeps them
|
|
at zero specificity: a component's own select class, Win95, or a
|
|
published theme still decides size, shape and color.
|
|
The open list is drawn by the browser. It follows color-scheme (set per
|
|
theme in style-themes.css), and Chromium also honors each option's
|
|
background and text color, set below.
|
|
═══════════════════════════════════════════════════════════ */
|
|
:where(select) {
|
|
background-color: var(--bg-input);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
transition: border-color var(--transition);
|
|
}
|
|
:where(select:focus) { border-color: var(--accent); }
|
|
:where(select:disabled) { opacity: 0.6; cursor: not-allowed; }
|
|
|
|
:where(select option, select optgroup) {
|
|
background-color: var(--bg-input);
|
|
color: var(--text-primary);
|
|
}
|
|
:where(select option:disabled) { color: var(--text-muted); }
|
|
|
|
/* Text boxes and text areas get the same fallback. A box with no styling of
|
|
its own (the Auto-Mod domain box, the webhook address, the Create
|
|
Sub-channel fields, and boxes built by scripts) drew as the system's white
|
|
or grey field. Zero specificity again: anything that styles its own box
|
|
keeps it. */
|
|
:where(
|
|
input:not([type]),
|
|
input[type="text"], input[type="search"], input[type="email"], input[type="url"],
|
|
input[type="number"], input[type="password"], input[type="tel"],
|
|
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"],
|
|
textarea
|
|
) {
|
|
background-color: var(--bg-input);
|
|
color: var(--text-primary);
|
|
border: 1px solid var(--border);
|
|
border-radius: var(--radius-sm);
|
|
padding: 0.375rem 0.625rem;
|
|
font-family: inherit;
|
|
transition: border-color var(--transition);
|
|
}
|
|
:where(input, textarea):where(:focus) { border-color: var(--accent); }
|
|
:where(input, textarea)::placeholder { color: var(--text-muted); }
|