mirror of
https://github.com/ancsemi/Haven.git
synced 2026-10-30 02:25:38 +00:00
82 lines
3.3 KiB
CSS
82 lines
3.3 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); }
|
||
|
||
/* A button labelled with a lone symbol (+, ×, ‹) shows a drawn icon instead
|
||
(js/modules/glyph-icons.js). It fills the same space the symbol did: its
|
||
width, and one line of the button's text, with the drawing in the middle. */
|
||
.glyph-icon {
|
||
display: inline-block;
|
||
vertical-align: top;
|
||
width: 1em;
|
||
height: 1em;
|
||
margin-block: calc((1lh - 1em) / 2);
|
||
margin-inline: calc((var(--glyph-adv, 1em) - 1em) / 2);
|
||
fill: none;
|
||
stroke: currentColor;
|
||
stroke-width: 2.2;
|
||
stroke-linecap: round;
|
||
stroke-linejoin: round;
|
||
overflow: visible;
|
||
pointer-events: none;
|
||
}
|
||
.glyph-icon circle { fill: currentColor; stroke: none; }
|
||
.glyph-icon-label {
|
||
position: absolute;
|
||
width: 1px;
|
||
height: 1px;
|
||
margin: -1px;
|
||
padding: 0;
|
||
overflow: hidden;
|
||
clip: rect(0, 0, 0, 0);
|
||
white-space: nowrap;
|
||
border: 0;
|
||
}
|