moparisthebest/kaiwa
1
0
Fork 0
mirror of https://github.com/moparisthebest/kaiwa synced 2024-11-21 08:45:12 -05:00
Code Issues Releases Wiki Activity

new design for Kaiwa to distinguish from Slack

Browse Source
This commit is contained in:
Sébastien Hut 2015-04-09 15:18:28 +02:00
parent 34d216365b
commit 89c0fe23ac
22 changed files with 309 additions and 305 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
clientapp/templates.js
View File

@ -13,7 +13,7 @@ exports.pages = {};
exports.body = function anonymous(locals) { exports.body = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<body><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="organization"><span id="orga_name"></span><a href="/" class="button secondary settings"><svg id="settingssvg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg></a></section><section id="bookmarks"><h1>Rooms</h1><nav></nav><input type="text" placeholder="add a room" id="joinmuc" class="inline"/></section><section id="roster"><h1>Direct messages</h1><ul id="contactrequests"></ul><nav></nav><input type="text" placeholder="add a contact" id="addcontact" class="inline"/></section></aside><header id="topbar"><div id="connectionStatus"><p>You\'re currently&nbsp;<strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></div><div id="me"><img class="avatar"/><div><span class="name"></span><span contenteditable="true" spellcheck="false" class="status"></span></div></div></header><main id="pages"></main></div></body>'); buf.push('<body><div id="updateBar"><p>Update available!</p><button class="primary upgrade">Upgrade</button></div><div id="wrapper"><aside id="menu"><section id="organization"><span id="orga_name"></span><a href="/" class="button secondary settings"><svg id="settingssvg" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 25 25" height="25" width="25"><g transform="scale(0.4)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg></a></section><div class="viewport"><section id="bookmarks"><h1>Rooms</h1><nav></nav><input type="text" placeholder="add a room" id="joinmuc" class="inline"/></section><section id="roster"><h1>Contacts</h1><ul id="contactrequests"></ul><nav></nav><input type="text" placeholder="add a contact" id="addcontact" class="inline"/></section></div><section id="kaiwaNotice"><img src="/images/logo.png" alt="Kaiwa"/></section></aside><header id="topbar"><div id="connectionStatus"><p>You\'re currently&nbsp;<strong>disconnected</strong></p><button class="primary reconnect">Reconnect</button></div><div id="me"><img class="avatar"/><div><span class="name"></span><span contenteditable="true" spellcheck="false" class="status"></span></div></div></header><main id="pages"></main></div></body>');
} }
return buf.join(""); return buf.join("");
}; };
@ -113,7 +113,7 @@ exports.includes.call = function anonymous(locals) {
exports.includes.contactListItem = function anonymous(locals) { exports.includes.contactListItem = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<li class="contact joined"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="presence fa fa-circle"></i><div class="user"><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + "</div></div></li>"); buf.push('<li class="contact joined"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="presence fa fa-circle"></i><div class="user"><img class="avatar"/><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + '</span><span class="idleTime">' + jade.escape(null == (jade.interp = contact.idleSince) ? "" : jade.interp) + '</span></div><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + "</div></div></li>");
} }
return buf.join(""); return buf.join("");
}; };
@ -320,7 +320,7 @@ exports.includes.mucBareMessage = function anonymous(locals) {
exports.includes.mucListItem = function anonymous(locals) { exports.includes.mucListItem = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<li class="contact"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="join fa fa-sign-in"></i><span class="prefix">#</span><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + "</span></div></li>"); buf.push('<li class="contact"><div class="wrap"><i class="remove fa fa-times-circle"></i><i class="join fa fa-sign-in"></i><div class="unread">' + jade.escape(null == (jade.interp = contact.unreadCount) ? "" : jade.interp) + '</div><span class="name">' + jade.escape(null == (jade.interp = contact.displayName) ? "" : jade.interp) + "</span></div></li>");
} }
return buf.join(""); return buf.join("");
}; };
@ -539,7 +539,7 @@ exports.misc.growlMessage = function anonymous(locals) {
exports.pages.chat = function anonymous(locals) { exports.pages.chat = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<section class="page chat"><section class="conversation"><header><div class="title"><span class="prefix">@</span><span class="name"></span><i class="user_presence fa fa-circle"></i><span class="status"></span></div><div class="tzo"></div></header><ul class="messages scroll-container"></ul><div class="activeCall"><div class="container"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="accept primary">Accept</button><button class="end secondary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></div><div class="chatBox"><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form><button class="primary small call">Call</button><div class="contactState"></div></div></section></section>'); buf.push('<section class="page chat"><section class="conversation"><header><div class="title"><span class="name"></span><i class="user_presence fa fa-circle"></i><span class="status"></span></div><div class="tzo"></div></header><ul class="messages scroll-container"></ul><div class="activeCall"><div class="container"><video autoplay="autoplay" class="remote"></video><video autoplay="autoplay" muted="muted" class="local"></video><aside class="button-wrap"><button class="accept primary">Accept</button><button class="end secondary">End</button><div class="button-group outlined"><button class="mute">Mute</button><button class="unmute">Unmute</button></div></aside></div></div><div class="chatBox"><div class="contactState"></div><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form><button class="primary small call">Call</button></div></section></section>');
} }
return buf.join(""); return buf.join("");
}; };
@ -548,7 +548,7 @@ exports.pages.chat = function anonymous(locals) {
exports.pages.groupchat = function anonymous(locals) { exports.pages.groupchat = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<section class="page chat"><section class="group conversation"><header class="online"><div class="title"><span class="prefix">#</span><span class="name"></span><i class="channel_actions fa fa-comments-o"></i><span contenteditable="true" spellcheck="false" class="status"></span></div></header><ul class="messages"></ul><a id="members_toggle"><i class="fa fa-user"></i><span id="members_toggle_count"></span></a><ul class="groupRoster"></ul><div class="chatBox"><ul class="autoComplete"></ul><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>'); buf.push('<section class="page chat"><section class="group conversation"><header class="online"><div class="title"><span class="name"></span><i class="channel_actions fa fa-comments-o"></i><span contenteditable="true" spellcheck="false" class="status"></span></div></header><ul class="messages"></ul><a id="members_toggle"><i class="fa fa-user"></i><span id="members_toggle_count"></span></a><ul class="groupRoster"></ul><div class="chatBox"><ul class="autoComplete"></ul><form class="formwrap"><textarea name="chatInput" type="text" placeholder="Send a message..." autocomplete="off"></textarea></form></div></section></section>');
} }
return buf.join(""); return buf.join("");
}; };
@ -557,7 +557,7 @@ exports.pages.groupchat = function anonymous(locals) {
exports.pages.settings = function anonymous(locals) { exports.pages.settings = function anonymous(locals) {
var buf = []; var buf = [];
with (locals || {}) { with (locals || {}) {
buf.push('<section class="page main"><svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewbox="0 0 30 30" height="30" width="30"><g transform="scale(0.5)"><path d="M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z"></path><path d="M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z"></path></g></svg><h1 id="title">Settings</h1><div id="avatarChanger"><h4>Change Avatar</h4><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h4>Desktop Integration</h4><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button><button class="soundNotifs">sound notifications</button></div><div id="ldapSettings"><h4>LDAP settings</h4><ul id="ldapUsers"></ul><input type="text" placeholder="add a ldap user" id="newLdapUser"/></div><div><button class="disconnect">Disconnect</button><button class="primary logout">Logout</button></div></section>'); buf.push('<section class="page main"><h1 id="title">Settings</h1><div id="avatarChanger"><h4>Change Avatar</h4><div class="uploadRegion"><p>Drag and drop a new avatar here</p><img/><form><input id="uploader" type="file"/></form></div></div><div><h4>Desktop Integration</h4><button class="enableAlerts">Enable alerts</button><button class="primary installFirefox">Install app</button><button class="soundNotifs">sound notifications</button></div><div id="ldapSettings"><h4>LDAP settings</h4><ul id="ldapUsers"></ul><input type="text" placeholder="add a ldap user" id="newLdapUser"/></div><div><button class="disconnect">Disconnect</button><button class="primary logout">Logout</button></div></section>');
} }
return buf.join(""); return buf.join("");
}; };

21
clientapp/templates/body.jade
View File

@ -11,15 +11,18 @@ body
g(transform='scale(0.4)') g(transform='scale(0.4)')
path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z') path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z') path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
section#bookmarks div.viewport
h1 Rooms section#bookmarks
nav h1 Rooms
input(type="text", class="inline", placeholder="add a room")#joinmuc nav
section#roster input(type="text", class="inline", placeholder="add a room")#joinmuc
h1 Direct messages section#roster
ul#contactrequests h1 Contacts
nav ul#contactrequests
input(type="text", class="inline", placeholder="add a contact")#addcontact nav
input(type="text", class="inline", placeholder="add a contact")#addcontact
section#kaiwaNotice
img(src="/images/logo.png", alt="Kaiwa")
header#topbar header#topbar
#connectionStatus #connectionStatus
p p

