Various CSS fixes
This commit is contained in:
JC Brand
parent
fd2f253c09
commit
d6c0129c86
@ -126,13 +126,13 @@
|
||||
}
|
||||
|
||||
converse-chats {
|
||||
.converse-fullscreen {
|
||||
&.converse-fullscreen {
|
||||
.suggestion-box__results--above {
|
||||
bottom: 4.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.converse-overlayed {
|
||||
&.converse-overlayed {
|
||||
.suggestion-box__results--above {
|
||||
bottom: 3.5em;
|
||||
}
|
||||
|
||||
@ -396,239 +396,263 @@
|
||||
|
||||
/* ******************* Overlay and embedded styles *************************** */
|
||||
|
||||
converse-chats.converse-embedded,
|
||||
converse-chats.converse-overlayed {
|
||||
.controlbox-head {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.chat-head {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.chatbox {
|
||||
min-width: var(--overlayed-chat-width) !important;
|
||||
width: var(--overlayed-chat-width);
|
||||
|
||||
.box-flyout {
|
||||
min-width: var(--overlayed-chat-width) !important;
|
||||
width: var(--overlayed-chat-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
converse-chats.converse-overlayed {
|
||||
|
||||
.chat-head, .box-flyout {
|
||||
border-top-left-radius: var(--chatbox-border-radius);
|
||||
border-top-right-radius: var(--chatbox-border-radius);
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.flyout {
|
||||
bottom: var(--overlayed-chatbox-hover-height);
|
||||
}
|
||||
.box-flyout {
|
||||
height: var(--overlayed-chat-height);
|
||||
min-height: calc(var(--overlayed-chat-height) / 2);
|
||||
}
|
||||
.chat-head {
|
||||
min-height: var(--overlayed-chat-head-height);
|
||||
}
|
||||
.minimized-chats-flyout .chat-head {
|
||||
cursor: default;
|
||||
}
|
||||
.chat-textarea {
|
||||
max-height: var(--overlayed-max-chat-textarea-height);
|
||||
}
|
||||
.chatbox {
|
||||
.chat-body {
|
||||
height: calc(100% - var(--overlayed-chat-head-height));
|
||||
}
|
||||
.chatbox-title {
|
||||
padding: 0.5rem 0.75rem 0 0.75rem;
|
||||
}
|
||||
.chatbox-title--no-desc {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
converse-dropdown {
|
||||
.btn--standalone {
|
||||
padding: 0 0.2em;
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
#conversejs {
|
||||
converse-chats.converse-embedded,
|
||||
converse-chats.converse-overlayed {
|
||||
> .row {
|
||||
flex-direction: column;
|
||||
&.no-gutters {
|
||||
margin: -1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
converse-chats.converse-embedded,
|
||||
converse-chats.converse-fullscreen {
|
||||
.flyout {
|
||||
border-radius: 0;
|
||||
border:none;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
margin: 0;
|
||||
.box-flyout {
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
@include make-col-ready();
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(8);
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(9);
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include make-col(10);
|
||||
}
|
||||
}
|
||||
|
||||
&.converse-singleton {
|
||||
.flyout {
|
||||
border: none !important;
|
||||
}
|
||||
.chat-head {
|
||||
.controlbox-head {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.chat-head {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
.chatbox {
|
||||
margin: 0;
|
||||
@include make-col-ready();
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(12);
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(12);
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include make-col(12);
|
||||
min-width: var(--overlayed-chat-width) !important;
|
||||
width: var(--overlayed-chat-width);
|
||||
|
||||
.box-flyout {
|
||||
min-width: var(--overlayed-chat-width) !important;
|
||||
width: var(--overlayed-chat-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
converse-chats.converse-embedded {
|
||||
.chat-head {
|
||||
font-size: var(--font-size-huge);
|
||||
}
|
||||
converse-chats.converse-overlayed {
|
||||
|
||||
.converse-chatboxes {
|
||||
z-index: 1031; // One more than bootstrap navbar
|
||||
position: inherit;
|
||||
flex-wrap: nowrap;
|
||||
bottom: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-left: -15px;
|
||||
}
|
||||
.chat-head, .box-flyout {
|
||||
border-top-left-radius: var(--chatbox-border-radius);
|
||||
border-top-right-radius: var(--chatbox-border-radius);
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
.flyout {
|
||||
bottom: var(--overlayed-chatbox-hover-height);
|
||||
}
|
||||
.box-flyout {
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
height: var(--overlayed-chat-height);
|
||||
min-height: calc(var(--overlayed-chat-height) / 2);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
max-height: var(--fullpage-max-chat-textarea-height);
|
||||
}
|
||||
}
|
||||
|
||||
/* ******************* Fullpage styles *************************** */
|
||||
|
||||
converse-chats.converse-fullscreen {
|
||||
.chatbox-btn {
|
||||
font-size: var(--fullpage-chatbox-button-size);
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
.chat-head {
|
||||
font-size: var(--font-size-huge);
|
||||
}
|
||||
.chat-textarea {
|
||||
max-height: var(--fullpage-max-chat-textarea-height);
|
||||
}
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
box-shadow: none;
|
||||
height: var(--fullpage-chat-height);
|
||||
min-height: calc(var(--fullpage-chat-height) / 2);
|
||||
width: var(--fullpage-chat-width);
|
||||
overflow: hidden;
|
||||
.chat-head {
|
||||
min-height: var(--overlayed-chat-head-height);
|
||||
}
|
||||
.chat-body {
|
||||
height: inherit;
|
||||
overflow: hidden;
|
||||
background-color: var(--chat-head-color);
|
||||
.minimized-chats-flyout .chat-head {
|
||||
cursor: default;
|
||||
}
|
||||
.chat-title {
|
||||
font-size: var(--font-size-huge);
|
||||
line-height: var(--line-height-huge);
|
||||
.chat-textarea {
|
||||
max-height: var(--overlayed-max-chat-textarea-height);
|
||||
}
|
||||
.sendXMPPMessage {
|
||||
ul {
|
||||
width: 100%;
|
||||
.chatbox {
|
||||
.chat-body {
|
||||
height: calc(100% - var(--overlayed-chat-head-height));
|
||||
}
|
||||
.chatbox-title {
|
||||
padding: 0.5rem 0.75rem 0 0.75rem;
|
||||
}
|
||||
.chatbox-title--no-desc {
|
||||
padding: 0.5rem 0.75rem;
|
||||
}
|
||||
converse-dropdown {
|
||||
.btn--standalone {
|
||||
padding: 0 0.2em;
|
||||
margin: 0 0 0 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
converse-chats:not(.converse-embedded) {
|
||||
> .row {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
#converse-login-panel {
|
||||
.converse-form {
|
||||
padding: 3em 2em 3em;
|
||||
#conversejs {
|
||||
converse-chats.converse-overlayed {
|
||||
> .row {
|
||||
flex-direction: column;
|
||||
&.no-gutters {
|
||||
margin: -1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#conversejs {
|
||||
converse-chats.converse-embedded,
|
||||
converse-chats.converse-fullscreen {
|
||||
.flyout {
|
||||
border-radius: 0;
|
||||
border:none;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
width: calc(100% - 50px);
|
||||
.row {
|
||||
margin: 0;
|
||||
margin-left: 15px;
|
||||
.box-flyout {
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
&:not(#controlbox) {
|
||||
.box-flyout {
|
||||
left: 50px;
|
||||
bottom: 0;
|
||||
height: var(--fullpage-chat-height);
|
||||
box-shadow: none;
|
||||
@include media-breakpoint-up(md) {
|
||||
max-width: 66.666667%;
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
max-width: 75%;
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
max-width: 83.333333%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(8);
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(9);
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include make-col(10);
|
||||
}
|
||||
}
|
||||
|
||||
&.converse-singleton {
|
||||
.flyout {
|
||||
border: none !important;
|
||||
}
|
||||
.chat-head {
|
||||
padding: 0.5em;
|
||||
}
|
||||
.chatbox {
|
||||
margin: 0;
|
||||
@include make-col-ready();
|
||||
@include media-breakpoint-up(md) {
|
||||
@include make-col(12);
|
||||
}
|
||||
@include media-breakpoint-up(lg) {
|
||||
@include make-col(12);
|
||||
}
|
||||
@include media-breakpoint-up(xl) {
|
||||
@include make-col(12);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
converse-chats.converse-mobile,
|
||||
converse-chats.converse-overlayed,
|
||||
converse-chats.converse-fullscreen {
|
||||
converse-chats.converse-embedded {
|
||||
.chat-head {
|
||||
font-size: var(--font-size-huge);
|
||||
}
|
||||
|
||||
&.converse-chatboxes {
|
||||
z-index: 1031; // One more than bootstrap navbar
|
||||
position: inherit;
|
||||
flex-wrap: nowrap;
|
||||
bottom: auto;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
margin-left: -15px;
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
.chatbox-navback {
|
||||
margin: auto 0;
|
||||
margin-right: 1em;
|
||||
display: flex;
|
||||
.fa-arrow-left {
|
||||
&:before {
|
||||
color: white;
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
min-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
max-height: var(--fullpage-max-chat-textarea-height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ******************* Fullpage styles *************************** */
|
||||
|
||||
#conversejs {
|
||||
converse-chats.converse-fullscreen {
|
||||
.chatbox-btn {
|
||||
font-size: var(--fullpage-chatbox-button-size);
|
||||
margin: 0 0.3em;
|
||||
}
|
||||
.chat-head {
|
||||
font-size: var(--font-size-huge);
|
||||
}
|
||||
.chat-textarea {
|
||||
max-height: var(--fullpage-max-chat-textarea-height);
|
||||
}
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
box-shadow: none;
|
||||
height: var(--fullpage-chat-height);
|
||||
min-height: calc(var(--fullpage-chat-height) / 2);
|
||||
width: var(--fullpage-chat-width);
|
||||
overflow: hidden;
|
||||
}
|
||||
.chat-body {
|
||||
height: inherit;
|
||||
overflow: hidden;
|
||||
background-color: var(--chat-head-color);
|
||||
}
|
||||
.chat-title {
|
||||
font-size: var(--font-size-huge);
|
||||
line-height: var(--line-height-huge);
|
||||
}
|
||||
.sendXMPPMessage {
|
||||
ul {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
#conversejs {
|
||||
converse-chats:not(.converse-embedded) {
|
||||
> .row {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
#converse-login-panel {
|
||||
.converse-form {
|
||||
padding: 3em 2em 3em;
|
||||
}
|
||||
}
|
||||
.chatbox {
|
||||
width: calc(100% - 50px);
|
||||
.row {
|
||||
.box-flyout {
|
||||
left: 50px;
|
||||
bottom: 0;
|
||||
height: var(--fullpage-chat-height);
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
converse-chats.converse-mobile,
|
||||
converse-chats.converse-overlayed,
|
||||
converse-chats.converse-fullscreen {
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
.chatbox-navback {
|
||||
margin: auto 0;
|
||||
margin-right: 1em;
|
||||
display: flex;
|
||||
.fa-arrow-left {
|
||||
&:before {
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -396,127 +396,129 @@
|
||||
|
||||
/* ******************* Overlay styles *************************** */
|
||||
|
||||
converse-chats {
|
||||
.converse-overlayed {
|
||||
.chatbox {
|
||||
&.chatroom {
|
||||
min-width: var(--chatroom-width) !important;
|
||||
width: var(--chatroom-width);
|
||||
.box-flyout {
|
||||
#conversejs {
|
||||
converse-chats {
|
||||
&.converse-overlayed {
|
||||
.chatbox {
|
||||
&.chatroom {
|
||||
min-width: var(--chatroom-width) !important;
|
||||
width: var(--chatroom-width);
|
||||
}
|
||||
.chatbox-title__text {
|
||||
@include make-col(7);
|
||||
}
|
||||
.chatbox-title__buttons {
|
||||
@include make-col(5);
|
||||
}
|
||||
.box-flyout {
|
||||
min-width: var(--chatroom-width) !important;
|
||||
width: var(--chatroom-width);
|
||||
}
|
||||
.chatbox-title__text {
|
||||
@include make-col(7);
|
||||
}
|
||||
.chatbox-title__buttons {
|
||||
@include make-col(5);
|
||||
}
|
||||
|
||||
.chat-head__desc {
|
||||
font-size: 80%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.chatroom-body {
|
||||
.occupants {
|
||||
.occupants-heading {
|
||||
padding: 0;
|
||||
}
|
||||
.occupant-list {
|
||||
border-bottom: none;
|
||||
}
|
||||
ul {
|
||||
.occupant {
|
||||
.occupant-nick-badge {
|
||||
.occupant-badges {
|
||||
display: none;
|
||||
.chat-head__desc {
|
||||
font-size: 80%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
.chatroom-body {
|
||||
.occupants {
|
||||
.occupants-heading {
|
||||
padding: 0;
|
||||
}
|
||||
.occupant-list {
|
||||
border-bottom: none;
|
||||
}
|
||||
ul {
|
||||
.occupant {
|
||||
.occupant-nick-badge {
|
||||
.occupant-badges {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.occupant-status {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
.occupant-status {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-area {
|
||||
min-width: var(--overlayed-chat-width);
|
||||
.chat-area {
|
||||
min-width: var(--overlayed-chat-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.converse-embedded,
|
||||
.converse-fullscreen,
|
||||
.converse-mobile {
|
||||
&.converse-embedded,
|
||||
&.converse-fullscreen,
|
||||
&.converse-mobile {
|
||||
|
||||
.chatroom {
|
||||
.box-flyout {
|
||||
width: 100%;
|
||||
.chatroom {
|
||||
.box-flyout {
|
||||
width: 100%;
|
||||
|
||||
.chatroom-body {
|
||||
.chat-area {
|
||||
&.full {
|
||||
.new-msgs-indicator {
|
||||
max-width: 100%;
|
||||
.chatroom-body {
|
||||
.chat-area {
|
||||
&.full {
|
||||
.new-msgs-indicator {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.occupants {
|
||||
padding: var(--occupants-padding);
|
||||
.occupants-heading {
|
||||
font-size: var(--font-size-large);
|
||||
}
|
||||
ul {
|
||||
&.occupant-list {
|
||||
li {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.room-invite {
|
||||
span {
|
||||
.invited-contact {
|
||||
margin: 0 0 0.5em -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.converse-embedded {
|
||||
.chatroom {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
.box-flyout {
|
||||
.occupants-heading {
|
||||
font-size: 120%;
|
||||
}
|
||||
.chat-content {
|
||||
.chat-message {
|
||||
margin: 0.5em;
|
||||
font-size: 120%;
|
||||
}
|
||||
}
|
||||
.sendXMPPMessage {
|
||||
.chat-textarea {
|
||||
padding: 0.5em;
|
||||
font-size: 110%;
|
||||
}
|
||||
}
|
||||
.chatroom-body {
|
||||
height: 100%;
|
||||
.chatroom-form-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.occupants {
|
||||
padding: var(--occupants-padding);
|
||||
.occupants-heading {
|
||||
font-size: var(--font-size-large);
|
||||
.occupant-list {
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
ul {
|
||||
&.occupant-list {
|
||||
li {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.room-invite {
|
||||
span {
|
||||
.invited-contact {
|
||||
margin: 0 0 0.5em -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.converse-embedded {
|
||||
.chatroom {
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
.box-flyout {
|
||||
.occupants-heading {
|
||||
font-size: 120%;
|
||||
}
|
||||
.chat-content {
|
||||
.chat-message {
|
||||
margin: 0.5em;
|
||||
font-size: 120%;
|
||||
}
|
||||
}
|
||||
.sendXMPPMessage {
|
||||
.chat-textarea {
|
||||
padding: 0.5em;
|
||||
font-size: 110%;
|
||||
}
|
||||
}
|
||||
.chatroom-body {
|
||||
height: 100%;
|
||||
.chatroom-form-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.occupants {
|
||||
.occupant-list {
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -526,17 +528,19 @@ converse-chats {
|
||||
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
converse-chats.converse-mobile,
|
||||
converse-chats.converse-overlayed,
|
||||
converse-chats.converse-fullscreen {
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
.chat-head-chatroom {
|
||||
.chatbox-navback {
|
||||
margin-right: 0 !important;
|
||||
.fa-arrow-left {
|
||||
&:before {
|
||||
color: var(--chatroom-head-color);
|
||||
#conversejs {
|
||||
converse-chats.converse-mobile,
|
||||
converse-chats.converse-overlayed,
|
||||
converse-chats.converse-fullscreen {
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
.chat-head-chatroom {
|
||||
.chatbox-navback {
|
||||
margin-right: 0 !important;
|
||||
.fa-arrow-left {
|
||||
&:before {
|
||||
color: var(--chatroom-head-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -95,6 +95,7 @@
|
||||
}
|
||||
|
||||
.box-flyout {
|
||||
margin-left: 0;
|
||||
background-color: var(--controlbox-pane-background-color);
|
||||
}
|
||||
|
||||
@ -572,7 +573,7 @@
|
||||
|
||||
&.converse-fullscreen {
|
||||
.controlbox-panes {
|
||||
padding-top: 1em;
|
||||
padding-top: 2em;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -115,21 +115,19 @@ body.converse-fullscreen {
|
||||
}
|
||||
|
||||
converse-chats {
|
||||
.converse-overlayed {
|
||||
&.converse-overlayed {
|
||||
height: 3em;
|
||||
> .row {
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.converse-fullscreen,
|
||||
.converse-mobile {
|
||||
.converse-chatboxes {
|
||||
width: 100vw;
|
||||
left: -15px; // Hack due to padding added by bootstrap
|
||||
}
|
||||
&.converse-fullscreen,
|
||||
&.converse-mobile {
|
||||
flex-wrap: nowrap;
|
||||
width: 100vw;
|
||||
}
|
||||
.converse-embedded {
|
||||
&.converse-embedded {
|
||||
box-sizing: border-box;
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
|
||||
108
sass/_emoji.scss
108
sass/_emoji.scss
@ -185,73 +185,75 @@
|
||||
}
|
||||
}
|
||||
|
||||
converse-chats {
|
||||
.converse-overlayed {
|
||||
converse-emoji-dropdown {
|
||||
.dropdown-menu {
|
||||
min-width: 18em;
|
||||
}
|
||||
}
|
||||
.chatbox {
|
||||
.emoji-picker__header {
|
||||
.emoji-category {
|
||||
img {
|
||||
height: var(--font-size) !important;
|
||||
width: var(--font-size) !important;
|
||||
}
|
||||
#conversejs {
|
||||
converse-chats {
|
||||
&.converse-overlayed {
|
||||
converse-emoji-dropdown {
|
||||
.dropdown-menu {
|
||||
min-width: 18em;
|
||||
}
|
||||
}
|
||||
converse-emoji-picker {
|
||||
.emoji-picker {
|
||||
.insert-emoji {
|
||||
a {
|
||||
font-size: var(--font-size);
|
||||
line-height: calc(var(--font-size) * 1.5);
|
||||
padding: 0;
|
||||
height: calc(var(--font-size) * 1.5);
|
||||
width: calc(var(--font-size) * 1.5);
|
||||
}
|
||||
img {
|
||||
height: var(--font-size);
|
||||
width: var(--font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
.emoji-skintone-picker {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
.chatbox {
|
||||
.emoji-picker__header {
|
||||
.emoji-category {
|
||||
font-size: var(--font-size-small);
|
||||
img {
|
||||
height: var(--font-size) !important;
|
||||
width: var(--font-size) !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.emoji-picker__lists {
|
||||
height: 7em;
|
||||
converse-emoji-picker {
|
||||
.emoji-picker {
|
||||
.insert-emoji {
|
||||
a {
|
||||
font-size: var(--font-size);
|
||||
line-height: calc(var(--font-size) * 1.5);
|
||||
padding: 0;
|
||||
height: calc(var(--font-size) * 1.5);
|
||||
width: calc(var(--font-size) * 1.5);
|
||||
}
|
||||
img {
|
||||
height: var(--font-size);
|
||||
width: var(--font-size);
|
||||
}
|
||||
}
|
||||
}
|
||||
.emoji-skintone-picker {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
.emoji-picker__header {
|
||||
.emoji-category {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
.emoji-picker__lists {
|
||||
height: 7em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.converse-embedded {
|
||||
converse-emoji-dropdown {
|
||||
.dropdown-menu {
|
||||
min-width: 20em;
|
||||
&.converse-embedded {
|
||||
converse-emoji-dropdown {
|
||||
.dropdown-menu {
|
||||
min-width: 20em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.converse-fullscreen {
|
||||
converse-emoji-dropdown {
|
||||
.dropdown-menu {
|
||||
min-width: 22em;
|
||||
&.converse-fullscreen {
|
||||
converse-emoji-dropdown {
|
||||
.dropdown-menu {
|
||||
min-width: 22em;
|
||||
}
|
||||
}
|
||||
}
|
||||
.chatbox {
|
||||
.toggle-smiley {
|
||||
}
|
||||
converse-emoji-picker {
|
||||
.emoji-picker__lists {
|
||||
height: 12em;
|
||||
.chatbox {
|
||||
.toggle-smiley {
|
||||
}
|
||||
converse-emoji-picker {
|
||||
.emoji-picker__lists {
|
||||
height: 12em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -31,18 +31,22 @@
|
||||
}
|
||||
}
|
||||
|
||||
#conversejs.converse-fullscreen {
|
||||
.chatbox.headlines {
|
||||
.box-flyout {
|
||||
background-color: var(--headline-head-color);
|
||||
}
|
||||
.chat-head {
|
||||
&.chat-head-chatbox {
|
||||
background-color: var(--headline-head-color);
|
||||
#conversejs {
|
||||
converse-chats {
|
||||
&.converse-fullscreen {
|
||||
.chatbox.headlines {
|
||||
.box-flyout {
|
||||
background-color: var(--headline-head-color);
|
||||
}
|
||||
.chat-head {
|
||||
&.chat-head-chatbox {
|
||||
background-color: var(--headline-head-color);
|
||||
}
|
||||
}
|
||||
.flyout {
|
||||
border-color: var(--headline-head-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
.flyout {
|
||||
border-color: var(--headline-head-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -385,7 +385,7 @@
|
||||
}
|
||||
|
||||
converse-chats {
|
||||
.converse-overlayed {
|
||||
&.converse-overlayed {
|
||||
.message {
|
||||
&.chat-msg {
|
||||
&.chat-msg--followup {
|
||||
|
||||
@ -1,91 +1,93 @@
|
||||
converse-chats {
|
||||
.converse-overlayed {
|
||||
#minimized-chats {
|
||||
order: 100;
|
||||
#conversejs {
|
||||
converse-chats {
|
||||
&.converse-overlayed {
|
||||
#minimized-chats {
|
||||
order: 100;
|
||||
|
||||
width: var(--minimized-chats-width);
|
||||
margin-bottom: 0;
|
||||
border-top-left-radius: var(--chatbox-border-radius);
|
||||
border-top-right-radius: var(--chatbox-border-radius);
|
||||
color: var(--inverse-link-color);
|
||||
margin-right: var(--chat-gutter);
|
||||
padding: 0;
|
||||
|
||||
.badge {
|
||||
bottom: 8px;
|
||||
border: 1px solid var(--overlayed-badge-color);
|
||||
}
|
||||
|
||||
#toggle-minimized-chats {
|
||||
width: var(--minimized-chats-width);
|
||||
margin-bottom: 0;
|
||||
border-top-left-radius: var(--chatbox-border-radius);
|
||||
border-top-right-radius: var(--chatbox-border-radius);
|
||||
background-color: var(--link-color);
|
||||
padding: 1em 0 0 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
overflow-y: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
height: 45px;
|
||||
width: 9em;
|
||||
}
|
||||
color: var(--inverse-link-color);
|
||||
margin-right: var(--chat-gutter);
|
||||
padding: 0;
|
||||
|
||||
a.restore-chat {
|
||||
cursor: pointer;
|
||||
padding: 1px 0 1px 5px;
|
||||
color: var(--chat-head-text-color);
|
||||
line-height: 15px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
.badge {
|
||||
bottom: 8px;
|
||||
border: 1px solid var(--overlayed-badge-color);
|
||||
}
|
||||
}
|
||||
|
||||
a.restore-chat:visited {
|
||||
color: var(--chat-head-text-color);
|
||||
}
|
||||
|
||||
.minimized-chats-flyout {
|
||||
flex-direction: column-reverse;
|
||||
bottom: 45px;
|
||||
width: var(--minimized-chats-width);
|
||||
|
||||
.chat-head {
|
||||
min-height: 0;
|
||||
padding: 0.3em;
|
||||
border-radius: var(--chatbox-border-radius);
|
||||
height: 35px;
|
||||
margin-bottom: 0.2em;
|
||||
width: 100%;
|
||||
max-width: 9em;
|
||||
flex-wrap: nowrap;
|
||||
#toggle-minimized-chats {
|
||||
border-top-left-radius: var(--chatbox-border-radius);
|
||||
border-top-right-radius: var(--chatbox-border-radius);
|
||||
background-color: var(--link-color);
|
||||
padding: 1em 0 0 0;
|
||||
text-align: center;
|
||||
color: white;
|
||||
white-space: nowrap;
|
||||
overflow-y: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: block;
|
||||
height: 45px;
|
||||
width: 9em;
|
||||
}
|
||||
&.minimized {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.unread-message-count {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
border: 1px solid;
|
||||
text-shadow: 1px 1px 0 var(--text-shadow-color);
|
||||
color: var(--warning-color);
|
||||
border-radius: 5px;
|
||||
padding: 2px 4px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 116px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.unread-message-count-hidden,
|
||||
.chat-head-message-count-hidden {
|
||||
display: none;
|
||||
a.restore-chat {
|
||||
cursor: pointer;
|
||||
padding: 1px 0 1px 5px;
|
||||
color: var(--chat-head-text-color);
|
||||
line-height: 15px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
&:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
a.restore-chat:visited {
|
||||
color: var(--chat-head-text-color);
|
||||
}
|
||||
|
||||
.minimized-chats-flyout {
|
||||
flex-direction: column-reverse;
|
||||
bottom: 45px;
|
||||
width: var(--minimized-chats-width);
|
||||
|
||||
.chat-head {
|
||||
min-height: 0;
|
||||
padding: 0.3em;
|
||||
border-radius: var(--chatbox-border-radius);
|
||||
height: 35px;
|
||||
margin-bottom: 0.2em;
|
||||
width: 100%;
|
||||
max-width: 9em;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
&.minimized {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.unread-message-count {
|
||||
font-weight: bold;
|
||||
background-color: white;
|
||||
border: 1px solid;
|
||||
text-shadow: 1px 1px 0 var(--text-shadow-color);
|
||||
color: var(--warning-color);
|
||||
border-radius: 5px;
|
||||
padding: 2px 4px;
|
||||
font-size: 16px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
right: 116px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.unread-message-count-hidden,
|
||||
.chat-head-message-count-hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -189,7 +189,7 @@
|
||||
}
|
||||
|
||||
converse-chats {
|
||||
.converse-overlayed {
|
||||
&.converse-overlayed {
|
||||
.chat-toolbar {
|
||||
li {
|
||||
.toolbar-menu {
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
import tpl_converse from "../templates/converse.js";
|
||||
import { api } from '@converse/headless/core';
|
||||
import { CustomElement } from './element.js';
|
||||
|
||||
|
||||
@ -14,6 +15,11 @@ class ConverseRoot extends CustomElement {
|
||||
render () { // eslint-disable-line class-methods-use-this
|
||||
return tpl_converse();
|
||||
}
|
||||
|
||||
connectedCallback () {
|
||||
super.connectedCallback();
|
||||
this.classList.add(`converse-${api.settings.get('view_mode')}`);
|
||||
}
|
||||
}
|
||||
|
||||
customElements.define('converse-root', ConverseRoot);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user