Updated color-scheme and fix conversejs icon offset

This commit is contained in:
JC Brand 2017-06-15 11:02:20 +02:00
parent 1f82b7dfe4
commit 8658822d75
14 changed files with 536 additions and 483 deletions

View File

@ -1,7 +1,7 @@
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
#converse-embedded-chat {
-webkit-box-sizing: border-box;

View File

@ -8,7 +8,7 @@
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
@font-face {
font-family: 'Converse-js';
@ -1140,7 +1140,7 @@
margin: 0; }
#conversejs a, #conversejs a:visited {
text-decoration: none;
color: #2A9D8F;
color: #578EA9;
text-shadow: none; }
#converse-embedded-chat,
@ -1374,7 +1374,7 @@
display: table-cell; }
#converse-embedded-chat .error,
#conversejs .error {
color: #D24E2B; }
color: #A53214; }
#converse-embedded-chat .reg-feedback,
#conversejs .reg-feedback {
font-size: 85%; }
@ -1406,11 +1406,11 @@
#converse-embedded-chat .button-primary,
#conversejs .button-primary {
color: white;
background-color: #2AC611; }
background-color: #3AA569; }
#converse-embedded-chat .button-secondary,
#conversejs .button-secondary {
color: white;
background-color: #83A0D6; }
background-color: #387592; }
#converse-embedded-chat .button-cancel,
#conversejs .button-cancel {
color: white;
@ -1447,7 +1447,7 @@
border: none; }
#converse-embedded-chat form.pure-form.converse-form input.error,
#conversejs form.pure-form.converse-form input.error {
border: 1px solid #D24E2B;
border: 1px solid #A53214;
color: #818479; }
#converse-embedded-chat form.pure-form.converse-form .form-help,
#conversejs form.pure-form.converse-form .form-help {
@ -1467,7 +1467,7 @@
margin: 0; }
#converse-embedded-chat .chat-textarea-chatroom-selected,
#conversejs .chat-textarea-chatroom-selected {
border: 2px solid #2A9D8F;
border: 2px solid #578EA9;
margin: 0; }
#converse-embedded-chat .dropdown dt,
#converse-embedded-chat .dropdown ul,
@ -1513,7 +1513,7 @@
float: left; }
#converse-embedded-chat .chat-head.chat-head-chatbox,
#conversejs .chat-head.chat-head-chatbox {
background-color: #F4A261; }
background-color: #E7A151; }
#converse-embedded-chat .chat-head .user-custom-message,
#conversejs .chat-head .user-custom-message {
color: white;
@ -1543,7 +1543,7 @@
#converse-embedded-chat .chatbox-btn.button-on,
#conversejs .chatbox-btn.button-on {
background-color: white;
color: #F4A261; }
color: #E7A151; }
#converse-embedded-chat .chatbox,
#conversejs .chatbox {
display: block;
@ -1658,10 +1658,10 @@
overflow: hidden; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
color: #1A9707; }
color: #3AA569; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
color: #2A9D8F; }
color: #578EA9; }
#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%;
@ -1677,7 +1677,7 @@
position: absolute;
width: 100%;
cursor: pointer;
background-color: #F4A261;
background-color: #E7A151;
color: #FCFDFD;
padding: 0.3em;
font-size: 0.9em;
@ -1745,7 +1745,7 @@
left: 3px;
width: -webkit-calc(100% - 6px);
width: calc(100% - 6px);
background-color: #F4A261;
background-color: #E7A151;
color: white;
font-size: 80%;
height: 27px;
@ -1762,7 +1762,7 @@
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
font-size: 14px;
color: #2A9D8F;
color: #578EA9;
text-decoration: none;
text-shadow: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
@ -1825,7 +1825,7 @@
margin-left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
color: #2A9D8F;
color: #578EA9;
padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
@ -1906,7 +1906,7 @@
#conversejs #controlbox {
margin: 0; } }
#conversejs #controlbox .controlbox-head {
background-color: #577BDD;
background-color: #578EA9;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
color: white;
@ -1958,7 +1958,7 @@
margin-bottom: 8px; }
#conversejs #controlbox #converse-register .form-help .url {
font-weight: bold;
color: #2A9D8F; }
color: #578EA9; }
#conversejs #controlbox #converse-register .input-group {
display: table;
margin: auto;
@ -1981,7 +1981,7 @@
height: auto;
white-space: normal; }
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
color: #436F64; }
color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%;
margin: 0.5em 0; }
@ -2023,7 +2023,7 @@
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover {
color: #015158; }
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room {
max-width: 50%;
width: auto;
@ -2040,9 +2040,9 @@
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark {
color: #A8ABA1; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on {
color: #2A9D8F; }
color: #578EA9; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on:hover {
color: #015158; }
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .room-info {
font-size: 12px;
font-style: normal;
@ -2121,9 +2121,9 @@
text-align: center;
text-decoration: none; }
#conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
background-color: #F4A261; }
background-color: #E7A151; }
#conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
background-color: #E76F51; }
background-color: #E77051; }
#conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
border-top-right-radius: 5px; }
#conversejs #controlbox #controlbox-tabs li a:hover {
@ -2151,7 +2151,7 @@
display: inline-block; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status:hover,
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form:hover {
color: #015158; }
color: #206485; }
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
padding: 0 0.5em;
width: 100%; }
@ -2164,9 +2164,9 @@
float: right;
clear: right;
width: 12px;
color: #2A9D8F; }
color: #578EA9; }
#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message:hover {
color: #015158; }
color: #206485; }
#conversejs #controlbox #fancy-xmpp-status-select fieldset {
padding: 0;
margin-top: -1px; }
@ -2227,7 +2227,7 @@
#conversejs #controlbox .set-xmpp-status .dropdown dd ul {
z-index: 22; }
#conversejs .toggle-controlbox {
background-color: #2A9D8F;
background-color: #578EA9;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #0a0a0a;
@ -2345,7 +2345,7 @@
margin: 0;
padding: 0.5em 0 0 0; }
#conversejs #converse-roster .roster-contacts dd a:hover {
color: #015158; }
color: #206485; }
#conversejs #converse-roster .roster-contacts dd .open-chat {
margin: auto;
padding: 0;
@ -2358,7 +2358,7 @@
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
width: 70%; }
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar .pulse {
border: 0.7em solid #2A9D8F;
border: 0.7em solid #578EA9;
background: transparent;
border-radius: 60px;
height: 30px;
@ -2376,7 +2376,7 @@
z-index: 1;
opacity: 0; }
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar.avatar-online .pulse {
border: 0.7em solid #2A9D8F; }
border: 0.7em solid #578EA9; }
#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
opacity: 1;
margin-left: -3em;
@ -2392,7 +2392,7 @@
display: inline-block;
height: 60px; }
#conversejs #converse-roster .roster-contacts dd .open-chat .avatar .status-icon {
color: #2A9D8F; }
color: #578EA9; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions {
padding: 0 0 0 0.3em;
float: right; }
@ -2443,11 +2443,11 @@
margin: 0.3em 0; }
#converse-embedded-chat .chat-head-chatroom,
#conversejs .chat-head-chatroom {
background-color: #E76F51; }
background-color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
#conversejs .chat-head-chatroom .chatbox-btn.button-on {
background-color: white;
color: #E76F51; }
color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chatroom-description,
#conversejs .chat-head-chatroom .chatroom-description {
color: white;
@ -2501,7 +2501,7 @@
font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-msg-room,
#conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
color: #1A9707; }
color: #3AA569; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
padding: 2em 2em 0 2em; }
@ -2514,7 +2514,7 @@
min-width: 200px; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
background-color: #E76F51;
background-color: #E77051;
max-width: 70%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
@ -2623,7 +2623,7 @@
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
font-size: 90%;
color: #D24E2B; }
color: #A53214; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
@ -2639,7 +2639,7 @@
border-bottom-right-radius: 0; }
#converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
#conversejs .chatroom form.sendXMPPMessage .send-button {
background-color: #E76F51; }
background-color: #E77051; }
#converse-embedded-chat .chatroom .room-invite .invited-contact,
#conversejs .chatroom .room-invite .invited-contact {
margin: -1px 0 0 -1px;
@ -2647,7 +2647,7 @@
border: 1px solid #999; }
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
background-color: #2A9D8F; }
background-color: #3AA569; }
#conversejs #minimized-chats {
border-top-left-radius: 4px;
@ -2662,7 +2662,7 @@
#conversejs #minimized-chats #toggle-minimized-chats {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background-color: #2A9D8F;
background-color: #578EA9;
color: white;
position: relative;
padding: 10px 0 0 0;

