diff --git a/src/components/head/page-head-style.webc b/src/components/head/page-head-style.webc index f1a2d21..8742b9e 100644 --- a/src/components/head/page-head-style.webc +++ b/src/components/head/page-head-style.webc @@ -16,7 +16,7 @@ min-height: 100dvh; } - body.scroll-lock { + body[inert] { overflow: hidden; } diff --git a/src/components/popup-modal.webc b/src/components/popup-modal.webc index 0455339..ff4410a 100644 --- a/src/components/popup-modal.webc +++ b/src/components/popup-modal.webc @@ -5,12 +5,10 @@ const open = () => { dialog.showModal(); - document.body.classList.toggle('scroll-lock'); document.body.inert = true; }; const close = (result) => { - document.body.classList.toggle('scroll-lock'); document.body.inert = false; storeProxy.setItem('isHorny', result); if (result && storeProxy.getItem('isInHornyJail') !== 'true') { @@ -58,9 +56,12 @@ --clr-no: oklch(40% 0.2 40deg); } - :host { - display: none; + :host[open] { + opacity: 1; + transform: scale(1); + } + :host { background: linear-gradient( to bottom right, var(--clr-box-gradient-start) 0%, @@ -73,67 +74,54 @@ margin: auto; border: none; border-radius: 1.5em; - padding: 1rem; + padding: 0; + + overflow: auto; - overflow: hidden; z-index: 1; opacity: 0; + transform: scale(0); - transition: all 0.75s ease-in-out allow-discrete; - animation: fade-in 0.5s; - animation-timing-function: var(--timing-func); - transition: all 0.5s; - transition-timing-function: var(--timing-func); + transition: all 0.5s var(--timing-func) allow-discrete; } - :host::before { - content: ''; - position: absolute; - inset: var(--border-thin); - background-color: var(--clr-box-background); - border-radius: inherit; - z-index: -1; - } - - :host[open] { - opacity: 1; - display: block; + @starting-style { + :host[open] { + opacity: 0; + transform: scale(0); + } } :host::backdrop { backdrop-filter: blur(0rem); - background-color: oklch(from black l c h / 0.5); + background-color: oklch(from black l c h / 0); - opacity: 0; - - transition: all 0.75s ease-in-out allow-discrete; - animation: backdrop-fade-in 0.5s; + transition: all 0.5s ease allow-discrete; } :host[open]::backdrop { backdrop-filter: blur(1rem); - opacity: 1; + background-color: oklch(from black l c h / 0.5); + } + + @starting-style { + :host[open]::backdrop { + backdrop-filter: blur(0rem); + background-color: oklch(from black l c h / 0); + } } :host .content { - display: flex; - flex-flow: column nowrap; - justify-content: center; text-align: center; - gap: 1.5rem; - } + background: var(--clr-box-background); - :host .content > * { - flex: 1 1 auto; - } - - :host .heading { - margin: 1.875rem 0 0 0; + margin: var(--border-thin); + border-radius: inherit; + padding: 1em; } :host .message { - flex: 1 1 100%; text-wrap: balance; } @@ -152,38 +140,4 @@ --gradient-base: var(--clr-no); --clr-text: var(--theme-c-primary-100); } - - @starting-style { - :host { - display: none; - opacity: 0; - } - - :host::backdrop { - backdrop-filter: blur(0rem); - opacity: 0; - } - } - - @keyframes fade-in { - from { - opacity: 0; - scale: 0; - } - to { - opacity: 1; - scale: 1; - } - } - - @keyframes backdrop-fade-in { - from { - backdrop-filter: blur(0rem); - opacity: 0; - } - to { - backdrop-filter: blur(1rem); - opacity: 1; - } - }