settings
This commit is contained in:
parent
1c493eecc1
commit
f05fcef7db
|
|
@ -51,6 +51,8 @@ body {
|
|||
padding: 15px;
|
||||
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 {
|
||||
|
|
@ -68,6 +70,8 @@ body {
|
|||
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 .coverwindow .wrapper input[type="submit"] {
|
||||
|
|
@ -93,6 +97,9 @@ body {
|
|||
background: -webkit-linear-gradient(top, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
|
||||
background: linear-gradient(to bottom, #c4effc 0%, #7fd5ef 40%, #39b7dd 100%);
|
||||
}
|
||||
.ircclient #chat {
|
||||
overflow: hidden;
|
||||
}
|
||||
.ircclient #chat .ircwrapper {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
|
|
@ -103,20 +110,36 @@ body {
|
|||
background-color: #00c7e0;
|
||||
position: relative;
|
||||
z-index: 15;
|
||||
-webkit-box-shadow: 2px 2px 4px #cecece;
|
||||
-moz-box-shadow: 2px 2px 4px #cecece;
|
||||
box-shadow: 2px 2px 4px #cecece;
|
||||
}
|
||||
.ircclient #chat .ircwrapper .toolbar .logo {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
.ircclient #chat .ircwrapper .toolbar .open_settings {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
cursor: pointer;
|
||||
background-image: url("../image/settings.svg");
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
-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;
|
||||
left: 60px;
|
||||
right: 0;
|
||||
right: 45px;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
|
@ -130,8 +153,15 @@ body {
|
|||
padding: 10px;
|
||||
line-height: 25px;
|
||||
background-color: #29e1ff;
|
||||
-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;
|
||||
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;
|
||||
cursor: pointer;
|
||||
|
|
@ -143,6 +173,8 @@ body {
|
|||
height: 18px;
|
||||
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;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
|
|
@ -158,15 +190,19 @@ body {
|
|||
width: 12px;
|
||||
text-align: center;
|
||||
color: #ff3d3d;
|
||||
float: right;
|
||||
margin-left: 5px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
|
@ -223,6 +259,7 @@ body {
|
|||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
padding: 5px;
|
||||
}
|
||||
.ircclient #chat .ircwrapper .chatarea .nicklist {
|
||||
width: 280px;
|
||||
|
|
@ -263,6 +300,23 @@ body {
|
|||
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 .grade1,
|
||||
.ircclient #chat .ircwrapper .chatarea .settings .grade2,
|
||||
.ircclient #chat .ircwrapper .chatarea .settings .grade3 {
|
||||
text-align: left;
|
||||
}
|
||||
.ircclient #chat .ircwrapper .chatarea.vnicks .nicklist {
|
||||
display: block;
|
||||
}
|
||||
|
|
@ -310,6 +364,8 @@ body {
|
|||
font-size: 120%;
|
||||
border: 1px solid #929292;
|
||||
border-left: 0;
|
||||
-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 {
|
||||
|
|
|
|||
|
|
@ -23,9 +23,9 @@
|
|||
c4.4,3.1,10.2,3.3,14.8,0.6c13-7.8,27.1-13.8,41.8-17.6c5.1-1.4,9-5.6,9.9-10.8l7.2-42.3c0.2-1.3,1.3-2.2,2.6-2.2h42.1
|
||||
c1.3,0,2.4,0.9,2.6,2.2l7,41.7c0.9,5.3,4.8,9.6,10,10.9c15.1,3.8,29.5,9.7,42.9,17.6c4.6,2.7,10.3,2.5,14.7-0.6l34.5-24.8
|
||||
c0.5-0.3,1-0.5,1.5-0.5c0.4,0,1.2,0.1,1.9,0.8l29.8,29.8c0.9,0.9,1,2.3,0.3,3.4l-24.7,34.7c-3.1,4.3-3.3,10.1-0.6,14.7
|
||||
c7.8,13.1,13.6,27.2,17.4,41.9c1.3,5.2,5.6,9.1,10.8,9.9l42,7.1c1.3,0.2,2.2,1.3,2.2,2.6v42.1H451.9z"/>
|
||||
c7.8,13.1,13.6,27.2,17.4,41.9c1.3,5.2,5.6,9.1,10.8,9.9l42,7.1c1.3,0.2,2.2,1.3,2.2,2.6v42.1H451.9z" fill="#FFFFFF"/>
|
||||
<path d="M239.4,136.001c-57,0-103.3,46.3-103.3,103.3s46.3,103.3,103.3,103.3s103.3-46.3,103.3-103.3S296.4,136.001,239.4,136.001
|
||||
z M239.4,315.601c-42.1,0-76.3-34.2-76.3-76.3s34.2-76.3,76.3-76.3s76.3,34.2,76.3,76.3S281.5,315.601,239.4,315.601z"/>
|
||||
z M239.4,315.601c-42.1,0-76.3-34.2-76.3-76.3s34.2-76.3,76.3-76.3s76.3,34.2,76.3,76.3S281.5,315.601,239.4,315.601z" fill="#FFFFFF"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 3.0 KiB After Width: | Height: | Size: 3.0 KiB |
|
|
@ -40,16 +40,33 @@
|
|||
<div class="coverwindow" id="chat" style="display: none;">
|
||||
<div class="ircwrapper">
|
||||
<div class="toolbar">
|
||||
<span class="logo"></span>
|
||||
<div class="tabby">
|
||||
|
||||
</div>
|
||||
<div class="tabby"></div>
|
||||
<span class="open_settings"></span>
|
||||
</div>
|
||||
<div class="chatarea">
|
||||
<div class="smsc-nicklistbtn"></div>
|
||||
<div class="topicbar"></div>
|
||||
<div class="letterbox"></div>
|
||||
<div class="nicklist"></div>
|
||||
<div class="settings" style="display: none;">
|
||||
<h1 class="grade1">Teemant Settings</h1>
|
||||
<h1 class="grade2">Chat</h1>
|
||||
<p>Shared input field <input type="checkbox" name="colors" id="s_sharedInput"></p>
|
||||
<h1 class="grade3">Colors</h1>
|
||||
<p>Enable colored messages <input type="checkbox" name="colors" id="s_colors" checked="checked"></p>
|
||||
<p>Color nicknames <input type="checkbox" name="colored_nicks" id="s_colorNicknames" checked="checked"></p>
|
||||
<p>Color nicknames in the user list<input type="checkbox" name="colored_nicks_list" id="s_colorNicklist"></p>
|
||||
<h1 class="grade3">Timestamps</h1>
|
||||
<p>Enable timestamps on messages <input type="checkbox" name="timestamps" id="s_timestamps" checked="checked"></p>
|
||||
<label for="timestamp_format">Timestamp format</label>
|
||||
<input type="text" name="timestamp_format" id="s_timestampFormat" value="HH:mm:ss"><br>
|
||||
<i style="font-size: 80%;">`<code>hh:mm:ss TT</code>` would be 12-hour format with PM/AM</i>
|
||||
<h1 class="grade3">Themes</h1>
|
||||
<p><i>Coming soon!</i></p>
|
||||
<br>
|
||||
<p><button class="regular_btn" id="save_settings">Save Settings</button></p>
|
||||
<span class="grade3" id="settings_status"></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="input">
|
||||
<div class="my_nickname">Test</div>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,20 @@
|
|||
window.irc = {
|
||||
socketUp: false,
|
||||
primaryFrame: null,
|
||||
timestamps: true,
|
||||
timestampFormat: "HH:mm:ss",
|
||||
config: {
|
||||
colors: true,
|
||||
sharedInput: false,
|
||||
timestamps: true,
|
||||
timestampFormat: "HH:mm:ss",
|
||||
colorNicknames: true,
|
||||
colorNicklist: false
|
||||
},
|
||||
serverData: {},
|
||||
serverChatQueue: {},
|
||||
chatType: "simple",
|
||||
};
|
||||
|
||||
window.clientdom = {connector: {}};
|
||||
window.clientdom = {connector: {}, settings: {}};
|
||||
|
||||
window.colorizer = {
|
||||
theme: {
|
||||
|
|
@ -22,6 +28,9 @@ window.colorizer = {
|
|||
let s = rand(colorizer.theme.S[0], colorizer.theme.S[1]); // saturation 30-100%
|
||||
let l = rand(colorizer.theme.L[0], colorizer.theme.L[1]); // lightness 30-70%
|
||||
return 'hsl(' + h + ',' + s + '%,' + l + '%)';
|
||||
},
|
||||
strip: function(message) {
|
||||
return message.replace(/(\x03\d{0,2}(,\d{0,2})?)/g, '').replace(/[\x0F\x02\x16\x1F]/g, '');
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -249,10 +258,14 @@ let composer = {
|
|||
let element = document.createElement('div');
|
||||
element.className = "message type_simple m_"+type;
|
||||
|
||||
if(irc.timestamps)
|
||||
element.innerHTML += "<span class='timestamp'>"+time.format(irc.timestampFormat)+"</span> ";
|
||||
if(irc.config.timestamps)
|
||||
element.innerHTML += "<span class='timestamp'>"+time.format(irc.config.timestampFormat)+"</span> ";
|
||||
|
||||
if(irc.config.colors)
|
||||
message = colorizer.stylize(message);
|
||||
else
|
||||
message = colorizer.strip(message);
|
||||
|
||||
message = colorizer.stylize(message);
|
||||
message = linkify(message);
|
||||
|
||||
switch(type) {
|
||||
|
|
@ -284,18 +297,19 @@ let composer = {
|
|||
break;
|
||||
}
|
||||
|
||||
if(sender) {
|
||||
let sndr1 = element.querySelector('.sender');
|
||||
if(sndr1)
|
||||
sndr1.style.color = colorizer.get_random_color(sndr1.innerHTML);
|
||||
}
|
||||
if(irc.config.colorNicknames == true) {
|
||||
if(sender) {
|
||||
let sndr1 = element.querySelector('.sender');
|
||||
if(sndr1)
|
||||
sndr1.style.color = colorizer.get_random_color(sndr1.innerHTML);
|
||||
}
|
||||
|
||||
let sndr2 = element.querySelectorAll('.nick');
|
||||
if(sndr2.length > 0)
|
||||
for(let a in sndr2)
|
||||
if(sndr2[a] && sndr2[a]['style'])
|
||||
sndr2[a].style.color = colorizer.get_random_color(sndr2[a].innerHTML);
|
||||
|
||||
let sndr2 = element.querySelectorAll('.nick');
|
||||
if(sndr2.length > 0)
|
||||
for(let a in sndr2)
|
||||
if(sndr2[a] && sndr2[a]['style'])
|
||||
sndr2[a].style.color = colorizer.get_random_color(sndr2[a].innerHTML);
|
||||
}
|
||||
return element;
|
||||
}
|
||||
}
|
||||
|
|
@ -345,7 +359,11 @@ class Nicklist {
|
|||
else
|
||||
construct += "<span class='no-prefix'> </span>";
|
||||
|
||||
construct += "<span class='nickname'>"+nick.nickname+"</span>";
|
||||
if(irc.config.colorNicklist)
|
||||
construct += "<span class='nickname' style='color: "+colorizer.get_random_color(nick.nickname)+";'>"+nick.nickname+"</span>";
|
||||
else
|
||||
construct += "<span class='nickname'>"+nick.nickname+"</span>";
|
||||
|
||||
str.innerHTML = construct;
|
||||
clientdom.nicklist.appendChild(str);
|
||||
}
|
||||
|
|
@ -556,8 +574,10 @@ class Buffer {
|
|||
this.active = false;
|
||||
this.alive = true;
|
||||
|
||||
this.tab = new Tab(this);
|
||||
this.tab.renderTab(clientdom.tabby);
|
||||
if(type != "settings") {
|
||||
this.tab = new Tab(this);
|
||||
this.tab.renderTab();
|
||||
}
|
||||
|
||||
if(type == "channel")
|
||||
this.nicklist = new Nicklist(this, clientdom.nicklist);
|
||||
|
|
@ -573,6 +593,9 @@ class Buffer {
|
|||
clientdom.nicklist.innerHTML = "";
|
||||
clientdom.topicbar.innerHTML = "";
|
||||
|
||||
if(!irc.config.sharedInput)
|
||||
clientdom.input.value = this.input;
|
||||
|
||||
if(this.nicklist) {
|
||||
addClass(clientdom.chat, 'vnicks');
|
||||
this.nicklist.render();
|
||||
|
|
@ -580,7 +603,10 @@ class Buffer {
|
|||
|
||||
if(this.topic != null && this.topic != "") {
|
||||
addClass(clientdom.chat, 'vtopic');
|
||||
clientdom.topicbar.innerHTML = linkify(colorizer.stylize(this.topic));
|
||||
if(irc.config.colors)
|
||||
clientdom.topicbar.innerHTML = linkify(colorizer.stylize(this.topic));
|
||||
else
|
||||
clientdom.topicbar.innerHTML = linkify(colorizer.strip(this.topic));
|
||||
}
|
||||
|
||||
this.renderMessages();
|
||||
|
|
@ -621,7 +647,10 @@ class Buffer {
|
|||
|
||||
topicChange(topic) {
|
||||
if(this.active) {
|
||||
clientdom.topicbar.innerHTML = linkify(colorizer.stylize(topic));
|
||||
if(irc.config.colors)
|
||||
clientdom.topicbar.innerHTML = linkify(colorizer.stylize(topic));
|
||||
else
|
||||
clientdom.topicbar.innerHTML = linkify(colorizer.strip(topic));
|
||||
|
||||
if(this.topic == null)
|
||||
addClass(clientdom.chat, "vtopic");
|
||||
|
|
@ -654,6 +683,9 @@ class Buffer {
|
|||
else
|
||||
this.wasAtBottom = false;
|
||||
|
||||
if(!irc.config.sharedInput)
|
||||
this.input = clientdom.input.value;
|
||||
|
||||
this.tab.setActive(false);
|
||||
this.lastscroll = clientdom.letterbox.scrollTop;
|
||||
this.active = false;
|
||||
|
|
@ -672,6 +704,114 @@ class Buffer {
|
|||
}
|
||||
}
|
||||
|
||||
class Settings extends Buffer {
|
||||
constructor() {
|
||||
super("", "settings", "Settings", "settings");
|
||||
this.tab = null;
|
||||
this.isOpen = false;
|
||||
this.timeout = null;
|
||||
|
||||
clientdom.settings.save.onclick = (e) => {
|
||||
this.saveSpecified();
|
||||
}
|
||||
|
||||
clientdom.settings.open.onclick = (e) => {
|
||||
this.open();
|
||||
}
|
||||
}
|
||||
|
||||
open() {
|
||||
if(this.isOpen) {
|
||||
irc.chat.render(this);
|
||||
return;
|
||||
}
|
||||
|
||||
this.tab = new Tab(this);
|
||||
this.tab.renderTab();
|
||||
irc.chat.buffers.push(this);
|
||||
irc.chat.render(this);
|
||||
this.isOpen = true;
|
||||
}
|
||||
|
||||
closeBuffer() {
|
||||
irc.chat.closeBuffer(this);
|
||||
this.tab = null;
|
||||
this.isOpen = false;
|
||||
}
|
||||
|
||||
saveSpecified() {
|
||||
if(this.timeout)
|
||||
clearTimeout(this.timeout);
|
||||
|
||||
for(let key in irc.config) {
|
||||
let value = irc.config[key];
|
||||
let type = typeof(value);
|
||||
|
||||
if(type == "boolean")
|
||||
irc.config[key] = clientdom.settings[key].checked;
|
||||
else
|
||||
irc.config[key] = clientdom.settings[key].value;
|
||||
}
|
||||
clientdom.settings.saveStatus.innerHTML = "<span class='success'>Settings saved!</span>";
|
||||
|
||||
if("localStorage" in window) {
|
||||
window.localStorage['teemant_settings'] = JSON.stringify(irc.config);
|
||||
}
|
||||
|
||||
this.timeout = setTimeout(function() {
|
||||
clientdom.settings.saveStatus.innerHTML = "";
|
||||
}, 3000);
|
||||
}
|
||||
|
||||
setInitialValues() {
|
||||
if("localStorage" in window) {
|
||||
if(window.localStorage['teemant_settings']) {
|
||||
try {
|
||||
let settings = JSON.parse(window.localStorage.teemant_settings);
|
||||
for(let key in irc.config) {
|
||||
let value = irc.config[key];
|
||||
let type = typeof(value);
|
||||
if(settings[key]) {
|
||||
if(type == "boolean")
|
||||
clientdom.settings[key].checked = settings[key];
|
||||
else
|
||||
clientdom.settings[key].value = settings[key];
|
||||
}
|
||||
}
|
||||
this.saveSpecified();
|
||||
return;
|
||||
} catch(e) {}
|
||||
}
|
||||
}
|
||||
|
||||
for(let key in irc.config) {
|
||||
let value = irc.config[key];
|
||||
let type = typeof(value);
|
||||
|
||||
if(type == "boolean")
|
||||
clientdom.settings[key].checked = value;
|
||||
else
|
||||
clientdom.settings[key].value = value;
|
||||
}
|
||||
}
|
||||
|
||||
switchOff() {
|
||||
this.active = false;
|
||||
this.tab.setActive(false);
|
||||
clientdom.settings.frame.style.display = "none";
|
||||
}
|
||||
|
||||
render() {
|
||||
this.active = true;
|
||||
this.tab.setActive(true);
|
||||
clientdom.chat.className = "chatarea";
|
||||
clientdom.nicklist.innerHTML = "";
|
||||
clientdom.topicbar.innerHTML = "";
|
||||
clientdom.letterbox.innerHTML = "";
|
||||
clientdom.settings.frame.style.display = "block";
|
||||
}
|
||||
}
|
||||
|
||||
class IRCConnector {
|
||||
constructor() {
|
||||
this.formLocked = false;
|
||||
|
|
@ -1311,6 +1451,14 @@ window.onpopstate = parseURL;
|
|||
window.onload = function() {
|
||||
irc.primaryFrame = document.querySelector('.ircclient');
|
||||
|
||||
clientdom.settings['frame'] = irc.primaryFrame.querySelector('.settings');
|
||||
|
||||
for(let key in irc.config) {
|
||||
clientdom.settings[key] = clientdom.settings.frame.querySelector('#s_'+key);
|
||||
}
|
||||
|
||||
clientdom.settings['save'] = clientdom.settings.frame.querySelector('#save_settings');
|
||||
clientdom.settings['saveStatus'] = clientdom.settings.frame.querySelector('#settings_status');
|
||||
clientdom.connector['frame'] = irc.primaryFrame.querySelector('#authdialog');
|
||||
clientdom.connector['messenger'] = clientdom.connector.frame.querySelector('#connmsg');
|
||||
clientdom.connector['form'] = clientdom.connector.frame.querySelector('#IRCConnector');
|
||||
|
|
@ -1329,13 +1477,16 @@ window.onload = function() {
|
|||
clientdom['chat'] = clientdom.frame.querySelector('.chatarea');
|
||||
clientdom['topicbar'] = clientdom.chat.querySelector('.topicbar');
|
||||
clientdom['smsctrig'] = clientdom.chat.querySelector('.smsc-nicklistbtn');
|
||||
clientdom.settings['open'] = irc.primaryFrame.querySelector('.open_settings');
|
||||
|
||||
irc.socket = io.connect();
|
||||
|
||||
irc.settings = new Settings();
|
||||
irc.auther = new IRCConnector();
|
||||
irc.chat = new IRCChatWindow();
|
||||
|
||||
parseURL();
|
||||
irc.settings.setInitialValues();
|
||||
|
||||
irc.socket.on('connect', function (data) {
|
||||
irc.socketUp = true;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,21 @@
|
|||
// Run `stylus -w main.styl -o css` to compile
|
||||
props(prop, args)
|
||||
-webkit-{prop} args
|
||||
-moz-{prop} args
|
||||
-ms-{prop} args
|
||||
-o-{prop} args
|
||||
{prop} args
|
||||
|
||||
props2(prop, args)
|
||||
-webkit-{prop} args
|
||||
-moz-{prop} args
|
||||
{prop} args
|
||||
|
||||
transition()
|
||||
props('transition', arguments)
|
||||
|
||||
box-shadow()
|
||||
props2('box-shadow', arguments)
|
||||
|
||||
body
|
||||
margin: 0
|
||||
|
|
@ -50,7 +67,7 @@ body
|
|||
padding: 15px
|
||||
background-color: #f7f7f7;
|
||||
border: 1px solid #dadada;
|
||||
box-shadow: 4px 4px 18px #d6d6d6;
|
||||
box-shadow 4px 4px 18px #d6d6d6;
|
||||
.msg.error
|
||||
color: red;
|
||||
label
|
||||
|
|
@ -63,7 +80,7 @@ body
|
|||
width: 300px;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #d2d2d2;
|
||||
box-shadow: inset 2px 2px 4px #dcdcdc;
|
||||
box-shadow inset 2px 2px 4px #dcdcdc;
|
||||
input[type="submit"]
|
||||
width: 318px;
|
||||
padding: 12px;
|
||||
|
|
@ -86,6 +103,7 @@ body
|
|||
background: -webkit-linear-gradient(top, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
|
||||
background: linear-gradient(to bottom, rgba(196,239,252,1) 0%,rgba(127,213,239,1) 40%,rgba(57,183,221,1) 100%);
|
||||
#chat
|
||||
overflow: hidden;
|
||||
.ircwrapper
|
||||
position: absolute
|
||||
width: 100%
|
||||
|
|
@ -95,18 +113,27 @@ body
|
|||
background-color: #00c7e0
|
||||
position: relative
|
||||
z-index: 15
|
||||
box-shadow: 2px 2px 4px #cecece
|
||||
.logo
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
box-shadow 2px 2px 4px #cecece
|
||||
.open_settings
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
display: inline-block;
|
||||
margin: 0 5px;
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
top: 10px;
|
||||
cursor: pointer;
|
||||
background-image: url(../image/settings.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
transition transform 0.2s linear
|
||||
&:hover
|
||||
transform: rotateZ(-90deg);
|
||||
.tabby
|
||||
display: inline-block;
|
||||
height: 56px;
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
right: 0;
|
||||
right: 45px;
|
||||
left: 0;
|
||||
white-space: nowrap;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
|
|
@ -119,9 +146,10 @@ body
|
|||
padding: 10px;
|
||||
line-height: 25px;
|
||||
background-color: #29e1ff;
|
||||
transition background-color 0.2s linear
|
||||
border-radius: 5px;
|
||||
border: 1px solid #00d0ea;
|
||||
box-shadow: inset 4px 4px 8px #44ebff;
|
||||
box-shadow inset 4px 4px 8px #44ebff;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
|
|
@ -131,7 +159,7 @@ body
|
|||
height: 18px;
|
||||
background-color: #bf0000;
|
||||
border: 1px solid #b00;
|
||||
box-shadow: inset 2px 2px 3px #f00;
|
||||
box-shadow inset 2px 2px 3px #f00;
|
||||
text-align: center;
|
||||
font-size: 12px;
|
||||
margin: 0 5px;
|
||||
|
|
@ -144,14 +172,14 @@ body
|
|||
width: 12px;
|
||||
text-align: center;
|
||||
color: #ff3d3d;
|
||||
float: right;
|
||||
margin-left: 5px
|
||||
&:hover
|
||||
background-color: #63e9ff;
|
||||
box-shadow: inset 4px 4px 8px #86f2ff;
|
||||
box-shadow inset 4px 4px 8px #86f2ff;
|
||||
&.active
|
||||
background-color: #00b9d8;
|
||||
border: 1px solid #009aad;
|
||||
box-shadow: inset 4px 4px 8px #009caf;
|
||||
box-shadow inset 4px 4px 8px #009caf;
|
||||
color: #ffffff;
|
||||
&:hover
|
||||
background-color: #00c7e8;
|
||||
|
|
@ -201,6 +229,7 @@ body
|
|||
overflow-y: auto;
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
padding: 5px;
|
||||
.nicklist
|
||||
width: 280px;
|
||||
position: absolute;
|
||||
|
|
@ -234,6 +263,19 @@ body
|
|||
.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;
|
||||
.grade1, .grade2, .grade3
|
||||
text-align: left;
|
||||
&.vnicks
|
||||
.nicklist
|
||||
display: block;
|
||||
|
|
@ -275,7 +317,7 @@ body
|
|||
font-size: 120%
|
||||
border: 1px solid #929292
|
||||
border-left: 0
|
||||
box-shadow: inset 4px 4px 8px #d8d8d8
|
||||
box-shadow inset 4px 4px 8px #d8d8d8
|
||||
.sendbutton
|
||||
background-image: url(../image/send.svg);
|
||||
background-repeat: no-repeat;
|
||||
|
|
|
|||
|
|
@ -186,7 +186,7 @@ class IRCConnectionHandler {
|
|||
this.conn.emit('pass_to_client', {type: "nick_change", nick: line.user.nickname, newNick: line.arguments[0], server: serverName});
|
||||
break;
|
||||
case "KICK":
|
||||
this.conn.emit('pass_to_client', {type: "event_kick_channel", user: line.user, channel: line.arguments[0], kickee: line.arguments[1], server: serverName});
|
||||
this.conn.emit('pass_to_client', {type: "event_kick_channel", user: line.user, channel: line.arguments[0], reason: line.trailing, kickee: line.arguments[1], server: serverName});
|
||||
break;
|
||||
case "TOPIC":
|
||||
this.conn.emit('pass_to_client', {type: "channel_topic", channel: line.arguments[0], set_by: line.user.nickname, topic: line.trailing, server: serverName});
|
||||
|
|
|
|||
Reference in New Issue