xmpp.chapril.org-conversejs/sass/inverse/_chatbox.scss
JC Brand ee46b0ccad CSS fixes to embedded chat
* Don't change styling based on media queries
* Fix offsets so that an embedded chat fits properly inside container element
2018-04-25 18:04:04 +02:00

103 lines
2.7 KiB
SCSS

#conversejs.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;
}
&.chat-head-chatbox {
.close-chatbox-button {
display: none;
}
}
}
.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 {
padding: 0 $padding $padding $padding;
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);
}
}
}