More refactoring of css/sass.
- All chats (boxes and rooms) should now have .chatbox class (for base styles) - Move specific stuff to new sass files (fonts, chatbox, normalize)
This commit is contained in:
JC Brand
parent
8b3ede9e56
commit
37c6925e9c
@ -2810,7 +2810,7 @@
|
|||||||
this.ChatRoomView = converse.ChatBoxView.extend({
|
this.ChatRoomView = converse.ChatBoxView.extend({
|
||||||
length: 300,
|
length: 300,
|
||||||
tagName: 'div',
|
tagName: 'div',
|
||||||
className: 'chatroom',
|
className: 'chatbox chatroom',
|
||||||
events: {
|
events: {
|
||||||
'click .close-chatbox-button': 'close',
|
'click .close-chatbox-button': 'close',
|
||||||
'click .toggle-chatbox-button': 'minimize',
|
'click .toggle-chatbox-button': 'minimize',
|
||||||
|
|||||||
1057
css/converse.css
1057
css/converse.css
File diff suppressed because it is too large
Load Diff
@ -20,13 +20,13 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="conversejs">
|
<div id="conversejs">
|
||||||
<div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
|
<div class="chatbox chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<div class="dragresize dragresize-tm"></div>
|
<div class="dragresize dragresize-tm"></div>
|
||||||
<div class="chat-head chat-head-chatroom">
|
<div class="chat-head chat-head-chatroom">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<a class="toggle-chatbox-button icon-minus"></a>
|
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
|
||||||
<a class="configure-chatroom-button" style="display:none"> </a>
|
<a class="chatbox-btn configure-chatroom-button icon-wrench"></a>
|
||||||
<div class="chat-title"> discuss</div>
|
<div class="chat-title"> discuss</div>
|
||||||
<p class="chatroom-topic"></p>
|
<p class="chatroom-topic"></p>
|
||||||
<p></p>
|
<p></p>
|
||||||
|
|||||||
@ -25,15 +25,15 @@
|
|||||||
<span style="display: none" id="online-count">(0)</span>
|
<span style="display: none" id="online-count">(0)</span>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<div class="dragresize dragresize-top"></div>
|
<div class="dragresize dragresize-top"></div>
|
||||||
<div class="dragresize dragresize-topleft"></div>
|
<div class="dragresize dragresize-topleft"></div>
|
||||||
<div class="dragresize dragresize-left"></div>
|
<div class="dragresize dragresize-left"></div>
|
||||||
<div class="chat-head chat-head-chatroom">
|
<div class="chat-head chat-head-chatroom">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<a class="toggle-chatbox-button icon-minus"></a>
|
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
|
||||||
<a class="configure-chatroom-button icon-wrench" style=""></a>
|
<a class="chatbox-btn configure-chatroom-button icon-wrench"></a>
|
||||||
<div class="chat-title"> Chatroom </div>
|
<div class="chat-title"> Chatroom </div>
|
||||||
<p class="chatroom-topic">May the force be with you</p>
|
<p class="chatroom-topic">May the force be with you</p>
|
||||||
</div>
|
</div>
|
||||||
@ -105,13 +105,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
|
<div class="chatbox chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<div class="dragresize"></div>
|
<div class="dragresize dragresize-top"></div>
|
||||||
|
<div class="dragresize dragresize-topleft"></div>
|
||||||
|
<div class="dragresize dragresize-left"></div>
|
||||||
<div class="chat-head chat-head-chatroom">
|
<div class="chat-head chat-head-chatroom">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<a class="toggle-chatbox-button icon-minus"></a>
|
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
|
||||||
<a class="configure-chatroom-button" style="display:none"> </a>
|
<a class="chatbox-btn configure-chatroom-button icon-wrench"></a>
|
||||||
<div class="chat-title"> Restricted Chatroom</div>
|
<div class="chat-title"> Restricted Chatroom</div>
|
||||||
<p class="chatroom-topic"></p>
|
<p class="chatroom-topic"></p>
|
||||||
<p></p>
|
<p></p>
|
||||||
|
|||||||
@ -27,13 +27,15 @@
|
|||||||
|
|
||||||
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
|
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<div class="dragresize"></div>
|
<div class="dragresize dragresize-top"></div>
|
||||||
|
<div class="dragresize dragresize-topleft"></div>
|
||||||
|
<div class="dragresize dragresize-left"></div>
|
||||||
<div class="chat-head controlbox-head">
|
<div class="chat-head controlbox-head">
|
||||||
<ul id="controlbox-tabs">
|
<ul id="controlbox-tabs">
|
||||||
<li><a class="current" href="#login-dialog">Sign in</a></li>
|
<li><a class="current" href="#login-dialog">Sign in</a></li>
|
||||||
<li><a class="s" href="#register">Register</a></li>
|
<li><a class="s" href="#register">Register</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
</div>
|
</div>
|
||||||
<div class="controlbox-panes">
|
<div class="controlbox-panes">
|
||||||
<div id="login-dialog" class="controlbox-pane"><form id="converse-login" method="post">
|
<div id="login-dialog" class="controlbox-pane"><form id="converse-login" method="post">
|
||||||
@ -63,13 +65,15 @@
|
|||||||
|
|
||||||
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
|
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<div class="dragresize"></div>
|
<div class="dragresize dragresize-top"></div>
|
||||||
|
<div class="dragresize dragresize-topleft"></div>
|
||||||
|
<div class="dragresize dragresize-left"></div>
|
||||||
<div class="chat-head controlbox-head">
|
<div class="chat-head controlbox-head">
|
||||||
<ul id="controlbox-tabs">
|
<ul id="controlbox-tabs">
|
||||||
<li><a class="s current" href="#users">Contacts</a></li>
|
<li><a class="s current" href="#users">Contacts</a></li>
|
||||||
<li><a class="s" href="#chatrooms">Rooms</a></li>
|
<li><a class="s" href="#chatrooms">Rooms</a></li>
|
||||||
</ul>
|
</ul>
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
</div>
|
</div>
|
||||||
<div id="users" class="controlbox-pane" style="display: block;">
|
<div id="users" class="controlbox-pane" style="display: block;">
|
||||||
<form class="set-xmpp-status" action="" method="post">
|
<form class="set-xmpp-status" action="" method="post">
|
||||||
@ -138,14 +142,13 @@
|
|||||||
<option value="groups">Groups</option>
|
<option value="groups">Groups</option>
|
||||||
</select>
|
</select>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<dl class="roster-contacts" style="display: block;">
|
<dl class="roster-contacts" style="display: block;">
|
||||||
<dt class="roster-group" style="display: block;">
|
<dt class="roster-group" style="display: block;">
|
||||||
<a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
|
<a href="#" data-group="Colleagues" class="group-toggle icon-opened" title="Click to hide these contacts">Colleagues</a>
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="online current-xmpp-contact">
|
<dd class="online current-xmpp-contact">
|
||||||
<a class="open-chat" title="Name: Victor Matfield
|
<a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#">
|
||||||
JID: victor.matfield@localhost
|
|
||||||
Click to chat with this contact" href="#">
|
|
||||||
<span class="icon-online" title="This contact is online"></span>
|
<span class="icon-online" title="This contact is online"></span>
|
||||||
Victor Matfield
|
Victor Matfield
|
||||||
</a>
|
</a>
|
||||||
@ -165,7 +168,6 @@ Click to chat with this contact" href="#">
|
|||||||
</a>
|
</a>
|
||||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="roster-group" style="display: block;">
|
<dt class="roster-group" style="display: block;">
|
||||||
<a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
|
<a href="#" data-group="Family" class="group-toggle icon-opened" title="Click to hide these contacts">Family</a>
|
||||||
</dt>
|
</dt>
|
||||||
@ -183,7 +185,6 @@ Click to chat with this contact" href="#">
|
|||||||
</a>
|
</a>
|
||||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="roster-group" style="display: block;">
|
<dt class="roster-group" style="display: block;">
|
||||||
<a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
|
<a href="#" data-group="Friends" class="group-toggle icon-opened" title="Click to hide these contacts">Friends</a>
|
||||||
</dt>
|
</dt>
|
||||||
@ -201,7 +202,6 @@ Click to chat with this contact" href="#">
|
|||||||
</a>
|
</a>
|
||||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt class="roster-group" style="display: block;">
|
<dt class="roster-group" style="display: block;">
|
||||||
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
|
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
|
||||||
</dt>
|
</dt>
|
||||||
@ -212,13 +212,11 @@ Click to chat with this contact" href="#">
|
|||||||
</a>
|
</a>
|
||||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||||
</dd>
|
</dd>
|
||||||
|
<dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
|
||||||
<dt id="xmpp-contact-requests" style="display: block;">
|
|
||||||
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
|
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="offline requesting-xmpp-contact">
|
<dd class="offline requesting-xmpp-contact">
|
||||||
<span class="req-contact-name" title="Name: Bob Skinstad
|
<span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>
|
||||||
JID: bob.skinstad@localhost">Bob Skinstad</span>
|
|
||||||
<span class="request-actions">
|
<span class="request-actions">
|
||||||
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
<a class="accept-xmpp-request icon-checkmark" title="Click here to accept this contact's request" href="#"></a>
|
||||||
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
<a class="decline-xmpp-request icon-close" title="Click here to decline this contact's request" href="#"></a>
|
||||||
@ -232,11 +230,10 @@ JID: bob.skinstad@localhost">Bob Skinstad</span>
|
|||||||
</span>
|
</span>
|
||||||
</dd>
|
</dd>
|
||||||
|
|
||||||
<dt id="pending-xmpp-contacts" style="display: block;">
|
<dt class="roster-group" id="pending-xmpp-contacts" style="display: block;">
|
||||||
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
|
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Pending Contacts</a>
|
||||||
</dt>
|
</dt>
|
||||||
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name" title="Name: Rassie Erasmus
|
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name" title="Name: Rassie Erasmus JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
||||||
JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
|
||||||
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
|
||||||
</dd>
|
</dd>
|
||||||
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
|
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name">Victor Matfield</span>
|
||||||
@ -282,10 +279,12 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
|||||||
|
|
||||||
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
<div class="chatbox" id="37c0c87392010303765fe36b05c0967d62c6b70f">
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<div class="dragresize"></div>
|
<div class="dragresize dragresize-top"></div>
|
||||||
|
<div class="dragresize dragresize-topleft"></div>
|
||||||
|
<div class="dragresize dragresize-left"></div>
|
||||||
<div class="chat-head chat-head-chatbox">
|
<div class="chat-head chat-head-chatbox">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<a class="toggle-chatbox-button icon-minus"></a>
|
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
|
||||||
<canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
|
<canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
|
||||||
<div class="chat-title">
|
<div class="chat-title">
|
||||||
<a href="http://opkode.com" target="_blank" class="user">
|
<a href="http://opkode.com" target="_blank" class="user">
|
||||||
@ -359,15 +358,15 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<div class="dragresize dragresize-top"></div>
|
<div class="dragresize dragresize-top"></div>
|
||||||
<div class="dragresize dragresize-topleft"></div>
|
<div class="dragresize dragresize-topleft"></div>
|
||||||
<div class="dragresize dragresize-left"></div>
|
<div class="dragresize dragresize-left"></div>
|
||||||
<div class="chat-head chat-head-chatroom">
|
<div class="chat-head chat-head-chatroom">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<a class="toggle-chatbox-button icon-minus"></a>
|
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
|
||||||
<a class="configure-chatroom-button icon-wrench" style=""></a>
|
<a class="chatbox-btn configure-chatroom-button icon-wrench"></a>
|
||||||
<div class="chat-title"> Chatroom </div>
|
<div class="chat-title"> Chatroom </div>
|
||||||
<p class="chatroom-topic">May the force be with you</p>
|
<p class="chatroom-topic">May the force be with you</p>
|
||||||
</div>
|
</div>
|
||||||
@ -439,13 +438,15 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
|
<div class="chatbox chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
|
||||||
<div class="flyout box-flyout">
|
<div class="flyout box-flyout">
|
||||||
<div class="dragresize"></div>
|
<div class="dragresize dragresize-top"></div>
|
||||||
|
<div class="dragresize dragresize-topleft"></div>
|
||||||
|
<div class="dragresize dragresize-left"></div>
|
||||||
<div class="chat-head chat-head-chatroom">
|
<div class="chat-head chat-head-chatroom">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<a class="toggle-chatbox-button icon-minus"></a>
|
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
|
||||||
<a class="configure-chatroom-button" style="display:none"> </a>
|
<a class="chatbox-btn configure-chatroom-button icon-wrench"></a>
|
||||||
<div class="chat-title"> Restricted Chatroom</div>
|
<div class="chat-title"> Restricted Chatroom</div>
|
||||||
<p class="chatroom-topic"></p>
|
<p class="chatroom-topic"></p>
|
||||||
<p></p>
|
<p></p>
|
||||||
@ -470,7 +471,7 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
|||||||
</a>
|
</a>
|
||||||
<div class="flyout minimized-chats-flyout">
|
<div class="flyout minimized-chats-flyout">
|
||||||
<div class="chat-head chat-head-chatroom">
|
<div class="chat-head chat-head-chatroom">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<a class="chat-head-message-count" href="#" style="display:block">3</a>
|
<a class="chat-head-message-count" href="#" style="display:block">3</a>
|
||||||
<div class="chat-title">
|
<div class="chat-title">
|
||||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||||
@ -479,7 +480,7 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-head chat-head-chatbox">
|
<div class="chat-head chat-head-chatbox">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<a class="chat-head-message-count" href="#" style="display:block">42</a>
|
<a class="chat-head-message-count" href="#" style="display:block">42</a>
|
||||||
<div class="chat-title">
|
<div class="chat-title">
|
||||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||||
@ -488,14 +489,14 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-head chat-head-chatroom">
|
<div class="chat-head chat-head-chatroom">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<div class="chat-title">
|
<div class="chat-title">
|
||||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||||
My Chatroom
|
My Chatroom
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
<div class="chat-head chat-head-chatbox"><a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<div class="chat-title">
|
<div class="chat-title">
|
||||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||||
Annegreet Gomez
|
Annegreet Gomez
|
||||||
@ -503,7 +504,7 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-head chat-head-chatbox">
|
<div class="chat-head chat-head-chatbox">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<a class="chat-head-message-count" href="#" style="display:block">842</a>
|
<a class="chat-head-message-count" href="#" style="display:block">842</a>
|
||||||
<div class="chat-title">
|
<div class="chat-title">
|
||||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||||
@ -511,21 +512,21 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
|
|||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
<div class="chat-head chat-head-chatbox"><a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<div class="chat-title">
|
<div class="chat-title">
|
||||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||||
Candice van der Knijff
|
Candice van der Knijff
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
<div class="chat-head chat-head-chatbox"><a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<div class="chat-title">
|
<div class="chat-title">
|
||||||
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
<a href="#" class="restore-chat" title="Click to maximize this chat">
|
||||||
Laura Grunewald
|
Laura Grunewald
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="chat-head chat-head-chatbox"><a class="close-chatbox-button icon-close"></a>
|
<div class="chat-head chat-head-chatbox"><a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<div class="chat-title">
|
<div class="chat-title">
|
||||||
<a href="#" class="restore-chat">
|
<a href="#" class="restore-chat">
|
||||||
Lena Grunewald
|
Lena Grunewald
|
||||||
|
|||||||
258
sass/_chatbox.scss
Normal file
258
sass/_chatbox.scss
Normal file
@ -0,0 +1,258 @@
|
|||||||
|
#conversejs {
|
||||||
|
.chatbox {
|
||||||
|
display: block;
|
||||||
|
float: right;
|
||||||
|
height: $bottom-gutter-height;
|
||||||
|
margin: 0 $chat-gutter;
|
||||||
|
width: $chat-width;
|
||||||
|
@media screen and (max-width: $mobile-landscape-length) {
|
||||||
|
margin: 0;
|
||||||
|
width: $mobile-chat-width;
|
||||||
|
}
|
||||||
|
.flyout {
|
||||||
|
border-radius: $chatbox-border-radius;
|
||||||
|
bottom: $chatbox-hover-height;
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.box-flyout {
|
||||||
|
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
||||||
|
height: $chat-height;
|
||||||
|
min-height: $chat-height/2;
|
||||||
|
min-width: $chat-width;
|
||||||
|
width: $chat-width;
|
||||||
|
z-index: 1;
|
||||||
|
@media screen and (max-width: $mobile-landscape-length) {
|
||||||
|
height: $mobile-chat-height;
|
||||||
|
width: $mobile-chat-width;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-head {
|
||||||
|
border-top-left-radius: $chatbox-border-radius;
|
||||||
|
border-top-right-radius: $chatbox-border-radius;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 100%;
|
||||||
|
height: $chat-head-height;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
position: relative;
|
||||||
|
.avatar {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chat-head-chatbox {
|
||||||
|
background-color: $chat-head-color;
|
||||||
|
}
|
||||||
|
.chat-title {
|
||||||
|
a {
|
||||||
|
color: $chat-head-text-color;
|
||||||
|
width: 100%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chat-body {
|
||||||
|
background-color: white;
|
||||||
|
border-bottom-left-radius: $chatbox-border-radius;
|
||||||
|
border-bottom-right-radius: $chatbox-border-radius;
|
||||||
|
border-top: 0;
|
||||||
|
height: 289px;
|
||||||
|
@include calc(height, '100% - #{$chat-head-height}');
|
||||||
|
p {
|
||||||
|
color: $text-color;
|
||||||
|
font-size: $font-size;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chat-content {
|
||||||
|
position: relative;
|
||||||
|
padding: 0.5em;
|
||||||
|
font-size: 13px;
|
||||||
|
color: $text-color;
|
||||||
|
overflow-y: auto;
|
||||||
|
border: 0;
|
||||||
|
background-color: #ffffff;
|
||||||
|
line-height: 1.3em;
|
||||||
|
height: 206px;
|
||||||
|
height: calc(100% - #{$toolbar-height + $chat-textarea-height +1px});
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown { /* status dropdown styles */
|
||||||
|
background-color: $light-background-color;
|
||||||
|
dd {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
form.sendXMPPMessage {
|
||||||
|
-moz-background-clip: padding;
|
||||||
|
-webkit-background-clip: padding-box;
|
||||||
|
@include border-bottom-radius($chatbox-border-radius);
|
||||||
|
background-clip: padding-box;
|
||||||
|
background: white;
|
||||||
|
border-top: 1px solid #BBB;
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
position: relative;
|
||||||
|
height: #{$chat-textarea-height + $toolbar-height};
|
||||||
|
min-width: $chat-width;
|
||||||
|
@media screen and (max-width: $mobile-landscape-length) {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
.chat-textarea {
|
||||||
|
@include border-bottom-radius($chatbox-border-radius);
|
||||||
|
border: 0;
|
||||||
|
height: $chat-textarea-height;
|
||||||
|
padding: 0.5em;
|
||||||
|
width: 100%;
|
||||||
|
resize: none;
|
||||||
|
}
|
||||||
|
.chat-toolbar {
|
||||||
|
font-size: $font-size;
|
||||||
|
margin: 0;
|
||||||
|
padding: 5px;
|
||||||
|
height: $toolbar-height;
|
||||||
|
display: block;
|
||||||
|
background-color: $light-background-color;
|
||||||
|
a {
|
||||||
|
color: $link-color;
|
||||||
|
}
|
||||||
|
.chat-toolbar-text {
|
||||||
|
font-size: 12px;
|
||||||
|
padding-right: 3px;
|
||||||
|
text-shadow: 0 1px 0 white
|
||||||
|
}
|
||||||
|
.unencrypted a,
|
||||||
|
.unencrypted {
|
||||||
|
color: #8f2831;
|
||||||
|
}
|
||||||
|
.unverified a,
|
||||||
|
.unverified {
|
||||||
|
color: #cf5300;
|
||||||
|
}
|
||||||
|
.private a,
|
||||||
|
.private {
|
||||||
|
color: #4b7003;
|
||||||
|
}
|
||||||
|
.toggle-participants,
|
||||||
|
.toggle-clear,
|
||||||
|
.toggle-otr {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
display: inline-block;
|
||||||
|
list-style: none;
|
||||||
|
padding: 0 3px 0 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin-top: 1px;
|
||||||
|
}
|
||||||
|
li:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
background: #fff;
|
||||||
|
bottom: 100%;
|
||||||
|
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
|
||||||
|
display: none;
|
||||||
|
font-size: 12px;
|
||||||
|
margin: 0 0 1px 0;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
li {
|
||||||
|
cursor: pointer;
|
||||||
|
list-style: none;
|
||||||
|
position: relative;
|
||||||
|
a:hover {
|
||||||
|
color: #8f2831;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.toggle-smiley {
|
||||||
|
color: $link-color;
|
||||||
|
padding-left: 5px;
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
font-size: $font-size;
|
||||||
|
padding: 5px;
|
||||||
|
z-index: 98;
|
||||||
|
}
|
||||||
|
li:hover {
|
||||||
|
background-color: $highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.toggle-otr {
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
padding: 7px;
|
||||||
|
background-color: white;
|
||||||
|
display: block;
|
||||||
|
z-index: 99;
|
||||||
|
a {
|
||||||
|
-moz-transition: background-color 0.2s ease-in-out;
|
||||||
|
-webkit-transition: background-color 0.2s ease-in-out;
|
||||||
|
transition: background-color 0.2s ease-in-out;
|
||||||
|
display: block;
|
||||||
|
padding: 1px;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li:hover {
|
||||||
|
background-color: $highlight-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.dragresize {
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
margin: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
z-index: 20;
|
||||||
|
&-top {
|
||||||
|
cursor: n-resize;
|
||||||
|
height: 5px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&-left {
|
||||||
|
cursor: w-resize;
|
||||||
|
width: 5px;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
&-topleft {
|
||||||
|
cursor: nw-resize;
|
||||||
|
width: 15px;
|
||||||
|
height: 15px;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.chatbox-btn {
|
||||||
|
border-radius: 5px;
|
||||||
|
border: 1px solid #888;
|
||||||
|
color: white;
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
float: right;
|
||||||
|
font-size: $box-close-font-size;
|
||||||
|
margin: 0 0 0 3px;
|
||||||
|
padding-bottom: $box-close-button-padding-bottom;
|
||||||
|
padding-left: $box-close-button-padding-left;
|
||||||
|
padding-right: $box-close-button-padding-right;
|
||||||
|
padding-top: $box-close-button-padding-top;
|
||||||
|
text-decoration: none;
|
||||||
|
&:active {
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -122,6 +122,11 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.chat-head-chatroom {
|
||||||
|
background-color: $chatroom-head-color;
|
||||||
|
}
|
||||||
|
|
||||||
.chat-textarea {
|
.chat-textarea {
|
||||||
border-bottom-right-radius: 0;
|
border-bottom-right-radius: 0;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,15 +1,23 @@
|
|||||||
#conversejs {
|
#conversejs {
|
||||||
form.search-xmpp-contact {
|
|
||||||
margin: 0;
|
|
||||||
padding-left: 5px;
|
|
||||||
padding: 0 0 5px 5px;
|
|
||||||
input {
|
|
||||||
width: 8em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#controlbox {
|
#controlbox {
|
||||||
display: none;
|
display: none;
|
||||||
|
.controlbox-head {
|
||||||
|
background-color: $chat-head-color;
|
||||||
|
border-top-left-radius: $chatbox-border-radius;
|
||||||
|
border-top-right-radius: $chatbox-border-radius;
|
||||||
|
color: $chat-head-inverse-text-color;
|
||||||
|
height: $chat-head-height;
|
||||||
|
margin: 0;
|
||||||
|
padding: 6px 6px 6px 0;
|
||||||
|
}
|
||||||
|
form.search-xmpp-contact {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 5px;
|
||||||
|
padding: 0 0 5px 5px;
|
||||||
|
input {
|
||||||
|
width: 8em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
#converse-register {
|
#converse-register {
|
||||||
background: white;
|
background: white;
|
||||||
@ -93,6 +101,98 @@
|
|||||||
padding-left: 0.5em;
|
padding-left: 0.5em;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
#users {
|
||||||
|
.add-converse-contact {
|
||||||
|
margin: 0 0.5em 0.75em 0.5em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
#chatrooms {
|
||||||
|
overflow-y: auto;
|
||||||
|
form.add-chatroom {
|
||||||
|
background: none;
|
||||||
|
padding: 0.5em;
|
||||||
|
input[type=button],
|
||||||
|
input[type=submit],
|
||||||
|
input[type=text] {
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0.25em;
|
||||||
|
}
|
||||||
|
span.spinner,
|
||||||
|
input[type=button],
|
||||||
|
input[type=submit] {
|
||||||
|
margin-top: 0.5em;
|
||||||
|
display: table-cell;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
input[type=submit] {
|
||||||
|
color: $save-button-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#available-chatrooms {
|
||||||
|
text-align: left;
|
||||||
|
dt {
|
||||||
|
font-weight: normal;
|
||||||
|
color: $text-color;
|
||||||
|
border: none;
|
||||||
|
padding: 0.5em;
|
||||||
|
text-shadow: 0 1px 0 $text-shadow-color;
|
||||||
|
}
|
||||||
|
dd.available-chatroom {
|
||||||
|
border: none;
|
||||||
|
clear: both;
|
||||||
|
color: $text-color;
|
||||||
|
display: block;
|
||||||
|
font-weight: bold;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 0.25em 0.5em;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
text-shadow: 0 1px 0 $text-shadow-color;
|
||||||
|
white-space: nowrap;
|
||||||
|
&:hover {
|
||||||
|
background-color: $highlight-color;
|
||||||
|
.room-info {
|
||||||
|
display: block;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
&.room-info {
|
||||||
|
width: 15px;
|
||||||
|
display: none;
|
||||||
|
clear: right;
|
||||||
|
}
|
||||||
|
&.open-room {
|
||||||
|
float: left;
|
||||||
|
overflow-x: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 150px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.room-info {
|
||||||
|
font-size: 11px;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
li.room-info {
|
||||||
|
display: block;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
p.room-info {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: block;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
div.room-info {
|
||||||
|
clear: left;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.dropdown {
|
.dropdown {
|
||||||
a {
|
a {
|
||||||
@ -294,29 +394,6 @@
|
|||||||
z-index: 22;
|
z-index: 22;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
form.add-chatroom {
|
|
||||||
background: none;
|
|
||||||
padding: 0.5em;
|
|
||||||
|
|
||||||
input[type=button],
|
|
||||||
input[type=submit],
|
|
||||||
input[type=text] {
|
|
||||||
margin: 0;
|
|
||||||
width: 100%;
|
|
||||||
padding: 0.25em;
|
|
||||||
}
|
|
||||||
span.spinner,
|
|
||||||
input[type=button],
|
|
||||||
input[type=submit] {
|
|
||||||
margin-top: 0.5em;
|
|
||||||
display: table-cell;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
input[type=submit] {
|
|
||||||
color: $save-button-color;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.toggle-controlbox {
|
.toggle-controlbox {
|
||||||
|
|||||||
1087
sass/_core.scss
1087
sass/_core.scss
File diff suppressed because it is too large
Load Diff
150
sass/_fonts.scss
Normal file
150
sass/_fonts.scss
Normal file
@ -0,0 +1,150 @@
|
|||||||
|
@font-face {
|
||||||
|
font-family: 'Converse-js';
|
||||||
|
src: url($font-path + 'icomoon.eot?-mnoxh0');
|
||||||
|
src: url($font-path + 'icomoon.eot?#iefix-mnoxh0') format("embedded-opentype"), url($font-path + 'icomoon.woff?-mnoxh0') format("woff"), url($font-path + 'icomoon.ttf?-mnoxh0') format("truetype"), url($font-path + 'icomoon.svg?-mnoxh0#icomoon') format("svg");
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-conversejs {
|
||||||
|
font-family: 'Converse-js';
|
||||||
|
speak: none;
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
text-transform: none;
|
||||||
|
line-height: 1;
|
||||||
|
/* Better Font Rendering =========== */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-conversejs:before {
|
||||||
|
content: "\e600";
|
||||||
|
}
|
||||||
|
|
||||||
|
#conversejs {
|
||||||
|
.icon-address-book:before { content: "\270f"; }
|
||||||
|
.icon-angry:before { content: "\e03f"; }
|
||||||
|
.icon-attachment:before { content: "\e032"; }
|
||||||
|
.icon-away:before { content: "\25fb"; }
|
||||||
|
.icon-blocked:before { content: "\2718"; }
|
||||||
|
.icon-bold:before { content: "\e04d"; }
|
||||||
|
.icon-bubbles-2:before { content: "\e016"; }
|
||||||
|
.icon-bubbles-3:before { content: "\e017"; }
|
||||||
|
.icon-bubbles:before { content: "\e015"; }
|
||||||
|
.icon-camera-2:before { content: "\2616"; }
|
||||||
|
.icon-camera:before { content: "\e003"; }
|
||||||
|
.icon-cancel-circle:before { content: "\e058"; }
|
||||||
|
.icon-checkbox-checked:before { content: "\2611"; }
|
||||||
|
.icon-checkbox-partial:before { content: "\2b28"; }
|
||||||
|
.icon-checkbox-unchecked:before { content: "\2b27"; }
|
||||||
|
.icon-checkmark:before { content: "\2713"; }
|
||||||
|
.icon-close:before { content: "\2715"; }
|
||||||
|
.icon-closed:before { content: "\25ba"; }
|
||||||
|
.icon-cog:before { content: "\e02f"; }
|
||||||
|
.icon-cogs:before { content: "\e022"; }
|
||||||
|
.icon-confused:before { content: "\2368"; }
|
||||||
|
.icon-cool:before { content: "\e040"; }
|
||||||
|
.icon-dnd:before { content: "\e004"; }
|
||||||
|
.icon-envelop:before { content: "\2709"; }
|
||||||
|
.icon-evil:before { content: "\261f"; }
|
||||||
|
.icon-eye-blocked:before { content: "\e031"; }
|
||||||
|
.icon-eye:before { content: "\e030"; }
|
||||||
|
.icon-globe:before { content: "\e033"; }
|
||||||
|
.icon-grin:before { content: "\e041"; }
|
||||||
|
.icon-happy:before { content: "\263b"; }
|
||||||
|
.icon-headphones:before { content: "\266c"; }
|
||||||
|
.icon-heart:before { content: "\2764"; }
|
||||||
|
.icon-hide-users:before { content: "\e01c"; }
|
||||||
|
.icon-home:before { content: "\e000"; }
|
||||||
|
.icon-image:before { content: "\2b14"; }
|
||||||
|
.icon-info:before { content: "\2360"; }
|
||||||
|
.icon-italic:before { content: "\e04f"; }
|
||||||
|
.icon-key-2:before { content: "\e029"; }
|
||||||
|
.icon-key:before { content: "\e028"; }
|
||||||
|
.icon-lock-2:before { content: "\e027"; }
|
||||||
|
.icon-lock:before { content: "\e026"; }
|
||||||
|
.icon-logout:before { content: "\e601"; }
|
||||||
|
.icon-minus:before { content: "\e05a"; }
|
||||||
|
.icon-music:before { content: "\266b"; }
|
||||||
|
.icon-new-tab:before { content: "\e053"; }
|
||||||
|
.icon-newspaper:before { content: "\e001"; }
|
||||||
|
.icon-notebook:before { content: "\2710"; }
|
||||||
|
.icon-notification:before { content: "\e01f"; }
|
||||||
|
.icon-online:before { content: "\25fc"; }
|
||||||
|
.icon-chat:before { content: "\25fc"; }
|
||||||
|
.icon-opened:before { content: "\25bc"; }
|
||||||
|
.icon-pencil:before { content: "\270e"; }
|
||||||
|
.icon-phone-hang-up:before { content: "\260e"; }
|
||||||
|
.icon-phone:before { content: "\260f"; }
|
||||||
|
.icon-play:before { content: "\25d9"; }
|
||||||
|
.icon-plus:before { content: "\271a"; }
|
||||||
|
.icon-pushpin:before { content: "\e012"; }
|
||||||
|
.icon-quotes-left:before { content: "\e01d"; }
|
||||||
|
.icon-radio-checked:before { content: "\2b26"; }
|
||||||
|
.icon-radio-unchecked:before { content: "\2b25"; }
|
||||||
|
.icon-remove:before { content: "\e02d"; }
|
||||||
|
.icon-room-info:before { content: "\e059"; }
|
||||||
|
.icon-sad:before { content: "\2639"; }
|
||||||
|
.icon-search:before { content: "\e021"; }
|
||||||
|
.icon-shocked:before { content: "\2364"; }
|
||||||
|
.icon-show-users:before { content: "\e01e"; }
|
||||||
|
.icon-smiley:before { content: "\263a"; }
|
||||||
|
.icon-spell-check:before { content: "\e045"; }
|
||||||
|
.icon-spinner:before { content: "\231b"; }
|
||||||
|
.icon-strikethrough:before { content: "\e050"; }
|
||||||
|
.icon-thumbs-up:before { content: "\261d"; }
|
||||||
|
.icon-tongue:before { content: "\e038"; }
|
||||||
|
.icon-underline:before { content: "\e04e"; }
|
||||||
|
.icon-unlocked:before { content: "\e025"; }
|
||||||
|
.icon-user:before { content: "\e01a"; }
|
||||||
|
.icon-users:before { content: "\e01b"; }
|
||||||
|
.icon-volume-decrease:before { content: "\e04b"; }
|
||||||
|
.icon-volume-high:before { content: "\e046"; }
|
||||||
|
.icon-volume-increase:before { content: "\e04c"; }
|
||||||
|
.icon-volume-low:before { content: "\e048"; }
|
||||||
|
.icon-volume-medium:before { content: "\e047"; }
|
||||||
|
.icon-volume-mute-2:before { content: "\e04a"; }
|
||||||
|
.icon-volume-mute:before { content: "\e049"; }
|
||||||
|
.icon-warning:before { content: "\26a0"; }
|
||||||
|
.icon-wink:before { content: "\e03a"; }
|
||||||
|
.icon-wondering:before { content: "\2369"; }
|
||||||
|
.icon-wrench:before { content: "\e024"; }
|
||||||
|
.icon-xa:before { content: "\e602"; }
|
||||||
|
.icon-unavailable:before,
|
||||||
|
.icon-offline:before { content: "\e002"; }
|
||||||
|
.icon-youtube:before { content: "\e055"; }
|
||||||
|
.icon-zoom-in:before { content: "\e02b"; }
|
||||||
|
.icon-zoom-out:before { content: "\e02a"; }
|
||||||
|
|
||||||
|
[data-icon]:before {
|
||||||
|
content: attr(data-icon);
|
||||||
|
font-family: 'Converse-js';
|
||||||
|
font-variant: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1;
|
||||||
|
speak: none;
|
||||||
|
text-transform: none;
|
||||||
|
/* Better Font Rendering =========== */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
[class^="icon-"], [class*=" icon-"] {
|
||||||
|
background-position: 14px 14px;
|
||||||
|
background-image: none;
|
||||||
|
font-family: 'Converse-js';
|
||||||
|
font-style: normal;
|
||||||
|
font-variant: normal;
|
||||||
|
font-weight: normal;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
line-height: 1;
|
||||||
|
speak: none;
|
||||||
|
text-transform: none;
|
||||||
|
/* Better Font Rendering =========== */
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
}
|
||||||
64
sass/_normalize.scss
Normal file
64
sass/_normalize.scss
Normal file
@ -0,0 +1,64 @@
|
|||||||
|
#conversejs {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
*, *:before, *:after {
|
||||||
|
@include box-sizing(border-box);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: $mobile-landscape-length) {
|
||||||
|
margin: 0;
|
||||||
|
right: 10px;
|
||||||
|
left: 10px;
|
||||||
|
bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul li { height: auto; }
|
||||||
|
div, span, h1, h2, h3, h4, h5, h6, p, blockquote,
|
||||||
|
pre, a, em, img, strong, dl, dt, dd, ol, ul, li,
|
||||||
|
fieldset, form, label, legend, table, caption, tbody,
|
||||||
|
tfoot, thead, tr, th, td, article, aside, canvas, details,
|
||||||
|
embed, figure, figcaption, footer, header, hgroup, menu,
|
||||||
|
nav, output, ruby, section, summary, time, mark, audio, video {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
border: 0;
|
||||||
|
font: inherit;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea,
|
||||||
|
input[type=submit], input[type=button],
|
||||||
|
input[type=text], input[type=password],
|
||||||
|
button {
|
||||||
|
font-size: $font-size;
|
||||||
|
padding: 0.25em;
|
||||||
|
min-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
input[type=text] {
|
||||||
|
height: 26px;
|
||||||
|
}
|
||||||
|
|
||||||
|
strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
ol, ul {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
ul, ol, dl {
|
||||||
|
font: inherit;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:visited {
|
||||||
|
text-decoration: none;
|
||||||
|
color: $link-color;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -48,78 +48,80 @@
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
}
|
dt.roster-group {
|
||||||
.group-toggle {
|
border: none;
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
display: block;
|
display: none;
|
||||||
width: 100%;
|
font-weight: normal;
|
||||||
}
|
padding: 0.5em;
|
||||||
.roster-group:hover {
|
text-shadow: 0 1px 0 $text-shadow-color;
|
||||||
background-color: $highlight-color;
|
&:hover {
|
||||||
}
|
background-color: $highlight-color;
|
||||||
dt {
|
|
||||||
border: none;
|
|
||||||
color: $text-color;
|
|
||||||
display: none;
|
|
||||||
font-weight: normal;
|
|
||||||
padding: 0.5em;
|
|
||||||
text-shadow: 0 1px 0 $text-shadow-color;
|
|
||||||
}
|
|
||||||
dd {
|
|
||||||
border: none;
|
|
||||||
clear: both;
|
|
||||||
color: $text-color;
|
|
||||||
display: block;
|
|
||||||
font-weight: bold;
|
|
||||||
height: 24px;
|
|
||||||
line-height: 16px;
|
|
||||||
overflow-y: hidden;
|
|
||||||
padding: 4px 2px 0 4px;
|
|
||||||
text-shadow: 0 1px 0 $text-shadow-color;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background-color: $highlight-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
a, span {
|
|
||||||
text-shadow: 0 1px 0 $link-shadow-color;
|
|
||||||
display: inline-block;
|
|
||||||
overflow: hidden;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin-left: 3px;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
padding: 0 5px 0 0;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
&.decline-xmpp-request {
|
|
||||||
margin-left: 5px;
|
|
||||||
}
|
}
|
||||||
&.remove-xmpp-contact {
|
.group-toggle {
|
||||||
float: right;
|
|
||||||
width: 22px;
|
|
||||||
margin: 0;
|
|
||||||
display: none;
|
|
||||||
color: $text-color;
|
color: $text-color;
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
dd {
|
||||||
dd {
|
border: none;
|
||||||
&:hover a.remove-xmpp-contact {
|
clear: both;
|
||||||
display: inline-block;
|
color: $text-color;
|
||||||
}
|
display: block;
|
||||||
&.odd {
|
font-weight: bold;
|
||||||
background-color: #DCEAC5;
|
height: 24px;
|
||||||
/* Make this difference */
|
line-height: 16px;
|
||||||
}
|
overflow-y: hidden;
|
||||||
&.current-xmpp-contact span {
|
padding: 4px 2px 0 4px;
|
||||||
font-size: 16px;
|
text-shadow: 0 1px 0 $text-shadow-color;
|
||||||
float: left;
|
&:hover {
|
||||||
color: $link-color;
|
background-color: $highlight-color;
|
||||||
}
|
a.remove-xmpp-contact {
|
||||||
a.open-chat {
|
display: inline-block;
|
||||||
width: 80%;
|
}
|
||||||
|
}
|
||||||
|
&.requesting-xmpp-contact {
|
||||||
|
&.request-actions {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.current-xmpp-contact span {
|
||||||
|
font-size: 16px;
|
||||||
|
float: left;
|
||||||
|
color: $link-color;
|
||||||
|
}
|
||||||
|
&.odd {
|
||||||
|
background-color: #DCEAC5;
|
||||||
|
/* Make this difference */
|
||||||
|
}
|
||||||
|
a, span {
|
||||||
|
text-shadow: 0 1px 0 $link-shadow-color;
|
||||||
|
display: inline-block;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin-left: 3px;
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
padding: 0 5px 0 0;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
&.decline-xmpp-request {
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
&.remove-xmpp-contact {
|
||||||
|
float: right;
|
||||||
|
width: 22px;
|
||||||
|
margin: 0;
|
||||||
|
display: none;
|
||||||
|
color: $text-color;
|
||||||
|
}
|
||||||
|
.open-chat {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
span {
|
span {
|
||||||
|
|||||||
@ -8,7 +8,10 @@
|
|||||||
|
|
||||||
@import "bourbon";
|
@import "bourbon";
|
||||||
@import "variables";
|
@import "variables";
|
||||||
|
@import "fonts";
|
||||||
|
@import "normalize";
|
||||||
@import "core";
|
@import "core";
|
||||||
|
@import "chatbox";
|
||||||
@import "controlbox";
|
@import "controlbox";
|
||||||
@import "roster";
|
@import "roster";
|
||||||
@import "chatrooms";
|
@import "chatrooms";
|
||||||
|
|||||||
@ -3,8 +3,8 @@
|
|||||||
<div class="dragresize dragresize-topleft"></div>
|
<div class="dragresize dragresize-topleft"></div>
|
||||||
<div class="dragresize dragresize-left"></div>
|
<div class="dragresize dragresize-left"></div>
|
||||||
<div class="chat-head chat-head-chatbox">
|
<div class="chat-head chat-head-chatbox">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<a class="toggle-chatbox-button icon-minus"></a>
|
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
|
||||||
<div class="chat-title">
|
<div class="chat-title">
|
||||||
{[ if (url) { ]}
|
{[ if (url) { ]}
|
||||||
<a href="{{url}}" target="_blank" class="user">
|
<a href="{{url}}" target="_blank" class="user">
|
||||||
|
|||||||
@ -3,9 +3,9 @@
|
|||||||
<div class="dragresize dragresize-topleft"></div>
|
<div class="dragresize dragresize-topleft"></div>
|
||||||
<div class="dragresize dragresize-left"></div>
|
<div class="dragresize dragresize-left"></div>
|
||||||
<div class="chat-head chat-head-chatroom">
|
<div class="chat-head chat-head-chatroom">
|
||||||
<a class="close-chatbox-button icon-close"></a>
|
<a class="chatbox-btn close-chatbox-button icon-close"></a>
|
||||||
<a class="toggle-chatbox-button icon-minus"></a>
|
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
|
||||||
<a class="configure-chatroom-button icon-wrench" style="display:none"></a>
|
<a class="chatbox-btn configure-chatroom-button icon-wrench" style="display:none"></a>
|
||||||
<div class="chat-title"> {{ _.escape(name) }} </div>
|
<div class="chat-title"> {{ _.escape(name) }} </div>
|
||||||
<p class="chatroom-topic"><p/>
|
<p class="chatroom-topic"><p/>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
<dt id="pending-xmpp-contacts"><a href="#" class="group-toggle icon-{{toggle_state}}" title="{{desc_group_toggle}}">{{label_pending_contacts}}</a></dt>
|
<dt class="roster-group" id="pending-xmpp-contacts"><a href="#" class="group-toggle icon-{{toggle_state}}" title="{{desc_group_toggle}}">{{label_pending_contacts}}</a></dt>
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
<dt id="xmpp-contact-requests"><a href="#" class="group-toggle icon-{{toggle_state}}" title="{{desc_group_toggle}}">{{label_contact_requests}}</a></dt>
|
<dt class="roster-group" id="xmpp-contact-requests"><a href="#" class="group-toggle icon-{{toggle_state}}" title="{{desc_group_toggle}}">{{label_contact_requests}}</a></dt>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user