Commit 251bea21 authored by JC Brand's avatar JC Brand

Put all Sass variables into one file.

updates #1091
parent 539234fa
...@@ -7287,7 +7287,6 @@ body.reset { ...@@ -7287,7 +7287,6 @@ body.reset {
#conversejs .flyout { #conversejs .flyout {
border-radius: 4px; border-radius: 4px;
bottom: 1em;
position: absolute; } position: absolute; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#conversejs .flyout { #conversejs .flyout {
...@@ -7316,7 +7315,6 @@ body.reset { ...@@ -7316,7 +7315,6 @@ body.reset {
flex-wrap: nowrap; flex-wrap: nowrap;
color: #ffffff; color: #ffffff;
font-size: 100%; font-size: 100%;
height: 55px;
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
position: relative; } position: relative; }
...@@ -7379,8 +7377,6 @@ body.reset { ...@@ -7379,8 +7377,6 @@ body.reset {
justify-content: space-between; justify-content: space-between;
background-color: #3AA569; background-color: #3AA569;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 450px;
min-height: 225px;
z-index: 1; z-index: 1;
overflow-y: scroll; overflow-y: scroll;
width: 100%; } width: 100%; }
...@@ -7488,7 +7484,6 @@ body.reset { ...@@ -7488,7 +7484,6 @@ body.reset {
width: 100%; width: 100%;
border: none; border: none;
min-height: 60px; min-height: 60px;
max-height: 200px;
margin-bottom: -4px; } margin-bottom: -4px; }
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler { #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
height: 42px; } height: 42px; }
...@@ -7553,7 +7548,6 @@ body.reset { ...@@ -7553,7 +7548,6 @@ body.reset {
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; } color: #578EA9; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
height: 100px;
overflow: scroll; overflow: scroll;
padding: 0.5em; } padding: 0.5em; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
...@@ -7620,11 +7614,34 @@ body.reset { ...@@ -7620,11 +7614,34 @@ body.reset {
top: 0; top: 0;
left: 0; } left: 0; }
#conversejs.converse-overlayed .flyout {
bottom: 1em; }
#conversejs.converse-overlayed .box-flyout {
height: 450px;
min-height: 225px; }
#conversejs.converse-overlayed .chat-head {
height: 55px; }
#conversejs.converse-overlayed .chat-textarea {
max-height: 200px; }
#conversejs.converse-overlayed .emoji-picker {
height: 100px; }
#conversejs.converse-fullscreen .flyout {
bottom: 6px; }
#conversejs.converse-fullscreen .box-flyout {
height: 100%;
min-height: 50%; }
#conversejs.converse-fullscreen .chatbox-btn { #conversejs.converse-fullscreen .chatbox-btn {
font-size: 16px; } font-size: 16px; }
#conversejs.converse-fullscreen .chat-head .chatbox-buttons { #conversejs.converse-fullscreen .chat-head {
height: 62px; }
#conversejs.converse-fullscreen .chat-head .chatbox-buttons {
flex: 0 0 25%; flex: 0 0 25%;
max-width: 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) { @media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) > .row { #conversejs:not(.converse-embedded) > .row {
...@@ -8072,7 +8089,6 @@ body.reset { ...@@ -8072,7 +8089,6 @@ body.reset {
position: relative; position: relative;
margin: 0; margin: 0;
height: 194px; height: 194px;
height: calc(~"100% - 50px - 20px");
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
height: calc(100% - 70px); height: calc(100% - 70px);
...@@ -8094,7 +8110,6 @@ body.reset { ...@@ -8094,7 +8110,6 @@ body.reset {
font-size: calc(14px - 2px); } font-size: calc(14px - 2px); }
#conversejs #converse-roster .roster-filter-form .state-type { #conversejs #converse-roster .roster-filter-form .state-type {
font-size: calc(14px - 2px); font-size: calc(14px - 2px);
height: 25px;
width: 100%; } width: 100%; }
#conversejs #converse-roster .roster-contacts { #conversejs #converse-roster .roster-contacts {
padding: 0; padding: 0;
...@@ -8165,8 +8180,7 @@ body.reset { ...@@ -8165,8 +8180,7 @@ body.reset {
max-width: 60%; } max-width: 60%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
float: left; float: left;
display: inline-block; display: inline-block; }
height: 60px; }
#conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span { #conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
font-size: 14px; font-size: 14px;
float: left; float: left;
...@@ -8297,8 +8311,7 @@ body.reset { ...@@ -8297,8 +8311,7 @@ body.reset {
#conversejs .chatroom .box-flyout .chatroom-body .chat-area { #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
word-wrap: break-word; word-wrap: break-word; }
min-width: 250px; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator { #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
background-color: #E77051; } background-color: #E77051; }
...@@ -8471,6 +8484,8 @@ body.reset { ...@@ -8471,6 +8484,8 @@ body.reset {
font-size: 80%; } font-size: 80%; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature { #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
font-size: 12px; } font-size: 12px; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .chat-area {
min-width: 250px; }
/* ******************* Fullpage styles *************************** */ /* ******************* Fullpage styles *************************** */
#conversejs.converse-fullscreen .chatroom .box-flyout, #conversejs.converse-fullscreen .chatroom .box-flyout,
......
...@@ -7287,7 +7287,6 @@ body.reset { ...@@ -7287,7 +7287,6 @@ body.reset {
#conversejs .flyout { #conversejs .flyout {
border-radius: 4px; border-radius: 4px;
bottom: 6px;
position: absolute; } position: absolute; }
@media screen and (max-height: 450px) { @media screen and (max-height: 450px) {
#conversejs .flyout { #conversejs .flyout {
...@@ -7316,7 +7315,6 @@ body.reset { ...@@ -7316,7 +7315,6 @@ body.reset {
flex-wrap: nowrap; flex-wrap: nowrap;
color: #ffffff; color: #ffffff;
font-size: 100%; font-size: 100%;
height: 62px;
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
position: relative; } position: relative; }
...@@ -7379,8 +7377,6 @@ body.reset { ...@@ -7379,8 +7377,6 @@ body.reset {
justify-content: space-between; justify-content: space-between;
background-color: #3AA569; background-color: #3AA569;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 100%;
min-height: 50%;
z-index: 1; z-index: 1;
overflow-y: scroll; overflow-y: scroll;
width: 100%; } width: 100%; }
...@@ -7488,7 +7484,6 @@ body.reset { ...@@ -7488,7 +7484,6 @@ body.reset {
width: 100%; width: 100%;
border: none; border: none;
min-height: 60px; min-height: 60px;
max-height: 400px;
margin-bottom: -4px; } margin-bottom: -4px; }
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler { #conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
height: 42px; } height: 42px; }
...@@ -7553,7 +7548,6 @@ body.reset { ...@@ -7553,7 +7548,6 @@ body.reset {
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; } color: #578EA9; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
height: 150px;
overflow: scroll; overflow: scroll;
padding: 0.5em; } padding: 0.5em; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li { #conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
...@@ -7620,11 +7614,34 @@ body.reset { ...@@ -7620,11 +7614,34 @@ body.reset {
top: 0; top: 0;
left: 0; } left: 0; }
#conversejs.converse-overlayed .flyout {
bottom: 1em; }
#conversejs.converse-overlayed .box-flyout {
height: 450px;
min-height: 225px; }
#conversejs.converse-overlayed .chat-head {
height: 55px; }
#conversejs.converse-overlayed .chat-textarea {
max-height: 200px; }
#conversejs.converse-overlayed .emoji-picker {
height: 100px; }
#conversejs.converse-fullscreen .flyout {
bottom: 6px; }
#conversejs.converse-fullscreen .box-flyout {
height: 100%;
min-height: 50%; }
#conversejs.converse-fullscreen .chatbox-btn { #conversejs.converse-fullscreen .chatbox-btn {
font-size: 16px; } font-size: 16px; }
#conversejs.converse-fullscreen .chat-head .chatbox-buttons { #conversejs.converse-fullscreen .chat-head {
height: 62px; }
#conversejs.converse-fullscreen .chat-head .chatbox-buttons {
flex: 0 0 25%; flex: 0 0 25%;
max-width: 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) { @media screen and (max-width: 767px) {
#conversejs:not(.converse-embedded) > .row { #conversejs:not(.converse-embedded) > .row {
...@@ -7640,22 +7657,22 @@ body.reset { ...@@ -7640,22 +7657,22 @@ body.reset {
bottom: 0; bottom: 0;
height: 100vh; height: 100vh;
box-shadow: none; } } box-shadow: none; } }
#conversejs.fullscreen .chatbox-btn { #conversejs.converse-fullscreen .chatbox-btn {
font-size: 16px; font-size: 16px;
margin: 0 0.3em; } margin: 0 0.3em; }
#conversejs.fullscreen .flyout { #conversejs.converse-fullscreen .flyout {
border-radius: 0; border-radius: 0;
border: 1.2em solid #3AA569; border: 1.2em solid #3AA569;
border-top: 0.8em solid #3AA569; border-top: 0.8em solid #3AA569;
bottom: 0; } bottom: 0; }
#conversejs.fullscreen .chat-head { #conversejs.converse-fullscreen .chat-head {
font-size: 20px; font-size: 20px;
padding: 0; } padding: 0; }
#conversejs.fullscreen .chat-head .user-custom-message { #conversejs.converse-fullscreen .chat-head .user-custom-message {
font-size: 50%; font-size: 50%;
height: auto; height: auto;
line-height: 16px; } line-height: 16px; }
#conversejs.fullscreen .chatbox { #conversejs.converse-fullscreen .chatbox {
width: 100%; width: 100%;
height: 100%; height: 100%;
margin: 0; margin: 0;
...@@ -7665,43 +7682,43 @@ body.reset { ...@@ -7665,43 +7682,43 @@ body.reset {
padding-right: 15px; padding-right: 15px;
padding-left: 15px; } padding-left: 15px; }
@media (min-width: 768px) { @media (min-width: 768px) {
#conversejs.fullscreen .chatbox { #conversejs.converse-fullscreen .chatbox {
flex: 0 0 75%; flex: 0 0 75%;
max-width: 75%; } } max-width: 75%; } }
@media (min-width: 1200px) { @media (min-width: 1200px) {
#conversejs.fullscreen .chatbox { #conversejs.converse-fullscreen .chatbox {
flex: 0 0 83.3333333333%; flex: 0 0 83.3333333333%;
max-width: 83.3333333333%; } } max-width: 83.3333333333%; } }
#conversejs.fullscreen .chatbox .box-flyout { #conversejs.converse-fullscreen .chatbox .box-flyout {
background-color: #3AA569; background-color: #3AA569;
height: 100vh; height: 100vh;
width: 100%; width: 100%;
box-shadow: none; } box-shadow: none; }
#conversejs.fullscreen .chatbox .chat-body { #conversejs.converse-fullscreen .chatbox .chat-body {
background-color: #3AA569; background-color: #3AA569;
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; } border-top-right-radius: 4px; }
#conversejs.fullscreen .chatbox .chat-body .chat-message { #conversejs.converse-fullscreen .chatbox .chat-body .chat-message {
line-height: 16px; line-height: 16px;
font-size: 12px; } font-size: 12px; }
#conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-author { #conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-author {
line-height: 16px; } line-height: 16px; }
#conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-content { #conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-content {
line-height: 16px; } line-height: 16px; }
#conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-content .emojione { #conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-content .emojione {
height: 16px; height: 16px;
margin-bottom: -4px; } margin-bottom: -4px; }
#conversejs.fullscreen .chatbox .chat-content { #conversejs.converse-fullscreen .chatbox .chat-content {
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-top-right-radius: 4px; } border-top-right-radius: 4px; }
#conversejs.fullscreen .chatbox .chat-title { #conversejs.converse-fullscreen .chatbox .chat-title {
font-size: 20px; font-size: 20px;
line-height: 24px; } line-height: 24px; }
#conversejs.fullscreen .chatbox .sendXMPPMessage ul { #conversejs.converse-fullscreen .chatbox .sendXMPPMessage ul {
width: 100%; } width: 100%; }
#conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker { #conversejs.converse-fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category-picker {
margin-right: 5em; } margin-right: 5em; }
#conversejs.fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category { #conversejs.converse-fullscreen .chatbox .sendXMPPMessage .toggle-smiley ul.emoji-toolbar .emoji-category {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; } padding-right: 10px; }
...@@ -8108,7 +8125,6 @@ body.reset { ...@@ -8108,7 +8125,6 @@ body.reset {
position: relative; position: relative;
margin: 0; margin: 0;
height: 194px; height: 194px;
height: calc(~"100% - 60px - 20px");
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
height: calc(100% - 70px); height: calc(100% - 70px);
...@@ -8130,7 +8146,6 @@ body.reset { ...@@ -8130,7 +8146,6 @@ body.reset {
font-size: calc(14px - 2px); } font-size: calc(14px - 2px); }
#conversejs #converse-roster .roster-filter-form .state-type { #conversejs #converse-roster .roster-filter-form .state-type {
font-size: calc(14px - 2px); font-size: calc(14px - 2px);
height: 30px;
width: 100%; } width: 100%; }
#conversejs #converse-roster .roster-contacts { #conversejs #converse-roster .roster-contacts {
padding: 0; padding: 0;
...@@ -8201,8 +8216,7 @@ body.reset { ...@@ -8201,8 +8216,7 @@ body.reset {
max-width: 60%; } max-width: 60%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar { #conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
float: left; float: left;
display: inline-block; display: inline-block; }
height: 30px; }
#conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span { #conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
font-size: 14px; font-size: 14px;
float: left; float: left;
...@@ -8421,8 +8435,7 @@ body.reset { ...@@ -8421,8 +8435,7 @@ body.reset {
#conversejs .chatroom .box-flyout .chatroom-body .chat-area { #conversejs .chatroom .box-flyout .chatroom-body .chat-area {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
word-wrap: break-word; word-wrap: break-word; }
min-width: 100%; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator, #conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator { #conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
background-color: #E77051; } background-color: #E77051; }
...@@ -8595,6 +8608,8 @@ body.reset { ...@@ -8595,6 +8608,8 @@ body.reset {
font-size: 80%; } font-size: 80%; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature { #conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
font-size: 12px; } font-size: 12px; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .chat-area {
min-width: 250px; }
/* ******************* Fullpage styles *************************** */ /* ******************* Fullpage styles *************************** */
#conversejs.converse-fullscreen .chatroom .box-flyout, #conversejs.converse-fullscreen .chatroom .box-flyout,
......
#conversejs { #conversejs {
.flyout { .flyout {
border-radius: $chatbox-border-radius; border-radius: $chatbox-border-radius;
bottom: $chatbox-hover-height;
position: absolute; position: absolute;
@media screen and (max-height: $mobile-landscape-height) { @media screen and (max-height: $mobile-landscape-height) {
...@@ -38,7 +37,6 @@ ...@@ -38,7 +37,6 @@
flex-wrap: nowrap; flex-wrap: nowrap;
color: #ffffff; color: #ffffff;
font-size: 100%; font-size: 100%;
height: $chat-head-height;
margin: 0; margin: 0;
padding: 0.5em; padding: 0.5em;
position: relative; position: relative;
...@@ -120,8 +118,6 @@ ...@@ -120,8 +118,6 @@
justify-content: space-between; justify-content: space-between;
background-color: $chat-head-color; background-color: $chat-head-color;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4); box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: $chat-height;
min-height: $chat-height/2;
z-index: 1; z-index: 1;
overflow-y: scroll; overflow-y: scroll;
width: 100%; width: 100%;
...@@ -246,7 +242,6 @@ ...@@ -246,7 +242,6 @@
width: 100%; width: 100%;
border: none; border: none;
min-height: $chat-textarea-height; min-height: $chat-textarea-height;
max-height: $max-chat-textarea-height;
margin-bottom: -4px; // Not clear why this is necessar :( margin-bottom: -4px; // Not clear why this is necessar :(
&.spoiler { &.spoiler {
height: 42px; height: 42px;
...@@ -330,7 +325,6 @@ ...@@ -330,7 +325,6 @@
} }
ul { ul {
&.emoji-picker { &.emoji-picker {
height: $emoji-picker-height;
overflow: scroll; overflow: scroll;
padding: 0.5em; padding: 0.5em;
} }
...@@ -434,15 +428,48 @@ ...@@ -434,15 +428,48 @@
} }
} }
#conversejs.converse-overlayed {
.flyout {
bottom: $overlayed-chatbox-hover-height;
}
.box-flyout {
height: $overlayed-chat-height;
min-height: $overlayed-chat-height/2;
}
.chat-head {
height: $overlayed-chat-head-height;
}
.chat-textarea {
max-height: $overlayed-max-chat-textarea-height;
}
.emoji-picker {
height: $overlayed-emoji-picker-height;
}
}
#conversejs.converse-fullscreen { #conversejs.converse-fullscreen {
.flyout {
bottom: $fullpage-chatbox-hover-height;
}
.box-flyout {
height: $fullpage-chat-height;
min-height: $fullpage-chat-height/2;
}
.chatbox-btn { .chatbox-btn {
font-size: $fullpage-chatbox-button-size; font-size: $fullpage-chatbox-button-size;
} }
.chat-head { .chat-head {
height: $fullpage-chat-head-height;
.chatbox-buttons { .chatbox-buttons {
@include make-col(3); @include make-col(3);
} }
} }
.chat-textarea {
max-height: $fullpage-max-chat-textarea-height;
}
.emoji-picker {
height: $fullpage-emoji-picker-height;
}
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
......
...@@ -101,7 +101,6 @@ ...@@ -101,7 +101,6 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
word-wrap: break-word; word-wrap: break-word;
min-width: $chat-width;
.new-msgs-indicator { .new-msgs-indicator {
background-color: $chatroom-head-color; background-color: $chatroom-head-color;
} }
...@@ -292,6 +291,7 @@ ...@@ -292,6 +291,7 @@
} }
} }
/* ******************* Overlay styles *************************** */ /* ******************* Overlay styles *************************** */
#conversejs.converse-overlayed { #conversejs.converse-overlayed {
...@@ -317,6 +317,9 @@ ...@@ -317,6 +317,9 @@
} }
} }
} }
.chat-area {
min-width: $overlayed-chat-width;
}
} }
} }
} }
...@@ -326,6 +329,7 @@ ...@@ -326,6 +329,7 @@
#conversejs.converse-fullscreen, #conversejs.converse-fullscreen,
#conversejs.converse-mobile { #conversejs.converse-mobile {
.chatroom { .chatroom {
.box-flyout { .box-flyout {
background-color: $chatroom-head-color; background-color: $chatroom-head-color;
...@@ -347,7 +351,7 @@ ...@@ -347,7 +351,7 @@
} }
.chat-area { .chat-area {
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
min-width: auto; min-width: $fullpage-chat-width;
.chat-content { .chat-content {
border-top-left-radius: $chatbox-border-radius; border-top-left-radius: $chatbox-border-radius;
......
@import "bourbon"; @import "bourbon";
@import "converse/variables";
#conversejs.converse-embedded { #conversejs.converse-embedded {
@include box-sizing(border-box); @include box-sizing(border-box);
......
...@@ -4,10 +4,8 @@ ...@@ -4,10 +4,8 @@
position: relative; position: relative;
margin: 0; margin: 0;
height: $roster-height; height: $roster-height;
height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
padding: 0; padding: 0;
overflow: hidden; overflow: hidden;
// XXX: FIXME // XXX: FIXME
height: calc(100% - 70px); height: calc(100% - 70px);
...@@ -43,7 +41,6 @@ ...@@ -43,7 +41,6 @@
} }
.state-type { .state-type {
font-size: calc(#{$font-size} - 2px); font-size: calc(#{$font-size} - 2px);
height: $controlbox-dropdown-height;
width: 100%; width: 100%;
} }
} }
...@@ -142,7 +139,6 @@ ...@@ -142,7 +139,6 @@
.avatar { .avatar {
float: left; float: left;
display: inline-block; display: inline-block;
height: $roster-item-height;
} }
} }
&.current-xmpp-contact span { &.current-xmpp-contact span {
......
...@@ -141,3 +141,22 @@ $line-height-huge: 24px !default; ...@@ -141,3 +141,22 @@ $line-height-huge: 24px !default;
$occupants-padding: 1em; $occupants-padding: 1em;
$overlayed-max-chat-textarea-height: 200px !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;
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
@import "font-awesome"; @import "font-awesome";
@import "bourbon"; @import "bourbon";
@import "variables"; @import "variables";
@import "converse/variables";
@import "bootstrap/scss/functions"; @import "bootstrap/scss/functions";
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
......
...@@ -13,12 +13,12 @@ ...@@ -13,12 +13,12 @@
} }
} }
.chatbox { .chatbox {
min-width: $chat-width!important; min-width: $overlayed-chat-width!important;
width: $chat-width; width: $overlayed-chat-width;
.box-flyout { .box-flyout {
min-width: $chat-width!important; min-width: $overlayed-chat-width!important;
width: $chat-width; width: $overlayed-chat-width;
} }
.chat-body { .chat-body {
......
$max-chat-textarea-height: 200px !default;
$emoji-picker-height: 100px !default;
$roster-item-height: 60px !default;
$chat-head-height: 55px !default;
$controlbox-dropdown-height: 25px !default;
$controlbox-head-height: 55px !default;
$chatbox-hover-height: 1em !default;
$chat-width: 250px !default;
$chat-height: 450px !default;
...@@ -8,7 +8,6 @@ ...@@ -8,7 +8,6 @@
@import "font-awesome"; @import "font-awesome";
@import "bourbon"; @import "bourbon";
@import "variables"; @import "variables";
@import "inverse/variables";
@import "bootstrap/scss/functions"; @import "bootstrap/scss/functions";
@import "bootstrap/scss/variables"; @import "bootstrap/scss/variables";
......
#conversejs.fullscreen { #conversejs.converse-fullscreen {
.chatbox-btn { .chatbox-btn {
font-size: $font-size-large; font-size: $font-size-large;
margin: 0 0.3em; margin: 0 0.3em;
......
$max-chat-textarea-height: 400px !default;
$emoji-picker-height: 150px !default;
$roster-item-height: 30px !default;
$chat-head-height: 62px !default;
$controlbox-dropdown-height: 30px !default;
$controlbox-head-height: 63px !default;
$rounded-border-radius: 4px !default;
$chatbox-hover-height: 6px !default;
$chat-width: 100% !default;
$chat-height: 100%;
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