Skip to content

Commit

Permalink
Fix clicking radio buttons directly
Browse files Browse the repository at this point in the history
This affects the Classic (Light/Dark), Winter, and Occult themes.

I always tend to click on the radio option labels, as it's a larger
click target, easier to reach with the mouse, so I missed that clicking
the radio button (circular part) was broken.

98.css hides the real `<input type="radio">` and replaces it with a
pseudo element on the `<label>` element to visually replace it.
Normally it's clickable in the same way that the `<label>` is clickable,
since the pseudo element is logically part of the `<label>`.
However, I have an overly broad selector for pseudo elements, which was
making them unclickable.
I've added an exception to this over-reaching blanket rule for now,
but it should be reigned in properly in the future.

Fixes #311
Fixes #312
  • Loading branch information
1j01 committed Mar 1, 2024
1 parent 00715fb commit 59c230e
Showing 1 changed file with 5 additions and 0 deletions.
5 changes: 5 additions & 0 deletions styles/layout.css
Original file line number Diff line number Diff line change
Expand Up @@ -951,9 +951,14 @@ html, body, .jspaint {
text-decoration: underline;
}

/* TODO: reduce scope of this rule, and remove exception(s) to it */
::before, ::after {
pointer-events: none;
}
/* Quick fix for clicking directly on the radio button in themes which use styles from 98.css */
input[type="radio"] + label::before {
pointer-events: all;
}

.cursor-bully * {
cursor: inherit !important;
Expand Down

0 comments on commit 59c230e

Please sign in to comment.