From 5e3b37288d96277a6eacb7d6464760b63f72874a Mon Sep 17 00:00:00 2001 From: Biswa Kalyan Bhuyan Date: Wed, 28 May 2025 19:44:26 +0530 Subject: feat: improved UI and added dynamic theme toggle - improved the nav bar components - added the theme toggle button to toggle theme - fixed the button background for the nav bar - fixed the theme color issue to the ThemeToggle funtion - added more vibrant colors - fixed the theme logo render --- frontend/src/app/globals.css | 390 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 390 insertions(+) (limited to 'frontend/src/app/globals.css') diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 92fb855..89de65b 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -120,3 +120,393 @@ @apply bg-background text-foreground; } } + +/* Complete override for ghost variant default styles */ +/* This targets the specific ghost variant classes from the button component */ +.nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + border: none !important; + border-color: transparent !important; + box-shadow: none !important; + --tw-bg-opacity: 0 !important; + --accent: transparent !important; + --background: transparent !important; + --tw-border-opacity: 0 !important; + --tw-shadow: none !important; + --tw-ring-shadow: none !important; + --tw-ring-offset-shadow: none !important; + cursor: pointer !important; +} + +/* Force override ghost variant styles completely */ +button[class*="nav-button-transparent"], +[data-slot="button"][class*="nav-button-transparent"], +[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; + box-shadow: none !important; +} + +/* Override ghost variant hover specifically */ +button[class*="nav-button-transparent"][class*="hover:bg-accent"], +[data-slot="button"][class*="nav-button-transparent"][class*="hover:bg-accent"], +[data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="hover:bg-accent"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Dark mode ghost variant overrides */ +.dark button[class*="nav-button-transparent"][class*="dark:hover:bg-accent"], +.dark [data-slot="button"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"], +.dark [data-slot="navigation-menu-trigger"][class*="nav-button-transparent"][class*="dark:hover:bg-accent"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Remove focus rings and outlines for nav buttons */ +.nav-button-transparent:focus, +.nav-button-transparent:focus-visible { + outline: none !important; + ring: none !important; + --tw-ring-shadow: none !important; + border: none !important; + background: transparent !important; + background-color: transparent !important; +} + +/* Light mode subtle hover effects - only show on hover */ +.nav-button-transparent:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + --tw-bg-opacity: 1 !important; + border: none !important; + transition: background-color 0.2s ease-in-out !important; +} + +/* Dark mode even more subtle hover effects */ +.dark .nav-button-transparent:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; + transition: background-color 0.2s ease-in-out !important; +} + +/* Override NavigationMenuTrigger specific classes with maximum specificity */ +.nav-button-transparent.bg-background { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Focus states - only subtle background, no borders or rings */ +.nav-button-transparent:focus:not(:hover) { + background: rgba(0, 0, 0, 0.04) !important; + background-color: rgba(0, 0, 0, 0.04) !important; + border: none !important; + box-shadow: none !important; +} + +.dark .nav-button-transparent:focus:not(:hover) { + background: rgba(255, 255, 255, 0.03) !important; + background-color: rgba(255, 255, 255, 0.03) !important; + border: none !important; + box-shadow: none !important; +} + +/* Override open states */ +.nav-button-transparent[data-state="open"] { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; +} + +.dark .nav-button-transparent[data-state="open"] { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; + border: none !important; +} + +/* Ensure all shadcn/ui utility classes are overridden with high specificity */ +button.nav-button-transparent, +[data-slot="button"].nav-button-transparent, +[data-slot="navigation-menu-trigger"].nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + border: none !important; + border-color: transparent !important; + box-shadow: none !important; + cursor: pointer !important; +} + +/* Hover states for all button types */ +button.nav-button-transparent:hover, +[data-slot="button"].nav-button-transparent:hover, +[data-slot="navigation-menu-trigger"].nav-button-transparent:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; + transition: background-color 0.2s ease-in-out !important; + cursor: pointer !important; +} + +/* Focus states for all button types */ +button.nav-button-transparent:focus, +[data-slot="button"].nav-button-transparent:focus, +[data-slot="navigation-menu-trigger"].nav-button-transparent:focus { + background: rgba(0, 0, 0, 0.04) !important; + background-color: rgba(0, 0, 0, 0.04) !important; + border: none !important; + box-shadow: none !important; + outline: none !important; + cursor: pointer !important; +} + +/* Dark mode hover and focus states */ +.dark button.nav-button-transparent:hover, +.dark [data-slot="button"].nav-button-transparent:hover, +.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; + border: none !important; + transition: background-color 0.2s ease-in-out !important; + cursor: pointer !important; +} + +.dark button.nav-button-transparent:focus, +.dark [data-slot="button"].nav-button-transparent:focus, +.dark [data-slot="navigation-menu-trigger"].nav-button-transparent:focus { + background: rgba(255, 255, 255, 0.03) !important; + background-color: rgba(255, 255, 255, 0.03) !important; + border: none !important; + box-shadow: none !important; + outline: none !important; + cursor: pointer !important; +} + +/* Dropdown and navigation item transparency */ +.nav-dropdown-transparent { + background: rgba(255, 255, 255, 0.98) !important; + backdrop-filter: blur(16px) saturate(180%) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1) !important; +} + +.dark .nav-dropdown-transparent { + background: rgba(23, 23, 23, 0.98) !important; + border: 1px solid rgba(82, 82, 82, 0.4) !important; + box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important; +} + +.nav-dropdown-item { + background: transparent !important; + border: none !important; + transition: background-color 0.2s ease-in-out !important; +} + +.nav-dropdown-item:hover { + background: rgba(0, 0, 0, 0.08) !important; + border: none !important; +} + +.dark .nav-dropdown-item:hover { + background: rgba(255, 255, 255, 0.08) !important; + border: none !important; +} + +/* Additional overrides for complete transparency */ +/* Handle any remaining shadcn/ui styling conflicts */ +.nav-button-transparent[data-variant="ghost"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; + cursor: pointer !important; +} + +.nav-button-transparent[data-variant="ghost"]:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; + cursor: pointer !important; +} + +.dark .nav-button-transparent[data-variant="ghost"]:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; + border: none !important; + cursor: pointer !important; +} + +/* Override any remaining background utilities */ +.nav-button-transparent.bg-transparent, +.nav-button-transparent.bg-accent, +.nav-button-transparent.hover\:bg-accent, +.nav-button-transparent.focus\:bg-accent { + background: transparent !important; + background-color: transparent !important; + border: none !important; + cursor: pointer !important; +} + +/* Ensure link elements in navigation also have transparent styling */ +a.nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + border: none !important; + text-decoration: none !important; + cursor: pointer !important; +} + +a.nav-button-transparent:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; + text-decoration: none !important; + cursor: pointer !important; +} + +.dark a.nav-button-transparent:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; + border: none !important; + text-decoration: none !important; + cursor: pointer !important; +} + +/* Ultra-specific overrides to ensure transparency takes precedence */ +/* Handle all possible combinations of button classes */ +button.nav-button-transparent.hover\:bg-accent, +button.nav-button-transparent.dark\:hover\:bg-accent\/50, +button.nav-button-transparent[class*="hover:bg"], +[data-slot="button"].nav-button-transparent.hover\:bg-accent, +[data-slot="button"].nav-button-transparent.dark\:hover\:bg-accent\/50, +[data-slot="button"].nav-button-transparent[class*="hover:bg"], +[data-slot="navigation-menu-trigger"].nav-button-transparent.hover\:bg-accent, +[data-slot="navigation-menu-trigger"].nav-button-transparent.dark\:hover\:bg-accent\/50, +[data-slot="navigation-menu-trigger"].nav-button-transparent[class*="hover:bg"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Override any CSS custom properties that might affect background */ +.nav-button-transparent { + --tw-bg-accent: transparent !important; + --tw-bg-background: transparent !important; + --tw-bg-muted: transparent !important; + --tw-bg-secondary: transparent !important; +} + +/* Ensure no background on any state for nav buttons */ +.nav-button-transparent, +.nav-button-transparent:not(:hover):not(:focus):not(:active) { + background: transparent !important; + background-color: transparent !important; + box-shadow: none !important; + border: none !important; +} + +/* Maximum specificity overrides - nuclear option for transparency */ +html body header button.nav-button-transparent, +html body header [data-slot="button"].nav-button-transparent, +html body header [data-slot="navigation-menu-trigger"].nav-button-transparent, +html body header div button.nav-button-transparent, +html body header div [data-slot="button"].nav-button-transparent, +html body header div [data-slot="navigation-menu-trigger"].nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + border: none !important; + border-color: transparent !important; + box-shadow: none !important; + backdrop-filter: none !important; +} + +/* Override any inline styles or computed styles */ +.nav-button-transparent[style*="background"] { + background: transparent !important; + background-color: transparent !important; +} + +/* Target specific button classes that might have background */ +.nav-button-transparent.inline-flex, +.nav-button-transparent[class*="inline-flex"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Enhanced link element transparency for Sale button and similar nav links */ +/* Apply maximum specificity for link elements in navigation */ +html body header a.nav-button-transparent, +html body header div a.nav-button-transparent, +html body header nav a.nav-button-transparent, +[data-slot="navigation-menu-link"].nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + background-image: none !important; + border: none !important; + border-color: transparent !important; + box-shadow: none !important; + backdrop-filter: none !important; + cursor: pointer !important; +} + +/* Override any NavigationMenuLink default styles */ +a.nav-button-transparent[data-slot="navigation-menu-link"], +[data-slot="navigation-menu-link"].nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + border: none !important; + box-shadow: none !important; +} + +/* Ensure link hover states maintain transparency in default state */ +a.nav-button-transparent:not(:hover):not(:focus):not(:active) { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Specific overrides for NavigationMenuLink component (Sale button) */ +[data-slot="navigation-menu-link"].nav-button-transparent { + background: transparent !important; + background-color: transparent !important; + border: none !important; + box-shadow: none !important; + cursor: pointer !important; +} + +/* Override NavigationMenuLink hover and focus states */ +[data-slot="navigation-menu-link"].nav-button-transparent.hover\:bg-accent, +[data-slot="navigation-menu-link"].nav-button-transparent.focus\:bg-accent, +[data-slot="navigation-menu-link"].nav-button-transparent[class*="hover:bg-accent"], +[data-slot="navigation-menu-link"].nav-button-transparent[class*="focus:bg-accent"], +[data-slot="navigation-menu-link"].nav-button-transparent[class*="data-[active=true]:bg-accent"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Override NavigationMenuLink data states */ +[data-slot="navigation-menu-link"].nav-button-transparent[data-active="true"] { + background: transparent !important; + background-color: transparent !important; + border: none !important; +} + +/* Ensure NavigationMenuLink has proper hover effect */ +[data-slot="navigation-menu-link"].nav-button-transparent:hover { + background: rgba(0, 0, 0, 0.08) !important; + background-color: rgba(0, 0, 0, 0.08) !important; + border: none !important; + transition: background-color 0.2s ease-in-out !important; +} + +.dark [data-slot="navigation-menu-link"].nav-button-transparent:hover { + background: rgba(255, 255, 255, 0.06) !important; + background-color: rgba(255, 255, 255, 0.06) !important; +} -- cgit v1.2.3-59-g8ed1b