Style: add glass frost effect to popups
This commit is contained in:
parent
70ad2431d0
commit
0a67668bec
4 changed files with 21 additions and 2 deletions
|
@ -2006,6 +2006,10 @@ input[type="range"].range-lg::-moz-range-thumb {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.w-1\/4 {
|
||||||
|
width: 25%;
|
||||||
|
}
|
||||||
|
|
||||||
.w-10 {
|
.w-10 {
|
||||||
width: 2.5rem;
|
width: 2.5rem;
|
||||||
}
|
}
|
||||||
|
@ -5565,6 +5569,12 @@ code {
|
||||||
background-color: #b3b3b3;
|
background-color: #b3b3b3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.frozen-glass {
|
||||||
|
-webkit-backdrop-filter: blur(1px);
|
||||||
|
backdrop-filter: blur(1px);
|
||||||
|
background: rgba(100, 100, 100, 0.50);
|
||||||
|
}
|
||||||
|
|
||||||
/************************** UTILITY ************************/
|
/************************** UTILITY ************************/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
placement="left"
|
placement="left"
|
||||||
transitionType="fly"
|
transitionType="fly"
|
||||||
{transitionParams}
|
{transitionParams}
|
||||||
|
bgColor="frozen-glass"
|
||||||
divClass="overflow-y-auto z-50 "
|
divClass="overflow-y-auto z-50 "
|
||||||
bind:hidden
|
bind:hidden
|
||||||
>
|
>
|
||||||
|
|
|
@ -22,11 +22,13 @@
|
||||||
defaultClass = shared
|
defaultClass = shared
|
||||||
}
|
}
|
||||||
let dialogClass =
|
let dialogClass =
|
||||||
"fixed top-0 start-0 end-0 h-modal inset-0 w-full p-4 flex class-marker-dialog " + zIndex
|
"fixed top-0 start-0 end-0 h-modal inset-0 w-full p-4 flex border-none " + zIndex
|
||||||
|
|
||||||
|
export let backdropClass = "fixed inset-0 z-40 bg-gray-900 bg-opacity-50 dark:bg-opacity-80 frozen-glass"
|
||||||
if (fullscreen) {
|
if (fullscreen) {
|
||||||
dialogClass += " h-full-child"
|
dialogClass += " h-full-child"
|
||||||
}
|
}
|
||||||
let bodyClass = bodyPadding + " h-full space-y-4 flex-1 overflow-y-auto overscroll-contain"
|
let bodyClass = bodyPadding + " h-full space-y-4 flex-1 overflow-y-auto overscroll-contain background-normal"
|
||||||
|
|
||||||
let headerClass = "flex justify-between items-center p-2 px-4 md:px-5 rounded-t-lg"
|
let headerClass = "flex justify-between items-center p-2 px-4 md:px-5 rounded-t-lg"
|
||||||
if (!$$slots.header) {
|
if (!$$slots.header) {
|
||||||
|
@ -48,6 +50,7 @@
|
||||||
{bodyClass}
|
{bodyClass}
|
||||||
{dialogClass}
|
{dialogClass}
|
||||||
{headerClass}
|
{headerClass}
|
||||||
|
{backdropClass}
|
||||||
color="none"
|
color="none"
|
||||||
>
|
>
|
||||||
<svelte:fragment slot="header">
|
<svelte:fragment slot="header">
|
||||||
|
|
|
@ -465,6 +465,11 @@ code {
|
||||||
background-color: #b3b3b3;
|
background-color: #b3b3b3;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.frozen-glass {
|
||||||
|
backdrop-filter: blur(1px);
|
||||||
|
background: rgba(100, 100, 100, 0.50);
|
||||||
|
}
|
||||||
|
|
||||||
/************************** UTILITY ************************/
|
/************************** UTILITY ************************/
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Add table
Reference in a new issue