themes
This commit is contained in:
parent
1ed371ec0d
commit
4127533f8b
@ -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
345
public/css/layout.css
Normal 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
453
public/css/theme_default.css
Normal 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
468
public/css/theme_night.css
Normal 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;
|
||||
}
|
||||
@ -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>
|
||||
|
||||
@ -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,15 +1037,19 @@ 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(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>";
|
||||
|
||||
if("localStorage" in window) {
|
||||
@ -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,12 +1092,14 @@ class Settings extends Buffer {
|
||||
let value = irc.config[key];
|
||||
let type = typeof(value);
|
||||
|
||||
if(clientdom.settings[key]) {
|
||||
if(type == "boolean")
|
||||
clientdom.settings[key].checked = value;
|
||||
else
|
||||
clientdom.settings[key].value = value;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
addMessage(message, sender, type, time) {
|
||||
// Don't send messages to the settings buffer
|
||||
@ -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
46
public/js/theme.js
Normal 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
251
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;
|
||||
@ -335,158 +256,6 @@ body
|
||||
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
|
||||
.nicklist
|
||||
|
||||
297
public/stylus/layout.styl
Normal file
297
public/stylus/layout.styl
Normal 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
282
public/stylus/theme_default.styl
Normal 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
292
public/stylus/theme_night.styl
Normal 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
|
||||
Reference in New Issue
Block a user