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)
|
###The (non-complete) TODO List (of things left to do)
|
||||||
|
|
||||||
* [MEDIUM] Theme engine
|
|
||||||
* [NORMAL] CAP negotiation
|
* [NORMAL] CAP negotiation
|
||||||
* [LOW] Better input
|
* [LOW] Better input
|
||||||
* [LOW] irc:// URL scheme handling
|
* [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="/socket.io/socket.io.js"></script>
|
||||||
<script type="text/javascript" src="js/main.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/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 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>
|
</head>
|
||||||
<!-- Codepony Diamond -->
|
<!-- Codepony Diamond -->
|
||||||
<body>
|
<body>
|
||||||
@ -70,7 +72,7 @@
|
|||||||
<input type="text" name="timestamp_format" id="s_timestampFormat" value="HH:mm:ss"><br>
|
<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>
|
<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>
|
<h1 class="grade3">Themes</h1>
|
||||||
<p><i>Coming soon!</i></p>
|
<div class="available_themes"></div>
|
||||||
<br>
|
<br>
|
||||||
<p><button class="regular_btn" id="save_settings">Save Settings</button></p>
|
<p><button class="regular_btn" id="save_settings">Save Settings</button></p>
|
||||||
<span class="grade3" id="settings_status"></span>
|
<span class="grade3" id="settings_status"></span>
|
||||||
|
|||||||
@ -7,7 +7,8 @@ window.irc = {
|
|||||||
timestamps: true,
|
timestamps: true,
|
||||||
timestampFormat: "HH:mm:ss",
|
timestampFormat: "HH:mm:ss",
|
||||||
colorNicknames: true,
|
colorNicknames: true,
|
||||||
colorNicklist: false
|
colorNicklist: false,
|
||||||
|
theme: "default"
|
||||||
},
|
},
|
||||||
serverData: {},
|
serverData: {},
|
||||||
serverChatQueue: {},
|
serverChatQueue: {},
|
||||||
@ -18,16 +19,13 @@ window.irc = {
|
|||||||
window.clientdom = {connector: {}, settings: {}};
|
window.clientdom = {connector: {}, settings: {}};
|
||||||
|
|
||||||
window.colorizer = {
|
window.colorizer = {
|
||||||
theme: {
|
|
||||||
H: [1, 360],
|
|
||||||
S: [30, 100],
|
|
||||||
L: [30, 70]
|
|
||||||
},
|
|
||||||
get_random_color: function(nickname) {
|
get_random_color: function(nickname) {
|
||||||
|
let themefunc = window.themes.available[irc.config.theme].nick_pallete;
|
||||||
|
|
||||||
Math.seedrandom(nickname);
|
Math.seedrandom(nickname);
|
||||||
let h = rand(colorizer.theme.H[0], colorizer.theme.H[1]); // color hue between 1 and 360
|
let h = rand(themefunc.H[0], themefunc.H[1]);
|
||||||
let s = rand(colorizer.theme.S[0], colorizer.theme.S[1]); // saturation 30-100%
|
let s = rand(themefunc.S[0], themefunc.S[1]);
|
||||||
let l = rand(colorizer.theme.L[0], colorizer.theme.L[1]); // lightness 30-70%
|
let l = rand(themefunc.L[0], themefunc.L[1]);
|
||||||
return 'hsl(' + h + ',' + s + '%,' + l + '%)';
|
return 'hsl(' + h + ',' + s + '%,' + l + '%)';
|
||||||
},
|
},
|
||||||
strip: function(message) {
|
strip: function(message) {
|
||||||
@ -252,12 +250,19 @@ function linkify(text) {
|
|||||||
|
|
||||||
function removeClass(element, cl) {
|
function removeClass(element, cl) {
|
||||||
let classList = element.className.split(" ");
|
let classList = element.className.split(" ");
|
||||||
remove_str(classList, cl);
|
|
||||||
|
if(classList.indexOf(cl) != -1)
|
||||||
|
classList.splice(classList.indexOf(cl), 1);
|
||||||
|
|
||||||
element.className = classList.join(" ");
|
element.className = classList.join(" ");
|
||||||
}
|
}
|
||||||
|
|
||||||
function addClass(element, cl) {
|
function addClass(element, cl) {
|
||||||
let classList = element.className.split(" ");
|
let classList = element.className.split(" ");
|
||||||
|
|
||||||
|
if(classList.indexOf(cl) != -1)
|
||||||
|
return;
|
||||||
|
|
||||||
classList.push(cl);
|
classList.push(cl);
|
||||||
element.className = classList.join(" ");
|
element.className = classList.join(" ");
|
||||||
}
|
}
|
||||||
@ -339,6 +344,25 @@ let composer = {
|
|||||||
}
|
}
|
||||||
return element;
|
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.tab = null;
|
||||||
this.isOpen = false;
|
this.isOpen = false;
|
||||||
this.timeout = null;
|
this.timeout = null;
|
||||||
|
this.themeSelection = "";
|
||||||
|
|
||||||
clientdom.settings.save.onclick = (e) => {
|
clientdom.settings.save.onclick = (e) => {
|
||||||
this.saveSpecified();
|
this.saveSpecified();
|
||||||
@ -947,6 +972,46 @@ class Settings extends Buffer {
|
|||||||
clientdom.settings.open.onclick = (e) => {
|
clientdom.settings.open.onclick = (e) => {
|
||||||
this.open();
|
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() {
|
open() {
|
||||||
@ -972,15 +1037,19 @@ class Settings extends Buffer {
|
|||||||
if(this.timeout)
|
if(this.timeout)
|
||||||
clearTimeout(this.timeout);
|
clearTimeout(this.timeout);
|
||||||
|
|
||||||
|
this.switch_theme();
|
||||||
|
|
||||||
for(let key in irc.config) {
|
for(let key in irc.config) {
|
||||||
let value = irc.config[key];
|
let value = irc.config[key];
|
||||||
let type = typeof(value);
|
let type = typeof(value);
|
||||||
|
|
||||||
|
if(clientdom.settings[key]) {
|
||||||
if(type == "boolean")
|
if(type == "boolean")
|
||||||
irc.config[key] = clientdom.settings[key].checked;
|
irc.config[key] = clientdom.settings[key].checked;
|
||||||
else
|
else
|
||||||
irc.config[key] = clientdom.settings[key].value;
|
irc.config[key] = clientdom.settings[key].value;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
clientdom.settings.saveStatus.innerHTML = "<span class='success'>Settings saved!</span>";
|
clientdom.settings.saveStatus.innerHTML = "<span class='success'>Settings saved!</span>";
|
||||||
|
|
||||||
if("localStorage" in window) {
|
if("localStorage" in window) {
|
||||||
@ -1000,7 +1069,13 @@ class Settings extends Buffer {
|
|||||||
for(let key in irc.config) {
|
for(let key in irc.config) {
|
||||||
let value = irc.config[key];
|
let value = irc.config[key];
|
||||||
let type = typeof(value);
|
let type = typeof(value);
|
||||||
|
|
||||||
if(settings[key]) {
|
if(settings[key]) {
|
||||||
|
if(key == 'theme') {
|
||||||
|
this.themeSelection = settings[key];
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
if(type == "boolean")
|
if(type == "boolean")
|
||||||
clientdom.settings[key].checked = settings[key];
|
clientdom.settings[key].checked = settings[key];
|
||||||
else
|
else
|
||||||
@ -1017,12 +1092,14 @@ class Settings extends Buffer {
|
|||||||
let value = irc.config[key];
|
let value = irc.config[key];
|
||||||
let type = typeof(value);
|
let type = typeof(value);
|
||||||
|
|
||||||
|
if(clientdom.settings[key]) {
|
||||||
if(type == "boolean")
|
if(type == "boolean")
|
||||||
clientdom.settings[key].checked = value;
|
clientdom.settings[key].checked = value;
|
||||||
else
|
else
|
||||||
clientdom.settings[key].value = value;
|
clientdom.settings[key].value = value;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
addMessage(message, sender, type, time) {
|
addMessage(message, sender, type, time) {
|
||||||
// Don't send messages to the settings buffer
|
// 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[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['save'] = clientdom.settings.frame.querySelector('#save_settings');
|
||||||
clientdom.settings['saveStatus'] = clientdom.settings.frame.querySelector('#settings_status');
|
clientdom.settings['saveStatus'] = clientdom.settings.frame.querySelector('#settings_status');
|
||||||
clientdom.connector['frame'] = irc.primaryFrame.querySelector('#authdialog');
|
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)
|
props(prop, args)
|
||||||
-webkit-{prop} args
|
-webkit-{prop} args
|
||||||
-moz-{prop} args
|
-moz-{prop} args
|
||||||
@ -6,54 +6,36 @@ props(prop, args)
|
|||||||
-o-{prop} args
|
-o-{prop} args
|
||||||
{prop} args
|
{prop} args
|
||||||
|
|
||||||
props2(prop, args)
|
|
||||||
-webkit-{prop} args
|
|
||||||
-moz-{prop} args
|
|
||||||
{prop} args
|
|
||||||
|
|
||||||
transition()
|
transition()
|
||||||
props('transition', arguments)
|
props('transition', arguments)
|
||||||
|
|
||||||
box-shadow()
|
|
||||||
props2('box-shadow', arguments)
|
|
||||||
|
|
||||||
body
|
body
|
||||||
margin: 0
|
margin: 0
|
||||||
padding: 0
|
padding: 0
|
||||||
font-family: Open Sans, Everson Mono, Helvetica
|
font-family: Open Sans, Everson Mono, Helvetica
|
||||||
|
|
||||||
.grade1
|
.grade1
|
||||||
font-size: 200%
|
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
margin-top: 0
|
margin-top: 0
|
||||||
display: block
|
display: block
|
||||||
color: #00BCD4
|
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
.grade2
|
.grade2
|
||||||
font-size: 150%
|
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
margin-top: 20px
|
margin-top: 20px
|
||||||
display: block
|
display: block
|
||||||
color: #00BCD4
|
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
.grade3
|
.grade3
|
||||||
font-size: 120%
|
|
||||||
margin-bottom: 0
|
margin-bottom: 0
|
||||||
margin-top: 20px
|
margin-top: 20px
|
||||||
display: block
|
display: block
|
||||||
color: #00BCD4
|
|
||||||
text-align: center
|
text-align: center
|
||||||
|
|
||||||
.ircclient
|
.ircclient
|
||||||
position: absolute
|
position: absolute
|
||||||
width: 100%
|
width: 100%
|
||||||
height: 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
|
.coverwindow
|
||||||
position: absolute
|
position: absolute
|
||||||
width: 100%
|
width: 100%
|
||||||
@ -65,16 +47,10 @@ body
|
|||||||
margin: auto
|
margin: auto
|
||||||
margin-top: 5%
|
margin-top: 5%
|
||||||
padding: 15px
|
padding: 15px
|
||||||
background-color: #f7f7f7;
|
|
||||||
border: 1px solid #dadada;
|
|
||||||
box-shadow 4px 4px 18px #d6d6d6;
|
|
||||||
.msg.error
|
|
||||||
color: red;
|
|
||||||
label
|
label
|
||||||
display: block
|
display: block
|
||||||
font-size: 80%
|
font-size: 80%
|
||||||
margin-top: 5px
|
margin-top: 5px
|
||||||
color: #2196F3
|
|
||||||
&.autosize
|
&.autosize
|
||||||
width: auto
|
width: auto
|
||||||
display: inline-block !important
|
display: inline-block !important
|
||||||
@ -84,29 +60,16 @@ body
|
|||||||
padding: 8px;
|
padding: 8px;
|
||||||
width: 300px;
|
width: 300px;
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 1px solid #d2d2d2;
|
|
||||||
box-shadow inset 2px 2px 4px #dcdcdc;
|
|
||||||
input[type="submit"]
|
input[type="submit"]
|
||||||
width: 318px;
|
width: 318px;
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
margin-top: 20px;
|
margin-top: 20px;
|
||||||
display: block;
|
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;
|
border-radius: 4px;
|
||||||
color: #fff;
|
|
||||||
font-size: 120%;
|
font-size: 120%;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
cursor: pointer
|
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
|
#chat
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
.ircwrapper
|
.ircwrapper
|
||||||
@ -115,10 +78,8 @@ body
|
|||||||
height: 100%
|
height: 100%
|
||||||
.toolbar
|
.toolbar
|
||||||
height: 56px
|
height: 56px
|
||||||
background-color: #00c7e0
|
|
||||||
position: relative
|
position: relative
|
||||||
z-index: 15
|
z-index: 15
|
||||||
box-shadow 2px 2px 4px #cecece
|
|
||||||
.open_settings
|
.open_settings
|
||||||
width: 36px;
|
width: 36px;
|
||||||
height: 36px;
|
height: 36px;
|
||||||
@ -127,21 +88,18 @@ body
|
|||||||
right: 10px;
|
right: 10px;
|
||||||
top: 10px;
|
top: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
background-image: url(../image/settings.svg);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
transition transform 0.2s linear
|
transition transform 0.2s linear
|
||||||
&:hover
|
&:hover
|
||||||
transform: rotateZ(-90deg);
|
transform: rotateZ(-90deg);
|
||||||
.tabby
|
.tabby
|
||||||
display: inline-block;
|
display: inline-block
|
||||||
height: 56px;
|
height: 56px
|
||||||
position: absolute;
|
position: absolute
|
||||||
right: 45px;
|
right: 45px
|
||||||
left: 0;
|
left: 0
|
||||||
white-space: nowrap;
|
white-space: nowrap
|
||||||
overflow-x: auto;
|
overflow-x: auto
|
||||||
overflow-y: hidden;
|
overflow-y: hidden
|
||||||
.tab
|
.tab
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 60px;
|
min-width: 60px;
|
||||||
@ -150,21 +108,14 @@ body
|
|||||||
margin-right: 0;
|
margin-right: 0;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
line-height: 25px;
|
line-height: 25px;
|
||||||
background-color: #29e1ff;
|
|
||||||
transition background-color 0.2s linear
|
transition background-color 0.2s linear
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
border: 1px solid #00d0ea;
|
|
||||||
box-shadow inset 4px 4px 8px #44ebff;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
#unread
|
#unread
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
min-width: 18px;
|
min-width: 18px;
|
||||||
height: 18px;
|
height: 18px;
|
||||||
background-color: #bf0000;
|
|
||||||
border: 1px solid #b00;
|
|
||||||
box-shadow inset 2px 2px 3px #f00;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
@ -176,35 +127,20 @@ body
|
|||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 12px;
|
width: 12px;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: #ff3d3d;
|
|
||||||
margin-left: 5px
|
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
|
.chatarea
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 56px;
|
top: 56px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
bottom: 46px;
|
bottom: 46px;
|
||||||
.smsc-nicklistbtn
|
.smsc-nicklistbtn
|
||||||
background-image: url(../image/users.svg);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
width: 46px;
|
width: 46px;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 16px;
|
top: 16px;
|
||||||
right: 16px;
|
right: 16px;
|
||||||
background-color: #00bcd4;
|
|
||||||
border-radius: 100%;
|
border-radius: 100%;
|
||||||
border: 5px solid #389dbb;
|
|
||||||
display: none;
|
display: none;
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -214,8 +150,6 @@ body
|
|||||||
height: 20px;
|
height: 20px;
|
||||||
right: 0;
|
right: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
background-color: #fff;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
padding: 12px;
|
padding: 12px;
|
||||||
display: none;
|
display: none;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -239,18 +173,14 @@ body
|
|||||||
width: 280px;
|
width: 280px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
border-left: 1px solid #ddd;
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
top: 0;
|
top: 0;
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
display: none;
|
display: none;
|
||||||
z-index: 11;
|
z-index: 11;
|
||||||
background-color: #ffffff;
|
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
.nick
|
.nick
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
&:hover
|
|
||||||
background-color: #aeebff;
|
|
||||||
.nickname
|
.nickname
|
||||||
font-size: 120%;
|
font-size: 120%;
|
||||||
.prefix
|
.prefix
|
||||||
@ -259,9 +189,7 @@ body
|
|||||||
line-height: 16px;
|
line-height: 16px;
|
||||||
padding: 2px;
|
padding: 2px;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
background-color: #05abe0;
|
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
text-align: center;
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
@ -298,9 +226,7 @@ body
|
|||||||
bottom: 0;
|
bottom: 0;
|
||||||
height: 46px;
|
height: 46px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
background-color: #00c7e0;
|
|
||||||
.my_nickname
|
.my_nickname
|
||||||
background-color: #00efef;
|
|
||||||
margin: 5px;
|
margin: 5px;
|
||||||
padding: 7px;
|
padding: 7px;
|
||||||
border-top-left-radius: 10px;
|
border-top-left-radius: 10px;
|
||||||
@ -320,13 +246,8 @@ body
|
|||||||
width: 100%
|
width: 100%
|
||||||
padding: 6px
|
padding: 6px
|
||||||
font-size: 120%
|
font-size: 120%
|
||||||
border: 1px solid #929292
|
|
||||||
border-left: 0
|
border-left: 0
|
||||||
box-shadow inset 4px 4px 8px #d8d8d8
|
|
||||||
.sendbutton
|
.sendbutton
|
||||||
background-image: url(../image/send.svg);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
width: 32px;
|
width: 32px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
@ -335,158 +256,6 @@ body
|
|||||||
right: 5px;
|
right: 5px;
|
||||||
cursor: pointer;
|
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)
|
@media all and (max-width: 600px)
|
||||||
.vnicks
|
.vnicks
|
||||||
.nicklist
|
.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