Invert no-colors CSS class and rename option

This will reset users' preference regarding colored nicknames but it's to make
it more specific than just "colors".

client/css/style.css

@@ -746,44 +746,44 @@ button,
 	color: #50a656;
 }
 
-#chat.no-colors .from .user,
+/* Nicknames */
-#chat.no-colors .text .user,
+
-#chat.no-colors .sidebar .user {
+#chat .user {
-	color: #50a656 !important;
+	color: #50a656;
 }
 
-#chat .user.color-1 { color: #1396cf; }
+#chat.colored-nicks .user.color-1 { color: #1396cf; }
-#chat .user.color-2 { color: #ffcf89; }
+#chat.colored-nicks .user.color-2 { color: #ffcf89; }
-#chat .user.color-3 { color: #00dc5f; }
+#chat.colored-nicks .user.color-3 { color: #00dc5f; }
-#chat .user.color-4 { color: #ff5bc8; }
+#chat.colored-nicks .user.color-4 { color: #ff5bc8; }
-#chat .user.color-5 { color: #ff0e1b; }
+#chat.colored-nicks .user.color-5 { color: #ff0e1b; }
-#chat .user.color-6 { color: #000094; }
+#chat.colored-nicks .user.color-6 { color: #000094; }
-#chat .user.color-7 { color: #006441; }
+#chat.colored-nicks .user.color-7 { color: #006441; }
-#chat .user.color-8 { color: #00566e; }
+#chat.colored-nicks .user.color-8 { color: #00566e; }
-#chat .user.color-9 { color: #ff0078; }
+#chat.colored-nicks .user.color-9 { color: #ff0078; }
-#chat .user.color-10 { color: #15d5a3; }
+#chat.colored-nicks .user.color-10 { color: #15d5a3; }
-#chat .user.color-11 { color: #006b3b; }
+#chat.colored-nicks .user.color-11 { color: #006b3b; }
-#chat .user.color-12 { color: #00c5ba; }
+#chat.colored-nicks .user.color-12 { color: #00c5ba; }
-#chat .user.color-13 { color: #00465b; }
+#chat.colored-nicks .user.color-13 { color: #00465b; }
-#chat .user.color-14 { color: #ffafce; }
+#chat.colored-nicks .user.color-14 { color: #ffafce; }
-#chat .user.color-15 { color: #ff3b12; }
+#chat.colored-nicks .user.color-15 { color: #ff3b12; }
-#chat .user.color-16 { color: #16cc6a; }
+#chat.colored-nicks .user.color-16 { color: #16cc6a; }
-#chat .user.color-17 { color: #ff0072; }
+#chat.colored-nicks .user.color-17 { color: #ff0072; }
-#chat .user.color-18 { color: #ff5877; }
+#chat.colored-nicks .user.color-18 { color: #ff5877; }
-#chat .user.color-19 { color: #ff1753; }
+#chat.colored-nicks .user.color-19 { color: #ff1753; }
-#chat .user.color-20 { color: #007a56; }
+#chat.colored-nicks .user.color-20 { color: #007a56; }
-#chat .user.color-21 { color: #095092; }
+#chat.colored-nicks .user.color-21 { color: #095092; }
-#chat .user.color-22 { color: #000bde; }
+#chat.colored-nicks .user.color-22 { color: #000bde; }
-#chat .user.color-23 { color: #00bca9; }
+#chat.colored-nicks .user.color-23 { color: #00bca9; }
-#chat .user.color-24 { color: #00367d; }
+#chat.colored-nicks .user.color-24 { color: #00367d; }
-#chat .user.color-25 { color: #009ec4; }
+#chat.colored-nicks .user.color-25 { color: #009ec4; }
-#chat .user.color-26 { color: #006119; }
+#chat.colored-nicks .user.color-26 { color: #006119; }
-#chat .user.color-27 { color: #008bb8; }
+#chat.colored-nicks .user.color-27 { color: #008bb8; }
-#chat .user.color-28 { color: #469c00; }
+#chat.colored-nicks .user.color-28 { color: #469c00; }
-#chat .user.color-29 { color: #ff0f95; }
+#chat.colored-nicks .user.color-29 { color: #ff0f95; }
-#chat .user.color-30 { color: #ff7615; }
+#chat.colored-nicks .user.color-30 { color: #ff7615; }
-#chat .user.color-31 { color: #ff4846; }
+#chat.colored-nicks .user.color-31 { color: #ff4846; }
-#chat .user.color-32 { color: #ff199b; }
+#chat.colored-nicks .user.color-32 { color: #ff199b; }
 
 #chat .text {
 	padding-left: 10px;

