Improve client log capabilities.

- shorter piece names for logging
- piece tooltips
- dice icons
- tactics rating icons
- lime green tooltip highlights

1 files changed, 43 insertions, 9 deletions

diff --git a/play.css b/play.css
index 95fbdfe..badc1e4 100644
--- a/play.css
+++ b/play.css
@@ -32,11 +32,11 @@ aside { min-width: 220px; }
 #log .tip { color: blue; }
 #log .tip:hover { text-decoration: underline; }
 #log .spacetip:hover { text-decoration: underline; cursor: pointer; }
+#log .piecetip:hover { text-decoration: underline; cursor: pointer; }
 
-#log .indent {
-	padding-left: 12px;
-	text-indent: -12px;
-}
+#log div { padding-left: 20px; text-indent: -12px; }
+#log div.i { padding-left: 32px; text-indent: -12px; }
+#log div.ii { padding-left: 44px; text-indent: -12px; }
 
 #turn_info {
 	position: relative;
@@ -48,6 +48,39 @@ aside { min-width: 220px; }
 	bottom: 3px;
 }
 
+#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.br { background-color: hsl(15, 90%, 75%); }
+#log .number.fr { background-color: hsl(211, 50%, 75%); }
+
+#log .dice {
+	display: inline-block;
+	vertical-align: -3px;
+	width: 12px;
+	height: 12px;
+	background-size: 600% 100%;
+	background-repeat: no-repeat;
+	background-image: url(die_black_pips.svg);
+	background-color: white;
+	border: 1px solid black;
+}
+
+.d0 { background-position: -100% 0 }
+.d1 { background-position: 0% 0; }
+.d2 { background-position: 20% 0; }
+.d3 { background-position: 40% 0; }
+.d4 { background-position: 60% 0; }
+.d5 { background-position: 80% 0; }
+.d6 { background-position: 100% 0; }
+
 /* CARDS */
 
 .hand {
@@ -115,7 +148,6 @@ aside { min-width: 220px; }
 }
 
 #tooltip {
-	display: none;
 	pointer-events: none;
 	position: fixed;
 	z-index: 600;
@@ -123,9 +155,8 @@ aside { min-width: 220px; }
 	top: 60px;
 }
 
-#tooltip.show {
-	display: block;
-}
+body.flat #tooltip.leader { box-shadow: 1px 1px 5px rgba(0,0,0,0.5); }
+body.bevel #tooltip.leader { box-shadow: 0 0 0 1px black, 1px 1px 5px rgba(0,0,0,0.5); }
 
 @media (max-width: 800px) {
 	#tooltip {
@@ -328,10 +359,13 @@ body.shift .cultivated.highlight
 	box-shadow: inset 0 0 0 2px red, inset 0 0 3px 2px black, 0 0 3px black;
 }
 .wilderness.tip, .cultivated.tip, .box.tip, .militia-box.tip {
-	border-color: white;
+	border-color: lime;
 	box-shadow: 0 0 3px black, inset 0 0 3px black;
 	z-index: 100;
 }
+.leader.tip, .unit.tip {
+	box-shadow: 0 0 0 1px #222, 0 0 0 4px lime !important;
+}
 
 .wilderness.french_supply, .cultivated.french_supply, .box.french_supply {
 	border-width: 6px;