Break Sass up into more files
And import where appropriate to allow for custom builds that are still styled properly
This commit is contained in:
JC Brand
parent
8966290369
commit
4bdafb8ea3
1
Makefile
1
Makefile
|
|
@ -119,7 +119,6 @@ package-lock.json: package.json
|
|||
|
||||
node_modules: $(LERNA) package.json package-lock.json src/headless/package.json src/headless/package-lock.json
|
||||
npm run lerna
|
||||
npm rebuild node-sass
|
||||
|
||||
.PHONY: clean
|
||||
clean:
|
||||
|
|
|
|||
|
|
@ -6,6 +6,8 @@ import { _converse, api, converse } from "@converse/headless/core";
|
|||
import { html, render } from 'lit';
|
||||
import { clearMessages, parseMessageForCommands } from './utils.js';
|
||||
|
||||
import './styles/chat-bottom-panel.scss';
|
||||
|
||||
const { u } = converse.env;
|
||||
|
||||
export default class ChatBottomPanel extends ElementView {
|
||||
|
|
|
|||
|
|
@ -7,6 +7,8 @@ import { _converse, api } from "@converse/headless/core";
|
|||
import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
|
||||
import { render } from 'lit';
|
||||
|
||||
import './styles//chat-head.scss';
|
||||
|
||||
|
||||
export default class ChatHeading extends ElementView {
|
||||
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ import ChatBoxView from './view.js';
|
|||
import chatview_api from './api.js';
|
||||
import { _converse, api, converse } from '@converse/headless/core';
|
||||
|
||||
import './styles/_chatbox.scss';
|
||||
import './styles/index.scss';
|
||||
|
||||
const { Strophe } = converse.env;
|
||||
|
||||
|
|
|
|||
|
|
@ -1,653 +0,0 @@
|
|||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "shared/styles/_variables.scss";
|
||||
|
||||
#conversejs {
|
||||
@import "bootstrap/scss/media";
|
||||
|
||||
converse-controlbox-navback {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flyout {
|
||||
position: absolute;
|
||||
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
border-radius: 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
bottom: 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox-btn {
|
||||
border-radius: 25%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--chatbox-button-size);
|
||||
margin: 0 0.2em;
|
||||
padding: 0 0 0 0.5em;
|
||||
text-decoration: none;
|
||||
|
||||
&:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: #ffffff;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
&.chat-head-chatbox {
|
||||
background-color: var(--chat-head-color);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.show-msg-author-modal {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.chat-head__desc {
|
||||
color: var(--chat-head-color-lighten-50-percent);
|
||||
font-size: var(--font-size-small);
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0.5rem 1rem 0.5rem 1rem;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
max-height: 5em;
|
||||
}
|
||||
|
||||
.chatbox-title {
|
||||
padding: 0.75rem 1rem 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chatbox-title--no-desc {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.chatbox-title--row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chatbox-title__text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chatbox-title__buttons {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
|
||||
&.chatbox-btn {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far {
|
||||
color: white;
|
||||
&.button-on:before {
|
||||
padding: 0.2em;
|
||||
background-color: var(--chat-head-text-color);
|
||||
color: var(--chat-head-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox-btn {
|
||||
color: white;
|
||||
&.fa, &.far, &.fas {
|
||||
color: white;
|
||||
}
|
||||
&:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
&.button-on:before {
|
||||
border-radius: 5%;
|
||||
background-color: var(--chat-head-text-color);
|
||||
color: var(--chat-head-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
text-align: left;
|
||||
margin: 0 var(--chat-gutter);
|
||||
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
margin: 0;
|
||||
width: var(--mobile-chat-width);
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
margin: 0;
|
||||
width: var(--mobile-chat-width);
|
||||
}
|
||||
|
||||
.box-flyout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
height: var(--mobile-chat-height);
|
||||
width: var(--mobile-chat-width);
|
||||
height: var(--fullpage-chat-height);
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
height: var(--mobile-chat-height);
|
||||
width: var(--mobile-chat-width);
|
||||
height: var(--fullpage-chat-height);
|
||||
}
|
||||
}
|
||||
.chat-title {
|
||||
display: var(--heading-display);
|
||||
font-family: var(--heading-font);
|
||||
color: var(--heading-color);
|
||||
display: block;
|
||||
line-height: var(--line-height-large);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
&.groupchat {
|
||||
padding-right: var(--chatroom-head-title-padding-right);
|
||||
}
|
||||
a {
|
||||
color: var(--chat-head-text-color);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.chat-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: var(--chat-textarea-background-color);
|
||||
border-bottom-left-radius: var(--chatbox-border-radius);
|
||||
border-bottom-right-radius: var(--chatbox-border-radius);
|
||||
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
border-top: 0;
|
||||
p {
|
||||
color: var(--text-color);
|
||||
font-size: var(--message-font-size);
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
.new-msgs-indicator {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
background-color: var(--chat-head-color);
|
||||
color: var(--light-background-color);
|
||||
padding: 0.5em;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
z-index: 20;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
.chat-content {
|
||||
background-color: var(--chat-content-background-color);
|
||||
border: 0;
|
||||
color: var(--text-color);
|
||||
font-size: var(--message-font-size);
|
||||
height: 100%;
|
||||
line-height: 1.3em;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
converse-chat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
converse-chat-message {
|
||||
.spinner {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content__help {
|
||||
max-height: 100%;
|
||||
converse-chat-help {
|
||||
border-top: 1px solid var(--chat-head-color);
|
||||
display: block;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.close-chat-help {
|
||||
float: right;
|
||||
padding-right: 1em;
|
||||
cursor: pointer;
|
||||
color: var(--chat-content-background-color);
|
||||
svg {
|
||||
fill: var(--chat-head-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content__messages {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chat-content__notifications {
|
||||
height: 1.7em;
|
||||
white-space: pre;
|
||||
background-color: var(--chat-content-background-color);
|
||||
color: var(--subdued-color);
|
||||
font-size: 90%;
|
||||
font-style: italic;
|
||||
line-height: var(--line-height-small);
|
||||
padding: 0 1em 0.3em;
|
||||
&:before {
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%
|
||||
}
|
||||
progress {
|
||||
margin: 0.5em 0;
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content-sendbutton {
|
||||
height: calc(100% - (var(--chat-textarea-height) + var(--send-button-height) + 2 * var(--send-button-margin)));
|
||||
}
|
||||
|
||||
.dropdown { /* status dropdown styles */
|
||||
background-color: var(--light-background-color);
|
||||
dd {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.sendXMPPMessage {
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
border-bottom-radius: var(--chatbox-border-radius);
|
||||
background-clip: padding-box;
|
||||
background-color: white;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
width: 100%;
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.suggestion-box__results {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler-hint {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-textarea, input {
|
||||
&:active, &:focus{
|
||||
outline-color: var(--chat-head-color);
|
||||
}
|
||||
&.correcting {
|
||||
background-color: var(--chat-correcting-color);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
color: var(--chat-textarea-color);
|
||||
background-color: var(--chat-textarea-background-color);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-radius: var(--chatbox-border-radius);
|
||||
padding-left: 0.5em;
|
||||
padding-right: 4.5em;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom:0.5em;
|
||||
width: 100%;
|
||||
border: none;
|
||||
min-height: var(--chat-textarea-height);
|
||||
margin-bottom: -4px; // Not clear why this is necessar :(
|
||||
resize: none;
|
||||
&.spoiler {
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dragresize {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
&-top {
|
||||
cursor: n-resize;
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
&-left,
|
||||
&-occupants-left {
|
||||
cursor: w-resize;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
}
|
||||
&-topleft {
|
||||
cursor: nw-resize;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ******************* Overlay and embedded styles *************************** */
|
||||
|
||||
#conversejs {
|
||||
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-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 {
|
||||
margin: 0;
|
||||
margin-left: 15px;
|
||||
.box-flyout {
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
&:not(#controlbox) {
|
||||
.box-flyout {
|
||||
@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-embedded {
|
||||
.chat-head {
|
||||
font-size: var(--font-size-huge);
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
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-background-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 {
|
||||
converse-controlbox-navback {
|
||||
margin: auto 0;
|
||||
margin-right: 1em;
|
||||
display: flex;
|
||||
.fa-arrow-left {
|
||||
&:before {
|
||||
color: var(--chat-head-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "shared/styles/_variables.scss";
|
||||
|
||||
#conversejs {
|
||||
.chatbox {
|
||||
.bottom-panel {
|
||||
|
||||
.chat-content-sendbutton {
|
||||
height: calc(100% - (var(--chat-textarea-height) + var(--send-button-height) + 2 * var(--send-button-margin)));
|
||||
}
|
||||
|
||||
.sendXMPPMessage {
|
||||
-moz-background-clip: padding;
|
||||
-webkit-background-clip: padding-box;
|
||||
border-bottom-radius: var(--chatbox-border-radius);
|
||||
background-clip: padding-box;
|
||||
background-color: white;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
width: 100%;
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.suggestion-box__results {
|
||||
&:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.spoiler-hint {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chat-textarea, input {
|
||||
&:active, &:focus{
|
||||
outline-color: var(--chat-head-color);
|
||||
}
|
||||
&.correcting {
|
||||
background-color: var(--chat-correcting-color);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-textarea {
|
||||
color: var(--chat-textarea-color);
|
||||
background-color: var(--chat-textarea-background-color);
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
border-bottom-radius: var(--chatbox-border-radius);
|
||||
padding-left: 0.5em;
|
||||
padding-right: 4.5em;
|
||||
padding-top: 0.5em;
|
||||
padding-bottom:0.5em;
|
||||
width: 100%;
|
||||
border: none;
|
||||
min-height: var(--chat-textarea-height);
|
||||
margin-bottom: -4px; // Not clear why this is necessar :(
|
||||
resize: none;
|
||||
&.spoiler {
|
||||
height: 42px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,97 @@
|
|||
#conversejs {
|
||||
.chatbox {
|
||||
.chat-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
color: #ffffff;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
|
||||
&.chat-head-chatbox {
|
||||
background-color: var(--chat-head-color);
|
||||
}
|
||||
|
||||
.avatar {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.show-msg-author-modal {
|
||||
color: #ffffff !important;
|
||||
}
|
||||
|
||||
.chat-head__desc {
|
||||
color: var(--chat-head-color-lighten-50-percent);
|
||||
font-size: var(--font-size-small);
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
padding: 0.5rem 1rem 0.5rem 1rem;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
max-height: 5em;
|
||||
}
|
||||
|
||||
.chatbox-title {
|
||||
padding: 0.75rem 1rem 0 1rem;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chatbox-title--no-desc {
|
||||
padding: 0.75rem 1rem;
|
||||
}
|
||||
|
||||
.chatbox-title--row {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chatbox-title__text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.chatbox-title__buttons {
|
||||
display: flex;
|
||||
flex-direction: row-reverse;
|
||||
flex-wrap: nowrap;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
|
||||
&.chatbox-btn {
|
||||
&.fa,
|
||||
&.fas,
|
||||
&.far {
|
||||
color: white;
|
||||
&.button-on:before {
|
||||
padding: 0.2em;
|
||||
background-color: var(--chat-head-text-color);
|
||||
color: var(--chat-head-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox-btn {
|
||||
color: white;
|
||||
&.fa, &.far, &.fas {
|
||||
color: white;
|
||||
}
|
||||
&:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
&.button-on:before {
|
||||
border-radius: 5%;
|
||||
background-color: var(--chat-head-text-color);
|
||||
color: var(--chat-head-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,241 @@
|
|||
#conversejs {
|
||||
.chatbox {
|
||||
text-align: left;
|
||||
margin: 0 var(--chat-gutter);
|
||||
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
margin: 0;
|
||||
width: var(--mobile-chat-width);
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
margin: 0;
|
||||
width: var(--mobile-chat-width);
|
||||
}
|
||||
|
||||
converse-controlbox-navback {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.flyout {
|
||||
position: absolute;
|
||||
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
border-radius: 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
bottom: 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox-btn {
|
||||
border-radius: 25%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
font-size: var(--chatbox-button-size);
|
||||
margin: 0 0.2em;
|
||||
padding: 0 0 0 0.5em;
|
||||
text-decoration: none;
|
||||
|
||||
&:active {
|
||||
position: relative;
|
||||
top: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-flyout {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
box-shadow: 1px 3px 5px 3px rgba(0, 0, 0, 0.4);
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
height: var(--mobile-chat-height);
|
||||
width: var(--mobile-chat-width);
|
||||
height: var(--fullpage-chat-height);
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
height: var(--mobile-chat-height);
|
||||
width: var(--mobile-chat-width);
|
||||
height: var(--fullpage-chat-height);
|
||||
}
|
||||
}
|
||||
|
||||
.chat-title {
|
||||
display: var(--heading-display);
|
||||
font-family: var(--heading-font);
|
||||
color: var(--heading-color);
|
||||
display: block;
|
||||
line-height: var(--line-height-large);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
&.groupchat {
|
||||
padding-right: var(--chatroom-head-title-padding-right);
|
||||
}
|
||||
a {
|
||||
color: var(--chat-head-text-color);
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
background-color: var(--chat-textarea-background-color);
|
||||
border-bottom-left-radius: var(--chatbox-border-radius);
|
||||
border-bottom-right-radius: var(--chatbox-border-radius);
|
||||
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
@media screen and (max-width: $mobile-portrait-length) {
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
border-top: 0;
|
||||
p {
|
||||
color: var(--text-color);
|
||||
font-size: var(--message-font-size);
|
||||
margin: 0;
|
||||
padding: 5px;
|
||||
}
|
||||
}
|
||||
.new-msgs-indicator {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
cursor: pointer;
|
||||
background-color: var(--chat-head-color);
|
||||
color: var(--light-background-color);
|
||||
padding: 0.5em;
|
||||
font-size: 0.9em;
|
||||
text-align: center;
|
||||
z-index: 20;
|
||||
white-space: nowrap;
|
||||
margin-bottom: 0.25em;
|
||||
}
|
||||
.chat-content {
|
||||
background-color: var(--chat-content-background-color);
|
||||
border: 0;
|
||||
color: var(--text-color);
|
||||
font-size: var(--message-font-size);
|
||||
height: 100%;
|
||||
line-height: 1.3em;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
converse-chat-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
converse-chat-message {
|
||||
.spinner {
|
||||
width: 100%;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content__help {
|
||||
max-height: 100%;
|
||||
converse-chat-help {
|
||||
border-top: 1px solid var(--chat-head-color);
|
||||
display: block;
|
||||
height: 100%;
|
||||
overflow-y: auto;
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
.close-chat-help {
|
||||
float: right;
|
||||
padding-right: 1em;
|
||||
cursor: pointer;
|
||||
color: var(--chat-content-background-color);
|
||||
svg {
|
||||
fill: var(--chat-head-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chat-content__messages {
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.chat-content__notifications {
|
||||
height: 1.7em;
|
||||
white-space: pre;
|
||||
background-color: var(--chat-content-background-color);
|
||||
color: var(--subdued-color);
|
||||
font-size: 90%;
|
||||
font-style: italic;
|
||||
line-height: var(--line-height-small);
|
||||
padding: 0 1em 0.3em;
|
||||
&:before {
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
|
||||
video {
|
||||
width: 100%
|
||||
}
|
||||
progress {
|
||||
margin: 0.5em 0;
|
||||
width: 100%
|
||||
}
|
||||
}
|
||||
|
||||
.dropdown { /* status dropdown styles */
|
||||
background-color: var(--light-background-color);
|
||||
dd {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
|
||||
.dragresize {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
z-index: 20;
|
||||
&-top {
|
||||
cursor: n-resize;
|
||||
height: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
&-left,
|
||||
&-occupants-left {
|
||||
cursor: w-resize;
|
||||
width: 5px;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
}
|
||||
&-topleft {
|
||||
cursor: nw-resize;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,261 @@
|
|||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "shared/styles/_variables.scss";
|
||||
@import "bootstrap/scss/media";
|
||||
@import "./chatbox.scss";
|
||||
|
||||
|
||||
/* ******************* Overlay and embedded styles *************************** */
|
||||
|
||||
#conversejs {
|
||||
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-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 {
|
||||
margin: 0;
|
||||
margin-left: 15px;
|
||||
.box-flyout {
|
||||
box-shadow: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
&:not(#controlbox) {
|
||||
.box-flyout {
|
||||
@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-embedded {
|
||||
.chat-head {
|
||||
font-size: var(--font-size-huge);
|
||||
}
|
||||
|
||||
.chatbox {
|
||||
.box-flyout {
|
||||
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-background-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 {
|
||||
converse-controlbox-navback {
|
||||
margin: auto 0;
|
||||
margin-right: 1em;
|
||||
display: flex;
|
||||
.fa-arrow-left {
|
||||
&:before {
|
||||
color: var(--chat-head-text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -7,6 +7,8 @@ import { _converse, api, converse } from "@converse/headless/core";
|
|||
import { getAutoCompleteListItem, parseMessageForMUCCommands } from './utils.js';
|
||||
import { render } from 'lit';
|
||||
|
||||
import './styles/muc-bottom-panel.scss';
|
||||
|
||||
|
||||
export default class MUCBottomPanel extends BottomPanel {
|
||||
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@ import { __ } from 'i18n';
|
|||
import { _converse, api, converse } from "@converse/headless/core";
|
||||
import { getHeadingDropdownItem, getHeadingStandaloneButton } from 'plugins/chatview/utils.js';
|
||||
|
||||
import './styles/muc-head.scss';
|
||||
|
||||
|
||||
export default class MUCHeading extends ChatHeading {
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
/**
|
||||
* @module converse-muc-views
|
||||
* @copyright 2020, the Converse.js contributors
|
||||
* @description XEP-0045 Multi-User Chat Views
|
||||
* @license Mozilla Public License (MPLv2)
|
||||
|
|
@ -12,7 +11,7 @@ import muc_api from './api.js';
|
|||
import { api, converse } from '@converse/headless/core';
|
||||
import { fetchAndSetMUCDomain } from './utils.js';
|
||||
|
||||
import './styles/muc.scss';
|
||||
import './styles/index.scss';
|
||||
|
||||
converse.MUC.VIEWS = {
|
||||
CONFIG: 'config-form',
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import tpl_muc_sidebar from "./templates/muc-sidebar.js";
|
|||
import { CustomElement } from 'shared/components/element.js';
|
||||
import { _converse, api, converse } from "@converse/headless/core";
|
||||
|
||||
import './styles/muc-occupants.scss';
|
||||
|
||||
const { u } = converse.env;
|
||||
|
||||
export default class MUCSidebar extends CustomElement {
|
||||
|
|
|
|||
|
|
@ -0,0 +1,185 @@
|
|||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "shared/styles/_variables.scss";
|
||||
|
||||
@import "./muc.scss";
|
||||
@import "./muc-details-modal.scss";
|
||||
|
||||
converse-muc-disconnected,
|
||||
converse-muc-destroyed {
|
||||
padding: 2em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#conversejs.converse-embedded,
|
||||
#conversejs {
|
||||
.badge--muc {
|
||||
background-color: var(--groupchats-header-color);
|
||||
}
|
||||
|
||||
.add-chatroom {
|
||||
input[type="submit"],
|
||||
input[type="button"] {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* ******************* Overlay styles *************************** */
|
||||
|
||||
#conversejs {
|
||||
converse-chats {
|
||||
&.converse-overlayed {
|
||||
.chatbox {
|
||||
&.chatroom {
|
||||
min-width: var(--chatroom-width) !important;
|
||||
width: var(--chatroom-width);
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.occupant-status {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-area {
|
||||
min-width: var(--overlayed-chat-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.converse-embedded,
|
||||
&.converse-fullscreen,
|
||||
&.converse-mobile {
|
||||
|
||||
.chatroom {
|
||||
.box-flyout {
|
||||
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%;
|
||||
.muc-form-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.occupants {
|
||||
.occupant-list {
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
#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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,49 @@
|
|||
#conversejs {
|
||||
converse-muc.chatroom {
|
||||
converse-muc-bottom-panel {
|
||||
display: contents;
|
||||
height: 3em;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-small);
|
||||
background-color: var(--chatroom-head-bg-color);
|
||||
color: white;
|
||||
|
||||
&.muc-bottom-panel--muted {
|
||||
height: 4em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.muc-bottom-panel--nickname {
|
||||
padding: 0;
|
||||
height: 16em;
|
||||
|
||||
.muc-form-container {
|
||||
.chatroom-form {
|
||||
padding-top: 2em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sendXMPPMessage {
|
||||
.suggestion-box__results--above {
|
||||
bottom: 4.5em;
|
||||
}
|
||||
.chat-textarea, input {
|
||||
&:active, &:focus{
|
||||
outline-color: var(--chatroom-head-bg-color) !important;
|
||||
}
|
||||
&.correcting {
|
||||
background-color: var(--chatroom-correcting-color);
|
||||
}
|
||||
}
|
||||
.chat-textarea {
|
||||
width: 100%;
|
||||
border: none;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
converse-muc-bottom-panel {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.muc-bottom-panel {
|
||||
height: 3em;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-small);
|
||||
background-color: var(--chatroom-head-bg-color);
|
||||
color: white;
|
||||
|
||||
&.muc-bottom-panel--muted {
|
||||
height: 4em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.muc-bottom-panel--nickname {
|
||||
padding: 0;
|
||||
height: 16em;
|
||||
|
||||
.muc-form-container {
|
||||
.chatroom-form {
|
||||
padding-top: 2em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
#muc-details-modal {
|
||||
.features-list {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.chatroom-features {
|
||||
width: 100%;
|
||||
.features-list {
|
||||
padding-top: 0;
|
||||
.feature {
|
||||
width: 100%;
|
||||
margin-right: 0.5em;
|
||||
padding-right: 0;
|
||||
font-size: 1em;
|
||||
cursor: help;
|
||||
.fa {
|
||||
margin-right: 0.5em;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
converse-muc-config-form {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#conversejs {
|
||||
.chatroom {
|
||||
.box-flyout {
|
||||
.muc-form-container {
|
||||
background-color: white;
|
||||
border: 0;
|
||||
color: var(--text-color);
|
||||
font-size: var(--font-size);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.validation-message {
|
||||
font-size: 90%;
|
||||
color: var(--error-color);
|
||||
}
|
||||
input[type=button],
|
||||
input[type=submit] {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
.button-primary {
|
||||
background-color: var(--chatroom-head-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
.chatroom-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
#conversejs {
|
||||
converse-muc.chatroom {
|
||||
.chat-head-chatroom {
|
||||
color: var(--chatroom-head-color);
|
||||
background-color: var(--chatroom-head-bg-color);
|
||||
border-bottom: var(--chatroom-head-border-bottom);
|
||||
|
||||
.chat-head__desc {
|
||||
color: var(--chatroom-head-color);
|
||||
display: var(--chatroom-head-description-display);
|
||||
a {
|
||||
color: var(--chatroom-head-description-link-color);
|
||||
}
|
||||
&:hover {
|
||||
button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox-title {
|
||||
.btn--transparent {
|
||||
i {
|
||||
color: var(--chatroom-head-color);
|
||||
}
|
||||
}
|
||||
.chatbox-title__text--bookmarked {
|
||||
margin-left: 0.5em;
|
||||
color: var(--chatroom-head-color);
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox-title__buttons {
|
||||
background-color: var(--chatroom-head-bg-color);
|
||||
}
|
||||
|
||||
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
|
||||
&.chatbox-btn {
|
||||
&.fa {
|
||||
color: var(--chat-head-text-color);
|
||||
&.button-on:before {
|
||||
color: var(--chatroom-head-button-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox-btn {
|
||||
&.button-on:before {
|
||||
color: var(--chatroom-head-button-color);
|
||||
}
|
||||
}
|
||||
.chatbox-title__text {
|
||||
display: var(--heading-display);
|
||||
font-weight: var(--chatroom-head-title-font-weight);
|
||||
margin: auto 0;
|
||||
padding-right: var(--chatroom-head-title-padding-right);
|
||||
white-space: nowrap;
|
||||
.chatroom-jid {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,135 @@
|
|||
#conversejs {
|
||||
converse-muc.chatroom {
|
||||
.box-flyout {
|
||||
.occupants {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
vertical-align: top;
|
||||
background-color: var(--occupants-background-color);
|
||||
border-left: var(--occupants-border-left);
|
||||
padding: 0.5em;
|
||||
max-width: 75%;
|
||||
min-width: 20%;
|
||||
flex: 0 0 25%;
|
||||
|
||||
.occupants-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.hide-occupants {
|
||||
align-self: flex-end;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
|
||||
.occupants-header--title {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.fa-user-plus {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.occupants-heading {
|
||||
font-family: var(--heading-font);
|
||||
color: var(--groupchats-header-color-dark);
|
||||
padding-left: 0;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.suggestion-box{
|
||||
ul {
|
||||
padding: 0;
|
||||
li {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
margin-bottom: 0.5em;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
|
||||
&.occupant-list {
|
||||
overflow-y: auto;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
li {
|
||||
cursor: default;
|
||||
display: block;
|
||||
font-size: var(--font-size-small);
|
||||
overflow: hidden;
|
||||
padding: 0.25em 0.25em 0.25em 0;
|
||||
text-overflow: ellipsis;
|
||||
.fa {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
&.feature {
|
||||
font-size: var(--font-size-tiny);
|
||||
}
|
||||
&.occupant {
|
||||
cursor: pointer;
|
||||
|
||||
.occupant-nick-badge {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.occupant-badges {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
|
||||
span {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.row.no-gutters {
|
||||
flex-wrap: nowrap;
|
||||
min-height: 1.5em;
|
||||
}
|
||||
.badge {
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.occupant-status {
|
||||
display: inline-block;
|
||||
margin: 0 0.5em 0.125em 0;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
|
||||
&.occupant-online,
|
||||
&.occupant-chat {
|
||||
background-color: #1A9707;
|
||||
}
|
||||
&.occupant-dnd {
|
||||
background-color: red;
|
||||
}
|
||||
&.occupant-away {
|
||||
background-color: darkorange;
|
||||
}
|
||||
&.occupant-xa {
|
||||
background-color: orange;
|
||||
}
|
||||
&.occupant-offline {
|
||||
background-color: darkgrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,131 +1,10 @@
|
|||
@import "bootstrap/scss/functions";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/mixins";
|
||||
@import "shared/styles/_variables.scss";
|
||||
@import "plugins/chatview/styles/chatbox.scss";
|
||||
@import "./muc-forms.scss";
|
||||
|
||||
|
||||
converse-muc-config-form {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
converse-muc-disconnected,
|
||||
converse-muc-destroyed {
|
||||
padding: 2em;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#conversejs.converse-embedded,
|
||||
#conversejs {
|
||||
.badge--muc {
|
||||
background-color: var(--groupchats-header-color);
|
||||
}
|
||||
|
||||
.add-chatroom {
|
||||
input[type="submit"],
|
||||
input[type="button"] {
|
||||
margin: 0.3em 0;
|
||||
}
|
||||
}
|
||||
|
||||
#muc-details-modal {
|
||||
.features-list {
|
||||
margin-left: 1em;
|
||||
}
|
||||
}
|
||||
|
||||
.chatroom-features {
|
||||
width: 100%;
|
||||
.features-list {
|
||||
padding-top: 0;
|
||||
.feature {
|
||||
width: 100%;
|
||||
margin-right: 0.5em;
|
||||
padding-right: 0;
|
||||
font-size: 1em;
|
||||
cursor: help;
|
||||
.fa {
|
||||
margin-right: 0.5em;
|
||||
color: var(--text-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.chat-head-chatroom {
|
||||
color: var(--chatroom-head-color);
|
||||
background-color: var(--chatroom-head-bg-color);
|
||||
border-bottom: var(--chatroom-head-border-bottom);
|
||||
|
||||
.chat-head__desc {
|
||||
color: var(--chatroom-head-color);
|
||||
display: var(--chatroom-head-description-display);
|
||||
a {
|
||||
color: var(--chatroom-head-description-link-color);
|
||||
}
|
||||
&:hover {
|
||||
button {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox-title {
|
||||
.btn--transparent {
|
||||
i {
|
||||
color: var(--chatroom-head-color);
|
||||
}
|
||||
}
|
||||
.chatbox-title__text--bookmarked {
|
||||
margin-left: 0.5em;
|
||||
color: var(--chatroom-head-color);
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox-title__buttons {
|
||||
background-color: var(--chatroom-head-bg-color);
|
||||
}
|
||||
|
||||
a, a:visited, a:hover, a:not([href]):not([tabindex]) {
|
||||
&.chatbox-btn {
|
||||
&.fa {
|
||||
color: var(--chat-head-text-color);
|
||||
&.button-on:before {
|
||||
color: var(--chatroom-head-button-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.chatbox-btn {
|
||||
&.button-on:before {
|
||||
color: var(--chatroom-head-button-color);
|
||||
}
|
||||
}
|
||||
.chatbox-title__text {
|
||||
display: var(--heading-display);
|
||||
font-weight: var(--chatroom-head-title-font-weight);
|
||||
margin: auto 0;
|
||||
padding-right: var(--chatroom-head-title-padding-right);
|
||||
white-space: nowrap;
|
||||
.chatroom-jid {
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.empty-history-feedback {
|
||||
position: relative;
|
||||
span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
margin-top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.chatroom {
|
||||
width: var(--chatroom-width);
|
||||
@media screen and (max-height: $mobile-landscape-height){
|
||||
|
|
@ -135,11 +14,21 @@ converse-muc-destroyed {
|
|||
width: var(--mobile-chat-width);
|
||||
}
|
||||
|
||||
.empty-history-feedback {
|
||||
position: relative;
|
||||
span {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
margin-top: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.box-flyout {
|
||||
overflow-y: hidden;
|
||||
background-color: var(--chatroom-head-bg-color);
|
||||
|
||||
width: 100%;
|
||||
|
||||
@media screen and (max-height: $mobile-landscape-height) {
|
||||
height: var(--mobile-chat-height);
|
||||
width: var(--mobile-chat-width);
|
||||
|
|
@ -155,6 +44,7 @@ converse-muc-destroyed {
|
|||
flex-flow: nowrap;
|
||||
background-color: white;
|
||||
border-top: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
|
|
@ -213,210 +103,7 @@ converse-muc-destroyed {
|
|||
}
|
||||
}
|
||||
}
|
||||
.occupants {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
vertical-align: top;
|
||||
background-color: var(--occupants-background-color);
|
||||
border-left: var(--occupants-border-left);
|
||||
padding: 0.5em;
|
||||
max-width: 75%;
|
||||
min-width: 20%;
|
||||
flex: 0 0 25%;
|
||||
|
||||
.occupants-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.hide-occupants {
|
||||
align-self: flex-end;
|
||||
cursor: pointer;
|
||||
font-size: var(--font-size-small);
|
||||
}
|
||||
}
|
||||
|
||||
.occupants-header--title {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.fa-user-plus {
|
||||
margin-right: 0.25em;
|
||||
}
|
||||
|
||||
.occupants-heading {
|
||||
font-family: var(--heading-font);
|
||||
color: var(--groupchats-header-color-dark);
|
||||
padding-left: 0;
|
||||
margin-right: 1em;
|
||||
}
|
||||
.suggestion-box{
|
||||
ul {
|
||||
padding: 0;
|
||||
li {
|
||||
padding: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
ul {
|
||||
padding: 0;
|
||||
margin-bottom: 0.5em;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
|
||||
&.occupant-list {
|
||||
overflow-y: auto;
|
||||
flex-basis: 0;
|
||||
flex-grow: 1;
|
||||
}
|
||||
li {
|
||||
cursor: default;
|
||||
display: block;
|
||||
font-size: var(--font-size-small);
|
||||
overflow: hidden;
|
||||
padding: 0.25em 0.25em 0.25em 0;
|
||||
text-overflow: ellipsis;
|
||||
.fa {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
&.feature {
|
||||
font-size: var(--font-size-tiny);
|
||||
}
|
||||
&.occupant {
|
||||
cursor: pointer;
|
||||
|
||||
.occupant-nick-badge {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.occupant-badges {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
flex-direction: row;
|
||||
|
||||
span {
|
||||
margin-right: 0.25rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.row.no-gutters {
|
||||
flex-wrap: nowrap;
|
||||
min-height: 1.5em;
|
||||
}
|
||||
.badge {
|
||||
margin-bottom: 0.125rem;
|
||||
}
|
||||
|
||||
.occupant-status {
|
||||
display: inline-block;
|
||||
margin: 0 0.5em 0.125em 0;
|
||||
width: 0.5em;
|
||||
height: 0.5em;
|
||||
|
||||
&.occupant-online,
|
||||
&.occupant-chat {
|
||||
background-color: #1A9707;
|
||||
}
|
||||
&.occupant-dnd {
|
||||
background-color: red;
|
||||
}
|
||||
&.occupant-away {
|
||||
background-color: darkorange;
|
||||
}
|
||||
&.occupant-xa {
|
||||
background-color: orange;
|
||||
}
|
||||
&.occupant-offline {
|
||||
background-color: darkgrey;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.muc-form-container {
|
||||
background-color: white;
|
||||
border: 0;
|
||||
color: var(--text-color);
|
||||
font-size: var(--font-size);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
overflow-y: auto;
|
||||
|
||||
.validation-message {
|
||||
font-size: 90%;
|
||||
color: var(--error-color);
|
||||
}
|
||||
input[type=button],
|
||||
input[type=submit] {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
.button-primary {
|
||||
background-color: var(--chatroom-head-button-color);
|
||||
}
|
||||
}
|
||||
|
||||
.chatroom-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 2em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
converse-muc-bottom-panel {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.muc-bottom-panel {
|
||||
height: 3em;
|
||||
padding: 0.5em;
|
||||
text-align: center;
|
||||
font-size: var(--font-size-small);
|
||||
background-color: var(--chatroom-head-bg-color);
|
||||
color: white;
|
||||
|
||||
&.muc-bottom-panel--muted {
|
||||
height: 4em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.muc-bottom-panel--nickname {
|
||||
padding: 0;
|
||||
height: 16em;
|
||||
|
||||
.muc-form-container {
|
||||
.chatroom-form {
|
||||
padding-top: 2em;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sendXMPPMessage {
|
||||
.suggestion-box__results--above {
|
||||
bottom: 4.5em;
|
||||
}
|
||||
.chat-textarea, input {
|
||||
&:active, &:focus{
|
||||
outline-color: var(--chatroom-head-bg-color);
|
||||
}
|
||||
&.correcting {
|
||||
background-color: var(--chatroom-correcting-color);
|
||||
}
|
||||
}
|
||||
.chat-textarea {
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -429,159 +116,3 @@ converse-muc-destroyed {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* ******************* Overlay styles *************************** */
|
||||
|
||||
#conversejs {
|
||||
converse-chats {
|
||||
&.converse-overlayed {
|
||||
.chatbox {
|
||||
&.chatroom {
|
||||
min-width: var(--chatroom-width) !important;
|
||||
width: var(--chatroom-width);
|
||||
.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;
|
||||
}
|
||||
}
|
||||
.occupant-status {
|
||||
margin-top: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.chat-area {
|
||||
min-width: var(--overlayed-chat-width);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.converse-embedded,
|
||||
&.converse-fullscreen,
|
||||
&.converse-mobile {
|
||||
|
||||
.chatroom {
|
||||
.box-flyout {
|
||||
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%;
|
||||
.muc-form-container {
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
.occupants {
|
||||
.occupant-list {
|
||||
padding-left: 0.3em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@include media-breakpoint-down(sm) {
|
||||
#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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ import { helpers, FILTER_CONTAINS, ITEM, SORT_BY_QUERY_POSITION } from './utils.
|
|||
import Suggestion from './suggestion.js';
|
||||
import { converse } from "@converse/headless/core";
|
||||
|
||||
|
||||
const u = converse.env.utils;
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -39,28 +39,30 @@
|
|||
transform: rotate(45deg);
|
||||
z-index: -1;
|
||||
}
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 2;
|
||||
min-width: 100%;
|
||||
box-sizing: border-box;
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
border-radius: .3em;
|
||||
margin: .2em 0 0;
|
||||
background: hsla(0,0%,100%,.9);
|
||||
background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.9));
|
||||
border: 1px solid rgba(0,0,0,.3);
|
||||
box-shadow: .05em .2em .6em rgba(0,0,0,.1);
|
||||
box-sizing: border-box;
|
||||
left: 0;
|
||||
list-style: none;
|
||||
margin: .2em 0 0;
|
||||
min-width: 100%;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
text-shadow: none;
|
||||
z-index: 2;
|
||||
|
||||
> li {
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
position: relative;
|
||||
background: hsla(0,0%,100%,.9);
|
||||
background: linear-gradient(to bottom right, white, hsla(0,0%,100%,.9));
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
overflow-x: hidden;
|
||||
padding: 1em;
|
||||
position: relative;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
.suggestion-box__results--below {
|
||||
|
|
|
|||
|
|
@ -62,6 +62,10 @@
|
|||
}
|
||||
.emoji-skintone-picker {
|
||||
display: flex;
|
||||
padding: 0.5em 0;
|
||||
background-color: var(--chat-head-color);
|
||||
width: 100%;
|
||||
font-size: var(--font-size);
|
||||
label {
|
||||
margin: 0;
|
||||
padding: 0 0.5em;
|
||||
|
|
@ -77,10 +81,6 @@
|
|||
padding: 0 0.25em;
|
||||
}
|
||||
}
|
||||
padding: 0.5em 0;
|
||||
background-color: var(--chat-head-color);
|
||||
width: auto;
|
||||
font-size: var(--font-size);
|
||||
}
|
||||
.emoji-picker {
|
||||
background-color: white;
|
||||
|
|
@ -129,6 +129,7 @@
|
|||
}
|
||||
}
|
||||
.emoji-picker__header {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 0.1em 0;
|
||||
|
|
|
|||
|
|
@ -26,12 +26,16 @@
|
|||
|
||||
.toolbar-buttons {
|
||||
width: 100%;
|
||||
display: inline-block;
|
||||
|
||||
.message-limit {
|
||||
padding: 0.5em;
|
||||
font-weight: bold;
|
||||
}
|
||||
* {
|
||||
float: left;
|
||||
}
|
||||
.right {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
.unverified a,
|
||||
|
|
|
|||
Reference in New Issue