fix(css): simplify navbar css & themed variables

Author: dvcol

src/components/AppComponent.vue

@@ -141,7 +141,6 @@ main {
   justify-content: center;
   min-height: calc(100% - #{layout.$header-navbar-height});
   margin-top: layout.$header-navbar-height;
-  overflow: hidden;
 }
 
 .panel {

src/components/common/navbar/NavbarComponent.vue

@@ -76,15 +76,28 @@ const navElement = ref<HTMLElement>();
       type="segment"
       justify-content="space-evenly"
       animated
+      :style="{
+        '--n-bar-color': 'var(--trakt-red-dark)',
+        '--n-tab-text-color-active': 'var(--navbar-text-color-active)',
+        '--n-tab-text-color-hover': 'var(--navbar-text-color-hover)',
+        '--n-tab-color-segment': 'var(--navbar-tab-color)',
+        '--n-color-segment': 'inherit',
+      }"
     >
       <template v-for="_route in routes" :key="_route">
         <NTab
-          class="tab"
+          :style="
+            _route === activeRoute
+              ? { '--n-tab-text-color-hover': 'var(--navbar-text-color-hover-active)' }
+              : undefined
+          "
           :name="_route.toLowerCase()"
           type="segment"
           @click="navigate(_route)"
         >
-          <span> {{ i18n(_route.toLowerCase()) }}</span>
+          <span>
+            {{ i18n(_route.toLowerCase()) }}
+          </span>
         </NTab>
       </template>
       <NTab
@@ -113,6 +126,11 @@ const navElement = ref<HTMLElement>();
 @use '~/styles/layout' as layout;
 
 nav {
+  --navbar-tab-color: var(--trakt-red-darker);
+  --navbar-text-color-hover: var(--trakt-red);
+  --navbar-text-color-hover-active: var(--white);
+  --navbar-text-color-active: var(--white);
+
   padding: 0 0.25rem;
   font-size: 12px;
   text-align: center;
@@ -139,40 +157,3 @@ nav {
   }
 }
 </style>
-
-<style lang="scss" scoped>
-nav {
-  .tabs {
-    --n-bar-color: var(--trakt-red-dark) !important;
-    --n-tab-text-color-active: var(--vt-c-white) !important;
-    --n-tab-text-color-hover: color-mix(
-      in srgb,
-      var(--trakt-red) 90%,
-      var(--vt-c-white)
-    ) !important;
-    --n-tab-color-segment: color-mix(
-      in srgb,
-      var(--trakt-red) 50%,
-      transparent
-    ) !important;
-    --n-color-segment: inherit !important;
-
-    .tab {
-      min-height: 1.25rem;
-    }
-
-    /* stylelint-disable-next-line selector-class-pattern -- overriding theme class  */
-    .n-tabs-tab--active {
-      --n-tab-text-color-hover: color-mix(
-        in srgb,
-        var(--trakt-white) 99%,
-        var(--vt-c-red)
-      ) !important;
-    }
-
-    .n-tabs-capsule {
-      backdrop-filter: blur(1px);
-    }
-  }
-}
-</style>

src/components/common/tooltip/ProgressTooltip.vue

@@ -93,7 +93,7 @@ const i18n = useI18n('common', 'tooltip', 'progress');
   font-size: 0.8rem;
 
   .metric {
-    color: var(--vt-c-white);
+    color: var(--white);
     font-weight: bolder;
     font-variant-numeric: tabular-nums;
   }

src/components/container/ContainerComponent.ce.vue

@@ -39,7 +39,7 @@ const root = ref<HTMLElement>();
 
       <NLoadingBarProvider
         :to="root"
-        :loading-bar-style="{ loading: { '--n-color-loading': 'var(--vt-c-white)' } }"
+        :loading-bar-style="{ loading: { '--n-color-loading': 'var(--white)' } }"
       >
         <LoadingBarProvider />
       </NLoadingBarProvider>
@@ -176,7 +176,7 @@ const root = ref<HTMLElement>();
   }
 
   @media (prefers-color-scheme: light) {
-    color: var(--vt-c-black);
+    color: var(--black);
   }
 }
 </style>

src/components/views/panel/ShowPanelPicker.vue

@@ -155,7 +155,7 @@ const i18n = useI18n('panel', 'picker');
 
   .no-data {
     margin: 0 0.5rem;
-    color: var(--vt-c-text-dark-2);
+    color: var(--color-text);
   }
 }
 </style>

src/components/views/search/SearchNavbar.vue

@@ -238,7 +238,7 @@ onActivated(() => {
 
 <style lang="scss" scoped>
 .search-switch {
-  --search-switch-button-color: var(--vt-c-white-soft);
+  --search-switch-button-color: var(--white-soft);
   --search-switch-active-rail-color: var(--primary-color-dark);
 
   .label {
@@ -249,7 +249,7 @@ onActivated(() => {
 
   // stylelint-disable-next-line selector-class-pattern -- overriding theme class
   &.n-switch--active .label {
-    color: var(--vt-c-white-soft);
+    color: var(--white-soft);
   }
 }
 

src/styles/base.scss

@@ -13,7 +13,7 @@
   --vt-c-divider-dark-2: rgb(84 84 84 / 48%);
   --vt-c-text-light-1: var(--vt-c-indigo);
   --vt-c-text-light-2: rgb(60 60 60 / 66%);
-  --vt-c-text-dark-1: var(--vt-c-white);
+  --vt-c-text-dark-1: var(--white);
   --vt-c-text-dark-2: rgb(235 235 235 / 64%);
 
   /* background color variables */
@@ -51,8 +51,11 @@
 
   /* ui color variables */
   --white: rgb(255 255 255);
+  --white-soft: #f8f8f8;
+  --white-mute: #f2f2f2;
   --white-50: rgb(255 255 255 / 50%);
   --white-70: rgb(255 255 255 / 70%);
+  --black: #181818;
   --border-grey: rgb(70 70 70);
   --border-white: rgb(255 255 255 / 20%);
   --primary-color: #63e2b7;
@@ -126,9 +129,9 @@
   /*
   @media (prefers-color-scheme: light) {
     !* semantic color variables for this project *!
-    --color-background: var(--vt-c-white);
-    --color-background-soft: var(--vt-c-white-soft);
-    --color-background-mute: var(--vt-c-white-mute);
+    --color-background: var(--white);
+    --color-background-soft: var(--white-soft);
+    --color-background-mute: var(--white-mute);
     --color-border: var(--vt-c-divider-light-2);
     --color-border-hover: var(--vt-c-divider-light-1);
     --color-heading: var(--vt-c-text-light-1);