From 55db629f94408b2457ff30e2439122e394b33031 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Mon, 30 Oct 2023 11:09:23 +0100 Subject: Inset area highlights so that borders are always visible. Don't increase brightness on hover: * It's distracting and abrupt brightness changes are unfriendly. * On browsers with slow SVG rendering it is laggy and gives an impression the game is slow. * It doesn't work on touch interfaces. --- play.html | 130 ++++++++++++++++++++++++++++++++++++++++++++------------------ 1 file changed, 93 insertions(+), 37 deletions(-) (limited to 'play.html') diff --git a/play.html b/play.html index f40136f..f75dcf2 100644 --- a/play.html +++ b/play.html @@ -17,7 +17,7 @@ :root { --highlight-color: yellow; --selected-color: blue; - --tip-color: red; + --tip-color: white; --target-color: indianred; --counter-french-color: #BCDDFF; @@ -114,28 +114,24 @@ main { background-color: dimgray } #map svg path.area { fill-opacity: 0; fill: white; + stroke-width: 6; } #map svg path.area.action { fill-opacity: 0.2; fill: var(--highlight-color); stroke: white; - stroke-width: 8; -} -#map svg path.area.action:hover { - fill-opacity: 0.6; } #map svg path.area.target { /* cursor: pointer; */ fill-opacity: 0.4; fill: var(--target-color); stroke: var(--target-color); - stroke-width: 8; } #map svg path.area.tip { - fill-opacity: 0.4; + fill-opacity: 0.2; fill: var(--tip-color); stroke: var(--tip-color); - stroke-width: 8; + stroke-dasharray: 12 6; } /* SPACES */ @@ -460,35 +456,95 @@ main { background-color: dimgray }
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + -- cgit v1.2.3