Next

bin/backend/controls/customerFiles/Grid.css

 .drag-drop-dropper {
-    background: rgba(0, 0, 0, 0.5);
-    height: 100%;
-    left: 0;
+    --_transition: 1s ease all;
+    --_transition-delay: 1s;
+
+    background-color: rgb(249 250 250 / 80%);
     position: absolute;
-    top: 0;
-    width: 100%;
     z-index: 10000;
+    backdrop-filter: blur(4px);
+    inset: -5px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
 }
+
+.drag-drop-dropper--animation {
+    animation-name: fadeIn;
+    animation-duration: 0.3s;
+    animation-fill-mode: forwards;
+}
+
+.drag-drop-dropper__inner {
+    border: 5px dashed #d9e4e4;
+    border-radius: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 70%;
+    height: 30%;
+}
+
+.drag-drop-dropper__icon {
+    font-size: 4rem;
+    color: #d3e5e5;
+    transition: var(--_transition);
+    transition-delay: var(--_transition-delay);
+}
+
+/* animation */
+.drag-drop-dropper--animation .drag-drop-dropper__inner {
+    animation-name: fadeInBorder;
+    animation-fill-mode: forwards;
+    animation-delay: 0.1s;
+}
+
+/*.drag-drop-dropper--animation .drag-drop-dropper__icon {*/
+.drag-drop-dropper .drag-drop-dropper__icon {
+    animation-name: fadeInIconColor, bounce;
+    animation-delay: 0.1s, 0.2s;
+    animation-timing-function: linear, cubic-bezier(0.280, 0.840, 0.420, 1);
+    animation-duration: 0.3s, 1.25s;
+    animation-iteration-count: 1, infinite;
+    animation-fill-mode: forwards, forwards
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes fadeInBorder {
+    from {
+        border-color: #d9e4e4;
+    }
+    to {
+        border-color: #798787;
+    }
+}
+
+@keyframes fadeInIconColor {
+    from {
+        color: #d3e5e5;
+    }
+    to {
+        color: #6c7d7d;
+    }
+}
+
+@keyframes bounce {
+    0%   { transform: scale(1,1)      translateY(0); }
+    15%  { transform: scale(1.1,.9)   translateY(0); }
+    35%  { transform: scale(.9,1.1)   translateY(-20px); }
+    50%  { transform: scale(1.05,.95) translateY(0); }
+    57%  { transform: scale(1,1)      translateY(-5px); }
+    64%  { transform: scale(1,1)      translateY(0); }
+    100% { transform: scale(1,1)      translateY(0); }
+}
\ No newline at end of file