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/business/src/components/BrandModal.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/business/src/components/CategoryModal.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: 480px;
apps/business/src/components/ConfirmBulkAddStoreItemsModal.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 {
position: relative;
width: 100%;
apps/business/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/business/src/components/ImageLightbox.module.css
-11
View File
@@ -1,7 +1,6 @@
.overlay {
position: fixed;
inset: 0;
isolation: isolate;
z-index: 300;
display: flex;
flex-direction: column;
@@ -9,21 +8,11 @@
justify-content: center;
gap: 16px;
padding: 24px;
background: transparent;
}
.overlay::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
pointer-events: none;
background: rgba(15, 23, 42, 0.82);
backdrop-filter: blur(var(--modal-overlay-blur));
-webkit-backdrop-filter: blur(var(--modal-overlay-blur));
}
.closeBtn {
position: absolute;
top: 20px;
apps/business/src/components/ProductCommentsModal.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: 640px;
apps/business/src/components/VariationsModal.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));
}
.overlayNested {
z-index: 1010;
}
apps/business/src/index.css
+1 -1
View File
@@ -25,7 +25,7 @@
--glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
--blur-glass: 28px;
--modal-overlay-bg: rgba(15, 23, 42, 0.4);
--modal-overlay-blur: 12px;
--modal-overlay-blur: 16px;
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
apps/customer/src/components/VariationsModal.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));
}
.overlayNested {
z-index: 210;
}
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;
packages/dashboard-core/src/styles/tokens.css
+1 -1
View File
@@ -25,7 +25,7 @@
--glass-shadow: 0 8px 32px rgba(31, 38, 135, 0.08);
--blur-glass: 28px;
--modal-overlay-bg: rgba(15, 23, 42, 0.4);
--modal-overlay-blur: 12px;
--modal-overlay-blur: 16px;
--text-primary: #1e293b;
--text-secondary: #64748b;
--text-muted: #94a3b8;
packages/dashboard-ui/src/components/PasswordResetModal.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 {
position: relative;
width: 100%;