From aadc01376d075559725de003a769cdbe3e173c0e Mon Sep 17 00:00:00 2001
From: Catalin Mititiuc
Date: Fri, 26 Jul 2024 15:11:24 -0700
Subject: WIP: solution to bringing active element to top?
---
public/assets/css/map.css | 31 ++++++++++++-------------------
1 file changed, 12 insertions(+), 19 deletions(-)
(limited to 'public')
diff --git a/public/assets/css/map.css b/public/assets/css/map.css
index 06fe169..f5f9dae 100644
--- a/public/assets/css/map.css
+++ b/public/assets/css/map.css
@@ -173,7 +173,7 @@ polygon.firing-arc[data-allegiance="attacker"] {
/* r: 5px;*/
/*}*/
-g.counter {
+g.counter, g.grid-top {
r: 5px;
}
@@ -196,6 +196,7 @@ g.counter.selected {
g.counter use.primary-weapon {
r: inherit;
+ pointer-events: none;
}
g.counter use.troop-number, g.counter use.squad-number {
@@ -264,12 +265,14 @@ g[data-y]:nth-child(odd) {
transform: scale(var(--scale));
}
-[data-x]:hover use[href="#hex"], [data-q][data-r][data-s][data-t]:hover use[href="#hex"] {
+[data-x]:hover use[href="#hex"],
+[data-q][data-r][data-s][data-t]:hover use[href="#hex"],
+[data-q][data-r][data-s][data-t].hover use[href="#hex"] {
opacity: 1;
fill: orange;
stroke: black;
}
-/**/
+
/*[data-q][data-r][data-s][data-t] g.counter,*/
/*[data-q][data-r][data-s][data-t] g.counter .troop-number,*/
/*[data-q][data-r][data-s][data-t] g.counter .squad-number {*/
@@ -497,20 +500,6 @@ text.elevation {
fill: black;
}
-.radial-icon {
- transition: cx 0.25s, cy 0.25s;
-}
-
-[data-q][data-r][data-s][data-t] .radial-icon {
- cx: calc(var(--cx) / 20);
- cy: calc(var(--cy) / 20);
-}
-
-[data-q][data-r][data-s][data-t]:hover .radial-icon {
- cx: var(--cx);
- cy: var(--cy);
-}
-
use[class^="counter-"] {
--scale: 1;
--translateX: -5px;
@@ -541,14 +530,18 @@ g.counter use[class^="counter-"] {
}
/* Counters placed on a hex */
-[data-q][data-r][data-s][data-t]:hover > g.counter ~ use[class^="counter-"] {
+[data-q][data-r][data-s][data-t]:hover > g.counter ~ use[class^="counter-"],
+[data-q][data-r][data-s][data-t].hover > g.counter ~ use[class^="counter-"],
+.grid-top use[class^="counter-"] {
x: calc(var(--x) * 2);
y: calc(var(--y) * 2);
--translateY: -5px;
}
-[data-q][data-r][data-s][data-t]:hover > use[class^="counter-"] {
+[data-q][data-r][data-s][data-t]:hover > use[class^="counter-"],
+[data-q][data-r][data-s][data-t].hover > use[class^="counter-"] {
x: calc(var(--x) * 1.5);
y: calc(var(--y) * 1.5);
--translateY: -5px;
}
+
--
cgit v1.2.3