meshkee-app/dashboards
1
0
Fork 0
mirror of https://git.meshkee.com/Meshkee/dashboards.git synced 2026-08-11 22:30:58 +04:30
Code Issues Packages Projects Releases Wiki Activity

Fix modal backdrop blur by applying filter on the overlay itself.

Browse Source 
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
Alireza Hassani
2026-08-08 18:21:43 +03:30
co-authored by Cursor
parent e6670ed06f
commit 656fc57494
14 changed files with 33 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/super-admin/src/components/ConfirmDeleteModal.module.css
+3 -15
View File
@@ -1,8 +1,9 @@
.overlay {
position: fixed;
inset: 0;
isolation: isolate;
background: transparent;
background: rgba(127, 29, 29, 0.28);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
display: flex;
align-items: center;
justify-content: center;
@@ -10,19 +11,6 @@
padding: 20px;
}
/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
.overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: rgba(127, 29, 29, 0.28);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}
.modal {
position: relative;
width: 100%;
apps/super-admin/src/components/Modal.module.css
+3 -15
View File
@@ -1,8 +1,9 @@
.overlay {
position: fixed;
inset: 0;
isolation: isolate;
background: transparent;
background: var(--modal-overlay-bg);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
display: flex;
align-items: center;
justify-content: center;
@@ -10,19 +11,6 @@
padding: 20px;
}
/* Tint + blur on ::before so opacity animations on .overlay cannot disable backdrop-filter. */
.overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: var(--modal-overlay-bg);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}
.modal {
width: 100%;
max-width: 520px;
apps/super-admin/src/index.css
+1 -1
View File
@@ -30,7 +30,7 @@
--radius-sm: 12px;
--blur-glass: 28px;
--modal-overlay-bg: rgba(15, 23, 42, 0.4);
--modal-overlay-blur: 12px;
--modal-overlay-blur: 16px;
--select-arrow-size: 16px;
--select-arrow-offset: 12px;
--select-padding-end: 2.5rem;