IcyNetwork
/
teemant-old
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

themes

This commit is contained in:
Evert Prants 2016-09-28 21:00:57 +03:00
parent 1ed371ec0d
commit 4127533f8b
11 changed files with 2293 additions and 262 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -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

345
public/css/layout.css Normal file
View File

@ -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;
}
}

453
public/css/theme_default.css Normal file
View File

@ -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;
}

468
public/css/theme_night.css Normal file
View File

@ -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;
}

6
public/index.html
View File

@ -11,9 +11,11 @@
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript" src="js/colorparser.js"></script>
<script type="text/javascript" src="js/theme.js"></script>
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" type="text/css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<link rel="stylesheet" type="text/css" href="css/layout.css">
<link rel="stylesheet" type="text/css" href="css/theme_default.css" id="theme_stylesheet">
</head>
<!-- Codepony Diamond -->
<body>
@ -70,7 +72,7 @@
<input type="text" name="timestamp_format" id="s_timestampFormat" value="HH:mm:ss"><br>
<i style="font-size: 80%;">`<code>hh:mm:ss TT</code>` would be 12-hour format with PM/AM</i>
<h1 class="grade3">Themes</h1>
<p><i>Coming soon!</i></p>
<div class="available_themes"></div>
<br>
<p><button class="regular_btn" id="save_settings">Save Settings</button></p>
<span class="grade3" id="settings_status"></span>

114
public/js/main.js
View File

@ -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 = "<span class='success'>Settings saved!</span>";
@ -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');

46
public/js/theme.js Normal file
View File

@ -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;
}
}
}

251
public/main.styl
View File

@ -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

297
public/stylus/layout.styl Normal file
View File

@ -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;

282
public/stylus/theme_default.styl Normal file
View File

@ -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

292
public/stylus/theme_night.styl Normal file
View File

@ -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