Gray style to load as to not blind anyoneHEADmaster

3 files changed, 104 insertions, 6 deletions

diff --git a/client.html b/client.html
index f1871f7..43d221c 100644
--- a/client.html
+++ b/client.html
@@ -16,7 +16,7 @@
 		<link rel="stylesheet" type="text/css" href="styles/client/mobile.css">
 		<link rel="stylesheet" type="text/css" href="styles/client/card.css">
 
-		<link id="theme" rel="stylesheet" type="text/css" href="styles/themes/colors-base.css">
+		<link id="theme" rel="stylesheet" type="text/css" href="styles/themes/colors-gray.css">
 
 		<link rel="icon" sizes="32x32" href="images/wc-icon-32.png">
 		<link rel="icon" sizes="48x48" href="images/wc-icon-48.png">
@@ -124,4 +124,4 @@
 		<button class="toggle-table" onclick="game.table.toggleTable()"></button>
 	</body>
 
-</html>
\ No newline at end of file
+</html>
diff --git a/index.html b/index.html
index eeb0625..8515859 100644
--- a/index.html
+++ b/index.html
@@ -20,7 +20,7 @@
 
 		<link rel="stylesheet" type="text/css" href="styles/input.css">
 
-		<link id="theme" rel="stylesheet" type="text/css" href="styles/themes/colors-base.css">
+		<link id="theme" rel="stylesheet" type="text/css" href="styles/themes/colors-gray.css">
 
 		<script src="scripts/gui/input.js"></script>
 
@@ -40,16 +40,16 @@
 
 			<div id="themes">
 			</div>
+
 			<div>
 				<button onclick="addTheme()">Add Theme</button>
 				<button onclick="remTheme()">Remove Theme</button>
 			</div>
 
 			<div id="prev" class="prev">
-
 			</div>
 
-			<div style="color: red;">This site uses cookies to store themes and previous servers.  That is all.</div>
+			<div>This site uses cookies to store themes and previous servers.  That is all.</div>
 			<div>You may choose to submit user generated data over this site (Such as player name or text chat).  This site stores none of that data.  Please check with the server owner for privacy policy and/or any legal issue.</div>
 			
 			<a style="border: none; padding: 0; display: contents; margin: 0;" href="http://vanilla-js.com/"><img style="margin-top: 10px;" src="images/vanilla.png"></a>
@@ -210,4 +210,4 @@
 			
 		</script>
 	</body>
-</html>
\ No newline at end of file
+</html>
diff --git a/styles/themes/colors-gray.css b/styles/themes/colors-gray.css
new file mode 100644
index 0000000..57133d3
--- /dev/null
+++ b/styles/themes/colors-gray.css
@@ -0,0 +1,98 @@
+* {
+	/*  Main  */
+	--main-bg: #808080;
+	--main-color: #808080;
+
+	/*  Server  */
+	--server-bg-ok: #808080;
+	--server-bg-loading: #808080;
+	--server-bg-closed: #808080;
+	--server-color-ok: #808080;
+	--server-color-loading: #808080;
+	--server-color-closed: #808080;
+
+	/*  Gui and topbar  */
+	--gui-bg-main: #808080;
+	--gui-bg-game: #808080;
+	--gui-color-game: #808080;
+	--gui-shadow-game: #808080;
+
+	--top-border: #808080;
+	--top-bg: #808080;
+	--top-bg-button: #808080;
+	--top-bg-button-hover: #808080;
+	--top-bg-button-active: #808080;
+	--top-color-button: #808080;
+	--top-color-button-hover: #808080;
+	--top-color-button-active: #808080;
+
+	/*  Table  */
+	--table-bg: #808080;
+
+	/*  Card defaults  */
+	--card-color: #808080;
+	--card-bg: #808080;
+	--card-border: #808080;
+	--card-hover: #808080;
+
+	--deck-shadow: #808080;
+	--deck-hover: #808080;
+
+	/*  Input  */
+
+	--input-color-text: #808080;
+	--input-color-text-hover: #808080;
+	--input-color-text-active: #808080;
+	--input-bg-text: #808080;
+	--input-bg-text-hover: #808080;
+	--input-bg-text-active: #808080;
+	--input-border-text: #808080;
+	--input-border-text-hover: #808080;
+	--input-border-text-active: #808080;
+
+	--input-color-button: #808080;
+	--input-color-button-hover: #808080;
+	--input-color-button-active: #808080;
+	--input-bg-button: #808080;
+	--input-bg-button-hover: #808080;
+	--input-bg-button-active: #808080;
+
+	--input-bg-bool: #808080;
+	--input-bg-bool-hover: #808080;
+	--input-bg-bool-active: #808080;
+	--input-border-bool: #808080;
+	--input-border-bool-hover: #808080;
+	--input-border-bool-active: #808080;
+	--input-border-bool-true: #808080;
+
+	--input-color-select: #808080;
+	--input-color-select-hover: #808080;
+	--input-color-select-active: #808080;
+	--input-bg-select: #808080;
+	--input-bg-select-hover: #808080;
+	--input-bg-select-active: #808080;
+	--input-border-select: #808080;
+	--input-border-select-hover: #808080;
+	--input-border-select-active: #808080;
+
+	--input-bg-multi: #808080;
+	--input-bg-multi-hover: #808080;
+
+	/*  Chat  */
+	--chat-color: #808080;
+	--chat-bg: #808080;
+
+	--chat-bg-text: #808080;
+
+	--chat-bg-input: #808080;
+	--chat-bg-input-hover: #808080;
+	--chat-bg-input-active: #808080;
+
+	--chat-bg-inactive: #808080;
+	--chat-bg-inactive-hover: #808080;
+	--chat-bg-inactive-active: #808080;
+
+	--chat-bg-active: #808080;
+	--chat-bg-active-hover: #808080;
+	--chat-bg-active-active: #808080;
+}