5d5f26c8ae
Photo-based book cataloger with AI identification. Room → Cabinet → Shelf → Book hierarchy; FastAPI + SQLite backend; vanilla JS SPA; OpenAI-compatible plugin system for boundary detection, text recognition, and archive search.
45 lines
2.6 KiB
CSS
45 lines
2.6 KiB
CSS
/*
|
|
* forms.css
|
|
* Generic button variants, the book detail right panel, image/canvas wrapper,
|
|
* crop selection overlay, book image display boxes, and the identification form
|
|
* (card, labels, inputs, textarea, danger zone).
|
|
*/
|
|
|
|
/* ── Buttons ── */
|
|
.btn{display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:7px 13px;border-radius:7px;border:none;cursor:pointer;font-size:.83rem;font-weight:500}
|
|
.btn:active{opacity:.82}
|
|
.btn:disabled{opacity:.4;cursor:default}
|
|
.btn-p{background:#2563eb;color:white}
|
|
.btn-s{background:#e2e8f0;color:#475569}
|
|
.btn-g{background:#16a34a;color:white}
|
|
.btn-r{background:#ef4444;color:white}
|
|
.btn-w{width:100%;margin-bottom:7px}
|
|
.btn-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
|
|
|
|
/* ── Right panel ── */
|
|
.det-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#94a3b8;font-size:.95rem}
|
|
|
|
/* ── Image + canvas overlay ── */
|
|
.img-wrap{position:relative;display:inline-block;max-width:100%;line-height:0;border-radius:7px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.15)}
|
|
.img-wrap img{display:block;max-width:100%;max-height:calc(100vh - 200px);object-fit:contain}
|
|
.img-wrap canvas{position:absolute;inset:0;width:100%;height:100%}
|
|
|
|
/* ── Crop overlay ── */
|
|
.crop-sel{position:absolute;border:2px solid #38bdf8;background:rgba(56,189,248,.12);pointer-events:none}
|
|
|
|
/* ── Book detail panel ── */
|
|
.book-panel{display:flex;flex-direction:column;gap:14px}
|
|
.book-img-box{border-radius:7px;overflow:hidden;background:#0f172a;line-height:0;box-shadow:0 1px 4px rgba(0,0,0,.2);margin-bottom:8px}
|
|
.book-img-box img{max-width:100%;max-height:260px;object-fit:contain;display:block;margin:0 auto}
|
|
.book-img-label{font-size:.7rem;color:#64748b;margin-bottom:4px;font-weight:600;text-transform:uppercase;letter-spacing:.04em}
|
|
|
|
/* ── Form ── */
|
|
.card{background:white;border-radius:10px;padding:13px;margin-bottom:10px;box-shadow:0 1px 3px rgba(0,0,0,.07)}
|
|
.flabel{display:block;font-size:.7rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
|
|
.finput{width:100%;padding:8px 10px;border:1.5px solid #e2e8f0;border-radius:6px;font-size:.88rem;color:#1e293b;background:white;-webkit-appearance:none}
|
|
.finput:focus{outline:none;border-color:#2563eb}
|
|
textarea.finput{height:64px;resize:vertical}
|
|
.fgroup{margin-bottom:9px}
|
|
.dz{border:1.5px solid #fecaca;border-radius:8px;padding:11px;margin-top:12px}
|
|
.dz-h{color:#dc2626;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin-bottom:7px}
|