diff --git a/README.md b/README.md
index 1d7d732..84afe81 100644
--- a/README.md
+++ b/README.md
@@ -16,7 +16,6 @@ The server will look for passwords in `webirc.data.json`. The format is: `"serve
###The (non-complete) TODO List (of things left to do)
-* [MEDIUM] Theme engine
* [NORMAL] CAP negotiation
* [LOW] Better input
* [LOW] irc:// URL scheme handling
diff --git a/public/css/layout.css b/public/css/layout.css
new file mode 100644
index 0000000..c1b035a
--- /dev/null
+++ b/public/css/layout.css
@@ -0,0 +1,345 @@
+body {
+ margin: 0;
+ padding: 0;
+ font-family: Open Sans, Everson Mono, Helvetica;
+}
+.grade1 {
+ margin-bottom: 0;
+ margin-top: 0;
+ display: block;
+ text-align: center;
+}
+.grade2 {
+ margin-bottom: 0;
+ margin-top: 20px;
+ display: block;
+ text-align: center;
+}
+.grade3 {
+ margin-bottom: 0;
+ margin-top: 20px;
+ display: block;
+ text-align: center;
+}
+.ircclient {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+.ircclient input[type=text],
+.ircclient input[type=number],
+.ircclient input[type=password] {
+ padding: 8px;
+ width: 300px;
+ border-radius: 5px;
+}
+.ircclient input[type="submit"] {
+ width: 318px;
+ padding: 12px;
+ margin-top: 20px;
+ display: block;
+ border-radius: 4px;
+ font-size: 120%;
+ font-weight: bold;
+ text-transform: uppercase;
+ cursor: pointer;
+}
+.ircclient .coverwindow {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+.ircclient .coverwindow#authdialog {
+ z-index: 100;
+}
+.ircclient .coverwindow .wrapper {
+ width: 320px;
+ margin: auto;
+ margin-top: 5%;
+ padding: 15px;
+}
+.ircclient .coverwindow .wrapper label {
+ display: block;
+ font-size: 80%;
+ margin-top: 5px;
+}
+.ircclient .coverwindow .wrapper label.autosize {
+ width: auto;
+ display: inline-block !important;
+ font-size: 90% !important;
+ margin-bottom: 10px;
+}
+.ircclient #chat {
+ overflow: hidden;
+}
+.ircclient #chat .ircwrapper {
+ position: absolute;
+ width: 100%;
+ height: 100%;
+}
+.ircclient #chat .ircwrapper .toolbar {
+ height: 56px;
+ position: relative;
+ z-index: 15;
+}
+.ircclient #chat .ircwrapper .toolbar .open_settings {
+ width: 36px;
+ height: 36px;
+ display: inline-block;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ cursor: pointer;
+ -webkit-transition: transform 0.2s linear;
+ -moz-transition: transform 0.2s linear;
+ -ms-transition: transform 0.2s linear;
+ -o-transition: transform 0.2s linear;
+ transition: transform 0.2s linear;
+}
+.ircclient #chat .ircwrapper .toolbar .open_settings:hover {
+ transform: rotateZ(-90deg);
+}
+.ircclient #chat .ircwrapper .toolbar .tabby {
+ display: inline-block;
+ height: 56px;
+ position: absolute;
+ right: 45px;
+ left: 0;
+ white-space: nowrap;
+ overflow-x: auto;
+ overflow-y: hidden;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab {
+ display: inline-block;
+ min-width: 60px;
+ height: 25px;
+ margin: 5px;
+ margin-right: 0;
+ padding: 10px;
+ line-height: 25px;
+ -webkit-transition: background-color 0.2s linear;
+ -moz-transition: background-color 0.2s linear;
+ -ms-transition: background-color 0.2s linear;
+ -o-transition: background-color 0.2s linear;
+ transition: background-color 0.2s linear;
+ border-radius: 5px;
+ cursor: pointer;
+ font-weight: 600;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #unread {
+ display: inline-block;
+ min-width: 18px;
+ height: 18px;
+ text-align: center;
+ font-size: 12px;
+ margin: 0 5px;
+ line-height: 20px;
+ border-radius: 100%;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #unread.none {
+ display: none;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #close {
+ display: inline-block;
+ width: 12px;
+ text-align: center;
+ margin-left: 5px;
+}
+.ircclient #chat .ircwrapper .chatarea {
+ position: absolute;
+ top: 56px;
+ width: 100%;
+ bottom: 46px;
+}
+.ircclient #chat .ircwrapper .chatarea .smsc-nicklistbtn {
+ width: 46px;
+ height: 46px;
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ border-radius: 100%;
+ display: none;
+ opacity: 0.5;
+ cursor: pointer;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar {
+ position: absolute;
+ top: 0;
+ height: 20px;
+ right: 0;
+ left: 0;
+ padding: 12px;
+ display: none;
+ overflow: hidden;
+ z-index: 10;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar:hover {
+ height: auto;
+ max-height: 100px;
+ overflow: auto;
+ word-wrap: break-word;
+}
+.ircclient #chat .ircwrapper .chatarea .letterbox {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow-y: auto;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ padding: 5px;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist {
+ width: 280px;
+ position: absolute;
+ right: 0;
+ padding: 10px;
+ top: 0;
+ bottom: 0;
+ display: none;
+ z-index: 11;
+ overflow: auto;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick {
+ cursor: pointer;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick .nickname {
+ font-size: 120%;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick .prefix {
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ padding: 2px;
+ display: inline-block;
+ border-radius: 4px;
+ text-align: center;
+ margin-right: 5px;
+ font-weight: bold;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick .no-prefix {
+ width: 25px;
+ display: inline-block;
+}
+.ircclient #chat .ircwrapper .chatarea .settings {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 20px;
+ width: 60%;
+ min-width: 360px;
+ margin: auto;
+ overflow: auto;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button {
+ width: 120px;
+ height: 140px;
+ border-radius: 5px;
+ display: inline-block;
+ margin: 5px;
+ cursor: pointer;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button .sampler {
+ width: 90%;
+ height: 75%;
+ margin: 5px;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button .sampler .s_toolbar {
+ width: 100%;
+ height: 40%;
+ display: block;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button .name {
+ width: 100%;
+ text-align: center;
+ display: block;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .grade1,
+.ircclient #chat .ircwrapper .chatarea .settings .grade2,
+.ircclient #chat .ircwrapper .chatarea .settings .grade3 {
+ text-align: left;
+}
+.ircclient #chat .ircwrapper .chatarea.vnicks .nicklist {
+ display: block;
+}
+.ircclient #chat .ircwrapper .chatarea.vnicks .letterbox {
+ right: 301px;
+}
+.ircclient #chat .ircwrapper .chatarea.vnicks .topicbar {
+ right: 301px;
+}
+.ircclient #chat .ircwrapper .chatarea.vtopic .topicbar {
+ display: block;
+}
+.ircclient #chat .ircwrapper .chatarea.vtopic .letterbox {
+ top: 45px;
+}
+.ircclient #chat .ircwrapper .input {
+ position: absolute;
+ bottom: 0;
+ height: 46px;
+ width: 100%;
+}
+.ircclient #chat .ircwrapper .input .my_nickname {
+ margin: 5px;
+ padding: 7px;
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+ padding-right: 20px;
+ margin-right: 0;
+ width: 183px;
+ overflow: hidden;
+}
+.ircclient #chat .ircwrapper .input .inputwrapper {
+ display: inline-block;
+ position: absolute;
+ margin: 5px 0;
+ left: 210px;
+ right: 55px;
+ top: 0;
+}
+.ircclient #chat .ircwrapper .input .inputwrapper input {
+ width: 100%;
+ padding: 6px;
+ font-size: 120%;
+ border-left: 0;
+}
+.ircclient #chat .ircwrapper .input .sendbutton {
+ width: 32px;
+ position: absolute;
+ height: 32px;
+ float: right;
+ top: 5px;
+ right: 5px;
+ cursor: pointer;
+}
+@media all and (max-width: 600px) {
+ .vnicks .nicklist {
+ display: none !important;
+ }
+ .vnicks .letterbox {
+ right: 0 !important;
+ }
+ .vnicks .topicbar {
+ right: 0 !important;
+ }
+ .vnicks.vopentrig .nicklist {
+ display: block !important;
+ }
+ .vnicks.vopentrig .topicbar {
+ right: 45px;
+ }
+ .vnicks .smsc-nicklistbtn {
+ z-index: 12;
+ display: block !important;
+ }
+ .my_nickname {
+ display: none;
+ }
+ .inputwrapper {
+ left: 38px !important;
+ }
+}
diff --git a/public/css/theme_default.css b/public/css/theme_default.css
new file mode 100644
index 0000000..3a68ffc
--- /dev/null
+++ b/public/css/theme_default.css
@@ -0,0 +1,453 @@
+.grade1 {
+ font-size: 200%;
+ color: #00bcd4;
+}
+.grade2 {
+ font-size: 150%;
+ color: #00bcd4;
+}
+.grade3 {
+ font-size: 120%;
+ color: #00bcd4;
+}
+.ircclient {
+ background: #fff;
+ background: -moz-linear-gradient(top, #fff 0%, #e5e5e5 100%);
+ background: -webkit-linear-gradient(top, #fff 0%, #e5e5e5 100%);
+ background: linear-gradient(to bottom, #fff 0%, #e5e5e5 100%);
+}
+.ircclient input[type=text],
+.ircclient input[type=number],
+.ircclient input[type=password] {
+ padding: 8px;
+ width: 300px;
+ border-radius: 5px;
+ border: 1px solid #d2d2d2;
+ -webkit-box-shadow: inset 2px 2px 4px #dcdcdc;
+ -moz-box-shadow: inset 2px 2px 4px #dcdcdc;
+ box-shadow: inset 2px 2px 4px #dcdcdc;
+}
+.ircclient input[type="submit"] {
+ background: #87e0fd;
+ background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+ background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+ background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+ border: 1px solid #2196f3;
+ color: #fff;
+ font-size: 120%;
+}
+.ircclient input[type="submit"]:hover {
+ background: #c4effc;
+ background: -moz-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+ background: -webkit-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+ background: linear-gradient(to bottom, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+}
+.ircclient .coverwindow .wrapper {
+ background-color: #f7f7f7;
+ border: 1px solid #dadada;
+ -webkit-box-shadow: 4px 4px 18px #d6d6d6;
+ -moz-box-shadow: 4px 4px 18px #d6d6d6;
+ box-shadow: 4px 4px 18px #d6d6d6;
+}
+.ircclient .coverwindow .wrapper .msg.error {
+ color: #f00;
+}
+.ircclient .coverwindow .wrapper label {
+ font-size: 80%;
+ color: #2196f3;
+}
+.ircclient .coverwindow .wrapper label.autosize {
+ font-size: 90% !important;
+}
+.ircclient #chat .ircwrapper .toolbar {
+ background-color: #00c7e0;
+ -webkit-box-shadow: 2px 2px 4px #cecece;
+ -moz-box-shadow: 2px 2px 4px #cecece;
+ box-shadow: 2px 2px 4px #cecece;
+}
+.ircclient #chat .ircwrapper .toolbar .open_settings {
+ background-image: url("../image/settings.svg");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab {
+ background-color: #29e1ff;
+ border: 1px solid #00d0ea;
+ -webkit-box-shadow: inset 4px 4px 8px #44ebff;
+ -moz-box-shadow: inset 4px 4px 8px #44ebff;
+ box-shadow: inset 4px 4px 8px #44ebff;
+ color: #fff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #unread {
+ background-color: #bf0000;
+ border: 1px solid #b00;
+ -webkit-box-shadow: inset 2px 2px 3px #f00;
+ -moz-box-shadow: inset 2px 2px 3px #f00;
+ box-shadow: inset 2px 2px 3px #f00;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #close {
+ color: #ff3d3d;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab:hover {
+ background-color: #63e9ff;
+ -webkit-box-shadow: inset 4px 4px 8px #86f2ff;
+ -moz-box-shadow: inset 4px 4px 8px #86f2ff;
+ box-shadow: inset 4px 4px 8px #86f2ff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab.active {
+ background-color: #00b9d8;
+ border: 1px solid #009aad;
+ -webkit-box-shadow: inset 4px 4px 8px #009caf;
+ -moz-box-shadow: inset 4px 4px 8px #009caf;
+ box-shadow: inset 4px 4px 8px #009caf;
+ color: #fff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab.active:hover {
+ background-color: #00c7e8;
+}
+.ircclient #chat .ircwrapper .chatarea .smsc-nicklistbtn {
+ background-image: url("../image/users.svg");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-color: #00bcd4;
+ border: 5px solid #389dbb;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar {
+ background-color: #fff;
+ border-bottom: 1px solid #ddd;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar:hover {
+ height: auto;
+ max-height: 100px;
+ overflow: auto;
+ word-wrap: break-word;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist {
+ border-left: 1px solid #ddd;
+ background-color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick:hover {
+ background-color: #aeebff;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick .prefix {
+ background-color: #05abe0;
+ color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button {
+ background-color: #e0e0e0;
+ border: 1px solid #a7a7a7;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button:hover {
+ background-color: #efefef;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button.selected {
+ border: 2px solid #00a0b5 !important;
+}
+.ircclient #chat .ircwrapper .input {
+ background-color: #00c7e0;
+}
+.ircclient #chat .ircwrapper .input .my_nickname {
+ background-color: #00efef;
+}
+.ircclient #chat .ircwrapper .input .inputwrapper input {
+ border: 1px solid #929292;
+ -webkit-box-shadow: inset 4px 4px 8px #d8d8d8;
+ -moz-box-shadow: inset 4px 4px 8px #d8d8d8;
+ box-shadow: inset 4px 4px 8px #d8d8d8;
+}
+.ircclient #chat .ircwrapper .input .sendbutton {
+ background-image: url("../image/send.svg");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.message.type_simple.mentioned {
+ background-color: #aeebff;
+}
+.message.type_simple .timestamp {
+ color: #696969;
+}
+.message.type_simple .timestamp:before {
+ color: #607d8b;
+ content: "[";
+}
+.message.type_simple .timestamp:after {
+ color: #607d8b;
+ content: "]";
+}
+.message.type_simple .sender {
+ color: #3f51b5;
+}
+.message.type_simple .sender:before {
+ content: "<";
+}
+.message.type_simple .sender:after {
+ content: ">";
+}
+.message.type_simple .arrowin,
+.message.type_simple .arrowout {
+ font-weight: bolder;
+}
+.message.type_simple .channel {
+ font-weight: bold;
+ color: #a0a0a0;
+}
+.message.type_simple .m_listentry .channel {
+ min-width: 120px;
+ display: inline-block;
+}
+.message.type_simple .m_listentry .usercount {
+ display: inline-block;
+ min-width: 45px;
+ text-align: center;
+}
+.message .reason:before,
+.message .hostmask:before {
+ content: "(";
+}
+.message .reason:after,
+.message .hostmask:after {
+ content: ")";
+}
+.message .reason:before,
+.message .hostmask:before,
+.message .reason:after,
+.message .hostmask:after {
+ color: #009606;
+ font-weight: bold;
+}
+.message .reason {
+ color: #bf0000;
+}
+.message .hostmask {
+ color: #004c88;
+}
+.message .arrowin {
+ color: #00ab00;
+}
+.message .arrowout {
+ color: #dc0f00;
+}
+.message.m_quit,
+.message.m_part,
+.message.m_kick {
+ color: #f00;
+}
+.message.m_join {
+ color: #008000;
+}
+.message.m_topic .content,
+.message.m_names .content {
+ color: #03a9f4;
+ font-weight: bold;
+}
+.message.m_motd .content {
+ font-family: monospace;
+}
+.message.m_nick .content,
+.message.m_notice .content {
+ color: #ff9800;
+ font-weight: bold;
+}
+.message.m_action .actionee {
+ color: #3f51b5;
+}
+.message.m_action .asterisk {
+ color: #e4c000;
+}
+.message.m_mode .content {
+ font-style: italic;
+}
+.message.m_mode .mode {
+ color: #008000;
+}
+.message.m_mode .asterisk {
+ color: #05abe0;
+}
+.message.m_error .content {
+ color: #f00;
+ font-weight: bold;
+}
+.message.m_help .content {
+ color: #008000;
+ font-weight: bold;
+}
+.message .irc-bg00,
+.topicbar .irc-bg00,
+.message .irc-bg0,
+.topicbar .irc-bg0 {
+ background-color: #fff;
+}
+.message .irc-bg01,
+.topicbar .irc-bg01,
+.message .irc-bg1,
+.topicbar .irc-bg1 {
+ background-color: #000;
+}
+.message .irc-bg02,
+.topicbar .irc-bg02,
+.message .irc-bg2,
+.topicbar .irc-bg2 {
+ background-color: #000080;
+}
+.message .irc-bg03,
+.topicbar .irc-bg03,
+.message .irc-bg3,
+.topicbar .irc-bg3 {
+ background-color: #008000;
+}
+.message .irc-bg04,
+.topicbar .irc-bg04,
+.message .irc-bg4,
+.topicbar .irc-bg4 {
+ background-color: #f00;
+}
+.message .irc-bg05,
+.topicbar .irc-bg05,
+.message .irc-bg5,
+.topicbar .irc-bg5 {
+ background-color: #a52a2a;
+}
+.message .irc-bg06,
+.topicbar .irc-bg06,
+.message .irc-bg6,
+.topicbar .irc-bg6 {
+ background-color: #800080;
+}
+.message .irc-bg07,
+.topicbar .irc-bg07,
+.message .irc-bg7,
+.topicbar .irc-bg7 {
+ background-color: #ffa500;
+}
+.message .irc-bg08,
+.topicbar .irc-bg08,
+.message .irc-bg8,
+.topicbar .irc-bg8 {
+ background-color: #ff0;
+}
+.message .irc-bg09,
+.topicbar .irc-bg09,
+.message .irc-bg9,
+.topicbar .irc-bg9 {
+ background-color: #0f0;
+}
+.message .irc-bg10,
+.topicbar .irc-bg10 {
+ background-color: #008080;
+}
+.message .irc-bg11,
+.topicbar .irc-bg11 {
+ background-color: #0ff;
+}
+.message .irc-bg12,
+.topicbar .irc-bg12 {
+ background-color: #00f;
+}
+.message .irc-bg13,
+.topicbar .irc-bg13 {
+ background-color: #ffc0cb;
+}
+.message .irc-bg14,
+.topicbar .irc-bg14 {
+ background-color: #808080;
+}
+.message .irc-bg15,
+.topicbar .irc-bg15 {
+ background-color: #d3d3d3;
+}
+.message .irc-fg00,
+.topicbar .irc-fg00,
+.message .irc-fg0,
+.topicbar .irc-fg0 {
+ color: #fff;
+}
+.message .irc-fg01,
+.topicbar .irc-fg01,
+.message .irc-fg1,
+.topicbar .irc-fg1 {
+ color: #000;
+}
+.message .irc-fg02,
+.topicbar .irc-fg02,
+.message .irc-fg2,
+.topicbar .irc-fg2 {
+ color: #000080;
+}
+.message .irc-fg03,
+.topicbar .irc-fg03,
+.message .irc-fg3,
+.topicbar .irc-fg3 {
+ color: #008000;
+}
+.message .irc-fg04,
+.topicbar .irc-fg04,
+.message .irc-fg4,
+.topicbar .irc-fg4 {
+ color: #f00;
+}
+.message .irc-fg05,
+.topicbar .irc-fg05,
+.message .irc-fg5,
+.topicbar .irc-fg5 {
+ color: #a52a2a;
+}
+.message .irc-fg06,
+.topicbar .irc-fg06,
+.message .irc-fg6,
+.topicbar .irc-fg6 {
+ color: #800080;
+}
+.message .irc-fg07,
+.topicbar .irc-fg07,
+.message .irc-fg7,
+.topicbar .irc-fg7 {
+ color: #ffa500;
+}
+.message .irc-fg08,
+.topicbar .irc-fg08,
+.message .irc-fg8,
+.topicbar .irc-fg8 {
+ color: #dcdc00;
+}
+.message .irc-fg09,
+.topicbar .irc-fg09,
+.message .irc-fg9,
+.topicbar .irc-fg9 {
+ color: #00e600;
+}
+.message .irc-fg10,
+.topicbar .irc-fg10 {
+ color: #008080;
+}
+.message .irc-fg11,
+.topicbar .irc-fg11 {
+ color: #00d2d2;
+}
+.message .irc-fg12,
+.topicbar .irc-fg12 {
+ color: #00f;
+}
+.message .irc-fg13,
+.topicbar .irc-fg13 {
+ color: #ffc0cb;
+}
+.message .irc-fg14,
+.topicbar .irc-fg14 {
+ color: #808080;
+}
+.message .irc-fg15,
+.topicbar .irc-fg15 {
+ color: #d3d3d3;
+}
+.message .irc-bold,
+.topicbar .irc-bold {
+ font-weight: bold;
+}
+.message .irc-italic,
+.topicbar .irc-italic {
+ font-style: italic;
+}
+.message .irc-underline,
+.topicbar .irc-underline {
+ text-decoration: underline;
+}
diff --git a/public/css/theme_night.css b/public/css/theme_night.css
new file mode 100644
index 0000000..6a51dde
--- /dev/null
+++ b/public/css/theme_night.css
@@ -0,0 +1,468 @@
+.grade1 {
+ font-size: 200%;
+ color: #00bcd4;
+}
+.grade2 {
+ font-size: 150%;
+ color: #00bcd4;
+}
+.grade3 {
+ font-size: 120%;
+ color: #00bcd4;
+}
+a {
+ color: #23e7ff;
+}
+a:hover {
+ color: #5dedff;
+}
+.ircclient {
+ background: #1d1d1d;
+}
+.ircclient input[type=text],
+.ircclient input[type=number],
+.ircclient input[type=password] {
+ padding: 8px;
+ width: 300px;
+ border-radius: 5px;
+ border: 1px solid #d2d2d2;
+ -webkit-box-shadow: inset 2px 2px 4px #dcdcdc;
+ -moz-box-shadow: inset 2px 2px 4px #dcdcdc;
+ box-shadow: inset 2px 2px 4px #dcdcdc;
+}
+.ircclient input[type="submit"] {
+ background: #87e0fd;
+ background: -moz-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+ background: -webkit-linear-gradient(top, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+ background: linear-gradient(to bottom, #87e0fd 0%, #53cbf1 40%, #05abe0 100%);
+ border: 1px solid #2196f3;
+ color: #fff;
+ font-size: 120%;
+}
+.ircclient input[type="submit"]:hover {
+ background: #c4effc;
+ background: -moz-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+ background: -webkit-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+ background: linear-gradient(to bottom, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
+}
+.ircclient .coverwindow .wrapper {
+ background-color: #3e3e3e;
+ border: 1px solid #171717;
+ -webkit-box-shadow: 4px 4px 18px #383838;
+ -moz-box-shadow: 4px 4px 18px #383838;
+ box-shadow: 4px 4px 18px #383838;
+ color: #fff;
+}
+.ircclient .coverwindow .wrapper .msg.error {
+ color: #f00;
+}
+.ircclient .coverwindow .wrapper label {
+ font-size: 80%;
+ color: #67bcff;
+}
+.ircclient .coverwindow .wrapper label.autosize {
+ font-size: 90% !important;
+}
+.ircclient #chat .ircwrapper .toolbar {
+ background-color: #008e8e;
+ -webkit-box-shadow: 2px 2px 4px #585858;
+ -moz-box-shadow: 2px 2px 4px #585858;
+ box-shadow: 2px 2px 4px #585858;
+}
+.ircclient #chat .ircwrapper .toolbar .open_settings {
+ background-image: url("../image/settings.svg");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab {
+ background-color: #00bfde;
+ border: 1px solid #0092a5;
+ -webkit-box-shadow: inset 4px 4px 8px #00d1ea;
+ -moz-box-shadow: inset 4px 4px 8px #00d1ea;
+ box-shadow: inset 4px 4px 8px #00d1ea;
+ color: #fff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #unread {
+ background-color: #bf0000;
+ border: 1px solid #b00;
+ -webkit-box-shadow: inset 2px 2px 3px #f00;
+ -moz-box-shadow: inset 2px 2px 3px #f00;
+ box-shadow: inset 2px 2px 3px #f00;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab #close {
+ color: #ff3d3d;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab:hover {
+ background-color: #00dbff;
+ -webkit-box-shadow: inset 4px 4px 8px #23e7ff;
+ -moz-box-shadow: inset 4px 4px 8px #23e7ff;
+ box-shadow: inset 4px 4px 8px #23e7ff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab.active {
+ background-color: #006a7b;
+ border: 1px solid #006a77;
+ -webkit-box-shadow: inset 4px 4px 8px #003940;
+ -moz-box-shadow: inset 4px 4px 8px #003940;
+ box-shadow: inset 4px 4px 8px #003940;
+ color: #fff;
+}
+.ircclient #chat .ircwrapper .toolbar .tabby .tab.active:hover {
+ background-color: #00859a;
+}
+.ircclient #chat .ircwrapper .chatarea .smsc-nicklistbtn {
+ background-image: url("../image/users.svg");
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-color: #00bcd4;
+ border: 5px solid #389dbb;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar {
+ background-color: #2d2d2d;
+ border-bottom: 1px solid #000;
+ color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .topicbar:hover {
+ height: auto;
+ max-height: 100px;
+ overflow: auto;
+ word-wrap: break-word;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist {
+ background-color: #2d2d2d;
+ border-left: 1px solid #000;
+ color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick:hover {
+ background-color: #006282;
+}
+.ircclient #chat .ircwrapper .chatarea .nicklist .nick .prefix {
+ background-color: #05abe0;
+ color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .settings {
+ color: #fff;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button {
+ background-color: #424242;
+ border: 1px solid #444;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button:hover {
+ background-color: #545454;
+}
+.ircclient #chat .ircwrapper .chatarea .settings .theme_button.selected {
+ border: 2px solid #00e2ff !important;
+}
+.ircclient #chat .ircwrapper .input {
+ background-color: #005a5a;
+}
+.ircclient #chat .ircwrapper .input .my_nickname {
+ background-color: #009494;
+ color: #fff;
+}
+.ircclient #chat .ircwrapper .input .inputwrapper input {
+ -webkit-box-shadow: inset 4px 4px 8px #001419;
+ -moz-box-shadow: inset 4px 4px 8px #001419;
+ box-shadow: inset 4px 4px 8px #001419;
+ background-color: #002b36;
+ border: 1px solid #008e8e;
+ color: #fff;
+}
+.ircclient #chat .ircwrapper .input .sendbutton {
+ background-image: url("../image/send.svg");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.message {
+ color: #fff;
+}
+.message.type_simple.mentioned {
+ background-color: #006282;
+}
+.message.type_simple .timestamp {
+ color: #afafaf;
+}
+.message.type_simple .timestamp:before {
+ color: #607d8b;
+ content: "[";
+}
+.message.type_simple .timestamp:after {
+ color: #607d8b;
+ content: "]";
+}
+.message.type_simple .sender {
+ color: #3f51b5;
+}
+.message.type_simple .sender:before {
+ content: "<";
+}
+.message.type_simple .sender:after {
+ content: ">";
+}
+.message.type_simple .arrowin,
+.message.type_simple .arrowout {
+ font-weight: bolder;
+}
+.message.type_simple .channel {
+ font-weight: bold;
+ color: #a0a0a0;
+}
+.message.type_simple .m_listentry .channel {
+ min-width: 120px;
+ display: inline-block;
+}
+.message.type_simple .m_listentry .usercount {
+ display: inline-block;
+ min-width: 45px;
+ text-align: center;
+}
+.message .reason:before,
+.message .hostmask:before {
+ content: "(";
+}
+.message .reason:after,
+.message .hostmask:after {
+ content: ")";
+}
+.message .reason:before,
+.message .hostmask:before,
+.message .reason:after,
+.message .hostmask:after {
+ color: #009606;
+ font-weight: bold;
+}
+.message .reason {
+ color: #bf0000;
+}
+.message .hostmask {
+ color: #1999ff;
+}
+.message .arrowin {
+ color: #00ab00;
+}
+.message .arrowout {
+ color: #dc0f00;
+}
+.message.m_quit,
+.message.m_part,
+.message.m_kick {
+ color: #f00;
+}
+.message.m_join {
+ color: #008000;
+}
+.message.m_topic .content,
+.message.m_names .content {
+ color: #03a9f4;
+ font-weight: bold;
+}
+.message.m_motd .content {
+ font-family: monospace;
+}
+.message.m_nick .content,
+.message.m_notice .content {
+ color: #ff9800;
+ font-weight: bold;
+}
+.message.m_action .actionee {
+ color: #3f51b5;
+}
+.message.m_action .asterisk {
+ color: #e4c000;
+}
+.message.m_mode .content {
+ font-style: italic;
+}
+.message.m_mode .mode {
+ color: #0f0;
+}
+.message.m_mode .asterisk {
+ color: #05abe0;
+}
+.message.m_error .content {
+ color: #f00;
+ font-weight: bold;
+}
+.message.m_help .content {
+ color: #0f0;
+ font-weight: bold;
+}
+.message .irc-bg00,
+.topicbar .irc-bg00,
+.message .irc-bg0,
+.topicbar .irc-bg0 {
+ background-color: #fff;
+}
+.message .irc-bg01,
+.topicbar .irc-bg01,
+.message .irc-bg1,
+.topicbar .irc-bg1 {
+ background-color: #000;
+}
+.message .irc-bg02,
+.topicbar .irc-bg02,
+.message .irc-bg2,
+.topicbar .irc-bg2 {
+ background-color: #000080;
+}
+.message .irc-bg03,
+.topicbar .irc-bg03,
+.message .irc-bg3,
+.topicbar .irc-bg3 {
+ background-color: #008000;
+}
+.message .irc-bg04,
+.topicbar .irc-bg04,
+.message .irc-bg4,
+.topicbar .irc-bg4 {
+ background-color: #f00;
+}
+.message .irc-bg05,
+.topicbar .irc-bg05,
+.message .irc-bg5,
+.topicbar .irc-bg5 {
+ background-color: #a52a2a;
+}
+.message .irc-bg06,
+.topicbar .irc-bg06,
+.message .irc-bg6,
+.topicbar .irc-bg6 {
+ background-color: #800080;
+}
+.message .irc-bg07,
+.topicbar .irc-bg07,
+.message .irc-bg7,
+.topicbar .irc-bg7 {
+ background-color: #ffa500;
+}
+.message .irc-bg08,
+.topicbar .irc-bg08,
+.message .irc-bg8,
+.topicbar .irc-bg8 {
+ background-color: #ff0;
+}
+.message .irc-bg09,
+.topicbar .irc-bg09,
+.message .irc-bg9,
+.topicbar .irc-bg9 {
+ background-color: #0f0;
+}
+.message .irc-bg10,
+.topicbar .irc-bg10 {
+ background-color: #008080;
+}
+.message .irc-bg11,
+.topicbar .irc-bg11 {
+ background-color: #0ff;
+}
+.message .irc-bg12,
+.topicbar .irc-bg12 {
+ background-color: #0091bd;
+}
+.message .irc-bg13,
+.topicbar .irc-bg13 {
+ background-color: #ffc0cb;
+}
+.message .irc-bg14,
+.topicbar .irc-bg14 {
+ background-color: #808080;
+}
+.message .irc-bg15,
+.topicbar .irc-bg15 {
+ background-color: #d3d3d3;
+}
+.message .irc-fg00,
+.topicbar .irc-fg00,
+.message .irc-fg0,
+.topicbar .irc-fg0 {
+ color: #fff;
+}
+.message .irc-fg01,
+.topicbar .irc-fg01,
+.message .irc-fg1,
+.topicbar .irc-fg1 {
+ color: #000;
+}
+.message .irc-fg02,
+.topicbar .irc-fg02,
+.message .irc-fg2,
+.topicbar .irc-fg2 {
+ color: #000080;
+}
+.message .irc-fg03,
+.topicbar .irc-fg03,
+.message .irc-fg3,
+.topicbar .irc-fg3 {
+ color: #008000;
+}
+.message .irc-fg04,
+.topicbar .irc-fg04,
+.message .irc-fg4,
+.topicbar .irc-fg4 {
+ color: #f00;
+}
+.message .irc-fg05,
+.topicbar .irc-fg05,
+.message .irc-fg5,
+.topicbar .irc-fg5 {
+ color: #a52a2a;
+}
+.message .irc-fg06,
+.topicbar .irc-fg06,
+.message .irc-fg6,
+.topicbar .irc-fg6 {
+ color: #800080;
+}
+.message .irc-fg07,
+.topicbar .irc-fg07,
+.message .irc-fg7,
+.topicbar .irc-fg7 {
+ color: #ffa500;
+}
+.message .irc-fg08,
+.topicbar .irc-fg08,
+.message .irc-fg8,
+.topicbar .irc-fg8 {
+ color: #dcdc00;
+}
+.message .irc-fg09,
+.topicbar .irc-fg09,
+.message .irc-fg9,
+.topicbar .irc-fg9 {
+ color: #00e600;
+}
+.message .irc-fg10,
+.topicbar .irc-fg10 {
+ color: #008080;
+}
+.message .irc-fg11,
+.topicbar .irc-fg11 {
+ color: #00d2d2;
+}
+.message .irc-fg12,
+.topicbar .irc-fg12 {
+ color: #00f;
+}
+.message .irc-fg13,
+.topicbar .irc-fg13 {
+ color: #ffc0cb;
+}
+.message .irc-fg14,
+.topicbar .irc-fg14 {
+ color: #808080;
+}
+.message .irc-fg15,
+.topicbar .irc-fg15 {
+ color: #d3d3d3;
+}
+.message .irc-bold,
+.topicbar .irc-bold {
+ font-weight: bold;
+}
+.message .irc-italic,
+.topicbar .irc-italic {
+ font-style: italic;
+}
+.message .irc-underline,
+.topicbar .irc-underline {
+ text-decoration: underline;
+}
diff --git a/public/index.html b/public/index.html
index b1ced17..4c2f5f1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -11,9 +11,11 @@
+
-
+
+
@@ -70,7 +72,7 @@
`hh:mm:ss TT` would be 12-hour format with PM/AM
Themes
- Coming soon!
+
diff --git a/public/js/main.js b/public/js/main.js
index fad200a..18070cf 100644
--- a/public/js/main.js
+++ b/public/js/main.js
@@ -7,7 +7,8 @@ window.irc = {
timestamps: true,
timestampFormat: "HH:mm:ss",
colorNicknames: true,
- colorNicklist: false
+ colorNicklist: false,
+ theme: "default"
},
serverData: {},
serverChatQueue: {},
@@ -18,16 +19,13 @@ window.irc = {
window.clientdom = {connector: {}, settings: {}};
window.colorizer = {
- theme: {
- H: [1, 360],
- S: [30, 100],
- L: [30, 70]
- },
get_random_color: function(nickname) {
+ let themefunc = window.themes.available[irc.config.theme].nick_pallete;
+
Math.seedrandom(nickname);
- let h = rand(colorizer.theme.H[0], colorizer.theme.H[1]); // color hue between 1 and 360
- let s = rand(colorizer.theme.S[0], colorizer.theme.S[1]); // saturation 30-100%
- let l = rand(colorizer.theme.L[0], colorizer.theme.L[1]); // lightness 30-70%
+ let h = rand(themefunc.H[0], themefunc.H[1]);
+ let s = rand(themefunc.S[0], themefunc.S[1]);
+ let l = rand(themefunc.L[0], themefunc.L[1]);
return 'hsl(' + h + ',' + s + '%,' + l + '%)';
},
strip: function(message) {
@@ -252,12 +250,19 @@ function linkify(text) {
function removeClass(element, cl) {
let classList = element.className.split(" ");
- remove_str(classList, cl);
+
+ if(classList.indexOf(cl) != -1)
+ classList.splice(classList.indexOf(cl), 1);
+
element.className = classList.join(" ");
}
function addClass(element, cl) {
let classList = element.className.split(" ");
+
+ if(classList.indexOf(cl) != -1)
+ return;
+
classList.push(cl);
element.className = classList.join(" ");
}
@@ -339,6 +344,25 @@ let composer = {
}
return element;
}
+ },
+ theme_selection: function(name, theme) {
+ let btn = document.createElement('div');
+ btn.className = "theme_button theme_"+theme.type;
+ let sampler = document.createElement('div');
+ sampler.className = "sampler";
+ sampler.style['background-color'] = theme.colorSamples.background;
+ let toolbar = document.createElement('span');
+ toolbar.className = "s_toolbar";
+ toolbar.style['background-color'] = theme.colorSamples.toolbar;
+ let nameb = document.createElement('span');
+ nameb.className = "name";
+ nameb.innerHTML = theme['name'];
+ sampler.appendChild(toolbar);
+ btn.appendChild(sampler);
+ btn.appendChild(nameb);
+ btn.setAttribute('id', 'theme-'+name);
+
+ return btn;
}
}
@@ -939,6 +963,7 @@ class Settings extends Buffer {
this.tab = null;
this.isOpen = false;
this.timeout = null;
+ this.themeSelection = "";
clientdom.settings.save.onclick = (e) => {
this.saveSpecified();
@@ -947,6 +972,46 @@ class Settings extends Buffer {
clientdom.settings.open.onclick = (e) => {
this.open();
}
+
+ this.theme_buttons();
+ }
+
+ set_active_selection(name) {
+ let all = clientdom.settings.available_themes.querySelectorAll('.theme_button');
+ if(all.length > 0) {
+ for(let a in all) {
+ if(all[a] && all[a]['className']) {
+ let elem = all[a];
+ if(elem.getAttribute('id') == 'theme-'+name) {
+ addClass(elem, "selected");
+ } else {
+ removeClass(elem, "selected");
+ }
+ }
+ }
+ }
+ }
+
+ theme_buttons() {
+ for(let n in window.themes.available) {
+ let theme = window.themes.available[n];
+ let button = composer.theme_selection(n, theme);
+
+ clientdom.settings.available_themes.appendChild(button);
+
+ button.onclick = (e) => {
+ this.themeSelection = n;
+ this.set_active_selection(this.themeSelection);
+ }
+ }
+ }
+
+ switch_theme() {
+ if(this.themeSelection != '') {
+ window.themes.change_theme(this.themeSelection);
+ irc.config.theme = this.themeSelection;
+ this.set_active_selection(this.themeSelection);
+ }
}
open() {
@@ -972,14 +1037,18 @@ class Settings extends Buffer {
if(this.timeout)
clearTimeout(this.timeout);
+ this.switch_theme();
+
for(let key in irc.config) {
let value = irc.config[key];
let type = typeof(value);
- if(type == "boolean")
- irc.config[key] = clientdom.settings[key].checked;
- else
- irc.config[key] = clientdom.settings[key].value;
+ if(clientdom.settings[key]) {
+ if(type == "boolean")
+ irc.config[key] = clientdom.settings[key].checked;
+ else
+ irc.config[key] = clientdom.settings[key].value;
+ }
}
clientdom.settings.saveStatus.innerHTML = "Settings saved!";
@@ -1000,7 +1069,13 @@ class Settings extends Buffer {
for(let key in irc.config) {
let value = irc.config[key];
let type = typeof(value);
+
if(settings[key]) {
+ if(key == 'theme') {
+ this.themeSelection = settings[key];
+ continue;
+ }
+
if(type == "boolean")
clientdom.settings[key].checked = settings[key];
else
@@ -1017,10 +1092,12 @@ class Settings extends Buffer {
let value = irc.config[key];
let type = typeof(value);
- if(type == "boolean")
- clientdom.settings[key].checked = value;
- else
- clientdom.settings[key].value = value;
+ if(clientdom.settings[key]) {
+ if(type == "boolean")
+ clientdom.settings[key].checked = value;
+ else
+ clientdom.settings[key].value = value;
+ }
}
}
@@ -1777,6 +1854,7 @@ window.onload = function() {
clientdom.settings[key] = clientdom.settings.frame.querySelector('#s_'+key);
}
+ clientdom.settings['available_themes'] = clientdom.settings.frame.querySelector('.available_themes');
clientdom.settings['save'] = clientdom.settings.frame.querySelector('#save_settings');
clientdom.settings['saveStatus'] = clientdom.settings.frame.querySelector('#settings_status');
clientdom.connector['frame'] = irc.primaryFrame.querySelector('#authdialog');
diff --git a/public/js/theme.js b/public/js/theme.js
new file mode 100644
index 0000000..6434d53
--- /dev/null
+++ b/public/js/theme.js
@@ -0,0 +1,46 @@
+function swapSheet(name) {
+ document.querySelector("#theme_stylesheet").setAttribute('href', "css/"+name+".css");
+}
+
+window.themes = {
+ available: {
+ default: {
+ name: "Default",
+ type: "bright",
+ nick_pallete: {
+ H: [1, 360],
+ S: [30, 100],
+ L: [30, 70]
+ },
+ stylesheet: "theme_default",
+ default: true,
+ colorSamples: {
+ toolbar: "#00c7e0",
+ background: "#f5f5f5"
+ }
+ },
+
+ night: {
+ name: "Night",
+ type: "dark",
+ nick_pallete: {
+ H: [1, 360],
+ S: [30, 100],
+ L: [40, 90]
+ },
+ stylesheet: "theme_night",
+ default: false,
+ colorSamples: {
+ toolbar: "#008e8e",
+ background: "#1d1d1d"
+ }
+ }
+ },
+
+ change_theme: function(name) {
+ if(name in themes.available) {
+ swapSheet(themes.available[name].stylesheet);
+ window.irc.config.theme = name;
+ }
+ }
+}
diff --git a/public/main.styl b/public/main.styl
index cabe842..ab996c4 100644
--- a/public/main.styl
+++ b/public/main.styl
@@ -1,4 +1,4 @@
-// Run `stylus -w main.styl -o css` to compile
+// Run `stylus -w styl -o css` to compile
props(prop, args)
-webkit-{prop} args
-moz-{prop} args
@@ -6,54 +6,36 @@ props(prop, args)
-o-{prop} args
{prop} args
-props2(prop, args)
- -webkit-{prop} args
- -moz-{prop} args
- {prop} args
-
transition()
props('transition', arguments)
-box-shadow()
- props2('box-shadow', arguments)
-
body
margin: 0
padding: 0
font-family: Open Sans, Everson Mono, Helvetica
.grade1
- font-size: 200%
margin-bottom: 0
margin-top: 0
display: block
- color: #00BCD4
text-align: center
.grade2
- font-size: 150%
margin-bottom: 0
margin-top: 20px
display: block
- color: #00BCD4
text-align: center
.grade3
- font-size: 120%
margin-bottom: 0
margin-top: 20px
display: block
- color: #00BCD4
text-align: center
.ircclient
position: absolute
width: 100%
height: 100%
- background: rgb(255,255,255)
- background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%)
- background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%)
- background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%)
.coverwindow
position: absolute
width: 100%
@@ -65,16 +47,10 @@ body
margin: auto
margin-top: 5%
padding: 15px
- background-color: #f7f7f7;
- border: 1px solid #dadada;
- box-shadow 4px 4px 18px #d6d6d6;
- .msg.error
- color: red;
label
display: block
font-size: 80%
margin-top: 5px
- color: #2196F3
&.autosize
width: auto
display: inline-block !important
@@ -84,29 +60,16 @@ body
padding: 8px;
width: 300px;
border-radius: 5px;
- border: 1px solid #d2d2d2;
- box-shadow inset 2px 2px 4px #dcdcdc;
input[type="submit"]
width: 318px;
padding: 12px;
margin-top: 20px;
display: block;
- background: rgb(135,224,253);
- background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%);
- background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
- background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
- border: 1px solid #2196F3;
border-radius: 4px;
- color: #fff;
font-size: 120%;
font-weight: bold;
text-transform: uppercase;
cursor: pointer
- &:hover
- background: rgb(196,239,252);
- background: -moz-linear-gradient(top, rgba(196,239,252,1) 0%, rgba(127,213,239,1) 40%, rgba(57,183,221,1) 100%);
- background: -webkit-linear-gradient(top, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
- background: linear-gradient(to bottom, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
#chat
overflow: hidden;
.ircwrapper
@@ -115,10 +78,8 @@ body
height: 100%
.toolbar
height: 56px
- background-color: #00c7e0
position: relative
z-index: 15
- box-shadow 2px 2px 4px #cecece
.open_settings
width: 36px;
height: 36px;
@@ -127,21 +88,18 @@ body
right: 10px;
top: 10px;
cursor: pointer;
- background-image: url(../image/settings.svg);
- background-repeat: no-repeat;
- background-size: contain;
transition transform 0.2s linear
&:hover
transform: rotateZ(-90deg);
.tabby
- display: inline-block;
- height: 56px;
- position: absolute;
- right: 45px;
- left: 0;
- white-space: nowrap;
- overflow-x: auto;
- overflow-y: hidden;
+ display: inline-block
+ height: 56px
+ position: absolute
+ right: 45px
+ left: 0
+ white-space: nowrap
+ overflow-x: auto
+ overflow-y: hidden
.tab
display: inline-block;
min-width: 60px;
@@ -150,21 +108,14 @@ body
margin-right: 0;
padding: 10px;
line-height: 25px;
- background-color: #29e1ff;
transition background-color 0.2s linear
border-radius: 5px;
- border: 1px solid #00d0ea;
- box-shadow inset 4px 4px 8px #44ebff;
- color: #fff;
cursor: pointer;
font-weight: 600;
#unread
display: inline-block;
min-width: 18px;
height: 18px;
- background-color: #bf0000;
- border: 1px solid #b00;
- box-shadow inset 2px 2px 3px #f00;
text-align: center;
font-size: 12px;
margin: 0 5px;
@@ -176,35 +127,20 @@ body
display: inline-block;
width: 12px;
text-align: center;
- color: #ff3d3d;
margin-left: 5px
- &:hover
- background-color: #63e9ff;
- box-shadow inset 4px 4px 8px #86f2ff;
- &.active
- background-color: #00b9d8;
- border: 1px solid #009aad;
- box-shadow inset 4px 4px 8px #009caf;
- color: #ffffff;
- &:hover
- background-color: #00c7e8;
+
.chatarea
position: absolute;
top: 56px;
width: 100%;
bottom: 46px;
.smsc-nicklistbtn
- background-image: url(../image/users.svg);
- background-repeat: no-repeat;
- background-size: contain;
width: 46px;
height: 46px;
position: absolute;
top: 16px;
right: 16px;
- background-color: #00bcd4;
border-radius: 100%;
- border: 5px solid #389dbb;
display: none;
opacity: 0.5;
cursor: pointer;
@@ -214,8 +150,6 @@ body
height: 20px;
right: 0;
left: 0;
- background-color: #fff;
- border-bottom: 1px solid #ddd;
padding: 12px;
display: none;
overflow: hidden;
@@ -239,18 +173,14 @@ body
width: 280px;
position: absolute;
right: 0;
- border-left: 1px solid #ddd;
padding: 10px;
top: 0;
bottom: 0;
display: none;
z-index: 11;
- background-color: #ffffff;
overflow: auto;
.nick
cursor: pointer;
- &:hover
- background-color: #aeebff;
.nickname
font-size: 120%;
.prefix
@@ -259,9 +189,7 @@ body
line-height: 16px;
padding: 2px;
display: inline-block;
- background-color: #05abe0;
border-radius: 4px;
- color: #fff;
text-align: center;
margin-right: 5px;
font-weight: bold;
@@ -298,9 +226,7 @@ body
bottom: 0;
height: 46px;
width: 100%;
- background-color: #00c7e0;
.my_nickname
- background-color: #00efef;
margin: 5px;
padding: 7px;
border-top-left-radius: 10px;
@@ -320,13 +246,8 @@ body
width: 100%
padding: 6px
font-size: 120%
- border: 1px solid #929292
border-left: 0
- box-shadow inset 4px 4px 8px #d8d8d8
.sendbutton
- background-image: url(../image/send.svg);
- background-repeat: no-repeat;
- background-size: contain;
width: 32px;
position: absolute;
height: 32px;
@@ -334,158 +255,6 @@ body
top: 5px;
right: 5px;
cursor: pointer;
-
-
-.message
- &.type_simple
- &.mentioned
- background-color: #aeebff;
- .timestamp
- color: #696969;
- &:before
- color: #607D8B;
- content: "[";
- &:after
- color: #607D8B;
- content: "]";
- .sender
- color: #3F51B5;
- &:before
- content: "<";
- &:after
- content: ">";
- .arrowin, .arrowout
- font-weight: bolder;
- .channel
- font-weight: bold;
- color: #a0a0a0;
- .m_listentry
- .channel
- min-width: 120px;
- display: inline-block;
- .usercount
- display: inline-block;
- min-width: 45px;
- text-align: center;
-
- .reason, .hostmask
- &:before
- content: "(";
- &:after
- content: ")";
- &:before, &:after
- color: #009606;
- font-weight: bold;
- .reason
- color: #bf0000;
- .hostmask
- color: #004c88;
- .arrowin
- color: #00ab00;
- .arrowout
- color: #dc0f00;
- &.m_quit, &.m_part, &.m_kick
- color: red;
- &.m_join
- color: green;
- &.m_topic .content, &.m_names .content
- color: #03A9F4;
- font-weight: bold;
- &.m_motd .content
- font-family: monospace;
- &.m_nick .content, &.m_notice .content
- color: #FF9800;
- font-weight: bold;
- &.m_action
- .actionee
- color: #3f51b5;
- .asterisk
- color: #e4c000;
- &.m_mode
- .content
- font-style: italic;
- .mode
- color: #008000;
- .asterisk
- color: #05abe0
- &.m_error .content
- color: red;
- font-weight: bold;
- &.m_help .content
- color: #008000;
- font-weight: bold;
-
-.message, .topicbar
- .irc-bg00,.irc-bg0
- background-color: white
- .irc-bg01,.irc-bg1
- background-color: black
- .irc-bg02,.irc-bg2
- background-color: navy
- .irc-bg03,.irc-bg3
- background-color: green
- .irc-bg04,.irc-bg4
- background-color: red
- .irc-bg05,.irc-bg5
- background-color: brown
- .irc-bg06,.irc-bg6
- background-color: purple
- .irc-bg07,.irc-bg7
- background-color: orange
- .irc-bg08,.irc-bg8
- background-color: yellow
- .irc-bg09,.irc-bg9
- background-color: lime
- .irc-bg10
- background-color: teal
- .irc-bg11
- background-color: cyan
- .irc-bg12
- background-color: blue
- .irc-bg13
- background-color: pink
- .irc-bg14
- background-color: grey
- .irc-bg15
- background-color: lightgrey
- .irc-fg00,.irc-fg0
- color: white
- .irc-fg01,.irc-fg1
- color: black
- .irc-fg02,.irc-fg2
- color: navy
- .irc-fg03,.irc-fg3
- color: green
- .irc-fg04,.irc-fg4
- color: red
- .irc-fg05,.irc-fg5
- color: brown
- .irc-fg06,.irc-fg6
- color: purple
- .irc-fg07,.irc-fg7
- color: orange
- .irc-fg08,.irc-fg8
- color: #dcdc00
- .irc-fg09,.irc-fg9
- color: #00e600
- .irc-fg10
- color: teal
- .irc-fg11
- color: #00d2d2
- .irc-fg12
- color: blue
- .irc-fg13
- color: pink
- .irc-fg14
- color: grey
- .irc-fg15
- color: lightgrey
- .irc-bold
- font-weight: bold
- .irc-italic
- font-style: italic
- .irc-underline
- text-decoration: underline
@media all and (max-width: 600px)
.vnicks
diff --git a/public/stylus/layout.styl b/public/stylus/layout.styl
new file mode 100644
index 0000000..b58271c
--- /dev/null
+++ b/public/stylus/layout.styl
@@ -0,0 +1,297 @@
+// Run `stylus -w styl -o css` to compile
+props(prop, args)
+ -webkit-{prop} args
+ -moz-{prop} args
+ -ms-{prop} args
+ -o-{prop} args
+ {prop} args
+
+transition()
+ props('transition', arguments)
+
+body
+ margin: 0
+ padding: 0
+ font-family: Open Sans, Everson Mono, Helvetica
+
+.grade1
+ margin-bottom: 0
+ margin-top: 0
+ display: block
+ text-align: center
+
+.grade2
+ margin-bottom: 0
+ margin-top: 20px
+ display: block
+ text-align: center
+
+.grade3
+ margin-bottom: 0
+ margin-top: 20px
+ display: block
+ text-align: center
+
+.ircclient
+ position: absolute
+ width: 100%
+ height: 100%
+ input[type=text], input[type=number], input[type=password]
+ padding: 8px;
+ width: 300px;
+ border-radius: 5px;
+ input[type="submit"]
+ width: 318px;
+ padding: 12px;
+ margin-top: 20px;
+ display: block;
+ border-radius: 4px;
+ font-size: 120%;
+ font-weight: bold;
+ text-transform: uppercase;
+ cursor: pointer
+ .coverwindow
+ position: absolute
+ width: 100%
+ height: 100%
+ &#authdialog
+ z-index: 100
+ .wrapper
+ width: 320px
+ margin: auto
+ margin-top: 5%
+ padding: 15px
+ label
+ display: block
+ font-size: 80%
+ margin-top: 5px
+ &.autosize
+ width: auto
+ display: inline-block !important
+ font-size: 90% !important
+ margin-bottom: 10px
+ #chat
+ overflow: hidden;
+ .ircwrapper
+ position: absolute
+ width: 100%
+ height: 100%
+ .toolbar
+ height: 56px
+ position: relative
+ z-index: 15
+ .open_settings
+ width: 36px;
+ height: 36px;
+ display: inline-block;
+ position: absolute;
+ right: 10px;
+ top: 10px;
+ cursor: pointer;
+ transition transform 0.2s linear
+ &:hover
+ transform: rotateZ(-90deg);
+ .tabby
+ display: inline-block
+ height: 56px
+ position: absolute
+ right: 45px
+ left: 0
+ white-space: nowrap
+ overflow-x: auto
+ overflow-y: hidden
+ .tab
+ display: inline-block;
+ min-width: 60px;
+ height: 25px;
+ margin: 5px;
+ margin-right: 0;
+ padding: 10px;
+ line-height: 25px;
+ transition background-color 0.2s linear
+ border-radius: 5px;
+ cursor: pointer;
+ font-weight: 600;
+ #unread
+ display: inline-block;
+ min-width: 18px;
+ height: 18px;
+ text-align: center;
+ font-size: 12px;
+ margin: 0 5px;
+ line-height: 20px;
+ border-radius: 100%;
+ &.none
+ display: none;
+ #close
+ display: inline-block;
+ width: 12px;
+ text-align: center;
+ margin-left: 5px
+
+ .chatarea
+ position: absolute;
+ top: 56px;
+ width: 100%;
+ bottom: 46px;
+ .smsc-nicklistbtn
+ width: 46px;
+ height: 46px;
+ position: absolute;
+ top: 16px;
+ right: 16px;
+ border-radius: 100%;
+ display: none;
+ opacity: 0.5;
+ cursor: pointer;
+ .topicbar
+ position: absolute;
+ top: 0;
+ height: 20px;
+ right: 0;
+ left: 0;
+ padding: 12px;
+ display: none;
+ overflow: hidden;
+ z-index: 10
+ &:hover
+ height: auto
+ max-height: 100px
+ overflow: auto
+ word-wrap: break-word
+ .letterbox
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ overflow-y: auto;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+ padding: 5px;
+ .nicklist
+ width: 280px;
+ position: absolute;
+ right: 0;
+ padding: 10px;
+ top: 0;
+ bottom: 0;
+ display: none;
+ z-index: 11;
+ overflow: auto;
+ .nick
+ cursor: pointer;
+ .nickname
+ font-size: 120%;
+ .prefix
+ width: 16px;
+ height: 16px;
+ line-height: 16px;
+ padding: 2px;
+ display: inline-block;
+ border-radius: 4px;
+ text-align: center;
+ margin-right: 5px;
+ font-weight: bold;
+ .no-prefix
+ width: 25px;
+ display: inline-block;
+ .settings
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ right: 0;
+ padding: 20px;
+ width: 60%;
+ min-width: 360px;
+ margin: auto;
+ overflow: auto;
+ .theme_button
+ width: 120px
+ height: 140px
+ border-radius: 5px
+ display: inline-block
+ margin: 5px
+ cursor: pointer
+ .sampler
+ width: 90%
+ height: 75%
+ margin: 5px
+ .s_toolbar
+ width: 100%
+ height: 40%
+ display: block
+ .name
+ width: 100%
+ text-align: center
+ display: block
+ .grade1, .grade2, .grade3
+ text-align: left;
+ &.vnicks
+ .nicklist
+ display: block;
+ .letterbox
+ right: 301px;
+ .topicbar
+ right: 301px;
+ &.vtopic
+ .topicbar
+ display: block;
+ .letterbox
+ top: 45px;
+ .input
+ position: absolute;
+ bottom: 0;
+ height: 46px;
+ width: 100%;
+ .my_nickname
+ margin: 5px;
+ padding: 7px;
+ border-top-left-radius: 10px;
+ border-bottom-left-radius: 10px;
+ padding-right: 20px;
+ margin-right: 0;
+ width: 183px;
+ overflow: hidden;
+ .inputwrapper
+ display: inline-block
+ position: absolute
+ margin: 5px 0
+ left: 210px
+ right: 55px
+ top: 0
+ input
+ width: 100%
+ padding: 6px
+ font-size: 120%
+ border-left: 0
+ .sendbutton
+ width: 32px;
+ position: absolute;
+ height: 32px;
+ float: right;
+ top: 5px;
+ right: 5px;
+ cursor: pointer;
+
+@media all and (max-width: 600px)
+ .vnicks
+ .nicklist
+ display: none !important;
+ .letterbox
+ right: 0 !important;
+ .topicbar
+ right: 0 !important;
+ &.vopentrig
+ .nicklist
+ display: block !important;
+ .topicbar
+ right: 45px;
+ .smsc-nicklistbtn
+ z-index: 12;
+ display: block !important;
+ .my_nickname
+ display: none;
+ .inputwrapper
+ left: 38px !important;
diff --git a/public/stylus/theme_default.styl b/public/stylus/theme_default.styl
new file mode 100644
index 0000000..7932a8d
--- /dev/null
+++ b/public/stylus/theme_default.styl
@@ -0,0 +1,282 @@
+props2(prop, args)
+ -webkit-{prop} args
+ -moz-{prop} args
+ {prop} args
+
+box-shadow()
+ props2('box-shadow', arguments)
+
+.grade1
+ font-size: 200%
+ color: #00BCD4
+
+.grade2
+ font-size: 150%
+ color: #00BCD4
+
+.grade3
+ font-size: 120%
+ color: #00BCD4
+
+.ircclient
+ background: rgb(255,255,255)
+ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(229,229,229,1) 100%)
+ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%)
+ background: linear-gradient(to bottom, rgba(255,255,255,1) 0%,rgba(229,229,229,1) 100%)
+ input[type=text], input[type=number], input[type=password]
+ padding: 8px;
+ width: 300px;
+ border-radius: 5px;
+ border: 1px solid #d2d2d2;
+ box-shadow inset 2px 2px 4px #dcdcdc;
+ input[type="submit"]
+ background: rgb(135,224,253);
+ background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%);
+ background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
+ background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
+ border: 1px solid #2196F3;
+ color: #fff;
+ font-size: 120%;
+ &:hover
+ background: rgb(196,239,252);
+ background: -moz-linear-gradient(top, rgba(196,239,252,1) 0%, rgba(127,213,239,1) 40%, rgba(57,183,221,1) 100%);
+ background: -webkit-linear-gradient(top, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
+ background: linear-gradient(to bottom, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
+ .coverwindow
+ .wrapper
+ background-color: #f7f7f7;
+ border: 1px solid #dadada;
+ box-shadow 4px 4px 18px #d6d6d6;
+ .msg.error
+ color: red;
+ label
+ font-size: 80%
+ color: #2196F3
+ &.autosize
+ font-size: 90% !important
+ #chat
+ .ircwrapper
+ .toolbar
+ background-color: #00c7e0
+ box-shadow 2px 2px 4px #cecece
+ .open_settings
+ background-image: url(../image/settings.svg)
+ background-repeat: no-repeat
+ background-size: contain
+ .tabby
+ .tab
+ background-color: #29e1ff
+ border: 1px solid #00d0ea
+ box-shadow inset 4px 4px 8px #44ebff
+ color: #fff;
+ #unread
+ background-color: #bf0000
+ border: 1px solid #b00
+ box-shadow inset 2px 2px 3px #f00
+ #close
+ color: #ff3d3d
+ &:hover
+ background-color: #63e9ff;
+ box-shadow inset 4px 4px 8px #86f2ff
+ &.active
+ background-color: #00b9d8
+ border: 1px solid #009aad
+ box-shadow inset 4px 4px 8px #009caf
+ color: #ffffff
+ &:hover
+ background-color: #00c7e8
+ .chatarea
+ .smsc-nicklistbtn
+ background-image: url(../image/users.svg)
+ background-repeat: no-repeat
+ background-size: contain
+ background-color: #00bcd4
+ border: 5px solid #389dbb
+ .topicbar
+ background-color: #fff
+ border-bottom: 1px solid #ddd
+ &:hover
+ height: auto
+ max-height: 100px
+ overflow: auto
+ word-wrap: break-word
+ .nicklist
+ border-left: 1px solid #ddd
+ background-color: #ffffff
+ .nick
+ &:hover
+ background-color: #aeebff
+ .prefix
+ background-color: #05abe0
+ color: #fff
+ .settings
+ .theme_button
+ background-color: #e0e0e0
+ border: 1px solid #a7a7a7
+ &:hover
+ background-color: #efefef
+ &.selected
+ border: 2px solid #00a0b5 !important
+ .input
+ background-color: #00c7e0
+ .my_nickname
+ background-color: #00efef
+ .inputwrapper
+ input
+ border: 1px solid #929292
+ box-shadow inset 4px 4px 8px #d8d8d8
+ .sendbutton
+ background-image: url(../image/send.svg)
+ background-repeat: no-repeat
+ background-size: contain
+
+.message
+ &.type_simple
+ &.mentioned
+ background-color: #aeebff
+ .timestamp
+ color: #696969
+ &:before
+ color: #607D8B
+ content: "["
+ &:after
+ color: #607D8B
+ content: "]"
+ .sender
+ color: #3F51B5
+ &:before
+ content: "<"
+ &:after
+ content: ">"
+ .arrowin, .arrowout
+ font-weight: bolder
+ .channel
+ font-weight: bold
+ color: #a0a0a0
+ .m_listentry
+ .channel
+ min-width: 120px
+ display: inline-block
+ .usercount
+ display: inline-block
+ min-width: 45px
+ text-align: center
+
+ .reason, .hostmask
+ &:before
+ content: "("
+ &:after
+ content: ")"
+ &:before, &:after
+ color: #009606
+ font-weight: bold
+ .reason
+ color: #bf0000
+ .hostmask
+ color: #004c88
+ .arrowin
+ color: #00ab00
+ .arrowout
+ color: #dc0f00
+ &.m_quit, &.m_part, &.m_kick
+ color: red
+ &.m_join
+ color: green
+ &.m_topic .content, &.m_names .content
+ color: #03A9F4
+ font-weight: bold
+ &.m_motd .content
+ font-family: monospace
+ &.m_nick .content, &.m_notice .content
+ color: #FF9800
+ font-weight: bold
+ &.m_action
+ .actionee
+ color: #3f51b5
+ .asterisk
+ color: #e4c000
+ &.m_mode
+ .content
+ font-style: italic
+ .mode
+ color: #008000
+ .asterisk
+ color: #05abe0
+ &.m_error .content
+ color: red
+ font-weight: bold
+ &.m_help .content
+ color: #008000;
+ font-weight: bold
+
+.message, .topicbar
+ .irc-bg00,.irc-bg0
+ background-color: white
+ .irc-bg01,.irc-bg1
+ background-color: black
+ .irc-bg02,.irc-bg2
+ background-color: navy
+ .irc-bg03,.irc-bg3
+ background-color: green
+ .irc-bg04,.irc-bg4
+ background-color: red
+ .irc-bg05,.irc-bg5
+ background-color: brown
+ .irc-bg06,.irc-bg6
+ background-color: purple
+ .irc-bg07,.irc-bg7
+ background-color: orange
+ .irc-bg08,.irc-bg8
+ background-color: yellow
+ .irc-bg09,.irc-bg9
+ background-color: lime
+ .irc-bg10
+ background-color: teal
+ .irc-bg11
+ background-color: cyan
+ .irc-bg12
+ background-color: blue
+ .irc-bg13
+ background-color: pink
+ .irc-bg14
+ background-color: grey
+ .irc-bg15
+ background-color: lightgrey
+ .irc-fg00,.irc-fg0
+ color: white
+ .irc-fg01,.irc-fg1
+ color: black
+ .irc-fg02,.irc-fg2
+ color: navy
+ .irc-fg03,.irc-fg3
+ color: green
+ .irc-fg04,.irc-fg4
+ color: red
+ .irc-fg05,.irc-fg5
+ color: brown
+ .irc-fg06,.irc-fg6
+ color: purple
+ .irc-fg07,.irc-fg7
+ color: orange
+ .irc-fg08,.irc-fg8
+ color: #dcdc00
+ .irc-fg09,.irc-fg9
+ color: #00e600
+ .irc-fg10
+ color: teal
+ .irc-fg11
+ color: #00d2d2
+ .irc-fg12
+ color: blue
+ .irc-fg13
+ color: pink
+ .irc-fg14
+ color: grey
+ .irc-fg15
+ color: lightgrey
+ .irc-bold
+ font-weight: bold
+ .irc-italic
+ font-style: italic
+ .irc-underline
+ text-decoration: underline
diff --git a/public/stylus/theme_night.styl b/public/stylus/theme_night.styl
new file mode 100644
index 0000000..d356b1f
--- /dev/null
+++ b/public/stylus/theme_night.styl
@@ -0,0 +1,292 @@
+props2(prop, args)
+ -webkit-{prop} args
+ -moz-{prop} args
+ {prop} args
+
+box-shadow()
+ props2('box-shadow', arguments)
+
+.grade1
+ font-size: 200%
+ color: #00BCD4
+
+.grade2
+ font-size: 150%
+ color: #00BCD4
+
+.grade3
+ font-size: 120%
+ color: #00BCD4
+
+a
+ color: #23e7ff
+a:hover
+ color: #5dedff
+
+.ircclient
+ background: #1d1d1d
+ input[type=text], input[type=number], input[type=password]
+ padding: 8px;
+ width: 300px;
+ border-radius: 5px;
+ border: 1px solid #d2d2d2;
+ box-shadow inset 2px 2px 4px #dcdcdc;
+ input[type="submit"]
+ background: rgb(135,224,253);
+ background: -moz-linear-gradient(top, rgba(135,224,253,1) 0%, rgba(83,203,241,1) 40%, rgba(5,171,224,1) 100%);
+ background: -webkit-linear-gradient(top, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
+ background: linear-gradient(to bottom, rgba(135,224,253,1) 0%,rgba(83,203,241,1) 40%,rgba(5,171,224,1) 100%);
+ border: 1px solid #2196F3;
+ color: #fff;
+ font-size: 120%;
+ &:hover
+ background: rgb(196,239,252);
+ background: -moz-linear-gradient(top, rgba(196,239,252,1) 0%, rgba(127,213,239,1) 40%, rgba(57,183,221,1) 100%);
+ background: -webkit-linear-gradient(top, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
+ background: linear-gradient(to bottom, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
+ .coverwindow
+ .wrapper
+ background-color: #3e3e3e
+ border: 1px solid #171717
+ box-shadow 4px 4px 18px #383838
+ color: white;
+ .msg.error
+ color: red;
+ label
+ font-size: 80%
+ color: #67bcff
+ &.autosize
+ font-size: 90% !important
+ #chat
+ .ircwrapper
+ .toolbar
+ background-color: #008e8e
+ box-shadow 2px 2px 4px #585858
+ .open_settings
+ background-image: url(../image/settings.svg)
+ background-repeat: no-repeat
+ background-size: contain
+ .tabby
+ .tab
+ background-color: #00bfde
+ border: 1px solid #0092a5
+ box-shadow inset 4px 4px 8px #00d1ea
+ color: #fff;
+ #unread
+ background-color: #bf0000
+ border: 1px solid #b00
+ box-shadow inset 2px 2px 3px #f00
+ #close
+ color: #ff3d3d
+ &:hover
+ background-color: #00dbff
+ box-shadow: inset 4px 4px 8px #23e7ff
+ &.active
+ background-color: #006a7b
+ border: 1px solid #006a77
+ box-shadow inset 4px 4px 8px #003940
+ color: #ffffff
+ &:hover
+ background-color: #00859a
+ .chatarea
+ .smsc-nicklistbtn
+ background-image: url(../image/users.svg)
+ background-repeat: no-repeat
+ background-size: contain
+ background-color: #00bcd4
+ border: 5px solid #389dbb
+ .topicbar
+ background-color: #2d2d2d
+ border-bottom: 1px solid #000
+ color: white
+ &:hover
+ height: auto
+ max-height: 100px
+ overflow: auto
+ word-wrap: break-word
+ .nicklist
+ background-color: #2d2d2d
+ border-left: 1px solid #000
+ color: white
+ .nick
+ &:hover
+ background-color: #006282
+ .prefix
+ background-color: #05abe0
+ color: #fff
+ .settings
+ color: white
+ .theme_button
+ background-color: #424242
+ border: 1px solid #444444
+ &:hover
+ background-color: #545454
+ &.selected
+ border: 2px solid #00e2ff !important
+ .input
+ background-color: #005a5a
+ .my_nickname
+ background-color: #009494
+ color: white
+ .inputwrapper
+ input
+ box-shadow inset 4px 4px 8px #001419
+ background-color: #002b36
+ border: 1px solid #008e8e
+ color: white
+ .sendbutton
+ background-image: url(../image/send.svg)
+ background-repeat: no-repeat
+ background-size: contain
+
+.message
+ color: white
+ &.type_simple
+ &.mentioned
+ background-color: #006282
+ .timestamp
+ color: #afafaf
+ &:before
+ color: #607D8B
+ content: "["
+ &:after
+ color: #607D8B
+ content: "]"
+ .sender
+ color: #3F51B5
+ &:before
+ content: "<"
+ &:after
+ content: ">"
+ .arrowin, .arrowout
+ font-weight: bolder
+ .channel
+ font-weight: bold
+ color: #a0a0a0
+ .m_listentry
+ .channel
+ min-width: 120px
+ display: inline-block
+ .usercount
+ display: inline-block
+ min-width: 45px
+ text-align: center
+
+ .reason, .hostmask
+ &:before
+ content: "("
+ &:after
+ content: ")"
+ &:before, &:after
+ color: #009606
+ font-weight: bold
+ .reason
+ color: #bf0000
+ .hostmask
+ color: #1999ff
+ .arrowin
+ color: #00ab00
+ .arrowout
+ color: #dc0f00
+ &.m_quit, &.m_part, &.m_kick
+ color: red
+ &.m_join
+ color: green
+ &.m_topic .content, &.m_names .content
+ color: #03A9F4
+ font-weight: bold
+ &.m_motd .content
+ font-family: monospace
+ &.m_nick .content, &.m_notice .content
+ color: #FF9800
+ font-weight: bold
+ &.m_action
+ .actionee
+ color: #3f51b5
+ .asterisk
+ color: #e4c000
+ &.m_mode
+ .content
+ font-style: italic
+ .mode
+ color: #00ff00
+ .asterisk
+ color: #05abe0
+ &.m_error .content
+ color: red
+ font-weight: bold
+ &.m_help .content
+ color: #00ff00;
+ font-weight: bold
+
+.message, .topicbar
+ .irc-bg00,.irc-bg0
+ background-color: white
+ .irc-bg01,.irc-bg1
+ background-color: black
+ .irc-bg02,.irc-bg2
+ background-color: navy
+ .irc-bg03,.irc-bg3
+ background-color: green
+ .irc-bg04,.irc-bg4
+ background-color: red
+ .irc-bg05,.irc-bg5
+ background-color: brown
+ .irc-bg06,.irc-bg6
+ background-color: purple
+ .irc-bg07,.irc-bg7
+ background-color: orange
+ .irc-bg08,.irc-bg8
+ background-color: yellow
+ .irc-bg09,.irc-bg9
+ background-color: lime
+ .irc-bg10
+ background-color: teal
+ .irc-bg11
+ background-color: cyan
+ .irc-bg12
+ background-color: #0091bd
+ .irc-bg13
+ background-color: pink
+ .irc-bg14
+ background-color: grey
+ .irc-bg15
+ background-color: lightgrey
+ .irc-fg00,.irc-fg0
+ color: white
+ .irc-fg01,.irc-fg1
+ color: black
+ .irc-fg02,.irc-fg2
+ color: navy
+ .irc-fg03,.irc-fg3
+ color: green
+ .irc-fg04,.irc-fg4
+ color: red
+ .irc-fg05,.irc-fg5
+ color: brown
+ .irc-fg06,.irc-fg6
+ color: purple
+ .irc-fg07,.irc-fg7
+ color: orange
+ .irc-fg08,.irc-fg8
+ color: #dcdc00
+ .irc-fg09,.irc-fg9
+ color: #00e600
+ .irc-fg10
+ color: teal
+ .irc-fg11
+ color: #00d2d2
+ .irc-fg12
+ color: blue
+ .irc-fg13
+ color: pink
+ .irc-fg14
+ color: grey
+ .irc-fg15
+ color: lightgrey
+ .irc-bold
+ font-weight: bold
+ .irc-italic
+ font-style: italic
+ .irc-underline
+ text-decoration: underline