parent
63f659326b
commit
a85401627c
|
@ -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
106
css/inverse.css
|
@ -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
4
dev.html
|
@ -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
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -49,7 +49,6 @@
|
|||
@import "roomslist";
|
||||
@import "roster";
|
||||
@import "chatrooms";
|
||||
@import "converse/chatrooms";
|
||||
@import "headline";
|
||||
@import "messages";
|
||||
@import "converse/minimized_chats";
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -51,7 +51,6 @@
|
|||
@import "inverse/roster";
|
||||
@import "bookmarks";
|
||||
@import "chatrooms";
|
||||
@import "inverse/chatrooms";
|
||||
@import "headline";
|
||||
@import "inverse/headline";
|
||||
@import "messages";
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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;
|
||||
|
|
|
@ -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 }}}
|
||||
|
|
Loading…
Reference in New Issue
Block a user