Web Dev Solutions

Catalin Mititiuc

From d2dba237863c0cf681677a1d6044be3f602e0d6e Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Wed, 7 Aug 2024 19:46:17 -0700 Subject: Style grenade indicators without svg --- public/assets/css/soldier_record_block.css | 53 +++++++++++++----------------- 1 file changed, 23 insertions(+), 30 deletions(-) (limited to 'public/assets/css') diff --git a/public/assets/css/soldier_record_block.css b/public/assets/css/soldier_record_block.css index 096a1b2..4dfb1fd 100644 --- a/public/assets/css/soldier_record_block.css +++ b/public/assets/css/soldier_record_block.css @@ -45,52 +45,45 @@ p { display: none; } -.grenades svg { - width: 14px; - height: 14px; - vertical-align: bottom; +.grenades input + label { + display: inline-block; + width: 0.75em; + height: 0.75em; + border: 1px solid black; + border-radius: 50%; + vertical-align: middle; } -.grenades svg circle { - fill: none; - stroke: black; - stroke-width: 2px; +.grenades input:checked + label { + background-color: gray; } -.grenades input:checked + svg circle { - fill: gray; +.grenades input + label:hover { + background-color: lightgray; +} + +.grenades input:checked + label:hover { + background-color: darkgray; } [slot="block-number"]:not(:last-of-type) { display: inline-block; width: 1.3em; + margin-bottom: 2px; } -damage-block.armor span[slot="block-number"] { - border: 1px solid black; +damage-block span[slot="block-number"] { + border: 1px solid transparent; padding: 2px; border-radius: 50%; position: relative; } -.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover { - border: 1px solid orangered; - cursor: pointer; -} - -.physical-status-track damage-block:nth-child(1 of .armor) span[slot="block-number"]:hover::before { - content: '๐Ÿก„'; /*<โ‡ฝโญ โฎˆ๐Ÿ ˆ ๐Ÿ œ ๐Ÿก„*/ - position: absolute; - margin-left: -1.5em; +damage-block.preview span[slot="block-number"] { + border-color: gray; + background-color: silver; } -.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; +damage-block.armor span[slot="block-number"] { + border-color: black; } -- cgit v1.2.3