From 4699d40ea92929c3a4fce27db74541f6164f6b5f Mon Sep 17 00:00:00 2001 From: CyberSecurityUP Date: Sun, 18 Oct 2026 16:29:37 -0300 Subject: [PATCH] =?UTF-8?q?fix(web):=20checkbox=20toggle=20styling=20in=20?= =?UTF-8?q?guardrails=20=E2=80=94=20remove=20width:100%=20from=20checkboxe?= =?UTF-8?q?s,=20add=20toggle=20switch=20appearance?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- web/public/style.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/web/public/style.css b/web/public/style.css index fe4b569..dfbd103 100644 --- a/web/public/style.css +++ b/web/public/style.css @@ -273,7 +273,7 @@ a { color: var(--accent); text-decoration: none; } .form-modal { max-width: 520px; } .form-group { margin-bottom: var(--sp-4); } .form-group label { display: block; font-size: var(--fs-sm); font-weight: 600; margin-bottom: var(--sp-1); } -.form-group input, .form-group select, .form-group textarea { +.form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group textarea { width: 100%; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: var(--fs-sm); } @@ -469,6 +469,16 @@ textarea { resize: vertical; min-height: 72px; } .auth-mode-toggle button:disabled { opacity: .45; cursor: not-allowed; } .check-row { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); color: var(--text-dim); } +.check-row input[type="checkbox"] { + appearance: none; -webkit-appearance: none; width: 36px; height: 20px; flex-shrink: 0; + border-radius: 10px; background: var(--border-strong); position: relative; cursor: pointer; transition: background .2s; +} +.check-row input[type="checkbox"]::after { + content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; + border-radius: 50%; background: #fff; transition: transform .2s; +} +.check-row input[type="checkbox"]:checked { background: var(--accent); } +.check-row input[type="checkbox"]:checked::after { transform: translateX(16px); } /* a column of full-width checkbox rows (no squeezing into flex columns) */ .check-col { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-4); } .check-col .check-row { align-items: flex-start; }