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

Combine inverse/converse chatrooms css 

updates #1091
This commit is contained in:
JC Brand 2018-05-24 12:44:18 +02:00
parent 63f659326b
commit a85401627c
13 changed files with 236 additions and 174 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

62
css/converse.css
View File

@ -8208,7 +8208,7 @@ body.reset {
#conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
#conversejs .chat-head-chatroom .chatroom-description {
color: #f6ccc1;
font-size: 16px;
font-size: 14px;
font-size: 70%;
margin-top: 3px;
overflow-y: hidden;
@ -8455,15 +8455,69 @@ body.reset {
width: 100%;
border: 1px solid #999; }
#conversejs .chatbox.chatroom {
/* ******************* Overlay styles *************************** */
#conversejs.converse-overlayed .chatbox.chatroom {
min-width: 400px !important;
width: 400px; }
#conversejs .chatbox.chatroom .box-flyout {
#conversejs.converse-overlayed .chatbox.chatroom .box-flyout {
min-width: 400px !important;
width: 400px; }
#conversejs .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
#conversejs.converse-overlayed .chatbox.chatroom .chatbox-title {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; }
#conversejs.converse-overlayed .chatbox.chatroom .chatbox-title .chatroom-description {
font-size: 80%; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
font-size: 12px; }
/* ******************* Fullpage styles *************************** */
#conversejs.converse-fullscreen .chatroom .box-flyout,
#conversejs.converse-mobile .chatroom .box-flyout {
background-color: #E77051;
border: 1.2em solid #E77051;
border-top: 0.8em solid #E77051;
width: 100%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title,
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-title {
flex: 0 0 75%;
max-width: 75%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title .chatroom-description,
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-title .chatroom-description {
font-size: 70%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body {
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chatroom-form-container,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chatroom-form-container {
border-radius: 4px; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area {
border-top-left-radius: 4px;
min-width: auto; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
border-top-left-radius: 4px; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full {
max-width: 100%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .chat-area.full .new-msgs-indicator {
max-width: 100%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants {
border-top-right-radius: 4px;
padding: 1em; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
font-size: 16px; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
font-size: 12px; }
#conversejs.converse-fullscreen .chatroom .room-invite span .invited-contact,
#conversejs.converse-mobile .chatroom .room-invite span .invited-contact {
margin: 0 0 0.5em -1px; }
#conversejs .chatbox.headlines .chat-head.chat-head-chatbox {
background-color: #E7A151; }
#conversejs .chatbox.headlines .chat-body {

106
css/inverse.css
View File

@ -6865,7 +6865,7 @@ body.reset {
padding-right: env(safe-area-inset-right);
color: #666;
font-family: "Helvetica", "Arial", sans-serif;
font-size: 16px;
font-size: 14px;
direction: ltr;
z-index: 1031; }
#conversejs .brand-heading {
@ -6927,7 +6927,7 @@ body.reset {
#conversejs input[type=submit], #conversejs input[type=button],
#conversejs input[type=text], #conversejs input[type=password],
#conversejs button {
font-size: 16px;
font-size: 14px;
padding: 0.25em;
min-height: 0; }
#conversejs strong {
@ -7438,7 +7438,7 @@ body {
font-family: "Century Gothic", futura, "URW Gothic L", Verdana, sans-serif;
color: white;
display: block;
line-height: 24px;
line-height: 20px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
@ -7552,7 +7552,7 @@ body {
color: #3AA569; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa, #conversejs .chatbox .sendXMPPMessage .chat-toolbar .fa:hover {
color: #3AA569;
font-size: 18px; }
font-size: 16px; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted a,
#conversejs .chatbox .sendXMPPMessage .chat-toolbar .unencrypted {
color: #666; }
@ -7608,7 +7608,7 @@ body {
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji:hover {
background-color: #DCF9F6; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a {
font-size: 26px; }
font-size: 20px; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li.insert-emoji a:hover {
color: #8f2831; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li.toggle-smiley a.toggle-smiley {
@ -7624,7 +7624,7 @@ body {
#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 {
padding: 0.2em;
font-size: 26px; }
font-size: 20px; }
#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 {
background-color: #DCF9F6; }
@ -7681,7 +7681,7 @@ body {
height: 100vh;
box-shadow: none; } }
#conversejs.fullscreen .chatbox-btn {
font-size: 18px;
font-size: 16px;
margin: 0 0.3em; }
#conversejs.fullscreen .flyout {
border-radius: 0;
@ -7694,7 +7694,7 @@ body {
#conversejs.fullscreen .chat-head .user-custom-message {
font-size: 50%;
height: auto;
line-height: 22px; }
line-height: 16px; }
#conversejs.fullscreen .chatbox {
width: 100%;
height: 100%;
@ -7722,21 +7722,21 @@ body {
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
#conversejs.fullscreen .chatbox .chat-body .chat-message {
line-height: 22px;
font-size: 14px; }
line-height: 16px;
font-size: 12px; }
#conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-author {
line-height: 22px; }
line-height: 16px; }
#conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-content {
line-height: 22px; }
line-height: 16px; }
#conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-content .emojione {
height: 22px;
margin-bottom: -5.5px; }
height: 16px;
margin-bottom: -4px; }
#conversejs.fullscreen .chatbox .chat-content {
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
#conversejs.fullscreen .chatbox .chat-title {
font-size: 26px;
line-height: 30px; }
font-size: 20px;
line-height: 24px; }
#conversejs.fullscreen .chatbox .sendXMPPMessage ul {
width: 100%; }
#conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
@ -7759,14 +7759,14 @@ body {
#conversejs .set-xmpp-status .fa-times-circle, #conversejs .xmpp-status .fa-times-circle, #conversejs .roster-contacts .fa-times-circle {
color: #A8ABA1; }
#conversejs .room-info {
font-size: 14px;
font-size: 12px;
font-style: normal;
font-weight: normal; }
#conversejs .room-info li.room-info {
display: block;
margin-left: 5px; }
#conversejs .room-info p.room-info {
line-height: 22px;
line-height: 16px;
margin: 0;
display: block;
white-space: normal; }
@ -7821,7 +7821,7 @@ body {
color: #A53214;
margin: 1em 0; }
#conversejs #controlbox #converse-register .provider-title {
font-size: 26px;
font-size: 20px;
margin: 0; }
#conversejs #controlbox #converse-register .provider-score {
width: 178px;
@ -7870,7 +7870,7 @@ body {
margin-left: 0;
color: #666; }
#conversejs #controlbox .oauth-login .icon-social:before {
font-size: 18px; }
font-size: 16px; }
#conversejs #controlbox .controlbox-pane .userinfo {
padding-bottom: 1em; }
#conversejs #controlbox .controlbox-pane .userinfo .username {
@ -7932,7 +7932,7 @@ body {
#conversejs #controlbox .controlbox-pane {
background-color: white;
border: 0;
font-size: 16px;
font-size: 14px;
left: 0;
text-align: left;
overflow-x: hidden;
@ -8067,7 +8067,7 @@ body {
#conversejs.fullscreen #controlbox #converse-login-panel .converse-form {
padding: 3em 2em 3em; }
#conversejs.fullscreen #controlbox .toggle-register-login {
line-height: 30px; }
line-height: 24px; }
#conversejs.fullscreen #controlbox .brand-heading-container {
flex: 0 0 100%;
max-width: 100%;
@ -8167,9 +8167,9 @@ body {
#conversejs #converse-roster .roster-filter-form .roster-filter {
width: 100%;
margin: 0.2em;
font-size: calc(16px - 2px); }
font-size: calc(14px - 2px); }
#conversejs #converse-roster .roster-filter-form .state-type {
font-size: calc(16px - 2px);
font-size: calc(14px - 2px);
height: 30px;
width: 100%; }
#conversejs #converse-roster .roster-contacts {
@ -8200,12 +8200,12 @@ body {
display: block;
overflow-y: hidden;
text-shadow: 0 1px 0 #FAFAFA;
line-height: 16px;
line-height: 14px;
width: 100%;
height: 2em;
padding-top: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a {
line-height: 22px; }
line-height: 16px; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact a.fa {
width: 1.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.requesting-xmpp-contact .req-contact-name {
@ -8227,7 +8227,7 @@ body {
opacity: 1;
border-radius: 10%;
padding: 0.2em;
font-size: 14px; }
font-size: 12px; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .contact-name {
overflow: hidden;
white-space: nowrap;
@ -8244,7 +8244,7 @@ body {
display: inline-block;
height: 30px; }
#conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
font-size: 16px;
font-size: 14px;
float: left;
margin-right: 0.5em; }
#conversejs #converse-roster .roster-contacts .roster-group li.odd {
@ -8266,13 +8266,13 @@ body {
width: 2em;
display: none; }
#conversejs #converse-roster .roster-contacts .roster-group li .remove-xmpp-contact:before {
font-size: 16px; }
font-size: 14px; }
#conversejs #converse-roster .roster-contacts .roster-group li:hover {
background-color: #eff4f7; }
#conversejs #converse-roster .roster-contacts .roster-group li:hover .remove-xmpp-contact {
display: inline-block; }
#conversejs #converse-roster span.pending-contact-name {
line-height: 22px;
line-height: 16px;
width: 100%; }
#conversejs .list-container {
@ -8374,7 +8374,7 @@ body {
#conversejs.converse-embedded .chat-head-chatroom .chatroom-description,
#conversejs .chat-head-chatroom .chatroom-description {
color: #f6ccc1;
font-size: 18px;
font-size: 14px;
font-size: 70%;
margin-top: 3px;
overflow-y: hidden;
@ -8398,10 +8398,10 @@ body {
color: #E77051; }
#conversejs.converse-embedded .chat-head-chatroom .chat-title .chatroom-jid,
#conversejs .chat-head-chatroom .chat-title .chatroom-jid {
font-size: 14px; }
font-size: 12px; }
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
width: 300px; }
width: 400px; }
@media screen and (max-height: 450px) {
#conversejs.converse-embedded .chatroom,
#conversejs .chatroom {
@ -8530,7 +8530,7 @@ body {
#conversejs .chatroom .box-flyout .chatroom-body .occupants ul li {
cursor: default;
display: block;
font-size: 14px;
font-size: 12px;
overflow: hidden;
padding: 0.25em 0.25em 0.25em 0;
text-overflow: ellipsis; }
@ -8579,7 +8579,7 @@ body {
border-bottom-right-radius: 4px;
border: 0;
color: #666;
font-size: 16px;
font-size: 14px;
height: 100%;
width: 100%;
overflow-y: auto; }
@ -8621,19 +8621,35 @@ body {
width: 100%;
border: 1px solid #999; }
#conversejs.converse-fullscreen .chat-head-chatroom,
#conversejs.converse-mobile .chat-head-chatroom {
height: 62px;
font-size: 20px; }
#conversejs.converse-fullscreen .chat-head-chatroom .chat-title .chatroom-description,
#conversejs.converse-mobile .chat-head-chatroom .chat-title .chatroom-description {
font-size: 65%; }
/* ******************* Overlay styles *************************** */
#conversejs.converse-overlayed .chatbox.chatroom {
min-width: 400px !important;
width: 400px; }
#conversejs.converse-overlayed .chatbox.chatroom .box-flyout {
min-width: 400px !important;
width: 400px; }
#conversejs.converse-overlayed .chatbox.chatroom .chatbox-title {
flex: 0 0 66.6666666667%;
max-width: 66.6666666667%; }
#conversejs.converse-overlayed .chatbox.chatroom .chatbox-title .chatroom-description {
font-size: 80%; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
font-size: 12px; }
/* ******************* Fullpage styles *************************** */
#conversejs.converse-fullscreen .chatroom .box-flyout,
#conversejs.converse-mobile .chatroom .box-flyout {
background-color: #E77051;
border: 1.2em solid #E77051;
border-top: 0.8em solid #E77051;
width: 100%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title,
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-title {
flex: 0 0 75%;
max-width: 75%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatbox-title .chatroom-description,
#conversejs.converse-mobile .chatroom .box-flyout .chatbox-title .chatroom-description {
font-size: 70%; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body {
border-top-left-radius: 4px;
@ -8660,10 +8676,10 @@ body {
padding: 1em; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants .occupants-heading,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants .occupants-heading {
font-size: 18px; }
font-size: 16px; }
#conversejs.converse-fullscreen .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li,
#conversejs.converse-mobile .chatroom .box-flyout .chatroom-body .occupants ul.occupant-list li {
font-size: 14px; }
font-size: 12px; }
#conversejs.converse-fullscreen .chatroom .room-invite span .invited-contact,
#conversejs.converse-mobile .chatroom .room-invite span .invited-contact {
margin: 0 0 0.5em -1px; }
@ -8710,7 +8726,7 @@ body {
#conversejs .message.chat-info {
color: #3AA569;
font-size: 14px;
line-height: 20px;
line-height: 14px;
padding: 0.35rem 1rem; }
#conversejs .message.chat-info.badge {
color: white; }

