From 8de16476a5ea639ae59045bcc618832412d41c79 Mon Sep 17 00:00:00 2001
From: Tor Andersson <tor@ccxvii.net>
Date: Tue, 29 Jun 2021 14:34:45 +0200
Subject: crusader: Simplify battle screen layout.

---
 play.html | 61 ++++++++++++++++++++++++++++++++++++++-----------------------
 1 file changed, 38 insertions(+), 23 deletions(-)

(limited to 'play.html')

diff --git a/play.html b/play.html
index bbd33b6..ce2faf2 100644
--- a/play.html
+++ b/play.html
@@ -251,18 +251,34 @@ body.shift .block.known:hover {
 
 /* BATTLE BOARD */
 
-.battle { background-color: tan; }
-.battle .battle_message { background-color: gainsboro; }
-.battle .battle_header { background-color: #224467; color: white; font-weight: bold; }
-#EC .battle_menu_list { min-height: 0; }
-.battle_line > td { min-width: 700px; }
+.battle {
+	background-color: tan;
+	min-width: 700px;
+}
+.battle .battle_message {
+	background-color: gainsboro;
+	text-align: center;
+	border-top: 1px solid black;
+}
+.battle .battle_header {
+	Xbackground-color: #224467;
+	background-color: steelblue;
+	color: white;
+	font-weight: bold;
+	text-align: center;
+	border-bottom: 1px solid black;
+}
+.battle .battle_menu {
+	margin: 10px 5px;
+}
 
-.battle td { border: none; }
-#FA, #FB, #FC, #FD, #FR, #EA, #EB, #EC, #ER { margin: 0px auto; padding: 5px; }
-.battle .battle_menu { margin: 10px 5px; }
+#FF, #FC, #FR, #EF, #EC, #ER { margin: 0px auto; padding: 5px; }
+#EC .battle_menu_list { min-height: 0; }
+#ER .battle_menu_list { min-height: 0; }
+#FR .battle_menu_list { min-height: 0; }
 
-#ER { background-image: linear-gradient(to bottom, skyblue, tan); }
-#FR { background-image: linear-gradient(to bottom, tan, darkseagreen); }
+X#ER { background-image: linear-gradient(-2deg, tan 30%, skyblue 35%); }
+X#FR { background-image: linear-gradient(182deg, tan 30%, olivedrab 35%); }
 #FC, #EC {
 	background-color: gray;
 	border-top: 5px dashed tan;
@@ -270,7 +286,8 @@ body.shift .block.known:hover {
 }
 
 #FC, #EC, #FF, #EF { min-height: 120px; }
-#FR, #ER { min-height: 40px; }
+#ER { min-height: 15px; }
+#FR { min-height: 15px; }
 
 #FC.c0, #EC.c0 { display: none; }
 #FC.c1, #EC.c1 { width: 90px; }
@@ -367,18 +384,16 @@ body.shift .block.known:hover {
 <form class="chat_form" action=""><input id="chat_input" autocomplete="off"></form>
 </div>
 
-<table class="battle">
-<tr>
-<th class="battle_header" colspan=4></th>
-<tr class="battle_reserves enemy"><td><div id="ER"></div></td>
-<tr class="battle_line enemy"><td><div id="EC"></div></td>
-<tr class="battle_line enemy"><td><div id="EF"></div></td>
-<tr class="battle_line friendly"><td><div id="FF"></div></td>
-<tr class="battle_line friendly"><td><div id="FC"></div></td>
-<tr class="battle_reserves friendly"><td><div id="FR"></div></td>
-<tr>
-<th class="battle_message" colspan=4></th>
-</table>
+<div class="battle">
+<div class="battle_header"></div>
+<div id="ER"></div>
+<div id="EC"></div>
+<div id="EF"></div>
+<div id="FF"></div>
+<div id="FC"></div>
+<div id="FR"></div>
+<div class="battle_message"></div>
+</div>
 
 <div class="grid_window">
 
-- 
cgit v1.2.3