Update drop target styling in modals and add dark theme

Updated `_AvatarModal.cshtml` and `_FaviconModal.cshtml` to use the new `image-drop-target` class for drop target areas. Added the `.image-drop-target` class in `admin.css` with styles for background color, border, border-radius, display, justify-content, and align-items. Included a dark theme variant for `.image-drop-target` to ensure proper styling when the dark theme is active.
EdiWang · Sep 30, 2024 · 0a2072f · 0a2072f
1 parent 93665be
commit 0a2072f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 2 deletions.
diff --git a/src/Moonglade.Web/Pages/Settings/_AvatarModal.cshtml b/src/Moonglade.Web/Pages/Settings/_AvatarModal.cshtml
@@ -9,7 +9,7 @@
             <div class="modal-body">
 
                 <div class="mb-2">
-                    <div id="avatarDropTarget" style="width: 256px; height: 256px;" class="img-thumbnail bg-light text-center">
+                    <div id="avatarDropTarget" style="width: 256px; height: 256px;" class="img-thumbnail image-drop-target text-center">
                         @SharedLocalizer["Drag and drop image file here"]
                     </div>
 

diff --git a/src/Moonglade.Web/Pages/Settings/_FaviconModal.cshtml b/src/Moonglade.Web/Pages/Settings/_FaviconModal.cshtml
@@ -9,7 +9,7 @@
             <div class="modal-body">
 
                 <div class="mb-2">
-                    <div id="siteiconDropTarget" style="width: 256px; height: 256px;" class="img-thumbnail bg-light text-center">
+                    <div id="siteiconDropTarget" style="width: 256px; height: 256px;" class="img-thumbnail image-drop-target text-center">
                         @SharedLocalizer["Drag and drop image file here"]
                     </div>
 

diff --git a/src/Moonglade.Web/wwwroot/css/admin.css b/src/Moonglade.Web/wwwroot/css/admin.css
@@ -354,6 +354,15 @@ div.mce-fullscreen {
     background-color: var(--bs-white);
 }
 
+.image-drop-target {
+    background-color: var(--bs-gray-200);
+    border: 2px dashed var(--bs-gray-400);
+    border-radius: 5px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
 [data-bs-theme="dark"] .navbar-brand {
     color: var(--bs-white);
 }
@@ -372,4 +381,9 @@ div.mce-fullscreen {
 
 [data-bs-theme="dark"] .monaco-target {
     background-color: #1E1E1E;
+}
+
+[data-bs-theme="dark"] .image-drop-target {
+    background-color: var(--bs-secondary-bg-subtle);
+    border: 2px dashed #4F4F4F;
 }