Something went wrong. Try again.
Tea journaling on ATProto (alpha)
Something went wrong. Try again.
CSS
at feat-explore
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305/* Form field groups — semantic clusters within modals */.form-fieldset { > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; }}
.form-fieldset-label { font-size: 0.75rem; line-height: 1rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.25rem; color: var(--text-muted);}
.form-divider { border-top: 1px solid var(--surface-border); margin-top: 0.5rem; margin-bottom: 0.5rem;}
.form-optional-hint { font-size: 0.75rem; line-height: 1rem; color: var(--text-faint);}
/* Form validation errors */.form-error { font-size: 0.75rem; line-height: 1rem; margin-top: 0.25rem; display: block; color: #b91c1c;}
:root[data-theme="dark"] .form-error,.dark .form-error { color: #fca5a5;}
.form-input-error { border-color: #b91c1c;}
.form-input-error:focus { border-color: #b91c1c; box-shadow: 0 0 0 2px rgba(185, 28, 28, 0.15);}
/* Buttons */.btn { display: inline-flex; align-items: center; justify-content: center; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 0.5rem; font-weight: 500; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; cursor: pointer;}
.btn-primary { display: inline-flex; align-items: center; justify-content: center; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 0.5rem; font-weight: 500; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; cursor: pointer; color: var(--btn-primary-text); background: var(--btn-primary-bg);}
.btn-primary:hover { background: var(--btn-primary-bg-hover);}
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 0.5rem; font-weight: 500; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; cursor: pointer; background: var(--btn-secondary-bg); color: var(--btn-secondary-text); border: 1px solid var(--btn-secondary-border);}
.btn-secondary:hover { background: var(--btn-secondary-bg-hover);}
.btn-tertiary { display: inline-flex; align-items: center; justify-content: center; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; border-radius: 0.5rem; font-weight: 500; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; cursor: pointer; color: var(--btn-primary-text); background: var(--btn-primary-bg);}
.btn-tertiary:hover { background: var(--btn-primary-bg-hover);}
.btn-link { color: var(--text-muted); font-weight: 500; text-decoration-line: underline; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; cursor: pointer;}
.btn-link:hover { color: var(--text-primary);}
.btn-danger { color: var(--brand-red-600); font-weight: 500; text-decoration-line: underline; transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; cursor: pointer;}
/* Forms */.form-label { display: block; font-size: 0.875rem; line-height: 1.25rem; font-weight: 500; margin-bottom: 0.5rem; color: var(--text-primary);}
.form-input { border-radius: 0.5rem; font-size: 1rem; line-height: 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; padding-left: 0.75rem; padding-right: 0.75rem; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;}
.form-input:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 2px var(--input-ring-focus); background: var(--input-bg-focus); outline: none;}
/* Hide number input spinners */input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0;}input[type="number"] { -moz-appearance: textfield;}
.form-input::placeholder { color: var(--text-placeholder);}
/* Select/option dark mode fix — native <option> elements need explicit colors */select.form-input option,select.form-input optgroup { background: var(--input-bg); color: var(--text-primary);}
.form-input-lg { border-radius: 0.5rem; font-size: 1rem; line-height: 1.5rem; padding-top: 0.75rem; padding-bottom: 0.75rem; padding-left: 1rem; padding-right: 1rem; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-primary); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;}
.form-input-lg:focus { border-color: var(--input-border-focus); box-shadow: 0 0 0 2px var(--input-ring-focus); background: var(--input-bg-focus); outline: none;}
.form-input-lg::placeholder { color: var(--text-placeholder);}
/* File input — the native ::file-selector-button looks like a 1995 OS widget by default. We hide it visually behind ours: the input itself is styled like .form-input, and the selector button inside is restyled as a compact secondary button so the whole control reads as one tidy field with a "Choose file" affordance on the left. */.form-file { display: block; width: 100%; border-radius: 0.5rem; background: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-muted); font: inherit; font-size: 0.875rem; padding: 0.375rem; cursor: pointer; transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease;}
.form-file:hover { border-color: var(--input-border-focus);}
.form-file:focus-within { border-color: var(--input-border-focus); box-shadow: 0 0 0 2px var(--input-ring-focus); background: var(--input-bg-focus); outline: none;}
.form-file::file-selector-button { margin-right: 0.75rem; padding: 0.4rem 0.875rem; border-radius: 0.375rem; border: 1px solid var(--input-border); background: var(--input-bg-focus, var(--input-bg)); color: var(--text-primary); font: inherit; font-weight: 500; font-size: 0.875rem; cursor: pointer; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;}
.form-file::file-selector-button:hover { border-color: var(--input-border-focus); background: var(--input-bg); color: var(--text-primary);}