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

Various smaller css fixes

Browse Source
This commit is contained in:
JC Brand 2018-01-27 10:07:54 +01:00
parent c385674665
commit 0436a36169
15 changed files with 154 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
css/converse.css
View File

@ -4795,9 +4795,8 @@
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat canvas, #converse-embedded-chat canvas,
#conversejs canvas { #conversejs canvas {
background: #000; background: #777;
border-radius: 4px; border-radius: 4px; }
margin: 2px 0; }
#converse-embedded-chat .circle, #converse-embedded-chat .circle,
#conversejs .circle { #conversejs .circle {
border-radius: 50%; } border-radius: 50%; }
@ -5162,9 +5161,6 @@
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#conversejs { #conversejs {
left: 0; } } left: 0; } }
@media screen and (max-width: 480px) {
#conversejs {
width: auto; } }
#conversejs > .row { #conversejs > .row {
flex-direction: row-reverse; } flex-direction: row-reverse; }
@ -5198,14 +5194,18 @@
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 {
background-color: #3AA569; }
#converse-embedded-chat .chat-head .avatar, #converse-embedded-chat .chat-head .avatar,
#conversejs .chat-head .avatar { #conversejs .chat-head .avatar {
margin-right: 0.5em; margin-right: 0.5em;
border-radius: 25%; border-radius: 25%;
float: left; } float: left; }
#converse-embedded-chat .chat-head.chat-head-chatbox, #converse-embedded-chat .chat-head .chatbox-buttons,
#conversejs .chat-head.chat-head-chatbox { #conversejs .chat-head .chatbox-buttons {
background-color: #3AA569; } flex-direction: row-reverse;
float: right; }
#converse-embedded-chat .chat-head .user-custom-message, #converse-embedded-chat .chat-head .user-custom-message,
#conversejs .chat-head .user-custom-message { #conversejs .chat-head .user-custom-message {
color: white; color: white;
@ -5275,7 +5275,7 @@
#conversejs .chatbox .chat-title { #conversejs .chatbox .chat-title {
color: white; color: white;
display: block; display: block;
line-height: 15px; line-height: 20px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
@ -6044,7 +6044,6 @@
top: 0; top: 0;
display: none; } display: none; }
#conversejs #controlbox #users.controlbox-pane { #conversejs #controlbox #users.controlbox-pane {
height: 100vh;
width: 100%; } width: 100%; }
#conversejs.sidebar-open .chatbox:not(#controlbox) { #conversejs.sidebar-open .chatbox:not(#controlbox) {
display: none; } display: none; }
@ -6174,6 +6173,8 @@
color: #206485; } color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: auto; margin: auto;
margin-top: 0.5em;
margin-bottom: 0;
padding: 0; padding: 0;
width: 85%; } width: 85%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs {
@ -6245,6 +6246,11 @@
#converse-embedded-chat .chat-head-chatroom, #converse-embedded-chat .chat-head-chatroom,
#conversejs .chat-head-chatroom { #conversejs .chat-head-chatroom {
background-color: #E77051; } background-color: #E77051; }
#converse-embedded-chat .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 .chatbox-btn.button-on, #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
#conversejs .chat-head-chatroom .chatbox-btn.button-on { #conversejs .chat-head-chatroom .chatbox-btn.button-on {
background-color: white; background-color: white;
@ -6505,6 +6511,7 @@
border-top-right-radius: 4px; border-top-right-radius: 4px;
background-color: #578EA9; background-color: #578EA9;
border: 1px solid white; border: 1px solid white;
border-bottom: none;
padding: 0.5em 0; padding: 0.5em 0;
text-align: center; text-align: center;
color: white; color: white;
@ -6532,7 +6539,8 @@
border-radius: 4px; border-radius: 4px;
height: 35px; height: 35px;
margin-bottom: 0.2em; margin-bottom: 0.2em;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); } box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
width: 100%; }
#conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout.minimized { #conversejs:not(.fullscreen) #minimized-chats .minimized-chats-flyout.minimized {
height: auto; } height: auto; }
#conversejs:not(.fullscreen) #minimized-chats .unread-message-count, #conversejs:not(.fullscreen) #minimized-chats .unread-message-count,

92
css/inverse.css
View File

