cronekorkn/left4me
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(css): zero padding on custom radio + switch inputs

Browse source 
The global input rule (components.css:53-61) applies padding to ALL
inputs, including type=radio and type=checkbox. That inflated the new
.radio-row and .switch-row controls from 16x16px boxes into 40x32px
rectangles, which border-radius then rendered as ovals.

Adds padding: 0 + box-sizing: border-box to both control rules, and
border: 0 to the switch (the global border rule was squaring off its
pill shape). Caught in browser smoke after fa394c1.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
mwiegand 2026-05-19 00:40:39 +02:00
parent fa394c1f7a
commit a18e96eec9
No known key found for this signature in database
1 changed files with 5 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
l4d2web/l4d2web/static/css/components.css
View file

@ -1220,8 +1220,10 @@ div.modal.modal-wide {
.radio-row > input[type="radio"] { .radio-row > input[type="radio"] {
appearance: none; appearance: none;
box-sizing: border-box;
width: 1rem; width: 1rem;
height: 1rem; height: 1rem;
padding: 0;
border-radius: 50%; border-radius: 50%;
border: 1.5px solid var(--color-border); border: 1.5px solid var(--color-border);
background: var(--color-bg); background: var(--color-bg);
@ -1275,9 +1277,12 @@ div.modal.modal-wide {
.switch-row > input[type="checkbox"] { .switch-row > input[type="checkbox"] {
appearance: none; appearance: none;
box-sizing: border-box;
position: relative; position: relative;
width: 1.875rem; width: 1.875rem;
height: 1rem; height: 1rem;
padding: 0;
border: 0;
background: var(--color-border); background: var(--color-border);
border-radius: 999px; border-radius: 999px;
flex: 0 0 auto; flex: 0 0 auto;