4
dev.html
View File

@ -26,14 +26,14 @@
// 'prosody@conference.prosody.im',
// 'jdev@conference.jabber.org'
// ],
// websocket_url: 'ws://chat.example.org:5280/xmpp-websocket',
websocket_url: 'ws://chat.example.org:5280/xmpp-websocket',
view_mode: 'fullscreen',
archived_messages_page_size: '500',
allow_public_bookmarks: true,
notify_all_room_messages: [
'discuss@conference.conversejs.org'
],
// bosh_service_url: 'http://chat.example.org:5280/http-bind/',
bosh_service_url: 'http://chat.example.org:5280/http-bind/',
bosh_service_url: 'https://conversejs.org/http-bind/', // Please use this connection manager only for testing purposes
message_archiving: 'always',
debug: true

2
mockup/chatroom.html
View File

@ -23,7 +23,7 @@
<div class="chatbox chatroom" id="chatroom">
<div class="flyout box-flyout">
<div class="chat-head chat-head-chatroom row no-gutters">
<div class="col col-9">
<div class="chatbox-title">
<div class="chat-title">Capulet's orchard</div>
<p class="chatroom-description">Two households, both alike in dignity, In fair Verona, where we lay our scene.</p>
</div>

95
sass/_chatrooms.scss
View File

