From 013d85328dd958d5d4fc897817ac03cb16a8b897 Mon Sep 17 00:00:00 2001
From: crupest <crupest@outlook.com>
Date: Fri, 21 Jul 2023 17:19:07 +0800
Subject: ...

---
 FrontEnd/src/views/common/dialog/Dialog.css | 20 ++++++++++++++------
 FrontEnd/src/views/common/dialog/Dialog.tsx |  1 +
 2 files changed, 15 insertions(+), 6 deletions(-)

(limited to 'FrontEnd')

diff --git a/FrontEnd/src/views/common/dialog/Dialog.css b/FrontEnd/src/views/common/dialog/Dialog.css
index 21ea52fc..108bd823 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.css
+++ b/FrontEnd/src/views/common/dialog/Dialog.css
@@ -5,14 +5,22 @@
   top: 0;
   right: 0;
   bottom: 0;
-  background-color: rgba(255, 255, 255, 0.92);
-
   display: flex;
   padding: 2em;
-
   overflow: auto;
 }
 
+.cru-dialog-background {
+  position: absolute;
+  z-index: -1;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: var(--cru-surface-dim-color);
+  opacity: 0.8;
+}
+
 .cru-dialog-container {
   max-width: 100%;
   min-width: 30vw;
@@ -22,7 +30,7 @@
   border: var(--cru-primary-color) 1px solid;
   border-radius: 5px;
   padding: 1.5em;
-  background-color: white;
+  background-color: var(--cru-surface-color);
 }
 
 .cru-dialog-bottom-area {
@@ -30,7 +38,7 @@
   justify-content: flex-end;
 }
 
-.cru-dialog-bottom-area > * {
+.cru-dialog-bottom-area>* {
   margin: 0 0.5em;
 }
 
@@ -52,4 +60,4 @@
   transform: scale(0, 0);
   opacity: 0;
   transform-origin: center;
-}
+}
\ No newline at end of file
diff --git a/FrontEnd/src/views/common/dialog/Dialog.tsx b/FrontEnd/src/views/common/dialog/Dialog.tsx
index 923c636b..79a31954 100644
--- a/FrontEnd/src/views/common/dialog/Dialog.tsx
+++ b/FrontEnd/src/views/common/dialog/Dialog.tsx
@@ -38,6 +38,7 @@ export default function Dialog(props: DialogProps) {
               }
         }
       >
+        <div className="cru-dialog-background"/>
         <div
           className="cru-dialog-container"
           onPointerDown={(e) => e.stopPropagation()}
-- 
cgit v1.2.3