From 9dbb0a5369bbe9a2adb2725e864b684bbea179a6 Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Fri, 5 Apr 2024 09:27:46 -0700
Subject: Enlarge counter radius on pointer hover
---
index.html | 4 +---
style.css | 59 +++++++++++++++++++++--------------------------------------
2 files changed, 22 insertions(+), 41 deletions(-)
diff --git a/index.html b/index.html
index cd2b38f..1b0e219 100644
--- a/index.html
+++ b/index.html
@@ -156,9 +156,7 @@
-
-
-
+
1
2
diff --git a/style.css b/style.css
index 29284dd..2e4cbd7 100644
--- a/style.css
+++ b/style.css
@@ -145,7 +145,7 @@ use[href="#point"]:hover, use[href="#point"].hover {
}
use[href="#point"].active {
- opacity: 1;
+ opacity: 0.2;
}
polyline.move-trace {
@@ -199,8 +199,16 @@ g#grid {
transform: rotate(180deg);
}
-g.troop-counter-template use[href="#counter-base"] {
- transform: translate(-6px, -6px);
+#counter-base {
+ r: inherit;
+}
+
+g.troop-counter-template, g.troop-counter-template use {
+ r: inherit;
+}
+
+g.troop-counter, g.troop-counter use {
+ r: inherit;
}
g.troop-counter-template text {
@@ -224,6 +232,16 @@ g#counters {
pointer-events: none;
}
+g#counters use {
+ r: 5px;
+}
+
+g#counters use:hover {
+ stroke: orange;
+ stroke-width: 2px;
+ r: 8px;
+}
+
g#counters use[data-troop-allegiance="davion"] {
fill: red;
}
@@ -287,11 +305,6 @@ button.set-firing-arc img {
pointer-events: none;
}
-line.firing-arc {
- stroke: blue;
- opacity: 0.1;
-}
-
.sight-line {
stroke: orangered;
stroke-width: 0.5px;
@@ -314,11 +327,6 @@ line.firing-arc {
opacity: 0.5;
}
-image#img1 {
- transform: scale(3.41) rotate(-0.15deg);
- /* opacity: 0.33; */
-}
-
.wall {
fill: none;
stroke: red;
@@ -336,31 +344,6 @@ img.logo {
display: block;
}
-rect#debug-view-box {
- /* stroke: red;
- stroke-width: 20px; */
- fill: blue;
- fill-opacity: 0.2;
-}
-
-#troop-counter > .outer {
- fill: inherit;
-}
-
-#troop-counter > .inner {
- fill: red;
-}
-
-use[href="#troop-counter"] {
- transform: translate(-7.5px, -7.5px);
- fill: transparent;
- /* fill: orange; */
-}
-
-use[href="#troop-counter"]:hover {
- fill: orange;
-}
-
@media (width >= 1800px) {
#record-sheet {
flex-direction: row;
--
cgit v1.2.3