Highlight current crisis and player on the crisis table.

1 files changed, 52 insertions, 1 deletions

diff --git a/play.css b/play.css
index 9350ba0..5e02eea 100644
--- a/play.css
+++ b/play.css
@@ -28,10 +28,16 @@ body.Green .your_turn { background-color: hsl(99,36%,65%) }
 #log .h1.p_yellow { background-color: hsl(47,100%,78%) }
 #log .h1.p_green { background-color: hsl(99,36%,70%) }
 
+#log img { height: 14px; vertical-align: -6px; }
+
+#log span.M { color: #e31f26 }
+#log span.S { color: #0066b3 }
+#log span.P { color: hsl(44, 100%, 35%) }
+
 #log { background-color: whitesmoke; }
 #log .h1 { background-color: silver; font-weight: bold; padding-top:2px; padding-bottom:2px; margin: 8px 0; text-align: center; }
 #log .h1 { border-bottom: 1px solid #444; border-top: 1px solid #444; }
-#log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; }
+#log .h2 { background-color: gainsboro; text-align: center; }
 #log .h3 { text-decoration: underline; }
 #log div { padding-left: 20px; text-indent: -12px; }
 #log div.i { padding-left: 32px; text-indent: -12px; }
@@ -48,6 +54,11 @@ body.Green .your_turn { background-color: hsl(99,36%,65%) }
 	background-repeat: no-repeat;
 }
 
+#log img {
+	pointer-events: none;
+	vertical-align: -3px;
+}
+
 #log .white {
 	background-image: url(images/die_black_pips.svg);
 	background-color: #fff;
@@ -642,6 +653,46 @@ body.shift #zenobia { background-image: url(images/rival_back.png) }
 	background-image: repeating-linear-gradient(135deg, #555555, #555555 60px, #505050 60px, #505050 120px);
 }
 
+/* CRISIS TABLE HIGHLIGHT */
+
+#crisis_highlight {
+	transition-property: inset, background-color;
+	transition-duration: 500ms;
+	transition-timing-function: ease;
+	box-sizing: border-box;
+	position: absolute;
+	background-color: transparent;
+	border: 4px solid transparent;
+	top: 189px;
+	left: 2194px;
+	width: 263px;
+	height: 30px;
+	box-shadow: 0 0 0 1px #444;
+}
+
+#crisis_highlight.p_red { background-color: hsla(354,85%,67%,20%) }
+#crisis_highlight.p_blue { background-color: hsla(207,67%,78%,20%) }
+#crisis_highlight.p_yellow { background-color: hsla(47,100%,53%,20%) }
+#crisis_highlight.p_green { background-color: hsla(99,36%,60%,20%) }
+
+#crisis_highlight.p_red { border-color: hsl(354,85%,67%) }
+#crisis_highlight.p_blue { border-color: hsl(207,67%,78%) }
+#crisis_highlight.p_yellow { border-color: hsl(47,100%,53%) }
+#crisis_highlight.p_green { border-color: hsl(99,36%,60%) }
+
+#crisis_highlight.c0 { display: none }
+#crisis_highlight.c2 { top: 216px; }
+#crisis_highlight.c3 { top: 243px; }
+#crisis_highlight.c4 { top: 270px; }
+#crisis_highlight.c5 { top: 297px; }
+#crisis_highlight.c6 { top: 324px; }
+#crisis_highlight.c7 { top: 351px; }
+#crisis_highlight.c8 { top: 378px; }
+#crisis_highlight.c9 { top: 405px; }
+#crisis_highlight.c10 { top: 432px; }
+#crisis_highlight.c11 { top: 459px; }
+#crisis_highlight.c12 { top: 486px; }
+
 /* COMBAT MASK */
 
 #combat_mask {