client/index.html

@@ -41,7 +41,7 @@
 		</footer>
 		<div id="main">
 			<div id="windows">
-				<div id="chat" class="no-colors"></div>
+				<div id="chat"></div>
 				<div id="sign-in" class="window">
 					<div class="header">
 						<button class="lt" aria-label="Toggle channel list"></button>
@@ -211,7 +211,7 @@
 							</div>
 							<div class="col-sm-12">
 								<label class="opt">
-									<input type="checkbox" name="colors">
+									<input type="checkbox" name="coloredNicks">
 									Enable colored nicknames
 								</label>
 							</div>

client/js/lounge.js

@@ -437,7 +437,7 @@ $(function() {
 	var settings = $("#settings");
 	var options = $.extend({
 		desktopNotifications: false,
-		colors: false,
+		coloredNicks: true,
 		join: true,
 		links: true,
 		mode: true,
@@ -487,8 +487,8 @@ $(function() {
 		].indexOf(name) !== -1) {
 			chat.toggleClass("hide-" + name, !self.prop("checked"));
 		}
-		if (name === "colors") {
+		if (name === "coloredNicks") {
-			chat.toggleClass("no-colors", !self.prop("checked"));
+			chat.toggleClass("colored-nicks", self.prop("checked"));
 		}
 		if (name === "userStyles") {
 			$(document.head).find("#user-specified-css").html(options[name]);

client/themes/crypto.css

@@ -112,10 +112,8 @@ a:hover,
 	top: 48px;
 }
 
-#chat.no-colors .from .user,
+#chat .user {
-#chat.no-colors .text .user,
+	color: black;
-#chat.no-colors .sidebar .user {
-	color: #000 !important;
 	font-weight: bold;
 }
 

client/themes/morning.css

@@ -92,50 +92,46 @@ QUIT #d0907d
 }
 
 /* Nicknames */
-#chat.no-colors .from .user,
+#chat .user {
-#chat.no-colors .text .user,
+	color: #b0bacf;
-#chat.no-colors .sidebar .user {
-	color: #b0bacf !important;
 }
 
-#chat.no-colors .from .user:hover,
+#chat .user:hover {
-#chat.no-colors .text .user:hover,
+	color: #fefefe;
-#chat.no-colors .sidebar .user:hover {
-	color: #fefefe !important;
 }
 
-#chat .user.color-1 { color: #f7adf7; }
+#chat.colored-nicks .user.color-1 { color: #f7adf7; }
-#chat .user.color-2 { color: #abf99f; }
+#chat.colored-nicks .user.color-2 { color: #abf99f; }
-#chat .user.color-3 { color: #86efdc; }
+#chat.colored-nicks .user.color-3 { color: #86efdc; }
-#chat .user.color-4 { color: #b76ee5; }
+#chat.colored-nicks .user.color-4 { color: #b76ee5; }
-#chat .user.color-5 { color: #f9a4b3; }
+#chat.colored-nicks .user.color-5 { color: #f9a4b3; }
-#chat .user.color-6 { color: #f7999a; }
+#chat.colored-nicks .user.color-6 { color: #f7999a; }
-#chat .user.color-7 { color: #f497b9; }
+#chat.colored-nicks .user.color-7 { color: #f497b9; }
-#chat .user.color-8 { color: #f9a9d7; }
+#chat.colored-nicks .user.color-8 { color: #f9a9d7; }
-#chat .user.color-9 { color: #7fa2e2; }
+#chat.colored-nicks .user.color-9 { color: #7fa2e2; }
-#chat .user.color-10 { color: #a8b8ff; }
+#chat.colored-nicks .user.color-10 { color: #a8b8ff; }
-#chat .user.color-11 { color: #ad88fc; }
+#chat.colored-nicks .user.color-11 { color: #ad88fc; }
-#chat .user.color-12 { color: #f4aead; }
+#chat.colored-nicks .user.color-12 { color: #f4aead; }
-#chat .user.color-13 { color: #fc71ab; }
+#chat.colored-nicks .user.color-13 { color: #fc71ab; }
-#chat .user.color-14 { color: #ff72e0; }
+#chat.colored-nicks .user.color-14 { color: #ff72e0; }
-#chat .user.color-15 { color: #8cb6ea; }
+#chat.colored-nicks .user.color-15 { color: #8cb6ea; }
-#chat .user.color-16 { color: #f9857c; }
+#chat.colored-nicks .user.color-16 { color: #f9857c; }
-#chat .user.color-17 { color: #ed9b82; }
+#chat.colored-nicks .user.color-17 { color: #ed9b82; }
-#chat .user.color-18 { color: #8df484; }
+#chat.colored-nicks .user.color-18 { color: #8df484; }
-#chat .user.color-19 { color: #ffcce3; }
+#chat.colored-nicks .user.color-19 { color: #ffcce3; }
-#chat .user.color-20 { color: #efcc81; }
+#chat.colored-nicks .user.color-20 { color: #efcc81; }
-#chat .user.color-21 { color: #90a1ed; }
+#chat.colored-nicks .user.color-21 { color: #90a1ed; }
-#chat .user.color-22 { color: #f4d484; }
+#chat.colored-nicks .user.color-22 { color: #f4d484; }
-#chat .user.color-23 { color: #97ea70; }
+#chat.colored-nicks .user.color-23 { color: #97ea70; }
-#chat .user.color-24 { color: #fcbbba; }
+#chat.colored-nicks .user.color-24 { color: #fcbbba; }
-#chat .user.color-25 { color: #eef975; }
+#chat.colored-nicks .user.color-25 { color: #eef975; }
-#chat .user.color-26 { color: #c7ff93; }
+#chat.colored-nicks .user.color-26 { color: #c7ff93; }
-#chat .user.color-27 { color: #ffade1; }
+#chat.colored-nicks .user.color-27 { color: #ffade1; }
-#chat .user.color-28 { color: #98ecf2; }
+#chat.colored-nicks .user.color-28 { color: #98ecf2; }
-#chat .user.color-29 { color: #7187f2; }
+#chat.colored-nicks .user.color-29 { color: #7187f2; }
-#chat .user.color-30 { color: #9676e2; }
+#chat.colored-nicks .user.color-30 { color: #9676e2; }
-#chat .user.color-31 { color: #f2a4eb; }
+#chat.colored-nicks .user.color-31 { color: #f2a4eb; }
-#chat .user.color-32 { color: #85f27d; }
+#chat.colored-nicks .user.color-32 { color: #85f27d; }
 
 #chat a {
 	color: #428bca;

client/themes/zenburn.css

@@ -122,50 +122,46 @@ body {
 }
 
 /* Nicknames */
-#chat.no-colors .from .user,
+#chat .user {
-#chat.no-colors .text .user,
+	color: #bc8cbc;
-#chat.no-colors .sidebar .user {
-	color: #bc8cbc !important;
 }
 
