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

Put all Sass variables into one file.

Browse Source 
updates #1091
This commit is contained in:
JC Brand 2018-05-24 13:17:26 +02:00
parent 539234fa79
commit 251bea2137
13 changed files with 141 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
css/converse.css
View File

@ -7287,7 +7287,6 @@ body.reset {
#conversejs .flyout {
border-radius: 4px;
bottom: 1em;
position: absolute; }
@media screen and (max-height: 450px) {
#conversejs .flyout {
@ -7316,7 +7315,6 @@ body.reset {
flex-wrap: nowrap;
color: #ffffff;
font-size: 100%;
height: 55px;
margin: 0;
padding: 0.5em;
position: relative; }
@ -7379,8 +7377,6 @@ body.reset {
justify-content: space-between;
background-color: #3AA569;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 450px;
min-height: 225px;
z-index: 1;
overflow-y: scroll;
width: 100%; }
@ -7488,7 +7484,6 @@ body.reset {
width: 100%;
border: none;
min-height: 60px;
max-height: 200px;
margin-bottom: -4px; }
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
height: 42px; }
@ -7553,7 +7548,6 @@ body.reset {
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
height: 100px;
overflow: scroll;
padding: 0.5em; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
@ -7620,11 +7614,34 @@ body.reset {
top: 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 {
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 {
@ -8072,7 +8089,6 @@ body.reset {
position: relative;
margin: 0;
height: 194px;
height: calc(~"100% - 50px - 20px");
padding: 0;
overflow: hidden;
height: calc(100% - 70px);
@ -8094,7 +8110,6 @@ body.reset {
font-size: calc(14px - 2px); }
#conversejs #converse-roster .roster-filter-form .state-type {
font-size: calc(14px - 2px);
height: 25px;
width: 100%; }
#conversejs #converse-roster .roster-contacts {
padding: 0;
@ -8165,8 +8180,7 @@ body.reset {
max-width: 60%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
float: left;
display: inline-block;
height: 60px; }
display: inline-block; }
#conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
font-size: 14px;
float: left;
@ -8297,8 +8311,7 @@ body.reset {
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
display: flex;
flex-direction: column;
word-wrap: break-word;
min-width: 250px; }
word-wrap: break-word; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
background-color: #E77051; }
@ -8471,6 +8484,8 @@ body.reset {
font-size: 80%; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
font-size: 12px; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .chat-area {
min-width: 250px; }
/* ******************* Fullpage styles *************************** */
#conversejs.converse-fullscreen .chatroom .box-flyout,

75
css/inverse.css
View File

@ -7287,7 +7287,6 @@ body.reset {
#conversejs .flyout {
border-radius: 4px;
bottom: 6px;
position: absolute; }
@media screen and (max-height: 450px) {
#conversejs .flyout {
@ -7316,7 +7315,6 @@ body.reset {
flex-wrap: nowrap;
color: #ffffff;
font-size: 100%;
height: 62px;
margin: 0;
padding: 0.5em;
position: relative; }
@ -7379,8 +7377,6 @@ body.reset {
justify-content: space-between;
background-color: #3AA569;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: 100%;
min-height: 50%;
z-index: 1;
overflow-y: scroll;
width: 100%; }
@ -7488,7 +7484,6 @@ body.reset {
width: 100%;
border: none;
min-height: 60px;
max-height: 400px;
margin-bottom: -4px; }
#conversejs .chatbox .sendXMPPMessage .chat-textarea.spoiler {
height: 42px; }
@ -7553,7 +7548,6 @@ body.reset {
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu a {
color: #578EA9; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul.emoji-picker {
height: 150px;
overflow: scroll;
padding: 0.5em; }
#conversejs .chatbox .sendXMPPMessage .chat-toolbar li .toolbar-menu ul li {
@ -7620,11 +7614,34 @@ body.reset {
top: 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 {
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 {
@ -7640,22 +7657,22 @@ body.reset {
bottom: 0;
height: 100vh;
box-shadow: none; } }
#conversejs.fullscreen .chatbox-btn {
#conversejs.converse-fullscreen .chatbox-btn {
font-size: 16px;
margin: 0 0.3em; }
#conversejs.fullscreen .flyout {
#conversejs.converse-fullscreen .flyout {
border-radius: 0;
border: 1.2em solid #3AA569;
border-top: 0.8em solid #3AA569;
bottom: 0; }
#conversejs.fullscreen .chat-head {
#conversejs.converse-fullscreen .chat-head {
font-size: 20px;
padding: 0; }
#conversejs.fullscreen .chat-head .user-custom-message {
#conversejs.converse-fullscreen .chat-head .user-custom-message {
font-size: 50%;
height: auto;
line-height: 16px; }
#conversejs.fullscreen .chatbox {
#conversejs.converse-fullscreen .chatbox {
width: 100%;
height: 100%;
margin: 0;
@ -7665,43 +7682,43 @@ body.reset {
padding-right: 15px;
padding-left: 15px; }
@media (min-width: 768px) {
#conversejs.fullscreen .chatbox {
#conversejs.converse-fullscreen .chatbox {
flex: 0 0 75%;
max-width: 75%; } }
@media (min-width: 1200px) {
#conversejs.fullscreen .chatbox {
#conversejs.converse-fullscreen .chatbox {
flex: 0 0 83.3333333333%;
max-width: 83.3333333333%; } }
#conversejs.fullscreen .chatbox .box-flyout {
#conversejs.converse-fullscreen .chatbox .box-flyout {
background-color: #3AA569;
height: 100vh;
width: 100%;
box-shadow: none; }
#conversejs.fullscreen .chatbox .chat-body {
#conversejs.converse-fullscreen .chatbox .chat-body {
background-color: #3AA569;
border-top-left-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;
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; }
#conversejs.fullscreen .chatbox .chat-body .chat-message .chat-msg-content {
#conversejs.converse-fullscreen .chatbox .chat-body .chat-message .chat-msg-content {
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;
margin-bottom: -4px; }
#conversejs.fullscreen .chatbox .chat-content {
#conversejs.converse-fullscreen .chatbox .chat-content {
border-top-left-radius: 4px;
border-top-right-radius: 4px; }
#conversejs.fullscreen .chatbox .chat-title {
#conversejs.converse-fullscreen .chatbox .chat-title {
font-size: 20px;
line-height: 24px; }
#conversejs.fullscreen .chatbox .sendXMPPMessage ul {
#conversejs.converse-fullscreen .chatbox .sendXMPPMessage ul {
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; }
#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-right: 10px; }
@ -8108,7 +8125,6 @@ body.reset {
position: relative;
margin: 0;
height: 194px;
height: calc(~"100% - 60px - 20px");
padding: 0;
overflow: hidden;
height: calc(100% - 70px);
@ -8130,7 +8146,6 @@ body.reset {
font-size: calc(14px - 2px); }
#conversejs #converse-roster .roster-filter-form .state-type {
font-size: calc(14px - 2px);
height: 30px;
width: 100%; }
#conversejs #converse-roster .roster-contacts {
padding: 0;
@ -8201,8 +8216,7 @@ body.reset {
max-width: 60%; }
#conversejs #converse-roster .roster-contacts .roster-group li .open-chat .avatar {
float: left;
display: inline-block;
height: 30px; }
display: inline-block; }
#conversejs #converse-roster .roster-contacts .roster-group li.current-xmpp-contact span {
font-size: 14px;
float: left;
@ -8421,8 +8435,7 @@ body.reset {
#conversejs .chatroom .box-flyout .chatroom-body .chat-area {
display: flex;
flex-direction: column;
word-wrap: break-word;
min-width: 100%; }
word-wrap: break-word; }
#conversejs.converse-embedded .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator,
#conversejs .chatroom .box-flyout .chatroom-body .chat-area .new-msgs-indicator {
background-color: #E77051; }
@ -8595,6 +8608,8 @@ body.reset {
font-size: 80%; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .occupants .chatroom-features .feature {
font-size: 12px; }
#conversejs.converse-overlayed .chatbox.chatroom .chatroom-body .chat-area {
min-width: 250px; }
/* ******************* Fullpage styles *************************** */
#conversejs.converse-fullscreen .chatroom .box-flyout,

