4aiman/baldav
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Profile: render settings checkboxes as toggle switches

Browse source 
The .form-group input rule (width:100% + appearance:none) stretched every
checkbox into an empty full-width box. Add a .toggle class styling a checkbox
as a sliding on/off switch and apply it to the TEF, hydration and live-share
toggles in the profile modal.
This commit is contained in:
4aiman 2026-10-26 18:25:07 +03:00
commit 738c4e81a1
2 changed files with 39 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

36
frontend/css/styles.css
View file

@ -257,6 +257,42 @@ body {
appearance: none;
}
/* Toggle switch: a checkbox styled as a sliding on/off switch. Overrides the
full-width .form-group input rule above (which otherwise stretches a checkbox
into an empty box). Apply class="toggle" to <input type="checkbox">. */
.form-group input[type="checkbox"].toggle {
width: 46px;
height: 26px;
flex: 0 0 auto;
padding: 0;
border-radius: 13px;
background: var(--bg);
border: 1px solid var(--border);
position: relative;
cursor: pointer;
transition: background 0.15s, border-color 0.15s;
}
.form-group input[type="checkbox"].toggle::after {
content: "";
position: absolute;
top: 50%;
left: 3px;
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--muted);
transform: translateY(-50%);
transition: left 0.15s, background 0.15s;
}
.form-group input[type="checkbox"].toggle:checked {
background: var(--primary);
border-color: var(--primary);
}
.form-group input[type="checkbox"].toggle:checked::after {
left: 23px;
background: #fff;
}
select {
background: var(--bg);
color: var(--on-surface);