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

CSS tweaks for the embedded demo

Browse Source
This commit is contained in:
JC Brand 2017-02-02 23:16:15 +00:00
parent da23015ced
commit 78b945ed7b
4 changed files with 37 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
css/converse-muc-embedded.css
View File

@ -5,10 +5,17 @@
*/
/* $font-path: "../fonticons/fonts/" !default; */
#converse-embedded-chat {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
bottom: auto;
right: auto;
position: relative;
width: 100%; }
#converse-embedded-chat *, #converse-embedded-chat *:before, #converse-embedded-chat *:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
#converse-embedded-chat .chatroom {
width: auto; }
#converse-embedded-chat .flyout {
@ -26,10 +33,13 @@
display: none; }
#converse-embedded-chat .chatroom .box-flyout {
min-width: auto;
width: 100%; }
width: 100%;
height: 90vh; }
#converse-embedded-chat .chatroom .box-flyout .chat-body {
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px); }
#converse-embedded-chat .chatroom .box-flyout .chat-content {
height: calc(100% - 97px); }
#converse-embedded-chat .chatroom .box-flyout .chatroom-body .chatroom-form-container {
height: auto;
position: relative; }

11
css/converse.css
View File

@ -1656,6 +1656,7 @@
resize: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar {
box-sizing: border-box;
font-size: 14px;
margin: 0;
padding: 5px;
@ -1664,7 +1665,10 @@
background-color: #FFF5EE; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar a,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar a {
color: #2A9D8F; }
font-size: 14px;
color: #2A9D8F;
text-decoration: none;
text-shadow: none; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .chat-toolbar-text {
font-size: 12px;
@ -1720,6 +1724,9 @@
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar ul li a:hover {
color: #8f2831; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar li,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar li {
margin-left: 0; }
#converse-embedded-chat .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley,
#conversejs .chatbox form.sendXMPPMessage .chat-toolbar .toggle-smiley {
color: #2A9D8F;
@ -2346,7 +2353,7 @@
border: 0;
color: #818479;
font-size: 14px;
height: 289px;
height: 100%;
height: -webkit-calc(100% - 55px);
height: calc(100% - 55px);
overflow-y: auto;

7
sass/_chatbox.scss
View File

@ -256,6 +256,7 @@
resize: none;
}
.chat-toolbar {
box-sizing: border-box;
font-size: $font-size;
margin: 0;
padding: 5px;
@ -263,7 +264,10 @@
display: block;
background-color: $toolbar-color;
a {
font-size: $font-size;
color: $link-color;
text-decoration: none;
text-shadow: none;
}
.chat-toolbar-text {
font-size: 12px;
@ -315,6 +319,9 @@
}
}
}
li {
margin-left: 0;
}
.toggle-smiley {
color: $link-color;
padding-left: 5px;

10
sass/_muc_embedded.scss
View File

@ -1,6 +1,12 @@
@import "bourbon";
@import "variables";
#converse-embedded-chat {
@include box-sizing(border-box);
*, *:before, *:after {
@include box-sizing(border-box);
}
bottom: auto;
right: auto;
position: relative;
@ -32,9 +38,13 @@
.box-flyout {
min-width: auto;
width: 100%;
height: 90vh;
.chat-body {
@include calc(height, '100% - #{$chat-head-height}');
}
.chat-content {
height: calc(100% - #{$toolbar-height + $chat-textarea-height +2px});
}
.chatroom-body {
.chatroom-form-container {
height: auto;