Something went wrong. Try again.
Atproto AMA app
Something went wrong. Try again.
1.4 kB · 83 lines
CSS
at solid2
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384.combobox { position: relative;}
.input { width: 100%; padding: 0.65rem 0.85rem; font-size: 1rem; font-family: var(--font); color: var(--color-text); background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); outline: none; transition: border-color 0.15s ease;}
.input:focus { border-color: var(--color-primary);}
.input::placeholder { color: var(--color-text-muted);}
.list { position: absolute; top: calc(100% + 0.25rem); left: 0; right: 0; margin: 0; padding: 0.25rem; list-style: none; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); z-index: 20; max-height: 16rem; overflow-y: auto;}
.option { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.5rem; border-radius: calc(var(--radius-md) - 2px); cursor: pointer; font-family: var(--font);}
.option[aria-selected="true"] { background: color-mix(in srgb, var(--color-primary) 12%, transparent);}
.avatar,.avatarFallback { width: 1.5rem; height: 1.5rem; border-radius: 50%; flex-shrink: 0;}
.avatarFallback { background: var(--color-border);}
.text { display: flex; flex-direction: column; min-width: 0;}
.handle { font-size: 0.875rem; font-weight: 600; color: var(--color-text);}
.displayName { font-size: 0.75rem; color: var(--color-text-muted);}