Split up CSS into more files
This commit is contained in:
parent
90ab412628
commit
453b993cfb
@ -10,6 +10,8 @@ import ChatBoxViews from './container.js';
|
|||||||
import { ViewWithAvatar } from 'shared/avatar.js';
|
import { ViewWithAvatar } from 'shared/avatar.js';
|
||||||
import { _converse, api, converse } from '@converse/headless/core';
|
import { _converse, api, converse } from '@converse/headless/core';
|
||||||
|
|
||||||
|
import './styles/chats.scss';
|
||||||
|
|
||||||
|
|
||||||
function calculateViewportHeightUnit () {
|
function calculateViewportHeightUnit () {
|
||||||
const vh = window.innerHeight * 0.01;
|
const vh = window.innerHeight * 0.01;
|
||||||
|
43
src/plugins/chatboxviews/styles/chats.scss
Normal file
43
src/plugins/chatboxviews/styles/chats.scss
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
#conversejs {
|
||||||
|
converse-chats {
|
||||||
|
&.converse-chatboxes {
|
||||||
|
z-index: 1031; // One more than bootstrap navbar
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
&.converse-overlayed {
|
||||||
|
height: 3em;
|
||||||
|
> .row {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.converse-fullscreen,
|
||||||
|
&.converse-mobile {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
width: 100vw;
|
||||||
|
}
|
||||||
|
&.converse-embedded {
|
||||||
|
box-sizing: border-box;
|
||||||
|
*, *:before, *:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
bottom: auto;
|
||||||
|
height: 100%; // When embedded, it fills the containing element
|
||||||
|
position: relative;
|
||||||
|
right: auto;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&.converse-chatboxes {
|
||||||
|
z-index: 1031; // One more than bootstrap navbar
|
||||||
|
position: inherit;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
bottom: auto;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
margin-left: -15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -551,16 +551,6 @@
|
|||||||
font-size: var(--font-size-huge);
|
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 {
|
.chatbox {
|
||||||
.box-flyout {
|
.box-flyout {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
|
25
src/shared/chat/styles/unfurl.scss
Normal file
25
src/shared/chat/styles/unfurl.scss
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
@import "bootstrap/scss/functions";
|
||||||
|
@import "bootstrap/scss/variables";
|
||||||
|
@import "shared/styles/_mixins.scss";
|
||||||
|
|
||||||
|
#conversejs {
|
||||||
|
@import "bootstrap/scss/card";
|
||||||
|
|
||||||
|
.message {
|
||||||
|
.card--unfurl {
|
||||||
|
margin: 1em 0;
|
||||||
|
@include media-breakpoint-down(sm) {
|
||||||
|
max-width: 95%;
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
max-width: 75%;
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
max-width: 66%;
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(xl) {
|
||||||
|
max-width: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -2,6 +2,8 @@ import { CustomElement } from 'components/element.js';
|
|||||||
import { _converse, api } from "@converse/headless/core";
|
import { _converse, api } from "@converse/headless/core";
|
||||||
import tpl_unfurl from './templates/unfurl.js';
|
import tpl_unfurl from './templates/unfurl.js';
|
||||||
|
|
||||||
|
import './styles/unfurl.scss';
|
||||||
|
|
||||||
|
|
||||||
export default class MessageUnfurl extends CustomElement {
|
export default class MessageUnfurl extends CustomElement {
|
||||||
|
|
||||||
|
@ -32,32 +32,6 @@
|
|||||||
overflow-y: none;
|
overflow-y: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
converse-chats {
|
|
||||||
&.converse-overlayed {
|
|
||||||
height: 3em;
|
|
||||||
> .row {
|
|
||||||
flex-direction: row-reverse;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.converse-fullscreen,
|
|
||||||
&.converse-mobile {
|
|
||||||
flex-wrap: nowrap;
|
|
||||||
width: 100vw;
|
|
||||||
}
|
|
||||||
&.converse-embedded {
|
|
||||||
box-sizing: border-box;
|
|
||||||
*, *:before, *:after {
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
bottom: auto;
|
|
||||||
height: 100%; // When embedded, it fills the containing element
|
|
||||||
position: relative;
|
|
||||||
right: auto;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
converse-brand-heading {
|
converse-brand-heading {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
@ -157,13 +131,6 @@
|
|||||||
position: fixed;
|
position: fixed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.converse-chatboxes {
|
|
||||||
z-index: 1031; // One more than bootstrap navbar
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||||
color: var(--subdued-color);
|
color: var(--subdued-color);
|
||||||
}
|
}
|
||||||
@ -304,25 +271,6 @@
|
|||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.badge {
|
|
||||||
line-height: 1;
|
|
||||||
font-weight: normal;
|
|
||||||
font-size: 90%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
font-weight: normal;
|
|
||||||
color: #fff;
|
|
||||||
.fa, .far, .fas {
|
|
||||||
color: #fff;
|
|
||||||
margin-right: 0.5em;
|
|
||||||
|
|
||||||
&.only-icon {
|
|
||||||
margin-right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.no-text-select {
|
.no-text-select {
|
||||||
-webkit-touch-callout: none;
|
-webkit-touch-callout: none;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
@ -491,104 +439,6 @@
|
|||||||
.nav-pills .show > .nav-link {
|
.nav-pills .show > .nav-link {
|
||||||
background-color: var(--primary-color);
|
background-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.list-group-item.active {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
border-color: var(--primary-color-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
text-shadow: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-light {
|
|
||||||
color: var(--text-color);
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-primary, .button-primary, .badge-primary {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
border-color: transparent;
|
|
||||||
&:focus, &:hover, &:active {
|
|
||||||
background-color: var(--primary-color-dark) !important;
|
|
||||||
border-color: transparent !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn--transparent {
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-circle {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
text-align: center;
|
|
||||||
padding: 0.5em 0;
|
|
||||||
font-size: var(--font-size-small);
|
|
||||||
line-height: 1.428571429;
|
|
||||||
border-radius: 50%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn {
|
|
||||||
&.fa {
|
|
||||||
color: white !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.badge-groupchat {
|
|
||||||
background-color: var(--chatroom-badge-color);
|
|
||||||
border-color: transparent;
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--chatroom-badge-hover-color);
|
|
||||||
border-color: transparent;
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
background-color: var(--chatroom-badge-hover-color) !important;
|
|
||||||
border-color: transparent !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-info, .badge-info {
|
|
||||||
background-color: var(--primary-color);
|
|
||||||
border-color: var(--primary-color);
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--primary-color-dark);
|
|
||||||
border-color: var(--primary-color-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.button-cancel,
|
|
||||||
.btn-secondary, .badge-secondary {
|
|
||||||
color: white;
|
|
||||||
background-color: var(--secondary-color);
|
|
||||||
border-color: var(--secondary-color);
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--secondary-color-dark);
|
|
||||||
border-color: var(--secondary-color-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-warning {
|
|
||||||
color: white;
|
|
||||||
background-color: var(--warning-color);
|
|
||||||
border-color: var(--warning-color);
|
|
||||||
&:hover {
|
|
||||||
color: white;
|
|
||||||
background-color: var(--warning-color-dark);
|
|
||||||
border-color: var(--warning-color-dark)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.btn-danger {
|
|
||||||
color: white;
|
|
||||||
background-color: var(--danger-color);
|
|
||||||
border-color: var(--danger-color) !important;
|
|
||||||
&:hover {
|
|
||||||
background-color: var(--danger-color-dark);
|
|
||||||
border-color: var(--danger-color-dark);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: 575px) {
|
@media screen and (max-width: 575px) {
|
||||||
|
43
src/shared/styles/badges.scss
Normal file
43
src/shared/styles/badges.scss
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
#conversejs {
|
||||||
|
@import "bootstrap/scss/badge";
|
||||||
|
|
||||||
|
.badge {
|
||||||
|
color: white;
|
||||||
|
font-size: 90%;
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-light {
|
||||||
|
color: var(--text-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-primary {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border-color: transparent;
|
||||||
|
&:focus, &:hover, &:active {
|
||||||
|
background-color: var(--primary-color-dark) !important;
|
||||||
|
border-color: transparent !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-info {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--primary-color-dark);
|
||||||
|
border-color: var(--primary-color-dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.badge-secondary {
|
||||||
|
color: white;
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
border-color: var(--secondary-color);
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--secondary-color-dark);
|
||||||
|
border-color: var(--secondary-color-dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
88
src/shared/styles/buttons.scss
Normal file
88
src/shared/styles/buttons.scss
Normal file
@ -0,0 +1,88 @@
|
|||||||
|
#conversejs {
|
||||||
|
@import "bootstrap/scss/buttons";
|
||||||
|
@import "bootstrap/scss/button-group";
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
font-weight: normal;
|
||||||
|
color: #fff;
|
||||||
|
.fa, .far, .fas {
|
||||||
|
color: #fff;
|
||||||
|
margin-right: 0.5em;
|
||||||
|
|
||||||
|
&.only-icon {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-primary {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border-color: transparent;
|
||||||
|
&:focus, &:hover, &:active {
|
||||||
|
background-color: var(--primary-color-dark) !important;
|
||||||
|
border-color: transparent !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn--transparent {
|
||||||
|
background: transparent;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-circle {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
text-align: center;
|
||||||
|
padding: 0.5em 0;
|
||||||
|
font-size: var(--font-size-small);
|
||||||
|
line-height: 1.428571429;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
&.fa {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-info, .badge-info {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border-color: var(--primary-color);
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--primary-color-dark);
|
||||||
|
border-color: var(--primary-color-dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-cancel,
|
||||||
|
.btn-secondary, .badge-secondary {
|
||||||
|
color: white;
|
||||||
|
background-color: var(--secondary-color);
|
||||||
|
border-color: var(--secondary-color);
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--secondary-color-dark);
|
||||||
|
border-color: var(--secondary-color-dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-warning {
|
||||||
|
color: white;
|
||||||
|
background-color: var(--warning-color);
|
||||||
|
border-color: var(--warning-color);
|
||||||
|
&:hover {
|
||||||
|
color: white;
|
||||||
|
background-color: var(--warning-color-dark);
|
||||||
|
border-color: var(--warning-color-dark)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-danger {
|
||||||
|
color: white;
|
||||||
|
background-color: var(--danger-color);
|
||||||
|
border-color: var(--danger-color) !important;
|
||||||
|
&:hover {
|
||||||
|
background-color: var(--danger-color-dark);
|
||||||
|
border-color: var(--danger-color-dark);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
@ -1,4 +1,8 @@
|
|||||||
#conversejs {
|
#conversejs {
|
||||||
|
@import "bootstrap/scss/forms";
|
||||||
|
@import "bootstrap/scss/input-group";
|
||||||
|
@import "bootstrap/scss/custom-forms";
|
||||||
|
|
||||||
.btn--small {
|
.btn--small {
|
||||||
font-size: 80%;
|
font-size: 80%;
|
||||||
font-weight: normal;
|
font-weight: normal;
|
@ -17,19 +17,11 @@
|
|||||||
@import "bootstrap/scss/type";
|
@import "bootstrap/scss/type";
|
||||||
@import "bootstrap/scss/images";
|
@import "bootstrap/scss/images";
|
||||||
@import "bootstrap/scss/grid";
|
@import "bootstrap/scss/grid";
|
||||||
@import "bootstrap/scss/forms";
|
|
||||||
@import "bootstrap/scss/buttons";
|
|
||||||
@import "bootstrap/scss/transitions";
|
@import "bootstrap/scss/transitions";
|
||||||
@import "bootstrap/scss/dropdown";
|
@import "bootstrap/scss/dropdown";
|
||||||
@import "bootstrap/scss/button-group";
|
|
||||||
@import "bootstrap/scss/input-group";
|
|
||||||
@import "bootstrap/scss/custom-forms";
|
|
||||||
@import "bootstrap/scss/nav";
|
@import "bootstrap/scss/nav";
|
||||||
@import "bootstrap/scss/card";
|
|
||||||
@import "bootstrap/scss/badge";
|
|
||||||
@import "bootstrap/scss/alert";
|
@import "bootstrap/scss/alert";
|
||||||
@import "bootstrap/scss/media";
|
@import "bootstrap/scss/media";
|
||||||
@import "bootstrap/scss/list-group";
|
|
||||||
@import "bootstrap/scss/close";
|
@import "bootstrap/scss/close";
|
||||||
@import "bootstrap/scss/tooltip";
|
@import "bootstrap/scss/tooltip";
|
||||||
@import "bootstrap/scss/popover";
|
@import "bootstrap/scss/popover";
|
||||||
@ -39,6 +31,8 @@
|
|||||||
@import "variables";
|
@import "variables";
|
||||||
|
|
||||||
@import "core";
|
@import "core";
|
||||||
|
@import "buttons";
|
||||||
|
@import "badges";
|
||||||
@import "forms";
|
@import "forms";
|
||||||
@import "toolbar";
|
@import "toolbar";
|
||||||
@import "lists";
|
@import "lists";
|
||||||
|
@ -1,4 +1,11 @@
|
|||||||
#conversejs {
|
#conversejs {
|
||||||
|
@import "bootstrap/scss/list-group";
|
||||||
|
|
||||||
|
.list-group-item.active {
|
||||||
|
background-color: var(--primary-color);
|
||||||
|
border-color: var(--primary-color-dark);
|
||||||
|
}
|
||||||
|
|
||||||
.list-container {
|
.list-container {
|
||||||
text-align: left;
|
text-align: left;
|
||||||
padding: 0.3em 0;
|
padding: 0.3em 0;
|
@ -9,23 +9,6 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
.message {
|
.message {
|
||||||
|
|
||||||
.card--unfurl {
|
|
||||||
margin: 1em 0;
|
|
||||||
@include media-breakpoint-down(sm) {
|
|
||||||
max-width: 95%;
|
|
||||||
}
|
|
||||||
@include media-breakpoint-up(md) {
|
|
||||||
max-width: 75%;
|
|
||||||
}
|
|
||||||
@include media-breakpoint-up(lg) {
|
|
||||||
max-width: 66%;
|
|
||||||
}
|
|
||||||
@include media-breakpoint-up(xl) {
|
|
||||||
max-width: 50%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.show-msg-author-modal {
|
.show-msg-author-modal {
|
||||||
color: var(--text-color) !important;
|
color: var(--text-color) !important;
|
||||||
}
|
}
|
Loading…
Reference in New Issue
Block a user