feat: add backdrop blur to all main application modals

- Add global CSS styles for PrimeReact Dialog component backdrop

- Apply 8px blur effect with semi-transparent black background

- Style dialog components with dark theme matching application design

- Affects all main modals including:

  - User badges and profile modals

  - Subscription and payment modals

  - Course and resource modals

  - Info and form modals
This commit is contained in:
kiwihodl 2025-04-01 16:44:02 -05:00 committed by austinkelsay
parent 3d0da34409
commit 34680d244f
No known key found for this signature in database
GPG Key ID: 5A763922E5BA08EE

View File

@ -148,4 +148,32 @@ code {
/* hide attribution */
div.react-flow__attribution {
display: none !important;
}
/* Dialog backdrop styles */
.p-dialog-mask {
backdrop-filter: blur(8px);
background-color: rgba(0, 0, 0, 0.5);
}
.p-dialog {
background: #1e1e1e;
border: 1px solid #333;
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.p-dialog-header {
background: #1e1e1e;
border-bottom: 1px solid #333;
color: #fff;
}
.p-dialog-content {
background: #1e1e1e;
color: #fff;
}
.p-dialog-footer {
background: #1e1e1e;
border-top: 1px solid #333;
}