xmpp.chapril.org-conversejs/sass/inverse/_chatbox.scss

103 lines
2.7 KiB
SCSS
Raw Normal View History

#conversejs.fullscreen {
2017-06-13 21:07:42 +02:00
.chatbox-btn {
font-size: $font-size-large;
margin: 0 0.3em;
2017-06-13 21:07:42 +02:00
}
.flyout {
2018-02-20 16:41:55 +01:00
border-radius: 0;
border: $flyout-padding solid $chat-head-color;
2017-06-13 21:07:42 +02:00
border-top: 0.8em solid $chat-head-color;
bottom: 0;
}
.chat-head {
font-size: 20px;
padding: 0;
.user-custom-message {
font-size: 50%;
2017-06-13 21:07:42 +02:00
height: auto;
line-height: $line-height;
}
&.chat-head-chatbox {
.close-chatbox-button {
display: none;
}
}
2017-06-13 21:07:42 +02:00
}
.chatbox {
width: 100%;
2017-06-13 21:07:42 +02:00
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);
}
2017-06-13 21:07:42 +02:00
.box-flyout {
background-color: $chat-head-color;
height: 100vh;
width: 100%;
2017-06-13 21:07:42 +02:00
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;
}
}
}
}
2017-06-13 21:07:42 +02:00
.chat-content {
padding: 0 $padding $padding $padding;
border-top-left-radius: $chatbox-border-radius;
border-top-right-radius: $chatbox-border-radius;
2017-06-13 21:07:42 +02:00
}
.chat-title {
font-size: $font-size-huge;
2018-01-27 10:07:54 +01:00
line-height: $line-height-huge;
2017-06-13 21:07:42 +02:00
}
.sendXMPPMessage {
2017-06-13 21:07:42 +02:00
ul {
width: 100%;
}
.toggle-smiley {
ul {
&.emoji-toolbar {
.emoji-category-picker {
margin-right: 5em;
}
2017-06-24 11:38:39 +02:00
.emoji-category {
padding-left: 10px;
padding-right: 10px;
}
2017-06-13 21:07:42 +02:00
}
}
}
}
}
}
@media screen and (max-width: 767px) {
#conversejs.fullscreen {
.chatbox {
2018-01-26 20:50:11 +01:00
width: calc(100% - 50px);
}
}
}