39
sass/_chatbox.scss
View File

@ -1,7 +1,6 @@
#conversejs {
.flyout {
border-radius: $chatbox-border-radius;
bottom: $chatbox-hover-height;
position: absolute;
@media screen and (max-height: $mobile-landscape-height) {
@ -38,7 +37,6 @@
flex-wrap: nowrap;
color: #ffffff;
font-size: 100%;
height: $chat-head-height;
margin: 0;
padding: 0.5em;
position: relative;
@ -120,8 +118,6 @@
justify-content: space-between;
background-color: $chat-head-color;
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
height: $chat-height;
min-height: $chat-height/2;
z-index: 1;
overflow-y: scroll;
width: 100%;
@ -246,7 +242,6 @@
width: 100%;
border: none;
min-height: $chat-textarea-height;
max-height: $max-chat-textarea-height;
margin-bottom: -4px; // Not clear why this is necessar :(
&.spoiler {
height: 42px;
@ -330,7 +325,6 @@
}
ul {
&.emoji-picker {
height: $emoji-picker-height;
overflow: scroll;
padding: 0.5em;
}
@ -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 {
.flyout {
bottom: $fullpage-chatbox-hover-height;
}
.box-flyout {
height: $fullpage-chat-height;
min-height: $fullpage-chat-height/2;
}
.chatbox-btn {
font-size: $fullpage-chatbox-button-size;
}
.chat-head {
height: $fullpage-chat-head-height;
.chatbox-buttons {
@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) {

8
sass/_chatrooms.scss
View File

@ -101,7 +101,6 @@
display: flex;
flex-direction: column;
word-wrap: break-word;
min-width: $chat-width;
.new-msgs-indicator {
background-color: $chatroom-head-color;
}
@ -292,6 +291,7 @@
}
}
/* ******************* Overlay styles *************************** */
#conversejs.converse-overlayed {
@ -317,6 +317,9 @@
}
}
}
.chat-area {
min-width: $overlayed-chat-width;
}
}
}
}
@ -326,6 +329,7 @@
#conversejs.converse-fullscreen,
#conversejs.converse-mobile {
.chatroom {
.box-flyout {
background-color: $chatroom-head-color;
@ -347,7 +351,7 @@
}
.chat-area {
border-top-left-radius: $chatbox-border-radius;
min-width: auto;
min-width: $fullpage-chat-width;
.chat-content {
border-top-left-radius: $chatbox-border-radius;

1
sass/_embedded.scss
View File

@ -1,5 +1,4 @@
@import "bourbon";
@import "converse/variables";
#conversejs.converse-embedded {
@include box-sizing(border-box);

4
sass/_roster.scss
View File

@ -4,10 +4,8 @@
position: relative;
margin: 0;
height: $roster-height;
height: calc(~"100% - #{$controlbox-dropdown-height*2} - 20px");
padding: 0;
overflow: hidden;
// XXX: FIXME
height: calc(100% - 70px);
@ -43,7 +41,6 @@
}
.state-type {
font-size: calc(#{$font-size} - 2px);
height: $controlbox-dropdown-height;
width: 100%;
}
}
@ -142,7 +139,6 @@
.avatar {
float: left;
display: inline-block;
height: $roster-item-height;
}
}
&.current-xmpp-contact span {

19
sass/_variables.scss
View File

@ -141,3 +141,22 @@ $line-height-huge: 24px !default;
$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;

1
sass/converse.scss
View File

@ -8,7 +8,6 @@
@import "font-awesome";
@import "bourbon";
@import "variables";
@import "converse/variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

8
sass/converse/_chatbox.scss
View File

@ -13,12 +13,12 @@
}
}
.chatbox {
min-width: $chat-width!important;
width: $chat-width;
min-width: $overlayed-chat-width!important;
width: $overlayed-chat-width;
.box-flyout {
min-width: $chat-width!important;
width: $chat-width;
min-width: $overlayed-chat-width!important;
width: $overlayed-chat-width;
}
.chat-body {

14
sass/converse/_variables.scss
View File

@ -1,14 +0,0 @@
$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;

1
sass/inverse.scss
View File

@ -8,7 +8,6 @@
@import "font-awesome";
@import "bourbon";
@import "variables";
@import "inverse/variables";
@import "bootstrap/scss/functions";
@import "bootstrap/scss/variables";

2
sass/inverse/_chatbox.scss
View File

@ -1,4 +1,4 @@
#conversejs.fullscreen {
#conversejs.converse-fullscreen {
.chatbox-btn {
font-size: $font-size-large;
margin: 0 0.3em;

16
sass/inverse/_variables.scss
View File

@ -1,16 +0,0 @@
$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%;