fix(popup): leave room between the check box and its label
- commit
- 718835eaa81b1df10f711d051c7ca7b43cfc51b5
- author
- brice · · 2026-10-09 06:50 UTC
- parent
- 14c4667
- signature
- GPG Verified
CD88F9E564E0102646FB6077A1A07C7C7C3E349D· arch-gpg Verified for the committer email
2 files · +4 -0
M internal/popup/css.go +3 -0
| @@ -45,6 +45,9 @@ func CSS(s Style) string { | |||
| 45 | 45 | b.WriteString(".title { font-weight: bold; }\n") | |
| 46 | 46 | b.WriteString(".body { opacity: 0.85; }\n") | |
| 47 | 47 | b.WriteString("button.item, checkbox.item { text-align: left; background-color: transparent; padding: 2px 12px; }\n") | |
| 48 | + | // nefergui paints the 1em check box centered in the left padding: leave | |
| 49 | + | // room on both sides of it so the label does not touch the box. | |
| 50 | + | b.WriteString("checkbox.item { padding-left: 2em; }\n") | |
| 48 | 51 | fmt.Fprintf(&b, "button.item:hover, checkbox.item:hover, button.item:focus-visible, checkbox.item:focus-visible { background-color: %s; color: %s; }\n", ac, bg) | |
| 49 | 52 | b.WriteString("button.item:disabled, checkbox.item:disabled { opacity: 0.5; }\n") | |
| 50 | 53 | fmt.Fprintf(&b, "button.item:disabled:hover, checkbox.item:disabled:hover { background-color: transparent; color: %s; }\n", fg) | |
| @@ -45,6 +45,9 @@ func CSS(s Style) string { | |||||
| 45 | b.WriteString(".title { font-weight: bold; }\n") | 45 | b.WriteString(".title { font-weight: bold; }\n") | ||
| 46 | b.WriteString(".body { opacity: 0.85; }\n") | 46 | b.WriteString(".body { opacity: 0.85; }\n") | ||
| 47 | b.WriteString("button.item, checkbox.item { text-align: left; background-color: transparent; padding: 2px 12px; }\n") | 47 | b.WriteString("button.item, checkbox.item { text-align: left; background-color: transparent; padding: 2px 12px; }\n") | ||
| 48 | + | // nefergui paints the 1em check box centered in the left padding: leave | |||
| 49 | + | // room on both sides of it so the label does not touch the box. | |||
| 50 | + | b.WriteString("checkbox.item { padding-left: 2em; }\n") | |||
| 48 | fmt.Fprintf(&b, "button.item:hover, checkbox.item:hover, button.item:focus-visible, checkbox.item:focus-visible { background-color: %s; color: %s; }\n", ac, bg) | 51 | fmt.Fprintf(&b, "button.item:hover, checkbox.item:hover, button.item:focus-visible, checkbox.item:focus-visible { background-color: %s; color: %s; }\n", ac, bg) | ||
| 49 | b.WriteString("button.item:disabled, checkbox.item:disabled { opacity: 0.5; }\n") | 52 | b.WriteString("button.item:disabled, checkbox.item:disabled { opacity: 0.5; }\n") | ||
| 50 | fmt.Fprintf(&b, "button.item:disabled:hover, checkbox.item:disabled:hover { background-color: transparent; color: %s; }\n", fg) | 53 | fmt.Fprintf(&b, "button.item:disabled:hover, checkbox.item:disabled:hover { background-color: transparent; color: %s; }\n", fg) | ||
M internal/popup/popup_test.go +1 -0
| @@ -89,6 +89,7 @@ func TestCSS(t *testing.T) { | |||
| 89 | 89 | .title { font-weight: bold; } | |
| 90 | 90 | .body { opacity: 0.85; } | |
| 91 | 91 | button.item, checkbox.item { text-align: left; background-color: transparent; padding: 2px 12px; } | |
| 92 | + | checkbox.item { padding-left: 2em; } | |
| 92 | 93 | button.item:hover, checkbox.item:hover, button.item:focus-visible, checkbox.item:focus-visible { background-color: #3584e4; color: #102030; } | |
| 93 | 94 | button.item:disabled, checkbox.item:disabled { opacity: 0.5; } | |
| 94 | 95 | button.item:disabled:hover, checkbox.item:disabled:hover { background-color: transparent; color: #cccccc; } | |
| @@ -89,6 +89,7 @@ func TestCSS(t *testing.T) { | |||||
| 89 | .title { font-weight: bold; } | 89 | .title { font-weight: bold; } | ||
| 90 | .body { opacity: 0.85; } | 90 | .body { opacity: 0.85; } | ||
| 91 | button.item, checkbox.item { text-align: left; background-color: transparent; padding: 2px 12px; } | 91 | button.item, checkbox.item { text-align: left; background-color: transparent; padding: 2px 12px; } | ||
| 92 | + | checkbox.item { padding-left: 2em; } | |||
| 92 | button.item:hover, checkbox.item:hover, button.item:focus-visible, checkbox.item:focus-visible { background-color: #3584e4; color: #102030; } | 93 | button.item:hover, checkbox.item:hover, button.item:focus-visible, checkbox.item:focus-visible { background-color: #3584e4; color: #102030; } | ||
| 93 | button.item:disabled, checkbox.item:disabled { opacity: 0.5; } | 94 | button.item:disabled, checkbox.item:disabled { opacity: 0.5; } | ||
| 94 | button.item:disabled:hover, checkbox.item:disabled:hover { background-color: transparent; color: #cccccc; } | 95 | button.item:disabled:hover, checkbox.item:disabled:hover { background-color: transparent; color: #cccccc; } | ||