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

Enlarge counter radius on pointer hover

Browse Source
This commit is contained in:
Catalin Mititiuc 2024-04-05 09:27:46 -07:00
parent 8bd67fbee2
commit 9dbb0a5369
2 changed files with 22 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -156,9 +156,7 @@
<defs> <defs>
<polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" /> <polygon id="point" points="0,10 8.66,5 8.66,-5 0,-10 -8.66,-5 -8.66,5" />
<symbol id="counter-base" viewBox="-6 -6 12 12" width="12" height="12"> <circle id="counter-base" cx="0" cy="0" r="5" />
<circle cx="0" cy="0" r="5" />
</symbol>
<g id="t-1" class="troop-counter-template"><use href="#counter-base" /><text>1</text></g> <g id="t-1" class="troop-counter-template"><use href="#counter-base" /><text>1</text></g>
<g id="t-2" class="troop-counter-template"><use href="#counter-base" /><text>2</text></g> <g id="t-2" class="troop-counter-template"><use href="#counter-base" /><text>2</text></g>

59
style.css
View File

@ -145,7 +145,7 @@ use[href="#point"]:hover, use[href="#point"].hover {
} }
use[href="#point"].active { use[href="#point"].active {
opacity: 1; opacity: 0.2;
} }
polyline.move-trace { polyline.move-trace {
@ -199,8 +199,16 @@ g#grid {
transform: rotate(180deg); transform: rotate(180deg);
} }
g.troop-counter-template use[href="#counter-base"] { #counter-base {
transform: translate(-6px, -6px); 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 { g.troop-counter-template text {
@ -224,6 +232,16 @@ g#counters {
pointer-events: none; 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"] { g#counters use[data-troop-allegiance="davion"] {
fill: red; fill: red;
} }
@ -287,11 +305,6 @@ button.set-firing-arc img {
pointer-events: none; pointer-events: none;
} }
line.firing-arc {
stroke: blue;
opacity: 0.1;
}
.sight-line { .sight-line {
stroke: orangered; stroke: orangered;
stroke-width: 0.5px; stroke-width: 0.5px;
@ -314,11 +327,6 @@ line.firing-arc {
opacity: 0.5; opacity: 0.5;
} }
image#img1 {
transform: scale(3.41) rotate(-0.15deg);
/* opacity: 0.33; */
}
.wall { .wall {
fill: none; fill: none;
stroke: red; stroke: red;
@ -336,31 +344,6 @@ img.logo {
display: block; 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) { @media (width >= 1800px) {
#record-sheet { #record-sheet {
flex-direction: row; flex-direction: row;