Fix more design refresh bugs

- Teams in folders in the team dropdown were unstyled - `.button.disabled` wasn't taking precedence over `.button.notifying`
smogon · Nov 4, 2023 · befbf58 · befbf58
1 parent e3b82f2
commit befbf58
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 45 deletions.
diff --git a/js/client-mainmenu.js b/js/client-mainmenu.js
@@ -1443,7 +1443,7 @@
 				var count = 0;
 				if (teamFormat) {
 					bufs[curBuf] = '<li><h3 style="margin-bottom: 5px;">' + BattleLog.escapeFormat(teamFormat) + ' teams</h3></li>';
-					bufs[curBuf] += '<li style="padding-bottom: 5px;"><input type="checkbox"' + (this.folderToggleOn ? ' checked' : '') + '><strong>Group by folders</strong></button></li>';
+					bufs[curBuf] += '<li style="padding-bottom: 5px;"><label class="checkbox"><input type="checkbox"' + (this.folderToggleOn ? ' checked' : '') + '> Group by folders</label></li>';
 					for (var i = 0; i < teams.length; i++) {
 						if ((!teams[i].format && !teamFormat) || teams[i].format === teamFormat) {
 							var selected = (i === curTeam);
@@ -1478,7 +1478,7 @@
 								if (count % bufBoundary === 0 && curBuf < 4) curBuf++;
 								for (var j = 0; j < folderData.length; j++) {
 									var selected = (folderData[j].id === curTeam);
-									bufs[curBuf] += '<li><button name="selectTeam" value="' + folders[key][j].id + '"' + (selected ? ' class="sel"' : '') + '>' + BattleLog.escapeHTML(folderData[j].name) + '</button></li>';
+									bufs[curBuf] += '<li><button name="selectTeam" value="' + folders[key][j].id + '" class="option' + (selected ? ' cur' : '') + '">' + BattleLog.escapeHTML(folderData[j].name) + '</button></li>';
 									count++;
 									if (count % bufBoundary === 0 && curBuf < 4) curBuf++;
 								}
@@ -1547,7 +1547,7 @@
 			}
 		},
 		events: {
-			'click [type="checkbox"]': 'foldersToggle',
+			'click input[type=checkbox]': 'foldersToggle',
 		},
 		moreTeams: function () {
 			this.close();

diff --git a/style/battle-log.css b/style/battle-log.css
@@ -57,6 +57,10 @@ button, summary {
 	cursor: pointer;
 	touch-action: manipulation;
 }
+button:disabled {
+	cursor: default;
+}
+
 .button {
 	cursor: pointer;
 	text-align: center;
@@ -96,30 +100,6 @@ select.button {
 	background: linear-gradient(to bottom,  #bfbfbf,  #f2f2f2);
 }
 
-.button.disabled,
-.button.disabled:hover,
-.button.disabled:active,
-.button:disabled,
-.button:disabled:hover,
-.button:disabled:active,
-.button.cur,
-.button.cur:hover {
-	cursor: default;
-	background: #EEEEEE;
-	border: 1px solid #CCCCCC;
-	color: #999999;
-	text-shadow: none;
-	box-shadow: 0 1px 2px rgba(0,0,0,.1);
-}
-.button.cur,
-.button.cur:hover {
-	color: #444444;
-}
-
-button:disabled {
-	cursor: default;
-}
-
 .button.notifying {
 	border-color: #AA8866;
 	background: #e3c3a3;
@@ -152,6 +132,26 @@ button:disabled {
 	color: #AA6600;
 }
 
+.button.disabled,
+.button.disabled:hover,
+.button.disabled:active,
+.button:disabled,
+.button:disabled:hover,
+.button:disabled:active,
+.button.cur,
+.button.cur:hover {
+	cursor: default;
+	background: #EEEEEE;
+	border: 1px solid #CCCCCC;
+	color: #999999;
+	text-shadow: none;
+	box-shadow: 0 1px 2px rgba(0,0,0,.1);
+}
+.button.cur,
+.button.cur:hover {
+	color: #444444;
+}
+
 .button-first, .button-middle {
 	border-top-right-radius: 0;
 	border-bottom-right-radius: 0;
@@ -188,23 +188,6 @@ button:disabled {
 	border-color: #34373b;
 	box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45);
 }
-.dark .button.disabled,
-.dark .button.disabled:hover,
-.dark .button.disabled:active,
-.dark .button:disabled,
-.dark .button:disabled:hover,
-.dark .button:disabled:active,
-.dark .button.cur,
-.dark .button.cur:hover {
-	background: #555555;
-	border-color: #34373b;
-	box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45);
-	color: #999999;
-}
-.dark .button.cur,
-.dark .button.cur:hover {
-	color: #E9E9E9;
-}
 .dark .button option,
 .dark .button optgroup {
 	/* Chrome/Win does this thing where it takes <select> styling and applies it
@@ -250,6 +233,24 @@ button:disabled {
 	color: #72bcda;
 }
 
+.dark .button.disabled,
+.dark .button.disabled:hover,
+.dark .button.disabled:active,
+.dark .button:disabled,
+.dark .button:disabled:hover,
+.dark .button:disabled:active,
+.dark .button.cur,
+.dark .button.cur:hover {
+	background: #555555;
+	border-color: #34373b;
+	box-shadow: 0.5px 1px 2px rgba(255, 255, 255, 0.45);
+	color: #999999;
+}
+.dark .button.cur,
+.dark .button.cur:hover {
+	color: #E9E9E9;
+}
+
 /*********************************************************
  * Forms
  *********************************************************/

diff --git a/style/battle.css b/style/battle.css
@@ -5,7 +5,7 @@ License: GPLv2
 
 */
 
-@import url(./battle-log.css?v6.4);
+@import url(./battle-log.css?v6.5);
 
 .battle {
 	position: absolute;