This commit is contained in:
Timothy Jaeryang Baek
2026-08-31 01:37:36 -04:00
parent 6a2a131650
commit a6f9751401
2 changed files with 10 additions and 2 deletions
@@ -4,7 +4,7 @@
</script>
<div
class={`app-dropdown-menu rounded-xl! p-0.5! border border-gray-100 dark:border-gray-800 z-50 bg-white text-gray-900 dark:bg-gray-850 dark:text-white shadow-lg ${className} [&_button:hover]:bg-gray-100! dark:[&_button:hover]:bg-gray-900! [&_a:hover]:bg-gray-100! dark:[&_a:hover]:bg-gray-900! [&_button:hover]:text-gray-900 dark:[&_button:hover]:text-gray-100 [&_a:hover]:text-gray-900 dark:[&_a:hover]:text-gray-100 [&>button]:flex [&>button]:w-full [&>button]:h-[1.6875rem]! [&>button]:items-center [&>button]:gap-2! [&>button]:rounded-xl! [&>button]:bg-transparent [&>button]:px-2! [&>button]:text-[0.8125rem]! [&>button]:font-normal! [&>a]:flex [&>a]:w-full [&>a]:h-[1.6875rem]! [&>a]:items-center [&>a]:gap-2! [&>a]:rounded-xl! [&>a]:bg-transparent [&>a]:px-2! [&>a]:text-[0.8125rem]! [&>a]:font-normal! [&_button_svg]:size-3.5! [&_a_svg]:size-3.5! [&>hr]:my-0.5 [&>hr]:mx-1`}
class={`app-dropdown-menu rounded-xl! p-0.5! border border-gray-100 dark:border-gray-800 z-50 bg-white dark:bg-gray-850 dark:text-white shadow-lg ${className} [&>button]:flex [&>button]:w-full [&>button]:h-[1.6875rem] [&>button]:items-center [&>button]:gap-2 [&>button]:rounded-xl! [&>button]:px-2! [&>button]:text-[13px] [&>button:hover]:bg-gray-50/60 dark:[&>button:hover]:bg-gray-800/60 [&>a]:flex [&>a]:w-full [&>a]:h-[1.6875rem] [&>a]:items-center [&>a]:gap-2 [&>a]:rounded-xl! [&>a]:px-2! [&>a]:text-[13px] [&>a:hover]:bg-gray-50/60 dark:[&>a:hover]:bg-gray-800/60 [&>button_svg]:size-3.5 [&>a_svg]:size-3.5 [&>hr]:my-0.5 [&>hr]:mx-1`}
{style}
>
<slot />
+9 -1
View File
@@ -1,6 +1,7 @@
<script lang="ts">
import { flyAndScale } from '$lib/utils/transitions';
import DropdownMenu from '$lib/components/common/DropdownMenu.svelte';
import { settings } from '$lib/stores';
import { tick } from 'svelte';
/** CSS classes for the sub-content container */
@@ -153,7 +154,14 @@
<svelte:window on:scroll|capture={positionContent} on:resize={positionContent} />
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div use:trigger class="w-full" on:mouseenter={handleMouseEnter} on:mouseleave={handleMouseLeave}>
<div
use:trigger
class="w-full {($settings?.highContrastMode ?? false)
? '[&>button:hover]:bg-gray-200! dark:[&>button:hover]:bg-gray-800!'
: '[&>button:hover]:bg-gray-50/60 dark:[&>button:hover]:bg-gray-800/60'}"
on:mouseenter={handleMouseEnter}
on:mouseleave={handleMouseLeave}
>
<slot name="trigger" />
</div>