dice images and colored rating numbers in log

1 files changed, 44 insertions, 3 deletions

diff --git a/play.css b/play.css
index e9485b7..452afc2 100644
--- a/play.css
+++ b/play.css
@@ -23,6 +23,42 @@ body.America header.your_turn { background-color: hsl(211, 50%, 75%) }
 #log .n { margin: 6px 0; }
 #log .m { margin-top: 6px; }
 
+#log .die {
+	display: inline-block;
+	vertical-align: -3px;
+	width: 12px;
+	height: 12px;
+	background-size: 600% 100%;
+	background-repeat: no-repeat;
+	background-image: url(images/die_black_pips.svg);
+	background-color: #fff;
+	border: 1px solid #444;
+}
+
+#log .d0 { background-position: -100% 0 }
+#log .d1 { background-position: 0% 0; }
+#log .d2 { background-position: 20% 0; }
+#log .d3 { background-position: 40% 0; }
+#log .d4 { background-position: 60% 0; }
+#log .d5 { background-position: 80% 0; }
+#log .d6 { background-position: 100% 0; }
+
+#log .number {
+	display: inline-block;
+	margin: 0;
+	text-indent: 0;
+	text-align: center;
+	width: 12px;
+	height: 12px;
+	line-height: 12px;
+	border: 1px solid #444;
+}
+
+#log .number.ar { background-color: gold; border-radius: 50%; }
+#log .number.br_a { background-color: hsl(211, 50%, 75%); }
+#log .number.br_b { background-color: hsl(15, 90%, 75%); }
+#log .number.br_f { background-color: hsl(103, 30%, 75%); }
+
 #log .tip { cursor: pointer; }
 #log .tip:hover { text-decoration: underline; }
 
@@ -31,7 +67,6 @@ body.America header.your_turn { background-color: hsl(211, 50%, 75%) }
 #log div.ii { padding-left: 44px; text-indent: -12px; }
 
 #tooltip {
-	display: none;
 	pointer-events: none;
 	position: fixed;
 	z-index: 600;
@@ -39,8 +74,14 @@ body.America header.your_turn { background-color: hsl(211, 50%, 75%) }
 	top: 60px;
 }
 
-#tooltip.show {
-	display: block;
+@media (max-width: 800px) {
+	#tooltip {
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		margin: auto;
+	}
 }
 
 #mapwrap {