@ -4795,9 +4795,8 @@
background-color: #DCF9F6; } background-color: #DCF9F6; }
#converse-embedded-chat canvas, #converse-embedded-chat canvas,
#conversejs canvas { #conversejs canvas {
background: #000; background: #777;
border-radius: 4px; border-radius: 4px; }
margin: 2px 0; }
#converse-embedded-chat .circle, #converse-embedded-chat .circle,
#conversejs .circle { #conversejs .circle {
border-radius: 50%; } border-radius: 50%; }
@ -5138,9 +5137,9 @@
font-size: 3.75em; } font-size: 3.75em; }
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
border-radius: 0; } border-radius: 4px; }
#conversejs .flyout { #conversejs .flyout {
border-radius: 0; } } border-radius: 4px; } }
@media screen and (min-width: 576px) { @media screen and (min-width: 576px) {
#conversejs .offset-sm-2 { #conversejs .offset-sm-2 {
margin-left: 16.666667%; } } margin-left: 16.666667%; } }
@ -5162,9 +5161,6 @@
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#conversejs { #conversejs {
left: 0; } } left: 0; } }
@media screen and (max-width: 480px) {
#conversejs {
width: auto; } }
body { body {
font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Lora", "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #ffffff; color: #ffffff;
@ -5226,7 +5222,7 @@ body {
#converse-embedded-chat .flyout, #converse-embedded-chat .flyout,
#conversejs .flyout { #conversejs .flyout {
border-radius: 0; border-radius: 4px;
bottom: 6px; bottom: 6px;
position: absolute; } position: absolute; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
@ -5254,14 +5250,18 @@ 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 {
background-color: #3AA569; }
#converse-embedded-chat .chat-head .avatar, #converse-embedded-chat .chat-head .avatar,
#conversejs .chat-head .avatar { #conversejs .chat-head .avatar {
margin-right: 0.5em; margin-right: 0.5em;
border-radius: 25%; border-radius: 25%;
float: left; } float: left; }
#converse-embedded-chat .chat-head.chat-head-chatbox, #converse-embedded-chat .chat-head .chatbox-buttons,
#conversejs .chat-head.chat-head-chatbox { #conversejs .chat-head .chatbox-buttons {
background-color: #3AA569; } flex-direction: row-reverse;
float: right; }
#converse-embedded-chat .chat-head .user-custom-message, #converse-embedded-chat .chat-head .user-custom-message,
#conversejs .chat-head .user-custom-message { #conversejs .chat-head .user-custom-message {
color: white; color: white;
@ -5331,7 +5331,7 @@ body {
#conversejs .chatbox .chat-title { #conversejs .chatbox .chat-title {
color: white; color: white;
display: block; display: block;
line-height: 15px; line-height: 24px;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } white-space: nowrap; }
@ -5342,8 +5342,8 @@ body {
#converse-embedded-chat .chatbox .chat-body, #converse-embedded-chat .chatbox .chat-body,
#conversejs .chatbox .chat-body { #conversejs .chatbox .chat-body {
background-color: white; background-color: white;
border-bottom-left-radius: 0; border-bottom-left-radius: 4px;
border-bottom-right-radius: 0; border-bottom-right-radius: 4px;
border-top: 0; border-top: 0;
height: 289px; height: 289px;
height: -webkit-calc(100% - 62px); height: -webkit-calc(100% - 62px);
@ -5463,8 +5463,8 @@ body {
#conversejs .chatbox .sendXMPPMessage { #conversejs .chatbox .sendXMPPMessage {
-moz-background-clip: padding; -moz-background-clip: padding;
-webkit-background-clip: padding-box; -webkit-background-clip: padding-box;
border-bottom-right-radius: 0; border-bottom-right-radius: 4px;
border-bottom-left-radius: 0; border-bottom-left-radius: 4px;
background-clip: padding-box; background-clip: padding-box;
border-top: 1px solid #BBB; border-top: 1px solid #BBB;
border: 0; border: 0;
@ -5484,8 +5484,8 @@ body {
#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;
border-bottom-right-radius: 0; border-bottom-right-radius: 4px;
border-bottom-left-radius: 0; border-bottom-left-radius: 4px;
height: 70px; height: 70px;
padding: 0.5em; padding: 0.5em;
width: 100%; width: 100%;
@ -5703,8 +5703,8 @@ body {
box-shadow: none; } box-shadow: none; }
#conversejs.fullscreen .chatbox .chat-body { #conversejs.fullscreen .chatbox .chat-body {
background-color: #3AA569; background-color: #3AA569;
border-top-left-radius: 0; border-top-left-radius: 4px;
border-top-right-radius: 0; } border-top-right-radius: 4px; }
#conversejs.fullscreen .chatbox .chat-body .chat-message { #conversejs.fullscreen .chatbox .chat-body .chat-message {
line-height: 22px; line-height: 22px;
font-size: 14px; font-size: 14px;
@ -5718,11 +5718,11 @@ body {
margin-bottom: -5.5px; } margin-bottom: -5.5px; }
#conversejs.fullscreen .chatbox .chat-content { #conversejs.fullscreen .chatbox .chat-content {
padding: 0 1em 1em 1em; padding: 0 1em 1em 1em;
border-top-left-radius: 0; border-top-left-radius: 4px;
border-top-right-radius: 0; } border-top-right-radius: 4px; }
#conversejs.fullscreen .chatbox .chat-title { #conversejs.fullscreen .chatbox .chat-title {
font-size: 26px; font-size: 26px;
line-height: 26px; } line-height: 30px; }
#conversejs.fullscreen .chatbox .sendXMPPMessage ul { #conversejs.fullscreen .chatbox .sendXMPPMessage ul {
width: 100%; } width: 100%; }
#conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley { #conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley {
@ -5735,9 +5735,7 @@ body {
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
#conversejs.fullscreen .chatbox { #conversejs.fullscreen .chatbox {
width: calc(100% - 50px); } width: calc(100% - 50px); } }
#conversejs.fullscreen .chatbox .row {
width: calc(100% - 50px); } }
#conversejs #controlbox { #conversejs #controlbox {
margin-right: 1.5em; } margin-right: 1.5em; }
#conversejs #controlbox .pure-form.converse-form { #conversejs #controlbox .pure-form.converse-form {
@ -6048,7 +6046,7 @@ body {
text-align: left; text-align: left;
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
border-radius: 0; } border-radius: 4px; }
#conversejs #controlbox .controlbox-pane .switch-form { #conversejs #controlbox .controlbox-pane .switch-form {
padding-bottom: 2em; } padding-bottom: 2em; }
#conversejs #controlbox .controlbox-pane .switch-form p { #conversejs #controlbox .controlbox-pane .switch-form p {
@ -6118,7 +6116,6 @@ body {
top: 0; top: 0;
display: none; } display: none; }
#conversejs #controlbox #users.controlbox-pane { #conversejs #controlbox #users.controlbox-pane {
height: 100vh;
width: 100%; } width: 100%; }
#conversejs.sidebar-open .chatbox:not(#controlbox) { #conversejs.sidebar-open .chatbox:not(#controlbox) {
display: none; } display: none; }
@ -6126,8 +6123,10 @@ body {
display: block; } } display: block; } }
#conversejs.fullscreen #controlbox { #conversejs.fullscreen #controlbox {
margin: 0; } margin: 0; }
#conversejs.fullscreen #controlbox #login-dialog { #conversejs.fullscreen #controlbox .controlbox-pane {
border-radius: 0; } border-radius: 0; }
#conversejs.fullscreen #controlbox #login-dialog {
border-radius: 4px; }
#conversejs.fullscreen #controlbox #login-dialog .converse-form { #conversejs.fullscreen #controlbox #login-dialog .converse-form {
margin: 0; margin: 0;
padding: 3em 2em 3em; } padding: 3em 2em 3em; }
@ -6298,6 +6297,8 @@ body {
color: #206485; } color: #206485; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat {
margin: auto; margin: auto;
margin-top: 0.5em;
margin-bottom: 0;
padding: 0; padding: 0;
width: 85%; } width: 85%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat.unread-msgs {
@ -6375,6 +6376,11 @@ body {
#converse-embedded-chat .chat-head-chatroom, #converse-embedded-chat .chat-head-chatroom,
#conversejs .chat-head-chatroom { #conversejs .chat-head-chatroom {
background-color: #E77051; } background-color: #E77051; }
#converse-embedded-chat .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 .chatbox-btn.button-on, #converse-embedded-chat .chat-head-chatroom .chatbox-btn.button-on,
#conversejs .chat-head-chatroom .chatbox-btn.button-on { #conversejs .chat-head-chatroom .chatbox-btn.button-on {
background-color: white; background-color: white;
@ -6425,8 +6431,8 @@ body {
height: 100vh; } } height: 100vh; } }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body, #converse-embedded-chat .chatroom .box-flyout .chatroom-body,
#conversejs .chatroom .box-flyout .chatroom-body { #conversejs .chatroom .box-flyout .chatroom-body {
border-bottom-right-radius: 0; border-bottom-right-radius: 4px;
border-bottom-left-radius: 0; border-bottom-left-radius: 4px;
background-color: white; background-color: white;
border-top: 0; border-top: 0;
width: 100%; width: 100%;
@ -6481,7 +6487,7 @@ body {
vertical-align: top; vertical-align: top;
background-color: white; background-color: white;
border-left: 1px solid #777; border-left: 1px solid #777;
border-bottom-right-radius: 0; border-bottom-right-radius: 4px;
padding: 0.5em; } padding: 0.5em; }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { #conversejs .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
@ -6566,8 +6572,8 @@ body {
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container, #converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container { #conversejs .chatroom .box-flyout .chatroom-body .chatroom-form-container {
background-color: white; background-color: white;
border-bottom-left-radius: 0; border-bottom-left-radius: 4px;
border-bottom-right-radius: 0; border-bottom-right-radius: 4px;
border: 0; border: 0;
color: #777; color: #777;
font-size: 16px; font-size: 16px;
@ -6622,23 +6628,23 @@ body {
border-top: 0.8em solid #E77051; border-top: 0.8em solid #E77051;
width: 100%; } width: 100%; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body {
border-top-left-radius: 0; border-top-left-radius: 4px;
border-top-right-radius: 0; } border-top-right-radius: 4px; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container {
border-radius: 0; } border-radius: 4px; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area {
border-top-left-radius: 0; border-top-left-radius: 4px;
min-width: auto; min-width: auto;
height: calc(100vh - 95px); } height: calc(100vh - 95px); }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
border-top-left-radius: 0; border-top-left-radius: 4px;
padding: 0 1em 1em 1em; } padding: 0 1em 1em 1em; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full {
max-width: 100%; } max-width: 100%; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
max-width: 100%; } max-width: 100%; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants {
border-top-right-radius: 0; border-top-right-radius: 4px;
padding: 1em; } padding: 1em; }
#conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading { #conversejs.fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
font-size: 18px; } font-size: 18px; }
@ -6659,12 +6665,12 @@ body {
background-color: #E7A151; } background-color: #E7A151; }
#conversejs .chatbox.headlines .chat-body { #conversejs .chatbox.headlines .chat-body {
background-color: #E7A151; background-color: #E7A151;
border-radius: 0; } border-radius: 4px; }
#conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them { #conversejs .chatbox.headlines .chat-body .chat-message span.chat-msg-them {
color: #D2842B; } color: #D2842B; }
#conversejs .chatbox.headlines .chat-content { #conversejs .chatbox.headlines .chat-content {
height: 100%; height: 100%;
border-radius: 0; } border-radius: 4px; }
#conversejs.fullscreen .chatbox.headlines .box-flyout { #conversejs.fullscreen .chatbox.headlines .box-flyout {
background-color: #E7A151; } background-color: #E7A151; }

