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".
This commit is contained in:
Jérémie Astori 2016-05-15 15:56:48 -04:00
parent b3103e8c3f
commit 1af00d30c5
6 changed files with 115 additions and 125 deletions

View File

@ -746,44 +746,44 @@ button,
color: #50a656; 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 { #chat .text {
padding-left: 10px; padding-left: 10px;

View File

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

View File

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

View File

@ -112,10 +112,8 @@ a:hover,
top: 48px; 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; font-weight: bold;
} }

View File

@ -92,50 +92,46 @@ QUIT #d0907d
} }
/* Nicknames */ /* 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 { #chat a {
color: #428bca; color: #428bca;

View File

@ -122,50 +122,46 @@ body {
} }
/* Nicknames */ /* 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 { #chat a {
color: #8c8cbc; color: #8c8cbc;