krz/gitbay

web: settings rows end in one column of controls !130

merged merged by cmc on 2026-08-31 05:20 UTC · krz/gitbay:settings-controls into main

1 file changed, +35 −8

Layout: unified · split

internal/web/static/style.css +35 −8
@@ -591,7 +591,10 @@ form.setform {
591 padding: var(--sp-2) 0; 591 padding: var(--sp-2) 0;
592 border-bottom: 1px solid var(--faint); 592 border-bottom: 1px solid var(--faint);
593} 593}
594form.setform label { min-width: 12rem; color: var(--muted); font-size: var(--fs-2); } 594/* the label absorbs the free space, so a row whose control does not
595 stretch — a checkbox, a number — still finishes at the same right edge
596 as the rows whose input fills the line */
597form.setform label { min-width: 12rem; margin-right: auto; color: var(--muted); font-size: var(--fs-2); }
595form.setform input[type="text"], form.setform select { flex: 1 1 16rem; } 598form.setform input[type="text"], form.setform select { flex: 1 1 16rem; }
596form.setform input[type="number"] { width: 5rem; } 599form.setform input[type="number"] { width: 5rem; }
597ul.protlist { list-style: none; padding: 0; margin: var(--sp-2) 0; } 600ul.protlist { list-style: none; padding: 0; margin: var(--sp-2) 0; }
@@ -1196,16 +1199,40 @@ select {
1196input:hover, textarea:hover, select:hover { border-color: var(--muted); } 1199input:hover, textarea:hover, select:hover { border-color: var(--muted); }
1197/* the global :focus-visible ring covers these; only the border moves */ 1200/* the global :focus-visible ring covers these; only the border moves */
1198input:focus, textarea:focus, select:focus { border-color: var(--accent); } 1201input:focus, textarea:focus, select:focus { border-color: var(--accent); }
1199input[type="radio"], input[type="checkbox"] { accent-color: var(--fill); } 1202input[type="radio"] { accent-color: var(--fill); }
1200label:has(> input[type="radio"]), label:has(> input[type="checkbox"]), 1203label:has(> input[type="radio"]), label:has(> input[type="checkbox"]),
1201label:has(> select) { display: inline-flex; align-items: center; gap: var(--sp-2); } 1204label:has(> select) { display: inline-flex; align-items: center; gap: var(--sp-2); }
1202 1205
1203/* Shape carries the meaning on these two and nothing else does: a circle 1206/* A radio keeps the native control: a circle takes one answer, a square
1204 takes one answer, a square takes any number. It survives colour being 1207 takes any number, and that shape is the cue that survives greyscale,
1205 removed — greyscale, high contrast, colour blindness — so the native 1208 high contrast and colour blindness. The checkbox is drawn instead,
1206 shapes stay and only the colour joins the system. Drawing them by hand 1209 because at the size the OS renders it it reads as an afterthought
1207 would align the corners at the cost of the one cue that always works. */ 1210 beside the button it shares a row with. The square is kept square —
1208input[type="radio"], input[type="checkbox"] { accent-color: var(--fill); } 1211 the size changes, the cue does not. */
1212input[type="checkbox"] {
1213 appearance: none;
1214 flex: none;
1215 /* the height of a text input, a select and a button, so a settings row
1216 ends in one column of controls rather than a button and a speck */
1217 width: 2.5rem;
1218 height: 2.5rem;
1219 /* an empty box has nothing but its border to announce it, so the border
1220 is --muted rather than the --line the sized controls can afford */
1221 border: 1px solid var(--muted);
1222 border-radius: var(--r-sm);
1223 background: var(--bg);
1224 cursor: pointer;
1225}
1226input[type="checkbox"]:not(:checked):hover { border-color: var(--fg); }
1227input[type="checkbox"]:checked {
1228 background: var(--fill);
1229 border-color: var(--fill);
1230 /* the mark sits on the blue ground, so it is white in both schemes */
1231 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 10'%3E%3Cpath d='M1 5l3.4 3.4L11 1.4' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
1232 background-repeat: no-repeat;
1233 background-position: center;
1234 background-size: 1.2rem;
1235}
1209 1236
1210/* a segmented control for a small, mutually exclusive set: real radios 1237/* a segmented control for a small, mutually exclusive set: real radios
1211 underneath, so arrow keys and screen readers behave as they always did */ 1238 underneath, so arrow keys and screen readers behave as they always did */