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 2015-10-27 10:17:55 +00:00
parent 8b3ede9e56
commit 37c6925e9c
17 changed files with 1480 additions and 1542 deletions

View File

@ -2810,7 +2810,7 @@
this.ChatRoomView = converse.ChatBoxView.extend({
length: 300,
tagName: 'div',
className: 'chatroom',
className: 'chatbox chatroom',
events: {
'click .close-chatbox-button': 'close',
'click .toggle-chatbox-button': 'minimize',

File diff suppressed because it is too large Load Diff

View File

@ -20,13 +20,13 @@
</div>
<div id="conversejs">
<div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
<div class="chatbox chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
<div class="flyout box-flyout">
<div class="dragresize dragresize-tm"></div>
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<a class="configure-chatroom-button" style="display:none">&nbsp;</a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn configure-chatroom-button icon-wrench"></a>
<div class="chat-title"> discuss</div>
<p class="chatroom-topic"></p>
<p></p>

View File

@ -25,15 +25,15 @@
<span style="display: none" id="online-count">(0)</span>
</a>
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout">
<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">
<a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<a class="configure-chatroom-button icon-wrench" style=""></a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn configure-chatroom-button icon-wrench"></a>
<div class="chat-title"> Chatroom </div>
<p class="chatroom-topic">May the force be with you</p>
</div>
@ -105,13 +105,15 @@
</div>
</div>
<div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
<div class="chatbox chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
<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">
<a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<a class="configure-chatroom-button" style="display:none">&nbsp;</a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn configure-chatroom-button icon-wrench"></a>
<div class="chat-title"> Restricted Chatroom</div>
<p class="chatroom-topic"></p>
<p></p>

View File

@ -27,13 +27,15 @@
<div id="controlbox" class="chatbox" style="opacity: 1; display: inline;">
<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">
<ul id="controlbox-tabs">
<li><a class="current" href="#login-dialog">Sign in</a></li>
<li><a class="s" href="#register">Register</a></li>
</ul>
<a class="close-chatbox-button icon-close"></a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
</div>
<div class="controlbox-panes">
<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 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">
<ul id="controlbox-tabs">
<li><a class="s current" href="#users">Contacts</a></li>
<li><a class="s" href="#chatrooms">Rooms</a></li>
</ul>
<a class="close-chatbox-button icon-close"></a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
</div>
<div id="users" class="controlbox-pane" style="display: block;">
<form class="set-xmpp-status" action="" method="post">
@ -138,14 +142,13 @@
<option value="groups">Groups</option>
</select>
</span>
<dl class="roster-contacts" 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>
</dt>
<dd class="online current-xmpp-contact">
<a class="open-chat" title="Name: Victor Matfield
JID: victor.matfield@localhost
Click to chat with this contact" href="#">
<a class="open-chat" title="Name: Victor Matfield JID: victor.matfield@localhost Click to chat with this contact" href="#">
<span class="icon-online" title="This contact is online"></span>
Victor Matfield
</a>
@ -165,7 +168,6 @@ Click to chat with this contact" href="#">
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<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>
</dt>
@ -183,7 +185,6 @@ Click to chat with this contact" href="#">
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<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>
</dt>
@ -201,7 +202,6 @@ Click to chat with this contact" href="#">
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt class="roster-group" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Ungrouped</a>
</dt>
@ -212,13 +212,11 @@ Click to chat with this contact" href="#">
</a>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<dt id="xmpp-contact-requests" style="display: block;">
<dt class="roster-group" id="xmpp-contact-requests" style="display: block;">
<a href="#" class="group-toggle icon-opened" title="Click to hide these contacts">Contact Requests</a>
</dt>
<dd class="offline requesting-xmpp-contact">
<span class="req-contact-name" title="Name: Bob Skinstad
JID: bob.skinstad@localhost">Bob Skinstad</span>
<span class="req-contact-name" title="Name: Bob Skinstad JID: bob.skinstad@localhost">Bob Skinstad</span>
<span class="request-actions">
<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>
@ -232,11 +230,10 @@ JID: bob.skinstad@localhost">Bob Skinstad</span>
</span>
</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>
</dt>
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name" title="Name: Rassie Erasmus
JID: rassie.erasmus@localhost">Rassie Erasmus</span>
<dd class="offline pending-xmpp-contact"><span class="pending-contact-name" title="Name: Rassie Erasmus JID: rassie.erasmus@localhost">Rassie Erasmus</span>
<a class="remove-xmpp-contact icon-remove" title="Click to remove this contact" href="#"></a>
</dd>
<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="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">
<a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<canvas height="31px" width="31px" class="avatar" style="background-color: black"></canvas>
<div class="chat-title">
<a href="http://opkode.com" target="_blank" class="user">
@ -359,15 +358,15 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
</div>
</div>
<div class="chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="chatbox chatroom" id="4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout">
<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">
<a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<a class="configure-chatroom-button icon-wrench" style=""></a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn configure-chatroom-button icon-wrench"></a>
<div class="chat-title"> Chatroom </div>
<p class="chatroom-topic">May the force be with you</p>
</div>
@ -439,13 +438,15 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
</div>
</div>
<div class="chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
<div class="chatbox chatroom" id="6d8627960a0cb066d9216742f3edccc3dbbf85a9">
<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">
<a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<a class="configure-chatroom-button" style="display:none">&nbsp;</a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn configure-chatroom-button icon-wrench"></a>
<div class="chat-title"> Restricted Chatroom</div>
<p class="chatroom-topic"></p>
<p></p>
@ -470,7 +471,7 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
</a>
<div class="flyout minimized-chats-flyout">
<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>
<div class="chat-title">
<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 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>
<div class="chat-title">
<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 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">
<a href="#" class="restore-chat" title="Click to maximize this chat">
My Chatroom
</a>
</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">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Annegreet Gomez
@ -503,7 +504,7 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
</div>
</div>
<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>
<div class="chat-title">
<a href="#" class="restore-chat" title="Click to maximize this chat">
@ -511,21 +512,21 @@ JID: rassie.erasmus@localhost">Rassie Erasmus</span>
</a>
</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">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Candice van der Knijff
</a>
</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">
<a href="#" class="restore-chat" title="Click to maximize this chat">
Laura Grunewald
</a>
</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">
<a href="#" class="restore-chat">
Lena Grunewald

258
sass/_chatbox.scss Normal file
View 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;
}
}
}
}

View File

@ -122,6 +122,11 @@
}
}
}
.chat-head-chatroom {
background-color: $chatroom-head-color;
}
.chat-textarea {
border-bottom-right-radius: 0;
}

View File

@ -1,15 +1,23 @@
#conversejs {
form.search-xmpp-contact {
margin: 0;
padding-left: 5px;
padding: 0 0 5px 5px;
input {
width: 8em;
}
}
#controlbox {
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 {
background: white;
@ -93,6 +101,98 @@
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 {
a {
@ -294,29 +394,6 @@
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 {

File diff suppressed because it is too large Load Diff

150
sass/_fonts.scss Normal file
View 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
View 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;
}
}

View File

@ -48,78 +48,80 @@
height: 100%;
overflow-x: hidden;
overflow-y: auto;
}
.group-toggle {
color: $text-color;
display: block;
width: 100%;
}
.roster-group: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;
dt.roster-group {
border: none;
color: $text-color;
display: none;
font-weight: normal;
padding: 0.5em;
text-shadow: 0 1px 0 $text-shadow-color;
&:hover {
background-color: $highlight-color;
}
&.remove-xmpp-contact {
float: right;
width: 22px;
margin: 0;
display: none;
.group-toggle {
color: $text-color;
display: block;
width: 100%;
}
}
}
dd {
&:hover a.remove-xmpp-contact {
display: inline-block;
}
&.odd {
background-color: #DCEAC5;
/* Make this difference */
}
&.current-xmpp-contact span {
font-size: 16px;
float: left;
color: $link-color;
}
a.open-chat {
width: 80%;
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.remove-xmpp-contact {
display: inline-block;
}
}
&.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 {

View File

@ -8,7 +8,10 @@
@import "bourbon";
@import "variables";
@import "fonts";
@import "normalize";
@import "core";
@import "chatbox";
@import "controlbox";
@import "roster";
@import "chatrooms";

View File

@ -3,8 +3,8 @@
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head chat-head-chatbox">
<a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<div class="chat-title">
{[ if (url) { ]}
<a href="{{url}}" target="_blank" class="user">

View File

@ -3,9 +3,9 @@
<div class="dragresize dragresize-topleft"></div>
<div class="dragresize dragresize-left"></div>
<div class="chat-head chat-head-chatroom">
<a class="close-chatbox-button icon-close"></a>
<a class="toggle-chatbox-button icon-minus"></a>
<a class="configure-chatroom-button icon-wrench" style="display:none"></a>
<a class="chatbox-btn close-chatbox-button icon-close"></a>
<a class="chatbox-btn toggle-chatbox-button icon-minus"></a>
<a class="chatbox-btn configure-chatroom-button icon-wrench" style="display:none"></a>
<div class="chat-title"> {{ _.escape(name) }} </div>
<p class="chatroom-topic"><p/>
</div>

View File

@ -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>

View File

@ -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>