cs2/simpleadmin-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 1 Wiki Activity Actions

Settings rows on phones: switches level with the name, boxes as form fields

Browse source
This commit is contained in:
Astra 2026-10-03 14:25:51 +01:00
parent 3c0655b512
commit daa7ec2dbc
2 changed files with 21 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

20
internal/web/assets/styles.css
View file

@ -846,8 +846,24 @@ dialog::backdrop { background: rgba(5, 6, 9, 0.65); }
.live-map { font-size: 42px; }
.setting { grid-template-columns: 1fr; gap: 10px; }
.setting .control { justify-content: flex-start; }
.setting.toggle { grid-template-columns: auto minmax(0, 1fr); gap: 14px; }
.setting.toggle .control { order: -1; }
/* A setting that's one switch: the switch goes first, level with the name, and the description
and cvar stay under the name. */
.setting:has(> .control > .switch:only-child) { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; }
.setting:has(> .control > .switch:only-child) > .control { order: -1; margin-top: 1px; }
/* A text box, number or dropdown reads as a form field: the name with the cvar on its right, the
box, then the description as a hint. Rows with buttons or status tags keep the plain stack. */
.setting:has(> .control > :is(input, select, .quiet-times)) {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "label key" "control control" "help help";
gap: 0;
align-items: baseline;
}
.setting:has(> .control > :is(input, select, .quiet-times)) > div:first-child { display: contents; }
.setting:has(> .control > :is(input, select, .quiet-times)) b { grid-area: label; }
.setting:has(> .control > :is(input, select, .quiet-times)) code { grid-area: key; margin-left: 12px; font-size: 12px; }
.setting:has(> .control > :is(input, select, .quiet-times)) > .control { grid-area: control; margin: 8px 0 6px; }
.setting:has(> .control > :is(input, select, .quiet-times)) p { grid-area: help; margin: 0; font-size: 13px; }
.quiet-times { flex: 1; }
.quiet-times .input { flex: 1; width: auto; }
.action-grid { grid-template-columns: repeat(2, 1fr); }
.hide-sm { display: none; }