web: trim the library to one toolbar and a folder menu

Fold the hint, ADD FOLDER and the two view switches onto a single row,
with the switches drawn as icons, and move a folder's rescan and remove
onto a right click — they belong to the folder, so they are asked for
rather than always on screen.
This commit is contained in:
2026-09-28 18:31:06 +07:00
parent 12936731b3
commit 19fd5b644f
5 changed files with 195 additions and 66 deletions
+35
View File
@@ -1020,6 +1020,41 @@ input[type="range"] { width: 100%; accent-color: var(--accent); }
/* All thumbs: the wall scrolls down inside the stage, and its own scrollbar on
the right edge is what reaches the frames below. */
.lib-root .adm-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 6px; }
/* One toolbar, not two rows of chrome: ADD FOLDER, the hint, and the pair of view
icons. The hint gives up its width first and ellipsises — the whole sentence is
still there under the pointer. */
.lib-bar { flex: 0 0 auto; align-items: center; margin-bottom: 10px; }
.lib-bar .btn { padding: 5px 10px; font-size: 12.5px; }
.lib-bar-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* The views are a glyph each (a frame, a wall of thumbs), so the row stays a row
when the window is narrow. */
.lib-icon { padding: 5px 8px; justify-content: center; }
/* A folder's own menu, on a right click. Fixed, so the tree's own scroll cannot
clip it; the position is clamped to the window when it is drawn. */
.lib-menu {
position: fixed;
z-index: 40;
display: flex;
flex-direction: column;
min-width: 170px;
padding: 4px;
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
}
.lib-menu-item {
border: 0;
border-radius: var(--radius-sm);
background: none;
padding: 7px 10px;
font-size: 12px;
letter-spacing: 0.04em;
text-align: left;
cursor: pointer;
}
.lib-menu-item:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent); }
.lib-menu-item:disabled { opacity: 0.45; cursor: not-allowed; }
/* Settings drawer: the tabs that organise the page, plus the three panels. */
/* The management frame: a bordered box whose left column is the menu and whose