complete animation

- adjust position of prompt and save button on MMRL
- complete ripple animation
- new checkbox animation

module/webui/styles/global.css

@@ -12,7 +12,7 @@ body {
     display: flex;
     justify-content: center;
     position: fixed;
-    bottom: -70px;
+    bottom: 50px;
     left: 50%;
     transform: translateX(-50%);
     z-index: 3;
@@ -30,9 +30,10 @@ body {
     padding: 10px 20px;
     font-size: 20px;
     font-weight: bold;
-    transition: transform 0.3s ease-in-out, background-color 0.2s ease;
+    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     border-radius: 50px 50px;
     overflow: hidden;
+    user-select: none;
 }
 
 .prompt {
@@ -49,49 +50,13 @@ body {
     width: auto;
     max-width: calc(100% - 40px);
     transform: translateY(100%);
-    transition: transform 0.5s ease;
-}
-
-.prompt.visible {
-    animation: YbounceIn 0.4s forwards;
-}
-
-.prompt.hidden {
-    animation: YbounceOut 0.4s forwards;
+    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .prompt.error {
     background-color: #f44336;
 }
 
-@keyframes YbounceIn {
-    0% {
-        transform: translateY(100%);
-    }
-
-    50% {
-        transform: translateY(-80%);
-    }
-
-    100% {
-        transform: translateY(-60%);
-    }
-}
-
-@keyframes YbounceOut {
-    0% {
-        transform: translateY(-60%);
-    }
-
-    50% {
-        transform: translateY(-80%);
-    }
-
-    100% {
-        transform: translateY(100%);
-    }
-}
-
 .loading {
     position: fixed;
     top: 0;
@@ -130,6 +95,7 @@ body {
     background-color: #CE0000;
     white-space: nowrap;
     overflow: hidden;
+    user-select: none;
 }
 
 .uninstall-container i {
@@ -150,15 +116,19 @@ body {
     position: absolute;
     border-radius: 50%;
     transform: scale(0);
-    animation: ripple-animation ease-out;
+    opacity: 1;
+    animation: ripple-animation ease-out forwards;
     pointer-events: none;
     background: rgba(0, 0, 0, 0.2);
 }
 
+.ripple.end {
+    opacity: 0;
+}
+
 @keyframes ripple-animation {
     to {
-        transform: scale(4);
-        opacity: 0;
+        transform: scale(3);
     }
 }
 
@@ -167,9 +137,4 @@ body {
         background-color: #121212;
         color: #fff;
     }
-
-    .ripple {
-        background: rgba(255, 255, 255, 0.2);
-    }
-
 }