mitchell/hamlab
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 14 Wiki Activity

Arrange the rail: drag pages into your own order, kept with the account

Browse Source 
The close cross on a detail pane is drawn, not a glyph, and sits in no box.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
This commit is contained in:
Mitchell-Johnson
2026-09-22 19:59:25 -07:00
co-authored by Claude Fable 5.1
parent b8ea7abcc7
commit 7e3e916f25
11 changed files with 122 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/styles.css
+10 -2
View File
@@ -152,8 +152,8 @@ button { font: inherit; color: inherit; background: none; border: 0; cursor: poi
/* The × that closes a detail pane on a wide screen, where the list stays beside it and there is
no Back. Sits in the pane's top-right corner; the header keeps clear of it. */
.svc-detail, .cron-detail { position: relative; }
.detail-close { position: absolute; top: 8px; right: 10px; z-index: 1; width: 28px; height: 28px; line-height: 28px; font-size: 20px; color: var(--muted); border-radius: 6px; }
.detail-close:hover { color: var(--fg); background: var(--bg3); }
.detail-close { position: absolute; top: 10px; right: 10px; z-index: 1; width: 26px; height: 26px; padding: 0; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); background: none; border: 0; border-radius: 50%; opacity: .7; }
.detail-close:hover { color: var(--fg); background: var(--bg3); opacity: 1; }
.svc-detail > .svc-head, .cron-detail > h2 { padding-right: 36px; }
/* Nothing selected: the list has the window to itself rather than a 360px column beside an
empty pane. The names, descriptions and commands that get an ellipsis are what it's for.
@@ -517,6 +517,14 @@ a.btn { text-decoration: none; display: inline-flex; align-items: center; }
.rule-cond { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .rule-cond select, .rule-cond input, .chan-add select, .chan-add input { padding: 8px 9px; background: var(--bg); border: 1px solid var(--border); border-radius: 6px; color: var(--fg); font-size: 14px; } .rule-cond input.mono { flex: 1 1 120px; min-width: 0; }
.chan-add { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; } .chan-add input { flex: 1 1 220px; min-width: 0; }
.ev { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 13px; } .ev:first-child { border-top: 0; } .ev-main { flex: 1; min-width: 0; overflow-wrap: anywhere; } .bad-text { color: var(--bad) !important; }
/* Arranging the rail: a foot row toggles it; each page then carries a handle to drag by. */
.rail-foot { margin-top: 8px; padding: 6px 12px; display: flex; gap: 10px; align-items: center; font-size: 12px; color: var(--muted); border-top: 1px solid var(--border); }
.rail-foot button { color: var(--muted); } .rail-foot button:hover { color: var(--fg); } .rail-foot button.on { color: var(--accent); }
.rail.arranging .group-head { cursor: default; } .rail.arranging .group-head:hover { background: none; }
.rail .handle { display: none; width: 18px; margin: -4px 0 -4px -4px; align-self: stretch; align-items: center; justify-content: center; color: var(--muted); cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; font-size: 14px; letter-spacing: -2px; }
.rail.arranging .handle { display: inline-flex; } .rail.arranging .handle:hover { color: var(--fg); }
.rail .group.dragging .group-head { background: var(--bg3); opacity: .75; box-shadow: inset 3px 0 0 var(--accent2); }
.rail.arranging .group { transition: transform .12s ease; }
.rail-badge { margin-left: auto; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; text-align: center; line-height: 18px; }
@media (pointer: coarse) { .toggle { width: 52px; height: 32px; border-radius: 16px; } .toggle i { width: 26px; height: 26px; } .toggle.on i { left: 22px; } .swatch { width: 34px; height: 34px; } .swatches input[type=color] { width: 36px; height: 36px; } }