change menu icon naming and revert old style buttons for the default theme

5 files changed, 53 insertions, 34 deletions

diff --git a/webAO/client.html b/webAO/client.html
index 2be5ea4..7002f9b 100644
--- a/webAO/client.html
+++ b/webAO/client.html
@@ -115,20 +115,20 @@
 
 				<br>
 				<span style="display:inline-block; vertical-align: middle;">
-					<span id="menu_rhpd" onclick="redHPD()" class="menu_icon" style="font-size: 2em">
+					<span id="menu_rhpd" onclick="redHPD()" class="healthchange_button">
 						⊟
 					</span>
 					<span style="font-size: 1.25em">Defense</span>
-					<span id="menu_ahpd" onclick="addHPD()" class="menu_icon" style="font-size: 2em">
+					<span id="menu_ahpd" onclick="addHPD()" class="healthchange_button">
 						⊞
 					</span>
 				</span>
 				<span style="display:inline-block; vertical-align: middle;">
-					<span id="menu_ahpp" onclick="addHPP()" class="menu_icon" style="font-size: 2em">
+					<span id="menu_ahpp" onclick="addHPP()" class="healthchange_button">
 						⊞
 					</span>
 					<span style="font-size: 1.25em">Prosecution</span>
-					<span id="menu_rhpp" onclick="redHPP()" class="menu_icon" style="font-size: 2em">
+					<span id="menu_rhpp" onclick="redHPP()" class="healthchange_button">
 						⊟
 					</span>
 				</span>
@@ -160,24 +160,24 @@
 	<meta name="frame-title" lang="en" content="Log">
 	<div id="client_menu">
 		<div class="hrtext">Main Menu</div>
-		<span id="menu_1" onclick="toggleMenu(1)" class="menu_icon active">
-			<b class="em-3">&#128205;</b>
+		<span id="menu_1" onclick="toggleMenu(1)" class="menu_button active">
+			<b class="menu_icon">&#128205;</b>
 			<div>Areas</div>
 		</span>
-		<span id="menu_2" onclick="toggleMenu(2)" class="menu_icon">
-			<b class="em-3">&#128188;</b>
+		<span id="menu_2" onclick="toggleMenu(2)" class="menu_button">
+			<b class="menu_icon">&#128188;</b>
 			<div>Evidence</div>
 		</span>
-		<span id="menu_3" onclick="toggleMenu(3)" class="menu_icon">
-			<b class="em-3">&#128295;</b>
+		<span id="menu_3" onclick="toggleMenu(3)" class="menu_button">
+			<b class="menu_icon">&#128295;</b>
 			<div>Settings</div>
 		</span>
-		<span id="menu_4" onclick="toggleMenu(4)" class="menu_icon">
-			<b class="em-3">&#10067;</b>
+		<span id="menu_4" onclick="toggleMenu(4)" class="menu_button">
+			<b class="menu_icon">&#10067;</b>
 			<div>About</div>
 		</span>
-		<span id="menu_cm" onclick="callMod()" class="menu_icon">
-			<b class="em-3">&#128680;</b>
+		<span id="menu_cm" onclick="callMod()" class="menu_button">
+			<b class="menu_icon">&#128680;</b>
 			<div style="color: #ce2727;">Call Mod</div>
 		</span>
 		<div class="hrtext">
diff --git a/webAO/client.js b/webAO/client.js
index 0aa3ec0..b81d5ec 100644
--- a/webAO/client.js
+++ b/webAO/client.js
@@ -2480,9 +2480,9 @@ window.togglePresent = togglePresent;
  */
 export function toggleMenu(menu) {
 	if (menu !== selectedMenu) {
-		document.getElementById("menu_" + menu).className = "menu_icon active";
+		document.getElementById("menu_" + menu).className = "menu_button active";
 		document.getElementById("content_" + menu).className = "menu_content active";
-		document.getElementById("menu_" + selectedMenu).className = "menu_icon";
+		document.getElementById("menu_" + selectedMenu).className = "menu_button";
 		document.getElementById("content_" + selectedMenu).className = "menu_content";
 		selectedMenu = menu;
 	}
diff --git a/webAO/styles/classic.css b/webAO/styles/classic.css
index 936caec..e67cbef 100644
--- a/webAO/styles/classic.css
+++ b/webAO/styles/classic.css
@@ -93,4 +93,17 @@ img {
 
 .menu_content {
 	background-color: #847342;
+}
+
+.client_button {
+	min-width: 6em;
+	margin: 1px;
+	padding: 6px 2px;
+	clip-path: polygon(75% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 25% 0);
+	cursor: pointer;
+	text-align: center;
+	color: white;
+	background-color: #7b2900;
+	text-shadow: 0 0 4px #000;
+	border: 1px solid #000;
 }
\ No newline at end of file
diff --git a/webAO/styles/client.css b/webAO/styles/client.css
index 9997e99..70d6096 100644
--- a/webAO/styles/client.css
+++ b/webAO/styles/client.css
@@ -403,6 +403,10 @@
   	transition-property: width;
 }
 
+.healthchange_button {
+	font-size: 1.5em;
+}
+
 .judge_button {
 	display: inline-block;
 	min-width: 85px;
@@ -423,19 +427,6 @@
 	vertical-align: middle;
 }
 
-.client_button {
-	min-width: 6em;
-	margin: 1px;
-	padding: 6px 2px;
-	clip-path: polygon(75% 0, 100% 50%, 100% 100%, 0 100%, 0 50%, 25% 0);
-	cursor: pointer;
-	text-align: center;
-	color: white;
-	background-color: #7b2900;
-	text-shadow: 0 0 4px #000;
-	border: 1px solid #000;
-}
-
 .client_button.hover_button.inactive {
 	display: none;
 }
@@ -494,23 +485,23 @@
 	display: block;
 }
 
-.menu_icon {
+.menu_button {
 	cursor: pointer;
 	display: inline-table;
 	margin: 10px 15px;
 	opacity: 1;
 }
 
-.menu_icon.active {
+.menu_button.active {
 	opacity: 0.25;
 }
 
-.menu_icon:hover {
+.menu_button:hover {
 	color: #FFD081;
 }
 
-.em-3 {
-	font-size: 3em;
+.menu_icon {
+	font-size: 2em;
 }
 
 .area-button {
diff --git a/webAO/styles/default.css b/webAO/styles/default.css
index 2581ae2..eb50603 100644
--- a/webAO/styles/default.css
+++ b/webAO/styles/default.css
@@ -48,4 +48,19 @@ img {
 
 #client_chatwaiting {
 	display: none;
+}
+
+.client_button {
+	margin: 1px;
+	padding: 2px 15px;
+	cursor: pointer;
+	text-align: center;
+	font-weight: bold;
+	color: white;
+	background-color: #7b2900;
+	border-radius: 3px;
+	border-style: solid;
+	border-width: 1px;
+	border-color: #fff;
+	box-shadow: 1px 1px inset;
 }
\ No newline at end of file