atproto blogging
nonbinary.computer
1/* Input Styles */
2.input {
3 position: relative;
4 display: flex;
5 box-sizing: border-box;
6 flex-direction: row;
7 align-items: center;
8 justify-content: space-between;
9 padding: 0.25rem;
10 padding: 8px 12px;
11 border: 1px dashed var(--color-border);
12 background: none;
13 background: var(--color-overlay);
14 box-shadow: inset 0 0 0 1px var(--light, var(--color-text)) var(--dark, var(--color-surface));
15 color: var(--color-text);
16 cursor: pointer;
17 gap: 0.25rem;
18 transition: background-color 100ms ease-out;
19}
20
21.input::placeholder {
22 color: var(--color-text);
23}
24
25.input:disabled {
26 color: var(--color-muted);
27 cursor: not-allowed;
28}
29
30.input:hover:not(:disabled),
31.input:focus-visible {
32 background: var(--color-overlay);
33 color: var(--color-text);
34 outline: none;
35 border: 1px dashed var(--color-border);
36}