new design for Kaiwa to distinguish from Slack

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

View File

@ -13,7 +13,7 @@ exports.pages = {};
exports.body = function anonymous(locals) {
var buf = [];
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("");
};
@ -113,7 +113,7 @@ exports.includes.call = function anonymous(locals) {
exports.includes.contactListItem = function anonymous(locals) {
var buf = [];
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("");
};
@ -320,7 +320,7 @@ exports.includes.mucBareMessage = function anonymous(locals) {
exports.includes.mucListItem = function anonymous(locals) {
var buf = [];
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("");
};
@ -539,7 +539,7 @@ exports.misc.growlMessage = function anonymous(locals) {
exports.pages.chat = function anonymous(locals) {
var buf = [];
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("");
};
@ -548,7 +548,7 @@ exports.pages.chat = function anonymous(locals) {
exports.pages.groupchat = function anonymous(locals) {
var buf = [];
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("");
};
@ -557,7 +557,7 @@ exports.pages.groupchat = function anonymous(locals) {
exports.pages.settings = function anonymous(locals) {
var buf = [];
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("");
};

View File

@ -11,15 +11,18 @@ body
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='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
h1 Rooms
nav
input(type="text", class="inline", placeholder="add a room")#joinmuc
section#roster
h1 Direct messages
ul#contactrequests
nav
input(type="text", class="inline", placeholder="add a contact")#addcontact
div.viewport
section#bookmarks
h1 Rooms
nav
input(type="text", class="inline", placeholder="add a room")#joinmuc
section#roster
h1 Contacts
ul#contactrequests
nav
input(type="text", class="inline", placeholder="add a contact")#addcontact
section#kaiwaNotice
img(src="/images/logo.png", alt="Kaiwa")
header#topbar
#connectionStatus
p

View File

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

View File

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

View File

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

View File

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

View File

@ -1,9 +1,5 @@
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
div#avatarChanger

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -352,7 +352,7 @@ var clientApp = new Moonboots({
debug: false
},
stylesheets: [
__dirname + '/public/css/otalk.css',
__dirname + '/public/css/client.css',
__dirname + '/public/css/jquery.oembed.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, function () {
console.log('Otalk running at: ' + config.http.baseUrl);
console.log('Kaiwa running at: ' + config.http.baseUrl);
});

File diff suppressed because one or more lines are too long