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

Various inverse-related CSS improvements.

Browse Source 
Most notably, make toolbar same color as chat head and make private chats green
instead of orange.
This commit is contained in:
JC Brand 2017-06-17 23:48:46 +02:00
parent fb69106352
commit f988cb03c0
15 changed files with 208 additions and 163 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
css/converse.css
View File

@ -1445,7 +1445,7 @@
float: left; } float: left; }
#converse-embedded-chat .chat-head.chat-head-chatbox, #converse-embedded-chat .chat-head.chat-head-chatbox,
#conversejs .chat-head.chat-head-chatbox { #conversejs .chat-head.chat-head-chatbox {
background-color: #E7A151; } background-color: #3AA569; }
#converse-embedded-chat .chat-head .user-custom-message, #converse-embedded-chat .chat-head .user-custom-message,
#conversejs .chat-head .user-custom-message { #conversejs .chat-head .user-custom-message {
color: white; color: white;
@ -1475,7 +1475,7 @@
#converse-embedded-chat .chatbox-btn.button-on, #converse-embedded-chat .chatbox-btn.button-on,
#conversejs .chatbox-btn.button-on { #conversejs .chatbox-btn.button-on {
background-color: white; background-color: white;
color: #E7A151; } color: #3AA569; }
#converse-embedded-chat .chatbox, #converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
display: block; display: block;
@ -1569,35 +1569,30 @@
margin-top: 1em; } margin-top: 1em; }
#converse-embedded-chat .chatbox .chat-body .chat-image, #converse-embedded-chat .chatbox .chat-body .chat-image,
#conversejs .chatbox .chat-body .chat-image { #conversejs .chatbox .chat-body .chat-image {
max-width: 100%; max-height: 24em; }
max-height: 100%; }
#converse-embedded-chat .chatbox .chat-body .chat-action, #converse-embedded-chat .chatbox .chat-body .chat-action,
#conversejs .chatbox .chat-body .chat-action { #conversejs .chatbox .chat-body .chat-action {
font-style: italic; } font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-message, #converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message { #conversejs .chatbox .chat-body .chat-message {
margin: 0.3em; } margin: 0.3em; }
#converse-embedded-chat .chatbox .chat-body .chat-message span, #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
#conversejs .chatbox .chat-body .chat-message span { #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
display: inline-block; } font-weight: bold;
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author, white-space: nowrap;
#conversejs .chatbox .chat-body .chat-message span.chat-msg-author { float: left;
max-width: 100%; text-overflow: ellipsis;
font-weight: bold; overflow: hidden; }
white-space: nowrap; #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
float: left; #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
text-overflow: ellipsis; color: #3AA569; }
overflow: hidden; } #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them, #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
#conversejs .chatbox .chat-body .chat-message span.chat-msg-them { color: #578EA9; }
color: #3AA569; } #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me, #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
#conversejs .chatbox .chat-body .chat-message span.chat-msg-me { max-width: 100%;
color: #578EA9; } word-wrap: break-word; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
max-width: 100%;
word-wrap: break-word; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them, #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
#conversejs .chatbox .chat-body .delayed .chat-msg-them { #conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #FB5D50; } color: #FB5D50; }
@ -1609,12 +1604,13 @@
position: absolute; position: absolute;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
background-color: #E7A151; background-color: #3AA569;
color: #FCFDFD; color: #FCFDFD;
padding: 0.3em; padding: 0.5em;
font-size: 0.9em; font-size: 0.9em;
text-align: center; text-align: center;
z-index: 20; } z-index: 20;
white-space: nowrap; }
#converse-embedded-chat .chatbox .chat-content, #converse-embedded-chat .chatbox .chat-content,
#conversejs .chatbox .chat-content { #conversejs .chatbox .chat-content {
position: relative; position: relative;
@ -1646,7 +1642,6 @@
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
background-clip: padding-box; background-clip: padding-box;
background: white;
border-top: 1px solid #BBB; border-top: 1px solid #BBB;
border: 0; border: 0;
margin: 0; margin: 0;
@ -1677,7 +1672,7 @@
left: 3px; left: 3px;
width: -webkit-calc(100% - 6px); width: -webkit-calc(100% - 6px);
width: calc(100% - 6px); width: calc(100% - 6px);
background-color: #E7A151; background-color: #3AA569;
color: white; color: white;
font-size: 80%; font-size: 80%;
height: 27px; height: 27px;
@ -1685,28 +1680,34 @@
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
box-sizing: border-box; box-sizing: border-box;
font-size: 14px;
margin: 0; margin: 0;
padding: 5px; padding: 5px;
height: 25px; height: 25px;
display: block; display: block;
background-color: #FFF5EE; } background-color: #3AA569; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
font-size: 14px; font-size: 14px;
color: #578EA9; color: white;
text-decoration: none; text-decoration: none;
text-shadow: none; } text-shadow: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a {
color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
font-size: 12px; font-size: 12px;
padding-right: 3px; padding-right: 3px; }
text-shadow: 0 1px 0 white; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
color: #D24E2B; } color: white; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a {
color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
@ -1757,7 +1758,7 @@
margin-left: 0; } margin-left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
color: #578EA9; color: white;
padding-left: 5px; } padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
@ -1956,7 +1957,7 @@
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover {
color: #206485; } color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room {
max-width: 50%; max-width: 55%;
width: auto; width: auto;
font-weight: bold; } font-weight: bold; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.room-info:before { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a.room-info:before {
@ -2028,7 +2029,6 @@
text-align: center; text-align: center;
display: inline; display: inline;
overflow: hidden; overflow: hidden;
font-size: 12px;
list-style-type: none; list-style-type: none;
/* single tab */ } /* single tab */ }
#conversejs #controlbox #controlbox-tabs li { #conversejs #controlbox #controlbox-tabs li {
@ -2052,7 +2052,7 @@
text-align: center; text-align: center;
text-decoration: none; } text-decoration: none; }
#conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator { #conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
background-color: #E7A151; } background-color: #3AA569; }
#conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator { #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
background-color: #E77051; } background-color: #E77051; }
#conversejs #controlbox #controlbox-tabs li a .msgs-indicator { #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
@ -2286,16 +2286,22 @@
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name { #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
width: 70%; } width: 70%; }
#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator { #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
background-color: #3AA569;
opacity: 1; opacity: 1;
border-radius: 10%; border-radius: 10%;
padding: 0 0.2em; padding: 0 0.2em;
font-size: 12px; } font-size: 12px; }
#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name { #conversejs #converse-roster .roster-contacts dd .open-chat .contact-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
padding: 0; padding: 0;
margin: 0; margin: 0;
max-width: 80%; max-width: 80%;
float: none; float: none;
height: 60px; } height: 60px; }
#conversejs #converse-roster .roster-contacts dd .open-chat .contact-name.unread-msgs {
max-width: 60%; }
#conversejs #converse-roster .roster-contacts dd .open-chat .avatar { #conversejs #converse-roster .roster-contacts dd .open-chat .avatar {
float: left; float: left;
display: inline-block; display: inline-block;
@ -2516,8 +2522,7 @@
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
background-color: white; background-color: white;
border-bottom-left-radius: 4px; border-radius: 4px;
border-bottom-right-radius: 4px;
border: 0; border: 0;
color: #818479; color: #818479;
font-size: 14px; font-size: 14px;
@ -2541,6 +2546,9 @@
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button], #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] { #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
margin: 0 0.5em; } margin: 0 0.5em; }
#converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar,
#conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
background-color: #E77051; }
#converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea, #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
#conversejs .chatroom form.sendXMPPMessage .chat-textarea { #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
border-bottom-right-radius: 0; } border-bottom-right-radius: 0; }

