From da2dd7e0fd0f27b0b938b7a19acd096a256cf39b Mon Sep 17 00:00:00 2001 From: PeekabooSteam Date: Mon, 13 Mar 2023 12:41:46 +0000 Subject: [PATCH] Updated unit icons. --- client/public/stylesheets/units.css | 116 +++++++++++++++++++---- client/public/themes/olympus/olympus.css | 50 +++++++--- 2 files changed, 137 insertions(+), 29 deletions(-) diff --git a/client/public/stylesheets/units.css b/client/public/stylesheets/units.css index 49833165..29e71d7f 100644 --- a/client/public/stylesheets/units.css +++ b/client/public/stylesheets/units.css @@ -80,7 +80,6 @@ } [data-object|="unit"] .unit-marker-border { - background-color: white; border-radius: var( --border-radius-sm ); display:none; height: calc( var( --unit-air-height ) + ( var( --unit-label-border-width ) * 2 ) ); @@ -89,11 +88,6 @@ z-index:2; } -.unit:hover .unit-marker-border, -[data-object|="unit"][data-is-selected] .unit-marker-border { - display:block; -} - /****************************** Marker @@ -158,24 +152,52 @@ /* Ground vehicles (not SAMs) */ [data-object|="unit-ground-mi"] .unit-marker { - background-image: var( --unit-ground-marker-neutral-url ); - height: var( --unit-ground-marker-height ); - width: var( --unit-ground-marker-width ); + background-image: var( --unit-ground-mi-marker-neutral-url ); + height: var( --unit-ground-mi-marker-height ); + width: var( --unit-ground-mi-marker-width ); +} + +[data-object|="unit-ground-mi"]:hover .unit-marker { + background-image: var( --unit-ground-mi-marker-neutral-hover-url ); +} + +[data-object|="unit-ground-mi"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-mi-marker-neutral-selected-url ); } [data-object|="unit-ground-mi"][data-coalition="blue"] .unit-marker { - background-image: var( --unit-ground-marker-blue-url ); + background-image: var( --unit-ground-mi-marker-blue-url ); +} + +[data-object|="unit-ground-mi"][data-coalition="blue"]:hover .unit-marker { + background-image: var( --unit-ground-mi-marker-blue-hover-url ); +} + +[data-object|="unit-ground-mi"][data-coalition="blue"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-mi-marker-blue-selected-url ); } [data-object|="unit-ground-mi"][data-coalition="red"] .unit-marker { - background-image: var( --unit-ground-marker-red-url ); + background-image: var( --unit-ground-mi-marker-red-url ); +} + +[data-object|="unit-ground-mi"][data-coalition="red"]:hover .unit-marker { + background-image: var( --unit-ground-mi-marker-red-hover-url ); +} + +[data-object|="unit-ground-mi"][data-coalition="red"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-mi-marker-red-selected-url ); } /* SAMs */ +[data-object|="unit-ground-sam"] .unit-selected-spotlight { + translate:0 2px; +} + [data-object|="unit-ground-sam"] .unit-marker { background-image: var( --unit-sam-marker-neutral-url ); height: var( --unit-sam-marker-height ); @@ -183,18 +205,47 @@ } +[data-object|="unit-ground-sam"]:hover .unit-marker { + background-image: var( --unit-ground-sam-marker-neutral-hover-url ); +} + +[data-object|="unit-ground-sam"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-sam-marker-neutral-selected-url ); +} + + [data-object|="unit-ground-sam"][data-coalition="blue"] .unit-marker { - background-image: var( --unit-sam-marker-blue-url ); + background-image: var( --unit-ground-sam-marker-blue-url ); +} + +[data-object|="unit-ground-sam"][data-coalition="blue"]:hover .unit-marker { + background-image: var( --unit-ground-sam-marker-blue-hover-url ); +} + +[data-object|="unit-ground-sam"][data-coalition="blue"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-sam-marker-blue-selected-url ); } [data-object|="unit-ground-sam"][data-coalition="red"] .unit-marker { - background-image: var( --unit-sam-marker-red-url ); + background-image: var( --unit-ground-sam-marker-red-url ); +} + +[data-object|="unit-ground-sam"][data-coalition="red"]:hover .unit-marker { + background-image: var( --unit-ground-sam-marker-red-hover-url ); +} + +[data-object|="unit-ground-sam"][data-coalition="red"][data-is-selected] .unit-marker { + background-image: var( --unit-ground-sam-marker-red-selected-url ); } /* Naval */ +[data-object|="unit-naval"] .unit-selected-spotlight { + translate:0 -2px; +} + [data-object|="unit-naval"] .unit-marker { background-image: var( --unit-naval-marker-neutral-url ); height: var( --unit-naval-marker-height ); @@ -202,15 +253,40 @@ } +[data-object|="unit-naval"]:hover .unit-marker { + background-image: var( --unit-naval-marker-neutral-hover-url ); +} + +[data-object|="unit-naval"][data-is-selected] .unit-marker { + background-image: var( --unit-naval-marker-neutral-selected-url ); +} + + [data-object|="unit-naval"][data-coalition="blue"] .unit-marker { background-image: var( --unit-naval-marker-blue-url ); } +[data-object|="unit-naval"][data-coalition="blue"]:hover .unit-marker { + background-image: var( --unit-naval-marker-blue-hover-url ); +} + +[data-object|="unit-naval"][data-coalition="blue"][data-is-selected] .unit-marker { + background-image: var( --unit-naval-marker-blue-selected-url ); +} + [data-object|="unit-naval"][data-coalition="red"] .unit-marker { background-image: var( --unit-naval-marker-red-url ); } +[data-object|="unit-naval"][data-coalition="red"]:hover .unit-marker { + background-image: var( --unit-naval-marker-red-hover-url ); +} + +[data-object|="unit-naval"][data-coalition="red"][data-is-selected] .unit-marker { + background-image: var( --unit-naval-marker-red-selected-url ); +} + /* Building */ @@ -234,19 +310,23 @@ /* Weapons */ -[data-object="unit-weapon-missile"] .unit-marker { +[data-object|="unit-weapon"] { + cursor: default; +} + +[data-object|="unit-weapon-missile"] .unit-marker { background-image: var( --unit-weapons-missile-marker-neutral-url ); height: var( --unit-weapons-missile-marker-height ); width: var( --unit-weapons-missile-marker-width ); } -[data-object="unit-weapon-missile"][data-coalition="blue"] .unit-marker { +[data-object|="unit-weapon-missile"][data-coalition="blue"] .unit-marker { background-image: var( --unit-weapons-missile-marker-blue-url ); } -[data-object="unit-weapon-missile"][data-coalition="red"] .unit-marker { +[data-object|="unit-weapon-missile"][data-coalition="red"] .unit-marker { background-image: var( --unit-weapons-missile-marker-red-url ); } @@ -469,6 +549,10 @@ /*** DEAD ***/ +[data-object|="unit-air"][ data-is-dead ] { + cursor: default; +} + [data-object|="unit-air"][ data-is-dead ] .unit-marker { background-image: var( --unit-air-marker-neutral-dead-url ); background-position: 50% 50%; diff --git a/client/public/themes/olympus/olympus.css b/client/public/themes/olympus/olympus.css index 06050adb..741a00bb 100644 --- a/client/public/themes/olympus/olympus.css +++ b/client/public/themes/olympus/olympus.css @@ -134,30 +134,54 @@ /*** Ground ***/ - --unit-ground-marker-height: 43px; - --unit-ground-marker-width: 43px; + --unit-ground-mi-marker-height: 43px; + --unit-ground-mi-marker-width: 43px; - --unit-ground-marker-blue-url: url( "/themes/olympus/images/icon_ground_blue.svg" ); - --unit-ground-marker-neutral-url: url( "/themes/olympus/images/icon_ground_neutral.svg" ); - --unit-ground-marker-red-url: url( "/themes/olympus/images/icon_ground_red.svg" ); + --unit-ground-mi-marker-blue-url: url( "/themes/olympus/images/icon_ground_blue.svg" ); + --unit-ground-mi-marker-blue-hover-url: url( "/themes/olympus/images/icon_ground_blue_hover.svg" ); + --unit-ground-mi-marker-blue-selected-url: url( "/themes/olympus/images/icon_ground_blue_selected.svg" ); + + --unit-ground-mi-marker-neutral-url: url( "/themes/olympus/images/icon_ground_neutral.svg" ); + --unit-ground-mi-marker-neutral-hover-url: url( "/themes/olympus/images/icon_ground_neutral_hover.svg" ); + --unit-ground-mi-marker-neutral-selected-url: url( "/themes/olympus/images/icon_ground_neutral_selected.svg" ); + + --unit-ground-mi-marker-red-url: url( "/themes/olympus/images/icon_ground_red.svg" ); + --unit-ground-mi-marker-red-hover-url: url( "/themes/olympus/images/icon_ground_red_hover.svg" ); + --unit-ground-mi-marker-red-selected-url: url( "/themes/olympus/images/icon_ground_red_selected.svg" ); /*** SAMs ***/ - --unit-sam-marker-height: 38px; + --unit-sam-marker-height: 42px; --unit-sam-marker-width: 50px; - --unit-sam-marker-blue-url: url( "/themes/olympus/images/icon_sam_blue.svg" ); - --unit-sam-marker-neutral-url: url( "/themes/olympus/images/icon_sam_neutral.svg" ); - --unit-sam-marker-red-url: url( "/themes/olympus/images/icon_sam_red.svg" ); + --unit-ground-sam-marker-blue-url: url( "/themes/olympus/images/icon_aa_blue.svg" ); + --unit-ground-sam-marker-blue-hover-url: url( "/themes/olympus/images/icon_aa_blue_hover.svg" ); + --unit-ground-sam-marker-blue-selected-url: url( "/themes/olympus/images/icon_aa_blue_selected.svg" ); + + --unit-ground-sam-marker-neutral-url: url( "/themes/olympus/images/icon_aa_neutral.svg" ); + --unit-ground-sam-marker-neutral-hover-url: url( "/themes/olympus/images/icon_aa_neutral_hover.svg" ); + --unit-ground-sam-marker-neutral-selected-url: url( "/themes/olympus/images/icon_aa_neutral_selected.svg" ); + + --unit-ground-sam-marker-red-url: url( "/themes/olympus/images/icon_aa_red.svg" ); + --unit-ground-sam-marker-red-hover-url: url( "/themes/olympus/images/icon_aa_red_hover.svg" ); + --unit-ground-sam-marker-red-selected-url: url( "/themes/olympus/images/icon_aa_red_selected.svg" ); /*** Naval ***/ - --unit-naval-marker-height: 38px; + --unit-naval-marker-height: 42px; --unit-naval-marker-width: 50px; - --unit-naval-marker-blue-url: url( "/themes/olympus/images/icon_naval_blue.svg" ); - --unit-naval-marker-neutral-url: url( "/themes/olympus/images/icon_naval_neutral.svg" ); - --unit-naval-marker-red-url: url( "/themes/olympus/images/icon_naval_red.svg" ); + --unit-naval-marker-blue-url: url( "/themes/olympus/images/icon_ship_blue.svg" ); + --unit-naval-marker-blue-hover-url: url( "/themes/olympus/images/icon_ship_blue_hover.svg" ); + --unit-naval-marker-blue-selected-url: url( "/themes/olympus/images/icon_ship_blue_selected.svg" ); + + --unit-naval-marker-neutral-url: url( "/themes/olympus/images/icon_ship_neutral.svg" ); + --unit-naval-marker-neutral-hover-url: url( "/themes/olympus/images/icon_ship_neutral_hover.svg" ); + --unit-naval-marker-neutral-selected-url: url( "/themes/olympus/images/icon_ship_neutral_selected.svg" ); + + --unit-naval-marker-red-url: url( "/themes/olympus/images/icon_ship_red.svg" ); + --unit-naval-marker-red-hover-url: url( "/themes/olympus/images/icon_ship_red_hover.svg" ); + --unit-naval-marker-red-selected-url: url( "/themes/olympus/images/icon_ship_red_selected.svg" ); /*** Building ***/