fix role panel

1 files changed, 24 insertions, 28 deletions

diff --git a/play.css b/play.css
index fec181d..925a777 100644
--- a/play.css
+++ b/play.css
@@ -3,9 +3,8 @@ header { background-color: silver; }
 aside { background-color: #f5e8d7; }
 body.British header.your_turn { background-color: salmon; }
 body.American header.your_turn { background-color: skyblue; }
-#role_American .role_name { background-color: skyblue; }
-#role_British .role_name { background-color: salmon; }
-.role_vp { float: right; }
+#role_American { background-color: skyblue; }
+#role_British { background-color: salmon; }
 
 #log > div { padding-left: 20px; text-indent: -12px; }
 
@@ -22,26 +21,32 @@ body.American header.your_turn { background-color: skyblue; }
 	padding: 1px;
 }
 
+#log .h1, #log .h2 {
+	border-top: 1px solid black;
+	border-bottom: 1px solid black;
+}
+
 #log .h2.american { background-color: skyblue; }
 #log .h2.british { background-color: salmon; }
 
 #log .card_tip:hover { text-decoration: dotted underline; }
 
+:root {
+	--piece-shadow: 1px 1px 4px #0008;
+}
+
 aside {
 	width: 230px;
 }
 
-.role_info {
-	padding: 10px 20px;
-	background-color: wheat;
-	white-space: pre-wrap;
+#turn_info {
 }
 
-.last_played {
+#turn_info {
 	background-color: tan;
 }
 
-.last_played .card {
+#turn_info .card {
 	margin: 5px auto;
 }
 
@@ -95,7 +100,7 @@ aside {
 	width: 56.5px;
 	height: 56.5px;
 	background-image: url('/washingtons-war/images/Marker_GameTurnRegulars.jpg');
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 .marker.turn.no-regulars {
 	background-image: url('/washingtons-war/images/Marker_GameTurnNoRegulars.jpg');
@@ -105,7 +110,7 @@ aside {
 	width: 56.5px;
 	height: 56.5px;
 	background-image: url('/washingtons-war/images/Marker_FrenchAlliance.jpg');
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 
 .marker.french-alliance.european-war {
@@ -116,20 +121,20 @@ aside {
 	width: 63px;
 	height: 126px;
 	background-image: url('/washingtons-war/images/Marker_FrenchNavy.jpg');
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 
 .marker.congress {
 	width: 56.5px;
 	height: 56.5px;
 	background-image: url('/washingtons-war/images/Marker_ContinentalCongress.jpg');
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 
 .marker.control {
 	width: 38px;
 	height: 38px;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 	visibility: hidden;
 }
 
@@ -165,7 +170,7 @@ aside {
 	text-shadow: 0px 0px 3px black;
 	font-weight: bold;
 	border-radius: 60px;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 .cu.american { background-image: url('/washingtons-war/images/American-CU.png'); }
 .cu.british { background-image: url('/washingtons-war/images/British-CU.png'); }
@@ -177,7 +182,7 @@ aside {
 	height: 126px;
 	background-size: cover;
 	outline: 1px solid black;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 }
 .general.offmap {
 	display: none;
@@ -216,11 +221,9 @@ aside {
 }
 .space.enabled {
 	display: block;
+	cursor: pointer;
 	border: 7px solid transparent;
-	box-shadow: 0 0 10px 10px white;
-}
-.space.enabled:hover {
-	border: 7px solid yellow;
+	box-shadow: 0 0 0 4px white, inset 0 0 0 2px white;
 }
 .space.regular-space {
 	border-radius: 100px;
@@ -246,7 +249,7 @@ aside {
 	width: 186px;
 	height: 262px;
 	border-radius: 10px;
-	box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
+	box-shadow: var(--piece-shadow);
 	transition: 100ms;
 	display: none;
 }
@@ -255,13 +258,6 @@ aside {
 	display: block;
 }
 
-.hand .card.enabled:hover, .hand .card.selected {
-	Xtransform: scale(1.5) translate(0,-30px);
-	Xtransform: scale(1.1);
-	transform: translate(0,-10px);
-	z-index: 10;
-}
-
 .shift .hand .card:hover, .shift .hand .card.selected {
 	transform: scale(1.5) translate(0,-30px);
 	z-index: 10;