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

92
css/inverse.css
View File

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

14
sass/_chatbox.scss
View File

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

7
sass/_chatrooms.scss
View File

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

1
sass/_controlbox.scss
View File

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

12
sass/_core.scss
View File

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

2
sass/_roster.scss
View File

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

2
sass/converse/_minimized_chats.scss
View File

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

2
sass/converse/_variables.scss
View File

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

5
sass/inverse/_chatbox.scss
View File

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

4
sass/inverse/_controlbox.scss
View File

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

5
sass/inverse/_variables.scss
View File

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