Skip to content

C
converse.js
Commit ee46b0cc authored by JC Brand's avatar JC Brand
Browse files
Options

CSS fixes to embedded chat 

* Don't change styling based on media queries
* Fix offsets so that an embedded chat fits properly inside container element
parent a1519297
Show whitespace changes
Inline Side-by-side
Showing with 66 additions and 286 deletions
css/converse.css
View file @ ee46b0cc
...@@ -7068,7 +7068,7 @@ body.reset { ...@@ -7068,7 +7068,7 @@ body.reset {
text-align: center; text-align: center;
width: 100%; } width: 100%; }
#conversejs .avatar { #conversejs .avatar {
border-radius: 25%; } border-radius: 10%; }
#conversejs .activated { #conversejs .activated {
display: block !important; } display: block !important; }
#conversejs .button-primary { #conversejs .button-primary {
...@@ -7135,9 +7135,9 @@ body.reset { ...@@ -7135,9 +7135,9 @@ body.reset {
body .brand-heading { body .brand-heading {
font-size: 3.75em; } font-size: 3.75em; }
#conversejs .chatbox .chat-body { #conversejs:not(.converse-embedded) .chatbox .chat-body {
border-radius: 4px; } border-radius: 4px; }
#conversejs .flyout { #conversejs:not(.converse-embedded) .flyout {
border-radius: 4px; } } border-radius: 4px; } }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
#conversejs .offset-sm-2 { #conversejs .offset-sm-2 {
...@@ -7166,28 +7166,22 @@ body.reset { ...@@ -7166,28 +7166,22 @@ body.reset {
#conversejs #user-profile-modal label { #conversejs #user-profile-modal label {
font-weight: bold; } font-weight: bold; }
#converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
border-radius: 4px; border-radius: 4px;
bottom: 1em; bottom: 1em;
position: absolute; } position: absolute; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
border-radius: 0; } } border-radius: 0; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
border-radius: 0; } } border-radius: 0; } }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
bottom: 0; } } bottom: 0; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
bottom: 0; } } bottom: 0; } }
#converse-embedded-chat .chatbox-btn,
#conversejs .chatbox-btn { #conversejs .chatbox-btn {
border-radius: 25%; border-radius: 25%;
border: none; border: none;
...@@ -7196,11 +7190,9 @@ body.reset { ...@@ -7196,11 +7190,9 @@ body.reset {
margin: 0 0.2em; margin: 0 0.2em;
padding: 0 0 0 0.5em; padding: 0 0 0 0.5em;
text-decoration: none; } text-decoration: none; }
#converse-embedded-chat .chatbox-btn:active,
#conversejs .chatbox-btn:active { #conversejs .chatbox-btn:active {
position: relative; position: relative;
top: 1px; } top: 1px; }
#converse-embedded-chat .chat-head,
#conversejs .chat-head { #conversejs .chat-head {
flex-wrap: nowrap; flex-wrap: nowrap;
color: #ffffff; color: #ffffff;
...@@ -7209,13 +7201,10 @@ body.reset { ...@@ -7209,13 +7201,10 @@ body.reset {
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
position: relative; } position: relative; }
#converse-embedded-chat .chat-head.chat-head-chatbox,
#conversejs .chat-head.chat-head-chatbox { #conversejs .chat-head.chat-head-chatbox {
background-color: #3AA569; } background-color: #3AA569; }
#converse-embedded-chat .chat-head .avatar,
#conversejs .chat-head .avatar { #conversejs .chat-head .avatar {
margin-right: 0.5em; } margin-right: 0.5em; }
#converse-embedded-chat .chat-head .chatbox-buttons,
#conversejs .chat-head .chatbox-buttons { #conversejs .chat-head .chatbox-buttons {
flex-direction: row-reverse; flex-direction: row-reverse;
position: relative; position: relative;
...@@ -7226,7 +7215,6 @@ body.reset { ...@@ -7226,7 +7215,6 @@ body.reset {
flex: 0 0 25%; flex: 0 0 25%;
max-width: 25%; max-width: 25%;
padding: 0; } padding: 0; }
#converse-embedded-chat .chat-head .user-custom-message,
#conversejs .chat-head .user-custom-message { #conversejs .chat-head .user-custom-message {
color: white; color: white;
font-size: 75%; font-size: 75%;
...@@ -7236,53 +7224,36 @@ body.reset { ...@@ -7236,53 +7224,36 @@ body.reset {
white-space: nowrap; white-space: nowrap;
margin: 0; margin: 0;
padding-top: 0.2em; } padding-top: 0.2em; }
#converse-embedded-chat .chat-head a.chatbox-btn.fa, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa, #conversejs .chat-head a.chatbox-btn.fa, #conversejs .chat-head a:visited.chatbox-btn.fa, #conversejs .chat-head a:hover.chatbox-btn.fa, #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
#conversejs .chat-head a.chatbox-btn.fa,
#conversejs .chat-head a:visited.chatbox-btn.fa,
#conversejs .chat-head a:hover.chatbox-btn.fa,
#conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
color: white; } color: white; }
#converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before, #conversejs .chat-head a.chatbox-btn.fa.button-on:before, #conversejs .chat-head a:visited.chatbox-btn.fa.button-on:before, #conversejs .chat-head a:hover.chatbox-btn.fa.button-on:before, #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
#conversejs .chat-head a.chatbox-btn.fa.button-on:before,
#conversejs .chat-head a:visited.chatbox-btn.fa.button-on:before,
#conversejs .chat-head a:hover.chatbox-btn.fa.button-on:before,
#conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
padding: 0.2em; padding: 0.2em;
background-color: white; background-color: white;
color: #3AA569; } color: #3AA569; }
#converse-embedded-chat .chat-head .chatbox-btn,
#conversejs .chat-head .chatbox-btn { #conversejs .chat-head .chatbox-btn {
color: white; } color: white; }
#converse-embedded-chat .chat-head .chatbox-btn.fa,
#conversejs .chat-head .chatbox-btn.fa { #conversejs .chat-head .chatbox-btn.fa {
color: white; } color: white; }
#converse-embedded-chat .chat-head .chatbox-btn:active,
#conversejs .chat-head .chatbox-btn:active { #conversejs .chat-head .chatbox-btn:active {
position: relative; position: relative;
top: 1px; } top: 1px; }
#converse-embedded-chat .chat-head .chatbox-btn.button-on:before,
#conversejs .chat-head .chatbox-btn.button-on:before { #conversejs .chat-head .chatbox-btn.button-on:before {
border-radius: 5%; border-radius: 5%;
background-color: white; background-color: white;
color: #3AA569; } color: #3AA569; }
#converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
text-align: left; text-align: left;
margin: 0 0.5em; } margin: 0 0.5em; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
margin: 0; margin: 0;
width: 100%; } } width: 100%; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
margin: 0; margin: 0;
width: 100%; } } width: 100%; } }
#converse-embedded-chat .chatbox .spoiler,
#conversejs .chatbox .spoiler { #conversejs .chatbox .spoiler {
background-color: #e7f7ee; } background-color: #e7f7ee; }
#converse-embedded-chat .chatbox .box-flyout,
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -7295,18 +7266,15 @@ body.reset { ...@@ -7295,18 +7266,15 @@ body.reset {
overflow-y: scroll; overflow-y: scroll;
width: 100%; } width: 100%; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox .box-flyout,
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
height: 400px; height: 400px;
width: 100%; width: 100%;
height: 100vh; } } height: 100vh; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .chatbox .box-flyout,
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
height: 400px; height: 400px;
width: 100%; width: 100%;
height: 100vh; } } height: 100vh; } }
#converse-embedded-chat .chatbox .chat-title,
#conversejs .chatbox .chat-title { #conversejs .chatbox .chat-title {
color: white; color: white;
display: block; display: block;
...@@ -7314,11 +7282,9 @@ body.reset { ...@@ -7314,11 +7282,9 @@ body.reset {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
#converse-embedded-chat .chatbox .chat-title a,
#conversejs .chatbox .chat-title a { #conversejs .chatbox .chat-title a {
color: white; color: white;
width: 100%; } width: 100%; }
#converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -7329,94 +7295,70 @@ body.reset { ...@@ -7329,94 +7295,70 @@ body.reset {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-top: 0; } border-top: 0; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; } } border-bottom-right-radius: 0; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; } } border-bottom-right-radius: 0; } }
#converse-embedded-chat .chatbox .chat-body p,
#conversejs .chatbox .chat-body p { #conversejs .chatbox .chat-body p {
color: #777; color: #777;
font-size: 14px; font-size: 14px;
margin: 0; margin: 0;
padding: 5px; } padding: 5px; }
#converse-embedded-chat .chatbox .chat-body .message,
#conversejs .chatbox .chat-body .message { #conversejs .chatbox .chat-body .message {
margin: 0.5em 0; } margin: 0.5em 0; }
#converse-embedded-chat .chatbox .chat-body .chat-info,
#conversejs .chatbox .chat-body .chat-info { #conversejs .chatbox .chat-body .chat-info {
line-height: 14px; line-height: 14px;
color: #3AA569; color: #3AA569;
font-size: 12px; } font-size: 12px; }
#converse-embedded-chat .chatbox .chat-body .chat-info.badge,
#conversejs .chatbox .chat-body .chat-info.badge { #conversejs .chatbox .chat-body .chat-info.badge {
color: white; } color: white; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-state-notification,
#conversejs .chatbox .chat-body .chat-info.chat-state-notification { #conversejs .chatbox .chat-body .chat-info.chat-state-notification {
font-style: italic; } font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
#conversejs .chatbox .chat-body .chat-info.chat-event { #conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left; clear: left;
font-style: italic; } font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-error,
#conversejs .chatbox .chat-body .chat-info.chat-error { #conversejs .chatbox .chat-body .chat-info.chat-error {
color: #D24E2B; color: #D24E2B;
font-weight: bold; } font-weight: bold; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-date,
#conversejs .chatbox .chat-body .chat-info.chat-date { #conversejs .chatbox .chat-body .chat-info.chat-date {
display: inline-block; display: inline-block;
margin-top: 1em; } margin-top: 1em; }
#converse-embedded-chat .chatbox .chat-body .chat-image,
#conversejs .chatbox .chat-body .chat-image { #conversejs .chatbox .chat-body .chat-image {
height: auto; height: auto;
width: auto; width: auto;
max-height: 24em; max-height: 24em;
max-width: 100%; } max-width: 100%; }
#converse-embedded-chat .chatbox .chat-body .chat-action,
#conversejs .chatbox .chat-body .chat-action { #conversejs .chatbox .chat-body .chat-action {
font-style: italic; } font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message { #conversejs .chatbox .chat-body .chat-message {
overflow: auto; } overflow: auto; }
#converse-embedded-chat .chatbox .chat-body .chat-message.onload,
#conversejs .chatbox .chat-body .chat-message.onload { #conversejs .chatbox .chat-body .chat-message.onload {
animation: colorchange-chatmessage 1s; animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; } -webkit-animation: colorchange-chatmessage 1s; }
#converse-embedded-chat .chatbox .chat-body .chat-message canvas,
#conversejs .chatbox .chat-body .chat-message canvas { #conversejs .chatbox .chat-body .chat-message canvas {
vertical-align: middle; vertical-align: middle;
background: #818479; } background: #818479; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author { #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
font-weight: bold; } font-weight: bold; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
#conversejs .chatbox .chat-body .chat-message .chat-msg-them { #conversejs .chatbox .chat-body .chat-message .chat-msg-them {
color: #3AA569; } color: #3AA569; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me,
#conversejs .chatbox .chat-body .chat-message .chat-msg-me { #conversejs .chatbox .chat-body .chat-message .chat-msg-me {
color: #578EA9; } color: #578EA9; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content { #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
max-width: 100%; max-width: 100%;
word-wrap: break-word; } word-wrap: break-word; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content.spoiler,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler { #conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler {
border-radius: 4px; border-radius: 4px;
padding: 0.5em; } padding: 0.5em; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione { #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -6px; } margin-bottom: -6px; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
#conversejs .chatbox .chat-body .delayed .chat-msg-them { #conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #41b875; } color: #41b875; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-me,
#conversejs .chatbox .chat-body .delayed .chat-msg-me { #conversejs .chatbox .chat-body .delayed .chat-msg-me {
color: #6899b2; } color: #6899b2; }
#converse-embedded-chat .chatbox .new-msgs-indicator,
#conversejs .chatbox .new-msgs-indicator { #conversejs .chatbox .new-msgs-indicator {
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -7428,7 +7370,6 @@ body.reset { ...@@ -7428,7 +7370,6 @@ body.reset {
text-align: center; text-align: center;
z-index: 20; z-index: 20;
white-space: nowrap; } white-space: nowrap; }
#converse-embedded-chat .chatbox .chat-content,
#conversejs .chatbox .chat-content { #conversejs .chatbox .chat-content {
height: 100%; height: 100%;
padding: 1em; padding: 1em;
...@@ -7438,30 +7379,23 @@ body.reset { ...@@ -7438,30 +7379,23 @@ body.reset {
border: 0; border: 0;
background-color: #ffffff; background-color: #ffffff;
line-height: 1.3em; } line-height: 1.3em; }
#converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
#conversejs .chatbox .chat-content .toggle-spoiler:before { #conversejs .chatbox .chat-content .toggle-spoiler:before {
padding-right: 0.25em; padding-right: 0.25em;
whitespace: nowrap; } whitespace: nowrap; }
#converse-embedded-chat .chatbox .chat-content video,
#conversejs .chatbox .chat-content video { #conversejs .chatbox .chat-content video {
width: 100%; } width: 100%; }
#converse-embedded-chat .chatbox .chat-content progress,
#conversejs .chatbox .chat-content progress { #conversejs .chatbox .chat-content progress {
margin: 0.5em 0; margin: 0.5em 0;
width: 100%; } width: 100%; }
#converse-embedded-chat .chatbox .chat-content-sendbutton,
#conversejs .chatbox .chat-content-sendbutton { #conversejs .chatbox .chat-content-sendbutton {
height: calc(100% - 93px); } height: calc(100% - 93px); }
#converse-embedded-chat .chatbox .dropdown,
#conversejs .chatbox .dropdown { #conversejs .chatbox .dropdown {
/* status dropdown styles */ /* status dropdown styles */
background-color: #FCFDFD; } background-color: #FCFDFD; }
#converse-embedded-chat .chatbox .dropdown dd,
#conversejs .chatbox .dropdown dd { #conversejs .chatbox .dropdown dd {
margin: 0; margin: 0;
padding: 0; padding: 0;
position: relative; } position: relative; }
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage { #conversejs .chatbox .sendXMPPMessage {
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
...@@ -7473,17 +7407,13 @@ body.reset { ...@@ -7473,17 +7407,13 @@ body.reset {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage { #conversejs .chatbox .sendXMPPMessage {
width: 100%; } } width: 100%; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage { #conversejs .chatbox .sendXMPPMessage {
width: 100%; } } width: 100%; } }
#converse-embedded-chat .chatbox .sendXMPPMessage .spoiler-hint,
#conversejs .chatbox .sendXMPPMessage .spoiler-hint { #conversejs .chatbox .sendXMPPMessage .spoiler-hint {
width: 100%; } width: 100%; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
#conversejs .chatbox .sendXMPPMessage .chat-textarea { #conversejs .chatbox .sendXMPPMessage .chat-textarea {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
...@@ -7495,10 +7425,8 @@ body.reset { ...@@ -7495,10 +7425,8 @@ body.reset {
min-height: 60px; min-height: 60px;
max-height: 200px; max-height: 200px;
margin-bottom: -4px; } margin-bottom: -4px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler { #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
height: 42px; } height: 42px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
#conversejs .chatbox .sendXMPPMessage .send-button { #conversejs .chatbox .sendXMPPMessage .send-button {
position: absolute; position: absolute;
left: 3px; left: 3px;
...@@ -7509,7 +7437,6 @@ body.reset { ...@@ -7509,7 +7437,6 @@ body.reset {
font-size: 80%; font-size: 80%;
height: 27px; height: 27px;
bottom: -30px; } bottom: -30px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar { #conversejs .chatbox .sendXMPPMessage .chat-toolbar {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
...@@ -7518,44 +7445,30 @@ body.reset { ...@@ -7518,44 +7445,30 @@ body.reset {
border-top: 8px solid #3AA569; border-top: 8px solid #3AA569;
background-color: white; background-color: white;
color: #3AA569; } color: #3AA569; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa:hover, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa:hover {
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa:hover {
color: #3AA569; color: #3AA569;
font-size: 16px; } font-size: 16px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted { #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
color: #777; } color: #777; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
color: #578EA9; } color: #578EA9; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified { #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified {
color: #cf5300; } color: #cf5300; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private { #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
color: #4b7003; } color: #4b7003; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants { #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants {
float: right; } float: right; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
list-style: none; list-style: none;
padding: 0 0.5em; } padding: 0 0.5em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
cursor: pointer; } cursor: pointer; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
background-color: #fff; background-color: #fff;
bottom: 2rem; bottom: 2rem;
...@@ -7566,82 +7479,59 @@ body.reset { ...@@ -7566,82 +7479,59 @@ body.reset {
right: 0; right: 0;
top: auto; top: auto;
z-index: 1000; } z-index: 1000; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu {
left: -6em; left: -6em;
min-width: 15rem; } min-width: 15rem; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu.show,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu.show { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu.show {
display: flex; display: flex;
flex-direction: column; } flex-direction: column; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; } color: #578EA9; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
height: 100px; height: 100px;
overflow: scroll; overflow: scroll;
padding: 0.5em; } padding: 0.5em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
margin-left: 0; margin-left: 0;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
position: relative; } position: relative; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
padding: 0.2em; } padding: 0.2em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a {
font-size: 20px; } font-size: 20px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover {
color: #8f2831; } color: #8f2831; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley a.toggle-smiley,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley a.toggle-smiley { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley a.toggle-smiley {
padding: 0; } padding: 0; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar {
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); } box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker {
padding-top: 0.5em; } padding-top: 0.5em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; } justify-content: space-between; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li {
padding: 0.2em; padding: 0.2em;
font-size: 20px; } font-size: 20px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
z-index: 99; } z-index: 99; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
display: block; display: block;
padding: 7px; } padding: 7px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
display: block; } display: block; }
#converse-embedded-chat .chatbox .dragresize,
#conversejs .chatbox .dragresize { #conversejs .chatbox .dragresize {
background: transparent; background: transparent;
border: 0; border: 0;
...@@ -7649,18 +7539,15 @@ body.reset { ...@@ -7649,18 +7539,15 @@ body.reset {
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 20; } z-index: 20; }
#converse-embedded-chat .chatbox .dragresize-top,
#conversejs .chatbox .dragresize-top { #conversejs .chatbox .dragresize-top {
cursor: n-resize; cursor: n-resize;
height: 5px; height: 5px;
width: 100%; } width: 100%; }
#converse-embedded-chat .chatbox .dragresize-left,
#conversejs .chatbox .dragresize-left { #conversejs .chatbox .dragresize-left {
cursor: w-resize; cursor: w-resize;
width: 5px; width: 5px;
height: 100%; height: 100%;
left: 0; } left: 0; }
#converse-embedded-chat .chatbox .dragresize-topleft,
#conversejs .chatbox .dragresize-topleft { #conversejs .chatbox .dragresize-topleft {
cursor: nw-resize; cursor: nw-resize;
width: 15px; width: 15px;
...@@ -7669,17 +7556,17 @@ body.reset { ...@@ -7669,17 +7556,17 @@ body.reset {
left: 0; } left: 0; }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs > .row { #conversejs:not(.converse-embedded) > .row {
flex-direction: row-reverse; } flex-direction: row-reverse; }
#conversejs #converse-login-panel .converse-form { #conversejs:not(.converse-embedded) #converse-login-panel .converse-form {
padding: 3em 2em 3em; } padding: 3em 2em 3em; }
#conversejs .sidebar { #conversejs:not(.converse-embedded) .sidebar {
display: block; } display: block; }
#conversejs .chatbox { #conversejs:not(.converse-embedded) .chatbox {
width: calc(100% - 50px); } width: calc(100% - 50px); }
#conversejs .chatbox .chat-body .chat-message .chat-msg-author { #conversejs:not(.converse-embedded) .chatbox .chat-body .chat-message .chat-msg-author {
white-space: normal; } white-space: normal; }
#conversejs .chatbox .row .box-flyout { #conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
left: 50px; left: 50px;
bottom: 0; bottom: 0;
height: 100vh; height: 100vh;
...@@ -7729,9 +7616,9 @@ body.reset { ...@@ -7729,9 +7616,9 @@ body.reset {
float: left; } float: left; }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
#conversejs:not(.fullscreen) > .row { #conversejs:not(.converse-fullscreen):not(.converse-embedded) > .row {
flex-direction: column; } flex-direction: column; }
#conversejs:not(.fullscreen) > .row.no-gutters { #conversejs:not(.converse-fullscreen):not(.converse-embedded) > .row.no-gutters {
margin: -1em; } } margin: -1em; } }
#conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle { #conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
color: #3AA569; } color: #3AA569; }
...@@ -8035,18 +7922,18 @@ body.reset { ...@@ -8035,18 +7922,18 @@ body.reset {
color: white; } color: white; }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
#conversejs { #conversejs:not(.converse-embedded) {
left: 0; left: 0;
right: 0; right: 0;
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); } padding-right: env(safe-area-inset-right); }
#conversejs .converse-chatboxes { #conversejs:not(.converse-embedded) .converse-chatboxes {
margin: 0 !important; margin: 0 !important;
flex-direction: row !important; flex-direction: row !important;
justify-content: space-between; } justify-content: space-between; }
#conversejs .converse-chatboxes .converse-chatroom { #conversejs:not(.converse-embedded) .converse-chatboxes .converse-chatroom {
font-size: 14px; } font-size: 14px; }
#conversejs .converse-chatboxes .chatbox .box-flyout { #conversejs:not(.converse-embedded) .converse-chatboxes .chatbox .box-flyout {
top: -100vh; top: -100vh;
margin-left: 15px; margin-left: 15px;
left: 0; left: 0;
...@@ -8054,16 +7941,16 @@ body.reset { ...@@ -8054,16 +7941,16 @@ body.reset {
border-radius: 0; border-radius: 0;
width: 100vw !important; width: 100vw !important;
height: 100vh !important; } height: 100vh !important; }
#conversejs .converse-chatboxes #controlbox { #conversejs:not(.converse-embedded) .converse-chatboxes #controlbox {
order: 0; } order: 0; }
#conversejs .converse-chatboxes #controlbox .box-flyout { #conversejs:not(.converse-embedded) .converse-chatboxes #controlbox .box-flyout {
width: 100vw !important; width: 100vw !important;
height: 100vh !important; } height: 100vh !important; }
#conversejs .converse-chatboxes #controlbox .sidebar { #conversejs:not(.converse-embedded) .converse-chatboxes #controlbox .sidebar {
display: block; } display: block; }
#conversejs .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) { #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) {
display: none; } display: none; }
#conversejs .converse-chatboxes.sidebar-open #controlbox .controlbox-pane { #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
display: block; } } display: block; } }
#conversejs:not(.fullscreen) #controlbox { #conversejs:not(.fullscreen) #controlbox {
order: -1; order: -1;
...@@ -8708,10 +8595,10 @@ body.reset { ...@@ -8708,10 +8595,10 @@ body.reset {
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
bottom: auto; bottom: auto;
right: auto; height: 100%;
position: relative; position: relative;
width: 100%; right: auto;
height: 100%; } width: 100%; }
#conversejs.converse-embedded *, #conversejs.converse-embedded *:before, #conversejs.converse-embedded *:after { #conversejs.converse-embedded *, #conversejs.converse-embedded *:before, #conversejs.converse-embedded *:after {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
...@@ -8722,6 +8609,8 @@ body.reset { ...@@ -8722,6 +8609,8 @@ body.reset {
bottom: auto; bottom: auto;
height: 100%; height: 100%;
width: 100%; } width: 100%; }
#conversejs.converse-embedded .flyout {
bottom: 0; }
#conversejs.converse-embedded .chatroom { #conversejs.converse-embedded .chatroom {
margin: 0; margin: 0;
width: 100%; } width: 100%; }
......
css/inverse.css
View file @ ee46b0cc
...@@ -7068,7 +7068,7 @@ body.reset { ...@@ -7068,7 +7068,7 @@ body.reset {
text-align: center; text-align: center;
width: 100%; } width: 100%; }
#conversejs .avatar { #conversejs .avatar {
border-radius: 25%; } border-radius: 10%; }
#conversejs .activated { #conversejs .activated {
display: block !important; } display: block !important; }
#conversejs .button-primary { #conversejs .button-primary {
...@@ -7135,9 +7135,9 @@ body.reset { ...@@ -7135,9 +7135,9 @@ body.reset {
body .brand-heading { body .brand-heading {
font-size: 3.75em; } font-size: 3.75em; }
#conversejs .chatbox .chat-body { #conversejs:not(.converse-embedded) .chatbox .chat-body {
border-radius: 4px; } border-radius: 4px; }
#conversejs .flyout { #conversejs:not(.converse-embedded) .flyout {
border-radius: 4px; } } border-radius: 4px; } }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
#conversejs .offset-sm-2 { #conversejs .offset-sm-2 {
...@@ -7219,28 +7219,22 @@ body { ...@@ -7219,28 +7219,22 @@ body {
#conversejs #user-profile-modal label { #conversejs #user-profile-modal label {
font-weight: bold; } font-weight: bold; }
#converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
border-radius: 4px; border-radius: 4px;
bottom: 6px; bottom: 6px;
position: absolute; } position: absolute; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
border-radius: 0; } } border-radius: 0; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
border-radius: 0; } } border-radius: 0; } }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
bottom: 0; } } bottom: 0; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
bottom: 0; } } bottom: 0; } }
#converse-embedded-chat .chatbox-btn,
#conversejs .chatbox-btn { #conversejs .chatbox-btn {
border-radius: 25%; border-radius: 25%;
border: none; border: none;
...@@ -7249,11 +7243,9 @@ body { ...@@ -7249,11 +7243,9 @@ body {
margin: 0 0.2em; margin: 0 0.2em;
padding: 0 0 0 0.5em; padding: 0 0 0 0.5em;
text-decoration: none; } text-decoration: none; }
#converse-embedded-chat .chatbox-btn:active,
#conversejs .chatbox-btn:active { #conversejs .chatbox-btn:active {
position: relative; position: relative;
top: 1px; } top: 1px; }
#converse-embedded-chat .chat-head,
#conversejs .chat-head { #conversejs .chat-head {
flex-wrap: nowrap; flex-wrap: nowrap;
color: #ffffff; color: #ffffff;
...@@ -7262,13 +7254,10 @@ body { ...@@ -7262,13 +7254,10 @@ body {
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
position: relative; } position: relative; }
#converse-embedded-chat .chat-head.chat-head-chatbox,
#conversejs .chat-head.chat-head-chatbox { #conversejs .chat-head.chat-head-chatbox {
background-color: #3AA569; } background-color: #3AA569; }
#converse-embedded-chat .chat-head .avatar,
#conversejs .chat-head .avatar { #conversejs .chat-head .avatar {
margin-right: 0.5em; } margin-right: 0.5em; }
#converse-embedded-chat .chat-head .chatbox-buttons,
#conversejs .chat-head .chatbox-buttons { #conversejs .chat-head .chatbox-buttons {
flex-direction: row-reverse; flex-direction: row-reverse;
position: relative; position: relative;
...@@ -7279,7 +7268,6 @@ body { ...@@ -7279,7 +7268,6 @@ body {
flex: 0 0 25%; flex: 0 0 25%;
max-width: 25%; max-width: 25%;
padding: 0; } padding: 0; }
#converse-embedded-chat .chat-head .user-custom-message,
#conversejs .chat-head .user-custom-message { #conversejs .chat-head .user-custom-message {
color: white; color: white;
font-size: 75%; font-size: 75%;
...@@ -7289,53 +7277,36 @@ body { ...@@ -7289,53 +7277,36 @@ body {
white-space: nowrap; white-space: nowrap;
margin: 0; margin: 0;
padding-top: 0.2em; } padding-top: 0.2em; }
#converse-embedded-chat .chat-head a.chatbox-btn.fa, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa, #conversejs .chat-head a.chatbox-btn.fa, #conversejs .chat-head a:visited.chatbox-btn.fa, #conversejs .chat-head a:hover.chatbox-btn.fa, #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
#conversejs .chat-head a.chatbox-btn.fa,
#conversejs .chat-head a:visited.chatbox-btn.fa,
#conversejs .chat-head a:hover.chatbox-btn.fa,
#conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa {
color: white; } color: white; }
#converse-embedded-chat .chat-head a.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:visited.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:hover.chatbox-btn.fa.button-on:before, #converse-embedded-chat .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before, #conversejs .chat-head a.chatbox-btn.fa.button-on:before, #conversejs .chat-head a:visited.chatbox-btn.fa.button-on:before, #conversejs .chat-head a:hover.chatbox-btn.fa.button-on:before, #conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
#conversejs .chat-head a.chatbox-btn.fa.button-on:before,
#conversejs .chat-head a:visited.chatbox-btn.fa.button-on:before,
#conversejs .chat-head a:hover.chatbox-btn.fa.button-on:before,
#conversejs .chat-head a:not([href]):not([tabindex]).chatbox-btn.fa.button-on:before {
padding: 0.2em; padding: 0.2em;
background-color: white; background-color: white;
color: #3AA569; } color: #3AA569; }
#converse-embedded-chat .chat-head .chatbox-btn,
#conversejs .chat-head .chatbox-btn { #conversejs .chat-head .chatbox-btn {
color: white; } color: white; }
#converse-embedded-chat .chat-head .chatbox-btn.fa,
#conversejs .chat-head .chatbox-btn.fa { #conversejs .chat-head .chatbox-btn.fa {
color: white; } color: white; }
#converse-embedded-chat .chat-head .chatbox-btn:active,
#conversejs .chat-head .chatbox-btn:active { #conversejs .chat-head .chatbox-btn:active {
position: relative; position: relative;
top: 1px; } top: 1px; }
#converse-embedded-chat .chat-head .chatbox-btn.button-on:before,
#conversejs .chat-head .chatbox-btn.button-on:before { #conversejs .chat-head .chatbox-btn.button-on:before {
border-radius: 5%; border-radius: 5%;
background-color: white; background-color: white;
color: #3AA569; } color: #3AA569; }
#converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
text-align: left; text-align: left;
margin: 0 0.5em; } margin: 0 0.5em; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
margin: 0; margin: 0;
width: 100%; } } width: 100%; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .chatbox,
#conversejs .chatbox { #conversejs .chatbox {
margin: 0; margin: 0;
width: 100%; } } width: 100%; } }
#converse-embedded-chat .chatbox .spoiler,
#conversejs .chatbox .spoiler { #conversejs .chatbox .spoiler {
background-color: #e7f7ee; } background-color: #e7f7ee; }
#converse-embedded-chat .chatbox .box-flyout,
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -7348,18 +7319,15 @@ body { ...@@ -7348,18 +7319,15 @@ body {
overflow-y: scroll; overflow-y: scroll;
width: 100%; } width: 100%; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox .box-flyout,
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
height: 400px; height: 400px;
width: 100%; width: 100%;
height: 100vh; } } height: 100vh; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .chatbox .box-flyout,
#conversejs .chatbox .box-flyout { #conversejs .chatbox .box-flyout {
height: 400px; height: 400px;
width: 100%; width: 100%;
height: 100vh; } } height: 100vh; } }
#converse-embedded-chat .chatbox .chat-title,
#conversejs .chatbox .chat-title { #conversejs .chatbox .chat-title {
color: white; color: white;
display: block; display: block;
...@@ -7367,11 +7335,9 @@ body { ...@@ -7367,11 +7335,9 @@ body {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
#converse-embedded-chat .chatbox .chat-title a,
#conversejs .chatbox .chat-title a { #conversejs .chatbox .chat-title a {
color: white; color: white;
width: 100%; } width: 100%; }
#converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -7382,94 +7348,70 @@ body { ...@@ -7382,94 +7348,70 @@ body {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-top: 0; } border-top: 0; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; } } border-bottom-right-radius: 0; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
border-bottom-right-radius: 0; } } border-bottom-right-radius: 0; } }
#converse-embedded-chat .chatbox .chat-body p,
#conversejs .chatbox .chat-body p { #conversejs .chatbox .chat-body p {
color: #777; color: #777;
font-size: 16px; font-size: 16px;
margin: 0; margin: 0;
padding: 5px; } padding: 5px; }
#converse-embedded-chat .chatbox .chat-body .message,
#conversejs .chatbox .chat-body .message { #conversejs .chatbox .chat-body .message {
margin: 0.5em 0; } margin: 0.5em 0; }
#converse-embedded-chat .chatbox .chat-body .chat-info,
#conversejs .chatbox .chat-body .chat-info { #conversejs .chatbox .chat-body .chat-info {
line-height: 20px; line-height: 20px;
color: #3AA569; color: #3AA569;
font-size: 14px; } font-size: 14px; }
#converse-embedded-chat .chatbox .chat-body .chat-info.badge,
#conversejs .chatbox .chat-body .chat-info.badge { #conversejs .chatbox .chat-body .chat-info.badge {
color: white; } color: white; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-state-notification,
#conversejs .chatbox .chat-body .chat-info.chat-state-notification { #conversejs .chatbox .chat-body .chat-info.chat-state-notification {
font-style: italic; } font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-event,
#conversejs .chatbox .chat-body .chat-info.chat-event { #conversejs .chatbox .chat-body .chat-info.chat-event {
clear: left; clear: left;
font-style: italic; } font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-error,
#conversejs .chatbox .chat-body .chat-info.chat-error { #conversejs .chatbox .chat-body .chat-info.chat-error {
color: #D24E2B; color: #D24E2B;
font-weight: bold; } font-weight: bold; }
#converse-embedded-chat .chatbox .chat-body .chat-info.chat-date,
#conversejs .chatbox .chat-body .chat-info.chat-date { #conversejs .chatbox .chat-body .chat-info.chat-date {
display: inline-block; display: inline-block;
margin-top: 1em; } margin-top: 1em; }
#converse-embedded-chat .chatbox .chat-body .chat-image,
#conversejs .chatbox .chat-body .chat-image { #conversejs .chatbox .chat-body .chat-image {
height: auto; height: auto;
width: auto; width: auto;
max-height: 24em; max-height: 24em;
max-width: 100%; } max-width: 100%; }
#converse-embedded-chat .chatbox .chat-body .chat-action,
#conversejs .chatbox .chat-body .chat-action { #conversejs .chatbox .chat-body .chat-action {
font-style: italic; } font-style: italic; }
#converse-embedded-chat .chatbox .chat-body .chat-message,
#conversejs .chatbox .chat-body .chat-message { #conversejs .chatbox .chat-body .chat-message {
overflow: auto; } overflow: auto; }
#converse-embedded-chat .chatbox .chat-body .chat-message.onload,
#conversejs .chatbox .chat-body .chat-message.onload { #conversejs .chatbox .chat-body .chat-message.onload {
animation: colorchange-chatmessage 1s; animation: colorchange-chatmessage 1s;
-webkit-animation: colorchange-chatmessage 1s; } -webkit-animation: colorchange-chatmessage 1s; }
#converse-embedded-chat .chatbox .chat-body .chat-message canvas,
#conversejs .chatbox .chat-body .chat-message canvas { #conversejs .chatbox .chat-body .chat-message canvas {
vertical-align: middle; vertical-align: middle;
background: #818479; } background: #818479; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs .chatbox .chat-body .chat-message .chat-msg-author { #conversejs .chatbox .chat-body .chat-message .chat-msg-author {
font-weight: bold; } font-weight: bold; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-them,
#conversejs .chatbox .chat-body .chat-message .chat-msg-them { #conversejs .chatbox .chat-body .chat-message .chat-msg-them {
color: #3AA569; } color: #3AA569; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-me,
#conversejs .chatbox .chat-body .chat-message .chat-msg-me { #conversejs .chatbox .chat-body .chat-message .chat-msg-me {
color: #578EA9; } color: #578EA9; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content { #conversejs .chatbox .chat-body .chat-message .chat-msg-content {
max-width: 100%; max-width: 100%;
word-wrap: break-word; } word-wrap: break-word; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content.spoiler,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler { #conversejs .chatbox .chat-body .chat-message .chat-msg-content.spoiler {
border-radius: 4px; border-radius: 4px;
padding: 0.5em; } padding: 0.5em; }
#converse-embedded-chat .chatbox .chat-body .chat-message .chat-msg-content .emojione,
#conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione { #conversejs .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -6px; } margin-bottom: -6px; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-them,
#conversejs .chatbox .chat-body .delayed .chat-msg-them { #conversejs .chatbox .chat-body .delayed .chat-msg-them {
color: #41b875; } color: #41b875; }
#converse-embedded-chat .chatbox .chat-body .delayed .chat-msg-me,
#conversejs .chatbox .chat-body .delayed .chat-msg-me { #conversejs .chatbox .chat-body .delayed .chat-msg-me {
color: #6899b2; } color: #6899b2; }
#converse-embedded-chat .chatbox .new-msgs-indicator,
#conversejs .chatbox .new-msgs-indicator { #conversejs .chatbox .new-msgs-indicator {
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -7481,7 +7423,6 @@ body { ...@@ -7481,7 +7423,6 @@ body {
text-align: center; text-align: center;
z-index: 20; z-index: 20;
white-space: nowrap; } white-space: nowrap; }
#converse-embedded-chat .chatbox .chat-content,
#conversejs .chatbox .chat-content { #conversejs .chatbox .chat-content {
height: 100%; height: 100%;
padding: 1em; padding: 1em;
...@@ -7491,30 +7432,23 @@ body { ...@@ -7491,30 +7432,23 @@ body {
border: 0; border: 0;
background-color: #ffffff; background-color: #ffffff;
line-height: 1.3em; } line-height: 1.3em; }
#converse-embedded-chat .chatbox .chat-content .toggle-spoiler:before,
#conversejs .chatbox .chat-content .toggle-spoiler:before { #conversejs .chatbox .chat-content .toggle-spoiler:before {
padding-right: 0.25em; padding-right: 0.25em;
whitespace: nowrap; } whitespace: nowrap; }
#converse-embedded-chat .chatbox .chat-content video,
#conversejs .chatbox .chat-content video { #conversejs .chatbox .chat-content video {
width: 100%; } width: 100%; }
#converse-embedded-chat .chatbox .chat-content progress,
#conversejs .chatbox .chat-content progress { #conversejs .chatbox .chat-content progress {
margin: 0.5em 0; margin: 0.5em 0;
width: 100%; } width: 100%; }
#converse-embedded-chat .chatbox .chat-content-sendbutton,
#conversejs .chatbox .chat-content-sendbutton { #conversejs .chatbox .chat-content-sendbutton {
height: calc(100% - 93px); } height: calc(100% - 93px); }
#converse-embedded-chat .chatbox .dropdown,
#conversejs .chatbox .dropdown { #conversejs .chatbox .dropdown {
/* status dropdown styles */ /* status dropdown styles */
background-color: #FCFDFD; } background-color: #FCFDFD; }
#converse-embedded-chat .chatbox .dropdown dd,
#conversejs .chatbox .dropdown dd { #conversejs .chatbox .dropdown dd {
margin: 0; margin: 0;
padding: 0; padding: 0;
position: relative; } position: relative; }
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage { #conversejs .chatbox .sendXMPPMessage {
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
...@@ -7526,17 +7460,13 @@ body { ...@@ -7526,17 +7460,13 @@ body {
margin: 0; margin: 0;
padding: 0; } padding: 0; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage { #conversejs .chatbox .sendXMPPMessage {
width: 100%; } } width: 100%; } }
@media screen and (max-width: 480px) { @media screen and (max-width: 480px) {
#converse-embedded-chat .chatbox .sendXMPPMessage,
#conversejs .chatbox .sendXMPPMessage { #conversejs .chatbox .sendXMPPMessage {
width: 100%; } } width: 100%; } }
#converse-embedded-chat .chatbox .sendXMPPMessage .spoiler-hint,
#conversejs .chatbox .sendXMPPMessage .spoiler-hint { #conversejs .chatbox .sendXMPPMessage .spoiler-hint {
width: 100%; } width: 100%; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea,
#conversejs .chatbox .sendXMPPMessage .chat-textarea { #conversejs .chatbox .sendXMPPMessage .chat-textarea {
border-top-left-radius: 0; border-top-left-radius: 0;
border-top-right-radius: 0; border-top-right-radius: 0;
...@@ -7548,10 +7478,8 @@ body { ...@@ -7548,10 +7478,8 @@ body {
min-height: 60px; min-height: 60px;
max-height: 400px; max-height: 400px;
margin-bottom: -4px; } margin-bottom: -4px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-textarea.spoiler,
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler { #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
height: 42px; } height: 42px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .send-button,
#conversejs .chatbox .sendXMPPMessage .send-button { #conversejs .chatbox .sendXMPPMessage .send-button {
position: absolute; position: absolute;
left: 3px; left: 3px;
...@@ -7562,7 +7490,6 @@ body { ...@@ -7562,7 +7490,6 @@ body {
font-size: 80%; font-size: 80%;
height: 27px; height: 27px;
bottom: -30px; } bottom: -30px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar { #conversejs .chatbox .sendXMPPMessage .chat-toolbar {
box-sizing: border-box; box-sizing: border-box;
margin: 0; margin: 0;
...@@ -7571,44 +7498,30 @@ body { ...@@ -7571,44 +7498,30 @@ body {
border-top: 8px solid #3AA569; border-top: 8px solid #3AA569;
background-color: white; background-color: white;
color: #3AA569; } color: #3AA569; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa, #converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .fa:hover, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa:hover {
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa:hover {
color: #3AA569; color: #3AA569;
font-size: 18px; } font-size: 18px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted { #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
color: #777; } color: #777; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted .toolbar-menu a {
color: #578EA9; } color: #578EA9; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .unverified,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified { #conversejs .chatbox .sendXMPPMessage .chat-toolbar .unverified {
color: #cf5300; } color: #cf5300; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private a,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .private,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .private { #conversejs .chatbox .sendXMPPMessage .chat-toolbar .private {
color: #4b7003; } color: #4b7003; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants { #conversejs .chatbox .sendXMPPMessage .chat-toolbar .toggle-occupants {
float: right; } float: right; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li {
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
list-style: none; list-style: none;
padding: 0 0.5em; } padding: 0 0.5em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li:hover {
cursor: pointer; } cursor: pointer; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu {
background-color: #fff; background-color: #fff;
bottom: 2rem; bottom: 2rem;
...@@ -7619,82 +7532,59 @@ body { ...@@ -7619,82 +7532,59 @@ body {
right: 0; right: 0;
top: auto; top: auto;
z-index: 1000; } z-index: 1000; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu {
left: -6em; left: -6em;
min-width: 15rem; } min-width: 15rem; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu.show,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu.show { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu.otr-menu.show {
display: flex; display: flex;
flex-direction: column; } flex-direction: column; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; } color: #578EA9; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
height: 150px; height: 150px;
overflow: scroll; overflow: scroll;
padding: 0.5em; } padding: 0.5em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
margin-left: 0; margin-left: 0;
cursor: pointer; cursor: pointer;
list-style: none; list-style: none;
position: relative; } position: relative; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji {
padding: 0.2em; } padding: 0.2em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji.picked {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a {
font-size: 26px; } font-size: 26px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover {
color: #8f2831; } color: #8f2831; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley a.toggle-smiley,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley a.toggle-smiley { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley a.toggle-smiley {
padding: 0; } padding: 0; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar {
box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); } box-shadow: 0 -1px 1px 0 rgba(0, 0, 0, 0.4); }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker {
padding-top: 0.5em; } padding-top: 0.5em; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker ul {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: space-between; } justify-content: space-between; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li {
padding: 0.2em; padding: 0.2em;
font-size: 26px; } font-size: 26px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover, #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-category-picker li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley .emoji-toolbar .emoji-skintone-picker li:hover {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul {
z-index: 99; } z-index: 99; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li {
display: block; display: block;
padding: 7px; } padding: 7px; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li:hover {
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-otr ul li a {
display: block; } display: block; }
#converse-embedded-chat .chatbox .dragresize,
#conversejs .chatbox .dragresize { #conversejs .chatbox .dragresize {
background: transparent; background: transparent;
border: 0; border: 0;
...@@ -7702,18 +7592,15 @@ body { ...@@ -7702,18 +7592,15 @@ body {
position: absolute; position: absolute;
top: 0; top: 0;
z-index: 20; } z-index: 20; }
#converse-embedded-chat .chatbox .dragresize-top,
#conversejs .chatbox .dragresize-top { #conversejs .chatbox .dragresize-top {
cursor: n-resize; cursor: n-resize;
height: 5px; height: 5px;
width: 100%; } width: 100%; }
#converse-embedded-chat .chatbox .dragresize-left,
#conversejs .chatbox .dragresize-left { #conversejs .chatbox .dragresize-left {
cursor: w-resize; cursor: w-resize;
width: 5px; width: 5px;
height: 100%; height: 100%;
left: 0; } left: 0; }
#converse-embedded-chat .chatbox .dragresize-topleft,
#conversejs .chatbox .dragresize-topleft { #conversejs .chatbox .dragresize-topleft {
cursor: nw-resize; cursor: nw-resize;
width: 15px; width: 15px;
...@@ -7722,17 +7609,17 @@ body { ...@@ -7722,17 +7609,17 @@ body {
left: 0; } left: 0; }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs > .row { #conversejs:not(.converse-embedded) > .row {
flex-direction: row-reverse; } flex-direction: row-reverse; }
#conversejs #converse-login-panel .converse-form { #conversejs:not(.converse-embedded) #converse-login-panel .converse-form {
padding: 3em 2em 3em; } padding: 3em 2em 3em; }
#conversejs .sidebar { #conversejs:not(.converse-embedded) .sidebar {
display: block; } display: block; }
#conversejs .chatbox { #conversejs:not(.converse-embedded) .chatbox {
width: calc(100% - 50px); } width: calc(100% - 50px); }
#conversejs .chatbox .chat-body .chat-message .chat-msg-author { #conversejs:not(.converse-embedded) .chatbox .chat-body .chat-message .chat-msg-author {
white-space: normal; } white-space: normal; }
#conversejs .chatbox .row .box-flyout { #conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
left: 50px; left: 50px;
bottom: 0; bottom: 0;
height: 100vh; height: 100vh;
...@@ -7806,7 +7693,7 @@ body { ...@@ -7806,7 +7693,7 @@ body {
padding-right: 10px; } padding-right: 10px; }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs.fullscreen .chatbox { #conversejs:not(.converse-embedded).fullscreen .chatbox {
width: calc(100% - 50px); } } width: calc(100% - 50px); } }
#conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle { #conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
color: #3AA569; } color: #3AA569; }
...@@ -8110,18 +7997,18 @@ body { ...@@ -8110,18 +7997,18 @@ body {
color: white; } color: white; }
@media (max-width: 767.98px) { @media (max-width: 767.98px) {
#conversejs { #conversejs:not(.converse-embedded) {
left: 0; left: 0;
right: 0; right: 0;
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
padding-right: env(safe-area-inset-right); } padding-right: env(safe-area-inset-right); }
#conversejs .converse-chatboxes { #conversejs:not(.converse-embedded) .converse-chatboxes {
margin: 0 !important; margin: 0 !important;
flex-direction: row !important; flex-direction: row !important;
justify-content: space-between; } justify-content: space-between; }
#conversejs .converse-chatboxes .converse-chatroom { #conversejs:not(.converse-embedded) .converse-chatboxes .converse-chatroom {
font-size: 14px; } font-size: 14px; }
#conversejs .converse-chatboxes .chatbox .box-flyout { #conversejs:not(.converse-embedded) .converse-chatboxes .chatbox .box-flyout {
top: -100vh; top: -100vh;
margin-left: 15px; margin-left: 15px;
left: 0; left: 0;
...@@ -8129,16 +8016,16 @@ body { ...@@ -8129,16 +8016,16 @@ body {
border-radius: 0; border-radius: 0;
width: 100vw !important; width: 100vw !important;
height: 100vh !important; } height: 100vh !important; }
#conversejs .converse-chatboxes #controlbox { #conversejs:not(.converse-embedded) .converse-chatboxes #controlbox {
order: 0; } order: 0; }
#conversejs .converse-chatboxes #controlbox .box-flyout { #conversejs:not(.converse-embedded) .converse-chatboxes #controlbox .box-flyout {
width: 100vw !important; width: 100vw !important;
height: 100vh !important; } height: 100vh !important; }
#conversejs .converse-chatboxes #controlbox .sidebar { #conversejs:not(.converse-embedded) .converse-chatboxes #controlbox .sidebar {
display: block; } display: block; }
#conversejs .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) { #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open .chatbox:not(#controlbox) {
display: none; } display: none; }
#conversejs .converse-chatboxes.sidebar-open #controlbox .controlbox-pane { #conversejs:not(.converse-embedded) .converse-chatboxes.sidebar-open #controlbox .controlbox-pane {
display: block; } } display: block; } }
#conversejs.fullscreen #controlbox { #conversejs.fullscreen #controlbox {
position: relative; position: relative;
......
sass/_chatbox.scss
View file @ ee46b0cc
#converse-embedded-chat,
#conversejs { #conversejs {
.flyout { .flyout {
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
bottom: $chatbox-hover-height;
position: absolute;
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
border-radius: 0; border-radius: 0;
} }
@media screen and (max-width: $mobile-portrait-length) { @media screen and (max-width: $mobile-portrait-length) {
border-radius: 0; border-radius: 0;
} }
bottom: $chatbox-hover-height;
position: absolute;
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
bottom: 0; bottom: 0;
...@@ -518,7 +518,7 @@ ...@@ -518,7 +518,7 @@
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs { #conversejs:not(.converse-embedded) {
> .row { > .row {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
......
sass/_chatrooms.scss
View file @ ee46b0cc
...@@ -308,7 +308,7 @@ ...@@ -308,7 +308,7 @@
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs { #conversejs:not(.converse-embedded) {
.chatbox { .chatbox {
.box-flyout { .box-flyout {
.chatroom-body { .chatroom-body {
......
sass/_controlbox.scss
View file @ ee46b0cc
...@@ -432,7 +432,7 @@ ...@@ -432,7 +432,7 @@
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
#conversejs { #conversejs:not(.converse-embedded) {
left: 0; left: 0;
right: 0; right: 0;
padding-left: env(safe-area-inset-left); padding-left: env(safe-area-inset-left);
......
sass/_core.scss
View file @ ee46b0cc
...@@ -363,7 +363,7 @@ body.reset { ...@@ -363,7 +363,7 @@ body.reset {
} }
.avatar { .avatar {
border-radius: 25%; border-radius: 10%;
} }
.activated { .activated {
...@@ -459,7 +459,7 @@ body.reset { ...@@ -459,7 +459,7 @@ body.reset {
font-size: 3.75em; font-size: 3.75em;
} }
} }
#conversejs { #conversejs:not(.converse-embedded) {
.chatbox { .chatbox {
.chat-body { .chat-body {
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
......
sass/_muc_embedded.scss
View file @ ee46b0cc
...@@ -8,10 +8,10 @@ ...@@ -8,10 +8,10 @@
} }
bottom: auto; bottom: auto;
right: auto; height: 100%; // When embedded, it fills the containing element
position: relative; position: relative;
right: auto;
width: 100%; width: 100%;
height: 100%; // When embedded, it fills the containing element
.converse-chatboxes { .converse-chatboxes {
z-index: 1031; // One more than bootstrap navbar z-index: 1031; // One more than bootstrap navbar
...@@ -21,6 +21,10 @@ ...@@ -21,6 +21,10 @@
width: 100%; width: 100%;
} }
.flyout {
bottom: 0;
}
.chatroom { .chatroom {
margin: 0; margin: 0;
width: 100%; width: 100%;
......
sass/converse/_chatbox.scss
View file @ ee46b0cc
...@@ -59,7 +59,7 @@ ...@@ -59,7 +59,7 @@
} }
@include media-breakpoint-down(sm) { @include media-breakpoint-down(sm) {
#conversejs:not(.fullscreen) { #conversejs:not(.converse-fullscreen):not(.converse-embedded) {
> .row { > .row {
flex-direction: column; flex-direction: column;
......
sass/inverse/_chatbox.scss
View file @ ee46b0cc
...@@ -94,7 +94,7 @@ ...@@ -94,7 +94,7 @@
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs.fullscreen { #conversejs:not(.converse-embedded).fullscreen {
.chatbox { .chatbox {
width: calc(100% - 50px); width: calc(100% - 50px);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7