@ -12,7 +12,7 @@
.chatroom-description {
color: lighten($chatroom-head-color, 25%);
font-size: $font-size-large;
font-size: $font-size;
font-size: 70%;
margin-top: 3px;
overflow-y: hidden;
@ -291,3 +291,96 @@
}
}
}
/* ******************* Overlay styles *************************** */
#conversejs.converse-overlayed {
.chatbox {
&.chatroom {
min-width: $chatroom-width !important;
width: $chatroom-width;
.box-flyout {
min-width: $chatroom-width !important;
width: $chatroom-width;
}
.chatbox-title {
@include make-col(8);
.chatroom-description {
font-size: 80%;
}
}
.chatroom-body {
.occupants {
.chatroom-features {
.feature {
font-size: $font-size-small;
}
}
}
}
}
}
}
/* ******************* Fullpage styles *************************** */
#conversejs.converse-fullscreen,
#conversejs.converse-mobile {
.chatroom {
.box-flyout {
background-color: $chatroom-head-color;
border: $flyout-padding solid $chatroom-head-color;
border-top: 0.8em solid $chatroom-head-color;
width: 100%;
.chatbox-title {
@include make-col(9);
.chatroom-description {
font-size: 70%;
}
}
.chatroom-body {
@include border-top-radius($chatbox-border-radius);
.chatroom-form-container {
border-radius: $chatbox-border-radius;
}
.chat-area {
border-top-left-radius: $chatbox-border-radius;
min-width: auto;
.chat-content {
border-top-left-radius: $chatbox-border-radius;
}
&.full {
max-width: 100%;
.new-msgs-indicator {
max-width: 100%;
}
}
}
.occupants {
border-top-right-radius: $chatbox-border-radius;;
padding: $occupants-padding;
.occupants-heading {
font-size: $font-size-large;
}
ul {
&.occupant-list {
li {
font-size: $font-size-small;
}
}
}
}
}
}
.room-invite {
span {
.invited-contact {
margin: 0 0 0.5em -1px;
}
}
}
}
}