162
css/inverse.css
View File

@ -1338,7 +1338,7 @@
#converse-embedded-chat .button-primary, #converse-embedded-chat .button-primary,
#conversejs .button-primary { #conversejs .button-primary {
color: white; color: white;
background-color: #3AA569; } background-color: #E7A151; }
#converse-embedded-chat .button-secondary, #converse-embedded-chat .button-secondary,
#conversejs .button-secondary { #conversejs .button-secondary {
color: white; color: white;
@ -1346,7 +1346,7 @@
#converse-embedded-chat .button-cancel, #converse-embedded-chat .button-cancel,
#conversejs .button-cancel { #conversejs .button-cancel {
color: white; color: white;
background-color: #D24E2B; } background-color: #818479; }
#converse-embedded-chat form.pure-form.converse-form, #converse-embedded-chat form.pure-form.converse-form,
#conversejs form.pure-form.converse-form { #conversejs form.pure-form.converse-form {
background: white; background: white;
@ -1480,7 +1480,7 @@ body {
#conversejs .chat-head { #conversejs .chat-head {
color: #ffffff; color: #ffffff;
font-size: 100%; font-size: 100%;
height: 55px; height: 62px;
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
position: relative; } position: relative; }
@ -1491,7 +1491,7 @@ body {
float: left; } float: left; }
#converse-embedded-chat .chat-head.chat-head-chatbox, #converse-embedded-chat .chat-head.chat-head-chatbox,
#conversejs .chat-head.chat-head-chatbox { #conversejs .chat-head.chat-head-chatbox {
background-color: #E7A151; } background-color: #3AA569; }
#converse-embedded-chat .chat-head .user-custom-message, #converse-embedded-chat .chat-head .user-custom-message,
#conversejs .chat-head .user-custom-message { #conversejs .chat-head .user-custom-message {
color: white; color: white;
@ -1521,7 +1521,7 @@ body {
#converse-embedded-chat .chatbox-btn.button-on, #converse-embedded-chat .chatbox-btn.button-on,
#conversejs .chatbox-btn.button-on { #conversejs .chatbox-btn.button-on {
background-color: white; background-color: white;
color: #E7A151; } color: #3AA569; }
#converse-embedded-chat .chatbox, #converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
display: block; display: block;
@ -1579,8 +1579,8 @@ body {
border-bottom-right-radius: 7px; border-bottom-right-radius: 7px;
border-top: 0; border-top: 0;
height: 289px; height: 289px;
height: -webkit-calc(100% - 55px); height: -webkit-calc(100% - 62px);
height: calc(100% - 55px); } height: calc(100% - 62px); }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox .chat-body, #converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
@ -1599,7 +1599,8 @@ body {
padding: 5px; } padding: 5px; }
#converse-embedded-chat .chatbox .chat-body .chat-info, #converse-embedded-chat .chatbox .chat-body .chat-info,
#conversejs .chatbox .chat-body .chat-info { #conversejs .chatbox .chat-body .chat-info {
color: #D24E2B; color: #3AA569;
font-size: 16px;
margin: 0.3em; } margin: 0.3em; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-event, #converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
#conversejs .chatbox .chat-body .chat-info.chat-event { #conversejs .chatbox .chat-body .chat-info.chat-event {
@ -1615,35 +1616,30 @@ body {
margin-top: 1em; } margin-top: 1em; }
#converse-embedded-chat .chatbox .chat-body .chat-image, #converse-embedded-chat .chatbox .chat-body .chat-image,
#conversejs .chatbox .chat-body .chat-image { #conversejs .chatbox .chat-body .chat-image {
max-width: 100%; max-height: 24em; }
max-height: 100%; }
#converse-embedded-chat .chatbox .chat-body .chat-action, #converse-embedded-chat .chatbox .chat-body .chat-action,
#conversejs .chatbox .chat-body .chat-action { #conversejs .chatbox .chat-body .chat-action {
font-style: italic; } font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-message, #converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message { #conversejs .chatbox .chat-body .chat-message {
margin: 0.3em; } margin: 0.3em; }
#converse-embedded-chat .chatbox .chat-body .chat-message span, #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author,
#conversejs .chatbox .chat-body .chat-message span { #conversejs .chatbox .chat-body .chat-message span.chat-msg-author {
display: inline-block; } font-weight: bold;
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-author, white-space: nowrap;
#conversejs .chatbox .chat-body .chat-message span.chat-msg-author { float: left;
max-width: 100%; text-overflow: ellipsis;
font-weight: bold; overflow: hidden; }
white-space: nowrap; #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
float: left; #conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
text-overflow: ellipsis; color: #E77051; }
overflow: hidden; } #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them, #conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
#conversejs .chatbox .chat-body .chat-message span.chat-msg-them { color: #578EA9; }
color: #3AA569; } #converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me, #conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
#conversejs .chatbox .chat-body .chat-message span.chat-msg-me { max-width: 100%;
color: #578EA9; } word-wrap: break-word; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-content,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-content {
max-width: 100%;
word-wrap: break-word; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them, #converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
#conversejs .chatbox .chat-body .delayed .chat-msg-them { #conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #FB5D50; } color: #FB5D50; }
@ -1655,12 +1651,13 @@ body {
position: absolute; position: absolute;
width: 100%; width: 100%;
cursor: pointer; cursor: pointer;
background-color: #E7A151; background-color: #3AA569;
color: #FCFDFD; color: #FCFDFD;
padding: 0.3em; padding: 0.5em;
font-size: 0.9em; font-size: 0.9em;
text-align: center; text-align: center;
z-index: 20; } z-index: 20;
white-space: nowrap; }
#converse-embedded-chat .chatbox .chat-content, #converse-embedded-chat .chatbox .chat-content,
#conversejs .chatbox .chat-content { #conversejs .chatbox .chat-content {
position: relative; position: relative;
@ -1672,10 +1669,10 @@ body {
background-color: #ffffff; background-color: #ffffff;
line-height: 1.3em; line-height: 1.3em;
height: 206px; height: 206px;
height: calc(100% - 96px); } height: calc(100% - 100px); }
#converse-embedded-chat .chatbox .chat-content-sendbutton, #converse-embedded-chat .chatbox .chat-content-sendbutton,
#conversejs .chatbox .chat-content-sendbutton { #conversejs .chatbox .chat-content-sendbutton {
height: calc(100% - 128px); } height: calc(100% - 132px); }
#converse-embedded-chat .chatbox .dropdown, #converse-embedded-chat .chatbox .dropdown,
#conversejs .chatbox .dropdown { #conversejs .chatbox .dropdown {
/* status dropdown styles */ /* status dropdown styles */
@ -1692,13 +1689,12 @@ body {
border-bottom-left-radius: 7px; border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px; border-bottom-right-radius: 7px;
background-clip: padding-box; background-clip: padding-box;
background: white;
border-top: 1px solid #BBB; border-top: 1px solid #BBB;
border: 0; border: 0;
margin: 0; margin: 0;
padding: 0; padding: 0;
position: relative; position: relative;
height: 95px; height: 99px;
min-width: 100%; } min-width: 100%; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox form.sendXMPPMessage, #converse-embedded-chat .chatbox form.sendXMPPMessage,
@ -1723,7 +1719,7 @@ body {
left: 3px; left: 3px;
width: -webkit-calc(100% - 6px); width: -webkit-calc(100% - 6px);
width: calc(100% - 6px); width: calc(100% - 6px);
background-color: #E7A151; background-color: #3AA569;
color: white; color: white;
font-size: 80%; font-size: 80%;
height: 27px; height: 27px;
@ -1731,28 +1727,34 @@ body {
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
box-sizing: border-box; box-sizing: border-box;
font-size: 16px;
margin: 0; margin: 0;
padding: 5px; padding: 5px;
height: 25px; height: 29px;
display: block; display: block;
background-color: #FFF5EE; } background-color: #3AA569; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
font-size: 16px; font-size: 16px;
color: #578EA9; color: white;
text-decoration: none; text-decoration: none;
text-shadow: none; } text-shadow: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toolbar-picker-panel a {
color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
font-size: 12px; font-size: 12px;
padding-right: 3px; padding-right: 3px; }
text-shadow: 0 1px 0 white; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted {
color: #D24E2B; } color: white; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-picker-panel a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unencrypted .toolbar-picker-panel a {
color: #578EA9; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .unverified,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a, #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .unverified a,
@ -1803,7 +1805,7 @@ body {
margin-left: 0; } margin-left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
color: #578EA9; color: white;
padding-left: 5px; } padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul, #converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul { #conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
@ -1864,8 +1866,8 @@ body {
font-size: 18px; font-size: 18px;
margin: 0 0.3em; } margin: 0 0.3em; }
#conversejs .flyout { #conversejs .flyout {
border: 1em solid #E7A151; border: 1.2em solid #3AA569;
border-top: 0.8em solid #E7A151; border-top: 0.8em solid #3AA569;
border-radius: 0; border-radius: 0;
bottom: 0; } bottom: 0; }
#conversejs .chat-head { #conversejs .chat-head {
@ -1874,7 +1876,7 @@ body {
#conversejs .chat-head .user-custom-message { #conversejs .chat-head .user-custom-message {
font-size: 66%; font-size: 66%;
height: auto; height: auto;
line-height: 16px; } line-height: 22px; }
#conversejs .chat-head.chat-head-chatbox .close-chatbox-button { #conversejs .chat-head.chat-head-chatbox .close-chatbox-button {
display: none; } display: none; }
#conversejs .chat-head .avatar { #conversejs .chat-head .avatar {
@ -1886,15 +1888,19 @@ body {
width: calc(100% - 250px); width: calc(100% - 250px);
margin: 0; } margin: 0; }
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
background-color: #E7A151; background-color: #3AA569;
width: -webkit-calc(100% - 250px); width: -webkit-calc(100% - 250px);
width: calc(100% - 250px); width: calc(100% - 250px);
box-shadow: none; box-shadow: none;
min-width: auto; } min-width: auto; }
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
background-color: #E7A151; background-color: #3AA569;
border-top-left-radius: 7px; border-top-left-radius: 7px;
border-top-right-radius: 7px; } border-top-right-radius: 7px; }
#conversejs .chatbox .chat-body .chat-message {
font-size: 16px;
line-height: 22px;
margin: 0.8em 0; }
#conversejs .chatbox .chat-content { #conversejs .chatbox .chat-content {
padding: 0 1em 1em 1em; padding: 0 1em 1em 1em;
border-top-left-radius: 7px; border-top-left-radius: 7px;
@ -1922,7 +1928,7 @@ body {
border-top-left-radius: 7px; border-top-left-radius: 7px;
border-top-right-radius: 7px; border-top-right-radius: 7px;
color: white; color: white;
height: 55px; height: 62px;
margin: 0; margin: 0;
padding: 6px 6px 6px 0; } padding: 6px 6px 6px 0; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
@ -2062,11 +2068,12 @@ body {
display: block; display: block;
margin-left: 5px; } margin-left: 5px; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom p.room-info { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom p.room-info {
line-height: 22px;
margin: 0; margin: 0;
padding: 0;
display: block; display: block;
white-space: normal; } white-space: normal; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom div.room-info { #conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom div.room-info {
padding: 0.3em 0;
clear: left; clear: left;
width: 100%; } width: 100%; }
#conversejs #controlbox .dropdown { #conversejs #controlbox .dropdown {
@ -2108,7 +2115,6 @@ body {
text-align: center; text-align: center;
display: inline; display: inline;
overflow: hidden; overflow: hidden;
font-size: 12px;
list-style-type: none; list-style-type: none;
/* single tab */ } /* single tab */ }
#conversejs #controlbox #controlbox-tabs li { #conversejs #controlbox #controlbox-tabs li {
@ -2126,13 +2132,13 @@ body {
color: #818479; color: #818479;
display: block; display: block;
font-size: 14px; font-size: 14px;
height: 54px; height: 61px;
line-height: 54px; line-height: 61px;
margin: 0; margin: 0;
text-align: center; text-align: center;
text-decoration: none; } text-decoration: none; }
#conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator { #conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
background-color: #E7A151; } background-color: #3AA569; }
#conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator { #conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
background-color: #E77051; } background-color: #E77051; }
#conversejs #controlbox #controlbox-tabs li a .msgs-indicator { #conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
@ -2147,7 +2153,7 @@ body {
#conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover { #conversejs #controlbox #controlbox-tabs li a.current, #conversejs #controlbox #controlbox-tabs li a.current:hover {
box-shadow: none; box-shadow: none;
border-bottom: 0; border-bottom: 0;
height: 55px; height: 62px;
cursor: default; cursor: default;
color: #818479; } color: #818479; }
#conversejs #controlbox .fancy-dropdown { #conversejs #controlbox .fancy-dropdown {
@ -2277,7 +2283,7 @@ body {
#conversejs #controlbox .controlbox-head { #conversejs #controlbox .controlbox-head {
height: 63px; height: 63px;
padding: 6px 0 6px 0; padding: 6px 0 6px 0;
margin-top: 0.2em; } margin-top: 0.5em; }
#conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login { #conversejs #controlbox #converse-register, #conversejs #controlbox #converse-login {
margin: 30%; margin: 30%;
margin-top: 15%; } margin-top: 15%; }
@ -2405,7 +2411,7 @@ body {
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name { #conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
width: 70%; } width: 70%; }
#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator { #conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
background-color: #E7A151; background-color: #3AA569;
opacity: 1; opacity: 1;
border-radius: 10%; border-radius: 10%;
padding: 0 0.2em; padding: 0 0.2em;
@ -2433,7 +2439,7 @@ body {
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat .req-contact-name { #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .open-chat .req-contact-name {
width: 100%; } width: 100%; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name { #conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .req-contact-name {
line-height: 16px; line-height: 22px;
width: 69%; width: 69%;
padding: 0; } padding: 0; }
#conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span { #conversejs #converse-roster .roster-contacts dd.current-xmpp-contact span {
@ -2462,7 +2468,7 @@ body {
#conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover { #conversejs #converse-roster .roster-contacts dd a.remove-xmpp-contact:hover {
color: #818479; } color: #818479; }
#conversejs #converse-roster span.pending-contact-name { #conversejs #converse-roster span.pending-contact-name {
line-height: 16px; line-height: 22px;
width: 100%; } width: 100%; }
#conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room { #conversejs #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
@ -2526,16 +2532,19 @@ body {
height: 289px; height: 289px;
border-bottom-left-radius: 7px; border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px; border-bottom-right-radius: 7px;
height: -webkit-calc(100% - 55px); height: -webkit-calc(100% - 62px);
height: calc(100% - 55px); height: calc(100% - 62px);
background-color: white; background-color: white;
border-top: 0; border-top: 0;
width: 100%; } width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
color: #E77051; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned { #conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; } font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-msg-room, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room { #conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
color: #3AA569; } color: #3AA569; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg { #conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
@ -2640,19 +2649,18 @@ body {
background-color: orange; } background-color: orange; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator { #conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
color: #D24E2B; } color: #E77051; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
background-color: white; background-color: white;
border-bottom-left-radius: 7px; border-radius: 7px;
border-bottom-right-radius: 7px;
border: 0; border: 0;
color: #818479; color: #818479;
font-size: 16px; font-size: 16px;
height: 289px; height: 289px;
width: 100%; width: 100%;
height: -webkit-calc(100% - 55px); height: -webkit-calc(100% - 62px);
height: calc(100% - 55px); height: calc(100% - 62px);
overflow-y: auto; overflow-y: auto;
position: absolute; } position: absolute; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
@ -2669,6 +2677,12 @@ body {
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button], #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] { #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
margin: 0 0.5em; } margin: 0 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary {
background-color: #E77051; }
#converse-embedded-chat .chatroom form.sendXMPPMessage .chat-toolbar,
#conversejs .chatroom form.sendXMPPMessage .chat-toolbar {
background-color: #E77051; }
#converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea, #converse-embedded-chat .chatroom form.sendXMPPMessage .chat-textarea,
#conversejs .chatroom form.sendXMPPMessage .chat-textarea { #conversejs .chatroom form.sendXMPPMessage .chat-textarea {
border-bottom-right-radius: 0; } border-bottom-right-radius: 0; }
@ -2682,7 +2696,7 @@ body {
border: 1px solid #999; } border: 1px solid #999; }
#conversejs .chat-head-chatroom { #conversejs .chat-head-chatroom {
height: 55px; height: 62px;
font-size: 20px; } font-size: 20px; }
#conversejs .chat-head-chatroom .close-chatbox-button:before { #conversejs .chat-head-chatroom .close-chatbox-button:before {
content: "\e601"; } content: "\e601"; }
@ -2694,7 +2708,7 @@ body {
width: calc(100% - 250px); } width: calc(100% - 250px); }
#conversejs .chatroom .box-flyout { #conversejs .chatroom .box-flyout {
background-color: #E77051; background-color: #E77051;
border: 1em solid #E77051; border: 1.2em solid #E77051;
border-top: 0.8em solid #E77051; border-top: 0.8em solid #E77051;
width: -webkit-calc(100% - 250px); width: -webkit-calc(100% - 250px);
width: calc(100% - 250px); } width: calc(100% - 250px); }

