From 6ea86c77f56a26bcbb1c90c46e035385791e7ef9 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Sat, 23 Mar 2024 14:59:27 -0700
Subject: Think I got it working with boxes instead of text??
---
style.css | 50 +++++++++++++++++++++++++++++++++++++++++++++++---
1 file changed, 47 insertions(+), 3 deletions(-)
(limited to 'style.css')
diff --git a/style.css b/style.css
index ed68970..014ef85 100644
--- a/style.css
+++ b/style.css
@@ -82,15 +82,39 @@ line.ruler {
margin: 0;
}
-.soldier-record p.damage span {
+
+label span {
display: inline-block;
+ width: 10px;
+ height: 10px;
+ border: 1px solid black;
}
-.soldier-record p.damage span input {
+.damage-selector.clear {
+ background-color: white;
+}
+
+.damage-selector.bruise {
+ background-color: orange;
+}
+
+.damage-selector.lethal {
+ background-color: red;
+}
+
+label {
display: block;
}
-input {
+/* .soldier-record p.damage span {
+ display: inline-block;
+}
+
+.soldier-record p.damage span input {
+ display: block;
+} */
+
+/* input {
border: none;
outline: 2px solid deeppink;
}
@@ -141,6 +165,26 @@ input:checked + label + input + label {
input {
position: absolute;
opacity: 0;
+} */
+
+label span {
+ border-color: red;
+}
+
+label:first-of-type span {
+ border-color: black;
+}
+
+label:has(input:checked) span {
+ border-color: red;
+}
+
+label:has(+ label input:checked) span {
+ border-color: red;
+}
+
+label:has(input:checked) + label span {
+ border-color: black;
}
image#img1 {
--
cgit v1.2.3