Appearance tweaks.

1 files changed, 96 insertions, 101 deletions

diff --git a/play.html b/play.html
index c35e8e7..054dda9 100644
--- a/play.html
+++ b/play.html
@@ -23,9 +23,11 @@ header.your_turn { background-color: orange; }
 .role_supply { float: right; }
 
 #log { background-color: ghostwhite; }
-#log .h1 { background-color: silver; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
+#log .h1 { background-color: dimgray; color: ghostwhite; font-weight: bold; padding-top:2px; padding-bottom:2px; text-align: center; }
 #log .h2 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; }
-#log .h3 { background-color: lavender; padding-top:2px; padding-bottom:2px; text-align: center; }
+#log .h3 { background-color: gainsboro; padding-top:2px; padding-bottom:2px; text-align: center; }
+#log .axis { background-color: hsl(120, 25%, 75%) }
+#log .allied { background-color: hsl(35, 45%, 80%) }
 #log > .i { padding-left: 20px; }
 #log > .ii { padding-left: 32px; }
 #log > div > .i { padding-left: 12px; }
@@ -206,7 +208,7 @@ header.your_turn { background-color: orange; }
 table { border-collapse: collapse; font-size: 12px; user-select: none; }
 td.blank { background-color: transparent; border: none }
 td,th { border: 1px solid #222; text-align: center; padding: 2px 4px; }
-td { min-width: 16px; }
+td { min-width: 16px; height: 19px; }
 th { background-color: #222; color: oldlace; }
 td { background-color: oldlace; }
 table .required_target { background-color: #b8d9ca }
@@ -279,21 +281,6 @@ td img { vertical-align: middle }
 
 /* MAP */
 
-svg .fortress {
-	fill: indianred;
-	stroke: saddlebrown;
-}
-
-svg .fortress.axis {
-	fill: seagreen;
-	stroke: darkgreen;
-}
-
-svg .side {
-	stroke-linecap: round;
-	stroke-width: 4;
-}
-
 svg .hex {
 	stroke-width: 2;
 }
@@ -330,27 +317,47 @@ svg .hex.tip {
 
 /* HEX CONTROL */
 
-svg .side.axis_control {
-	stroke: seagreen;
+svg .fortress.allied {
+	fill: firebrick;
+	stroke: darkred;
+}
+
+svg .fortress.axis {
+	fill: forestgreen;
+	stroke: darkgreen;
+}
+
+svg .side {
+	stroke-linecap: round;
 	stroke-dasharray: 54 100;
 	stroke-dashoffset: -8;
+	stroke-width: 4;
+}
+
+svg .side.axis_control {
+	stroke: darkgreen;
 }
 
 svg .side.allied_control {
-	stroke: firebrick;
-	stroke-dasharray: 54 100;
-	stroke-dashoffset: -8;
+	stroke: darkred;
 }
 
-body.Allied svg .side.axis_control { stroke: black; }
-body.Allied svg .side.allied_control { stroke: none; }
-body.Axis svg .side.axis_control { stroke: none; }
-body.Axis svg .side.allied_control { stroke: black; }
+body.Allied svg .side.axis_control { stroke: #222 }
+body.Axis svg .side.allied_control { stroke: #222 }
+body.Allied svg .side.allied_control { stroke: none }
+body.Axis svg .side.axis_control { stroke: none }
 
 /* SUPPLY LINES */
 
+svg #lines line {
+	pointer-events: none;
+	stroke: none;
+	stroke-width: 6px;
+	stroke-linecap: round;
+}
+
 svg .hex.axis_supply {
-	fill: seagreen;
+	fill: forestgreen;
 	fill-opacity: 0.4;
 }
 
@@ -360,30 +367,20 @@ svg .hex.allied_supply {
 }
 
 svg .hex.axis_supply.allied_supply {
-	fill: darkgoldenrod;
+	fill: blue;
 	fill-opacity: 0.4;
 }
 
-svg #lines line {
-	pointer-events: none;
-	stroke: none;
-	stroke-width: 6px;
-	stroke-linecap: round;
-}
-
 svg #lines line.axis_supply {
-	stroke: darkslategray;
-	stroke-opacity: 0.6;
+	stroke: darkgreen;
 }
 
 svg #lines line.allied_supply {
 	stroke: darkred;
-	stroke-opacity: 0.6;
 }
 
 svg #lines line.axis_supply.allied_supply {
-	stroke: darkorange;
-	stroke-opacity: 0.6;
+	stroke: navy;
 }
 
 /* UNITS */
@@ -402,27 +399,23 @@ svg #lines line.axis_supply.allied_supply {
 }
 
 .unit {
+	background-size: 1000%;
+	background-repeat: no-repeat;
+	border-style: solid;
+	transition: top 200ms, left 200ms, transform 200ms;
+}
+
+.unit {
 	width: 51px;
 	height: 51px;
 	border-width: 4px;
 }
+
 .unit.m {
 	width: 42px;
 	height: 42px;
 	border-width: 4px;
 }
-.unit.s {
-	width: 34px;
-	height: 34px;
-	border-width: 3px;
-}
-
-.unit {
-	background-size: 1000%;
-	background-repeat: no-repeat;
-	border-style: solid;
-	transition: top 200ms, left 200ms, transform 200ms;
-}
 
 .unit.revealed {
 	background-image: url(units.svg);
@@ -433,32 +426,32 @@ svg #lines line.axis_supply.allied_supply {
 }
 
 .unit.axis {
-	background-color: #9aa880;
-	border-color: #899572;
-	box-shadow: 0 0 2px 1px #2d292c80;
+	background-color: hsl(80, 20%, 60%);
+	border-color: hsl(80, 20%, 50%);
+	box-shadow: 0 0 2px 1px hsl(80, 20%, 20%);
 }
 
-.unit.allied {
-	background-color: #cebc9a;
-	border-color: #b7a889;
-	box-shadow: 0 0 2px 1px #5c3a1e80;
+.unit.axis.moved:not(.disrupted):not(.unsupplied) {
+	border-color: hsl(80, 20%, 40%);
 }
 
-/*
-.unit.axis {
-	background-color: gray;
-	border-color: dimgray;
-	box-shadow: 0 0 2px 1px #2226;
+.unit.axis.moved:not(.revealed) {
+	background-color: hsl(80, 20%, 50%);
 }
 
 .unit.allied {
-	background-color: indianred;
-	border-color: brown;
-	background-color: #a85;
-	border-color: #642;
-	box-shadow: 0 0 2px 1px #4116;
+	background-color: hsl(35, 40%, 60%);
+	border-color: hsl(35, 40%, 50%);
+	box-shadow: 0 0 2px 1px hsl(30, 40%, 20%);
+}
+
+.unit.allied.moved:not(.disrupted):not(.unsupplied) {
+	border-color: hsl(35, 40%, 40%);
+}
+
+.unit.allied.moved:not(.revealed) {
+	background-color: hsl(35, 40%, 50%);
 }
-*/
 
 .unit.axis.revealed {
 	background-color: #abba8e;
@@ -472,26 +465,9 @@ svg #lines line.axis_supply.allied_supply {
 	background-color: #e4d1ab;
 }
 
-.unit.action {
-	box-shadow: 0 0 0 2px white;
-}
-
-.unit.action.hit {
-	box-shadow: 0 0 0 2px white, 0 0 0 4px black;
-}
-
-.unit.selected {
-	box-shadow: 0 0 0 2px yellow;
-}
-
-.unit.moved {
-	//border-color: black;
-	//background-color: silver;
-	filter: grayscale(50%)
-}
-
 .unit.disrupted {
 	border-color: #222;
+	box-shadow: 0 0 2px 1px black;
 }
 
 .unit.disrupted:not(.revealed) {
@@ -501,7 +477,8 @@ svg #lines line.axis_supply.allied_supply {
 }
 
 .unit.unsupplied {
-	border-color: royalblue;
+	border-color: #c00;
+	box-shadow: 0 0 2px 1px darkred;
 }
 
 .unit.unsupplied:not(.revealed) {
@@ -511,11 +488,11 @@ svg #lines line.axis_supply.allied_supply {
 }
 
 .unit.disrupted.unsupplied {
-	border-color: #222 royalblue;
+	border-color: #222 #c00;
 }
 
 .unit.disrupted.unsupplied.r1, .unit.disrupted.unsupplied.r3 {
-	border-color: royalblue #222;
+	border-color: #c00 #222;
 }
 
 .unit.disrupted.unsupplied:not(.revealed) {
@@ -524,6 +501,18 @@ svg #lines line.axis_supply.allied_supply {
 	background-position: 0% 90%, 90% 10%;
 }
 
+.unit.action {
+	box-shadow: 0 0 0 2px white;
+}
+
+.unit.action.hit {
+	box-shadow: 0 0 0 2px white, 0 0 0 4px black;
+}
+
+.unit.selected {
+	box-shadow: 0 0 0 2px yellow;
+}
+
 .unit.r0 { transform: rotate(0deg); }
 .unit.r1 { transform: rotate(-90deg); }
 .unit.r2 { transform: rotate(-180deg); }
@@ -785,6 +774,7 @@ svg #lines line.axis_supply.allied_supply {
 <tr><td>Trail<td>+1
 </table>
 
+<!--
 <table>
 <tr><th colspan="2">SUPPLY RANGE
 <tr><td>Highway<td>&#x221e;
@@ -792,6 +782,7 @@ svg #lines line.axis_supply.allied_supply {
 <tr><td>Trail<td>2
 <tr><td>No Road<td>1
 </table>
+-->
 
 <table>
 <tr><th colspan="2">UNIT SPEED
@@ -815,21 +806,14 @@ svg #lines line.axis_supply.allied_supply {
 <td>1
 </table>
 
+<!--
 <table>
 <tr><th colspan="2">HEXSIDE LIMIT
 <tr><td>Mountain<br>Ridge<br>Marsh<td>0
 <tr><td>Pass<td>1
 <tr><td>Clear<td>2
 </table>
-
-<table>
-<tr><th colspan="3">TURN OPTIONS
-<tr><td>&#x25D0;<td>Basic<td>MC
-<tr><td>&#x25D0;&#x25D0;<td>Offensive<td>MMC
-<tr><td>&#x25D0;&#x25D0;<td>Assault<td>MC*
-<tr><td>&#x25D0;&#x25D0;&#x25D0;<td>Blitz<td>MC+MC
-<tr><td>No Cost<td>Pass<td>W
-</table>
+-->
 
 <table>
 <tr><td class="blank" colspan="2"><th colspan="4">TARGET UNIT
@@ -885,11 +869,22 @@ svg #lines line.axis_supply.allied_supply {
 <tr><td>
 <img src="icons/infantry.svg">
 <td>1
+<!--
 <tr><td colspan="2"><i>Elite Units cost double</i>
+-->
 <tr><td>Minefields<td>15
 <tr><td>Supply Card<td>10
 </table>
 
+<table>
+<tr><th colspan="3">TURN OPTIONS
+<tr><td>&#x25D0;<td>Basic<td>MC
+<tr><td>&#x25D0;&#x25D0;<td>Offensive<td>MMC
+<tr><td>&#x25D0;&#x25D0;<td>Assault<td>MC*
+<tr><td>&#x25D0;&#x25D0;&#x25D0;<td>Blitz<td>MC+MC
+<tr><td>No Cost<td>Pass<td>W
+</table>
+
 </div>
 
 </div>