From b5ac1f58922e01cae903edf13ebd8a8ad2abdfdd Mon Sep 17 00:00:00 2001
From: Guangcong Luo <guangcongluo@gmail.com>
Date: Fri, 5 Feb 2016 10:43:41 -0500
Subject: [PATCH] Improve Dark Mode

- Popups are now dark
- Topbar username outline is now black
- Teams and team/format selects are now darker
- Code and spoiler blocks are now dark
---
 style/battle.css | 42 ++++++++++++++++++++++++++---
 style/client.css | 70 +++++++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 101 insertions(+), 11 deletions(-)

diff --git a/style/battle.css b/style/battle.css
index 11763acdb..21fdc915c 100644
--- a/style/battle.css
+++ b/style/battle.css
@@ -721,6 +721,29 @@ License: GPLv2
 .spoiler-shown a {
 	color: #2288CC;
 }
+.dark .spoiler {
+	color: #777;
+	background: #777;
+}
+.dark .spoiler:hover,
+.dark .spoiler:active,
+.dark .spoiler-shown {
+	color: #DDD;
+	background: #444;
+}
+.dark .spoiler a {
+	color: #777;
+}
+.dark .spoiler:hover a,
+.dark .spoiler:active a,
+.dark .spoiler-shown a {
+	color: #4488EE;
+}
+.chat .spoiler code {
+	border-color: #BBBBBB;
+	background: #BBBBBB;
+	color: #BBBBBB;
+}
 .chat code,
 .chat .spoiler:hover code,
 .chat .spoiler:active code,
@@ -730,10 +753,18 @@ License: GPLv2
 	color: black;
 	padding: 0 2px;
 }
-.chat .spoiler code {
-	border: 1px solid #CCCCCC;
-	background: #CCCCCC;
-	color: #CCCCCC;
+.dark .chat .spoiler code {
+	border-color: #777;
+	background: #777;
+	color: #777;
+}
+.dark .chat code,
+.dark .chat .spoiler:hover code,
+.dark .chat .spoiler:active code,
+.dark .chat .spoiler-shown code {
+	border-color: #555;
+	background: #333;
+	color: #DDD;
 }
 .battle-log .rated {
 	padding: 3px 4px;
@@ -813,6 +844,9 @@ License: GPLv2
 .message-error {
 	color: #992222;
 }
+.dark .message-error {
+	color: #EF4333;
+}
 .message-overflow,
 .chat small.message-overflow {
 	font-size: 0pt;
diff --git a/style/client.css b/style/client.css
index fca6e4e45..0f68b2bd8 100644
--- a/style/client.css
+++ b/style/client.css
@@ -134,9 +134,6 @@ button:disabled {
 	box-shadow: 0px 0px 4px #88CCFF, 0px 0px 4px #88CCFF;
 	background: #111111;
 }
-.dark .message-error {
-	color: #FF5333;
-}
 
 /* .dark button {
 	background: #777777;
@@ -647,6 +644,7 @@ p.or:after {
 .popupmenu button.sel:hover {
 	border-color: #888888;
 	background: #D5D5D5;
+	color: black;
 }
 .popupmenu button.button {
 	margin: 2px auto 5px;
@@ -659,6 +657,7 @@ p.or:after {
 	font-size: 9pt;
 	text-align: left;
 	font-family: Verdana, Helvetica, Arial, sans-serif;
+	cursor: pointer;
 
 	border-radius: 4px;
 	border: 1px solid #888888;
@@ -2965,7 +2964,7 @@ a.ilink.yours {
 	margin: 2px;
 	padding: 2px;
 
-	border: 1px solid #E1E8E8;
+	border: 1px solid transparent;
 	border-radius: 4px;
 	box-shadow: none;
 	background: transparent;
@@ -3072,6 +3071,66 @@ a.ilink.yours {
 	color: #DDD;
 }
 
+.dark .userbar .username {
+	color: #DDD;
+	text-shadow: 1px 1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, -1px -1px 0 #000;
+}
+
+/* popups */
+
+.dark .ps-popup {
+	background: #0D151E;
+	color: #DDD;
+	border-color: #888;
+
+	box-shadow: 2px 2px 3px rgba(0,0,0,.2);
+}
+
+.dark .popupmenu button,
+.dark .bglist button,
+.dark .avatarlist button {
+	color: #AAA;
+	box-shadow: none;
+}
+.dark .popupmenu button:hover,
+.dark .popupmenu button.sel:hover,
+.dark .bglist button:hover,
+.dark .avatarlist button:hover {
+	border-color: #AAAAAA;
+	background-color: #AAAAAA;
+	color: black;
+}
+
+.dark .ps-overlay {
+	background: rgba(40, 40, 40, .5);
+}
+
+/* semi-generic */
+
+.dark .select, .dark .team {
+	border-color: #888888;
+	box-shadow: inset 0 1px 0 #FFFFFF;
+	background: linear-gradient(to bottom,  #ccd4dc,  #96a3b0);
+	color: black;
+}
+.dark .select:hover, .dark .team.team-hover {
+	border-color: #555555;
+	background: #FFFFFF;
+	background: linear-gradient(to bottom,  #edf2f8,  #d7e3ec);
+}
+.dark .select:active, .dark .team:active {
+	border-color: #777777;
+	background: #DDDDDD;
+	box-shadow: none;
+	background: linear-gradient(to bottom,  #d1dce6,  #e7edf2);
+}
+.dark .select:disabled {
+	border-color: #999999;
+	background: rgba(200,200,200,.65);
+	color: #555555;
+	box-shadow: none;
+}
+
 /* main menu */
 
 .dark .menugroup {
@@ -3183,9 +3242,6 @@ a.ilink.yours {
 	background: rgba(30, 40, 50, .5);
 	color: #7799BB;
 }
-.dark .ps-popup .roomlist a.ilink {
-	background: rgba(30, 40, 50, 1);
-}
 .dark .roomlist a.ilink:hover {
 	border-color: #AACCEE;
 	background: rgba(30, 40, 50, 1);