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

Remove sass/inverse/_chatbox.scss

Browse Source 
updates #1091
This commit is contained in:
JC Brand 2018-05-24 14:28:05 +02:00
parent 082b1fea7c
commit f582fdad30
7 changed files with 245 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

78
css/converse.css
View File

@ -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; }

143
css/inverse.css
View File

@ -7614,6 +7614,51 @@ body.reset {
top: 0;
left: 0; }
/* ******************* Overlay and embedded styles *************************** */
#conversejs.converse-embedded .chat-head,
#conversejs.converse-overlayed .chat-head {
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
@media screen and (max-height: 450px) {
#conversejs.converse-embedded .chat-head,
#conversejs.converse-overlayed .chat-head {
border-top-left-radius: 0;
border-top-right-radius: 0; } }
@media screen and (max-width: 480px) {
#conversejs.converse-embedded .chat-head,
#conversejs.converse-overlayed .chat-head {
border-top-left-radius: 0;
border-top-right-radius: 0; } }
#conversejs.converse-embedded .chatbox,
#conversejs.converse-overlayed .chatbox {
min-width: 250px !important;
width: 250px; }
#conversejs.converse-embedded .chatbox .box-flyout,
#conversejs.converse-overlayed .chatbox .box-flyout {
min-width: 250px !important;
width: 250px; }
#conversejs.converse-embedded .chatbox .chat-body .chat-message,
#conversejs.converse-overlayed .chatbox .chat-body .chat-message {
line-height: 20px; }
#conversejs.converse-embedded .chatbox .chat-body .chat-message .chat-msg-author,
#conversejs.converse-overlayed .chatbox .chat-body .chat-message .chat-msg-author {
line-height: 20px; }
#conversejs.converse-embedded .chatbox .chat-body .chat-message .chat-msg-content,
#conversejs.converse-overlayed .chatbox .chat-body .chat-message .chat-msg-content {
line-height: 20px; }
#conversejs.converse-embedded .chatbox .chat-body .chat-message .chat-msg-content .emojione,
#conversejs.converse-overlayed .chatbox .chat-body .chat-message .chat-msg-content .emojione {
margin-bottom: -5px; }
#conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu,
#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu {
min-width: 235px; }
#conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar,
#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar {
width: 100%; }
#conversejs.converse-embedded .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category,
#conversejs.converse-overlayed .chatbox form.sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-toolbar .emoji-category {
float: left; }
#conversejs.converse-overlayed .flyout {
bottom: 1em; }
#conversejs.converse-overlayed .box-flyout {
@ -7626,52 +7671,35 @@ body.reset {
#conversejs.converse-overlayed .emoji-picker {
height: 100px; }
@media (max-width: 767.98px) {
#conversejs.converse-overlayed > .row {
flex-direction: column; }
#conversejs.converse-overlayed > .row.no-gutters {
margin: -1em; } }
/* ******************* Fullpage styles *************************** */
#conversejs.converse-fullscreen .flyout {
bottom: 6px; }
#conversejs.converse-fullscreen .box-flyout {
height: 100%;
min-height: 50%; }
#conversejs.converse-fullscreen .chatbox-btn {
font-size: 16px; }
#conversejs.converse-fullscreen .chat-head {
height: 62px; }
#conversejs.converse-fullscreen .chat-head .chatbox-buttons {
flex: 0 0 25%;
max-width: 25%; }
#conversejs.converse-fullscreen .chat-textarea {
max-height: 400px; }
#conversejs.converse-fullscreen .emoji-picker {
height: 150px; }
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) > .row {
flex-direction: row-reverse; }
#conversejs:not(.converse-embedded) #converse-login-panel .converse-form {
padding: 3em 2em 3em; }
#conversejs:not(.converse-embedded) .sidebar {
display: block; }
#conversejs:not(.converse-embedded) .chatbox {
width: calc(100% - 50px); }
#conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
left: 50px;
bottom: 0;
height: 100vh;
box-shadow: none; } }
border-radius: 0;
border-top: 0.8em solid #3AA569;
border: 1.2em solid #3AA569;
bottom: 0; }
#conversejs.converse-fullscreen .chatbox-btn {
font-size: 16px;
margin: 0 0.3em; }
#conversejs.converse-fullscreen .flyout {
border-radius: 0;
border: 1.2em solid #3AA569;
border-top: 0.8em solid #3AA569;
bottom: 0; }
#conversejs.converse-fullscreen .chat-head {
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%;
@ -7691,9 +7719,10 @@ body.reset {
max-width: 83.3333333333%; } }
#conversejs.converse-fullscreen .chatbox .box-flyout {
background-color: #3AA569;
box-shadow: none;
height: 100vh;
width: 100%;
box-shadow: none; }
min-height: 50vh;
width: 100%; }
#conversejs.converse-fullscreen .chatbox .chat-body {
background-color: #3AA569;
border-top-left-radius: 4px;
@ -7723,7 +7752,21 @@ body.reset {
padding-right: 10px; }
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded).fullscreen .chatbox {
#conversejs:not(.converse-embedded) > .row {
flex-direction: row-reverse; }
#conversejs:not(.converse-embedded) #converse-login-panel .converse-form {
padding: 3em 2em 3em; }
#conversejs:not(.converse-embedded) .sidebar {
display: block; }
#conversejs:not(.converse-embedded) .chatbox {
width: calc(100% - 50px); }
#conversejs:not(.converse-embedded) .chatbox .row .box-flyout {
left: 50px;
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; }
@ -8442,9 +8485,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;
@ -8634,8 +8674,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; }
@ -8803,27 +8842,20 @@ body.reset {
@media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) .message.chat-msg .chat-msg-author {
white-space: normal; } }
#converse-embedded-chat [hidden],
#conversejs [hidden] {
display: none; }
#converse-embedded-chat .visually-hidden,
#conversejs .visually-hidden {
position: absolute;
clip: rect(0, 0, 0, 0); }
#converse-embedded-chat .form-group .awesomplete,
#conversejs .form-group .awesomplete {
width: 100%; }
#converse-embedded-chat div.awesomplete,
#conversejs div.awesomplete {
display: inline-block;
position: relative; }
#converse-embedded-chat div.awesomplete mark,
#conversejs div.awesomplete mark {
background: #FFB9A7; }
#converse-embedded-chat div.awesomplete > input,
#conversejs div.awesomplete > input {
display: block; }
#converse-embedded-chat div.awesomplete > ul,
#conversejs div.awesomplete > ul {
position: absolute;
left: 0;
@ -8840,7 +8872,6 @@ body.reset {
border: 1px solid rgba(0, 0, 0, 0.3);
box-shadow: 0.05em 0.2em 0.6em rgba(0, 0, 0, 0.2);
text-shadow: none; }
#converse-embedded-chat div.awesomplete > ul:before,
#conversejs div.awesomplete > ul:before {
content: "";
position: absolute;
@ -8854,44 +8885,34 @@ body.reset {
border-bottom: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg); }
#converse-embedded-chat div.awesomplete > ul > li,
#conversejs div.awesomplete > ul > li {
text-overflow: ellipsis;
overflow-x: hidden;
position: relative;
cursor: pointer;
padding: 1em; }
#converse-embedded-chat div.awesomplete > ul[hidden],
#converse-embedded-chat div.awesomplete > ul:empty,
#conversejs div.awesomplete > ul[hidden],
#conversejs div.awesomplete > ul:empty {
display: none; }
@supports (transform: scale(0)) {
#converse-embedded-chat div.awesomplete > ul,
#conversejs div.awesomplete > ul {
transition: 0.3s cubic-bezier(0.4, 0.2, 0.5, 1.4);
transform-origin: 1.43em -.43em; }
#converse-embedded-chat div.awesomplete > ul[hidden],
#converse-embedded-chat div.awesomplete > ul:empty,
#conversejs div.awesomplete > ul[hidden],
#conversejs div.awesomplete > ul:empty {
opacity: 0;
transform: scale(0);
display: block;
transition-timing-function: ease; } }
#converse-embedded-chat div.awesomplete > ul > li:hover,
#conversejs div.awesomplete > ul > li:hover {
background: #E77051;
color: white; }
#converse-embedded-chat div.awesomplete > ul > li[aria-selected="true"],
#conversejs div.awesomplete > ul > li[aria-selected="true"] {
background: #3d6d8f;
color: white; }
#converse-embedded-chat div.awesomplete li:hover mark,
#conversejs div.awesomplete li:hover mark {
background: #A53214;
color: white; }
#converse-embedded-chat div.awesomplete li[aria-selected="true"] mark,
#conversejs div.awesomplete li[aria-selected="true"] mark {
background: #3d6b00;
color: inherit; }

93
sass/_chatbox.scss
View File

@ -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);
}
}
}

19
sass/_chatrooms.scss
View File

@ -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;
}

22
sass/_variables.scss
View File

@ -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-chat-head-height: 62px !default;
$fullpage-chat-height: 100vh;
$fullpage-chat-width: 100%;
$fullpage-emoji-picker-height: 150px !default;
$fullpage-max-chat-textarea-height: 400px !default;
$fullpage-emoji-picker-height: 150px !default;
$overlayed-emoji-picker-height: 100px !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;

1
sass/inverse.scss
View File

@ -41,7 +41,6 @@
@import "forms";
@import "profile";
@import "chatbox";
@import "inverse/chatbox";
@import "controlbox";
@import "inverse/controlbox";
@import "roster";

96
sass/inverse/_chatbox.scss
View File

@ -1,96 +0,0 @@
#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);
}
}
}