diff --git a/src/components/App.vue b/src/components/App.vue index 7b804665b..b41ea55ae 100755 --- a/src/components/App.vue +++ b/src/components/App.vue @@ -6,6 +6,7 @@ 'kiwi-wrap--touch': $state.ui.is_touch, }" :data-activebuffer="buffer ? buffer.name.toLowerCase() : ''" + :data-theme="theme" class="kiwi-wrap kiwi-theme-bg" @click="emitDocumentClick" @paste.capture="emitBufferPaste" @@ -52,8 +53,14 @@ :is="fallbackComponent" v-else-if="!activeComponent" v-bind="fallbackComponentProps" + class="kiwi-workspace-component" + /> + - @@ -75,6 +82,7 @@ import AvatarCommon from '@/components/UserAvatarCommon'; import { State as SidebarState } from '@/components/Sidebar'; import * as Notifications from '@/libs/Notifications'; import * as bufferTools from '@/libs/bufferTools'; +import ThemeManager from '@/libs/ThemeManager'; import Logger from '@/libs/Logger'; let log = Logger.namespace('App.vue'); @@ -118,6 +126,10 @@ export default { buffer() { return this.$state.getActiveBuffer(); }, + theme() { + let themeMgr = ThemeManager.instance(); + return themeMgr.currentTheme().name.toLowerCase(); + }, }, created() { this.listenForActiveComponents(); @@ -433,11 +445,11 @@ body { .kiwi-workspace-background { position: absolute; - top: 0; - left: 0; - height: 100%; - width: 100%; - z-index: -1; + inset: 0; +} + +.kiwi-workspace-component { + position: relative; } .kiwi-statebrowser { diff --git a/src/components/Container.vue b/src/components/Container.vue index 91f51367a..94fef4c12 100644 --- a/src/components/Container.vue +++ b/src/components/Container.vue @@ -223,7 +223,6 @@ export default { border-left-width: 1px; border-left-style: solid; max-width: 430px; - z-index: 1; transition: right 0.2s, top 0s; } diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue index 764241158..6acdc3246 100644 --- a/src/components/Sidebar.vue +++ b/src/components/Sidebar.vue @@ -123,7 +123,6 @@ export default { display: flex; flex-direction: column; overflow: hidden; - z-index: 100; } .kiwi-sidebar.kiwi-sidebar-section-settings { diff --git a/src/components/TypingUsersList.vue b/src/components/TypingUsersList.vue index 8c96c01af..f06b52cd7 100644 --- a/src/components/TypingUsersList.vue +++ b/src/components/TypingUsersList.vue @@ -47,7 +47,6 @@ export default { .kiwi-typinguserslist { position: absolute; top: -24px; - background: var(--brand-default-bg); font-size: 0.9em; overflow: hidden; max-height: 23px; diff --git a/static/themes/elite/theme.css b/static/themes/elite/theme.css index 2381890f5..ca651e035 100644 --- a/static/themes/elite/theme.css +++ b/static/themes/elite/theme.css @@ -67,8 +67,9 @@ background: var(--comp-statebrowser-bg); } -.kiwi-statebrowser-newnetwork { +.kiwi-statebrowser-newnetwork a { opacity: 0.75; + color: var(--brand-primary); } .kiwi-statebrowser-newnetwork a:hover { @@ -112,9 +113,7 @@ background-color: #26323a; } - .kiwi-messagelist { - background: #3b4850; color: var(--brand-primary); } diff --git a/static/themes/nightswatch/theme.css b/static/themes/nightswatch/theme.css index 193f9e472..5888c90c0 100644 --- a/static/themes/nightswatch/theme.css +++ b/static/themes/nightswatch/theme.css @@ -6,7 +6,7 @@ --brand-primary-hover: #2d2d2d; --brand-midtone: #1b1b1b; --brand-darktone: #000; - --brand-default-bg: #1b1b1b; + --brand-default-bg: #000; --brand-default-fg: #f1f1f1; /* Warning colors */ @@ -207,9 +207,6 @@ } /* Message list */ -.kiwi-messagelist { - background: #000; -} .kiwi-messagelist .kiwi-messagelist-body { color: #adadad; }