Chapril/xmpp.chapril.org-conversejs
Chapril/xmpp.chapril.org-conversejs
24
0
Fork 0
Code Issues Pull Requests Projects Releases Activity

Split up CSS into more files

Browse Source
This commit is contained in:
JC Brand 2021-03-19 12:30:45 +01:00
parent 90ab412628
commit 453b993cfb
12 changed files with 216 additions and 185 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/plugins/chatboxviews/index.js
View File

@ -10,6 +10,8 @@ import ChatBoxViews from './container.js';
import { ViewWithAvatar } from 'shared/avatar.js';
import { _converse, api, converse } from '@converse/headless/core';
import './styles/chats.scss';
function calculateViewportHeightUnit () {
const vh = window.innerHeight * 0.01;

43
src/plugins/chatboxviews/styles/chats.scss Normal file
View 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;
}
}
}
}

10
src/plugins/chatview/styles/_chatbox.scss
View File

@ -551,16 +551,6 @@
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 {
bottom: 0;

25
src/shared/chat/styles/unfurl.scss Normal file
View 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
src/shared/chat/unfurl.js
View File

@ -2,6 +2,8 @@ import { CustomElement } from 'components/element.js';
import { _converse, api } from "@converse/headless/core";
import tpl_unfurl from './templates/unfurl.js';
import './styles/unfurl.scss';
export default class MessageUnfurl extends CustomElement {

150
src/shared/styles/_core.scss
View File

@ -32,32 +32,6 @@
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 {
text-align: center;
}
@ -157,13 +131,6 @@
position: fixed;
}
.converse-chatboxes {
z-index: 1031; // One more than bootstrap navbar
position: fixed;
bottom: 0;
right: 0;
}
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
color: var(--subdued-color);
}
@ -304,25 +271,6 @@
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 {
-webkit-touch-callout: none;
user-select: none;
@ -491,104 +439,6 @@
.nav-pills .show > .nav-link {
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) {

43
src/shared/styles/badges.scss Normal file
View 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
View 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);
}
}
}

4
src/shared/styles/_forms.scss → src/shared/styles/forms.scss
View File

@ -1,4 +1,8 @@
#conversejs {
@import "bootstrap/scss/forms";
@import "bootstrap/scss/input-group";
@import "bootstrap/scss/custom-forms";
.btn--small {
font-size: 80%;
font-weight: normal;

10
src/shared/styles/index.scss
View File

@ -17,19 +17,11 @@
@import "bootstrap/scss/type";
@import "bootstrap/scss/images";
@import "bootstrap/scss/grid";
@import "bootstrap/scss/forms";
@import "bootstrap/scss/buttons";
@import "bootstrap/scss/transitions";
@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/card";
@import "bootstrap/scss/badge";
@import "bootstrap/scss/alert";
@import "bootstrap/scss/media";
@import "bootstrap/scss/list-group";
@import "bootstrap/scss/close";
@import "bootstrap/scss/tooltip";
@import "bootstrap/scss/popover";
@ -39,6 +31,8 @@
@import "variables";
@import "core";
@import "buttons";
@import "badges";
@import "forms";
@import "toolbar";
@import "lists";

7
src/shared/styles/_lists.scss → src/shared/styles/lists.scss
View File

@ -1,4 +1,11 @@
#conversejs {
@import "bootstrap/scss/list-group";
.list-group-item.active {
background-color: var(--primary-color);
border-color: var(--primary-color-dark);
}
.list-container {
text-align: left;
padding: 0.3em 0;

17
src/shared/styles/_messages.scss → src/shared/styles/messages.scss
View File

@ -9,23 +9,6 @@
}
}
.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 {
color: var(--text-color) !important;
}