refactor: update component styles and improve accessibility

- Adjusted hover shadow effects in CycleTransferStatsClient for better visual feedback.
- Fixed aspect ratio class in GlobalMap for consistent rendering.
- Updated font weight in GroupSwitch for improved readability.
- Modified Separator width class in Header for consistency across components.
- Enhanced button hover effects in NetworkChartClient for better user interaction.
- Adjusted margin class in ServerDetailOverview for better alignment.
- Updated margin classes in ServerOverview for consistent spacing.
- Refined background gradient classes in ServiceTrackerClient for better color management.
- Standardized font weight in TabSwitch for consistency.
- Corrected stroke color class in AnimatedCircularProgressBar for better theming.
- Improved focus outline handling in badge and button components for better accessibility.
- Updated chart component styles for improved visual hierarchy.
- Adjusted checkbox focus outline for better accessibility.
- Enhanced command dialog styles for improved usability.
- Updated dialog close button focus outline for better accessibility.
- Refined dropdown menu styles for improved usability and consistency.
- Adjusted input focus outline for better accessibility.
- Improved popover content styles for better visibility.
- Updated select component styles for improved usability.
- Refined separator height classes for consistency.
- Enhanced switch component focus outline for better accessibility.
- Updated table footer styles for improved visual consistency.
- Refactored global CSS to use new Tailwind CSS configuration and improved theming.
- Removed outdated Tailwind configuration file.
This commit is contained in:
hamster1963
2025-12-28 15:24:04 +08:00
parent 4d4c3f1639
commit 746f890d65
29 changed files with 248 additions and 322 deletions
+4 -4
View File
@@ -16,7 +16,7 @@ const SelectTrigger = React.forwardRef<
<SelectPrimitive.Trigger
ref={ref}
className={cn(
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
className,
)}
{...props}
@@ -57,7 +57,7 @@ const SelectContent = React.forwardRef<
<SelectPrimitive.Content
ref={ref}
className={cn(
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
"relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
position === "popper" &&
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
className,
@@ -67,7 +67,7 @@ const SelectContent = React.forwardRef<
>
<SelectScrollUpButton />
<SelectPrimitive.Viewport
className={cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]")}
className={cn("p-1", position === "popper" && "h-(--radix-select-trigger-height) w-full min-w-(--radix-select-trigger-width)")}
>
{children}
</SelectPrimitive.Viewport>
@@ -89,7 +89,7 @@ const SelectItem = React.forwardRef<React.ElementRef<typeof SelectPrimitive.Item
<SelectPrimitive.Item
ref={ref}
className={cn(
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50",
className,
)}
{...props}