1
clientapp/templates/includes/contactListItem.jade
View File

@ -3,6 +3,7 @@ li.contact.joined
i.remove.fa.fa-times-circle i.remove.fa.fa-times-circle
i.presence.fa.fa-circle i.presence.fa.fa-circle
.user .user
img.avatar
span.name=contact.displayName span.name=contact.displayName
span.idleTime=contact.idleSince span.idleTime=contact.idleSince
.unread=contact.unreadCount .unread=contact.unreadCount

1
clientapp/templates/includes/mucListItem.jade
View File

@ -2,6 +2,5 @@ li.contact
.wrap .wrap
i.remove.fa.fa-times-circle i.remove.fa.fa-times-circle
i.join.fa.fa-sign-in i.join.fa.fa-sign-in
span.prefix #
.unread=contact.unreadCount .unread=contact.unreadCount
span.name=contact.displayName span.name=contact.displayName

3
clientapp/templates/pages/chat.jade
View File

@ -2,7 +2,6 @@ section.page.chat
section.conversation section.conversation
header header
.title .title
span.prefix @
span.name span.name
i.user_presence.fa.fa-circle i.user_presence.fa.fa-circle
span.status span.status
@ -19,7 +18,7 @@ section.page.chat
button.mute Mute button.mute Mute
button.unmute Unmute button.unmute Unmute
.chatBox .chatBox
.contactState
form.formwrap form.formwrap
textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off') textarea(name='chatInput', type='text', placeholder='Send a message...', autocomplete='off')
button.primary.small.call Call button.primary.small.call Call
.contactState

1
clientapp/templates/pages/groupchat.jade
View File

@ -2,7 +2,6 @@ section.page.chat
section.group.conversation section.group.conversation
header.online header.online
.title .title
span.prefix #
span.name span.name
i.channel_actions.fa.fa-comments-o i.channel_actions.fa.fa-comments-o
span.status(contenteditable="true", spellcheck="false") span.status(contenteditable="true", spellcheck="false")

4
clientapp/templates/pages/settings.jade
View File

@ -1,9 +1,5 @@
section.page.main section.page.main
svg(version='1.1', xmlns='http://www.w3.org/2000/svg', xmlns:xlink='http://www.w3.org/1999/xlink', viewbox="0 0 30 30", height="30", width="30")
g(transform='scale(0.5)')
path(d='M37.418,34.3c-2.1-2.721-2.622-6.352-1.292-9.604c0.452-1.107,1.104-2.1,1.902-2.951 c-0.753-0.877-1.573-1.697-2.507-2.387l-2.609,1.408c-1.05-0.629-2.194-1.112-3.414-1.421l-0.845-2.833 c-0.75-0.112-1.512-0.188-2.287-0.188c-0.783,0-1.54,0.075-2.288,0.188l-0.851,2.833c-1.215,0.309-2.355,0.792-3.41,1.421 l-2.614-1.408c-1.229,0.912-2.318,2-3.228,3.231l1.404,2.612c-0.628,1.053-1.11,2.193-1.419,3.411l-2.832,0.849 c-0.114,0.75-0.187,1.508-0.187,2.287c0,0.778,0.073,1.537,0.187,2.286l2.832,0.848c0.309,1.22,0.791,2.36,1.419,3.413l-1.404,2.61 c0.909,1.231,1.999,2.321,3.228,3.231l2.614-1.406c1.055,0.628,2.195,1.11,3.41,1.42l0.851,2.832 c0.748,0.114,1.505,0.188,2.288,0.188c0.775,0,1.537-0.074,2.287-0.188l0.845-2.832c1.224-0.31,2.364-0.792,3.414-1.42l0.062,0.033 l2.045-3.02L37.418,34.3z M26.367,36.776c-2.777,0-5.027-2.253-5.027-5.027c0-2.775,2.25-5.028,5.027-5.028 c2.774,0,5.024,2.253,5.024,5.028C31.391,34.523,29.141,36.776,26.367,36.776z')
path(d='M51.762,24.505l-1.125-0.459l-1.451,3.55c-0.814,1.993-2.832,3.054-4.505,2.37l-0.355-0.144 c-1.673-0.686-2.37-2.856-1.558-4.849l1.451-3.551l-1.125-0.46c-2.225,0.608-4.153,2.2-5.092,4.501 c-1.225,2.997-0.422,6.312,1.771,8.436l-2.958,6.812l-2.204,3.249l-0.007,2.281l5.275,2.154l1.593-1.633l0.7-3.861l2.901-6.836 c3.049,0.018,5.947-1.785,7.174-4.779C53.186,28.983,52.924,26.499,51.762,24.505z')
h1#title Settings h1#title Settings
div#avatarChanger div#avatarChanger

1
clientapp/views/contactListItem.js
View File