20
mockup/chatbox.html
View File

@ -22,13 +22,21 @@
<div class="chatbox col-xl-10 col-md-9" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f"> <div class="chatbox col-xl-10 col-md-9" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head chat-head-chatbox d-flex"> <div class="chat-head chat-head-chatbox row no-gutters">
<div><canvas height="44" width="44" class="avatar"></canvas></div> <div class="col-9">
<div class="chat-title w-100">JC Brand <div class="row no-gutters">
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p> <div class="col-auto"><canvas height="44" width="44" class="avatar"></canvas></div>
<div class="col chat-title" title="j@chat.example.org">JC Brand
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
</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> </div>
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
</div> </div>
<div class="chat-body"> <div class="chat-body">

16
mockup/chatroom.html
View File

@ -22,14 +22,18 @@
<div class="chatbox chatroom col-xl-10 col-md-9" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392"> <div class="chatbox chatroom col-xl-10 col-md-9" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom d-flex"> <div class="chat-head chat-head-chatroom row no-gutters">
<div class="w-100"> <div class="col-sm-10 col-lg-10">
<div class="chat-title">Chatroom</div> <div class="chat-title">Chatroom with a very long name</div>
<p class="chatroom-topic">May the force be with you</p> <p class="chatroom-topic">May the force be with you</p>
</div> </div>
<a class="chatbox-btn fa fa-wrench"></a> <div class="col-sm-2 col-lg-2">
<a class="chatbox-btn fa fa-minus"></a> <div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-close"></a> <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> </div>
<div class="chat-body chatroom-body"> <div class="chat-body chatroom-body">

