Fix kiwi-workspace-background z-index

ItsOnlyBinary · Jan 12, 2024 · 401437c · 401437c
1 parent 1b7be21
commit 401437c
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 16 deletions.
diff --git 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"
+                />
+                <component
+                    :is="activeComponent"
+                    v-else
+                    v-bind="activeComponentProps"
+                    class="kiwi-workspace-component"
                 />
-                <component :is="activeComponent" v-else v-bind="activeComponentProps" />
             </div>
         </template>
         <AvatarCommon />
@@ -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
@@ -188,6 +188,7 @@ export default {
     box-sizing: border-box;
     display: flex;
     flex-direction: column;
+    position: relative;
 }
 
 /* When the sidebar is open we will put a shadow over the text area */
@@ -223,7 +224,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
@@ -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
@@ -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
@@ -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
@@ -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;
 }