From 10b6deaf56ff7a122a19b9c142dd91a46d426ef5 Mon Sep 17 00:00:00 2001 From: t8y2 <1156263951@qq.com> Date: Thu, 30 Apr 2026 23:21:33 +0800 Subject: [PATCH] feat(ui): frosted glass style for context menus and dropdowns --- .../ui/context-menu/ContextMenuContent.vue | 2 +- src/components/ui/context-menu/ContextMenuItem.vue | 2 +- .../ui/context-menu/ContextMenuSeparator.vue | 2 +- .../ui/context-menu/ContextMenuSubContent.vue | 2 +- .../ui/dropdown-menu/DropdownMenuContent.vue | 2 +- .../ui/dropdown-menu/DropdownMenuSubContent.vue | 2 +- src/components/ui/select/SelectContent.vue | 2 +- src/styles/globals.css | 14 ++++++++++++++ 8 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/components/ui/context-menu/ContextMenuContent.vue b/src/components/ui/context-menu/ContextMenuContent.vue index bdfd8501c2..30def21942 100644 --- a/src/components/ui/context-menu/ContextMenuContent.vue +++ b/src/components/ui/context-menu/ContextMenuContent.vue @@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) data-slot="context-menu-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn( - 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 bg-popover text-popover-foreground min-w-36 rounded-lg p-1 shadow-md ring-1 duration-100 cn-menu-translucent z-50 max-h-(--reka-context-menu-content-available-height) origin-(--reka-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto', + 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 text-popover-foreground min-w-36 rounded-xl p-1 duration-100 cn-menu-translucent z-50 max-h-(--reka-context-menu-content-available-height) origin-(--reka-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto', props.class, )" > diff --git a/src/components/ui/context-menu/ContextMenuItem.vue b/src/components/ui/context-menu/ContextMenuItem.vue index b23fe368dc..0e96cdf108 100644 --- a/src/components/ui/context-menu/ContextMenuItem.vue +++ b/src/components/ui/context-menu/ContextMenuItem.vue @@ -29,7 +29,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) :data-variant="variant" v-bind="forwarded" :class="cn( - 'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-1.5 rounded-md px-1.5 py-1 text-sm data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', + 'focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive focus:*:[svg]:text-accent-foreground gap-2 rounded-md px-2 py-1 text-[13px] data-inset:pl-7 [&_svg:not([class*=size-])]:size-4 group/context-menu-item relative flex cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0', props.class, )" > diff --git a/src/components/ui/context-menu/ContextMenuSeparator.vue b/src/components/ui/context-menu/ContextMenuSeparator.vue index 8f5a554cee..e081ed604f 100644 --- a/src/components/ui/context-menu/ContextMenuSeparator.vue +++ b/src/components/ui/context-menu/ContextMenuSeparator.vue @@ -16,6 +16,6 @@ const delegatedProps = reactiveOmit(props, 'class') diff --git a/src/components/ui/context-menu/ContextMenuSubContent.vue b/src/components/ui/context-menu/ContextMenuSubContent.vue index 995b1d3214..61b26c9b24 100644 --- a/src/components/ui/context-menu/ContextMenuSubContent.vue +++ b/src/components/ui/context-menu/ContextMenuSubContent.vue @@ -22,7 +22,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) v-bind="forwarded" :class=" cn( - 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 bg-popover text-popover-foreground min-w-32 rounded-lg border p-1 shadow-lg duration-100 cn-menu-translucent z-50 origin-(--reka-context-menu-content-transform-origin) overflow-hidden', + 'data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 text-popover-foreground min-w-32 rounded-lg ring-foreground/10 ring-1 p-1 duration-100 cn-menu-translucent z-50 origin-(--reka-context-menu-content-transform-origin) overflow-hidden', props.class, ) " diff --git a/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/src/components/ui/dropdown-menu/DropdownMenuContent.vue index be50a887f6..5a7b26dc0d 100644 --- a/src/components/ui/dropdown-menu/DropdownMenuContent.vue +++ b/src/components/ui/dropdown-menu/DropdownMenuContent.vue @@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) diff --git a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue index d7837e2660..280548bba4 100644 --- a/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue +++ b/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue @@ -20,7 +20,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) diff --git a/src/components/ui/select/SelectContent.vue b/src/components/ui/select/SelectContent.vue index e740d5442d..b36b6d081a 100644 --- a/src/components/ui/select/SelectContent.vue +++ b/src/components/ui/select/SelectContent.vue @@ -36,7 +36,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits) :data-align-trigger="position === 'item-aligned'" v-bind="{ ...$attrs, ...forwarded }" :class="cn( - 'bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-translucent relative z-50 max-h-(--reka-select-content-available-height) origin-(--reka-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none', + 'text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-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 ring-foreground/10 min-w-36 rounded-lg ring-1 duration-100 data-[side=inline-start]:slide-in-from-right-2 data-[side=inline-end]:slide-in-from-left-2 cn-menu-translucent relative z-50 max-h-(--reka-select-content-available-height) origin-(--reka-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none', 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', props.class, diff --git a/src/styles/globals.css b/src/styles/globals.css index 7a9aedc308..e7a57e9ea3 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -156,4 +156,18 @@ } .splitpanes__splitter:hover { background: oklch(0.6 0.15 250) !important; +} + +/* Frosted glass menus */ +.cn-menu-translucent { + backdrop-filter: blur(16px) saturate(1.6) !important; + -webkit-backdrop-filter: blur(16px) saturate(1.6) !important; + background-color: oklch(1 0 0 / 0.95) !important; + box-shadow: none !important; + border: 0.5px solid oklch(0 0 0 / 0.12) !important; + --tw-ring-shadow: none !important; +} +.dark .cn-menu-translucent { + background-color: oklch(0.205 0 0 / 0.82) !important; + border-color: oklch(1 0 0 / 0.1) !important; } \ No newline at end of file