37
mockup/converse.html
View File

@ -26,13 +26,22 @@
<div class="chatbox col col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f"> <div class="chatbox col col col-lg-2 col-md-3 col-sm-4 col-sx-12 w-100" id="chatbox-37c0c87392010303765fe36b05c0967d62c6b70f">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head chat-head-chatbox d-flex">
<div><canvas height="32" width="32" class="avatar"></canvas></div> <div class="chat-head chat-head-chatbox row no-gutters">
<div class="chat-title w-100">JC Brand <div class="col-9">
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p> <div class="row no-gutters">
<div class="col-auto"><canvas height="44" width="44" class="avatar"></canvas></div>
<div class="col chat-title" title="j@chat.example.org">JC Brand
<p class="user-custom-message" title="10000ft in the air">10000ft in the air</p>
</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> </div>
<a class="chatbox-btn fa fa-vcard" title="Contact profile" data-toggle="modal" data-target="#contactProfileModal"></a>
<a class="chatbox-btn fa fa-close" title="Close this chat box"></a>
</div> </div>
<div class="chat-body"> <div class="chat-body">
@ -111,14 +120,18 @@
<div class="chatbox chatroom col col-lg-4 col-md-6 col-sm-8 col-xs-12 w-100" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392"> <div class="chatbox chatroom col col-lg-4 col-md-6 col-sm-8 col-xs-12 w-100" id="chatbox-4a77380f1cd9d392627b0e1469688f9ca44e9392">
<div class="flyout box-flyout"> <div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom d-flex"> <div class="chat-head chat-head-chatroom row no-gutters">
<div class="w-100"> <div class="col-sm-8 col-lg-10">
<div class="chat-title">Chatroom</div> <div class="chat-title">Chatroom with a very long name</div>
<p class="chatroom-topic">May the force be with you</p> <p class="chatroom-topic">May the force be with you</p>
</div> </div>
<a class="chatbox-btn fa fa-wrench"></a> <div class="col-sm-4 col-lg-2">
<a class="chatbox-btn fa fa-minus"></a> <div class="chatbox-buttons row no-gutters">
<a class="chatbox-btn fa fa-close"></a> <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> </div>
<div class="chat-body chatroom-body row no-gutters"> <div class="chat-body chatroom-body row no-gutters">