6
inverse.html
View File

@ -13,11 +13,7 @@
<body> <body>
<div class="content"> <div class="content">
<div class="inner-content"> <div class="inner-content">
<h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1> <h1 class="brand-heading"><i class="icon-conversejs"></i> inVerse</h1>
<p class="no-chats">
You don't have any chats open.<br/></br/>
Start a new conversation by clicking on a contact or a room in the left navigation.
</p>
</div> </div>
</div> </div>
<script> <script>

30
sass/_chatbox.scss
View File

@ -131,7 +131,8 @@
padding: 5px; padding: 5px;
} }
.chat-info { .chat-info {
color: $warning-color; color: $chat-head-color;
font-size: $font-size;
margin: 0.3em; margin: 0.3em;
&.chat-event { &.chat-event {
clear: left; clear: left;
@ -147,8 +148,7 @@
} }
} }
.chat-image { .chat-image {
max-width: 100%; max-height: 24em;
max-height: 100%;
} }
.chat-action { .chat-action {
font-style: italic; font-style: italic;
@ -156,9 +156,7 @@
.chat-message { .chat-message {
margin: 0.3em; margin: 0.3em;
span { span {
display: inline-block;
&.chat-msg-author { &.chat-msg-author {
max-width: 100%;
font-weight: bold; font-weight: bold;
white-space: nowrap; white-space: nowrap;
float: left; float: left;
@ -192,10 +190,11 @@
cursor: pointer; cursor: pointer;
background-color: $chat-head-color; background-color: $chat-head-color;
color: $light-background-color; color: $light-background-color;
padding: 0.3em; padding: 0.5em;
font-size: 0.9em; font-size: 0.9em;
text-align: center; text-align: center;
z-index: 20; z-index: 20;
white-space: nowrap;
} }
.chat-content { .chat-content {
position: relative; position: relative;
@ -226,7 +225,6 @@
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
@include border-bottom-radius($chatbox-border-radius); @include border-bottom-radius($chatbox-border-radius);
background-clip: padding-box; background-clip: padding-box;
background: white;
border-top: 1px solid #BBB; border-top: 1px solid #BBB;
border: 0; border: 0;
margin: 0; margin: 0;
@ -261,7 +259,6 @@
} }
.chat-toolbar { .chat-toolbar {
box-sizing: border-box; box-sizing: border-box;
font-size: $font-size;
margin: 0; margin: 0;
padding: 5px; padding: 5px;
height: $toolbar-height; height: $toolbar-height;
@ -269,18 +266,27 @@
background-color: $toolbar-color; background-color: $toolbar-color;
a { a {
font-size: $font-size; font-size: $font-size;
color: $link-color; color: $inverse-link-color;
text-decoration: none; text-decoration: none;
text-shadow: none; text-shadow: none;
} }
.toolbar-picker-panel {
a {
color: $link-color;
}
}
.chat-toolbar-text { .chat-toolbar-text {
font-size: 12px; font-size: 12px;
padding-right: 3px; padding-right: 3px;
text-shadow: 0 1px 0 white
} }
.unencrypted a, .unencrypted a,
.unencrypted { .unencrypted {
color: $warning-color; color: $inverse-link-color;
.toolbar-picker-panel {
a {
color: $link-color;
}
}
} }
.unverified a, .unverified a,
.unverified { .unverified {
@ -327,7 +333,7 @@
margin-left: 0; margin-left: 0;
} }
.toggle-smiley { .toggle-smiley {
color: $link-color; color: $inverse-link-color;
padding-left: 5px; padding-left: 5px;
ul { ul {
left: 0; left: 0;

18
sass/_chatrooms.scss
View File

@ -62,11 +62,16 @@
background-color: white; background-color: white;
border-top: 0; border-top: 0;
width: 100%; width: 100%;
.chat-info {
color: $chatroom-head-color;
}
.mentioned { .mentioned {
font-weight: bold; font-weight: bold;
} }
.chat-msg-room { .chat-message {
color: $message-them-color; .chat-msg-them {
color: $chatroom-message-them-color;
}
} }
.disconnect-msg { .disconnect-msg {
padding: 2em 2em 0 2em; padding: 2em 2em 0 2em;
@ -175,8 +180,7 @@
} }
.chatroom-form-container { .chatroom-form-container {
background-color: white; background-color: white;
border-bottom-left-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
border-bottom-right-radius: $chatbox-border-radius;
border: 0; border: 0;
color: $text-color; color: $text-color;
font-size: $font-size; font-size: $font-size;
@ -200,11 +204,17 @@
input[type=submit] { input[type=submit] {
margin: 0 0.5em; margin: 0 0.5em;
} }
.button-primary {
background-color: $chatroom-head-color;
}
} }
} }
} }
form.sendXMPPMessage { form.sendXMPPMessage {
.chat-toolbar {
background-color: $chatroom-head-color;
}
.chat-textarea { .chat-textarea {
border-bottom-right-radius: 0; border-bottom-right-radius: 0;
} }

4
sass/_controlbox.scss
View File

@ -202,12 +202,13 @@
margin-left: 5px; margin-left: 5px;
} }
p.room-info { p.room-info {
line-height: $line-height;
margin: 0; margin: 0;
padding: 0;
display: block; display: block;
white-space: normal; white-space: normal;
} }
div.room-info { div.room-info {
padding: 0.3em 0;
clear: left; clear: left;
width: 100%; width: 100%;
} }
@ -271,7 +272,6 @@
text-align: center; text-align: center;
display: inline; display: inline;
overflow: hidden; overflow: hidden;
font-size: 12px;
list-style-type: none; list-style-type: none;
/* single tab */ /* single tab */

2
sass/_core.scss
View File

@ -177,7 +177,7 @@
} }
.button-cancel { .button-cancel {
color: white; color: white;
background-color: $warning-color; background-color: $text-color;
} }
form { form {

11
sass/converse/_variables.scss
View File

@ -47,12 +47,12 @@ $save-button-color: $green !default;
$chat-textarea-height: 70px !default; $chat-textarea-height: 70px !default;
$send-button-height: 27px !default; $send-button-height: 27px !default;
$send-button-margin: 3px !default; $send-button-margin: 3px !default;
$message-them-color: $green !default; $message-them-color: $red !default;
$roster-height: 194px !default; $roster-height: 194px !default;
$roster-item-height: 60px !default; $roster-item-height: 60px !default;
$chat-head-color: $orange !default; $chat-head-color: $green !default;
$chat-head-text-color: white !default; $chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default; $chat-head-inverse-text-color: white !default;
$chat-head-height: 55px !default; $chat-head-height: 55px !default;
@ -72,9 +72,6 @@ $warning-color: $dark-red !default;
$light-background-border-color: #B1BFC4 !default; $light-background-border-color: #B1BFC4 !default;
$light-background-color: #FCFDFD !default; $light-background-color: #FCFDFD !default;
$toolbar-height: 25px !default;
$toolbar-color: #FFF5EE !default;
$moderator-color: $dark-red !default; $moderator-color: $dark-red !default;
$online-color: $green !default; $online-color: $green !default;
$error-color: $darkest-red !default; $error-color: $darkest-red !default;
@ -93,6 +90,9 @@ $font-size: 14px !default;
$font-size-large: 16px !default; $font-size-large: 16px !default;
$legend-font-size: 16px !default; $legend-font-size: 16px !default;
$toolbar-height: 25px !default;
$toolbar-color: $chat-head-color !default;
$line-height: 16px !default; $line-height: 16px !default;
$controlbox-width: 200px !default; $controlbox-width: 200px !default;
@ -111,6 +111,7 @@ $chatroom-width: 300px !default;
$chatroom-head-color: $red !default; $chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default; $chatroom-color-light: $light-red !default;
$chatroom-color-dark: $darkest-red !default; $chatroom-color-dark: $darkest-red !default;
$chatroom-message-them-color: $green !default;
$headline-head-color: $green !default; $headline-head-color: $green !default;

8
sass/inverse/_chatbox.scss
View File

@ -4,7 +4,7 @@
margin: 0 0.3em; margin: 0 0.3em;
} }
.flyout { .flyout {
border: 1em solid $chat-head-color; border: $flyout-padding solid $chat-head-color;
border-top: 0.8em solid $chat-head-color; border-top: 0.8em solid $chat-head-color;
border-radius: 0; border-radius: 0;
bottom: 0; bottom: 0;
@ -41,6 +41,12 @@
background-color: $chat-head-color; background-color: $chat-head-color;
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius; border-top-right-radius: $chatbox-border-radius;
.chat-message {
font-size: $font-size;
line-height: $line-height;
margin: 0.8em 0;
}
} }
.chat-content { .chat-content {
padding: 0 $padding $padding $padding; padding: 0 $padding $padding $padding;

2
sass/inverse/_chatrooms.scss
View File

@ -15,7 +15,7 @@
@include calc(width, '100% - #{$controlbox-width}'); @include calc(width, '100% - #{$controlbox-width}');
.box-flyout { .box-flyout {
background-color: $chatroom-head-color; background-color: $chatroom-head-color;
border: 1em solid $chatroom-head-color; border: $flyout-padding solid $chatroom-head-color;
border-top: 0.8em solid $chatroom-head-color; border-top: 0.8em solid $chatroom-head-color;
@include calc(width, '100% - #{$controlbox-width}'); @include calc(width, '100% - #{$controlbox-width}');
.chatroom-body { .chatroom-body {

2
sass/inverse/_controlbox.scss
View File

@ -33,7 +33,7 @@
.controlbox-head { .controlbox-head {
height: $controlbox-head-height; height: $controlbox-head-height;
padding: 6px 0 6px 0; padding: 6px 0 6px 0;
margin-top: 0.2em; margin-top: 0.5em;
} }
#converse-register, #converse-login { #converse-register, #converse-login {
margin: 30%; margin: 30%;

28
sass/inverse/_variables.scss
View File

@ -44,19 +44,21 @@ $light-text-color: #A8ABA1 !default;
$border-color: #CCC !default; $border-color: #CCC !default;
$icon-color: $blue !default; $icon-color: $blue !default;
$save-button-color: $green !default; $save-button-color: $green !default;
$chat-textarea-height: 70px !default;
$send-button-height: 27px !default; $send-button-height: 27px !default;
$send-button-margin: 3px !default; $send-button-margin: 3px !default;
$message-them-color: $green !default; $message-them-color: $red !default;
$roster-height: 194px !default; $roster-height: 194px !default;
$roster-item-height: 30px !default; $roster-item-height: 30px !default;
$chat-head-color: $orange !default; $flyout-padding: 1.2em;
$chat-head-color: $green !default;
$chat-head-text-color: white !default; $chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default; $chat-head-inverse-text-color: white !default;
$chat-head-height: 55px !default; $chat-head-height: 62px !default;
$chatroom-head-height: 55px !default;
$chat-textarea-height: 70px !default;
$input-focus-color: #1A9707 !default; $input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default; $highlight-color: #DCF9F6 !default;
@ -64,19 +66,16 @@ $highlight-color: #DCF9F6 !default;
$controlbox-dropdown-height: 30px !default; $controlbox-dropdown-height: 30px !default;
$controlbox-head-color: $light-blue !default; $controlbox-head-color: $light-blue !default;
$controlbox-head-height: 63px !default; $controlbox-head-height: 63px !default;
$controlbox-pane-padding: 1.2em !default; $controlbox-pane-padding: $flyout-padding !default;
$primary-color: $green !default; $primary-color: $orange !default;
$secondary-color: $blue !default; $secondary-color: $blue !default;
$warning-color: $dark-red !default; $warning-color: $dark-red !default;
$light-background-border-color: #B1BFC4 !default; $light-background-border-color: #B1BFC4 !default;
$light-background-color: #FCFDFD !default; $light-background-color: #FCFDFD !default;
$toolbar-height: 25px !default; $moderator-color: $red !default;
$toolbar-color: #FFF5EE !default;
$moderator-color: $dark-red !default;
$online-color: $green !default; $online-color: $green !default;
$error-color: $darkest-red !default; $error-color: $darkest-red !default;
@ -95,7 +94,10 @@ $font-size-large: 18px !default;
$font-size-huge: 26px !default; $font-size-huge: 26px !default;
$legend-font-size: 18px !default; $legend-font-size: 18px !default;
$line-height: 16px !default; $toolbar-height: 29px !default;
$toolbar-color: $chat-head-color !default;
$line-height: 22px !default;
$controlbox-width: 250px !default; $controlbox-width: 250px !default;
$chat-width: 100% !default; $chat-width: 100% !default;
@ -111,10 +113,12 @@ $small-mobile-chat-height: 300px !default;
$font-path: "../fonticons/fonts/" !default; $font-path: "../fonticons/fonts/" !default;
$chatroom-head-height: 62px !default;
$chatroom-width: 300px !default; $chatroom-width: 300px !default;
$chatroom-head-color: $red !default; $chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default; $chatroom-color-light: $light-red !default;
$chatroom-color-dark: $darkest-red !default; $chatroom-color-dark: $darkest-red !default;
$chatroom-message-them-color: $green !default;
$headline-head-color: $green !default; $headline-head-color: $green !default;

2
src/templates/chatroom_toolbar.html
View File

@ -1,6 +1,6 @@
{[ if (show_emoticons) { ]} {[ if (show_emoticons) { ]}
<li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}"> <li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
<ul> <ul class="toolbar-picker-panel">
<li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li> <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
<li><a class="icon-wink" href="#" data-emoticon=";)"></a></li> <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
<li><a class="icon-grin" href="#" data-emoticon=":D"></a></li> <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>

2
src/templates/toolbar.html
View File

@ -1,6 +1,6 @@
{[ if (show_emoticons) { ]} {[ if (show_emoticons) { ]}
<li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}"> <li class="toggle-smiley icon-happy" title="{{{label_insert_smiley}}}">
<ul> <ul class="toolbar-picker-panel">
<li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li> <li><a class="icon-smiley" href="#" data-emoticon=":)"></a></li>
<li><a class="icon-wink" href="#" data-emoticon=";)"></a></li> <li><a class="icon-wink" href="#" data-emoticon=";)"></a></li>
<li><a class="icon-grin" href="#" data-emoticon=":D"></a></li> <li><a class="icon-grin" href="#" data-emoticon=":D"></a></li>

2
src/templates/toolbar_otr.html
View File

@ -13,7 +13,7 @@
{[ if (otr_status == FINISHED) { ]} {[ if (otr_status == FINISHED) { ]}
<span class="icon-unlocked"></span> <span class="icon-unlocked"></span>
{[ } ]} {[ } ]}
<ul> <ul class="toolbar-picker-panel">
{[ if (otr_status == UNENCRYPTED) { ]} {[ if (otr_status == UNENCRYPTED) { ]}
<li><a class="start-otr" href="#">{{{label_start_encrypted_conversation}}}</a></li> <li><a class="start-otr" href="#">{{{label_start_encrypted_conversation}}}</a></li>
{[ } ]} {[ } ]}