rays/ipx
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 18 Wiki Activity

Box the download settings instead of hanging them from a rule (#167)

Browse Source 
Asked for after the redesign: the switch and what depends on it sit in one box with rounded
corners, in place of the rule down their left side. Drawn in --line rather than --edge, so it shows
on a phone too, where --edge draws no outlines; the indent the rule needed goes with it.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Ray Slakinski
2026-10-09 12:38:26 +00:00
parent 4c1d230044
commit f4a8ba4ea8
2 changed files with 11 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
web/app.css
View File

@@ -1081,12 +1081,14 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
.sw input:checked+i{background:var(--accent);border-color:var(--accent)}
.sw input:checked+i::after{transform:translateX(16px)}
.sw input:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
/* What only matters while it downloads on its own hangs from that switch, and folds away when it
is off. The rows in a grid of one row, 1fr open and 0fr shut, so the fold has a height to move. */
.fdeps{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s ease;margin:2px 0 6px 20px;border-left:2px solid var(--line)}
.fdeps.off{grid-template-rows:0fr;border-left-color:transparent}
/* The switch and what only matters while it downloads on its own, in one box; the rest folds away
when it is off. In --line, not --edge, so the box shows on a phone, which draws no outlines. The
rows in a grid of one row, 1fr open and 0fr shut, so the fold has a height to move. */
.fdl{border:1px solid var(--line);border-radius:12px;padding:4px 14px}
.fdeps{display:grid;grid-template-rows:1fr;transition:grid-template-rows .22s ease}
.fdeps.off{grid-template-rows:0fr}
.fdeps>div{min-height:0;overflow:hidden}
.fdepsin{padding:8px 2px 6px 18px}
.fdepsin{padding:6px 2px 10px}
/* The app's own segmented control, with radio buttons in it, for the arrow keys. */
.seg{margin-bottom:12px}
.seg label{flex:1;position:relative;text-align:center;white-space:nowrap;padding:5px 10px;border-radius:7px;font-size:13px;color:var(--dim);cursor:pointer}
@@ -1106,7 +1108,7 @@ input[type=range]::-moz-range-thumb{width:12px;height:12px;border:0;border-radiu
.wcap{margin:0 0 16px;font-size:13px;line-height:1.55;color:var(--dim)}
.wcap input[type=number]{display:inline-block;width:4.2em;margin:0 2px;padding:1px 4px;font-size:13px;text-align:center;font-variant-numeric:tabular-nums;color:var(--fg)}
.ffield{display:grid;gap:6px;margin-bottom:14px}
.fdeps+.ffield{margin-top:18px}
.fdl+.ffield{margin-top:18px}
.flabel{font-size:14px;font-weight:500}
.cap{margin:0;font-size:12.5px;line-height:1.45;color:var(--dim)}
/* Words and phrases as chips: in one comma-separated box, one ran into the next. */
@@ -1347,8 +1349,7 @@ body:has(#player.on) #status{padding-bottom:3px}
.chips{background:var(--panel2);border-color:var(--edge);border-radius:10px}
.chip{background:var(--panel);font-size:15px;padding:5px 4px 5px 12px}
.chipx{width:26px;height:26px}
.fdeps{margin-left:12px}
.fdepsin{padding-left:14px}
.fdl{border-radius:14px;padding:4px 14px}
.toast{border-radius:14px}
}
@keyframes sheet{from{transform:translateY(100%)}}