Log icons and other changes

1 files changed, 51 insertions, 14 deletions

diff --git a/play.css b/play.css
index 728ac3a..f2de63c 100644
--- a/play.css
+++ b/play.css
@@ -33,7 +33,7 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); }
 #log .h1 { font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
 #log .h2 { padding-top:2px; padding-bottom:2px; text-align: center; }
 #log .h3 { text-align: center; }
-#log .h4 { text-decoration: underline; }
+#log .h4 { text-align: center; text-decoration: underline; }
 #log .h5 { text-decoration: underline; }
 
 #log { background-color: floralwhite }
@@ -73,6 +73,20 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); }
 #log .card_name:hover { text-decoration: underline; }
 #log .space_tip:hover { cursor: pointer; text-decoration: underline; }
 
+#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.d_tst { background-color: hsl(206, 85%, 80%); }
+#log .number.c_tst { background-color: hsl(355, 70%, 80%); }
+
 #log .icon {
 	display: inline-block;
 	vertical-align: -2px;
@@ -85,24 +99,18 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); }
 	background-repeat: no-repeat;
 }
 
+#log .icon.number {
+	background-color: white; 
+	border: 1px solid #444;
+	width: 10px;
+	height: 10px;
+} 
+
 #log .com_nc { background-image: url(images/SVd_blank.gif);}
 #log .com_c {background-image: url(images/SV_blank.gif);}
 #log .dem_nc { background-image: url(images/USd_blank.gif);}
 #log .dem_c {background-image: url(images/favicon_dem.svg);}
 
-#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.d_tst { background-color: hsl(206, 85%, 80%); }
-#log .number.c_tst { background-color: hsl(355, 70%, 80%); }
 
 /* MAP */
 
@@ -165,6 +173,35 @@ body.Communist header.your_turn { background-color: hsl(355, 70%, 75%); }
 #marker_com_tst { background-color: #f26649; border-color: #ff9273 #c2391c #c2391c #ff9273; box-shadow: 0 0 0 1px #640000, 1px 2px 4px #0008; }
 #marker_dem_tst { background-color: #c4e2f4; border-color: #e6ffff #8ca8ba #8ca8ba #e6ffff; box-shadow: 0 0 0 1px #27404f, 1px 2px 4px #0008; }
 
+.box {
+	position: absolute;
+	border: solid 1px black;
+	height: 15px;
+	width: 100px;
+}
+  
+.box.d_pres { background: linear-gradient(to right, rgba(0, 0, 255, 0.75) 0%, rgba(0, 0, 255, 0.75) 20%, transparent 20%, transparent 100%); }
+
+.box.c_pres { background: linear-gradient(to right, transparent 0%, transparent 80%,rgba(255, 0, 0, 0.75) 80%, rgba(255, 0, 0, 0.75) 100%); }
+
+.box.c_pres.d_pres { background: linear-gradient(to right, rgba(0, 0, 255, 0.75) 0%, rgba(0, 0, 255, 0.75) 20%, transparent 20%, transparent 80%, rgba(255, 0, 0, 0.75) 80%,rgba(255,0,0,0.75) 100%); }
+
+.box.d_pres.d_dom { background: linear-gradient(to right, rgba(0, 0, 255, 0.75) 0%, rgba(0, 0, 255, 0.75) 50%, transparent 50%); }
+
+.box.d_pres.d_dom.c_pres { background: linear-gradient(to right, rgba(0, 0, 255, 0.75) 0%, rgba(0, 0, 255, 0.75) 50%, transparent 50%, transparent 80%,  rgba(255, 0, 0, 0.75) 80%, rgba(255, 0, 0, 0.75) 100%); }
+
+.box.d_pres.d_ctrl { background: linear-gradient(to right, rgba(0, 0, 255, 0.75) 0%, rgba(0, 0, 255, 0.75) 80%, transparent 80%); }
+
+.box.d_pres.d_ctrl.c_pres { background: linear-gradient(to right, rgba(0, 0, 255, 0.75) 0%, rgba(0, 0, 255, 0.75) 80%, rgba(255, 0, 0, 0.75) 80%), rgba(255, 0, 0, 0.75) 100%; }
+
+.box.c_pres.c_dom { background: linear-gradient(to right, transparent 50%, rgba(255, 0, 0, 0.75) 50%, rgba(255, 0, 0, 0.75) 100%); }
+
+.box.d_pres.c_pres.c_dom { background: linear-gradient(to right, rgba(0, 0, 255, 0.75) 0%, rgba(0, 0, 255, 0.75) 20%, transparent 20%, transparent 50%, rgba(255, 0, 0, 0.75) 50%, rgba(255, 0, 0, 0.75) 100%); }
+ 
+.box.c_pres.c_ctrl { background: linear-gradient(to right, transparent 20%, rgba(255, 0, 0, 0.75) 20%, rgba(255, 0, 0, 0.75) 100%); }
+
+.box.d_pres.c_pres.c_ctrl { background: linear-gradient(to right, rgba(0, 0, 255, 0.75) 0%, rgba(0, 0, 255, 0.75) 20%, transparent 20%, rgba(255, 0, 0, 0.75) 20%, rgba(255, 0, 0, 0.75) 100%); }
+
 #event_reminder_list {
 	position: absolute;
 	display: flex;