atproto blogging
nonbinary.computer
1/* Hex colour input with preview swatch */
2
3.hex-colour-input {
4 display: flex;
5 flex-direction: column;
6 gap: 0.25rem;
7}
8
9.hex-colour-input-label {
10 font-size: 0.875rem;
11 font-weight: 500;
12 color: var(--color-text);
13}
14
15.hex-colour-input-field {
16 display: flex;
17 flex-direction: row;
18 align-items: center;
19 gap: 0.5rem;
20 padding: 0.25rem 0.5rem;
21 background-color: var(--color-surface);
22 border: 1px solid var(--color-border);
23 border-radius: 0;
24}
25
26.hex-colour-input-swatch {
27 width: 1.5rem;
28 height: 1.5rem;
29 border-radius: 0;
30 border: 1px solid var(--color-border);
31 flex-shrink: 0;
32}
33
34.hex-colour-input-hash {
35 color: var(--color-muted);
36 font-family: var(--font-mono);
37 font-size: 0.875rem;
38 user-select: none;
39}
40
41.hex-colour-input-text {
42 font-family: var(--font-mono);
43 font-size: 0.875rem;
44 text-transform: uppercase;
45 color: var(--color-text);
46 background-color: transparent;
47 border: none;
48 outline: none;
49 width: 5rem;
50 padding: 0;
51}
52
53.hex-colour-input-text::placeholder {
54 color: var(--color-muted);
55 text-transform: uppercase;
56}
57
58.hex-colour-input-field:focus-within {
59 border-color: var(--color-primary);
60}