View File

@ -8,7 +8,7 @@
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
@font-face {
font-family: 'Converse-js';
@ -1140,7 +1140,7 @@
margin: 0; }
#conversejs a, #conversejs a:visited {
text-decoration: none;
color: #2A9D8F;
color: #578EA9;
text-shadow: none; }
#converse-embedded-chat,
@ -1374,7 +1374,7 @@
display: table-cell; }
#converse-embedded-chat .error,
#conversejs .error {
color: #D24E2B; }
color: #A53214; }
#converse-embedded-chat .reg-feedback,
#conversejs .reg-feedback {
font-size: 85%; }
@ -1406,11 +1406,11 @@
#converse-embedded-chat .button-primary,
#conversejs .button-primary {
color: white;
background-color: #2AC611; }
background-color: #3AA569; }
#converse-embedded-chat .button-secondary,
#conversejs .button-secondary {
color: white;
background-color: #83A0D6; }
background-color: #387592; }
#converse-embedded-chat .button-cancel,
#conversejs .button-cancel {
color: white;
@ -1447,7 +1447,7 @@
border: none; }
#converse-embedded-chat form.pure-form.converse-form input.error,
#conversejs form.pure-form.converse-form input.error {
border: 1px solid #D24E2B;
border: 1px solid #A53214;
color: #818479; }
#converse-embedded-chat form.pure-form.converse-form .form-help,
#conversejs form.pure-form.converse-form .form-help {
@ -1467,7 +1467,7 @@
margin: 0; }
#converse-embedded-chat .chat-textarea-chatroom-selected,
#conversejs .chat-textarea-chatroom-selected {
border: 2px solid #2A9D8F;
border: 2px solid #578EA9;
margin: 0; }
#converse-embedded-chat .dropdown dt,
#converse-embedded-chat .dropdown ul,
@ -1481,13 +1481,13 @@ body {
height: 100%;
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff;
background-color: #17818B; }
background-color: #578EA9; }
div.content {
height: 100vh;
width: 100vw;
position: fixed;
background-color: #17818B; }
background-color: #578EA9; }
div.content .inner-content {
text-align: center;
padding: 7%;
@ -1496,6 +1496,8 @@ div.content {
div.content .inner-content .brand-heading {
font-size: 600%;
margin-left: -10%; }
div.content .inner-content .brand-heading .icon-conversejs {
font-size: 88%; }
div.content .inner-content p.no-chats {
padding-right: 10%;
font-size: 120%; }
@ -1558,7 +1560,7 @@ div.content {
float: left; }
#converse-embedded-chat .chat-head.chat-head-chatbox,
#conversejs .chat-head.chat-head-chatbox {
background-color: #F4A261; }
background-color: #E7A151; }
#converse-embedded-chat .chat-head .user-custom-message,
#conversejs .chat-head .user-custom-message {
color: white;
@ -1588,7 +1590,7 @@ div.content {
#converse-embedded-chat .chatbox-btn.button-on,
#conversejs .chatbox-btn.button-on {
background-color: white;
color: #F4A261; }
color: #E7A151; }
#converse-embedded-chat .chatbox,
#conversejs .chatbox {
display: block;
@ -1703,10 +1705,10 @@ div.content {
overflow: hidden; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-them,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-them {
color: #1A9707; }
color: #3AA569; }
#converse-embedded-chat .chatbox .chat-body .chat-message span.chat-msg-me,
#conversejs .chatbox .chat-body .chat-message span.chat-msg-me {
color: #2A9D8F; }
color: #578EA9; }
#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%;
@ -1722,7 +1724,7 @@ div.content {
position: absolute;
width: 100%;
cursor: pointer;
background-color: #F4A261;
background-color: #E7A151;
color: #FCFDFD;
padding: 0.3em;
font-size: 0.9em;
@ -1790,7 +1792,7 @@ div.content {
left: 3px;
width: -webkit-calc(100% - 6px);
width: calc(100% - 6px);
background-color: #F4A261;
background-color: #E7A151;
color: white;
font-size: 80%;
height: 27px;
@ -1807,7 +1809,7 @@ div.content {
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
font-size: 15px;
color: #2A9D8F;
color: #578EA9;
text-decoration: none;
text-shadow: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
@ -1870,7 +1872,7 @@ div.content {
margin-left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
color: #2A9D8F;
color: #578EA9;
padding-left: 5px; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley ul {
@ -1931,8 +1933,8 @@ div.content {
font-size: 18px;
margin: 0 0.3em; }
#conversejs .flyout {
border: 1em solid #F4A261;
border-top: 0.8em solid #F4A261;
border: 1em solid #E7A151;
border-top: 0.8em solid #E7A151;
border-radius: 0;
bottom: 0; }
#conversejs .chat-head {
@ -1953,13 +1955,13 @@ div.content {
width: calc(100% - 250px);
margin: 0; }
#conversejs .chatbox .box-flyout {
background-color: #F4A261;
background-color: #E7A151;
width: -webkit-calc(100% - 250px);
width: calc(100% - 250px);
box-shadow: none;
min-width: auto; }
#conversejs .chatbox .chat-body {
background-color: #F4A261;
background-color: #E7A151;
border-top-left-radius: 7px;
border-top-right-radius: 7px; }
#conversejs .chatbox .chat-content {
@ -1985,7 +1987,7 @@ div.content {
#conversejs #controlbox {
margin: 0; } }
#conversejs #controlbox .controlbox-head {
background-color: #577BDD;
background-color: #578EA9;
border-top-left-radius: 7px;
border-top-right-radius: 7px;
color: white;
@ -2007,11 +2009,9 @@ div.content {
#conversejs #controlbox form.search-xmpp-contact input {
width: 8em; }
#conversejs #controlbox .msgs-indicator {
opacity: 0.6;
background-color: #D24E2B;
background-color: #E77051;
color: white;
font-size: 14px;
float: right;
font-weight: normal;
padding: 0 4px;
text-shadow: none; }
@ -2037,7 +2037,7 @@ div.content {
margin-bottom: 8px; }
#conversejs #controlbox #converse-register .form-help .url {
font-weight: bold;
color: #2A9D8F; }
color: #578EA9; }
#conversejs #controlbox #converse-register .input-group {
display: table;
margin: auto;
@ -2060,7 +2060,7 @@ div.content {
height: auto;
white-space: normal; }
#conversejs #controlbox #converse-register .save-submit, #conversejs #controlbox #converse-login .save-submit {
color: #436F64; }
color: #3AA569; }
#conversejs #controlbox #converse-register input, #conversejs #controlbox #converse-login input {
width: 100%;
margin: 0.5em 0; }
@ -2102,7 +2102,7 @@ div.content {
text-shadow: 0 1px 0 #FAFAFA;
word-wrap: break-word; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom a:hover {
color: #015158; }
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom.unread-msgs .open-room {
max-width: 50%;
width: auto;
@ -2119,9 +2119,9 @@ div.content {
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark {
color: #A8ABA1; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on {
color: #2A9D8F; }
color: #578EA9; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .remove-bookmark.button-on:hover {
color: #015158; }
color: #206485; }
#conversejs #controlbox #chatrooms .rooms-list-container dl.rooms-list dd.available-chatroom .room-info {
font-size: 14px;
font-style: normal;
@ -2200,11 +2200,13 @@ div.content {
text-align: center;
text-decoration: none; }
#conversejs #controlbox #controlbox-tabs li a.contacts-tab .msgs-indicator {
background-color: #F4A261; }
background-color: #E7A151; }
#conversejs #controlbox #controlbox-tabs li a.rooms-tab .msgs-indicator {
background-color: #E76F51; }
background-color: #E77051; }
#conversejs #controlbox #controlbox-tabs li a .msgs-indicator {
border-top-right-radius: 5px; }
opacity: 0.8;
border-top-right-radius: 5px;
float: right; }
#conversejs #controlbox #controlbox-tabs li a:hover {
color: #818479; }
#conversejs #controlbox #controlbox-tabs li a:hover .msgs-indicator {
@ -2230,7 +2232,7 @@ div.content {
display: inline-block; }
#conversejs #controlbox .fancy-dropdown .choose-xmpp-status:hover,
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form:hover {
color: #015158; }
color: #206485; }
#conversejs #controlbox .fancy-dropdown .toggle-xmpp-contact-form {
padding: 0 0.5em;
width: 100%; }
@ -2243,9 +2245,9 @@ div.content {
float: right;
clear: right;
width: 12px;
color: #2A9D8F; }
color: #578EA9; }
#conversejs #controlbox #fancy-xmpp-status-select a.change-xmpp-status-message:hover {
color: #015158; }
color: #206485; }
#conversejs #controlbox #fancy-xmpp-status-select fieldset {
padding: 0;
margin-top: -1px; }
@ -2306,7 +2308,7 @@ div.content {
#conversejs #controlbox .set-xmpp-status .dropdown dd ul {
z-index: 22; }
#conversejs .toggle-controlbox {
background-color: #2A9D8F;
background-color: #578EA9;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
color: #0a0a0a;
@ -2324,8 +2326,7 @@ div.content {
margin: 0; }
#conversejs #controlbox #login-dialog .brand-heading, #conversejs #controlbox #register .brand-heading {
margin: 10% 0 0 0;
font-size: 600%;
color: #577BDD; }
color: #387592; }
#conversejs #controlbox #login-dialog .converse-form, #conversejs #controlbox #register .converse-form {
margin-top: 4em; }
#conversejs #controlbox.fullscreen {
@ -2338,7 +2339,7 @@ div.content {
min-width: 250px;
width: 200px;
z-index: 1;
background-color: #577BDD; }
background-color: #578EA9; }
#conversejs #controlbox .controlbox-head {
height: 63px;
padding: 6px 0 6px 0;
@ -2460,7 +2461,7 @@ div.content {
margin: 0;
padding: 0.5em 0 0 0; }
#conversejs #converse-roster .roster-contacts dd a:hover {
color: #015158; }
color: #206485; }
#conversejs #converse-roster .roster-contacts dd .open-chat {
margin: auto;
padding: 0;
@ -2473,7 +2474,7 @@ div.content {
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .contact-name {
width: 70%; }
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar .pulse {
border: 0.7em solid #2A9D8F;
border: 0.7em solid #578EA9;
background: transparent;
border-radius: 60px;
height: 30px;
@ -2491,7 +2492,7 @@ div.content {
z-index: 1;
opacity: 0; }
#conversejs #converse-roster .roster-contacts dd .open-chat.unread-msgs .avatar.avatar-online .pulse {
border: 0.7em solid #2A9D8F; }
border: 0.7em solid #578EA9; }
#conversejs #converse-roster .roster-contacts dd .open-chat .msgs-indicator {
opacity: 1;
margin-left: -3em;
@ -2507,7 +2508,7 @@ div.content {
display: inline-block;
height: 30px; }
#conversejs #converse-roster .roster-contacts dd .open-chat .avatar .status-icon {
color: #2A9D8F; }
color: #578EA9; }
#conversejs #converse-roster .roster-contacts dd.requesting-xmpp-contact .request-actions {
padding: 0 0 0 0.3em;
float: right; }
@ -2561,11 +2562,11 @@ div.content {
margin: 0.3em 0; }
#converse-embedded-chat .chat-head-chatroom,
#conversejs .chat-head-chatroom {
background-color: #E76F51; }
background-color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
#conversejs .chat-head-chatroom .chatbox-btn.button-on {
background-color: white;
color: #E76F51; }
color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chatroom-description,
#conversejs .chat-head-chatroom .chatroom-description {
color: white;
@ -2619,7 +2620,7 @@ div.content {
font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-msg-room,
#conversejs .chatroom .box-flyout .chatroom-body .chat-msg-room {
color: #1A9707; }
color: #3AA569; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
padding: 2em 2em 0 2em; }
@ -2632,7 +2633,7 @@ div.content {
min-width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
background-color: #E76F51;
background-color: #E77051;
max-width: 70%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
@ -2741,7 +2742,7 @@ div.content {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message {
font-size: 90%;
color: #D24E2B; }
color: #A53214; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
@ -2757,7 +2758,7 @@ div.content {
border-bottom-right-radius: 0; }
#converse-embedded-chat .chatroom form.sendXMPPMessage .send-button,
#conversejs .chatroom form.sendXMPPMessage .send-button {
background-color: #E76F51; }
background-color: #E77051; }
#converse-embedded-chat .chatroom .room-invite .invited-contact,
#conversejs .chatroom .room-invite .invited-contact {
margin: -1px 0 0 -1px;
@ -2776,9 +2777,9 @@ div.content {
width: -webkit-calc(100% - 250px);
width: calc(100% - 250px); }
#conversejs .chatroom .box-flyout {
background-color: #E76F51;
border: 1em solid #E76F51;
border-top: 0.8em solid #E76F51;
background-color: #E77051;
border: 1em solid #E77051;
border-top: 0.8em solid #E77051;
width: -webkit-calc(100% - 250px);
width: calc(100% - 250px); }
#conversejs .chatroom .box-flyout .chatroom-body {
@ -2820,10 +2821,10 @@ div.content {
margin: 0 0 0.5em -1px; }
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
background-color: #2A9D8F; }
background-color: #3AA569; }
#conversejs .chatbox.headlines .flyout {
border: 1em solid #2A9D8F;
border-top: 0.8em solid #2A9D8F; }
border: 1em solid #3AA569;
border-top: 0.8em solid #3AA569; }
#converse-embedded-chat,
#conversejs {

Binary file not shown.

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

Binary file not shown.

File diff suppressed because it is too large Load Diff

View File

@ -1,10 +1,10 @@
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?wvi0ht');
src: url('fonts/icomoon.eot?wvi0ht#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?wvi0ht') format('truetype'),
url('fonts/icomoon.woff?wvi0ht') format('woff'),
url('fonts/icomoon.svg?wvi0ht#icomoon') format('svg');
src: url('fonts/icomoon.eot?uikzla');
src: url('fonts/icomoon.eot?uikzla#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?uikzla') format('truetype'),
url('fonts/icomoon.woff?uikzla') format('woff'),
url('fonts/icomoon.svg?uikzla#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
@ -276,4 +276,3 @@
.icon-exit:before {
content: "\e601";
}

View File

@ -34,11 +34,10 @@
}
.msgs-indicator {
opacity: 0.6;
background-color: $warning-color;
border-radius: 3px;
background-color: $red;
color: white;
font-size: $font-size-small;
float: right;
font-weight: normal;
padding: 0 4px;
text-shadow: none;
@ -307,7 +306,9 @@
}
}
.msgs-indicator {
opacity: 0.8;
border-top-right-radius: $button-border-radius;
float: right;
}
&:hover {
color: $text-color;

View File

@ -1,10 +1,40 @@
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
$link-color: #2A9D8F !default;
$dark-link-color: #015158 !default;
$subdued-color: #A8ABA1 !default;
$gray-color: #818479 !default;
$dark-gray-color: #585B51!default;
$lightest-blue: #89B7CD;
$light-blue: #578EA9;
$blue: #387592;
$dark-blue: #206485;
$darkest-blue: #114C68;
$lightest-red: #FFB9A7;
$light-red: #FF977C;
$red: #E77051;
$dark-red: #D24E2B;
$darkest-red: #A53214;
$lightest-orange: #FFD6A7;
$light-orange: #E7A151;
$orange: #E7A151;
$dark-orange: #D2842B;
$darkest-orange: #A56214;
$lightest-green: #8DD8AE;
$light-green: #5CBC86;
$green: #3AA569;
$dark-green: #1E9652;
$darkest-green: #0E763B;
$link-color: $light-blue !default;
$dark-link-color: $dark-blue !default;
$global-background-color: $light-blue !default;
$inverse-link-color: white !default;
$link-shadow-color: #FAFAFA !default;
@ -12,17 +42,17 @@ $text-shadow-color: #FAFAFA !default;
$text-color: #818479 !default;
$light-text-color: #A8ABA1 !default;
$border-color: #CCC !default;
$icon-color: #114327 !default;
$save-button-color: #436F64 !default;
$icon-color: $blue !default;
$save-button-color: $green !default;
$chat-textarea-height: 70px !default;
$send-button-height: 27px !default;
$send-button-margin: 3px !default;
$message-them-color: #1A9707 !default;
$message-them-color: $green !default;
$roster-height: 194px !default;
$roster-item-height: 60px !default;
$chat-head-color: #F4A261 !default;
$chat-head-color: $orange !default;
$chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default;
$chat-head-height: 55px !default;
@ -30,18 +60,14 @@ $chat-head-height: 55px !default;
$input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default;
$subdued-color: #A8ABA1 !default;
$gray-color: #818479 !default;
$dark-gray-color: #585B51!default;
$controlbox-dropdown-height: 25px !default;
$controlbox-head-color: #577BDD !default;
$controlbox-head-color: $light-blue !default;
$controlbox-head-height: 55px !default;
$controlbox-pane-padding: 1em !default;
$primary-color: #2AC611 !default;
$secondary-color: #83A0D6 !default;
$warning-color: #D24E2B !default;
$primary-color: $green !default;
$secondary-color: $blue !default;
$warning-color: $dark-red !default;
$light-background-border-color: #B1BFC4 !default;
$light-background-color: #FCFDFD !default;
@ -49,9 +75,9 @@ $light-background-color: #FCFDFD !default;
$toolbar-height: 25px !default;
$toolbar-color: #FFF5EE !default;
$moderator-color: #D24E2B !default;
$online-color: #1A9707 !default;
$error-color: #D24E2B !default;
$moderator-color: $dark-red !default;
$online-color: $green !default;
$error-color: $darkest-red !default;
$button-border-radius: 5px !default;
$chatbox-border-radius: 4px !default;
@ -82,11 +108,11 @@ $small-mobile-chat-height: 300px !default;
$font-path: "../fonticons/fonts/" !default;
$chatroom-width: 300px !default;
$chatroom-head-color: #E76F51 !default;
$chatroom-color-light: #FF977C !default;
$chatroom-color-dark: #D24E2B !default;
$chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default;
$chatroom-color-dark: $darkest-red !default;
$headline-head-color: #2A9D8F !default;
$headline-head-color: $green !default;
$box-close-button-padding-top: 4px !default;
$box-close-button-padding-bottom: 4px !default;

View File

@ -8,8 +8,7 @@
#login-dialog, #register {
.brand-heading {
margin: 10% 0 0 0;
font-size: 600%;
color: #577BDD;
color: $blue;
}
.converse-form {
margin-top: 4em;

View File

@ -20,6 +20,9 @@ div.content {
.brand-heading {
font-size: 600%;
margin-left: -10%;
.icon-conversejs {
font-size: 88%;
}
}
p.no-chats {
padding-right: 10%;

View File

@ -1,12 +1,40 @@
/*
Color scheme helpers:
https://coolors.co/app/264653-2a9d8f-e9c46a-f4a261-e76f51
http://paletton.com/#uid=53f0u0knsvIdILAj5Cftgu3uBmZ
http://paletton.com/#uid=70a0u0kkNs+b4JOgryLpxqpsbkI
*/
$global-background-color: #17818B !default;
$link-color: #2A9D8F !default;
$dark-link-color: #015158 !default;
$subdued-color: #A8ABA1 !default;
$gray-color: #818479 !default;
$dark-gray-color: #585B51!default;
$lightest-blue: #89B7CD;
$light-blue: #578EA9;
$blue: #387592;
$dark-blue: #206485;
$darkest-blue: #114C68;
$lightest-red: #FFB9A7;
$light-red: #FF977C;
$red: #E77051;
$dark-red: #D24E2B;
$darkest-red: #A53214;
$lightest-orange: #FFD6A7;
$light-orange: #E7A151;
$orange: #E7A151;
$dark-orange: #D2842B;
$darkest-orange: #A56214;
$lightest-green: #8DD8AE;
$light-green: #5CBC86;
$green: #3AA569;
$dark-green: #1E9652;
$darkest-green: #0E763B;
$link-color: $light-blue !default;
$dark-link-color: $dark-blue !default;
$global-background-color: $light-blue !default;
$inverse-link-color: white !default;
$link-shadow-color: #FAFAFA !default;
@ -14,17 +42,17 @@ $text-shadow-color: #FAFAFA !default;
$text-color: #818479 !default;
$light-text-color: #A8ABA1 !default;
$border-color: #CCC !default;
$icon-color: #114327 !default;
$save-button-color: #436F64 !default;
$icon-color: $blue !default;
$save-button-color: $green !default;
$chat-textarea-height: 70px !default;
$send-button-height: 27px !default;
$send-button-margin: 3px !default;
$message-them-color: #1A9707 !default;
$message-them-color: $green !default;
$roster-height: 194px !default;
$roster-item-height: 30px !default;
$chat-head-color: #F4A261 !default;
$chat-head-color: $orange !default;
$chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default;
$chat-head-height: 55px !default;
@ -33,18 +61,14 @@ $chatroom-head-height: 55px !default;
$input-focus-color: #1A9707 !default;
$highlight-color: #DCF9F6 !default;
$subdued-color: #A8ABA1 !default;
$gray-color: #818479 !default;
$dark-gray-color: #585B51!default;
$controlbox-dropdown-height: 30px !default;
$controlbox-head-color: #577BDD !default;
$controlbox-head-color: $light-blue !default;
$controlbox-head-height: 63px !default;
$controlbox-pane-padding: 1.2em !default;
$primary-color: #2AC611 !default;
$secondary-color: #83A0D6 !default;
$warning-color: #D24E2B !default;
$primary-color: $green !default;
$secondary-color: $blue !default;
$warning-color: $dark-red !default;
$light-background-border-color: #B1BFC4 !default;
$light-background-color: #FCFDFD !default;
@ -52,9 +76,9 @@ $light-background-color: #FCFDFD !default;
$toolbar-height: 25px !default;
$toolbar-color: #FFF5EE !default;
$moderator-color: #D24E2B !default;
$online-color: #1A9707 !default;
$error-color: #D24E2B !default;
$moderator-color: $dark-red !default;
$online-color: $green !default;
$error-color: $darkest-red !default;
$button-border-radius: 5px !default;
$chatbox-border-radius: 7px !default;
@ -88,11 +112,11 @@ $small-mobile-chat-height: 300px !default;
$font-path: "../fonticons/fonts/" !default;
$chatroom-width: 300px !default;
$chatroom-head-color: #E76F51 !default;
$chatroom-color-light: #FF977C !default;
$chatroom-color-dark: #D24E2B !default;
$chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default;
$chatroom-color-dark: $darkest-red !default;
$headline-head-color: #2A9D8F !default;
$headline-head-color: $green !default;
$box-close-button-padding-top: 4px !default;
$box-close-button-padding-bottom: 4px !default;