Tone down the shadows.

1 files changed, 12 insertions, 11 deletions

diff --git a/play.css b/play.css
index 0547a56..5810496 100644
--- a/play.css
+++ b/play.css
@@ -2,7 +2,7 @@ main { background-color: slategray; }
 aside { background-color: silver; }
 header { background-color: gainsboro; }
 body.Franks header.your_turn { background-color: #f7de46; /* 50% mix of khaki and gold */ }
-body.Saracens header.your_turn { background-color: lightgreen; }
+body.Saracens header.your_turn { background-color: hsl(120, 50%, 70%); } /* 50% hsl mix of darkseagreen and lightgreen */
 #role_Franks .role_name { background-color: khaki; }
 #role_Saracens .role_name { background-color: darkseagreen; }
 #turn_info { background-color: gainsboro; }
@@ -64,7 +64,7 @@ body.Saracens header.your_turn { background-color: lightgreen; }
 	width: 224px;
 	height: 348px;
 	border-radius: 12px;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: 1px 1px 4px #0008;
 	transition: 100ms;
 	display: none;
 }
@@ -128,7 +128,7 @@ body.Saracens header.your_turn { background-color: lightgreen; }
 
 #map {
 	margin: 0;
-	box-shadow: 0px 1px 10px rgba(0,0,0,0.5);
+	box-shadow: 0px 1px 8px #0008;
 	width: 1275px;
 	height: 2475px;
 	background-color: #224467;
@@ -178,7 +178,7 @@ body.Saracens header.your_turn { background-color: lightgreen; }
 	z-index: 9;
 }
 .town.muster.highlight {
-	box-shadow: 0 0 0px 4px white;
+	box-shadow: 0 0 0 4px white;
 }
 
 .town.battle {
@@ -214,15 +214,16 @@ body.shift .block.known:hover {
 
 .block {
 	background-repeat: no-repeat;
-	border-radius: 6px;
 	width: 60px;
 	height: 60px;
-	box-shadow: 0px 0px 4px 0px black;
+	box-shadow: 0px 0px 2px 1px #0002;
 }
 
+.block.Franks.known { background-color: #ffefcf; }
+.block.Saracens.known { background-color: #176832; }
+
 .block.Franks { border: 3px solid darkkhaki; background-color: khaki; }
 .block.Saracens { border: 3px solid seagreen; background-color: darkseagreen; }
-.block.Saracens.known { background-color: darkgreen; }
 .block.Assassins { border: 3px solid rebeccapurple; background-color: rebeccapurple; }
 
 .block.Franks.highlight { border-color: white; }
@@ -233,10 +234,10 @@ body.shift .block.known:hover {
 .block.Saracens.selected { border-color: yellow; }
 .block.Assassins.selected { border-color: yellow; }
 
-.block.Franks.highlight:not(.selected) { box-shadow: 0 0 3px 0px white; }
-
 .hit .block.highlight { border-color: black; }
-.hit .block.Franks.highlight { box-shadow: 0 0 4px 0px black; }
+
+.block.Franks.highlight:not(.selected) { box-shadow: 0 0 3px white; }
+.hit .block.Franks.highlight { box-shadow: 0px 0px 2px 1px #0002; }
 
 .block.highlight { cursor: pointer; }
 .block.moved { filter: brightness(80%) grayscale(40%); }
@@ -339,7 +340,7 @@ body.shift .block.known:hover {
 	background-repeat: no-repeat;
 	padding: 33px 0 0 0;
 	border-bottom: 5px solid dimgray;
-	filter: drop-shadow(0px 1px 2px rgba(0,0,0,0.5));
+	filter: drop-shadow(0px 1px 2px #0008);
 	justify-content: left;
 }