From f814d7369c1177584a80c1b59aec5d4e44a04c0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= <jeremie@astori.fr>
Date: Mon, 30 Apr 2018 00:57:03 -0400
Subject: [PATCH] Introduce some CSS variables to simplify writing themes that
 stay close to the default style

---
 client/css/style.css      | 41 ++++++++++++++++++++----------
 client/themes/morning.css | 52 ++++-----------------------------------
 2 files changed, 33 insertions(+), 60 deletions(-)

diff --git a/client/css/style.css b/client/css/style.css
index a3e704b9..1ac81b17 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -2,8 +2,23 @@
 @import "bootstrap.css";
 
 :root {
+	/* Main text color */
+	--body-color: #222;
+
+	/* Background color of the whole page */
+	--body-bg-color: #415364;
+
 	/* Links and link-looking buttons */
 	--link-color: #50a656;
+
+	/* Background color of the main window */
+	--window-bg-color: #fff;
+
+	/* Color of the date marker, text and separator */
+	--date-marker-color: rgba(0, 107, 59, 0.5);
+
+	/* Color of the unread message marker, text and separator */
+	--unread-marker-color: rgba(231, 76, 60, 0.5);
 }
 
 /* Samsung Internet <7.0 and Microsoft Edge support (yes, both of them use webkit prefix) */
@@ -23,8 +38,8 @@ body {
 }
 
 body {
-	background: #415364;
-	color: #222;
+	background: var(--body-bg-color);
+	color: var(--body-color);
 	font: 16px -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 	margin: 0;
 	-webkit-user-select: none;
@@ -481,7 +496,7 @@ kbd {
 	width: 10px;
 	height: 10px;
 	border-radius: 50%;
-	border: 2px solid white;
+	border: 2px solid var(--window-bg-color);
 	opacity: 0;
 	transition: opacity 0.2s;
 	background-clip: padding-box; /* Fix border-radius bleeding color */
@@ -866,7 +881,7 @@ background on hover (unless active) */
 }
 
 #windows .window {
-	background: #fff;
+	background: var(--window-bg-color);
 	display: none;
 	overflow-y: auto;
 	height: 100%;
@@ -1036,7 +1051,6 @@ background on hover (unless active) */
 }
 
 #chat .userlist {
-	background: #fff;
 	border-left: 1px solid #e7e7e7;
 	width: 180px;
 	display: flex;
@@ -1113,13 +1127,13 @@ background on hover (unless active) */
 	left: 0;
 	right: 0;
 	top: 50%;
-	border-top: 1px solid rgba(231, 76, 60, 0.5);
+	border-top: 1px solid var(--unread-marker-color);
 }
 
 #chat .unread-marker-text::before {
 	content: "New messages";
-	background-color: white;
-	color: rgba(231, 76, 60, 0.5);
+	background-color: var(--window-bg-color);
+	color: var(--unread-marker-color);
 	padding: 0 10px;
 }
 
@@ -1143,13 +1157,13 @@ background on hover (unless active) */
 	left: 0;
 	right: 0;
 	top: 50%;
-	border-top: 1px solid rgba(0, 107, 59, 0.5);
+	border-top: 1px solid var(--date-marker-color);
 }
 
 #chat .date-marker-text::before {
 	content: attr(data-label);
-	background-color: white;
-	color: rgba(0, 107, 59, 0.5);
+	background-color: var(--window-bg-color);
+	color: var(--date-marker-color);
 	padding: 0 10px;
 }
 
@@ -1489,7 +1503,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 }
 
 #chat .userlist .search {
-	color: #222;
+	color: var(--body-color);
 	border: 0;
 	background: none;
 	font: inherit;
@@ -2309,7 +2323,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	}
 
 	#sidebar {
-		background: #415364;
+		background: var(--body-bg-color);
 		height: 100%;
 		position: absolute;
 		left: -220px;
@@ -2370,6 +2384,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	}
 
 	#chat .userlist {
+		background-color: var(--window-bg-color);
 		height: 100%;
 		position: absolute;
 		right: 0;
diff --git a/client/themes/morning.css b/client/themes/morning.css
index dbeccc1a..43ce78ba 100644
--- a/client/themes/morning.css
+++ b/client/themes/morning.css
@@ -1,11 +1,11 @@
 @import 'default.css';
 
 :root {
+	--body-color: #f3f3f3;
 	--link-color: #77abd9;
-}
-
-body {
-	color: #f3f3f3;
+	--window-bg-color: #303e4a;
+	--date-marker-color: #97ea70;
+	--unread-marker-color: #f92772;
 }
 
 #windows .logo {
@@ -16,13 +16,6 @@ body {
 	display: inline-block;
 }
 
-#main,
-#chat .userlist,
-#windows .chan,
-#windows .window {
-	background: #303e4a;
-}
-
 #chat .userlist .count {
 	background-color: #28333d;
 }
@@ -31,10 +24,6 @@ body {
 	color: #b7c5d1;
 }
 
-#chat .userlist .search {
-	color: #f3f3f3;
-}
-
 /* Borders */
 #chat .content,
 #windows #chat .header,
@@ -44,10 +33,6 @@ body {
 }
 
 /* User list */
-#chat .user-mode {
-	color: #f3f3f3;
-}
-
 #chat .userlist .user.active {
 	background-color: #28333d;
 }
@@ -99,7 +84,7 @@ body {
 #windows #form .input {
 	background-color: #28333d;
 	border-color: #28333d;
-	color: #f3f3f3;
+	color: var(--body-color);
 }
 
 #form #nick {
@@ -115,10 +100,6 @@ body {
 	color: #b7c5d1;
 }
 
-#windows .header {
-	color: #fff;
-}
-
 #windows .header .topic {
 	color: #b7c5d1;
 }
@@ -130,29 +111,6 @@ body {
 	color: #b7c5d1;
 }
 
-/* Notification dot on the top right corner of the menu icon */
-#viewport .lt::after {
-	border-color: #303e4a;
-}
-
-#chat .unread-marker-text::before {
-	background-color: #303e4a;
-	border-color: #f92772;
-}
-
-#chat .unread-marker::before {
-	border-color: #f92772;
-}
-
-#chat .date-marker::before {
-	border-color: #97ea70;
-}
-
-#chat .date-marker-text::before {
-	background-color: #303e4a;
-	color: #97ea70;
-}
-
 /* Setup text colors */
 #chat .message {
 	color: #f3f3f3;