Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
path: root/public/damage_block.css
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-04-17 10:20:15 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-04-17 10:20:15 -0700
commit4229c732bca15f4563f596ca345d576984bc517a (patch)
treebc26701b2a96d0f6dfe813d252efff1420c4f0ed /public/damage_block.css
parent460027e96507c8015878a03f14508bd50d68e97f (diff)
Use JS for damage indicator changes instead of CSS
Diffstat (limited to 'public/damage_block.css')
-rw-r--r--public/damage_block.css62
1 files changed, 8 insertions, 54 deletions
diff --git a/public/damage_block.css b/public/damage_block.css
index f050e36..cc7e4dc 100644
--- a/public/damage_block.css
+++ b/public/damage_block.css
@@ -1,64 +1,18 @@
-.damage-selector, .damage-effect-indicator, label {
- width: 20px;
-}
-
-.damage-selector, .damage-effect-indicator {
- height: 30px;
-}
-
-.damage-selector {
- margin: 0;
- padding: 0;
- border: 1px solid black;
- display: inline-block;
-}
-
-.damage-effect-indicator {
- position: absolute;
- margin: 0;
- padding: 0;
- display: block;
- pointer-events: none;
- font-family: monospace;
-}
-
-.damage-selector.clear {
- background-color: white;
-}
-
-.damage-selector.bruise {
+.damage-effect-indicator.bruise {
background-color: orange;
}
-.damage-selector.lethal {
+.damage-effect-indicator.lethal {
background-color: red;
}
-label input[type="radio"] {
- position: absolute;
- opacity: 0;
- margin: 0;
- padding: 0;
-}
-
-label {
- display: none;
+.damage-effect-indicator {
+ width: 20px;
+ height: 30px;
margin: 0 auto;
padding: 0;
-}
-
-label:first-of-type {
- display: block;
-}
-
-label:has(input:checked) {
- display: none;
-}
-
-label:has(+ label input:checked) {
- display: none;
-}
-
-label:has(input:checked) + label {
+ border: 1px solid black;
display: block;
+ user-select: none;
+ font-family: monospace;
}