@ -22,6 +22,7 @@ module.exports = HumanView.extend({
displayUnreadCount: '.unread' displayUnreadCount: '.unread'
}, },
srcBindings: { srcBindings: {
avatar: '.avatar'
}, },
events: { events: {
'click': 'handleClick', 'click': 'handleClick',

2
dev_config.json
View File

@ -14,7 +14,7 @@
"domain": "example.com", "domain": "example.com",
"wss": "wss://example.com:5281/xmpp-websocket/", "wss": "wss://example.com:5281/xmpp-websocket/",
"muc": "chat.example.com", "muc": "chat.example.com",
"startup": "room%40chat.example.com", "startup": "groupchat/room%40chat.example.com",
"admin": "admin" "admin": "admin"
}, },
"ldap": { "ldap": {

1
public/css/_mixins.styl
View File

@ -41,6 +41,7 @@ avatar()
width: 36px width: 36px
height: 36px height: 36px
roundall(0.2rem) roundall(0.2rem)
border-radius: 50%
// this if for the content flash and hardware acceleration bugs in webkit // this if for the content flash and hardware acceleration bugs in webkit
webkit-transition-fix() webkit-transition-fix()

31
public/css/_variables.styl
View File

@ -25,7 +25,7 @@ $pink-lighter = #fce8f1
// Greens // Greens
$green = #4C9689 $green = #41A564
$green-light = lighten($green, 70%) $green-light = lighten($green, 70%)
$green-lighter = lighten($green, 94%) $green-lighter = lighten($green, 94%)
$green-lighterer = #B2D5C9 $green-lighterer = #B2D5C9
@ -65,25 +65,32 @@ $black = #3D3C40
// Style // Style
$sidebarTopAndBottomBg = #1A233F $topbarBg = #3D486B
$topbarFg = #fff
$meUsernameColor = #fff
$sidebarTopAndBottomBg = #2B3556
$sidebarOrgaName = #fff $sidebarOrgaName = #fff
$sidebarBorder = #121A33 $sidebarBorder = #121A33
$sidebarBg = #3D486B $sidebarBg = #E5E5E5
$sidebarText = #ABB6DA $sidebarText = #565656
$sidebarSectionTitleColor = #8E8E8E
$sidebarNames = #C1DCEC $sidebarNames = #919191
$sidebarInputBg = $sidebarBg $sidebarInputBg = $sidebarBg
$sidebarInputBorder = #626F9C $sidebarInputBorder = #BBBBBB
$sidebarInputText = $sidebarNames $sidebarInputText = $sidebarNames
$sidebarSelectionBg = #94B021 $sidebarSelectionBg = #AEAEAE
$sidebarSelectionText = #fff $sidebarSelectionText = #000
$sidebarUnreadBg = $sidebarSelectionBg $sidebarUnreadBg = $sidebarSelectionBg
$sidebarUnreadText = $sidebarSelectionText $sidebarUnreadText = #000
$sidebarHover = $sidebarTopAndBottomBg $sidebarHover = $sidebarSelectionBg
$sidebarHoverText = #fff
$sidebarRequestBg = $sidebarHover $sidebarRequestBg = $sidebarHover
$sidebarRequestBorder = $sidebarHover $sidebarRequestBorder = $sidebarHover
@ -91,8 +98,8 @@ $sidebarRequestBorder = $sidebarHover
$sidebarStatusText = $sidebarNames $sidebarStatusText = $sidebarNames
$sidebarStatusBorder = $sidebarInputBorder $sidebarStatusBorder = $sidebarInputBorder
$settingsBg = $sidebarBg $settingsBg = transparent
$settingsText = #fff $settingsText = #B5B5B5
$settingsHoverBg = #fff $settingsHoverBg = #fff
$settingsHoverText = $sidebarSelectionBg $settingsHoverText = $sidebarSelectionBg

303
public/css/otalk.css → public/css/client.css
View File

@ -188,7 +188,7 @@ a:active {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
left: 220px; left: 230px;
height: 100%; height: 100%;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -260,7 +260,7 @@ input[type=radio]:disabled {
box-shadow: 0 0 5px #fdcad3; box-shadow: 0 0 5px #fdcad3;
} }
.valid label { .valid label {
color: #4c9689; color: #41a564;
} }
.valid input[type=text], .valid input[type=text],
.valid input[type=email], .valid input[type=email],
@ -270,9 +270,9 @@ input[type=radio]:disabled {
.valid input[type=url], .valid input[type=url],
.valid input[type=file], .valid input[type=file],
.valid textarea { .valid textarea {
background: #f4f9f8; background: #f3faf6;
border: 1px solid #c6e2dd; border: 1px solid #c3e7d0;
color: #c6e2dd; color: #c3e7d0;
} }
.valid input[type=text]:focus, .valid input[type=text]:focus,
.valid input[type=email]:focus, .valid input[type=email]:focus,
@ -282,8 +282,8 @@ input[type=radio]:disabled {
.valid input[type=url]:focus, .valid input[type=url]:focus,
.valid input[type=file]:focus, .valid input[type=file]:focus,
.valid textarea:focus { .valid textarea:focus {
border: 1px solid #c6e2dd; border: 1px solid #c3e7d0;
box-shadow: 0 0 5px #c6e2dd; box-shadow: 0 0 5px #c3e7d0;
} }
input[type=text], input[type=text],
input[type=email], input[type=email],
@ -364,7 +364,7 @@ label {
color: #fdcad3; color: #fdcad3;
} }
.has-icon .ss-icon.ss-check { .has-icon .ss-icon.ss-check {
color: #c6e2dd; color: #c3e7d0;
} }
.has-icon .ss-icon.ss-search { .has-icon .ss-icon.ss-search {
color: #e0e0e0; color: #e0e0e0;
@ -432,15 +432,15 @@ button.secondary:hover {
} }
.button.primary, .button.primary,
button.primary { button.primary {
background: #4c9689; background: #41a564;
} }
.button.primary:hover:not(:disabled), .button.primary:hover:not(:disabled),
button.primary:hover:not(:disabled) { button.primary:hover:not(:disabled) {
background: #44877b; background: #3b955a;
} }
.button.primary:disabled, .button.primary:disabled,
button.primary:disabled { button.primary:disabled {
background: #c6e2dd; background: #c3e7d0;
} }
.button.secondary, .button.secondary,
button.secondary { button.secondary {
@ -517,13 +517,10 @@ button.secondary:hover:not(:disabled) {
top: 0px; top: 0px;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
width: 220px; width: 230px;
background-color: #3d486b; background-color: #e5e5e5;
color: #abb6da; color: #565656;
border-right: 1px solid #121a33;
z-index: 300; z-index: 300;
overflow-y: auto;
overflow-x: hidden;
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -533,24 +530,24 @@ button.secondary:hover:not(:disabled) {
user-select: none; user-select: none;
} }
#menu #organization { #menu #organization {
width: 220px; width: 230px;
height: 42px; height: 42px;
margin-bottom: 10px; background: #2b3556;
} }
#menu #organization #orga_name { #menu #organization #orga_name {
color: #fff; color: #fff;
font-size: 17px; font-size: 17px;
font-weight: 900; font-weight: 900;
line-height: 53px; line-height: 42px;
vertical-align: middle; vertical-align: middle;
margin-left: 20px; margin-left: 20px;
} }
#menu #organization .settings { #menu #organization .settings {
position: relative; position: relative;
height: 30px; height: 28px;
left: 0px; left: 5px;
background-color: #3d486b; background-color: transparent;
color: #fff; color: #b5b5b5;
transition: none; transition: none;
border: 0; border: 0;
} }
@ -560,13 +557,24 @@ button.secondary:hover:not(:disabled) {
left: 3px; left: 3px;
margin: 0px; margin: 0px;
margin-top: -13px; margin-top: -13px;
fill: #fff; fill: #b5b5b5;
} }
#menu #organization .settings:hover svg { #menu #organization .settings:hover svg {
fill: #94b021; fill: #aeaeae;
} }
#menu #organization .settings.active svg { #menu #organization .settings.active svg {
fill: #94b021; fill: #aeaeae;
}
#menu .viewport {
position: absolute;
top: 42px;
bottom: 22px;
left: 0;
right: 0;
overflow-y: auto;
overflow-x: hidden;
padding-top: 20px;
padding-bottom: 10px;
} }
#menu .main { #menu .main {
margin: 10px 0 0 0; margin: 10px 0 0 0;
@ -590,14 +598,15 @@ button.secondary:hover:not(:disabled) {
position: relative; position: relative;
} }
#menu h1 { #menu h1 {
font-size: 14px; font-size: 15px;
margin: 0; margin: 0;
padding: 4px 20px; padding: 4px 20px;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 7px;
color: #8e8e8e;
} }
#roster, #roster,
#bookmarks { #bookmarks {
margin-right: 20px;
margin-bottom: 25px; margin-bottom: 25px;
} }
#roster #contactrequests, #roster #contactrequests,
@ -612,9 +621,9 @@ button.secondary:hover:not(:disabled) {
margin-left: 20px; margin-left: 20px;
margin-bottom: 10px; margin-bottom: 10px;
padding-bottom: 4px; padding-bottom: 4px;
background: #1a233f; background: #aeaeae;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 2px solid #1a233f; border: 2px solid #aeaeae;
} }
#roster #contactrequests li .response, #roster #contactrequests li .response,
#bookmarks #contactrequests li .response { #bookmarks #contactrequests li .response {
@ -642,30 +651,29 @@ button.secondary:hover:not(:disabled) {
width: 178px; width: 178px;
height: 25px; height: 25px;
font-size: 12px; font-size: 12px;
background-color: #3d486b; background-color: #e5e5e5;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 1px solid #626f9c; border: 1px solid #bbb;
color: #c1dcec; color: #919191;
} }
#roster li, #roster li,
#bookmarks li { #bookmarks li {
list-style-type: none; list-style-type: none;
padding: 4px 10px; padding: 3px 10px;
margin: 0px 0px 0px 10px; padding-right: 15px;
border-radius: 0.25rem;
position: relative; position: relative;
height: 25px;
font-size: 14px; font-size: 14px;
cursor: pointer; cursor: pointer;
width: 100%; width: 100%;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
color: #c1dcec; color: #919191;
} }
#roster li:hover, #roster li:hover,
#bookmarks li:hover { #bookmarks li:hover {
background: #1a233f; background: #aeaeae;
color: #fff;
} }
#roster li.joined:hover:not(.hasUnread) .remove, #roster li.joined:hover:not(.hasUnread) .remove,
#bookmarks li.joined:hover:not(.hasUnread) .remove { #bookmarks li.joined:hover:not(.hasUnread) .remove {
@ -680,7 +688,7 @@ button.secondary:hover:not(:disabled) {
#roster li.hasUnread .prefix, #roster li.hasUnread .prefix,
#bookmarks li.hasUnread .prefix { #bookmarks li.hasUnread .prefix {
font-weight: 900; font-weight: 900;
color: #fff; color: #000;
} }
#roster li:not(.activeContact).offline .presence, #roster li:not(.activeContact).offline .presence,
#bookmarks li:not(.activeContact).offline .presence, #bookmarks li:not(.activeContact).offline .presence,
@ -704,14 +712,7 @@ button.secondary:hover:not(:disabled) {
#bookmarks li.activeContact, #bookmarks li.activeContact,
#roster li.offline.activeContact, #roster li.offline.activeContact,
#bookmarks li.offline.activeContact { #bookmarks li.offline.activeContact {
background: #94b021; background: #aeaeae;
}
#roster li.activeContact .prefix,
#bookmarks li.activeContact .prefix,
#roster li.offline.activeContact .prefix,
#bookmarks li.offline.activeContact .prefix {
color: #b2d5c9;
opacity: 1;
} }
#roster li.activeContact:not(.dnd):not(.away):not(.online) .presence, #roster li.activeContact:not(.dnd):not(.away):not(.online) .presence,
#bookmarks li.activeContact:not(.dnd):not(.away):not(.online) .presence, #bookmarks li.activeContact:not(.dnd):not(.away):not(.online) .presence,
@ -728,17 +729,17 @@ button.secondary:hover:not(:disabled) {
#bookmarks li.activeContact .join, #bookmarks li.activeContact .join,
#roster li.offline.activeContact .join, #roster li.offline.activeContact .join,
#bookmarks li.offline.activeContact .join { #bookmarks li.offline.activeContact .join {
color: #fff; color: #000;
} }
#roster li.activeContact .name, #roster li.activeContact .name,
#bookmarks li.activeContact .name, #bookmarks li.activeContact .name,
#roster li.offline.activeContact .name, #roster li.offline.activeContact .name,
#bookmarks li.offline.activeContact .name { #bookmarks li.offline.activeContact .name {
color: #fff; color: #000;
} }
#roster li:not(.activeContact).online .presence, #roster li:not(.activeContact).online .presence,
#bookmarks li:not(.activeContact).online .presence { #bookmarks li:not(.activeContact).online .presence {
color: #4c9689; color: #41a564;
opacity: 1; opacity: 1;
} }
#roster li.online .name, #roster li.online .name,
@ -775,7 +776,7 @@ button.secondary:hover:not(:disabled) {
} }
#roster li.idle .name, #roster li.idle .name,
#bookmarks li.idle .name { #bookmarks li.idle .name {
color: #c1dcec; color: #919191;
font-style: italic; font-style: italic;
} }
#roster li .presence, #roster li .presence,
@ -784,18 +785,18 @@ button.secondary:hover:not(:disabled) {
display: inline-block; display: inline-block;
margin-top: -10px; margin-top: -10px;
vertical-align: middle; vertical-align: middle;
opacity: 0.5; position: absolute;
right: 28px;
top: 21px;
} }
#roster li .user, #roster li .user,
#bookmarks li .user { #bookmarks li .user {
display: inline-block; display: inline-block;
width: 120px; width: 170px;
line-height: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
height: 17px; height: 20px;
font-style: italic; font-style: italic;
text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
} }
#roster li .status, #roster li .status,
#bookmarks li .status { #bookmarks li .status {
@ -811,22 +812,36 @@ button.secondary:hover:not(:disabled) {
font-size: 12px; font-size: 12px;
color: #594a57; color: #594a57;
} }
#roster li .avatar,
#bookmarks li .avatar {
width: 16px;
height: 16px;
-moz-border-radius: 0.2rem;
-webkit-border-radius: 0.2rem;
-khtml-border-radius: 0.2rem;
-o-border-radius: 0.2rem;
-border-radius: 0.2rem;
border-radius: 0.2rem;
border-radius: 50%;
margin: 0;
padding: 0;
margin-right: 5px;
margin-top: 4px;
}
#roster li .name, #roster li .name,
#bookmarks li .name { #bookmarks li .name {
width: 100%; width: 100%;
line-height: 100%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
height: 17px;
text-shadow: 0px 1px 1px rgba(0,0,0,0.3);
position: absolute;
left: 22px;
max-width: 140px; max-width: 140px;
line-height: 23px;
height: 23px;
position: absolute;
} }
#roster li .unread, #roster li .unread,
#bookmarks li .unread { #bookmarks li .unread {
display: none; display: none;
color: #fff; color: #000;
height: 16px; height: 16px;
width: 18px; width: 18px;
-moz-border-radius: 5px; -moz-border-radius: 5px;
@ -837,12 +852,12 @@ button.secondary:hover:not(:disabled) {
border-radius: 5px; border-radius: 5px;
position: absolute; position: absolute;
padding-top: 2px; padding-top: 2px;
right: 5px; right: 15px;
top: 3px; top: 6px;
font-size: 10px; font-size: 10px;
font-weight: 700; font-weight: 700;
text-align: center; text-align: center;
background: #94b021; background: #aeaeae;
} }
#roster li .unread:not(:empty), #roster li .unread:not(:empty),
#bookmarks li .unread:not(:empty) { #bookmarks li .unread:not(:empty) {
@ -853,21 +868,13 @@ button.secondary:hover:not(:disabled) {
#roster li .join, #roster li .join,
#bookmarks li .join { #bookmarks li .join {
position: absolute; position: absolute;
right: 7px; right: 10px;
top: 5px; top: 8px;
font-size: 14px; font-size: 14px;
display: inline-block; display: inline-block;
font-family: FontAwesome; font-family: FontAwesome;
visibility: hidden; visibility: hidden;
} }
#roster li .prefix,
#bookmarks li .prefix {
font-weight: 300;
opacity: 0.5;
position: relative;
left: -15px;
text-shadow: 0px 1px 1px rgba(0,0,0,0.25);
}
#roster li button, #roster li button,
#bookmarks li button { #bookmarks li button {
margin: -15px 0px 0px 5px; margin: -15px 0px 0px 5px;
@ -889,10 +896,24 @@ button.secondary:hover:not(:disabled) {
display: inline-block; display: inline-block;
} }
#roster .wrap { #roster .wrap {
padding-left: 0px; padding-left: 14px;
height: 23px;
} }
#bookmarks .wrap { #bookmarks .wrap {
padding-left: 14px; padding-left: 14px;
height: 23px;
}
#kaiwaNotice {
position: absolute;
bottom: 5px;
left: 50%;
width: 50px;
margin-left: -25px;
}
#kaiwaNotice img {
width: 100%;
display: block;
opacity: 0.4;
} }
@-moz-keyframes pulsate { @-moz-keyframes pulsate {
0% { 0% {
@ -964,9 +985,9 @@ button.secondary:hover:not(:disabled) {
position: fixed; position: fixed;
top: 0px; top: 0px;
right: 0px; right: 0px;
left: 220px; left: 230px;
right: 200px; right: 200px;
height: 55px; height: 42px;
z-index: 101; z-index: 101;
} }
.conversation header .title { .conversation header .title {
@ -975,7 +996,7 @@ button.secondary:hover:not(:disabled) {
top: 0px; top: 0px;
white-space: nowrap; white-space: nowrap;
display: inline-block; display: inline-block;
height: 53px; height: 42px;
} }
.conversation header .prefix, .conversation header .prefix,
.conversation header .name, .conversation header .name,
@ -988,13 +1009,13 @@ button.secondary:hover:not(:disabled) {
text-rendering: optimizelegibility; text-rendering: optimizelegibility;
top: 0px; top: 0px;
vertical-align: middle; vertical-align: middle;
line-height: 42px;
} }
.conversation header .prefix { .conversation header .prefix {
color: #9e9ea6; color: #9e9ea6;
font-size: 22px; font-size: 22px;
font-weight: 500; font-weight: 500;
margin-left: 25px; margin-left: 25px;
line-height: 53px;
cursor: default; cursor: default;
} }
.conversation header .name { .conversation header .name {
@ -1002,15 +1023,14 @@ button.secondary:hover:not(:disabled) {
font-weight: 900; font-weight: 900;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
padding-left: 3px; padding-left: 20px;
line-height: 53px;
cursor: default; cursor: default;
color: #fff;
} }
.conversation header .user_presence, .conversation header .user_presence,
.conversation header .channel_actions { .conversation header .channel_actions {
color: #9e9ea6; color: #9e9ea6;
padding-left: 8px; padding-left: 8px;
line-height: 53px;
cursor: default; cursor: default;
} }
.conversation header .user_presence { .conversation header .user_presence {
@ -1018,7 +1038,7 @@ button.secondary:hover:not(:disabled) {
font-size: 12px; font-size: 12px;
} }
.conversation header .user_presence.online { .conversation header .user_presence.online {
color: #4c9689; color: #41a564;
opacity: 1; opacity: 1;
} }
.conversation header .user_presence.offline { .conversation header .user_presence.offline {
@ -1053,7 +1073,6 @@ button.secondary:hover:not(:disabled) {
font-size: 16px; font-size: 16px;
line-height: 18px; line-height: 18px;
margin-left: 15px; margin-left: 15px;
padding-top: 5px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
@ -1154,8 +1173,7 @@ button.secondary:hover:not(:disabled) {
bottom: 0px; bottom: 0px;
position: fixed; position: fixed;
right: 0px; right: 0px;
left: 221px; left: 230px;
height: 4rem;
z-index: 302; z-index: 302;
transition: none; transition: none;
-webkit-transition: none; -webkit-transition: none;
@ -1164,7 +1182,7 @@ button.secondary:hover:not(:disabled) {
display: none; display: none;
position: fixed; position: fixed;
left: 245px; left: 245px;
bottom: 64px; bottom: 46px;
border: 2px solid #ddd; border: 2px solid #ddd;
border-bottom: 0; border-bottom: 0;
border-radius: 0.25rem 0.25rem 0 0; border-radius: 0.25rem 0.25rem 0 0;
@ -1198,30 +1216,24 @@ button.secondary:hover:not(:disabled) {
transition: none; transition: none;
-webkit-transition: none; -webkit-transition: none;
position: relative; position: relative;
height: 38px;
left: 24px;
margin-right: 50px;
} }
.conversation .chatBox textarea { .conversation .chatBox textarea {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
background: none repeat scroll 0% 0% padding-box #fff; background: none repeat scroll 0% 0% padding-box #fff;
font-size: 13px; font-size: 13px;
border-width: 2px; border: 0;
border-style: solid; border-top: 2px solid #e0e0e0;
border-color: #e0e0e0; border-radius: 0;
border-image: none;
border-radius: 0px 0.2rem 0.2rem 0px;
font-family: "Lato", sans-serif; font-family: "Lato", sans-serif;
margin: 0; margin: 0;
color: #3d3c40; color: #3d3c40;
overflow-y: auto; overflow-y: auto;
box-shadow: none; box-shadow: none;
outline: 0px none; outline: 0px none;
position: absolute;
bottom: 0px; bottom: 0px;
height: 38px; height: 44px;
padding: 9px 5px 9px 8px; padding: 13px 24px;
max-height: 102px; max-height: 102px;
resize: none !important; resize: none !important;
} }
@ -1249,8 +1261,8 @@ button.secondary:hover:not(:disabled) {
position: absolute; position: absolute;
top: 0px; top: 0px;
right: 0px; right: 0px;
bottom: 4rem; bottom: 59px;
margin-top: 54px; margin-top: 43px;
width: 100%; width: 100%;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
@ -1261,14 +1273,13 @@ button.secondary:hover:not(:disabled) {
display: block; display: block;
background: none repeat scroll 0% 0% #fff; background: none repeat scroll 0% 0% #fff;
font-size: 1rem; font-size: 1rem;
color: #555459; color: #babbbf;
font-weight: 900; text-align: right;
text-align: center;
cursor: default; cursor: default;
clear: both; clear: both;
position: relative; position: relative;
line-height: 1.2rem; line-height: 1.2rem;
margin: 1.5rem 0px; margin: 10px 0 30px;
padding: 0; padding: 0;
min-height: 0; min-height: 0;
} }
@ -1278,14 +1289,13 @@ button.secondary:hover:not(:disabled) {
top: 0.6rem; top: 0.6rem;
margin: 0px; margin: 0px;
border-width: 1px 0px 0px 0px; border-width: 1px 0px 0px 0px;
border-style: solid none; border-style: dotted none;
border-color: #ddd; border-color: #ddd;
} }
.messages li.day_divider .day_divider_name { .messages li.day_divider .day_divider_name {
background: none repeat scroll 0% 0% #fff; background: none repeat scroll 0% 0% #fff;
text-transform: capitalize; text-transform: capitalize;
text-align: center; padding-left: 1rem;
padding: 0px 1rem;
display: inline-block; display: inline-block;
margin: 0px auto; margin: 0px auto;
position: relative; position: relative;
@ -1315,6 +1325,7 @@ button.secondary:hover:not(:disabled) {
-o-border-radius: 0.2rem; -o-border-radius: 0.2rem;
-border-radius: 0.2rem; -border-radius: 0.2rem;
border-radius: 0.2rem; border-radius: 0.2rem;
border-radius: 50%;
} }
.messages li .messageAvatar .name { .messages li .messageAvatar .name {
text-indent: -9999em; text-indent: -9999em;
@ -1349,15 +1360,15 @@ button.secondary:hover:not(:disabled) {
padding: 0px 0px 12px 15px; padding: 0px 0px 12px 15px;
width: 99%; width: 99%;
vertical-align: top; vertical-align: top;
position: relative;
} }
.messages .messageWrapper .message_header .name { .messages .messageWrapper .message_header .name {
display: inline-block; display: inline-block;
margin-right: 0.25rem; margin-right: 0.25rem;
font-weight: 900; font-size: 12px;
font-size: 15px; line-height: 16px;
color: #3d3c40; color: #9e9ea6;
line-height: 22px; font-weight: bold;
cursor: pointer;
} }
.messages .messageWrapper .message_header .name:empty { .messages .messageWrapper .message_header .name:empty {
margin-right: 0; margin-right: 0;
@ -1365,7 +1376,7 @@ button.secondary:hover:not(:disabled) {
.messages .messageWrapper .message_header .nickname { .messages .messageWrapper .message_header .nickname {
display: inline-block; display: inline-block;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 12px;
color: #9e9ea6; color: #9e9ea6;
line-height: 22px; line-height: 22px;
cursor: pointer; cursor: pointer;
@ -1383,13 +1394,15 @@ button.secondary:hover:not(:disabled) {
width: 60px; width: 60px;
line-height: 22px; line-height: 22px;
text-transform: uppercase; text-transform: uppercase;
cursor: pointer; text-aligne: right;
position: absolute;
right: 0;
} }
.messages .message { .messages .message {
font-size: 15px; font-size: 15px;
line-height: 22px; line-height: 20px;
color: #3d3c40; color: #3d3c40;
margin: 0px 0px 2px 0px; margin: 0;
display: block; display: block;
min-width: 20px; min-width: 20px;
width: 100%; width: 100%;
@ -1471,11 +1484,13 @@ button.secondary:hover:not(:disabled) {
} }
#members_toggle { #members_toggle {
position: absolute; position: absolute;
top: 60px; top: 50px;
right: 20px; right: 27px;
cursor: pointer; cursor: pointer;
color: #9e9ea6; color: #9e9ea6;
font-size: 16px; font-size: 16px;
background: #fff;
padding: 5px;
} }
#members_toggle:hover { #members_toggle:hover {
color: #439fe0; color: #439fe0;
@ -1541,8 +1556,8 @@ button.secondary:hover:not(:disabled) {
} }
.groupRoster li.online:before, .groupRoster li.online:before,
.groupRoster li.chat:before { .groupRoster li.chat:before {
background: #4c9689; background: #41a564;
border-color: #4c9689; border-color: #41a564;
} }
.groupRoster li.online:not(:hover) .name, .groupRoster li.online:not(:hover) .name,
.groupRoster li.chat:not(:hover) .name { .groupRoster li.chat:not(:hover) .name {
@ -1600,24 +1615,12 @@ button.secondary:hover:not(:disabled) {
.embed a.source { .embed a.source {
display: none; display: none;
} }
.main svg {
position: absolute;
top: 24px;
left: 16px;
margin: 0px;
margin-top: -13px;
fill: #9e9ea6;
z-index: 101;
}
.main h1 { .main h1 {
color: #555459; color: #fff;
padding: 0; padding: 6px 12px;
margin: 0; margin: 0;
position: fixed;
top: 14px;
left: 266px;
right: 200px;
z-index: 101; z-index: 101;
position: fixed;
} }
.main #ldapSettings { .main #ldapSettings {
display: none; display: none;
@ -1681,7 +1684,7 @@ button.secondary:hover:not(:disabled) {
.main > div #ldapUsers .fa-plus:hover, .main > div #ldapUsers .fa-plus:hover,
.main > div #ldapUsers .fa-minus:hover, .main > div #ldapUsers .fa-minus:hover,
.main > div #ldapUsers .delete:hover { .main > div #ldapUsers .delete:hover {
color: #94b021; color: #aeaeae;
} }
.main > div #ldapUsers .fa-plus.meIsAdmin, .main > div #ldapUsers .fa-plus.meIsAdmin,
.main > div #ldapUsers .fa-minus.meIsAdmin, .main > div #ldapUsers .fa-minus.meIsAdmin,
@ -1734,9 +1737,6 @@ button.secondary:hover:not(:disabled) {
.logout { .logout {
margin-right: 5px; margin-right: 5px;
} }
.aux {
background: #fafafb;
}
.aux header { .aux header {
margin-top: 8%; margin-top: 8%;
text-align: center; text-align: center;
@ -1941,7 +1941,6 @@ rgba(0,0,0,0.7)
margin: 0; margin: 0;
} }
#topbar.connected { #topbar.connected {
background-color: #f7f7f7;
z-index: 100; z-index: 100;
} }
#topbar.connected #connectionStatus { #topbar.connected #connectionStatus {
@ -1951,9 +1950,9 @@ rgba(0,0,0,0.7)
position: fixed; position: fixed;
right: 0px; right: 0px;
top: 0px; top: 0px;
height: 55px; height: 42px;
width: 100%; width: 100%;
background-color: #8899ce; background-color: #3d486b;
z-index: 102; z-index: 102;
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -1965,7 +1964,7 @@ rgba(0,0,0,0.7)
} }
#topbar #connectionStatus { #topbar #connectionStatus {
width: 340px; width: 340px;
margin: 9px auto; margin: 2px auto;
background-color: transparent; background-color: transparent;
} }
#topbar #connectionStatus p { #topbar #connectionStatus p {
@ -1986,7 +1985,7 @@ rgba(0,0,0,0.7)
display: none; display: none;
position: fixed; position: fixed;
right: 0; right: 0;
padding: 8px 5px 5px 5px; padding: 1px 0px 5px 5px;
width: 175px; width: 175px;
} }
#topbar .avatar { #topbar .avatar {
@ -1997,6 +1996,7 @@ rgba(0,0,0,0.7)
background-color: transparent; background-color: transparent;
vertical-align: middle; vertical-align: middle;
margin: 3px 0.5rem 0px 0px; margin: 3px 0.5rem 0px 0px;
border-radius: 50%;
} }
#topbar .name, #topbar .name,
#topbar .status { #topbar .status {
@ -2007,19 +2007,18 @@ rgba(0,0,0,0.7)
text-align: right; text-align: right;
} }
#topbar .name { #topbar .name {
color: #555459; color: #fff;
font-size: 17px; font-size: 14px;
font-weight: 900; font-weight: 900;
margin-top: 3px;
} }
#topbar .status { #topbar .status {
color: #9e9ea6; color: #9e9ea6;
font-weight: normal; font-weight: normal;
font-size: 14px; font-size: 12px;
line-height: 14px;
border-width: 0px; border-width: 0px;
margin: 0px; margin: 0px;
padding: 0px; padding: 0px;
line-height: 18px;
height: 18px; height: 18px;
white-space: nowrap; white-space: nowrap;
transition: all 0.25s; transition: all 0.25s;

0
public/css/otalk.styl → public/css/client.styl
View File

2
public/css/components/layout.styl
View File

@ -27,6 +27,6 @@ a
position: absolute position: absolute
top: 0px top: 0px
right: 0px right: 0px
left: 220px left: 230px
height: 100% height: 100%
borderbox() borderbox()

1
public/css/pages/aux.styl
View File

@ -1,5 +1,4 @@
.aux .aux
background: lighten($gray-light, 93%)
header header
margin-top: 8% margin-top: 8%

77
public/css/pages/chat.styl
View File

@ -23,9 +23,9 @@
position: fixed position: fixed
top: 0px top: 0px
right: 0px right: 0px
left: 220px left: 230px
right: 200px right: 200px
height: 55px height: 42px
z-index: 101 z-index: 101
.title .title
@ -34,7 +34,7 @@
top: 0px top: 0px
white-space: nowrap white-space: nowrap
display: inline-block display: inline-block
height: 53px height: 42px
.prefix, .name, .user_presence, .channel_actions, .status .prefix, .name, .user_presence, .channel_actions, .status
display: inline-block display: inline-block
@ -43,13 +43,13 @@
text-rendering: optimizelegibility text-rendering: optimizelegibility
top: 0px top: 0px
vertical-align: middle vertical-align: middle
line-height: 42px
.prefix .prefix
color: $gray color: $gray
font-size: $font-size-h2 font-size: $font-size-h2
font-weight: $font-weight-classic font-weight: $font-weight-classic
margin-left: 25px margin-left: 25px
line-height: 53px
cursor: default cursor: default
.name .name
@ -57,14 +57,13 @@
font-weight: $font-weight-bolder font-weight: $font-weight-bolder
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
padding-left: 3px padding-left: 20px
line-height: 53px
cursor: default cursor: default
color: $topbarFg
.user_presence, .channel_actions .user_presence, .channel_actions
color: $gray color: $gray
padding-left: 8px padding-left: 8px
line-height: 53px
cursor: default cursor: default
.user_presence .user_presence
@ -106,7 +105,6 @@
font-size: $font-size-h3 font-size: $font-size-h3
line-height: 18px line-height: 18px
margin-left: 15px margin-left: 15px
padding-top: 5px
white-space: nowrap white-space: nowrap
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
@ -194,8 +192,7 @@
bottom: 0px bottom: 0px
position: fixed position: fixed
right: 0px right: 0px
left: 221px left: 230px
height: 4rem
z-index: 302 z-index: 302
transition: none transition: none
-webkit-transition: none -webkit-transition: none
@ -204,7 +201,7 @@
display: none display: none
position: fixed position: fixed
left: 245px left: 245px
bottom: 64px bottom: 46px
border: 2px solid #ddd border: 2px solid #ddd
border-bottom: 0 border-bottom: 0
border-radius: 0.25rem 0.25rem 0 0 border-radius: 0.25rem 0.25rem 0 0
@ -235,30 +232,24 @@
transition: none transition: none
-webkit-transition: none -webkit-transition: none
position: relative position: relative
height:38px
left: 24px
margin-right: 50px
textarea textarea
display: inline-block display: inline-block
vertical-align: middle vertical-align: middle
background: none repeat scroll 0% 0% padding-box #fff background: none repeat scroll 0% 0% padding-box #fff
font-size: 13px font-size: 13px
border-width: 2px border: 0
border-style: solid border-top: 2px solid $gray-lighter
border-color: $gray-lighter border-radius: 0
border-image: none
border-radius: 0px 0.2rem 0.2rem 0px
font-family: "Lato",sans-serif font-family: "Lato",sans-serif
margin: 0 margin: 0
color: #3D3C40 color: #3D3C40
overflow-y: auto overflow-y: auto
box-shadow: none box-shadow: none
outline: 0px none outline: 0px none
position: absolute
bottom: 0px bottom: 0px
height: 38px height: 44px;
padding: 9px 5px 9px 8px padding: 13px 24px
max-height: 102px max-height: 102px
resize: none !important resize: none !important
@ -285,8 +276,8 @@
position: absolute position: absolute
top: 0px top: 0px
right: 0px right: 0px
bottom: 4rem bottom: 59px
margin-top: 54px margin-top: 43px
width: 100% width: 100%
borderbox() borderbox()
-webkit-overflow-scrolling: touch -webkit-overflow-scrolling: touch
@ -295,14 +286,13 @@
display: block display: block
background: none repeat scroll 0% 0% #fff background: none repeat scroll 0% 0% #fff
font-size: 1rem font-size: 1rem
color: #555459 color: $gray-light
font-weight: 900 text-align: right
text-align: center
cursor: default cursor: default
clear: both clear: both
position: relative position: relative
line-height: 1.2rem line-height: 1.2rem
margin: 1.5rem 0px margin: 10px 0 30px
padding: 0 padding: 0
min-height: 0 min-height: 0
@ -312,14 +302,13 @@
top: 0.6rem top: 0.6rem
margin: 0px margin: 0px
border-width: 1px 0px 0px 0px border-width: 1px 0px 0px 0px
border-style: solid none border-style: dotted none
border-color: #ddd border-color: #ddd
.day_divider_name .day_divider_name
background: none repeat scroll 0% 0% #fff background: none repeat scroll 0% 0% #fff
text-transform: capitalize text-transform: capitalize
text-align: center padding-left: 1rem
padding: 0px 1rem
display: inline-block display: inline-block
margin: 0px auto margin: 0px auto
position: relative position: relative
@ -376,24 +365,24 @@
padding: 0px 0px 12px 15px padding: 0px 0px 12px 15px
width: 99% width: 99%
vertical-align: top vertical-align: top
position: relative
.message_header .message_header
.name .name
display: inline-block display: inline-block
margin-right: 0.25rem margin-right: 0.25rem
font-weight: $font-weight-bolder font-size: $font-size-small
font-size: $font-size-message line-height: 16px
color: $black color: $gray
line-height: 22px font-weight: bold
cursor: pointer
&:empty &:empty
margin-right: 0 margin-right: 0
.nickname .nickname
display: inline-block display: inline-block
font-weight: $font-weight-classic font-weight: $font-weight-classic
font-size: $font-size-base font-size: $font-size-small
color: $gray color: $gray
line-height: 22px line-height: 22px
cursor: pointer cursor: pointer
@ -409,13 +398,15 @@
width: 60px width: 60px
line-height: 22px line-height: 22px
text-transform: uppercase text-transform: uppercase
cursor: pointer text-aligne: right
position: absolute
right: 0
.message .message
font-size: $font-size-message font-size: $font-size-message
line-height: 22px line-height: 20px
color: $black color: $black
margin: 0px 0px 2px 0px margin: 0
display: block display: block
min-width: 20px min-width: 20px
width: 100% width: 100%
@ -502,11 +493,13 @@
*/ */
#members_toggle #members_toggle
position: absolute position: absolute
top: 60px top: 50px
right: 20px right: 27px
cursor: pointer cursor: pointer
color: $gray color: $gray
font-size: $font-size-h3 font-size: $font-size-h3
background: #fff
padding: 5px
&:hover &:hover
color: #439FE0 color: #439FE0

9
public/css/pages/header.styl
View File

@ -2,7 +2,6 @@
@import '../_mixins' @import '../_mixins'
#topbar.connected #topbar.connected
background-color: rgb(247, 247, 247)
z-index: 100 z-index: 100
#connectionStatus #connectionStatus
display: none display: none
@ -11,16 +10,16 @@
position: fixed position: fixed
right: 0px right: 0px
top: 0px top: 0px
height: 55px height: 42px
width: 100% width: 100%
background-color: lighten($sidebarTopAndBottomBg, 60%) background-color: $topbarBg
z-index: 102 z-index: 102
noselect() noselect()
color: #fff color: $topbarFg
#connectionStatus #connectionStatus
width: 340px width: 340px
margin: 9px auto margin: 2px auto
background-color: transparent background-color: transparent
p p

12
public/css/pages/me.styl
View File

@ -7,7 +7,7 @@
display: none display: none
position: fixed position: fixed
right: 0 right: 0
padding: 8px 5px 5px 5px padding: 1px 0px 5px 5px
width: 175px width: 175px
.avatar .avatar
@ -18,6 +18,7 @@
background-color: transparent background-color: transparent
vertical-align: middle vertical-align: middle
margin: 3px 0.5rem 0px 0px; margin: 3px 0.5rem 0px 0px;
border-radius: 50%;
.name, .name,
.status .status
@ -28,19 +29,18 @@
text-align: right text-align: right
.name .name
color: $gray-dark color: $meUsernameColor
font-size: $font-size-large font-size: $font-size-base
font-weight: $font-weight-bolder font-weight: $font-weight-bolder
margin-top: 3px;
.status .status
color: $gray color: $gray
font-weight: normal font-weight: normal
font-size: $font-size-base font-size: $font-size-small
line-height: $font-size-base
border-width: 0px border-width: 0px
margin: 0px margin: 0px
padding: 0px padding: 0px
line-height: 18px
height: 18px height: 18px
white-space: nowrap white-space: nowrap
transition: all .25s transition: all .25s

108
public/css/pages/roster.styl
View File

@ -6,33 +6,30 @@
top: 0px top: 0px
bottom: 0px bottom: 0px
left: 0px left: 0px
width: 220px width: 230px
background-color: $sidebarBg background-color: $sidebarBg
color: $sidebarText color: $sidebarText
border-right: 1px solid $sidebarBorder
z-index: 300 z-index: 300
overflow-y: auto;
overflow-x: hidden;
webkit-transition-fix() webkit-transition-fix()
noselect() noselect()
#organization #organization
width: 220px width: 230px
height: 42px height: 42px
margin-bottom: 10px background: $sidebarTopAndBottomBg
#orga_name #orga_name
color: $sidebarOrgaName color: $topbarFg
font-size: $font-size-large font-size: $font-size-large
font-weight: $font-weight-bolder font-weight: $font-weight-bolder
line-height: 53px; line-height: 42px;
vertical-align: middle vertical-align: middle
margin-left: 20px margin-left: 20px
.settings .settings
position: relative position: relative
height: 30px height: 28px;
left: 0px left: 5px;
background-color: $settingsBg background-color: $settingsBg
color: $settingsText color: $settingsText
transition: none transition: none
@ -54,6 +51,17 @@
svg svg
fill: $settingsHoverText fill: $settingsHoverText
.viewport
position: absolute
top: 42px
bottom: 22px
left: 0
right: 0
overflow-y: auto
overflow-x: hidden
padding-top: 20px
padding-bottom: 10px
.main .main
margin: 10px 0 0 0 margin: 10px 0 0 0
text-align: center text-align: center
@ -76,14 +84,15 @@
position: relative position: relative
h1 h1
font-size: $font-size-base font-size: $font-size-message
margin: 0 margin: 0
padding: 4px 20px padding: 4px 20px
text-transform: uppercase text-transform: uppercase
margin-bottom: 7px;
color: $sidebarSectionTitleColor
#roster, #roster,
#bookmarks #bookmarks
margin-right: 20px
margin-bottom: 25px margin-bottom: 25px
#contactrequests #contactrequests
@ -126,11 +135,9 @@
li li
list-style-type: none list-style-type: none
padding: 4px 10px padding: 3px 10px
margin: 0px 0px 0px 10px padding-right: 15px
border-radius: 0.25rem
position: relative position: relative
height: 25px
font-size: $font-size-base font-size: $font-size-base
cursor: pointer cursor: pointer
width: 100% width: 100%
@ -139,6 +146,7 @@
&:hover &:hover
background: $sidebarHover background: $sidebarHover
color: $sidebarHoverText
&.joined &.joined
&:hover:not(.hasUnread) .remove &:hover:not(.hasUnread) .remove
@ -150,7 +158,7 @@
&.hasUnread, &.hasUnread .prefix &.hasUnread, &.hasUnread .prefix
font-weight: $font-weight-bolder font-weight: $font-weight-bolder
color: #fff color: $sidebarUnreadText
&:not(.activeContact).offline, &:not(.activeContact).offline,
&:not(.activeContact).chat &:not(.activeContact).chat
@ -170,16 +178,13 @@
&.activeContact, &.offline.activeContact &.activeContact, &.offline.activeContact
background: $sidebarSelectionBg background: $sidebarSelectionBg
.prefix
color: $green-lighterer
opacity: 1
&:not(.dnd):not(.away):not(.online) .presence &:not(.dnd):not(.away):not(.online) .presence
color: $brown-darkerer color: $brown-darkerer
opacity: 1 opacity: 1
.remove, .join .remove, .join
color: #fff color: $sidebarSelectionText
.name .name
color: #fff color: $sidebarSelectionText
&:not(.activeContact).online &:not(.activeContact).online
.presence .presence
@ -221,17 +226,17 @@
display: inline-block display: inline-block
margin-top: -10px margin-top: -10px
vertical-align: middle vertical-align: middle
opacity: 0.5 position: absolute;
right: 28px;
top: 21px;
.user .user
display: inline-block display: inline-block
width: 120px width: 170px
line-height: 100%
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
height: $font-size-base+3 height: $font-size-base+6
font-style: italic font-style: italic
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25)
.status .status
font-size: $font-size-small font-size: $font-size-small
@ -245,16 +250,24 @@
font-size: $font-size-small font-size: $font-size-small
color: darken($brown-light, 50%) color: darken($brown-light, 50%)
.avatar
width: 16px
height: 16px
roundall(0.2rem)
border-radius: 50%
margin: 0
padding: 0
margin-right: 5px
margin-top: 4px
.name .name
width: 100% width: 100%
line-height: 100%
overflow: hidden overflow: hidden
text-overflow: ellipsis text-overflow: ellipsis
height: $font-size-base+3
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.3)
position: absolute
left: 22px
max-width: 140px max-width: 140px
line-height: 23px
height: 23px
position: absolute
.unread .unread
display: none display: none
@ -264,8 +277,8 @@
roundall(5px) roundall(5px)
position: absolute position: absolute
padding-top:2px padding-top:2px
right: 5px right: 15px
top: 3px top: 6px
font-size: $font-size-smaller font-size: $font-size-smaller
font-weight: $font-weight-bold font-weight: $font-weight-bold
text-align: center text-align: center
@ -276,20 +289,13 @@
.remove, .join .remove, .join
position: absolute position: absolute
right: 7px right: 10px
top: 5px top: 8px
font-size: $font-size-base font-size: $font-size-base
display: inline-block display: inline-block
font-family: FontAwesome font-family: FontAwesome
visibility: hidden visibility: hidden
.prefix
font-weight: 300
opacity: 0.5
position: relative
left: -15px
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
button button
margin: -15px 0px 0px 5px margin: -15px 0px 0px 5px
@ -308,11 +314,13 @@
#roster #roster
.wrap .wrap
padding-left: 0px padding-left: 14px
height: 23px;
#bookmarks #bookmarks
.wrap .wrap
padding-left: 14px padding-left: 14px
height: 23px
@keyframes pulsate @keyframes pulsate
0% 0%
@ -321,3 +329,15 @@
opacity: 0.5 opacity: 0.5
100% 100%
opacity: 1.0 opacity: 1.0
#kaiwaNotice
position: absolute
bottom: 5px
left: 50%
width: 50px
margin-left: -25px
img
width: 100%
display: block
opacity: .4

