fix(navbar): adjust transparency of the active capsule

Author: dvcol

package.json

@@ -34,7 +34,7 @@
     "type:check": "vue-tsc --build",
     "vite:serve": "vite --host",
     "vite:build": "vite build",
-    "vite:preview": "vite preview",
+    "vite:preview": "vite preview --host",
     "dev": "cross-env NODE_ENV=development run-p dist vite:serve",
     "dev:web": "VITE_SOURCEMAP=true VITE_WEB=true run-s build vite:preview",
     "build": "cross-env NODE_ENV=production run-s dist type:check 'vite:build {@}' --",

src/components/common/navbar/NavbarComponent.vue

@@ -126,7 +126,7 @@ const navElement = ref<HTMLElement>();
 @use '~/styles/layout' as layout;
 
 nav {
-  --navbar-tab-color: var(--trakt-red-darker);
+  --navbar-tab-color: hsl(from var(--trakt-red-darker) h s l / 80%);
   --navbar-text-color-hover: var(--trakt-red);
   --navbar-text-color-hover-active: var(--white);
   --navbar-text-color-active: var(--white);
@@ -154,6 +154,11 @@ nav {
     display: flex;
     justify-content: center;
     min-height: 2.75rem;
+
+    :deep(.n-tabs-capsule) {
+      height: calc(#{layout.$header-navbar-height} - 0.75rem) !important;
+      border-radius: 0.5rem !important;
+    }
   }
 }
 </style>