added a bit of transparency for navigation components

DanielTerletzkiy · Jul 23, 2023 · 6623a85 · 6623a85
1 parent 539d191
commit 6623a85
Show file tree

Hide file tree

Showing 7 changed files with 103 additions and 55 deletions.
diff --git a/src/components/app/navigation/DNavigationBar.vue b/src/components/app/navigation/DNavigationBar.vue
@@ -1,19 +1,16 @@
 <template>
   <slide-x-left-transition :duration="100">
-    <DWrapper ref="wrapper" root-tag="nav" :classes="['d-navigation-bar', {permanent, temporary}]"
+    <DWrapper ref="wrapper" root-tag="nav" :classes="['d-navigation-bar', {permanent, temporary: !permanent}]"
               v-bind="{...$props, ...$attrs}"
               v-show="modelValue">
-      <DCard block :backgroundColor="permanent && 'transparent'" class="d-navigation-bar__content" rounded="none">
-        <DRow block align="unset" height="100%">
-          <DColumn block>
-            <slot></slot>
-          </DColumn>
-          <DDivider v-if="permanent" vertical class="d-navigation-bar__content__divider my-3"/>
-        </DRow>
-      </DCard>
+      <DRow block align="unset" height="100%" class="content" :class="[permanent]" rounded="none">
+        <DColumn block>
+          <slot></slot>
+        </DColumn>
+      </DRow>
     </DWrapper>
   </slide-x-left-transition>
-  <div v-if="temporary && modelValue" class="d-navigation-bar__backdrop" @click.self="onClose"/>
+  <div v-if="!permanent && modelValue" class="d-navigation-bar__backdrop" @click.self="onClose"/>
 </template>
 
 <script lang="ts">
