Fix background for overlayed mode
This commit is contained in:
parent
fc51257ee1
commit
6c3a3dd1d3
7
dev.html
7
dev.html
|
@ -12,10 +12,11 @@
|
||||||
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
|
<link rel="shortcut icon" type="image/ico" href="images/favicon.ico"/>
|
||||||
<link type="text/css" rel="stylesheet" media="screen" href="dist/converse.css" />
|
<link type="text/css" rel="stylesheet" media="screen" href="dist/converse.css" />
|
||||||
<script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>
|
<script src="https://cdn.conversejs.org/3rdparty/libsignal-protocol.min.js"></script>
|
||||||
|
<script src="dist/website.css"></script>
|
||||||
<script src="dist/converse.js"></script>
|
<script src="dist/converse.js"></script>
|
||||||
</head>
|
</head>
|
||||||
|
|
||||||
<body class="reset">
|
<body class="reset" style="background-color: #211018;">
|
||||||
<div id="conversejs-bg"></div>
|
<div id="conversejs-bg"></div>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
@ -36,8 +37,8 @@
|
||||||
muc_show_logs_before_join: true,
|
muc_show_logs_before_join: true,
|
||||||
notify_all_room_messages: ['discuss@conference.conversejs.org'],
|
notify_all_room_messages: ['discuss@conference.conversejs.org'],
|
||||||
persistent_store: 'IndexedDB',
|
persistent_store: 'IndexedDB',
|
||||||
theme: 'concord',
|
// theme: 'concord',
|
||||||
view_mode: 'fullscreen',
|
// view_mode: 'fullscreen',
|
||||||
websocket_url: 'wss://conversejs.org/xmpp-websocket',
|
websocket_url: 'wss://conversejs.org/xmpp-websocket',
|
||||||
// websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
|
// websocket_url: 'ws://chat.example.org:5380/xmpp-websocket',
|
||||||
whitelisted_plugins: ['converse-debug'],
|
whitelisted_plugins: ['converse-debug'],
|
||||||
|
|
3481
package-lock.json
generated
3481
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
@ -10,7 +10,6 @@ import "@converse/headless/plugins/muc/index.js";
|
||||||
import { api, converse } from "@converse/headless/core";
|
import { api, converse } from "@converse/headless/core";
|
||||||
|
|
||||||
import './styles/fullscreen.scss';
|
import './styles/fullscreen.scss';
|
||||||
import './styles/background.scss';
|
|
||||||
|
|
||||||
|
|
||||||
converse.plugins.add('converse-fullscreen', {
|
converse.plugins.add('converse-fullscreen', {
|
||||||
|
|
|
@ -1,74 +0,0 @@
|
||||||
@import "bootstrap/scss/functions";
|
|
||||||
@import "bootstrap/scss/variables";
|
|
||||||
@import "bootstrap/scss/mixins";
|
|
||||||
|
|
||||||
.conversejs-bg {
|
|
||||||
.subdued {
|
|
||||||
opacity: 0.35;
|
|
||||||
}
|
|
||||||
|
|
||||||
.converse-brand {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
margin-top: 15vh;
|
|
||||||
animation-name: fadein;
|
|
||||||
animation-fill-mode: forwards;
|
|
||||||
animation-duration: 5s;
|
|
||||||
animation-timing-function: ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.converse-brand__padding {
|
|
||||||
@include make-col-ready();
|
|
||||||
@include media-breakpoint-up(md) {
|
|
||||||
@include make-col(4);
|
|
||||||
}
|
|
||||||
@include media-breakpoint-up(lg) {
|
|
||||||
@include make-col(3);
|
|
||||||
}
|
|
||||||
@include media-breakpoint-up(xl) {
|
|
||||||
@include make-col(2);
|
|
||||||
}
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.converse-brand__heading {
|
|
||||||
@include make-col-ready();
|
|
||||||
@include media-breakpoint-up(md) {
|
|
||||||
font-size: 4em;
|
|
||||||
@include make-col(8);
|
|
||||||
}
|
|
||||||
@include media-breakpoint-up(lg) {
|
|
||||||
font-size: 5em;
|
|
||||||
@include make-col(9);
|
|
||||||
}
|
|
||||||
@include media-breakpoint-up(xl) {
|
|
||||||
font-size: 6em;
|
|
||||||
@include make-col(10);
|
|
||||||
}
|
|
||||||
padding: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin: auto;
|
|
||||||
svg {
|
|
||||||
margin-top: 0.3em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.converse-brand__text {
|
|
||||||
color: #ffffff;
|
|
||||||
font-family: var(--branding-font);
|
|
||||||
font-weight: normal;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 140%;
|
|
||||||
margin-left: 0.2em;
|
|
||||||
.byline {
|
|
||||||
margin: 0;
|
|
||||||
font-family: var(--heading-font);
|
|
||||||
font-size: 0.3em;
|
|
||||||
opacity: 0.55;
|
|
||||||
margin-bottom: 2em;
|
|
||||||
margin-left: -2.7em;
|
|
||||||
word-spacing: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -1,7 +1,7 @@
|
||||||
$mobile_landscape_height: 450px !default;
|
$mobile_landscape_height: 450px !default;
|
||||||
$mobile_portrait_length: 480px !default;
|
$mobile_portrait_length: 480px !default;
|
||||||
|
|
||||||
.conversejs, .conversejs-bg, body.converse-fullscreen {
|
.conversejs, .conversejs-bg, #conversejs-bg, body.converse-fullscreen {
|
||||||
--subdued-color: #A8ABA1;
|
--subdued-color: #A8ABA1;
|
||||||
|
|
||||||
--green: #3AA569;
|
--green: #3AA569;
|
||||||
|
|
117
src/shared/styles/background.scss
Normal file
117
src/shared/styles/background.scss
Normal file
|
@ -0,0 +1,117 @@
|
||||||
|
@import "bootstrap/scss/functions";
|
||||||
|
@import "bootstrap/scss/variables";
|
||||||
|
@import "bootstrap/scss/mixins";
|
||||||
|
|
||||||
|
#conversejs-bg {
|
||||||
|
.subdued {
|
||||||
|
opacity: 0.35;
|
||||||
|
}
|
||||||
|
.converse-brand {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 15vh;
|
||||||
|
animation-name: fadein;
|
||||||
|
animation-fill-mode: forwards;
|
||||||
|
animation-duration: 5s;
|
||||||
|
animation-timing-function: ease;
|
||||||
|
}
|
||||||
|
.converse-brand__text {
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: var(--branding-font);
|
||||||
|
font-weight: normal;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 140%;
|
||||||
|
margin-left: 0.2em;
|
||||||
|
.byline {
|
||||||
|
margin: 0;
|
||||||
|
font-family: var(--heading-font);
|
||||||
|
font-size: 0.3em;
|
||||||
|
opacity: 0.55;
|
||||||
|
margin-bottom: 2em;
|
||||||
|
margin-left: -2.7em;
|
||||||
|
word-spacing: 5px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.converse-fullscreen {
|
||||||
|
#conversejs-bg {
|
||||||
|
.converse-brand__padding {
|
||||||
|
@include make-col-ready();
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
@include make-col(4);
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
@include make-col(3);
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(xl) {
|
||||||
|
@include make-col(2);
|
||||||
|
}
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.converse-brand__heading {
|
||||||
|
@include make-col-ready();
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
font-size: 4em;
|
||||||
|
@include make-col(8);
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
font-size: 5em;
|
||||||
|
@include make-col(9);
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(xl) {
|
||||||
|
font-size: 6em;
|
||||||
|
@include make-col(10);
|
||||||
|
}
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: auto;
|
||||||
|
svg {
|
||||||
|
margin-top: 0.3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.converse-overlayed {
|
||||||
|
#conversejs-bg {
|
||||||
|
.converse-brand__padding {
|
||||||
|
@include make-col-ready();
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
@include make-col(2);
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
@include make-col(1);
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(xl) {
|
||||||
|
@include make-col(1);
|
||||||
|
}
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.converse-brand__heading {
|
||||||
|
@include make-col-ready();
|
||||||
|
@include media-breakpoint-up(md) {
|
||||||
|
font-size: 4em;
|
||||||
|
@include make-col(8);
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(lg) {
|
||||||
|
font-size: 5em;
|
||||||
|
@include make-col(10);
|
||||||
|
}
|
||||||
|
@include media-breakpoint-up(xl) {
|
||||||
|
font-size: 6em;
|
||||||
|
@include make-col(10);
|
||||||
|
}
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin: auto;
|
||||||
|
svg {
|
||||||
|
margin-top: 0.3em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -34,3 +34,4 @@
|
||||||
@import "forms";
|
@import "forms";
|
||||||
@import "lists";
|
@import "lists";
|
||||||
@import "messages";
|
@import "messages";
|
||||||
|
@import "background";
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
import { html } from "lit";
|
import { html } from "lit";
|
||||||
|
import { api } from '@converse/headless/core.js';
|
||||||
|
|
||||||
|
|
||||||
export default () => html`
|
export default () => html`
|
||||||
|
@ -46,4 +47,5 @@ export default () => html`
|
||||||
<p class="byline">messaging freedom</p>
|
<p class="byline">messaging freedom</p>
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
${ api.settings.get('view_mode') === 'overlayed' ? html`<div class="converse-brand__padding"></div>` : '' }
|
||||||
</div>`;
|
</div>`;
|
||||||
|
|
Loading…
Reference in New Issue
Block a user