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

Style grenade indicators without svg

Browse Source
This commit is contained in:
Catalin Constantin Mititiuc 2024-08-07 19:46:17 -07:00
parent 4e4daa9e76
commit d2dba23786
3 changed files with 27 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
public/assets/css/soldier_record_block.css
View File

@ -45,52 +45,45 @@ p {
display: none; display: none;
} }
.grenades svg { .grenades input + label {
width: 14px; display: inline-block;
height: 14px; width: 0.75em;
vertical-align: bottom; height: 0.75em;
border: 1px solid black;
border-radius: 50%;
vertical-align: middle;
} }
.grenades svg circle { .grenades input:checked + label {
fill: none; background-color: gray;
stroke: black;
stroke-width: 2px;
} }
.grenades input:checked + svg circle { .grenades input + label:hover {
fill: gray; background-color: lightgray;
}
.grenades input:checked + label:hover {
background-color: darkgray;
} }
[slot="block-number"]:not(:last-of-type) { [slot="block-number"]:not(:last-of-type) {
display: inline-block; display: inline-block;
width: 1.3em; width: 1.3em;
margin-bottom: 2px;
} }
damage-block.armor span[slot="block-number"] { damage-block span[slot="block-number"] {
border: 1px solid black; border: 1px solid transparent;
padding: 2px; padding: 2px;
border-radius: 50%; border-radius: 50%;
position: relative; position: relative;
} }
.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover { damage-block.preview span[slot="block-number"] {
border: 1px solid orangered; border-color: gray;
cursor: pointer; background-color: silver;
} }
.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover::before { damage-block.armor span[slot="block-number"] {
content: '🡄'; /*<⇽⭠⮈🠈 🠜 🡄*/ border-color: black;
position: absolute;
margin-left: -1.5em;
}
.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover {
border: 1px solid orangered;
cursor: pointer;
}
.physical-status-track damage-block:nth-last-child(1 of .armor) span[slot="block-number"]:hover::after {
content: '🡆'; /* 🠊 🡆 */
position: absolute;
margin-left: 1em;
} }

16
public/index.html
View File

@ -100,18 +100,10 @@
</ul> </ul>
<p class="grenades"> <p class="grenades">
<span>Hand Grenades</span> <span>Hand Grenades</span>
<label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"> <input type='checkbox' id="grenade1" checked /><label for="grenade1"></label>
<circle cx="0" cy="0" r="5" /> <input type='checkbox' id="grenade2" checked /><label for="grenade2"></label>
</svg></label> <input type='checkbox' id="grenade3" checked /><label for="grenade3"></label>
<label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg"> <input type='checkbox' id="grenade4" checked /><label for="grenade4"></label>
<circle cx="0" cy="0" r="5" />
</svg></label>
<label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
<circle cx="0" cy="0" r="5" />
</svg></label>
<label><input type='checkbox' checked /><svg viewBox="-7 -7 14 14" xmlns="http://www.w3.org/2000/svg">
<circle cx="0" cy="0" r="5" />
</svg></label>
</p> </p>
</template> </template>

1
src/modules/gameboard.js
View File

@ -229,7 +229,6 @@ export function start(el) {
}); });
getActiveSightLine(svg) && clearSightLine(); getActiveSightLine(svg) && clearSightLine();
console.log('object', svg.querySelectorAll('.hover'));
}); });
svg.addEventListener('pointerover', e => { svg.addEventListener('pointerover', e => {