-#chat.no-colors .from .user:hover,
+#chat .user:hover {
-#chat.no-colors .text .user:hover,
+	color: #dcdccc;
-#chat.no-colors .sidebar .user:hover {
-	color: #dcdccc !important;
 }
 
-#chat .user.color-1 { color: #f7adf7; }
+#chat.colored-nicks .user.color-1 { color: #f7adf7; }
-#chat .user.color-2 { color: #abf99f; }
+#chat.colored-nicks .user.color-2 { color: #abf99f; }
-#chat .user.color-3 { color: #86efdc; }
+#chat.colored-nicks .user.color-3 { color: #86efdc; }
-#chat .user.color-4 { color: #b76ee5; }
+#chat.colored-nicks .user.color-4 { color: #b76ee5; }
-#chat .user.color-5 { color: #f9a4b3; }
+#chat.colored-nicks .user.color-5 { color: #f9a4b3; }
-#chat .user.color-6 { color: #f7999a; }
+#chat.colored-nicks .user.color-6 { color: #f7999a; }
-#chat .user.color-7 { color: #f497b9; }
+#chat.colored-nicks .user.color-7 { color: #f497b9; }
-#chat .user.color-8 { color: #f9a9d7; }
+#chat.colored-nicks .user.color-8 { color: #f9a9d7; }
-#chat .user.color-9 { color: #7fa2e2; }
+#chat.colored-nicks .user.color-9 { color: #7fa2e2; }
-#chat .user.color-10 { color: #a8b8ff; }
+#chat.colored-nicks .user.color-10 { color: #a8b8ff; }
-#chat .user.color-11 { color: #ad88fc; }
+#chat.colored-nicks .user.color-11 { color: #ad88fc; }
-#chat .user.color-12 { color: #f4aead; }
+#chat.colored-nicks .user.color-12 { color: #f4aead; }
-#chat .user.color-13 { color: #fc71ab; }
+#chat.colored-nicks .user.color-13 { color: #fc71ab; }
-#chat .user.color-14 { color: #ff72e0; }
+#chat.colored-nicks .user.color-14 { color: #ff72e0; }
-#chat .user.color-15 { color: #8cb6ea; }
+#chat.colored-nicks .user.color-15 { color: #8cb6ea; }
-#chat .user.color-16 { color: #f9857c; }
+#chat.colored-nicks .user.color-16 { color: #f9857c; }
-#chat .user.color-17 { color: #ed9b82; }
+#chat.colored-nicks .user.color-17 { color: #ed9b82; }
-#chat .user.color-18 { color: #8df484; }
+#chat.colored-nicks .user.color-18 { color: #8df484; }
-#chat .user.color-19 { color: #ffcce3; }
+#chat.colored-nicks .user.color-19 { color: #ffcce3; }
-#chat .user.color-20 { color: #efcc81; }
+#chat.colored-nicks .user.color-20 { color: #efcc81; }
-#chat .user.color-21 { color: #90a1ed; }
+#chat.colored-nicks .user.color-21 { color: #90a1ed; }
-#chat .user.color-22 { color: #f4d484; }
+#chat.colored-nicks .user.color-22 { color: #f4d484; }
-#chat .user.color-23 { color: #97ea70; }
+#chat.colored-nicks .user.color-23 { color: #97ea70; }
-#chat .user.color-24 { color: #fcbbba; }
+#chat.colored-nicks .user.color-24 { color: #fcbbba; }
-#chat .user.color-25 { color: #eef975; }
+#chat.colored-nicks .user.color-25 { color: #eef975; }
-#chat .user.color-26 { color: #c7ff93; }
+#chat.colored-nicks .user.color-26 { color: #c7ff93; }
-#chat .user.color-27 { color: #ffade1; }
+#chat.colored-nicks .user.color-27 { color: #ffade1; }
-#chat .user.color-28 { color: #98ecf2; }
+#chat.colored-nicks .user.color-28 { color: #98ecf2; }
-#chat .user.color-29 { color: #7187f2; }
+#chat.colored-nicks .user.color-29 { color: #7187f2; }
-#chat .user.color-30 { color: #9676e2; }
+#chat.colored-nicks .user.color-30 { color: #9676e2; }
-#chat .user.color-31 { color: #f2a4eb; }
+#chat.colored-nicks .user.color-31 { color: #f2a4eb; }
-#chat .user.color-32 { color: #85f27d; }
+#chat.colored-nicks .user.color-32 { color: #85f27d; }
 
 #chat a {
 	color: #8c8cbc;