Tune drop shadows.

1 files changed, 26 insertions, 21 deletions

diff --git a/play.css b/play.css
index 9045a22..82480a7 100644
--- a/play.css
+++ b/play.css
@@ -9,6 +9,11 @@ header.your_turn { background-color: orange; }
 #turn_info { background-color: gainsboro; }
 .role_vp { float: right; }
 
+:root {
+	--box-shadow: 1px 2px 3px 1px #0004;
+	--drop-shadow: 1px 2px 1.5px #0004;
+}
+
 .checked::before { content: "\2714  " }
 .unchecked::before { content: "\2714  "; color:transparent; }
 
@@ -244,8 +249,8 @@ body svg .sea.action {
 	background-color: #eee;
 }
 
-.dice.black { border-color: #595959 #303030 #303030 #595959; box-shadow: 0 0 0 1px #0c0c0c, 1px 2px 4px #0008; }
-.dice.white { border-color: #ffffff #b1b1b1 #b1b1b1 #ffffff; box-shadow: 0 0 0 1px #424242, 1px 2px 4px #0008; }
+.dice.black { border-color: #595959 #303030 #303030 #595959; box-shadow: 0 0 0 1px #0c0c0c, var(--box-shadow); }
+.dice.white { border-color: #ffffff #b1b1b1 #b1b1b1 #ffffff; box-shadow: 0 0 0 1px #424242, var(--box-shadow); }
 
 /* MAGIC TRACKS */
 
@@ -300,21 +305,21 @@ body.p2 #npg_galatia { display: block }
 .no_place_governor { background-color: #6e6e6e; }
 
 /* :r !node tools/gencolors.js */
-.amphitheater, .basilica, .limes { border-color: #fffefd #b2aead #b2aead #fffefd; box-shadow: 0 0 0 1px #444140, 1px 2px 4px #0008; }
-.red { border-color: #ff5455 #c00000 #c00000 #ff5455; box-shadow: 0 0 0 1px #680000, 1px 2px 4px #0008; }
-.blue { border-color: #d5ffff #6e96b6 #6e96b6 #d5ffff; box-shadow: 0 0 0 1px #113854, 1px 2px 4px #0008; }
-.yellow { border-color: #fffe92 #c3a634 #c3a634 #fffe92; box-shadow: 0 0 0 1px #553a00, 1px 2px 4px #0008; }
-.green { border-color: #ace48f #568837 #568837 #ace48f; box-shadow: 0 0 0 1px #033600, 1px 2px 4px #0008; }
-.alamanni { border-color: #f7efc0 #928b5f #928b5f #f7efc0; box-shadow: 0 0 0 1px #393204, 1px 2px 4px #0008; }
-.franks { border-color: #cce5ef #6f868f #6f868f #cce5ef; box-shadow: 0 0 0 1px #1d323a, 1px 2px 4px #0008; }
-.goths { border-color: #68c6ff #0073ab #0073ab #68c6ff; box-shadow: 0 0 0 1px #002759, 1px 2px 4px #0008; }
-.nomads { border-color: #ffcf60 #c56c00 #c56c00 #ffcf60; box-shadow: 0 0 0 1px #610700, 1px 2px 4px #0008; }
-.sassanids { border-color: #b17dca #6d3c83 #6d3c83 #b17dca; box-shadow: 0 0 0 1px #2f0042, 1px 2px 4px #0008; }
-.rival_emperor { border-color: #eaebc7 #888968 #888968 #eaebc7; box-shadow: 0 0 0 1px #323214, 1px 2px 4px #0008; }
-.neutral { border-color: #fffefc #a9a4a2 #a9a4a2 #fffefc; box-shadow: 0 0 0 1px #403d3b, 1px 2px 4px #0008; }
-.militia { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, 1px 2px 4px #0008; }
-.legion { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, 1px 2px 4px #0008; }
-.no_place_governor { border-color: #8e8e8e #505050 #505050 #8e8e8e; box-shadow: 0 0 0 1px #191919, 1px 2px 4px #0008; }
+.amphitheater, .basilica, .limes { border-color: #fffefd #b2aead #b2aead #fffefd; box-shadow: 0 0 0 1px #444140, var(--box-shadow); }
+.red { border-color: #ff5455 #c00000 #c00000 #ff5455; box-shadow: 0 0 0 1px #680000, var(--box-shadow); }
+.blue { border-color: #d5ffff #6e96b6 #6e96b6 #d5ffff; box-shadow: 0 0 0 1px #113854, var(--box-shadow); }
+.yellow { border-color: #fffe92 #c3a634 #c3a634 #fffe92; box-shadow: 0 0 0 1px #553a00, var(--box-shadow); }
+.green { border-color: #ace48f #568837 #568837 #ace48f; box-shadow: 0 0 0 1px #033600, var(--box-shadow); }
+.alamanni { border-color: #f7efc0 #928b5f #928b5f #f7efc0; box-shadow: 0 0 0 1px #393204, var(--box-shadow); }
+.franks { border-color: #cce5ef #6f868f #6f868f #cce5ef; box-shadow: 0 0 0 1px #1d323a, var(--box-shadow); }
+.goths { border-color: #68c6ff #0073ab #0073ab #68c6ff; box-shadow: 0 0 0 1px #002759, var(--box-shadow); }
+.nomads { border-color: #ffcf60 #c56c00 #c56c00 #ffcf60; box-shadow: 0 0 0 1px #610700, var(--box-shadow); }
+.sassanids { border-color: #b17dca #6d3c83 #6d3c83 #b17dca; box-shadow: 0 0 0 1px #2f0042, var(--box-shadow); }
+.rival_emperor { border-color: #eaebc7 #888968 #888968 #eaebc7; box-shadow: 0 0 0 1px #323214, var(--box-shadow); }
+.neutral { border-color: #fffefc #a9a4a2 #a9a4a2 #fffefc; box-shadow: 0 0 0 1px #403d3b, var(--box-shadow); }
+.militia { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, var(--box-shadow); }
+.legion { border-color: #ffffff #b2b2b2 #b2b2b2 #ffffff; box-shadow: 0 0 0 1px #434343, var(--box-shadow); }
+.no_place_governor { border-color: #8e8e8e #505050 #505050 #8e8e8e; box-shadow: 0 0 0 1px #191919, var(--box-shadow); }
 
 .red.action { box-shadow: 0 0 0 1px #680000, 0 0 0 4px white; }
 .blue.action { box-shadow: 0 0 0 1px #113854, 0 0 0 4px white; }
@@ -432,7 +437,7 @@ body.p2 #npg_galatia { display: block }
 	background-size: 54px 64px;
 	background-color: transparent;
 	box-shadow: none;
-	filter: drop-shadow(0px 1px 3px #0008);
+	filter: drop-shadow(var(--drop-shadow));
 }
 
 .quaestor.pretender {
@@ -535,14 +540,14 @@ body.tint .militia {
 	background-color: #f3ddbd;
 	background-image: url(images/militia_tint.png);
 	border-color: #fffcdb #b8a385 #b8a385 #fffcdb;
-	box-shadow: 0 0 0 1px #4c3b1f, 1px 2px 4px #0008;
+	box-shadow: 0 0 0 1px #4c3b1f, var(--box-shadow);
 }
 
 body.tint .legion.reduced {
 	background-color: #f4cccd;
 	background-image: url(images/legion_reduced_tint.png);
 	border-color: #fff4f5 #ba9596 #ba9596 #fff4f5;
-	box-shadow: 0 0 0 1px #503133, 1px 2px 4px #0008;
+	box-shadow: 0 0 0 1px #503133, var(--box-shadow);
 }
 
 /* CARDS */
@@ -560,7 +565,7 @@ body.tint .legion.reduced {
 	background-size: 250px 350px;
 	background-repeat: no-repeat;
 	border-radius: 16px;
-	box-shadow: 0 0 0px 1px #444, 0 0 4px #000;
+	box-shadow: 0 0 0 1px #444, var(--box-shadow);
 }
 
 .card.event.event_0 { background-color: #b73c26 }