diff options
Diffstat (limited to 'frontend/src/app/globals.css')
| -rw-r--r-- | frontend/src/app/globals.css | 686 |
1 files changed, 61 insertions, 625 deletions
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css index 5e91d83..8b5bbb3 100644 --- a/frontend/src/app/globals.css +++ b/frontend/src/app/globals.css @@ -3,13 +3,10 @@ @custom-variant dark (&:is(.dark *)); -/* Custom responsive breakpoints */ -@custom-variant xs (&:is(@media (min-width: 475px) *)); - @theme inline { --color-background: var(--background); --color-foreground: var(--foreground); - --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif; + --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif; --font-mono: ui-monospace, "SFMono-Regular", "Consolas", monospace; --color-sidebar-ring: var(--sidebar-ring); --color-sidebar-border: var(--sidebar-border); @@ -124,698 +121,137 @@ } } -/* Complete override for ghost variant default styles */ -/* This targets the specific ghost variant classes from the button component */ +/* Simple transparent navigation buttons */ .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; + backdrop-filter: none !important; + border-radius: 0 !important; + transition: color 0.2s ease !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"] { +/* Remove all hover backgrounds */ +.nav-button-transparent:hover { 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; + backdrop-filter: none !important; border: none !important; - transition: background-color 0.2s ease-in-out !important; } -/* Dark mode even more subtle hover effects */ +/* Remove all dark mode hover backgrounds */ .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; + backdrop-filter: none !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 { +/* Remove all focus backgrounds */ +.nav-button-transparent:focus { 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.85) !important; - backdrop-filter: blur(20px) saturate(180%) !important; - border: 1px solid rgba(255, 255, 255, 0.2) !important; - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.12), - 0 2px 16px rgba(0, 0, 0, 0.08), - inset 0 1px 0 rgba(255, 255, 255, 0.4) !important; - border-radius: 0.75rem !important; -} - -.dark .nav-dropdown-transparent { - background: rgba(15, 15, 15, 0.85) !important; - border: 1px solid rgba(82, 82, 82, 0.3) !important; - box-shadow: - 0 8px 32px rgba(0, 0, 0, 0.4), - 0 2px 16px rgba(0, 0, 0, 0.3), - inset 0 1px 0 rgba(255, 255, 255, 0.08) !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; + backdrop-filter: none !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) { +.dark .nav-button-transparent:focus { background: transparent !important; background-color: transparent !important; box-shadow: none !important; + backdrop-filter: 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 { +/* Remove any active state backgrounds */ +.nav-button-transparent:active { 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 { +.dark .nav-button-transparent:active { 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; +/* Navigation dropdowns */ +.nav-dropdown-transparent { + background: rgba(255, 255, 255, 0.95) !important; + backdrop-filter: blur(20px) !important; + border: 1px solid rgba(255, 255, 255, 0.3) !important; + border-radius: 0.75rem !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; +.dark .nav-dropdown-transparent { + background: rgba(23, 23, 23, 0.95) !important; + border: 1px solid rgba(82, 82, 82, 0.4) !important; } -/* Override NavigationMenuLink data states */ -[data-slot="navigation-menu-link"].nav-button-transparent[data-active="true"] { +/* Dropdown items */ +.nav-dropdown-item { background: transparent !important; - background-color: transparent !important; border: none !important; + transition: all 0.2s ease !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; -} - -/* Enhanced Theme Toggle Transparency Effects */ -/* Theme toggle specific enhancements for better navbar integration */ -.nav-button-transparent.group { - position: relative; - overflow: hidden; - backdrop-filter: blur(8px) saturate(150%); - border-radius: 0.5rem; - transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Enhanced hover state for theme toggle */ -.nav-button-transparent.group:hover { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - transform: scale(1.05); - backdrop-filter: blur(12px) saturate(180%); +.nav-dropdown-item:hover { + background: rgba(0, 0, 0, 0.06) !important; } -.dark .nav-button-transparent.group:hover { +.dark .nav-dropdown-item:hover { background: rgba(255, 255, 255, 0.06) !important; - background-color: rgba(255, 255, 255, 0.06) !important; -} - -/* Active state for theme toggle */ -.nav-button-transparent.group:active { - transform: scale(0.95); - transition: transform 0.1s ease-in-out; -} - -/* Enhanced focus state for theme toggle */ -.nav-button-transparent.group:focus-visible { - background: rgba(0, 0, 0, 0.04) !important; - background-color: rgba(0, 0, 0, 0.04) !important; - box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1) !important; - outline: none !important; -} - -.dark .nav-button-transparent.group:focus-visible { - background: rgba(255, 255, 255, 0.03) !important; - background-color: rgba(255, 255, 255, 0.03) !important; - box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important; -} - - -/* Enhanced dropdown items for theme toggle */ -.nav-dropdown-item.group\/item { - background: transparent !important; - border: none !important; - border-radius: 0.5rem !important; - transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important; - margin: 2px !important; - padding: 0.5rem 0.75rem !important; -} - -.nav-dropdown-item.group\/item:hover { - background: rgba(0, 0, 0, 0.08) !important; - backdrop-filter: blur(8px) !important; - transform: translateX(2px) !important; -} - -.dark .nav-dropdown-item.group\/item:hover { - background: rgba(255, 255, 255, 0.08) !important; -} - -/* Smooth icon transitions for theme toggle */ -.nav-button-transparent.group svg { - transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)); -} - -.dark .nav-button-transparent.group svg { - filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3)); -} - -/* Enhanced glow effect for theme toggle */ -.nav-button-transparent.group:hover svg { - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15)); -} - -.dark .nav-button-transparent.group:hover svg { - filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4)); -} - -/* Ultra-smooth dropdown animations */ -@keyframes dropdown-in { - from { - opacity: 0; - transform: scale(0.95) translateY(-4px); - } - to { - opacity: 1; - transform: scale(1) translateY(0); - } -} - -@keyframes dropdown-out { - from { - opacity: 1; - transform: scale(1) translateY(0); - } - to { - opacity: 0; - transform: scale(0.95) translateY(-4px); - } -} - -/* Apply dropdown animation to nav dropdowns */ -.nav-dropdown-transparent[data-state="open"] { - animation: dropdown-in 0.2s cubic-bezier(0.4, 0, 0.2, 1); -} - -/* Improved checkmark animation */ -.nav-dropdown-item span[class*="animate-in"] { - animation: checkmark-in 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); -} - -@keyframes checkmark-in { - from { - opacity: 0; - transform: scale(0.3) rotate(-12deg); - } - to { - opacity: 1; - transform: scale(1) rotate(0deg); - } } -/* Prevent any conflicting backgrounds on theme toggle */ -.nav-button-transparent.group[data-state="open"] { - background: rgba(0, 0, 0, 0.08) !important; - background-color: rgba(0, 0, 0, 0.08) !important; - border: none !important; - transform: scale(1.05); +/* Prevent flash of unstyled content */ +html { + visibility: hidden; + opacity: 0; } -.dark .nav-button-transparent.group[data-state="open"] { - background: rgba(255, 255, 255, 0.08) !important; - backdrop-filter: blur(8px) !important; - border-radius: 0.5rem !important; +html.loaded { + visibility: visible; + opacity: 1; + transition: opacity 0.1s ease-in-out; } -/* Mobile-friendly enhancements */ -@media (max-width: 768px) { - /* Ensure touch targets are at least 44px */ - .touch-manipulation { - touch-action: manipulation; - -webkit-tap-highlight-color: transparent; - } - - /* Better mobile spacing for action buttons */ - .mobile-action-buttons { - gap: 0.25rem !important; - } - - /* Mobile menu improvements */ - .mobile-menu-item { - min-height: 44px; - padding: 0.75rem 1rem; - display: flex; - align-items: center; - justify-content: space-between; - border-radius: 0.5rem; - transition: all 0.2s ease-in-out; - } - - .mobile-menu-item:active { - transform: scale(0.98); - background: rgba(0, 0, 0, 0.05); - } - - .dark .mobile-menu-item:active { - background: rgba(255, 255, 255, 0.05); - } - - /* Prevent text selection on mobile UI elements */ - .no-select { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; - } - - /* Improve mobile sheet content scrolling */ - .mobile-sheet-content { - overscroll-behavior: contain; - -webkit-overflow-scrolling: touch; - } - - /* Hide scrollbar in mobile menu while maintaining scroll functionality */ - [data-radix-dialog-content] { - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* Internet Explorer and Edge */ - } - - [data-radix-dialog-content]::-webkit-scrollbar { - display: none; /* Chrome, Safari, Opera */ - width: 0; - height: 0; - } - - /* Specifically target Sheet content scrolling areas */ - [data-radix-dialog-content] .overflow-y-auto, - [data-radix-dialog-content] .overflow-auto { - scrollbar-width: none; /* Firefox */ - -ms-overflow-style: none; /* Internet Explorer and Edge */ - } - - [data-radix-dialog-content] .overflow-y-auto::-webkit-scrollbar, - [data-radix-dialog-content] .overflow-auto::-webkit-scrollbar { - display: none; /* Chrome, Safari, Opera */ - width: 0; - height: 0; - } - - /* Mobile navigation specific scrollbar hiding */ - .mobile-nav-scroll { - scrollbar-width: none !important; /* Firefox */ - -ms-overflow-style: none !important; /* Internet Explorer and Edge */ - } - - .mobile-nav-scroll::-webkit-scrollbar { - display: none !important; /* Chrome, Safari, Opera */ - width: 0 !important; - height: 0 !important; - background: transparent !important; - } - - /* Additional scrollbar hiding for all mobile menu elements */ - [data-radix-dialog-content] *, - [data-radix-dialog-content] *::-webkit-scrollbar { - scrollbar-width: none !important; - -ms-overflow-style: none !important; - display: none !important; - width: 0 !important; - height: 0 !important; - } +/* Ensure smooth theme transitions */ +* { + transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out, border-color 0.15s ease-in-out; } -/* Small mobile optimizations */ -@media (max-width: 475px) { - /* Tighter spacing on very small screens */ - .action-buttons-compact { - gap: 0.125rem !important; - } - - /* Slightly smaller touch targets for very small screens */ - .compact-touch-target { - min-width: 40px !important; - min-height: 40px !important; - } - - /* Reduce header height on very small screens */ - .compact-header { - height: 3.5rem !important; /* 56px */ - } +/* Prevent layout shifts during hydration */ +img[priority] { + content-visibility: auto; } -/* Accessibility improvements */ -@media (prefers-reduced-motion: reduce) { - .nav-button-transparent, - .nav-dropdown-item, - .mobile-menu-item { - transition: none !important; - animation: none !important; +/* Loading animation */ +@keyframes loading { + 0% { + width: 0%; + transform: translateX(-100%); } -} - -/* High contrast mode support */ -@media (prefers-contrast: high) { - .nav-button-transparent { - border: 1px solid currentColor !important; + 50% { + width: 100%; + transform: translateX(0%); } - - .nav-dropdown-transparent { - border: 1px solid currentColor !important; - background: var(--background) !important; + 100% { + width: 0%; + transform: translateX(100%); } } -/* Focus visible for keyboard navigation */ -.nav-button-transparent:focus-visible { - outline: 2px solid var(--ring) !important; - outline-offset: 2px !important; -} - -/* Mobile menu icon stroke uniformity */ -.mobile-nav-scroll svg, -[data-radix-dialog-content] svg { - stroke-linecap: round !important; - stroke-linejoin: round !important; -} - -/* Force consistent stroke width for mobile quick action icons */ -@media (max-width: 768px) { - [data-radix-dialog-content] button svg { - stroke-width: inherit !important; - } +/* Ensure loading screen is on top */ +.loading-screen { + z-index: 9999; } |