battle panel background image. panel borders.

1 files changed, 35 insertions, 15 deletions

diff --git a/play.css b/play.css
index e60f4df..21a5cd3 100644
--- a/play.css
+++ b/play.css
@@ -6,6 +6,10 @@ body.Lancaster header.your_turn { background-color: hsl(355, 83%, 72%); }
 #role_Lancaster { background-color: hsl(355, 63%, 82%); }
 #turn_info { background-color: gray; }
 
+.panel_header { background-color: hsl(34, 10%, 30%); }
+body.York #event_header, body.York #plan_header, .court_panel.york .panel_header { background-color: hsl(217, 15%, 33%); }
+body.Lancaster #event_header, body.Lancaster #plan_header, .court_panel.lancaster .panel_header { background-color: hsl(355, 15%, 33%); }
+
 /* LOG */
 
 #log {
@@ -96,7 +100,10 @@ body.Lancaster header.your_turn { background-color: hsl(355, 83%, 72%); }
 #mapwrap {
 	width: 1275px;
 	height: 1650px;
+	background-color: #999f85;
+	margin: 12px auto;
 	box-shadow: 1px 2px 4px #0004;
+	border: 2px solid #333;
 }
 
 #map {
@@ -117,17 +124,19 @@ body.Lancaster header.your_turn { background-color: hsl(355, 83%, 72%); }
 .panel {
 	min-width: 1275px;
 	max-width: 1275px;
+	background-color: hsl(34, 10%, 35%);
 	background-color: #555;
-	box-shadow: 1px 2px 4px #0004;
 	margin: 12px auto;
+	box-shadow: 1px 2px 4px #0004;
+	border: 2px solid #333;
 }
 
 .panel_header {
-	background-color: #444;
 	color: white;
 	user-select: none;
 	font-weight: bold;
 	text-align: center;
+	border-bottom: 2px solid #333;
 }
 
 .panel_body {
@@ -145,7 +154,8 @@ body.Lancaster header.your_turn { background-color: hsl(355, 83%, 72%); }
 
 .court_body {
 	gap: 24px;
-	min-height: 524px;
+	padding: 24px 12px 18px 12px;
+	min-height: 506px;
 }
 
 /* CURRENT CARD */
@@ -654,18 +664,30 @@ body.shift .mat .capabilities {
 
 /* BATTLE GRID WITH LORD MATS */
 
+/* 1275px x 3 mats @375px */
+
 #battle_grid {
 	display: grid;
-	grid-template-columns: auto auto auto;
+	grid-template-columns: 380px 380px 380px;
+	grid-template-rows: 510px 510px;
 	margin: 0 auto;
-	justify-content: center;
-	padding: 18px;
+	justify-content: space-evenly;
+	align-content: space-evenly;
+	padding: 20px 0;
+	gap: 80px 0px;
+
+	width: 1275px;
+
+	background-image: url(images/battle_background_dark.jpg);
+	background-size: 1275px;
+	background-position: center;
+
+	//border-top: 2px solid #0008;
 }
 
 #battle_grid .grid_array {
-	width: 375px;
-	height: 506px;
-	padding: 36px 12px 12px 12px;
+	width: 380px;
+	height: 510px;
 }
 
 .grid_array { background-repeat: no-repeat }
@@ -679,8 +701,6 @@ body.shift .mat .capabilities {
 	background-repeat: no-repeat;
 }
 
-#battle_header { grid-row: 1; grid-column: 1 / 4; }
-
 .defender .att,
 .attacker .def,
 .defender .att .retinue_vassals,
@@ -952,19 +972,19 @@ body.shift .mat .capabilities {
 /* ULTRA-WIDE SCREEN LAYOUTS */
 
 @media (min-width: 2800px) {
-	main { display: grid; gap: 0 12px; }
-	main { grid-template-columns: 0 1275px auto 0; }
+	#pan_zoom_main { display: grid; gap: 0 12px; }
+	#pan_zoom_main { grid-template-columns: 0 1275px auto 0; }
 	#sec_map { grid-row: 1; grid-column: 2 }
 	#sec_battle { grid-row: 2; grid-column: 2 }
 	#sec_lords { grid-row: 1 / 3; grid-column: 3 }
 }
 
 @media (min-width: 3200px) {
-	main { grid-template-columns: 36px 1275px auto 0; }
+	#pan_zoom_main { grid-template-columns: 36px 1275px auto 0; }
 }
 
 @media (min-width: 4100px) {
-	main { grid-template-columns: 0 1275px 1fr 1275px 0; }
+	#pan_zoom_main { grid-template-columns: 0 1275px 1fr 1275px 0; }
 	#sec_map { grid-row: 1; grid-column: 2 }
 	#sec_lords { grid-row: 1; grid-column: 3 }
 	#sec_battle { grid-row: 1; grid-column: 4 }