fix: dialogs look kinda bad

This commit is contained in:
2025-04-19 01:07:08 +02:00
parent 5763cafcba
commit ef7b4efa81
3 changed files with 16 additions and 7 deletions

View File

@@ -38,6 +38,10 @@
--glass-bg: rgba(0, 0, 0, 0.1);
--glass-hover: rgba(0, 0, 0, 0.15);
--glass-border: rgba(0, 0, 0, 0.2);
--thicker-glass-bg: rgba(0, 0, 0, 0.25);
--thicker-glass-hover: rgba(0, 0, 0, 0.35);
--thicker-glass-border: rgba(0, 0, 0, 0.45);
}
.dark {
@@ -74,6 +78,10 @@
--glass-bg: rgba(255, 255, 255, 0.1);
--glass-hover: rgba(255, 255, 255, 0.15);
--glass-border: rgba(255, 255, 255, 0.2);
--thicker-glass-bg: rgba(255, 255, 255, 0.25);
--thicker-glass-hover: rgba(255, 255, 255, 0.35);
--thicker-glass-border: rgba(255, 255, 255, 0.45);
}
}

View File

@@ -17,7 +17,7 @@
</p>
<p>
I do not have the right to the songs played on this radio station, nor do I have any
affiliation with Chillhop Music. <a href="https://github.com/SrIzan10/chillhop" class="underline">This project is open source</a> and not intended for
affiliation with Chillhop Music. <a href="https://github.com/SrIzan10/chillhop" class="underline" target="_blank">This project is open source</a> and not intended for
commercial use.
</p>
<p>

View File

@@ -21,16 +21,17 @@
<DialogPrimitive.Content
bind:ref
class={cn(
"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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
"backdrop-blur-md text-dynamic border drop-shadow-md shadow-lg",
"bg-[var(--glass-bg)] transition hover:bg-[var(--glass-hover)] border-[var(--glass-border)]",
className
)}
"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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
"backdrop-blur-md border drop-shadow-md shadow-lg",
"bg-black/40 dark:bg-white/30 transition border-white/20 dark:border-black/20",
"text-white dark:text-white font-medium",
className
)}
{...restProps}
>
{@render children?.()}
<DialogPrimitive.Close
class="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none text-dynamic backdrop-blur-sm p-1 shadow-sm bg-[var(--glass-bg)] border-[var(--glass-border)] hover:bg-[var(--glass-hover)]"
class="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none backdrop-blur-sm p-1 shadow-sm bg-black/40 dark:bg-white/20 hover:bg-black/60 dark:hover:bg-white/40 text-white"
>
<X class="size-4" />
<span class="sr-only">Close</span>