18
public/css/pages/settings.styl
View File

@ -4,24 +4,12 @@
// Settings // Settings
.main .main
svg
position: absolute
top: 24px
left: 16px
margin: 0px
margin-top: -13px
fill: $gray
z-index: 101
h1 h1
color: $gray-dark color: #fff
padding: 0 padding: 6px 12px
margin: 0 margin: 0
position: fixed
top: 14px
left: 266px
right: 200px
z-index: 101 z-index: 101
position: fixed
#ldapSettings #ldapSettings
display: none display: none

4
server.js
View File

@ -352,7 +352,7 @@ var clientApp = new Moonboots({
debug: false debug: false
}, },
stylesheets: [ stylesheets: [
__dirname + '/public/css/otalk.css', __dirname + '/public/css/client.css',
__dirname + '/public/css/jquery.oembed.css', __dirname + '/public/css/jquery.oembed.css',
__dirname + '/public/css/jquery-impromptu.css' __dirname + '/public/css/jquery-impromptu.css'
], ],
@ -400,5 +400,5 @@ clientApp.on('ready', function () {
//}, app).listen(config.http.port); //}, app).listen(config.http.port);
app.listen(config.http.port, function () { app.listen(config.http.port, function () {
console.log('Otalk running at: ' + config.http.baseUrl); console.log('Kaiwa running at: ' + config.http.baseUrl);
}); });

2
views/layout.jade
View File

File diff suppressed because one or more lines are too long