Fix close popup button for mobile

asterjdm · May 5, 2024 · d548ffc · d548ffc
1 parent c5d03ea
commit d548ffc
Showing 1 changed file with 39 additions and 7 deletions.
diff --git a/templates/styles/standard-assets/popup.css b/templates/styles/standard-assets/popup.css
@@ -12,7 +12,7 @@
     min-height: 100vh;
     backdrop-filter: blur(5px);
     animation: fade-in 250ms ease-in-out;
-    z-index: 4;
+    z-index: 1;
 }
 
 .standard-popup.show {
@@ -34,7 +34,7 @@
     gap: 20px;
     overflow-y: hidden;
     scrollbar-width: none;
-    z-index: 5;
+    z-index: 2;
 }
 
 .standard-popup-content.add-popup {
@@ -52,8 +52,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    z-index: 999;
     transform: translate(150px, -190px);
+    z-index: 3;
 }
 
 .standard-popup-close:focus {
@@ -81,7 +81,7 @@
     height: 100%;
     opacity: 0;
     cursor: pointer;
-    z-index: 7;
+    z-index: 2;
 }
 
 .preview-image {
@@ -90,11 +90,43 @@
     object-fit: cover;
 }
 
-
-
 .insert-name, .send-request {
-    width: calc(100% - 40px);
     margin-top: -10px;
+    width: calc(100% - 40px);
+}
+
+@media screen and (max-width: 521px) {
+    .standard-popup-content.add-popup {
+        width: 100%;
+        height: 100%;
+        box-shadow: 0;
+    }
+
+    .standard-popup-close {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+        width: 60px;
+        height: 60px;
+        transform: translate(0px, 0px);
+    }
+
+    .standard-popup-close:focus {
+        transform: translate(2px, 2px);
+    }
+
+    .select-image {
+        height: auto;
+    }
+
+    .insert-name, .send-request {
+        height: 60px;
+        font-size: 30px;
+    }
+
+    .insert-name {
+        padding-left: 10px;
+    }
 }
 
 @keyframes fade-in {