Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-10-25 03:48:37 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Add scroll lock, replace CSS anchors with floating layer, and various fixes (#3407)

Browse Source
This commit is contained in:
hfcRed
2026-09-22 13:15:01 -04:00
committed by GitHub
parent 7976224d53
commit 2b31ecd0fa
51 changed files with 2363 additions and 1085 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
app/components/elements/Dialog.module.css
View File

@@ -1,7 +1,19 @@
.modal {
--dialog-padding-block: var(--s-6);
width: calc(100% - 2rem);
max-width: 28rem;
max-height: min(80dvh, calc(var(--visual-viewport-height, 100dvh) - 10rem));
inset-block-start: var(--visual-viewport-offset-top, 0px);
inset-block-end: calc(
100% -
var(--visual-viewport-offset-top, 0px) -
var(--visual-viewport-height, 100%)
);
max-height: calc(
var(--visual-viewport-height, 100dvh) -
2 *
var(--modal-margin-block)
);
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
@@ -9,7 +21,7 @@
border: 1px solid var(--color-border);
background-color: var(--color-bg);
color: var(--color-text);
padding: var(--s-6);
padding: var(--dialog-padding-block) var(--s-6);
text-align: left;
vertical-align: middle;
box-shadow:
@@ -18,6 +30,10 @@
margin: auto;
outline: none;
animation: zoom-in-95 300ms ease-out;
@media (width < 600px) {
--dialog-padding-block: var(--s-4);
}
}
.blurredBackdrop::backdrop {
@@ -40,6 +56,7 @@
min-width: 100%;
height: 100dvh;
max-height: 100dvh;
inset-block: 0;
border-radius: 0;
margin: 0;
padding-block-start: calc(env(safe-area-inset-top) + var(--s-6));
@@ -67,7 +84,7 @@
}
.noHeading {
margin-block-start: -14px;
margin-block-start: calc(10px - var(--dialog-padding-block));
}
.heading {