14
sass/_chatbox.scss
View File

@ -26,14 +26,22 @@
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
position: relative; position: relative;
&.chat-head-chatbox {
background-color: $chat-head-color;
}
.avatar { .avatar {
margin-right: 0.5em; margin-right: 0.5em;
border-radius: 25%; border-radius: 25%;
float: left; float: left;
} }
&.chat-head-chatbox {
background-color: $chat-head-color; .chatbox-buttons {
flex-direction: row-reverse;
float: right;
} }
.user-custom-message { .user-custom-message {
color: white; color: white;
font-size: 75%; font-size: 75%;
@ -100,7 +108,7 @@
.chat-title { .chat-title {
color: $chat-head-text-color; color: $chat-head-text-color;
display: block; display: block;
line-height: 15px; line-height: $line-height-large;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;

7
sass/_chatrooms.scss
View File

@ -13,6 +13,13 @@
.chat-head-chatroom { .chat-head-chatroom {
background-color: $chatroom-head-color; background-color: $chatroom-head-color;
.chatroom-topic {
white-space: nowrap;
overflow-y: hidden;
text-overflow: ellipsis;
}
.chatbox-btn { .chatbox-btn {
&.button-on { &.button-on {
background-color: $chat-head-text-color; background-color: $chat-head-text-color;

1
sass/_controlbox.scss
View File

@ -524,7 +524,6 @@
top: 0; top: 0;
display: none; display: none;
&.controlbox-pane { &.controlbox-pane {
height: 100vh;
width: 100%; width: 100%;
} }
} }

12
sass/_core.scss
View File

@ -8,7 +8,7 @@
#converse-embedded-chat, #converse-embedded-chat,
#conversejs { #conversejs {
margin-left: -$chat-gutter; // It's a mystery why this is necessary margin-left: -$chat-gutter; // Mystery why this is necessary
bottom: 0; bottom: 0;
height: auto; height: auto;
width: 100vw; width: 100vw;
@ -44,9 +44,8 @@
} }
canvas { canvas {
background:#000; background: $text-color;
border-radius:4px; border-radius: $chatbox-border-radius;
margin: 2px 0;
} }
.circle { .circle {
@ -390,8 +389,3 @@
left: 0; left: 0;
} }
} }
@media screen and (max-width: 480px) {
#conversejs {
width: auto;
}
}

2
sass/_roster.scss
View File

@ -150,6 +150,8 @@
.open-chat { .open-chat {
margin: auto; margin: auto;
margin-top: 0.5em;
margin-bottom: 0;
padding: 0; padding: 0;
width: 85%; width: 85%;
&.unread-msgs { &.unread-msgs {

2
sass/converse/_minimized_chats.scss
View File

@ -17,6 +17,7 @@
border-top-right-radius: $chatbox-border-radius; border-top-right-radius: $chatbox-border-radius;
background-color: $link-color; background-color: $link-color;
border: 1px solid white; border: 1px solid white;
border-bottom: none;
padding: 0.5em 0; padding: 0.5em 0;
text-align: center; text-align: center;
color: white; color: white;
@ -53,6 +54,7 @@
height: 35px; height: 35px;
margin-bottom: 0.2em; margin-bottom: 0.2em;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
width: 100%;
} }
&.minimized { &.minimized {
height: auto; height: auto;

2
sass/converse/_variables.scss
View File

@ -84,6 +84,8 @@ $online-color: $green !default;
$error-color: $darkest-red !default; $error-color: $darkest-red !default;
$info-color: $dark-green !default; $info-color: $dark-green !default;
$rounded-border-radius: 4px !default;
$button-border-radius: 5px !default; $button-border-radius: 5px !default;
$chatbox-border-radius: 4px !default; $chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default; $bottom-gutter-height: 35px !default;

5
sass/inverse/_chatbox.scss
View File

@ -61,7 +61,7 @@
} }
.chat-title { .chat-title {
font-size: $font-size-huge; font-size: $font-size-huge;
line-height: $font-size-huge; line-height: $line-height-huge;
} }
.sendXMPPMessage { .sendXMPPMessage {
@ -90,9 +90,6 @@
#conversejs.fullscreen { #conversejs.fullscreen {
.chatbox { .chatbox {
width: calc(100% - 50px); width: calc(100% - 50px);
.row {
width: calc(100% - 50px);
}
} }
} }
} }

4
sass/inverse/_controlbox.scss
View File

@ -2,6 +2,10 @@
#controlbox { #controlbox {
margin: 0; margin: 0;
.controlbox-pane {
border-radius: 0;
}
#login-dialog { #login-dialog {
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
.converse-form { .converse-form {

5
sass/inverse/_variables.scss
View File

@ -87,8 +87,10 @@ $online-color: $green !default;
$error-color: $darkest-red !default; $error-color: $darkest-red !default;
$info-color: $dark-green !default; $info-color: $dark-green !default;
$rounded-border-radius: 4px !default;
$button-border-radius: 5px !default; $button-border-radius: 5px !default;
$chatbox-border-radius: 0 !default; $chatbox-border-radius: 4px !default;
$bottom-gutter-height: 35px !default; $bottom-gutter-height: 35px !default;
$chatbox-hover-height: 6px !default; $chatbox-hover-height: 6px !default;
@ -107,6 +109,7 @@ $toolbar-color: $greenish-white !default;
$line-height-small: 20px !default; $line-height-small: 20px !default;
$line-height: 22px !default; $line-height: 22px !default;
$line-height-large: 24px !default;
$line-height-huge: 30px !default; $line-height-huge: 30px !default;
$controlbox-width: 250px !default; $controlbox-width: 250px !default;