Improve design

- Updates New Replays for the design refresh
- Updates STYLING.html for the design refresh

Fixes #2177

js/client-battle.js

@@ -1512,7 +1512,7 @@
 			if (this.gameType === 'battle' && this.room.battle && !this.room.battle.rated) {
 				buf += '<button type="button" name="replacePlayer" class="button">Replace player</button> ';
 			}
-			buf += '<button type="button" name="close" class="autofocus" class="button">Cancel</button></p></form>';
+			buf += '<button type="button" name="close" class="button autofocus">Cancel</button></p></form>';
 			this.$el.html(buf);
 		},
 		replacePlayer: function (data) {

js/client-teambuilder.js

@@ -1202,12 +1202,12 @@
 				}
 				for (i = 0; i < this.curSetList.length; i++) {
 					if (this.curSetList.length < this.curTeam.capacity && this.deletedSet && i === this.deletedSetLoc) {
-						buf += '<li><button name="undeleteSet"><i class="fa fa-undo"></i> Undo Delete</button></li>';
+						buf += '<li><button name="undeleteSet" class="button"><i class="fa fa-undo"></i> Undo Delete</button></li>';
 					}
 					buf += this.renderSet(this.curSetList[i], i);
 				}
 				if (this.deletedSet && i === this.deletedSetLoc) {
-					buf += '<li><button name="undeleteSet"><i class="fa fa-undo"></i> Undo Delete</button></li>';
+					buf += '<li><button name="undeleteSet" class="button"><i class="fa fa-undo"></i> Undo Delete</button></li>';
 				}
 				if (i === 0) {
 					buf += '<li><button name="import" class="button big"><i class="fa fa-upload"></i> Import from text or URL</button></li>';
@@ -1243,7 +1243,7 @@
 			var buf = '<li value="' + i + '">';
 			if (!set.species) {
 				if (this.deletedSet) {
-					buf += '<div class="setmenu setmenu-left"><button name="undeleteSet"><i class="fa fa-undo"></i> Undo Delete</button></div>';
+					buf += '<div class="setmenu setmenu-left"><button name="undeleteSet" class="button"><i class="fa fa-undo"></i> Undo Delete</button></div>';
 				}
 				buf += '<div class="setmenu"><button name="importSet"><i class="fa fa-upload"></i>Import</button></div>';
 				buf += '<div class="setchart" style="background-image:url(' + Dex.resourcePrefix + 'sprites/gen5/0.png);"><div class="setcol setcol-icon"><div class="setcell-sprite"></div><div class="setcell setcell-pokemon"><label>Pok&eacute;mon</label><input type="text" name="pokemon" class="textbox chartinput" value="" autocomplete="off" /></div></div></div>';
@@ -1594,9 +1594,9 @@
 			buf += '<div class="teambuilder-clipboard-data" tabindex="-1">' + this.clipboardInnerHTML() + '</div>';
 			buf += '<div class="teambuilder-clipboard-buttons">';
 			if (this.curTeam && this.curSetList.length < this.curTeam.capacity) {
-				buf += '<button name="pastePokemon" class="teambuilder-clipboard-button-left"><i class="fa fa-clipboard"></i> Paste!</button>';
+				buf += '<button name="pastePokemon" class="teambuilder-clipboard-button-left button"><i class="fa fa-clipboard"></i> Paste!</button>';
 			}
-			buf += '<button name="clipboardRemoveAll" class="teambuilder-clipboard-button-right"><i class="fa fa-trash"></i> Clear clipboard</button>';
+			buf += '<button name="clipboardRemoveAll" class="teambuilder-clipboard-button-right button"><i class="fa fa-trash"></i> Clear clipboard</button>';
 			buf += '</div>';
 			buf += '</div>';
 
@@ -1766,7 +1766,7 @@
 
 			$setDiv.text('Sample sets: ');
 			for (var set in sets) {
-				$setDiv.append('<button name="importSmogonSet">' + BattleLog.escapeHTML(set) + '</button>');
+				$setDiv.append('<button name="importSmogonSet" class="button">' + BattleLog.escapeHTML(set) + '</button>');
 			}
 			$setDiv.append(' <small>(<a target="_blank" href="' + this.smogdexLink(species) + '">Smogon&nbsp;analysis</a>)</small>');
 		},

js/client-topbar.js

@@ -1070,7 +1070,7 @@
 			buf += '<p><label class="label">Username: <strong><input type="text" name="username" value="' + BattleLog.escapeHTML(data.username) + '" style="color:inherit;background:transparent;border:0;font:inherit;font-size:inherit;display:block" readonly autocomplete="username" /></strong></label></p>';
 			if (data.special === '@gmail') {
 				buf += '<div id="gapi-custom-signin" style="width:240px;margin:0 auto">[loading Google log-in button]</div>';
-				buf += '<p class="buttonbar"><button name="close">Cancel</button></p>';
+				buf += '<p class="buttonbar"><button name="close" class="button">Cancel</button></p>';
 			} else {
 				buf += '<p><label class="label">Password: <input class="textbox autofocus" type="password" name="password" autocomplete="current-password" style="width:173px"><button type="button" name="showPassword" aria-label="Show password" style="float:right;margin:-21px 0 10px;padding: 2px 6px" class="button"><i class="fa fa-eye"></i></button></label></p>';
 				buf += '<p class="buttonbar"><button type="submit" class="button"><strong>Log in</strong></button> <button type="button" name="close" class="button">Cancel</button></p>';

js/client.js

@@ -2546,7 +2546,7 @@ function toId() {
 		},
 		initialize: function (data) {
 			if (!this.type) this.type = 'semimodal';
-			this.$el.html('<form><p style="white-space:pre-wrap;word-wrap:break-word">' + (data.htmlMessage || BattleLog.parseMessage(data.message)) + '</p><p class="buttonbar">' + (data.buttons || '<button type="button" name="close" class="autofocus" class="button"><strong>OK</strong></button>') + '</p></form>').css('max-width', data.maxWidth || 480);
+			this.$el.html('<form><p style="white-space:pre-wrap;word-wrap:break-word">' + (data.htmlMessage || BattleLog.parseMessage(data.message)) + '</p><p class="buttonbar">' + (data.buttons || '<button type="button" name="close" class="button autofocus"><strong>OK</strong></button>') + '</p></form>').css('max-width', data.maxWidth || 480);
 		},
 
 		dispatchClickButton: function (e) {
@@ -2924,7 +2924,7 @@ function toId() {
 					buf += '<p class="error">The Wii U does not support secure connections.</p>';
 					buf += '<p class="buttonbar"><button name="tryhttp" class="button autofocus"><strong>Connect insecurely</button> <button name="close" class="button">Work offline</button></p>';
 				} else if (document.location.protocol === 'https:') {
-					buf += '<p class="buttonbar"><button type="submit" class="button"><strong>Retry</strong></button> <button name="tryhttp" class="button">Retry with HTTP</button> <button name="close">Work offline</button></p>';
+					buf += '<p class="buttonbar"><button type="submit" class="button"><strong>Retry</strong></button> <button name="tryhttp" class="button">Retry with HTTP</button> <button name="close" class="button">Work offline</button></p>';
 				} else {
 					buf += '<p class="buttonbar"><button type="submit" class="button"><strong>Retry</strong></button> <button name="close" class="button">Work offline</button></p>';
 				}
@@ -2978,7 +2978,7 @@ function toId() {
 			var buf = '';
 			buf = '<p>Your replay has been uploaded! It\'s available at:</p>';
 			buf += '<p> <a class="replay-link" href="https://' + Config.routes.replays + '/' + data.id + '" target="_blank" class="no-panel-intercept">https://' + Config.routes.replays + '/' + data.id + '</a> <button name="copyReplayLink" class="button">Copy</button></p>';
-			buf += '<p><button class="autofocus button" name="close">Close</button><p>';
+			buf += '<p><button class="button autofocus" name="close">Close</button><p>';
 			this.$el.html(buf).css('max-width', 620);
 		},
 		clickClose: function () {
@@ -3037,7 +3037,7 @@ function toId() {
 				setTimeout(_.bind(this.rulesTimeout, this), 5000);
 			} else {
 				this.type = 'semimodal';
-				buf += '<p class="buttonbar"><button name="close" class="autofocus button">Close</button></p>';
+				buf += '<p class="buttonbar"><button name="close" class="button autofocus">Close</button></p>';
 			}
 			this.$el.css('max-width', 760).html(buf);
 		},

src/battle-log.ts

@@ -83,6 +83,7 @@ export class BattleLog {
 	}
 	destroy() {
 		this.elem.onscroll = null;
+		this.elem.innerHTML = '';
 	}
 	addSeekEarlierButton() {
 		if (this.skippedLines) return;

style/STYLING.html

@@ -15,7 +15,7 @@
 function customCssSuccess() { customCssLoaded = 'success'; updateCustomCss(); }
 </script>
 
-<link rel="stylesheet" href="./battle.css" />
+<link rel="stylesheet" href="./battle.css?v1" />
 <link rel="stylesheet" href="./custom.css" onerror="customCssErrored()" onload="customCssSuccess()" />
 <link rel="stylesheet" href="./font-awesome.css" />
 <style>
@@ -88,7 +88,7 @@ <h2>Buttons and links</h2>
   <p><code>.button</code></p>
 
   <p>
-    Regular buttons always need <code>class="button"</code> to look like buttons &ndash; this is so you can apply other classes/styles if you want them to look like other things.
+    Regular buttons always need <code>class="button"</code> to look like buttons &ndash; this is so you can apply other classes/styles if you want them to look like other things. You can also add the class to other elements, like links, to make them look like buttons.
   </p>
   <p>
     Notice the active (pressed down) styling.
@@ -108,18 +108,18 @@ <h2>Buttons and links</h2>
   </div>
   <div class="clear"></div>
 
-  <p><code>.button.disabled</code></p>
+  <p><code>.button.disabled, .button:disabled</code></p>
 
   <p>
-    Disabled buttons are faded out. Implementing <code>disabled</code> as a class lets you detect when they're moused-over (for tooltips) and clicked, if necessary. Do instead set the <code>disabled</code> attribute if you don't need to do that, though, for accessibility reasons.
+    Disabled buttons are faded out. Implementing <code>disabled</code> as a class lets you detect when they're moused-over (for tooltips) and clicked, and also lets you style links, if necessary. If <em>not</em> necessary, do set the <code>disabled</code> attribute instead, though, for accessibility reasons.
   </p>
 
   <div class="light-container">
-    <button class="button disabled" disabled><strong>Do the thing</strong></button>
+    <button class="button" disabled><strong>Do the thing</strong></button>
     <a href="./" class="button disabled">Cancel</a>
   </div>
   <div class="dark-container dark">
-    <button class="button disabled" disabled><strong>Do the thing</strong></button>
+    <button class="button" disabled><strong>Do the thing</strong></button>
     <a href="./" class="button disabled">Cancel</a>
   </div>
   <div class="dark-container code dark">
@@ -128,6 +128,43 @@ <h2>Buttons and links</h2>
   </div>
   <div class="clear"></div>
 
+  <p><code>.button.notifying, .button.subtle-notifying</code></p>
+
+  <p>
+    Notifying buttons are intended for situations where we're trying to get the user's attention. As usual, you can also style links or any other element.
+  </p>
+
+  <div class="light-container">
+    <button class="button notifying">2 new battles!</button>
+    <button class="button subtle-notifying">5 unimportant battles</button>
+  </div>
+  <div class="dark-container dark">
+    <button class="button notifying">2 new battles!</button>
+    <button class="button subtle-notifying">5 unimportant battles</button>
+  </div>
+  <div class="dark-container code dark">
+    &lt;button class="button notifying">2 new battles!&lt;/button>
+    &lt;button class="button subtle-notifying">5 unimportant battles&lt;/button>
+  </div>
+  <div class="clear"></div>
+
+  <p><code>.button.button-first, .button.button-middle, .button.button-last, .button.cur</code></p>
+
+  <p>
+    These are used to group buttons together. <code>cur</code> works a lot like <code>disabled</code>, except the text isn't as greyed out, and is used to denote a current selection.
+  </p>
+
+  <div class="light-container">
+    <button class="button button-first cur">Charmander</button><button class="button button-middle">Squirtle</button><button class="button button-last">Bulbasaur</button>
+  </div>
+  <div class="dark-container dark">
+    <button class="button button-first cur">Charmander</button><button class="button button-middle">Squirtle</button><button class="button button-last">Bulbasaur</button>
+  </div>
+  <div class="dark-container code dark">
+    &lt;button class="button button-first cur">Charmander&lt;/button>&lt;button class="button button-middle">Squirtle&lt;/button>&lt;button class="button button-last">Bulbasaur&lt;/button>
+  </div>
+  <div class="clear"></div>
+
   <p><code>a</code></p>
 
   <p>
@@ -234,7 +271,7 @@ <h2>Forms</h2>
   <p><code>.checkbox</code></p>
 
   <p>
-    This makes checkboxes look slightly nicer. We don't currently try to override the built-in checkbox widget, just make it a bit bigger, add the usual finger-cursor, and add a hover effect.
+    This makes checkboxes and radio buttons look slightly nicer. We don't currently try to override the built-in checkbox widget, just make it a bit bigger, add the usual finger-cursor, and add a hover effect.
   </p>
 
   <div class="light-container">
@@ -263,6 +300,19 @@ <h2>Chat features</h2>
   </div>
   <div class="clear"></div>
 
+  <p><code>kbd</code></p>
+
+  <div class="light-container">
+    Try pressing <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>.
+  </div>
+  <div class="dark-container dark">
+    Try pressing <kbd>Ctrl</kbd>+<kbd>Alt</kbd>+<kbd>Del</kbd>.
+  </div>
+  <div class="dark-container code dark">
+    Try pressing &lt;kbd>Ctrl&lt;/kbd>+&lt;kbd>Alt&lt;/kbd>+&lt;kbd>Del&lt;/kbd>.
+  </div>
+  <div class="clear"></div>
+
   <p><code>.spoiler</code></p>
 
   <p>
@@ -305,7 +355,7 @@ <h2>Chat features</h2>
     Does not require JavaScript! As you can see, it's implemented with <code>&lt;details></code> and <code>&lt;summary></code>.
   </p>
   <p>
-    For accessibility reasons, the "read more" button can only appear at the end of a line (using <code>&lt;/summary</code> to replace a <code>&lt;br /></code>).
+    For accessibility reasons, the "read more" button can only appear at the end of a line (using <code>&lt;/summary></code> to replace a <code>&lt;br /></code>).
   </p>
 
   <div class="light-container">

style/battle-log.css

@@ -82,6 +82,11 @@ button, summary {
 select.button {
 	text-align: left;
 }
+.button option,
+.button optgroup {
+	background: #f6f6f6;
+	color: #222222;
+}
 .button:hover {
 	background: #cfcfcf;
 	background: linear-gradient(to bottom,  #f2f2f2,  #b2b2b2);
@@ -96,14 +101,20 @@ select.button {
 .button.disabled:active,
 .button:disabled,
 .button:disabled:hover,
-.button:disabled:active {
+.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;
@@ -154,6 +165,9 @@ button:disabled {
 	/* puts the right-border over the left border of the button to the right of it */
 	position: relative;
 }
+.button-first.cur:hover, .button-middle.cur:hover {
+	position: static;
+}
 
 .dark .button {
 	background: #2b2c31;
@@ -172,19 +186,35 @@ button:disabled {
 	background: #2b2c31;
 	background: linear-gradient(to bottom, #2b2c31, #4e525a);
 	border-color: #34373b;
-	box-shadow: none;
+	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: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
+	to options, which would be cool except it of course can't handle gradient
+	backgrounds, and also can't fall back to the last non-gradient background,
+	ending up with white text on the default white background. Very fortunately,
+	styling <option> fixes this. */
+	background: #2b2c31;
+	color: #F9F9F9;
+}
 
 .dark .button.notifying {
 	border-color: #34373b;

style/battle.css

@@ -5,7 +5,7 @@ License: GPLv2
 
 */
 
-@import url(./battle-log.css?v6);
+@import url(./battle-log.css?v6.4);
 
 .battle {
 	position: absolute;
@@ -778,6 +778,7 @@ License: GPLv2
 	margin: 0;
 	border-bottom: 1px solid #888888;
 	font-size: 10pt;
+	color: black;
 }
 #tooltipwrapper .tooltip h2 small {
 	font-weight: normal;

style/client.css

@@ -55,16 +55,6 @@ select {
 	border-top-color: #34373b;
 }
 
-.dark .button.cur,
-.dark .button.cur:hover,
-.dark .tabbar a.button.cur,
-.dark .tabbar a.button.cur:hover {
-	background: #555555;
-	border-color: #34373b;
-	box-shadow: none;
-	color: #F9F9F9;
-}
-
 /*********************************************************
  * Header
  *********************************************************/
@@ -206,14 +196,6 @@ select {
 	box-shadow: 0 1px 2px rgba(0,0,0,.1);
 }
 
-.button.cur,
-.button.cur:hover {
-	color: #333333;
-	background: #f8f8f8;
-	box-shadow: none;
-	border-color: #AAAAAA;
-	cursor: default;
-}
 .button.subtle-notifying .fa-comment-o:before,
 .button.notifying .fa-comment-o:before {
 	content: "\f0e6";
@@ -3152,7 +3134,7 @@ a.ilink.yours {
 }
 
 .dark .highlighted {
-	background: rgba(120,220,255,0.28);
+	background: rgba(120,220,255,0.25);
 }
 .dark .message-pm {
 	color: #00af00;
@@ -3165,7 +3147,7 @@ a.ilink.yours {
 	border-color: #526c87;
 }
 .dark .chat.mine {
-	background: rgba(255,255,255,0.05);
+	background: rgba(255,255,255,0.08);
 }
 
 /* teambuilder */

website/pages/contact-ja.md

@@ -14,7 +14,7 @@ Helpチャットルームでは、ほとんどの問題を解決できます。
 
 スタッフへの連絡は、以下のメールアドレスを利用してください。<strong>悪質なユーザーの通報は`/report`を利用してください。なお、英語のみに対応しています。ENGLISH ONLY!</strong>
 
-> <kbd>st</kbd><kbd>aff@pok</kbd><kbd>emonshowdown.com</kbd>
+> <tt>st</tt><tt>aff@pok</tt><tt>emonshowdown.com</tt>
 
 ### ちょっとした質問集
 

website/pages/contact.md

@@ -14,7 +14,7 @@ We have a Help chatroom, where our staff can help you with most problems. If you
 
 For contacting the staff, use the following e-mail address. <strong>ABUSIVE USERS SHOULD BE REPORTED WITH THE `/report` COMMAND, NOT THROUGH E-MAIL</strong>.
 
-> <kbd>st</kbd><kbd>aff@pok</kbd><kbd>emonshowdown.com</kbd>
+> <tt>st</tt><tt>aff@pok</tt><tt>emonshowdown.com</tt>
 
 Mini-FAQ: