Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
25
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

More refactoring of css/sass.

Browse Source 
- 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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
converse.js
View File

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

709
css/converse.css
View File

@ -1,10 +1,3 @@
/*!
* Converse.js (Web-based XMPP instant messaging client)
* http://conversejs.org
*
* Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
/*! /*!
* Converse.js (Web-based XMPP instant messaging client) * Converse.js (Web-based XMPP instant messaging client)
* http://conversejs.org * http://conversejs.org
@ -33,98 +26,6 @@
.icon-conversejs:before { .icon-conversejs:before {
content: "\e600"; } content: "\e600"; }
#conversejs {
color: #6C4C44;
font-size: 14px;
bottom: 0;
direction: ltr;
height: 35px;
left: auto;
position: fixed;
right: 15px;
z-index: 30;
display: block;
width: auto;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
/* @group Tabs */
/* status dropdown styles */ }
#conversejs ::selection {
background-color: #E1E6E5; }
#conversejs ::-moz-selection {
background-color: #E1E6E5; }
#conversejs *, #conversejs *:before, #conversejs *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
@media screen and (max-width: 480px) {
#conversejs {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px; } }
#conversejs a, #conversejs a:visited {
text-decoration: none;
color: #436F64;
text-shadow: none; }
#conversejs ul li {
height: auto; }
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline; }
#conversejs textarea,
#conversejs input[type=submit], #conversejs input[type=button],
#conversejs input[type=text], #conversejs input[type=password],
#conversejs button {
font-size: 14px;
padding: 0.25em;
min-height: 0; }
#conversejs input[type=text] {
height: 26px; }
#conversejs strong {
font-weight: 700; }
#conversejs ol, #conversejs ul {
list-style: none; }
#conversejs li {
height: 10px; }
#conversejs ul, #conversejs ol, #conversejs dl {
font: inherit;
margin: 0; }
#conversejs [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; }
#conversejs [class^="icon-"], #conversejs [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; }
#conversejs .icon-address-book:before { #conversejs .icon-address-book:before {
content: "\270f"; } content: "\270f"; }
#conversejs .icon-angry:before { #conversejs .icon-angry:before {
@ -310,6 +211,99 @@
content: "\e02b"; } content: "\e02b"; }
#conversejs .icon-zoom-out:before { #conversejs .icon-zoom-out:before {
content: "\e02a"; } content: "\e02a"; }
#conversejs [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; }
#conversejs [class^="icon-"], #conversejs [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; }
#conversejs {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
#conversejs *, #conversejs *:before, #conversejs *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
@media screen and (max-width: 480px) {
#conversejs {
margin: 0;
right: 10px;
left: 10px;
bottom: 5px; } }
#conversejs ul li {
height: auto; }
#conversejs div, #conversejs span, #conversejs h1, #conversejs h2, #conversejs h3, #conversejs h4, #conversejs h5, #conversejs h6, #conversejs p, #conversejs blockquote,
#conversejs pre, #conversejs a, #conversejs em, #conversejs img, #conversejs strong, #conversejs dl, #conversejs dt, #conversejs dd, #conversejs ol, #conversejs ul, #conversejs li,
#conversejs fieldset, #conversejs form, #conversejs label, #conversejs legend, #conversejs table, #conversejs caption, #conversejs tbody,
#conversejs tfoot, #conversejs thead, #conversejs tr, #conversejs th, #conversejs td, #conversejs article, #conversejs aside, #conversejs canvas, #conversejs details,
#conversejs embed, #conversejs figure, #conversejs figcaption, #conversejs footer, #conversejs header, #conversejs hgroup, #conversejs menu,
#conversejs nav, #conversejs output, #conversejs ruby, #conversejs section, #conversejs summary, #conversejs time, #conversejs mark, #conversejs audio, #conversejs video {
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline; }
#conversejs textarea,
#conversejs input[type=submit], #conversejs input[type=button],
#conversejs input[type=text], #conversejs input[type=password],
#conversejs button {
font-size: 14px;
padding: 0.25em;
min-height: 0; }
#conversejs input[type=text] {
height: 26px; }
#conversejs strong {
font-weight: 700; }
#conversejs ol, #conversejs ul {
list-style: none; }
#conversejs li {
height: 10px; }
#conversejs ul, #conversejs ol, #conversejs dl {
font: inherit;
margin: 0; }
#conversejs a, #conversejs a:visited {
text-decoration: none;
color: #436F64;
text-shadow: none; }
#conversejs {
bottom: 0;
color: #6C4C44;
direction: ltr;
display: block;
font-size: 14px;
height: 35px;
left: auto;
position: fixed;
right: 15px;
width: auto;
z-index: 30; }
#conversejs ::selection {
background-color: #E1E6E5; }
#conversejs ::-moz-selection {
background-color: #E1E6E5; }
#conversejs .no-text-select { #conversejs .no-text-select {
-webkit-touch-callout: none; -webkit-touch-callout: none;
-webkit-user-select: none; -webkit-user-select: none;
@ -322,6 +316,15 @@
float: left; } float: left; }
#conversejs .right { #conversejs .right {
float: right; } float: right; }
#conversejs .centered {
text-align: center;
display: block;
margin: 5em auto; }
#conversejs .hor_centered {
text-align: center;
display: block;
margin: 0 auto;
clear: both; }
#conversejs .hidden { #conversejs .hidden {
display: none; } display: none; }
#conversejs .locked { #conversejs .locked {
@ -349,10 +352,6 @@
-ms-transform: rotate(359deg); -ms-transform: rotate(359deg);
-o-transform: rotate(359deg); -o-transform: rotate(359deg);
transform: rotate(359deg); } } transform: rotate(359deg); } }
#conversejs .spinner:before {
font-size: 24px;
font-family: 'Converse-js' !important;
content: "\231b"; }
#conversejs .spinner { #conversejs .spinner {
-webkit-animation: spin 2s infinite, linear; -webkit-animation: spin 2s infinite, linear;
-moz-animation: spin 2s infinite, linear; -moz-animation: spin 2s infinite, linear;
@ -360,15 +359,10 @@
display: block; display: block;
text-align: center; text-align: center;
margin: 5px; } margin: 5px; }
#conversejs .centered { #conversejs .spinner:before {
text-align: center; font-size: 24px;
display: block; font-family: 'Converse-js' !important;
margin: 5em auto; } content: "\231b"; }
#conversejs .hor_centered {
text-align: center;
display: block;
margin: 0 auto;
clear: both; }
#conversejs .button-group, #conversejs .button-group,
#conversejs .input-button-group { #conversejs .input-button-group {
display: table; } display: table; }
@ -377,19 +371,6 @@
#conversejs .input-button-group button, #conversejs .input-button-group button,
#conversejs .input-button-group input { #conversejs .input-button-group input {
display: table-cell; } display: table-cell; }
#conversejs .chat-body {
background-color: white;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
height: 289px;
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px);
border-top: 0; }
#conversejs .chat-body p {
font-size: 14px;
color: #6C4C44;
padding: 5px;
margin: 0; }
#conversejs .tt-highlight { #conversejs .tt-highlight {
background-color: #00230F; } background-color: #00230F; }
#conversejs .tt-suggestion p { #conversejs .tt-suggestion p {
@ -416,17 +397,6 @@
background-color: #176679; background-color: #176679;
border-right: 1px solid #176679; border-right: 1px solid #176679;
border-left: 1px solid #176679; } border-left: 1px solid #176679; }
#conversejs .chat-content {
position: relative;
padding: 0.5em;
font-size: 13px;
color: #6C4C44;
overflow-y: auto;
border: 0;
background-color: #ffffff;
line-height: 1.3em;
height: 206px;
height: calc(100% - 96px); }
#conversejs .chat-info { #conversejs .chat-info {
color: #6C4C44; } color: #6C4C44; }
#conversejs .chat-error { #conversejs .chat-error {
@ -501,20 +471,6 @@
text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0; } text-shadow: rgba(0, 0, 0, 0.51) 0 -1px 0; }
#conversejs a.restore-chat:visited { #conversejs a.restore-chat:visited {
color: white; } color: white; }
#conversejs .chat-title a {
color: white;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap; }
#conversejs .chat-head-chatbox,
#conversejs .chat-head-chatroom {
height: 44px;
position: relative;
padding: 5px; }
#conversejs .chat-head-chatroom {
background-color: #346121; }
#conversejs .chat-head-chatbox {
background-color: #436F64; }
#conversejs .user-custom-message, #conversejs .user-custom-message,
#conversejs .chatroom-topic { #conversejs .chatroom-topic {
color: white; color: white;
@ -531,106 +487,9 @@
#conversejs a.subscribe-to-user { #conversejs a.subscribe-to-user {
padding-left: 2em; padding-left: 2em;
font-weight: bold; } font-weight: bold; }
#conversejs dl.add-converse-contact {
margin: 0 0.5em 0.75em 0.5em; }
#conversejs #found-users { #conversejs #found-users {
padding: 10px 0 5px 5px; padding: 10px 0 5px 5px;
border: 0; } border: 0; }
#conversejs a.configure-chatroom-button,
#conversejs a.toggle-chatbox-button,
#conversejs a.close-chatbox-button {
border-radius: 5px;
border: 1px solid #888;
color: white;
cursor: pointer;
display: inline-block;
float: right;
font-size: 10px;
margin: 0 0 0 3px;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
text-decoration: none; }
#conversejs a.configure-chatroom-button:active,
#conversejs a.toggle-chatbox-button:active,
#conversejs a.close-chatbox-button:active {
position: relative;
top: 1px; }
#conversejs .requesting-xmpp-contact .request-actions {
margin-left: 0.5em;
float: right; }
#conversejs #available-chatrooms {
text-align: left; }
#conversejs #available-chatrooms dt {
font-weight: normal;
color: #6C4C44;
border: none;
padding: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs .room-info {
font-size: 11px;
font-style: normal;
font-weight: normal; }
#conversejs li.room-info {
display: block;
margin-left: 5px; }
#conversejs div.room-info {
clear: left;
width: 100%; }
#conversejs p.room-info {
margin: 0;
padding: 0;
display: block;
white-space: normal; }
#conversejs a.room-info {
width: 15px;
display: none;
clear: right; }
#conversejs a.open-room {
float: left;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden; }
#conversejs dd.available-chatroom {
border: none;
clear: both;
color: #6C4C44;
display: block;
font-weight: bold;
overflow: hidden;
padding: 0.25em 0.5em;
text-overflow: ellipsis;
text-shadow: 0 1px 0 #FAFAFA;
white-space: nowrap; }
#conversejs dd.available-chatroom a.open-room {
width: 150px; }
#conversejs dd.available-chatroom:hover {
background-color: #E1E6E5; }
#conversejs dd.available-chatroom:hover .room-info {
display: block;
font-size: 14px; }
#conversejs .chatbox,
#conversejs .chatroom {
height: 35px;
float: right;
margin: 0 7px;
display: block; }
@media screen and (max-width: 480px) {
#conversejs .chatbox,
#conversejs .chatroom {
margin: 0; } }
#conversejs .chatbox {
width: 200px; }
@media screen and (max-width: 480px) {
#conversejs .chatbox {
width: 100%; } }
#conversejs .chatbox .box-flyout {
z-index: 1;
width: 200px; }
@media screen and (max-width: 480px) {
#conversejs .chatbox .box-flyout {
width: 100%; } }
#conversejs .form-help { #conversejs .form-help {
color: gray; color: gray;
font-size: 85%; font-size: 85%;
@ -645,26 +504,93 @@
font-weight: bold; font-weight: bold;
height: auto; height: auto;
margin: 4px; } margin: 4px; }
#conversejs .chat-head { #conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308;
margin: 0; }
#conversejs .chat-textarea-chatroom-selected {
border: 2px solid #436F64;
margin: 0; }
#conversejs .dropdown dt,
#conversejs .dropdown ul {
margin: 0;
padding: 0; }
#conversejs .chatbox {
display: block;
float: right;
height: 35px;
margin: 0 7px;
width: 200px; }
@media screen and (max-width: 480px) {
#conversejs .chatbox {
margin: 0;
width: 100%; } }
#conversejs .chatbox .flyout {
border-radius: 4px;
bottom: 6px;
display: block;
position: absolute; }
#conversejs .chatbox .box-flyout {
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 400px;
min-height: 200px;
min-width: 200px;
width: 200px;
z-index: 1; }
@media screen and (max-width: 480px) {
#conversejs .chatbox .box-flyout {
height: 400px;
width: 100%; } }
#conversejs .chatbox .chat-head {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; border-top-right-radius: 4px;
color: #ffffff; color: #ffffff;
font-size: 100%; font-size: 100%;
margin: 0;
padding: 6px; }
#conversejs .chat-head.controlbox-head {
background-color: #436F64;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: white;
height: 44px; height: 44px;
margin: 0; margin: 0;
padding: 6px 6px 6px 0; } padding: 5px;
#conversejs .chat-head .avatar { position: relative; }
#conversejs .chatbox .chat-head .avatar {
float: left; } float: left; }
#conversejs #chatrooms { #conversejs .chatbox .chat-head-chatbox {
overflow-y: auto; } background-color: #436F64; }
#conversejs form.sendXMPPMessage { #conversejs .chatbox .chat-title a {
color: white;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap; }
#conversejs .chatbox .chat-body {
background-color: white;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
border-top: 0;
height: 289px;
height: -webkit-calc(100% - 44px);
height: calc(100% - 44px); }
#conversejs .chatbox .chat-body p {
color: #6C4C44;
font-size: 14px;
margin: 0;
padding: 5px; }
#conversejs .chatbox .chat-content {
position: relative;
padding: 0.5em;
font-size: 13px;
color: #6C4C44;
overflow-y: auto;
border: 0;
background-color: #ffffff;
line-height: 1.3em;
height: 206px;
height: calc(100% - 96px); }
#conversejs .chatbox .dropdown {
/* status dropdown styles */
background-color: beige; }
#conversejs .chatbox .dropdown dd {
margin: 0;
padding: 0;
position: relative; }
#conversejs .chatbox form.sendXMPPMessage {
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
@ -679,9 +605,9 @@
height: 95px; height: 95px;
min-width: 200px; } min-width: 200px; }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#conversejs form.sendXMPPMessage { #conversejs .chatbox form.sendXMPPMessage {
width: 100%; } } width: 100%; } }
#conversejs form.sendXMPPMessage .chat-textarea { #conversejs .chatbox form.sendXMPPMessage .chat-textarea {
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border: 0; border: 0;
@ -689,37 +615,41 @@
padding: 0.5em; padding: 0.5em;
width: 100%; width: 100%;
resize: none; } resize: none; }
#conversejs form.sendXMPPMessage .chat-toolbar { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
padding: 5px; padding: 5px;
height: 25px; height: 25px;
display: block; display: block;
background-color: beige; } background-color: beige; }
#conversejs form.sendXMPPMessage .chat-toolbar a { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
color: #436F64; } color: #436F64; }
#conversejs form.sendXMPPMessage .chat-toolbar .unencrypted a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
#conversejs form.sendXMPPMessage .chat-toolbar .unencrypted { font-size: 12px;
padding-right: 3px;
text-shadow: 0 1px 0 white; }
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
color: #8f2831; } color: #8f2831; }
#conversejs form.sendXMPPMessage .chat-toolbar .unverified a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
#conversejs form.sendXMPPMessage .chat-toolbar .unverified { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified {
color: #cf5300; } color: #cf5300; }
#conversejs form.sendXMPPMessage .chat-toolbar .private a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private a,
#conversejs form.sendXMPPMessage .chat-toolbar .private { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .private {
color: #4b7003; } color: #4b7003; }
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-participants, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-participants,
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-clear, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-clear,
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr {
float: right; } float: right; }
#conversejs form.sendXMPPMessage .chat-toolbar li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
display: inline-block; display: inline-block;
list-style: none; list-style: none;
padding: 0 3px 0 3px; padding: 0 3px 0 3px;
cursor: pointer; cursor: pointer;
margin-top: 1px; } margin-top: 1px; }
#conversejs form.sendXMPPMessage .chat-toolbar li:hover { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar li:hover {
cursor: pointer; } cursor: pointer; }
#conversejs form.sendXMPPMessage .chat-toolbar ul { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul {
background: #fff; background: #fff;
bottom: 100%; bottom: 100%;
box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4); box-shadow: -1px -1px 2px 0 rgba(0, 0, 0, 0.4);
@ -728,98 +658,91 @@
margin: 0 0 1px 0; margin: 0 0 1px 0;
position: absolute; position: absolute;
right: 0; } right: 0; }
#conversejs form.sendXMPPMessage .chat-toolbar ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li {
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
position: relative; } position: relative; }
#conversejs form.sendXMPPMessage .chat-toolbar ul li a:hover { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover {
color: #8f2831; } color: #8f2831; }
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-smiley { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
color: #436F64; color: #436F64;
padding-left: 5px; } padding-left: 5px; }
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li {
font-size: 14px; font-size: 14px;
padding: 5px; padding: 5px;
z-index: 98; } z-index: 98; }
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul li:hover {
background-color: #E1E6E5; } background-color: #E1E6E5; }
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr ul li { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li {
padding: 7px; padding: 7px;
background-color: white; background-color: white;
display: block; display: block;
z-index: 99; } z-index: 99; }
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li a {
-moz-transition: background-color 0.2s ease-in-out; -moz-transition: background-color 0.2s ease-in-out;
-webkit-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; transition: background-color 0.2s ease-in-out;
display: block; display: block;
padding: 1px; padding: 1px;
text-decoration: none; } text-decoration: none; }
#conversejs form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-otr ul li:hover {
background-color: #E1E6E5; } background-color: #E1E6E5; }
#conversejs .chat-toolbar-text { #conversejs .chatbox .dragresize {
font-size: 12px;
padding-right: 3px;
text-shadow: 0 1px 0 white; }
#conversejs .chat-textarea-chatbox-selected {
border: 1px solid #578308;
margin: 0; }
#conversejs .chat-textarea-chatroom-selected {
border: 2px solid #436F64;
margin: 0; }
#conversejs .chatbox .dropdown {
background-color: beige; }
#conversejs .chatbox .dropdown dd {
position: relative; }
#conversejs .chatbox .dropdown dd,
#conversejs .dropdown dt,
#conversejs .dropdown ul {
margin: 0;
padding: 0; }
#conversejs .flyout {
border-radius: 4px;
bottom: 6px;
display: block;
position: absolute; }
#conversejs .box-flyout {
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 400px;
min-width: 200px;
min-height: 200px; }
@media screen and (max-width: 480px) {
#conversejs .box-flyout {
height: 400px; } }
#conversejs .dragresize {
background: transparent; background: transparent;
border: 0; border: 0;
margin: 0; margin: 0;
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 20; } z-index: 20; }
#conversejs .dragresize-top { #conversejs .chatbox .dragresize-top {
cursor: n-resize; cursor: n-resize;
height: 5px; height: 5px;
width: 100%; } width: 100%; }
#conversejs .dragresize-left { #conversejs .chatbox .dragresize-left {
cursor: w-resize; cursor: w-resize;
width: 5px; width: 5px;
height: 100%; height: 100%;
left: 0; } left: 0; }
#conversejs .dragresize-topleft { #conversejs .chatbox .dragresize-topleft {
cursor: nw-resize; cursor: nw-resize;
width: 15px; width: 15px;
height: 15px; height: 15px;
top: 0; top: 0;
left: 0; } left: 0; }
#conversejs .chatbox .chatbox-btn {
border-radius: 5px;
border: 1px solid #888;
color: white;
cursor: pointer;
display: inline-block;
float: right;
font-size: 10px;
margin: 0 0 0 3px;
padding-bottom: 4px;
padding-left: 4px;
padding-right: 4px;
padding-top: 4px;
text-decoration: none; }
#conversejs .chatbox .chatbox-btn:active {
position: relative;
top: 1px; }
#conversejs form.search-xmpp-contact { #conversejs #controlbox {
display: none; }
#conversejs #controlbox .controlbox-head {
background-color: #436F64;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: white;
height: 44px;
margin: 0;
padding: 6px 6px 6px 0; }
#conversejs #controlbox form.search-xmpp-contact {
margin: 0; margin: 0;
padding-left: 5px; padding-left: 5px;
padding: 0 0 5px 5px; } padding: 0 0 5px 5px; }
#conversejs form.search-xmpp-contact input { #conversejs #controlbox form.search-xmpp-contact input {
width: 8em; } width: 8em; }
#conversejs #controlbox {
display: none; }
#conversejs #controlbox #converse-register { #conversejs #controlbox #converse-register {
background: white; } background: white; }
#conversejs #controlbox #converse-register .title { #conversejs #controlbox #converse-register .title {
@ -880,6 +803,76 @@
height: 30px; height: 30px;
margin: 5px 0 10px 0; margin: 5px 0 10px 0;
padding-left: 0.5em; } padding-left: 0.5em; }
#conversejs #controlbox #users .add-converse-contact {
margin: 0 0.5em 0.75em 0.5em; }
#conversejs #controlbox #chatrooms {
overflow-y: auto; }
#conversejs #controlbox #chatrooms form.add-chatroom {
background: none;
padding: 0.5em; }
#conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=text] {
margin: 0;
width: 100%;
padding: 0.25em; }
#conversejs #controlbox #chatrooms form.add-chatroom span.spinner,
#conversejs #controlbox #chatrooms form.add-chatroom input[type=button],
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit] {
margin-top: 0.5em;
display: table-cell;
width: auto; }
#conversejs #controlbox #chatrooms form.add-chatroom input[type=submit] {
color: #436F64; }
#conversejs #controlbox #chatrooms #available-chatrooms {
text-align: left; }
#conversejs #controlbox #chatrooms #available-chatrooms dt {
font-weight: normal;
color: #6C4C44;
border: none;
padding: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom {
border: none;
clear: both;
color: #6C4C44;
display: block;
font-weight: bold;
overflow: hidden;
padding: 0.25em 0.5em;
text-overflow: ellipsis;
text-shadow: 0 1px 0 #FAFAFA;
white-space: nowrap; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover {
background-color: #E1E6E5; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom:hover .room-info {
display: block;
font-size: 14px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.room-info {
width: 15px;
display: none;
clear: right; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom a.open-room {
float: left;
overflow-x: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: 150px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom .room-info {
font-size: 11px;
font-style: normal;
font-weight: normal; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom li.room-info {
display: block;
margin-left: 5px; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom p.room-info {
margin: 0;
padding: 0;
display: block;
white-space: normal; }
#conversejs #controlbox #chatrooms #available-chatrooms dd.available-chatroom div.room-info {
clear: left;
width: 100%; }
#conversejs #controlbox .dropdown a { #conversejs #controlbox .dropdown a {
width: 148px; width: 148px;
display: inline-block; display: inline-block;
@ -1029,23 +1022,6 @@
padding: 0.75em 0.5em 0.5em 0.5em; } padding: 0.75em 0.5em 0.5em 0.5em; }
#conversejs #controlbox .set-xmpp-status .dropdown dd ul { #conversejs #controlbox .set-xmpp-status .dropdown dd ul {
z-index: 22; } z-index: 22; }
#conversejs #controlbox form.add-chatroom {
background: none;
padding: 0.5em; }
#conversejs #controlbox form.add-chatroom input[type=button],
#conversejs #controlbox form.add-chatroom input[type=submit],
#conversejs #controlbox form.add-chatroom input[type=text] {
margin: 0;
width: 100%;
padding: 0.25em; }
#conversejs #controlbox form.add-chatroom span.spinner,
#conversejs #controlbox form.add-chatroom input[type=button],
#conversejs #controlbox form.add-chatroom input[type=submit] {
margin-top: 0.5em;
display: table-cell;
width: auto; }
#conversejs #controlbox form.add-chatroom input[type=submit] {
color: #436F64; }
#conversejs .toggle-controlbox { #conversejs .toggle-controlbox {
background-color: #436F64; background-color: #436F64;
border-top-left-radius: 4px; border-top-left-radius: 4px;
@ -1101,20 +1077,20 @@
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; } overflow-y: auto; }
#conversejs #converse-roster .group-toggle { #conversejs #converse-roster .roster-contacts dt.roster-group {
color: #6C4C44;
display: block;
width: 100%; }
#conversejs #converse-roster .roster-group:hover {
background-color: #E1E6E5; }
#conversejs #converse-roster dt {
border: none; border: none;
color: #6C4C44; color: #6C4C44;
display: none; display: none;
font-weight: normal; font-weight: normal;
padding: 0.5em; padding: 0.5em;
text-shadow: 0 1px 0 #FAFAFA; } text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #converse-roster dd { #conversejs #converse-roster .roster-contacts dt.roster-group:hover {
background-color: #E1E6E5; }
#conversejs #converse-roster .roster-contacts dt.roster-group .group-toggle {
color: #6C4C44;
display: block;
width: 100%; }
#conversejs #converse-roster .roster-contacts dd {
border: none; border: none;
clear: both; clear: both;
color: #6C4C44; color: #6C4C44;
@ -1125,35 +1101,38 @@
overflow-y: hidden; overflow-y: hidden;
padding: 4px 2px 0 4px; padding: 4px 2px 0 4px;
text-shadow: 0 1px 0 #FAFAFA; } text-shadow: 0 1px 0 #FAFAFA; }
#conversejs #converse-roster dd:hover { #conversejs #converse-roster .roster-contacts dd:hover {
background-color: #E1E6E5; } background-color: #E1E6E5; }
#conversejs #converse-roster dd a, #conversejs #converse-roster dd span { #conversejs #converse-roster .roster-contacts dd:hover a.remove-xmpp-contact {
display: inline-block; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact.request-actions {
margin-left: 0.5em;
float: right; }
#conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
font-size: 16px;
float: left;
color: #436F64; }
#conversejs #converse-roster .roster-contacts dd.odd {
background-color: #DCEAC5;
/* Make this difference */ }
#conversejs #converse-roster .roster-contacts dd a, #conversejs #converse-roster .roster-contacts dd span {
text-shadow: 0 1px 0 #FAFAFA; text-shadow: 0 1px 0 #FAFAFA;
display: inline-block; display: inline-block;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
margin-left: 3px; } margin-left: 3px; }
#conversejs #converse-roster dd span { #conversejs #converse-roster .roster-contacts dd span {
padding: 0 5px 0 0; } padding: 0 5px 0 0; }
#conversejs #converse-roster dd a.decline-xmpp-request { #conversejs #converse-roster .roster-contacts dd a.decline-xmpp-request {
margin-left: 5px; } margin-left: 5px; }
#conversejs #converse-roster dd a.remove-xmpp-contact { #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact {
float: right; float: right;
width: 22px; width: 22px;
margin: 0; margin: 0;
display: none; display: none;
color: #6C4C44; } color: #6C4C44; }
#conversejs #converse-roster dd:hover a.remove-xmpp-contact { #conversejs #converse-roster .roster-contacts dd a .open-chat {
display: inline-block; }
#conversejs #converse-roster dd.odd {
background-color: #DCEAC5;
/* Make this difference */ }
#conversejs #converse-roster dd.current-xmpp-contact span {
font-size: 16px;
float: left;
color: #436F64; }
#conversejs #converse-roster dd a.open-chat {
width: 80%; } width: 80%; }
#conversejs #converse-roster span.pending-contact-name { #conversejs #converse-roster span.pending-contact-name {
width: 80%; } width: 80%; }
@ -1263,6 +1242,8 @@
margin-top: 1em; } margin-top: 1em; }
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label input, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label select { #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label input, #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label label select {
float: right; } float: right; }
#conversejs .chatroom .chat-head-chatroom {
background-color: #346121; }
#conversejs .chatroom .chat-textarea { #conversejs .chatroom .chat-textarea {
border-bottom-right-radius: 0; } border-bottom-right-radius: 0; }
#conversejs .chatroom .invited-contact { #conversejs .chatroom .invited-contact {

8
mockup/chatroom.html
View File

@ -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">&nbsp;</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>

20
mockup/chatroom2.html
View File

@ -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">&nbsp;</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>

75
mockup/index.html
View File

@ -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">&nbsp;</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
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;
}
}
}
}

5
sass/_chatrooms.scss
View File

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

129
sass/_controlbox.scss
View File

@ -1,4 +1,15 @@
#conversejs { #conversejs {
#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 { form.search-xmpp-contact {
margin: 0; margin: 0;
padding-left: 5px; padding-left: 5px;
@ -8,9 +19,6 @@
} }
} }
#controlbox {
display: none;
#converse-register { #converse-register {
background: white; background: white;
.title { .title {
@ -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 {

659
sass/_core.scss
View File

@ -1,36 +1,16 @@
/*!
* Converse.js (Web-based XMPP instant messaging client)
* http://conversejs.org
*
* Copyright (c) 2012-2014, JC Brand <jc@opkode.com>
* Licensed under the Mozilla Public License
*/
@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 { #conversejs {
bottom: 0;
color: $text-color;
direction: ltr;
display: block;
font-size: $font-size;
height: $bottom-gutter-height;
left: auto;
position: fixed;
right: 15px;
width: auto;
z-index: 30;
::selection { ::selection {
background-color: $highlight-color; background-color: $highlight-color;
} }
@ -38,209 +18,10 @@
background-color: $highlight-color; background-color: $highlight-color;
} }
color: $text-color;
font-size: $font-size;
bottom: 0;
direction: ltr;
height: $bottom-gutter-height;
left: auto;
position: fixed;
right: 15px;
z-index: 30;
display: block;
width: auto;
@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;
}
a, a:visited {
text-decoration: none;
color: $link-color;
text-shadow: none;
}
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;
}
[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;
}
.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"; }
.no-text-select { .no-text-select {
-webkit-touch-callout: none; -webkit-touch-callout: none;
@include user-select(none); @include user-select(none);
} }
.emoticon { .emoticon {
font-size: $font-size; font-size: $font-size;
} }
@ -250,6 +31,17 @@
.right { .right {
float: right; float: right;
} }
.centered {
text-align: center;
display: block;
margin: 5em auto;
}
.hor_centered {
text-align: center;
display: block;
margin: 0 auto;
clear: both;
}
.hidden { .hidden {
display: none; display: none;
} }
@ -266,28 +58,16 @@
} }
} }
.spinner:before {
font-size: 24px;
font-family: 'Converse-js' !important;
content: "\231b";
}
.spinner { .spinner {
@include animation(spin 2s infinite, linear); @include animation(spin 2s infinite, linear);
display: block; display: block;
text-align: center; text-align: center;
margin: 5px; margin: 5px;
&:before {
font-size: 24px;
font-family: 'Converse-js' !important;
content: "\231b";
} }
.centered {
text-align: center;
display: block;
margin: 5em auto;
}
.hor_centered {
text-align: center;
display: block;
margin: 0 auto;
clear: both;
} }
.button-group, .button-group,
@ -302,21 +82,6 @@
display: table-cell; display: table-cell;
} }
.chat-body {
background-color: white;
border-bottom-right-radius: $chatbox-border-radius;
border-bottom-left-radius: $chatbox-border-radius;
height: 289px;
@include calc(height, '100% - #{$chat-head-height}');
border-top: 0;
p {
font-size: $font-size;
color: $text-color;
padding: 5px;
margin: 0;
}
}
.tt-highlight { .tt-highlight {
background-color: #00230F; background-color: #00230F;
} }
@ -353,18 +118,6 @@
border-right: 1px solid #176679; border-right: 1px solid #176679;
border-left: 1px solid #176679; border-left: 1px solid #176679;
} }
.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});
}
.chat-info { .chat-info {
color: $text-color; color: $text-color;
} }
@ -372,13 +125,11 @@
color: $warning-color; color: $warning-color;
font-weight: bold; font-weight: bold;
} }
.chat-error, .chat-error,
.chat-info, .chat-info,
.chat-message { .chat-message {
padding: 2px 0; padding: 2px 0;
} }
.chat-message-room, .chat-message-room,
.chat-message-them, .chat-message-them,
.chat-message-me { .chat-message-me {
@ -395,12 +146,10 @@
.chat-message-content { .chat-message-content {
word-wrap: break-word; word-wrap: break-word;
} }
.chat-message-room, .chat-message-room,
.chat-message-them { .chat-message-them {
color: $message-them-color; color: $message-them-color;
} }
.chat-message-me { .chat-message-me {
color: $link-color; color: $link-color;
} }
@ -480,26 +229,6 @@
color: $chat-head-text-color; color: $chat-head-text-color;
} }
.chat-title a {
color: $chat-head-text-color;
width: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
.chat-head-chatbox,
.chat-head-chatroom {
height: $chat-head-height;
position: relative;
padding: 5px;
}
.chat-head-chatroom {
background-color: $chatroom-head-color;
}
.chat-head-chatbox {
background-color: $chat-head-color;
}
.user-custom-message, .user-custom-message,
.chatroom-topic { .chatroom-topic {
color: white; color: white;
@ -522,141 +251,11 @@
font-weight: bold; font-weight: bold;
} }
dl.add-converse-contact {
margin: 0 0.5em 0.75em 0.5em;
}
#found-users { #found-users {
padding: 10px 0 5px 5px; padding: 10px 0 5px 5px;
border: 0; border: 0;
} }
a.configure-chatroom-button,
a.toggle-chatbox-button,
a.close-chatbox-button {
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-top: $box-close-button-padding-top;
padding-bottom: $box-close-button-padding-bottom;
padding-left: $box-close-button-padding-left;
padding-right: $box-close-button-padding-right;
text-decoration: none;
}
a.configure-chatroom-button:active,
a.toggle-chatbox-button:active,
a.close-chatbox-button:active {
position: relative;
top: 1px;
}
.requesting-xmpp-contact .request-actions {
margin-left: 0.5em;
float: right;
}
#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;
}
}
.room-info {
font-size: 11px;
font-style: normal;
font-weight: normal;
}
li.room-info {
display: block;
margin-left: 5px;
}
div.room-info {
clear: left;
width: 100%;
}
p.room-info {
margin: 0;
padding: 0;
display: block;
white-space: normal;
}
a {
&.room-info {
width: 15px;
display: none;
clear: right;
}
&.open-room {
float: left;
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
}
}
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;
a.open-room {
width: 150px;
}
&:hover {
background-color: $highlight-color;
.room-info {
display: block;
font-size: 14px;
}
}
}
.chatbox,
.chatroom {
height: $bottom-gutter-height;
float: right;
margin: 0 $chat-gutter;
@media screen and (max-width: $mobile-landscape-length) {
margin: 0;
}
display: block;
}
.chatbox {
width: $chat-width;
@media screen and (max-width: $mobile-landscape-length) {
width: $mobile-chat-width;
}
.box-flyout {
z-index: 1;
width: $chat-width;
@media screen and (max-width: $mobile-landscape-length) {
width: $mobile-chat-width;
}
}
}
.form-help { .form-help {
color: gray; color: gray;
font-size: 85%; font-size: 85%;
@ -676,155 +275,6 @@
margin: 4px; margin: 4px;
} }
/* @group Tabs */
.chat-head {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
color: #ffffff;
font-size: 100%;
margin: 0;
padding: 6px;
&.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;
}
.avatar {
float: left;
}
}
#chatrooms {
overflow-y: auto;
}
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;
}
.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;
}
}
}
}
}
.chat-toolbar-text {
font-size: 12px;
padding-right: 3px;
text-shadow: 0 1px 0 white
}
.chat-textarea-chatbox-selected { .chat-textarea-chatbox-selected {
border: 1px solid #578308; border: 1px solid #578308;
margin: 0; margin: 0;
@ -835,64 +285,9 @@
margin: 0; margin: 0;
} }
/* status dropdown styles */
.chatbox {
.dropdown {
background-color: $light-background-color;
dd {
position: relative;
}
}
}
.chatbox .dropdown dd,
.dropdown dt, .dropdown dt,
.dropdown ul { .dropdown ul {
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.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-width: $chat-width;
min-height: $chat-height/2;
@media screen and (max-width: $mobile-landscape-length) {
height: $mobile-chat-height;
}
}
.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;
}
}
} }

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;
}
}

58
sass/_roster.scss
View File

@ -48,22 +48,21 @@
height: 100%; height: 100%;
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
} dt.roster-group {
.group-toggle {
color: $text-color;
display: block;
width: 100%;
}
.roster-group:hover {
background-color: $highlight-color;
}
dt {
border: none; border: none;
color: $text-color; color: $text-color;
display: none; display: none;
font-weight: normal; font-weight: normal;
padding: 0.5em; padding: 0.5em;
text-shadow: 0 1px 0 $text-shadow-color; text-shadow: 0 1px 0 $text-shadow-color;
&:hover {
background-color: $highlight-color;
}
.group-toggle {
color: $text-color;
display: block;
width: 100%;
}
} }
dd { dd {
border: none; border: none;
@ -76,11 +75,27 @@
overflow-y: hidden; overflow-y: hidden;
padding: 4px 2px 0 4px; padding: 4px 2px 0 4px;
text-shadow: 0 1px 0 $text-shadow-color; text-shadow: 0 1px 0 $text-shadow-color;
&:hover { &:hover {
background-color: $highlight-color; 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 { a, span {
text-shadow: 0 1px 0 $link-shadow-color; text-shadow: 0 1px 0 $link-shadow-color;
display: inline-block; display: inline-block;
@ -103,25 +118,12 @@
display: none; display: none;
color: $text-color; color: $text-color;
} }
} .open-chat {
}
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%; width: 80%;
} }
} }
}
}
span { span {
&.pending-contact-name { &.pending-contact-name {
width: 80%; width: 80%;

3
sass/converse.scss
View File

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

4
src/templates/chatbox.html
View File

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

6
src/templates/chatroom.html
View File

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

2
src/templates/pending_contacts.html
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>

2
src/templates/requesting_contacts.html
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>