Streamline UI action flow.

1 files changed, 55 insertions, 23 deletions

diff --git a/play.css b/play.css
index bfa1577..65a5d64 100644
--- a/play.css
+++ b/play.css
@@ -62,29 +62,33 @@ svg {
 svg .region, svg .sea {
 	fill: transparent;
 	stroke: transparent;
-	stroke-width: 3px;
+	stroke-width: 4px;
 }
 
-svg .region.action {
-	fill: gold;
-	fill-opacity: 0.1;
-	stroke: yellow;
-	stroke-opacity: 0.5;
-	stroke-width: 3px;
+svg .region.action, svg .sea.action {
+	fill: white;
+	fill-opacity: 0.3;
 }
 
-svg .region.selected {
-	stroke: gold;
-	stroke-opacity: 0.8;
-	stroke-width: 3px;
+body.sel_general svg .region.action {
+	fill: hsl(358, 78%, 51%);
 }
 
-svg .sea.action {
-	fill: dodgerblue;
-	fill-opacity: 0.1;
-	stroke: dodgerblue;
-	stroke-opacity: 0.5;
-	stroke-width: 3px;
+body.sel_governor svg .region.action {
+	fill: hsl(206, 100%, 35%);
+}
+
+body.sel_governor svg .region.selected {
+	fill: hsl(206, 100%, 35%);
+	fill-opacity: 0.3;
+	stroke: hsl(206, 100%, 35%);
+	stroke-width: 4px;
+	stroke-dasharray: 8 4;
+}
+
+body.sel_general svg .sea.action {
+	fill: hsl(206, 100%, 35%);
+	fill-opacity: 0.25;
 }
 
 #pieces div {
@@ -98,12 +102,20 @@ svg .sea.action {
 	box-sizing: border-box;
 	width: 54px;
 	height: 54px;
-	border: 3px solid transparent;
+	border: 4px solid transparent;
 	border-radius: 8px;
+	z-index: 0;
+	display: none;
 }
 
 .support.action {
-	border-color: yellow;
+	background-color: hsla(44, 80%, 52%, 0.4);
+	border-color: white;
+	display: block;
+}
+
+.support.s0.action {
+	background-color: hsla(206, 100%, 35%, 0.4);
 }
 
 .dice {
@@ -149,13 +161,27 @@ svg .sea.action {
 .governor.s8 { transform: translate(181px, 52px) }
 
 .capital {
-	width: 60px;
-	height: 60px;
+	display: none;
+	box-sizing: border-box;
+	width: 72px;
+	height: 72px;
 }
 
 .capital.action {
-	border: 6px solid white;
-	box-shadow: 0px 0px 8px white;
+	display: block;
+	border: 5px solid white;
+	//box-shadow: 0px 0px 8px white;
+	z-index: 2;
+}
+
+body.sel_general .capital.action {
+	border-color: hsl(358, 78%, 51%);
+	background-color: hsla(358, 75%, 51%, 0.2);
+}
+
+body.sel_governor .capital.action {
+	border-color: hsl(44, 80%, 52%);
+	background-color: hsla(44, 80%, 52%, 0.2);
 }
 
 body.p3 #Hispania_NPG { display: block }
@@ -295,6 +321,8 @@ body.p2 #Galatia_NPG { display: block }
 	border-style: solid;
 }
 
+.governor { z-index: 1 }
+
 .governor.unavailable { background-size: 300px 50px }
 .governor.unavailable.n1 { background-position: -50px 0 }
 .governor.unavailable.n2 { background-position: -100px 0 }
@@ -396,6 +424,10 @@ body.p2 #Galatia_NPG { display: block }
 	transform: translate(0px, 0px);
 }
 
+#discard .card.action {
+	box-shadow: 0 0 0px 3px #a00;
+}
+
 .card.action:hover {
 	transform: translate(0px, -12px);
 }