padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix dialog box background and positioning

Browse source
This commit is contained in:
padreug 2025-02-12 01:29:53 +01:00
parent 6283c76861
commit 32b0bf7247
2 changed files with 10 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/assets/index.css
View file

@ -78,10 +78,10 @@
@layer utilities { @layer utilities {
.bg-background { .bg-background {
background-color: hsl(var(--background) / <alpha-value>); background-color: hsl(var(--background) / var(--tw-bg-opacity, 1));
} }
.bg-foreground { .bg-foreground {
background-color: hsl(var(--foreground) / <alpha-value>); background-color: hsl(var(--foreground) / var(--tw-bg-opacity, 1));
} }
.bg-card { .bg-card {
background-color: hsl(var(--card) / var(--tw-bg-opacity, 1)); background-color: hsl(var(--card) / var(--tw-bg-opacity, 1));
@ -127,10 +127,10 @@
} }
.text-background { .text-background {
color: hsl(var(--background) / <alpha-value>); color: hsl(var(--background) / var(--tw-text-opacity, 1));
} }
.text-foreground { .text-foreground {
color: hsl(var(--foreground) / <alpha-value>); color: hsl(var(--foreground) / var(--tw-text-opacity, 1));
} }
.text-card { .text-card {
color: hsl(var(--card) / var(--tw-text-opacity, 1)); color: hsl(var(--card) / var(--tw-text-opacity, 1));
@ -185,13 +185,13 @@
/* Add support for ring colors */ /* Add support for ring colors */
@layer utilities { @layer utilities {
.ring-border { .ring-border {
--tw-ring-color: hsl(var(--border) / <alpha-value>); --tw-ring-color: hsl(var(--border) / var(--tw-ring-opacity, 1));
} }
.ring-primary { .ring-primary {
--tw-ring-color: hsl(var(--primary) / <alpha-value>); --tw-ring-color: hsl(var(--primary) / var(--tw-ring-opacity, 1));
} }
.ring-background { .ring-background {
--tw-ring-color: hsl(var(--background) / <alpha-value>); --tw-ring-color: hsl(var(--background) / var(--tw-ring-opacity, 1));
} }
} }
@ -201,9 +201,9 @@
border-color: hsl(var(--border) / var(--tw-border-opacity, 1)); border-color: hsl(var(--border) / var(--tw-border-opacity, 1));
} }
.border-primary { .border-primary {
border-color: hsl(var(--primary) / <alpha-value>); border-color: hsl(var(--primary) / var(--tw-border-opacity, 1));
} }
.border-background { .border-background {
border-color: hsl(var(--background) / <alpha-value>); border-color: hsl(var(--background) / var(--tw-border-opacity, 1));
} }
} }

2
src/components/ui/dialog/DialogContent.vue
View file

@ -16,7 +16,7 @@ const props = defineProps<{
/> />
<DialogContentPrimitive <DialogContentPrimitive
:class="cn( :class="cn(
'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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%] sm:rounded-lg', 'fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 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%] sm:rounded-lg mx-auto',
props.class props.class
)" )"
> >