diff --git a/crates/archivr-server/static/index.html b/crates/archivr-server/static/index.html index 4d92e57..9589243 100644 --- a/crates/archivr-server/static/index.html +++ b/crates/archivr-server/static/index.html @@ -6,8 +6,8 @@ Archivr - - + +
diff --git a/frontend/src/styles.css b/frontend/src/styles.css index b0cea03..150c50f 100644 --- a/frontend/src/styles.css +++ b/frontend/src/styles.css @@ -952,6 +952,104 @@ select { line-height: 1.45; } +/* ── Text-capture row ─────────────────────────────────────────────────── + A text row breaks the [dot][one-line-input][×] shape used by URL and + file rows: it stacks a title, a multi-line body, and a small footer + (mime selector). Everything lives inside .capture-text-inputs so the + outer flex-row still gives us [icon][content][×] alignment. */ + +.capture-text-row > .capture-row-main { + /* Icon and remove button sit at the top of the block, not centered on + the tall textarea. */ + align-items: flex-start; +} + +.capture-text-icon { + flex-shrink: 0; + width: 20px; + height: 44px; /* matches .capture-text-title height */ + display: grid; + place-items: center; + color: var(--muted); +} + +.capture-text-inputs { + flex: 1 1 auto; + min-width: 0; /* let the textarea shrink inside flex */ + display: flex; + flex-direction: column; + gap: 8px; +} + +.capture-text-input { + width: 100%; + border: 1px solid var(--line); + background: var(--field); + color: var(--ink); + border-radius: var(--r2); + outline: none; + transition: border-color .15s ease, box-shadow .15s ease; + font-family: inherit; +} +.capture-text-input:focus { + border-color: var(--accent); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); +} + +.capture-text-title { + height: 44px; + padding: 0 14px; + font-size: 15px; +} + +.capture-text-body { + min-height: 140px; + padding: 10px 14px; + font-size: 14px; + line-height: 1.55; + resize: vertical; +} +.capture-text-body::placeholder, +.capture-text-title::placeholder { + color: var(--muted); +} + +.capture-text-footer { + display: flex; + align-items: center; + gap: 8px; + justify-content: flex-end; /* mime selector sits under the body */ +} + +/* Mime selector: reuse the small chip styling of .capture-quality. */ +.capture-text-mime { + flex-shrink: 0; + height: 28px; + padding: 0 26px 0 10px; + border: 1px solid var(--line); + border-radius: var(--r); + background: var(--paper); + color: var(--ink); + font-size: 12px; + cursor: pointer; + outline: none; + transition: border-color .15s; + /* Custom caret so it doesn't look like an unstyled OS dropdown. */ + appearance: none; + -webkit-appearance: none; + background-image: url("data:image/svg+xml;utf8,"); + background-repeat: no-repeat; + background-position: right 8px center; +} +.capture-text-mime:hover { border-color: var(--accent-2); } +.capture-text-mime:focus { border-color: var(--accent); } + +/* Remove button on text row: pin to top so tall bodies don't push it. */ +.capture-text-row .capture-row-action { + margin-top: 8px; +} + + /* Add-another button */ .capture-add-row { display: flex;