21
sass/_variables.scss
View File

@ -63,6 +63,8 @@ $message-them-color: $green !default;
$roster-height: 194px !default;
$flyout-padding: 1.2em;
$chat-head-color: $green !default;
$chat-head-text-color: white !default;
$chat-head-inverse-text-color: white !default;
@ -110,10 +112,11 @@ $font-path: "../fonticons/fonts/" !default;
$normal-font: "Helvetica", "Arial", sans-serif;
$heading-font: 'Century Gothic', futura, 'URW Gothic L', Verdana, sans-serif !default;
$chatroom-head-color: $red !default;
$chatroom-color-light: $light-red !default;
$chatroom-color-dark: $darkest-red !default;
$chatroom-color-light: $light-red !default;
$chatroom-head-color: $red !default;
$chatroom-message-them-color: $green !default;
$chatroom-width: 400px !default;
$headline-head-color: $orange !default;
@ -124,3 +127,17 @@ $box-close-button-padding-right: 4px !default;
$chatbox-button-size: 14px !default;
$fullpage-chatbox-button-size: 16px !default;
$font-size-small: 12px !default;
$font-size: 14px !default;
$font-size-large: 16px !default;
$font-size-huge: 20px !default;
$legend-font-size: 16px !default;
$line-height-small: 14px !default;
$line-height: 16px !default;
$line-height-large: 20px !default;
$line-height-huge: 24px !default;
$occupants-padding: 1em;

