Update mockups and tweak margin for chatroom in responsive mode
This commit is contained in:
parent
d0387a65ca
commit
e487fe4e54
138
css/converse.css
138
css/converse.css
|
@ -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
177
css/inverse.css
|
@ -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 {
|
||||
|
|
|
@ -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>
|
||||
|
||||
|
|
|
@ -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=""jc"">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: </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
|
||||
<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>
|
||||
|
|
|
@ -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"> </a>
|
||||
<a href="#" class="fa fa-bookmark" title="Click to bookmark this room"> </a>
|
||||
<a href="#" class="fa fa-times" title="Click to leave this room"> </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"> </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"> </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>
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
#converse-embedded-chat,
|
||||
#conversejs.converse-embedded,
|
||||
#conversejs {
|
||||
.add-chatroom {
|
||||
input[type="submit"],
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
#conversejs.fullscreen {
|
||||
#conversejs.converse-fullscreen,
|
||||
#conversejs.converse-mobile {
|
||||
|
||||
.chat-head-chatroom {
|
||||
height: $chatroom-head-height;
|
||||
|
|
|
@ -36,7 +36,6 @@
|
|||
@import "bootstrap/scss/popover";
|
||||
@import "bootstrap/scss/utilities";
|
||||
}
|
||||
@import "../fonts";
|
||||
@import "../core";
|
||||
@import "core";
|
||||
@import "../profile";
|
||||
|
|
Loading…
Reference in New Issue
Block a user