From 4229c732bca15f4563f596ca345d576984bc517a Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Wed, 17 Apr 2024 10:20:15 -0700
Subject: Use JS for damage indicator changes instead of CSS
---
public/damage_block.css | 62 +++++++------------------------------------------
1 file changed, 8 insertions(+), 54 deletions(-)
(limited to 'public/damage_block.css')
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;
}
--
cgit v1.2.3