1
sass/converse.scss
View File

@ -49,7 +49,6 @@
@import "roomslist";
@import "roster";
@import "chatrooms";
@import "converse/chatrooms";
@import "headline";
@import "messages";
@import "converse/minimized_chats";

22
sass/converse/_chatrooms.scss
View File

@ -1,22 +0,0 @@
#conversejs {
.chatbox {
&.chatroom {
min-width: $chatroom-width !important;
width: $chatroom-width;
.box-flyout {
min-width: $chatroom-width !important;
width: $chatroom-width;
}
.chatroom-body {
.occupants {
.chatroom-features {
.feature {
font-size: $font-size-small;
}
}
}
}
}
}
}

12
sass/converse/_variables.scss
View File

@ -10,17 +10,5 @@ $controlbox-head-height: 55px !default;
$chatbox-hover-height: 1em !default;
$font-size-small: 12px !default;
$font-size: 14px !default;
$font-size-large: 16px !default;
$font-size-huge: 20px !default;
$legend-font-size: 16px !default;
$line-height-small: 14px !default;
$line-height: 16px !default;
$line-height-large: 20px !default;
$chat-width: 250px !default;
$chat-height: 450px !default;
$chatroom-width: 400px !default;

1
sass/inverse.scss
View File

@ -51,7 +51,6 @@
@import "inverse/roster";
@import "bookmarks";
@import "chatrooms";
@import "inverse/chatrooms";
@import "headline";
@import "inverse/headline";
@import "messages";

64
sass/inverse/_chatrooms.scss
View File

@ -1,64 +0,0 @@
#conversejs.converse-fullscreen,
#conversejs.converse-mobile {
.chat-head-chatroom {
height: $chatroom-head-height;
font-size: 20px;
.chat-title {
.chatroom-description {
font-size: 65%;
}
}
}
.chatroom {
.box-flyout {
background-color: $chatroom-head-color;
border: $flyout-padding solid $chatroom-head-color;
border-top: 0.8em solid $chatroom-head-color;
width: 100%;
.chatroom-body {
@include border-top-radius($chatbox-border-radius);
.chatroom-form-container {
border-radius: $chatbox-border-radius;
}
.chat-area {
border-top-left-radius: $chatbox-border-radius;
min-width: auto;
.chat-content {
border-top-left-radius: $chatbox-border-radius;
}
&.full {
max-width: 100%;
.new-msgs-indicator {
max-width: 100%;
}
}
}
.occupants {
border-top-right-radius: $chatbox-border-radius;;
padding: $padding;
.occupants-heading {
font-size: $font-size-large;
}
ul {
&.occupant-list {
li {
font-size: $font-size-small;
}
}
}
}
}
}
.room-invite {
span {
.invited-contact {
margin: 0 0 0.5em -1px;
}
}
}
}
}

18
sass/inverse/_variables.scss
View File

@ -3,8 +3,6 @@ $emoji-picker-height: 150px !default;
$roster-item-height: 30px !default;
$flyout-padding: 1.2em;
$chat-head-height: 62px !default;
$controlbox-dropdown-height: 30px !default;
@ -14,21 +12,5 @@ $rounded-border-radius: 4px !default;
$chatbox-hover-height: 6px !default;
$font-size-small: 14px !default;
$font-size: 16px !default;
$font-size-large: 18px !default;
$font-size-huge: 26px !default;
$legend-font-size: 18px !default;
$line-height-small: 20px !default;
$line-height: 22px !default;
$line-height-large: 24px !default;
$line-height-huge: 30px !default;
$chat-width: 100% !default;
$chat-height: 100%;
$padding: 1em;
$chatroom-head-height: 62px !default;
$chatroom-width: 300px !default;

2
src/templates/chatroom_head.html
View File

@ -1,4 +1,4 @@
<div class="col">
<div class="chatbox-title">
<div class="chat-title" title="{{{o.jid}}}">
{[ if (o.name && o.name !== o.Strophe.getNodeFromJid(o.jid)) { ]}
{{{ o.name }}}