ccm/btroops
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

WIP: solution to bringing active element to top?

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc
2024-07-26 15:11:24 -07:00
parent 4be3df2bdd
commit aadc01376d
2 changed files with 59 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
public/assets/css/map.css
View File

@@ -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;
}