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

Update mockups and tweak margin for chatroom in responsive mode

Browse Source
This commit is contained in:
JC Brand 2018-04-24 18:22:44 +02:00
parent d0387a65ca
commit e487fe4e54
9 changed files with 284 additions and 220 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
css/converse.css
View File

@ -8047,6 +8047,8 @@ body.reset {
#conversejs .converse-chatboxes .converse-chatroom {
font-size: 14px; }
#conversejs .converse-chatboxes .chatbox .box-flyout {
top: -100vh;
margin-left: 15px;
left: 0;
bottom: 0;
border-radius: 0;
@ -8229,44 +8231,44 @@ body.reset {
line-height: 16px;
width: 100%; }
#converse-embedded-chat .add-chatroom input[type="submit"],
#converse-embedded-chat .add-chatroom input[type="button"],
#conversejs.converse-embedded .add-chatroom input[type="submit"],
#conversejs.converse-embedded .add-chatroom input[type="button"],
#conversejs .add-chatroom input[type="submit"],
#conversejs .add-chatroom input[type="button"] {
margin: 0.3em 0; }
#converse-embedded-chat .chat-head-chatroom,
#conversejs.converse-embedded .chat-head-chatroom,
#conversejs .chat-head-chatroom {
background-color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chatroom-topic,
#conversejs.converse-embedded .chat-head-chatroom .chatroom-topic,
#conversejs .chat-head-chatroom .chatroom-topic {
white-space: nowrap;
overflow-y: hidden;
text-overflow: ellipsis; }
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs .chat-head-chatroom a.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
color: white; }
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
#conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
#conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on:before,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before,
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before,
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on:before,
#conversejs.converse-embedded .chat-head-chatroom .chatbox-btn.button-on:before,
#conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chat-title,
#conversejs.converse-embedded .chat-head-chatroom .chat-title,
#conversejs .chat-head-chatroom .chat-title {
color: #FF977C; }
#converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-name,
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-name,
#conversejs .chat-head-chatroom .chat-title .chatroom-name {
color: white; }
#converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
font-size: 12px; }
#converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-description,
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-description,
#conversejs .chat-head-chatroom .chat-title .chatroom-description {
color: white;
font-size: 80%;
@ -8275,35 +8277,35 @@ body.reset {
text-overflow: ellipsis;
white-space: nowrap;
margin: 0.3em 0; }
#converse-embedded-chat .chatroom,
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
width: 400px; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .chatroom,
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
width: 100%; } }
@media screen and (max-width: 480px) {
#converse-embedded-chat .chatroom,
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
width: 100%; } }
#converse-embedded-chat .chatroom .box-flyout,
#conversejs.converse-embedded .chatroom .box-flyout,
#conversejs .chatroom .box-flyout {
overflow-y: hidden;
background-color: #E77051;
width: 100%; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .chatroom .box-flyout,
#conversejs.converse-embedded .chatroom .box-flyout,
#conversejs .chatroom .box-flyout {
height: 400px;
width: 100%;
height: 100vh; } }
@media screen and (max-width: 480px) {
#converse-embedded-chat .chatroom .box-flyout,
#conversejs.converse-embedded .chatroom .box-flyout,
#conversejs .chatroom .box-flyout {
height: 400px;
width: 100%;
height: 100vh; } }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body {
flex-direction: row;
flex-flow: nowrap;
@ -8313,60 +8315,60 @@ body.reset {
border-top: 0;
width: 100%;
overflow: hidden; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .row,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .row,
#conversejs .chatroom .box-flyout .chatroom-body .row {
flex-direction: row; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-topic,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-topic,
#conversejs .chatroom .box-flyout .chatroom-body .chat-topic {
font-weight: bold;
color: #E77051; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
color: #E77051;
line-height: normal; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info.badge,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info.badge,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info.badge {
color: white; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message.onload,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message.onload,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
color: #3AA569; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
background: #E77051; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
background: #578EA9; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
padding: 2em 2em 0 2em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
display: flex;
flex-direction: column;
word-wrap: break-word;
min-width: 250px; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
background-color: #E77051;
max-width: 70%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
height: 100%;
padding: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
min-width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
min-width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants,
#conversejs .chatroom .box-flyout .chatroom-body .occupants {
display: flex;
flex-direction: column;
@ -8378,48 +8380,48 @@ body.reset {
border-left: 1px solid #777;
border-bottom-right-radius: 4px;
padding: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
padding: 0.3em 0;
font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
float: left;
margin-right: 0.5em;
padding-right: 0;
font-size: 1em;
cursor: help; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
padding: 0; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
padding: .5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
padding: 0.5em 0 0 0;
margin-bottom: 0.5em;
overflow-x: hidden;
overflow-y: auto;
list-style: none; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
overflow-y: auto;
flex-basis: 0;
flex-grow: 1; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
padding-top: 0; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature {
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa {
color: #777; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
cursor: default;
display: block;
@ -8428,41 +8430,41 @@ body.reset {
padding: 0.2em 0.5em 0.2em 0;
text-overflow: ellipsis;
white-space: nowrap; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li .fa {
margin-right: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
font-size: 10px; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant {
cursor: pointer; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
display: inline-block;
margin-right: 0.5em;
width: 0.5em;
height: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat {
background-color: #1A9707; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd {
background-color: red; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away {
background-color: darkorange; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa {
background-color: orange; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
color: #D24E2B; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.visitor,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.visitor,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.visitor {
color: #A8ABA1; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
background-color: white;
border-bottom-left-radius: 4px;
@ -8474,44 +8476,44 @@ body.reset {
width: 100%;
overflow-y: auto;
position: absolute; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
#conversejs.converse-embedded .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: #A53214; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
height: 100%;
width: 100%;
margin-top: 2em; }
#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.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#conversejs.converse-embedded .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,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
display: block; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
margin: 0 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
#conversejs.converse-embedded .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 .sendXMPPMessage .chat-toolbar,
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar {
background-color: white;
border-top: 8px solid #E77051;
color: #E77051; }
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa:hover {
color: #E77051; }
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-textarea,
#conversejs .chatroom .sendXMPPMessage .chat-textarea {
border-bottom-right-radius: 0; }
#converse-embedded-chat .chatroom .sendXMPPMessage .send-button,
#conversejs.converse-embedded .chatroom .sendXMPPMessage .send-button,
#conversejs .chatroom .sendXMPPMessage .send-button {
background-color: #E77051; }
#converse-embedded-chat .chatroom .room-invite .invited-contact,
#conversejs.converse-embedded .chatroom .room-invite .invited-contact,
#conversejs .chatroom .room-invite .invited-contact {
margin: -1px 0 0 -1px;
width: 100%;

177
css/inverse.css
View File

@ -8122,6 +8122,8 @@ body {
#conversejs .converse-chatboxes .converse-chatroom {
font-size: 14px; }
#conversejs .converse-chatboxes .chatbox .box-flyout {
top: -100vh;
margin-left: 15px;
left: 0;
bottom: 0;
border-radius: 0;
@ -8372,44 +8374,44 @@ body {
#conversejs.fullscreen #controlbox #chatrooms .bookmarks-list dl.rooms-list.bookmarks dd.available-chatroom a.open-room {
width: 80%; }
#converse-embedded-chat .add-chatroom input[type="submit"],
#converse-embedded-chat .add-chatroom input[type="button"],
#conversejs.converse-embedded .add-chatroom input[type="submit"],
#conversejs.converse-embedded .add-chatroom input[type="button"],
#conversejs .add-chatroom input[type="submit"],
#conversejs .add-chatroom input[type="button"] {
margin: 0.3em 0; }
#converse-embedded-chat .chat-head-chatroom,
#conversejs.converse-embedded .chat-head-chatroom,
#conversejs .chat-head-chatroom {
background-color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chatroom-topic,
#conversejs.converse-embedded .chat-head-chatroom .chatroom-topic,
#conversejs .chat-head-chatroom .chatroom-topic {
white-space: nowrap;
overflow-y: hidden;
text-overflow: ellipsis; }
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa,
#conversejs .chat-head-chatroom a.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa,
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa {
color: white; }
#converse-embedded-chat .chat-head-chatroom a.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
#conversejs.converse-embedded .chat-head-chatroom a.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before, #conversejs.converse-embedded .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before,
#conversejs .chat-head-chatroom a.chatbox-btn.fa.button-on:before,
#conversejs .chat-head-chatroom a:visited.chatbox-btn.fa.button-on:before,
#conversejs .chat-head-chatroom a:hover.chatbox-btn.fa.button-on:before,
#conversejs .chat-head-chatroom a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on:before,
#conversejs.converse-embedded .chat-head-chatroom .chatbox-btn.button-on:before,
#conversejs .chat-head-chatroom .chatbox-btn.button-on:before {
color: #E77051; }
#converse-embedded-chat .chat-head-chatroom .chat-title,
#conversejs.converse-embedded .chat-head-chatroom .chat-title,
#conversejs .chat-head-chatroom .chat-title {
color: #FF977C; }
#converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-name,
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-name,
#conversejs .chat-head-chatroom .chat-title .chatroom-name {
color: white; }
#converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
font-size: 14px; }
#converse-embedded-chat .chat-head-chatroom .chat-title .chatroom-description,
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-description,
#conversejs .chat-head-chatroom .chat-title .chatroom-description {
color: white;
font-size: 80%;
@ -8418,35 +8420,35 @@ body {
text-overflow: ellipsis;
white-space: nowrap;
margin: 0.3em 0; }
#converse-embedded-chat .chatroom,
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
width: 300px; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .chatroom,
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
width: 100%; } }
@media screen and (max-width: 480px) {
#converse-embedded-chat .chatroom,
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
width: 100%; } }
#converse-embedded-chat .chatroom .box-flyout,
#conversejs.converse-embedded .chatroom .box-flyout,
#conversejs .chatroom .box-flyout {
overflow-y: hidden;
background-color: #E77051;
width: 100%; }
@media screen and (max-height: 450px) {
#converse-embedded-chat .chatroom .box-flyout,
#conversejs.converse-embedded .chatroom .box-flyout,
#conversejs .chatroom .box-flyout {
height: 400px;
width: 100%;
height: 100vh; } }
@media screen and (max-width: 480px) {
#converse-embedded-chat .chatroom .box-flyout,
#conversejs.converse-embedded .chatroom .box-flyout,
#conversejs .chatroom .box-flyout {
height: 400px;
width: 100%;
height: 100vh; } }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body {
flex-direction: row;
flex-flow: nowrap;
@ -8456,60 +8458,60 @@ body {
border-top: 0;
width: 100%;
overflow: hidden; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .row,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .row,
#conversejs .chatroom .box-flyout .chatroom-body .row {
flex-direction: row; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-topic,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-topic,
#conversejs .chatroom .box-flyout .chatroom-body .chat-topic {
font-weight: bold;
color: #E77051; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info {
color: #E77051;
line-height: normal; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-info.badge,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-info.badge,
#conversejs .chatroom .box-flyout .chatroom-body .chat-info.badge {
color: white; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .mentioned,
#conversejs .chatroom .box-flyout .chatroom-body .mentioned {
font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message.onload,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message.onload,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message.onload {
animation: colorchange-chatmessage-muc 1s;
-webkit-animation: colorchange-chatmessage-muc 1s; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them {
color: #3AA569; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-them canvas {
background: #E77051; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas,
#conversejs .chatroom .box-flyout .chatroom-body .chat-message .chat-msg-me canvas {
background: #578EA9; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .disconnect-msg,
#conversejs .chatroom .box-flyout .chatroom-body .disconnect-msg {
padding: 2em 2em 0 2em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
display: flex;
flex-direction: column;
word-wrap: break-word;
min-width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
background-color: #E77051;
max-width: 70%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
height: 100%;
padding: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
min-width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
min-width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants,
#conversejs .chatroom .box-flyout .chatroom-body .occupants {
display: flex;
flex-direction: column;
@ -8521,48 +8523,48 @@ body {
border-left: 1px solid #777;
border-bottom-right-radius: 4px;
padding: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
padding: 0.3em 0;
font-weight: bold; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features {
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .chatroom-features .feature {
float: left;
margin-right: 0.5em;
padding-right: 0;
font-size: 1em;
cursor: help; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul {
padding: 0; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .awesomplete ul li {
padding: .5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul {
padding: 0.5em 0 0 0;
margin-bottom: 0.5em;
overflow-x: hidden;
overflow-y: auto;
list-style: none; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list {
overflow-y: auto;
flex-basis: 0;
flex-grow: 1; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list {
padding-top: 0; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature {
width: 100%; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul.features-list .feature .fa {
color: #777; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
cursor: default;
display: block;
@ -8571,41 +8573,41 @@ body {
padding: 0.2em 0.5em 0.2em 0;
text-overflow: ellipsis;
white-space: nowrap; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li .fa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li .fa {
margin-right: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.feature,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.feature {
font-size: 10px; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant {
cursor: pointer; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status {
display: inline-block;
margin-right: 0.5em;
width: 0.5em;
height: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-online,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-chat {
background-color: #1A9707; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-dnd {
background-color: red; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-away {
background-color: darkorange; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.occupant .occupant-status.occupant-xa {
background-color: orange; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.moderator,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.moderator {
color: #E77051; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants ul li.visitor,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants ul li.visitor,
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li.visitor {
color: #A8ABA1; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
background-color: white;
border-bottom-left-radius: 4px;
@ -8617,82 +8619,95 @@ body {
width: 100%;
overflow-y: auto;
position: absolute; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .validation-message,
#conversejs.converse-embedded .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: #A53214; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form {
height: 100%;
width: 100%;
margin-top: 2em; }
#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.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form label,
#conversejs.converse-embedded .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,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container .chatroom-form input[type=text] {
display: block; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=button],
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container input[type=submit] {
margin: 0 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container .button-primary,
#conversejs.converse-embedded .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 .sendXMPPMessage .chat-toolbar,
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar {
background-color: white;
border-top: 8px solid #E77051;
color: #E77051; }
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa, #conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-toolbar .fa:hover,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa,
#conversejs .chatroom .sendXMPPMessage .chat-toolbar .fa:hover {
color: #E77051; }
#converse-embedded-chat .chatroom .sendXMPPMessage .chat-textarea,
#conversejs.converse-embedded .chatroom .sendXMPPMessage .chat-textarea,
#conversejs .chatroom .sendXMPPMessage .chat-textarea {
border-bottom-right-radius: 0; }
#converse-embedded-chat .chatroom .sendXMPPMessage .send-button,
#conversejs.converse-embedded .chatroom .sendXMPPMessage .send-button,
#conversejs .chatroom .sendXMPPMessage .send-button {
background-color: #E77051; }
#converse-embedded-chat .chatroom .room-invite .invited-contact,
#conversejs.converse-embedded .chatroom .room-invite .invited-contact,
#conversejs .chatroom .room-invite .invited-contact {
margin: -1px 0 0 -1px;
width: 100%;
border: 1px solid #999; }
#conversejs.fullscreen .chat-head-chatroom {
#conversejs.converse-fullscreen .chat-head-chatroom,
#conversejs.converse-mobile .chat-head-chatroom {
height: 62px;
font-size: 20px; }
#conversejs.fullscreen .chat-head-chatroom .chat-title .chatroom-description {
#conversejs.converse-fullscreen .chat-head-chatroom .chat-title .chatroom-description,
#conversejs.converse-mobile .chat-head-chatroom .chat-title .chatroom-description {
font-size: 65%; }
#conversejs.fullscreen .chatroom .box-flyout {
#conversejs.converse-fullscreen .chatroom .box-flyout,
#conversejs.converse-mobile .chatroom .box-flyout {
background-color: #E77051;
border: 1.2em solid #E77051;
border-top: 0.8em solid #E77051;
width: 100%; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body {
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body {
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container {
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chatroom-form-container {
border-radius: 4px; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area {
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area {
border-top-left-radius: 4px;
min-width: auto; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
border-top-left-radius: 4px;
padding: 0 1em 1em 1em; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full {
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full {
max-width: 100%; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
max-width: 100%; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants {
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants {
border-top-right-radius: 4px;
padding: 1em; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
font-size: 18px; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
font-size: 14px; }
#conversejs.fullscreen .chatroom .room-invite span .invited-contact {
#conversejs.converse-fullscreen .chatroom .room-invite span .invited-contact,
#conversejs.converse-mobile .chatroom .room-invite span .invited-contact {
margin: 0 0 0.5em -1px; }
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {

8
mockup/chatbox.html
View File

@ -36,11 +36,9 @@
</div>
</div>
</div>
<div class="col-3">
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
</div>
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
</div>
</div>

146
mockup/chatroom.html
View File

@ -9,7 +9,7 @@
</head>
<body class="reset">
<div id="conversejs" class="fullscreen">
<div id="conversejs" class="fullscreen converse-fullscreen">
<div class="sidebar"></div>
<div class="converse-chatboxes row no-gutters">
<div id="controlbox" class="chatbox">
@ -27,18 +27,22 @@
<div class="chat-title">Chatroom with a very long name</div>
<p class="chatroom-topic">May the force be with you</p>
</div>
<div class="col-sm-3 col-lg-2">
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-minus"></a>
<a class="chatbox-btn fa fa-close"></a>
<a class="chatbox-btn fa fa-wrench"></a>
</div>
<div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-minus"></a>
<a class="chatbox-btn fa fa-close"></a>
<a class="chatbox-btn fa fa-wrench"></a>
</div>
</div>
<div class="chat-body chatroom-body row no-gutters">
<div class="chat-area col-md-9 col-8">
<div class="chat-content">
<time class="message chat-info chat-date badge badge-info" data-isodate="2018-04-24T00:00:00+02:00">Tuesday Apr 24th 2018</time>
<div class="message chat-info chat-event" data-isodate="2018-04-24T18:07:24+02:00" data-join="&quot;jc&quot;">jc has entered the room</div><div class="message chat-message " data-isodate="2018-04-24T18:07:26+02:00" data-msgid="4fb4d101-8124-4f2a-8dfb-2615896b8316">
<span class="chat-msg-author chat-msg-me">18:07 me:&nbsp;</span>
<span class="chat-msg-content">ee</span>
<div class="chat-msg-media"></div>
</div>
<div class="chat-message">
<span class="chat-msg-author chat-msg-room">18:50&nbsp;
<canvas height="24" width="24" class="avatar"></canvas>
@ -101,50 +105,92 @@
</form>
<ul class="occupant-list">
<li class="moderator occupant" title="This user is a moderator. Click to mention luke in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>luke</li>
<li class="moderator occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Admiral Ackbar</li>
<li class="moderator occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Padmé Amidala</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>leia</li>
<li class="participant occupant" title="Click to mention Obi-wan Kenobi, Jedi Master in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-wan Kenobi, Jedi Master</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<li class="participant occupant" title="Click to mention jabber the hut in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>jabber the hut</li>
<div class="occupant-status occupant-online circle" title="Online"></div>Jar Jar Binks</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-away circle" title="Away"></div>C-3PO</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Chewbacca</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Count Dooku</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Boba Fett</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Jabba the Hutt</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Mara Jade</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Queen Jamillia</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Jerec</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Moff Jerjerrod</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Qui-Gon Jinn</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Captain Kael</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Kir Kanos</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Talon Karrde</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Obi-Wan Kenobi</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Darth Maul</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Princess Leia Organa</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Emperor Palpatine</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>R2-D2</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>R5-D4</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Darth Sidious</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Anakin Skywalker</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Luke Skywalker</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Han Solo</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>TC-14</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Booster Terrik</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Mirax Terrik</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Mod Terrik</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Tessek</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Darth Vader</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Supreme Chancellor Finis Valorum</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Nahdar Vebb</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>General Maximilian Veers</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Tahiri Veila</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Asajj Ventress</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Vergere</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>King Veruna</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Vima-Da-Boda</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Quinlan Vos</li>
<li class="participant occupant" title="Click to mention leia in your message.">
<div class="occupant-status occupant-online circle" title="Online"></div>Yoda</li>
</ul>
<div class="chatroom-features">
<p class="occupants-heading">Features</p>

26
mockup/user-panel.html
View File

@ -1,7 +1,7 @@
<!-- <div id="users" class="controlbox-pane"> -->
<div class="userinfo">
<div class="d-flex">
<canvas height="20" width="20" class="avatar align-self-center"></canvas>
<div class="profile d-flex">
<canvas height="40px" width="40px" class="avatar align-self-center"></canvas>
<span class="username w-100 align-self-center">Walter White</span>
<!-- <a class="chatbox-btn fa fa-vcard align-self-center" title="Your profile" data-toggle="modal" data-target="#userProfileModal"></a> -->
<!-- <a class="chatbox-btn fa fa-cog align-self-center" title="Change settings" data-toggle="modal" data-target="#settingsModal"></a> -->
@ -23,19 +23,19 @@
<div class="rooms-list">
<div class="available-chatroom d-flex flex-row">
<span class="badge badge-info msgs-indicator">1</span>
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="#">public</a>
<a class="open-room available-room w-100" data-room-jid="public@conference.test.com" title="Click to open this room" href="chatroom.html">public</a>
<a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>public@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room">&nbsp;</a>
<a href="#" class="fa fa-times" title="Click to leave this room">&nbsp;</a>
</div>
<div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="#">team</a>
<a class="open-room available-room w-100" data-room-jid="team@conference.test.com" title="Click to open this room" href="chatroom.html">team</a>
<a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>team@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
</div>
<div class="available-chatroom d-flex flex-row">
<a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="#">test</a>
<a class="open-room available-room w-100" data-room-jid="test@conference.test.com" title="Click to open this room" href="chatroom.html">test</a>
<a href="#" class="room-info fa fa-info-circle" data-container="body" data-toggle="popover" title="Room info"
data-html="true" data-content="<b>Room Address (JID): </b><br>test@conference.test.com<br><b>Discussions: </b><br>Public discussions<br><b>Participants: </b>1<br><b>Features: </b><br>Non-anonymous">&nbsp;</a>
</div>
@ -86,17 +86,17 @@
<ul>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Victor Matfield</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle-o" title="this contact is away"></span> William Winterbottom</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="dnd current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-minus-circle" title="This contact is busy"></span> Gary Teichmann</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
@ -108,12 +108,12 @@
<span class="fa fa-caret-down"></span> Family</a>
<ul>
<li class="away current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle-o" title="this contact is away"></span> Allan Donald</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="offline current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-times-circle" title="This contact is offline"></span> Corné Krige</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
@ -125,12 +125,12 @@
<span class="fa fa-caret-down"></span> Friends</a>
<ul>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> John Smit</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> Bakkies Botha</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>
@ -142,7 +142,7 @@
<span class="fa fa-caret-down"></span> Ungrouped</a>
<ul>
<li class="online current-xmpp-contact d-flex">
<a class="open-chat w-100" title="Click to chat with this contact" href="#">
<a class="open-chat w-100" title="Click to chat with this contact" href="chatbox.html">
<span class="fa fa-circle" title="This contact is online"></span> James Small</a>
<a class="remove-xmpp-contact fa fa-trash" title="Click to remove this contact" href="#"></a>
</li>

2
sass/_chatrooms.scss
View File

@ -1,4 +1,4 @@
#converse-embedded-chat,
#conversejs.converse-embedded,
#conversejs {
.add-chatroom {
input[type="submit"],

3
sass/_controlbox.scss
View File

@ -449,6 +449,9 @@
.chatbox {
.box-flyout {
top: -100vh;
margin-left: 15px; // Counteracts Bootstrap margins, but
// not clear why needed...
left: 0;
bottom: 0;
border-radius: 0;

3
sass/inverse/_chatrooms.scss
View File

@ -1,4 +1,5 @@
#conversejs.fullscreen {
#conversejs.converse-fullscreen,
#conversejs.converse-mobile {
.chat-head-chatroom {
height: $chatroom-head-height;

1
sass/inverse/inverse.scss
View File

@ -36,7 +36,6 @@
@import "bootstrap/scss/popover";
@import "bootstrap/scss/utilities";
}
@import "../fonts";
@import "../core";
@import "core";
@import "../profile";