From 636b3c696671b574eacd18c4cef3918bac3fe960 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Thu, 23 Nov 2023 11:49:41 +0100 Subject: tweak action colors --- play.html | 171 ++++++++++++++++++++++++++++++-------------------------------- 1 file changed, 82 insertions(+), 89 deletions(-) diff --git a/play.html b/play.html index d70e1cb..4bdb659 100644 --- a/play.html +++ b/play.html @@ -124,40 +124,43 @@ svg { position: absolute; } -path.state.action { - fill: yellow; fill-opacity: 0.8; - stroke: white; - stroke-width: 20; -} +path.state { fill-opacity: 0.0; } +path.state.action { fill-opacity: 0.7; } +path.state.west { fill: teal } +path.state.plains { fill: chocolate } +path.state.midwest { fill: brown } +path.state.northeast { fill: royalblue } +path.state.atlantic { fill: green } +path.state.south { fill: #444 } + +div.state { opacity: 0% } +div.state.action { opacity: 70% } +div.state.west { background-color: teal } +div.state.plains { background-color: chocolate } +div.state.midwest { background-color: brown } +div.state.northeast { background-color: royalblue } +div.state.atlantic { background-color: green } +div.state.south { background-color: #444 } + path.state.selected { stroke: yellow; - stroke-width: 20; + stroke-width: 12; } path.state.tip { stroke: red; - stroke-width: 20; -} - -path.state:hover { - fill: white; + stroke-width: 12; } div.state { position: absolute; box-sizing: border-box; background-clip: padding-box; - background-color: #0008; border-radius: 50%; border: 5px solid transparent; - width: 64px; - height: 64px; -} - -div.state.action { - background-color: rgba(255, 255, 0, 0.8); - border-color: white; + width: 62px; + height: 62px; } div.state.selected { @@ -168,34 +171,24 @@ div.state.tip { border-color: red; } -div.state:hover { - background-color: #fff8; -} - div.region { position: absolute; box-sizing: border-box; background-clip: padding-box; - background-color: #0008; border-radius: 50%; - border: 5px solid transparent; - width: 65px; - height: 65px; + border: 4px solid transparent; + width: 67px; + height: 67px; } div.region.action { - background-color: rgba(251, 186, 0, 0.5); - border-color: white; + border-color: yellow; } div.region.tip { border-color: red; } -div.region:hover { - background-color: #fff8; -} - div.persistent_box { position: absolute; background-color: #FBF9F1; @@ -514,9 +507,9 @@ div.congress_box.action { - + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-
-
-
-
-
-
-
-
- -
-
-
-
-
-
+
+
+
+
+
+
+
+
+ +
+
+
+
+
+
-- cgit v1.2.3