From cfb8617fc8d1883f9e6400f165739bf38ff5bf83 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 17 Apr 2024 00:39:19 +0200 Subject: [PATCH] Tweak and fix toggle checkboxes (#30527) Fixes: https://github.com/go-gitea/gitea/issues/30524. Slightly restyled them so that the "knob" is contained inside the background. Screenshot 2024-04-16 at 21 58 09 Screenshot 2024-04-16 at 21 58 50 (cherry picked from commit 5ccd042f7080e1f4ef4b96591e1b1002a4826115) --- web_src/css/modules/checkbox.css | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/web_src/css/modules/checkbox.css b/web_src/css/modules/checkbox.css index d3e45714a4..8d73573bfa 100644 --- a/web_src/css/modules/checkbox.css +++ b/web_src/css/modules/checkbox.css @@ -66,7 +66,7 @@ input[type="radio"] { } .ui.toggle.checkbox input { width: 3.5rem; - height: 1.5rem; + height: 21px; opacity: 0; z-index: 3; } @@ -81,29 +81,30 @@ input[type="radio"] { content: ""; z-index: 1; top: 0; - width: 3.5rem; - height: 1.5rem; + width: 49px; + height: 21px; border-radius: 500rem; left: 0; } .ui.toggle.checkbox label::after { background: var(--color-white); + box-shadow: 1px 1px 4px 1px var(--color-shadow); position: absolute; content: ""; opacity: 1; z-index: 2; - width: 1.5rem; - height: 1.5rem; - top: 0; - left: 0; + width: 18px; + height: 18px; + top: 1.5px; + left: 1.5px; border-radius: 500rem; transition: background 0.3s ease, left 0.3s ease; } .ui.toggle.checkbox input ~ label::after { - left: -0.05rem; + left: 1.5px; } .ui.toggle.checkbox input:checked ~ label::after { - left: 2.15rem; + left: 29px; } .ui.toggle.checkbox input:focus ~ label::before, .ui.toggle.checkbox label::before {