@@ -26,7 +23,7 @@ export default {
 import {ref} from "vue";
 
 const wrapper = ref(null);
-defineExpose({ wrapper });
+defineExpose({wrapper});
 import DWrapper from "../../DWrapper.vue";
 import DRow from "../../flex/DRow.vue";
 import DCard from "../../card/DCard.vue";
@@ -40,7 +37,6 @@ const emit = defineEmits(['update:modelValue']);
 defineProps({
   modelValue: {type: Boolean, default: true},
   permanent: {type: Boolean},
-  temporary: {type: Boolean},
   ...defaultProps
 
 })
@@ -54,22 +50,36 @@ function onClose() {
 @import "../../../styles/variables";
 
 .d-navigation-bar {
-  height: 100vh;
+  height: 100dvh;
   width: 300px;
 
-  z-index: 9;
-
   &.temporary {
     position: fixed;
+
+    .content {
+      backdrop-filter: blur(10px);
+    }
   }
 
   &.permanent {
     position: sticky;
-    top: 54px;
-    height: calc(100vh - 54px) !important;
+    top: $navbarHeight;
+    height: calc(100dvh - $navbarHeight) !important;
   }
 
-  &__content {
+  .content {
+    background-color: color-mix(in srgb, var(--sheet-card), transparent 90%);
+
+    border-right: 2px solid color-mix(
+            in srgb,
+            color-mix(
+                    in srgb,
+                    var(--sheet-card),
+                    #fff 10%
+            ),
+            transparent 60%
+    );
+
     height: inherit;
     width: inherit;
     overflow: overlay;
@@ -91,13 +101,5 @@ function onClose() {
     user-select: none;
     z-index: 1;
   }
-
-  &.dark {
-    background-color: $dark_background;
-  }
-
-  &.light {
-    background-color: $light_background;
-  }
 }
 </style>
diff --git a/src/components/app/toolbar/DToolbar.vue b/src/components/app/toolbar/DToolbar.vue
@@ -1,14 +1,12 @@
 <template>
-  <DWrapper ref="wrapper" :classes="['d-toolbar']" v-bind="{...$props, ...$attrs}">
-    <DCard block rounded="none" height="100%">
-      <DRow block gap class="px-2">
-        <DIconButton v-if="showHamburger" @click="onHamburgerClick"
-                     style="margin-left: -8px" :color="ThemeColorProperty.primary">
-          <DIcon name="bars"/>
-        </DIconButton>
-        <slot></slot>
-      </DRow>
-    </DCard>
+  <DWrapper ref="wrapper" :classes="['d-toolbar']" :rounded="Round.None" v-bind="{...$props, ...$attrs}">
+    <DRow block gap class="px-2">
+      <DIconButton v-if="showHamburger" @click="onHamburgerClick"
+                   style="margin-left: -8px" :color="ThemeColorProperty.primary">
+        <DIcon name="bars"/>
+      </DIconButton>
+      <slot></slot>
+    </DRow>
   </DWrapper>
 </template>
 
@@ -30,6 +28,7 @@ import DIconButton from "../../button/DIconButton.vue";
 import DIcon from "../../icon/DIcon.vue";
 import defaultProps from "../../../mixins/DefaultProps";
 import {ThemeColorProperty} from "../../../types/Theme";
+import {Round} from "../../../types/Vuelize";
 
 const emit = defineEmits(['hamburgerClick'])
 
@@ -50,15 +49,28 @@ function onHamburgerClick(e: Event) {
   position: sticky;
   top: 0;
 
+  background-color: color-mix(in srgb, var(--sheet-card), transparent 50%);
+  backdrop-filter: blur(10px);
+
+  border-bottom: 2px solid color-mix(
+          in srgb,
+          color-mix(
+                  in srgb,
+                  var(--sheet-card),
+                  #fff 10%
+          ),
+          transparent 60%
+  );
+
   width: 100%;
-  height: 54px;
-  max-height: 54px;
+  height: $navbarHeight;
+  max-height: $navbarHeight;
   z-index: 10;
 
-  border-radius: 0;
+  border-radius: 0 !important;
 
   &.dark {
-    box-shadow: 0 0 30px -20px darken($dark_background, 5);
+    //box-shadow: 0 0 30px -20px darken($dark_background, 5);
   }
 
   &.light {

diff --git a/src/components/root/DRoot.vue b/src/components/root/DRoot.vue
@@ -1,17 +1,17 @@
 <template>
   <div ref="wrapper" class="d-root" id="root" :class="mode">
-    <header style="position: sticky; top: 0; width: 100%; max-height: 54px; z-index: 10;" :class="mode">
+    <header class="header" :class="mode">
       <slot name="toolbar"></slot>
     </header>
-    <div style="position: relative;display: flex;" :class="mode">
-      <aside style="position: sticky;">
+    <div class="content" :class="mode">
+      <aside class="navbar">
         <slot name="navbar"></slot>
       </aside>
-      <main style="flex: 1;" :class="mode">
+      <main class="view" :class="mode">
         <slot name="default"></slot>
       </main>
     </div>
-    <footer :class="mode">
+    <footer class="footer" :class="mode">
       <slot name="footer"></slot>
     </footer>
     <slot name="notifications"/>
@@ -86,4 +86,25 @@ function setTheme() {
 @import "../../styles/index";
 
 
+.header {
+  position: sticky;
+  top: 0;
+  width: 100%;
+  max-height: $navbarHeight;
+  z-index: 10;
+}
+
+.content {
+  position: relative;
+  display: flex;
+
+  .navbar {
+    position: sticky;
+    z-index: 9;
+  }
+
+  .view {
+    flex: 1;
+  }
+}
 </style>
diff --git a/src/store/ThemeStore.ts b/src/store/ThemeStore.ts
@@ -10,26 +10,28 @@ export const useVuelizeTheme = defineStore('vuelizeTheme', () => {
         dark: {
             colors: {
                 primary: '#A8B2FF',
-                secondary: '#9ea7ad',
+                secondary: '#1B1B18',
+                accent: '#8080BD',
                 success: '#74ec38',
                 error: '#ff6b6b',
                 warning: '#fca121',
                 info: '#2ea2e0'
             },
             sheets: {
-                background: "#0c0c0c",
+                background: "#080808",
                 card: "#171717",
                 glow: "currentColor",
             },
             text: {
                 header: "#eaeaea",
-                card: "#8b8b8b"
+                card: "#FAFAFA"
             }
         },
         light: {
             colors: {
                 primary: '#3075FF',
                 secondary: '#424242',
+                accent: '#B0B5B2',
                 success: '#62c62f',
                 error: '#ff6b6b',
                 warning: '#ffa600',

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -52,25 +52,32 @@ button {
   &.dark {
     color: #606060 !important;
   }
+
   &.light {
     color: #CCCCCCFF !important;
   }
+
   pointer-events: none;
 }
 
-@import url('https://fonts.googleapis.com/css?family=Source%20Sans%20Pro:200,300,400,600,700');
+@import url('https://fonts.googleapis.com/css?family=Inter:200,300,400,600,700');
 
 #root {
-  font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
+  font-family: 'Inter', Helvetica, Arial, sans-serif;
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   transition: background .2s;
   overflow: auto;
   scrollbar-gutter: stable;
   scrollbar-width: thin;
 
   background: var(--sheet-background);
   color: var(--text-card);
+
+}
+
+::selection {
+  background: var(--color-accent);
 }
 
 ::-webkit-scrollbar-corner {
@@ -106,13 +113,12 @@ button {
   }
 
   &::-webkit-scrollbar-track {
-    background-color: rgba(0, 0, 0, 0.086);
-    border-radius: $gap * 2;
+    background-color: color-mix(in srgb, var(--sheet-background), #000 20%);
   }
 
   &::-webkit-scrollbar-thumb {
-    background-color: rgba(66, 66, 66, 0.5);
-    border-radius: $gap * 2;
+    background-color: color-mix(in srgb, var(--sheet-card), #fff 4%);
+    border-radius: 1px;
   }
 
   &::-webkit-scrollbar-thumb:hover {

diff --git a/src/styles/variables.scss b/src/styles/variables.scss
@@ -10,3 +10,7 @@ $dark_card_text: #bdbdbd;
 $light_card_text: #46474a;
 
 $gap: 4px;
+
+//TODO remove / change above
+
+$navbarHeight: 50px;
diff --git a/src/types/Theme.ts b/src/types/Theme.ts
@@ -28,6 +28,7 @@ type ThemeText = {
 export enum ThemeColorProperty {
     primary = 'color-primary',
     secondary = 'color-secondary',
+    accent = 'color-accent',
     success = 'color-success',
     error = 'color-error',
     warning = 'color-warning',