From 56c2530f2c9983d8d0c8011fbcfbd73b8392852e Mon Sep 17 00:00:00 2001
From: Pavel Djundik <github@xpaw.me>
Date: Sun, 28 Feb 2016 09:54:10 +0200
Subject: [PATCH] Add an ability to customise CSS on the client

---
 client/index.html   |  7 +++++++
 client/js/lounge.js | 23 +++++++++++++++++++++--
 2 files changed, 28 insertions(+), 2 deletions(-)

diff --git a/client/index.html b/client/index.html
index 841a8174..ff2e2844 100644
--- a/client/index.html
+++ b/client/index.html
@@ -15,6 +15,7 @@
 	<link rel="stylesheet" href="css/bootstrap.css">
 	<link rel="stylesheet" href="css/style.css">
 	<link id="theme" rel="stylesheet" href="<%= theme %>">
+	<style id="user-specified-css"></style>
 
 	<link rel="shortcut icon" href="img/favicon.png">
 	<link rel="icon" sizes="192x192" href="img/touch-icon-192x192.png">
@@ -290,6 +291,12 @@
 								</form>
 							</div>
 							<% } %>
+							<div class="col-sm-12">
+								<h2>Custom Stylesheet</h2>
+							</div>
+							<div class="col-sm-12">
+								<textarea class="input" name="userStyles" id="user-specified-css-input" placeholder="You can override any style with CSS here"></textarea>
+							</div>
 							<div class="col-sm-12">
 								<h2>About The Lounge</h2>
 							</div>
diff --git a/client/js/lounge.js b/client/js/lounge.js
index 4f8273c6..ed1397b7 100644
--- a/client/js/lounge.js
+++ b/client/js/lounge.js
@@ -426,6 +426,7 @@ $(function() {
 		users.data("nicks", nicks);
 	});
 
+	var userStyles = $("#user-specified-css");
 	var settings = $("#settings");
 	var options = $.extend({
 		badge: false,
@@ -440,19 +441,34 @@ $(function() {
 		thumbnails: true,
 		quit: true,
 		notifyAllMessages: false,
+		userStyles: userStyles.text(),
 	}, JSON.parse(window.localStorage.getItem("settings")));
 
 	for (var i in options) {
+		if (i === "userStyles") {
+			if (!/[\?&]nocss/.test(window.location.search)) {
+				$(document.head).find("#user-specified-css").html(options[i]);
+			}
+			settings.find("#user-specified-css-input").val(options[i]);
+			continue;
+		}
 		if (options[i]) {
 			settings.find("input[name=" + i + "]").prop("checked", true);
 		}
 	}
 
-	settings.on("change", "input", function() {
+	settings.on("change", "input, textarea", function() {
 		var self = $(this);
 		var name = self.attr("name");
-		options[name] = self.prop("checked");
+
+		if (self.attr("type") === "checkbox") {
+			options[name] = self.prop("checked");
+		} else {
+			options[name] = self.val();
+		}
+
 		window.localStorage.setItem("settings", JSON.stringify(options));
+
 		if ([
 			"join",
 			"mode",
@@ -467,6 +483,9 @@ $(function() {
 		if (name === "colors") {
 			chat.toggleClass("no-colors", !self.prop("checked"));
 		}
+		if (name === "userStyles") {
+			$(document.head).find("#user-specified-css").html(options[name]);
+		}
 	}).find("input")
 		.trigger("change");