Petr Polezhaev
084d1aebd5
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.
37 lines
1.9 KiB
CSS
37 lines
1.9 KiB
CSS
/*
|
|
* layout.css
|
|
* Top-level layout: sticky header bar, two-column desktop layout
|
|
* (300px sidebar + flex main panel), mobile single-column default,
|
|
* and the contenteditable header span used for inline entity renaming.
|
|
*
|
|
* Breakpoint: ≥768px = desktop two-column; <768px = mobile accordion.
|
|
*/
|
|
|
|
/* ── Header ── */
|
|
.hdr{background:#1e3a5f;color:white;padding:10px 14px;display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:100;box-shadow:0 2px 6px rgba(0,0,0,.3);flex-shrink:0}
|
|
.hdr h1{flex:1;font-size:.96rem;font-weight:600}
|
|
.hbtn{background:none;border:none;color:white;min-width:34px;min-height:34px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;flex-shrink:0}
|
|
.hbtn:active{background:rgba(255,255,255,.2)}
|
|
|
|
/* ── Mobile layout (default) ── */
|
|
.layout{display:flex;flex-direction:column;min-height:100vh}
|
|
.sidebar{flex:1}
|
|
.main-panel{display:none}
|
|
|
|
/* ── Desktop layout ── */
|
|
@media(min-width:768px){
|
|
body{overflow:hidden}
|
|
.layout{flex-direction:row;height:100vh;overflow:hidden}
|
|
.sidebar{width:300px;display:flex;flex-direction:column;border-right:1px solid #cbd5e1;overflow:hidden;flex-shrink:0}
|
|
.sidebar .hdr{padding:9px 12px}
|
|
.sidebar-body{flex:1;overflow-y:auto;padding:8px 10px 16px}
|
|
.main-panel{flex:1;display:flex;flex-direction:column;overflow:hidden;background:#e8eef5}
|
|
.main-hdr{background:#1e3a5f;color:white;padding:9px 14px;display:flex;align-items:center;gap:8px;flex-shrink:0}
|
|
.main-hdr h2{flex:1;font-size:.9rem;font-weight:500;opacity:.9;min-width:0}
|
|
.main-body{flex:1;overflow:auto;padding:14px}
|
|
}
|
|
|
|
/* ── Detail header editable name ── */
|
|
.hdr-edit{display:block;outline:none;cursor:text;border-radius:3px;padding:1px 4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.hdr-edit:focus{background:rgba(255,255,255,.15);white-space:normal;overflow:visible}
|