-
+
@@ -97,6 +97,8 @@ const isActive = (path: string) => {
background: transparent;
border: none;
cursor: pointer;
+ font-weight: 600;
+ max-width: 80px;
}
.nav-tab:active {
@@ -104,12 +106,37 @@ const isActive = (path: string) => {
}
.nav-tab-active {
- color: rgba(255, 255, 255, 1);
- text-decoration: none;
- transition: all 0.3s ease;
+ position: relative;
padding: 8px 12px;
- border-radius: 12px;
- background: rgba(255, 255, 255, 0.15);
font-weight: 600;
+ border-radius: 12px;
+ background: rgba(0, 0, 0, 0.35);
+ color: rgba(255, 255, 255, 1);
+ box-shadow:
+ 0 8px 24px rgba(0, 0, 0, 0.6),
+ inset 0 1px 0 rgba(255, 255, 255, 0.25);
+ backdrop-filter: blur(24px);
+ -webkit-backdrop-filter: blur(24px);
+ border: none;
+ cursor: pointer;
+ transition: all 0.3s ease;
+ max-width: 80px;
+}
+
+/* Subtle variant with darker grey border for tab bar */
+.nav-tab-active::before {
+ content: '';
+ position: absolute;
+ inset: -2px;
+ border-radius: inherit;
+ padding: 2px;
+ background: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
+ -webkit-mask:
+ linear-gradient(#fff 0 0) content-box,
+ linear-gradient(#fff 0 0);
+ -webkit-mask-composite: xor;
+ mask-composite: exclude;
+ pointer-events: none;
+ z-index: -1;
}
diff --git a/vite.config.ts b/vite.config.ts
index 5ac6d32..0162e9e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,9 +1,49 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+import { VitePWA } from 'vite-plugin-pwa'
export default defineConfig({
- plugins: [vue()],
+ plugins: [
+ vue(),
+ VitePWA({
+ registerType: 'autoUpdate',
+ includeAssets: ['assets/images/app-icon.svg', 'assets/fonts/*.otf'],
+ manifest: {
+ name: 'IndeedHub - Decentralized Media Streaming',
+ short_name: 'IndeedHub',
+ description: 'Stream films and content on the decentralized web powered by Nostr and Bitcoin',
+ theme_color: '#0a0a0a',
+ background_color: '#0a0a0a',
+ display: 'standalone',
+ orientation: 'portrait-primary',
+ icons: [
+ {
+ src: '/assets/images/app-icon.svg',
+ sizes: '512x512',
+ type: 'image/svg+xml',
+ purpose: 'any maskable'
+ }
+ ]
+ },
+ workbox: {
+ globPatterns: ['**/*.{js,css,html,ico,png,svg,jpg,jpeg,woff,woff2,otf}'],
+ runtimeCaching: [
+ {
+ urlPattern: /^https:\/\/images\.unsplash\.com\/.*/i,
+ handler: 'CacheFirst',
+ options: {
+ cacheName: 'unsplash-images-cache',
+ expiration: {
+ maxEntries: 50,
+ maxAgeSeconds: 60 * 60 * 24 * 30 // 30 days
+ }
+ }
+ }
+ ]
+ }
+ })
+ ],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))