Skip to content

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

Remove sass/inverse/_chatbox.scss 

updates #1091
parent 082b1fea
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 245 additions and 207 deletions
css/converse.css
View file @ f582fdad
......@@ -7678,21 +7678,78 @@ body.reset {
margin: -1em; } }
/* ******************* Fullpage styles *************************** */
#conversejs.converse-fullscreen .flyout {
bottom: 6px; }
#conversejs.converse-fullscreen .box-flyout {
height: 100%;
min-height: 50%; }
border-radius: 0;
border-top: 0.8em solid #3AA569;
border: 1.2em solid #3AA569;
bottom: 0; }
#conversejs.converse-fullscreen .chatbox-btn {
font-size: 16px; }
font-size: 16px;
margin: 0 0.3em; }
#conversejs.converse-fullscreen .chat-head {
height: 62px; }
height: 62px;
font-size: 20px;
padding: 0; }
#conversejs.converse-fullscreen .chat-head .chatbox-buttons {
flex: 0 0 25%;
max-width: 25%; }
#conversejs.converse-fullscreen .chat-head .user-custom-message {
font-size: 50%;
height: auto;
line-height: 16px; }
#conversejs.converse-fullscreen .chat-textarea {
max-height: 400px; }
#conversejs.converse-fullscreen .emoji-picker {
height: 150px; }
#conversejs.converse-fullscreen .chatbox {
width: 100%;
height: 100%;
margin: 0;
position: relative;
width: 100%;
min-height: 1px;
padding-right: 15px;
padding-left: 15px; }
@media (min-width: 768px) {
#conversejs.converse-fullscreen .chatbox {
flex: 0 0 75%;
max-width: 75%; } }
@media (min-width: 1200px) {
#conversejs.converse-fullscreen .chatbox {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%; } }
#conversejs.converse-fullscreen .chatbox .box-flyout {
background-color: #3AA569;
box-shadow: none;
height: 100vh;
min-height: 50vh;
width: 100%; }
#conversejs.converse-fullscreen .chatbox .chat-body {
background-color: #3AA569;
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
#conversejs.converse-fullscreen .chatbox .chat-body .chat-message {
line-height: 16px;
font-size: 12px; }
#conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-author {
line-height: 16px; }
#conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-content {
line-height: 16px; }
#conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-content .emojione {
height: 16px;
margin-bottom: -4px; }
#conversejs.converse-fullscreen .chatbox .chat-content {
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
#conversejs.converse-fullscreen .chatbox .chat-title {
font-size: 20px;
line-height: 24px; }
#conversejs.converse-fullscreen .chatbox .sendXMPPMessage ul {
width: 100%; }
#conversejs.converse-fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
margin-right: 5em; }
#conversejs.converse-fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
padding-left: 10px;
padding-right: 10px; }
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) > .row {
......@@ -7708,6 +7765,9 @@ body.reset {
bottom: 0;
height: 100vh;
box-shadow: none; } }
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded).converse-fullscreen .chatbox {
width: calc(100% - 50px); } }
#conversejs .set-xmpp-status .fa-circle, #conversejs .xmpp-status .fa-circle, #conversejs .roster-contacts .fa-circle {
color: #3AA569; }
#conversejs .set-xmpp-status .fa-minus-circle, #conversejs .xmpp-status .fa-minus-circle, #conversejs .roster-contacts .fa-minus-circle {
......@@ -8320,9 +8380,6 @@ body.reset {
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .chat-content,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .chat-content {
height: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area.full,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area.full {
min-width: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .occupants,
#conversejs .chatroom .box-flyout .chatroom-body .occupants {
display: flex;
......@@ -8512,8 +8569,7 @@ body.reset {
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; }
border-top-left-radius: 4px; }
#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; }
......
css/inverse.css
View file @ f582fdad
This diff is collapsed.
sass/_chatbox.scss
View file @ f582fdad
......@@ -525,20 +525,27 @@
#conversejs.converse-fullscreen {
.flyout {
bottom: $fullpage-chatbox-hover-height;
}
.box-flyout {
height: $fullpage-chat-height;
min-height: $fullpage-chat-height/2;
border-radius: 0;
border-top: 0.8em solid $chat-head-color;
border: $flyout-padding solid $chat-head-color;
bottom: 0;
}
.chatbox-btn {
font-size: $fullpage-chatbox-button-size;
margin: 0 0.3em;
}
.chat-head {
height: $fullpage-chat-head-height;
.chatbox-buttons {
@include make-col(3);
}
font-size: $font-size-huge;
padding: 0;
.user-custom-message {
font-size: 50%;
height: auto;
line-height: $line-height;
}
}
.chat-textarea {
max-height: $fullpage-max-chat-textarea-height;
......@@ -546,6 +553,74 @@
.emoji-picker {
height: $fullpage-emoji-picker-height;
}
.chatbox {
width: 100%;
height: 100%;
margin: 0;
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(9);
}
@include media-breakpoint-up(xl) {
@include make-col(10);
}
.box-flyout {
background-color: $chat-head-color;
box-shadow: none;
height: $fullpage-chat-height;
min-height: $fullpage-chat-height/2;
width: $fullpage-chat-width;
}
.chat-body {
background-color: $chat-head-color;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
.chat-message {
line-height: $line-height;
font-size: $font-size-small;
.chat-msg-author {
line-height: $line-height;
}
.chat-msg-content {
line-height: $line-height;
.emojione {
height: $line-height;
margin-bottom: -$line-height/4;
}
}
}
}
.chat-content {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
}
.chat-title {
font-size: $font-size-huge;
line-height: $line-height-huge;
}
.sendXMPPMessage {
ul {
width: 100%;
}
.toggle-smiley {
ul {
&.emoji-toolbar {
.emoji-category-picker {
margin-right: 5em;
}
.emoji-category {
padding-left: 10px;
padding-right: 10px;
}
}
}
}
}
}
}
@media screen and (max-width: 767px) {
......@@ -577,3 +652,11 @@
}
}
}
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded).converse-fullscreen {
.chatbox {
width: calc(100% - 50px);
}
}
}
sass/_chatrooms.scss
View file @ f582fdad
......@@ -107,9 +107,6 @@
.chat-content {
height: 100%;
}
&.full {
min-width: 100%;
}
}
.occupants {
display: flex;
......@@ -278,20 +275,6 @@
}
}
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) {
.chatbox {
.box-flyout {
.chatroom-body {
.chat-area {
}
}
}
}
}
}
/* ******************* Overlay styles *************************** */
#conversejs.converse-overlayed {
......@@ -351,8 +334,6 @@
}
.chat-area {
border-top-left-radius: $chatbox-border-radius;
min-width: $fullpage-chat-width;
.chat-content {
border-top-left-radius: $chatbox-border-radius;
}
......
sass/_variables.scss
View file @ f582fdad
......@@ -132,6 +132,7 @@ $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;
......@@ -141,22 +142,15 @@ $line-height-huge: 24px !default;
$occupants-padding: 1em;
$overlayed-max-chat-textarea-height: 200px !default;
$fullpage-max-chat-textarea-height: 400px !default;
$fullpage-chat-head-height: 62px !default;
$fullpage-chat-height: 100vh;
$fullpage-chat-width: 100%;
$fullpage-emoji-picker-height: 150px !default;
$overlayed-emoji-picker-height: 100px !default;
$fullpage-max-chat-textarea-height: 400px !default;
$fullpage-chat-head-height: 62px !default;
$overlayed-chat-head-height: 55px !default;
$fullpage-chatbox-hover-height: 6px !default;
$overlayed-chatbox-hover-height: 1em !default;
$fullpage-chat-height: 100%;
$overlayed-chat-height: 450px !default;
$fullpage-chat-width: auto;
$overlayed-chat-width: 250px !default;
$roster-item-height: 30px !default;
$overlayed-chatbox-hover-height: 1em !default;
$overlayed-emoji-picker-height: 100px !default;
$overlayed-max-chat-textarea-height: 200px !default;
sass/inverse.scss
View file @ f582fdad
......@@ -41,7 +41,6 @@
@import "forms";
@import "profile";
@import "chatbox";
@import "inverse/chatbox";
@import "controlbox";
@import "inverse/controlbox";
@import "roster";
......
sass/inverse/_chatbox.scss deleted 100644 → 0
View file @ 082b1fea
#conversejs.converse-fullscreen {
.chatbox-btn {
font-size: $font-size-large;
margin: 0 0.3em;
}
.flyout {
border-radius: 0;
border: $flyout-padding solid $chat-head-color;
border-top: 0.8em solid $chat-head-color;
bottom: 0;
}
.chat-head {
font-size: 20px;
padding: 0;
.user-custom-message {
font-size: 50%;
height: auto;
line-height: $line-height;
}
}
.chatbox {
width: 100%;
height: 100%;
margin: 0;
@include make-col-ready();
@include media-breakpoint-up(md) {
@include make-col(9);
}
@include media-breakpoint-up(xl) {
@include make-col(10);
}
.box-flyout {
background-color: $chat-head-color;
height: 100vh;
width: 100%;
box-shadow: none;
}
.chat-body {
background-color: $chat-head-color;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
.chat-message {
line-height: $line-height;
font-size: $font-size-small;
.chat-msg-author {
line-height: $line-height;
}
.chat-msg-content {
line-height: $line-height;
.emojione {
height: $line-height;
margin-bottom: -$line-height/4;
}
}
}
}
.chat-content {
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
}
.chat-title {
font-size: $font-size-huge;
line-height: $line-height-huge;
}
.sendXMPPMessage {
ul {
width: 100%;
}
.toggle-smiley {
ul {
&.emoji-toolbar {
.emoji-category-picker {
margin-right: 5em;
}
.emoji-category {
padding-left: 10px;
padding-right: 10px;
}
}
}
}
}
}
}
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded).fullscreen {
.chatbox {
width: calc(100% - 50px);
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7