Spaces:
Running
Running
File size: 3,099 Bytes
94004a2 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 | /* ── Input / Textarea / Select — shared shell ────────────────────── */
.ui-input {
width: 100%;
background: var(--color-bg-elev-2);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
color: var(--color-fg);
font-family: var(--font-sans);
transition:
background var(--dur-base) var(--ease-out),
border-color var(--dur-base) var(--ease-out),
box-shadow var(--dur-base) var(--ease-out);
box-sizing: border-box;
}
.ui-input::placeholder { color: rgba(168, 153, 132, 0.5); }
.ui-input:focus {
outline: none;
border-color: rgba(211, 134, 155, 0.5);
background: rgba(0, 0, 0, 0.35);
box-shadow:
0 0 0 2px rgba(211, 134, 155, 0.12),
var(--shadow-inset);
}
.ui-input:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.ui-input[aria-invalid="true"] {
border-color: rgba(251, 73, 52, 0.45);
}
.ui-input[aria-invalid="true"]:focus {
box-shadow:
0 0 0 2px rgba(251, 73, 52, 0.15),
var(--shadow-inset);
}
/* sizes */
.ui-input--size-sm { padding: 3px 6px; font-size: var(--text-sm); }
.ui-input--size-md { padding: 4px 8px; font-size: var(--text-base);}
.ui-input--size-lg { padding: 6px 10px; font-size: var(--text-md); }
/* textarea */
.ui-textarea {
min-height: 60px;
resize: vertical;
line-height: 1.5;
}
/* select — restore the caret icon */
.ui-select {
appearance: none;
padding-right: 20px;
background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23a1a1aa%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
background-repeat: no-repeat;
background-position: right 7px center;
background-size: 0.42rem auto;
cursor: pointer;
}
.ui-select:hover { border-color: var(--color-border-strong); }
/* ── Field wrapper ───────────────────────────────────────────────── */
.ui-field {
display: flex;
flex-direction: column;
gap: var(--space-1);
min-width: 0;
}
.ui-field__label {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--color-fg-muted);
letter-spacing: 0.02em;
}
.ui-field__control { position: relative; display: flex; align-items: center; }
.ui-field__icon {
position: absolute;
left: 7px;
display: inline-flex;
color: var(--color-fg-subtle);
pointer-events: none;
}
.ui-field__control:has(.ui-field__icon) .ui-input { padding-left: 22px; }
.ui-field__hint {
font-size: var(--text-2xs);
color: var(--color-fg-subtle);
margin-top: var(--space-1);
}
.ui-field__error {
font-size: var(--text-2xs);
color: var(--color-danger);
margin-top: var(--space-1);
font-weight: var(--weight-medium);
}
|