complete animation

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

module/webui/styles/about.css

@@ -53,14 +53,17 @@
 
 #module_name_line1 {
     font-size: 26px;
+    user-select: none;
 }
 
 #module_name_line2 {
     font-size: 22px;
+    user-select: none;
 }
 
 #authored {
     font-size: 14px;
+    user-select: none;
 }
 
 #disclaimer {
@@ -70,6 +73,7 @@
 #acknowledgment {
     font-weight: bold;
     font-size: 18px;
+    user-select: none;
 }
 
 .link-icon {
@@ -95,6 +99,7 @@
     background-color: #38A7ED;
     color: #fff;
     fill: #fff;
+    user-select: none;
 }
 
 #github {
@@ -103,6 +108,7 @@
     background-color: #606060;
     color: #fff;
     fill: #fff;
+    user-select: none;
 }
 
 #link-text {

module/webui/styles/applist.css

@@ -67,11 +67,66 @@
     max-width: calc(100% - 30px);
     overflow-wrap: break-word;
     word-break: break-word;
+    user-select: none;
+}
+
+.checkbox-wrapper {
+    position: relative;
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    margin-left: auto;
 }
 
 .checkbox {
-    margin-left: auto;
-    transform: scale(1.15);
+    opacity: 0;
+    position: absolute;
+    width: 0;
+    height: 0;
+}
+
+.custom-checkbox {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+    border: 2px solid #ccc;
+    border-radius: 4px;
+    transition: border-color 1s ease, transform 0.3s ease, background-color 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+    box-sizing: border-box;
+}
+
+.tick-symbol {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+    transition: transform 0.2s ease-out, opacity 0.3s ease;
+}
+
+.checkbox:checked + .custom-checkbox {
+    border-color: #007bff;
+    background-color: #007bff;
+    transition: border-color 0.1s ease;
+    animation: border-bounce 0.3s ease-out;
+}
+
+.checkbox:checked + .custom-checkbox .tick-symbol {
+    transform: translate(-50%, -50%) scale(1);
+    opacity: 1;
+}
+
+@keyframes border-bounce {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.8);
+    }
+    100% {
+        transform: scale(1);
+    }
 }
 
 @media (prefers-color-scheme: dark) {

module/webui/styles/boot-hash.css

@@ -42,15 +42,30 @@
     opacity: 1;
 }
 
-.input-box {
-    width: calc(100% - 20px);
+.boot-hash-value {
+    width: 100%;
     height: 100px;
-    resize: none;
-    padding: 9px;
     font-size: 16px;
     background-color: #FFF;
     border: 1px solid #ccc;
     border-radius: 10px;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+}
+
+.input-box {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    padding: 10px;
+    font-size: 16px;
+    border-radius: 9px;
+    box-sizing: border-box;
+    background-color: transparent;
+    outline-color: #007bff;
 }
 
 .button-container {
@@ -67,11 +82,9 @@
     background-color: #007bff;
     color: white;
     margin-left: auto;
-    transition: background-color 0.2s ease;
-}
-
-.boot-hash-save-button:active {
-    background-color: #003d80;
+    position: relative;
+    overflow: hidden;
+    user-select: none;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -81,6 +94,9 @@
 
     .input-box {
         color: #fff;
+    }
+    
+    .boot-hash-value {
         background-color: #343434;
         border: 1px solid #6E6E6E;
     }

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);
-    }
-
 }

module/webui/styles/header.css

@@ -8,12 +8,13 @@
     width: calc(100% - 10px);
     max-width: 1100px;
     background-color: #F5F5F5;
-    transition: transform 0.3s ease;
+    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     z-index: 1100;
     margin-left: auto;
     margin-right: auto;
     left: 0;
     right: 0;
+    user-select: none;
 }
 
 .header-block {
@@ -24,7 +25,7 @@
     left: 0;
     width: 100%;
     z-index: 1100;
-    transition: transform 0.3s ease;
+    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     height: var(--window-inset-top);
 }
 
@@ -74,7 +75,7 @@
     max-height: calc(100vh - 50px);
     overflow-y: auto;
     transform: translateY(-10px);
-    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
+    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .language-menu.show {
@@ -97,6 +98,7 @@
     transition: background-color 0.2s ease;
     position: relative;
     overflow: hidden;
+    user-select: none;
 }
 
 .language-option:last-child {
@@ -133,7 +135,7 @@
     justify-content: center;
     align-items: center;
     opacity: 0;
-    transition: opacity 0.2s ease;
+    transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .help-overlay.show {
@@ -174,6 +176,7 @@
 
 .help-content p {
     font-size: 26px;
+    user-select: none;
 }
 
 .help-content ul {

module/webui/styles/search_menu.css

@@ -6,7 +6,7 @@
     width: calc(100% - 20px);
     max-width: 1100px;
     z-index: 1000;
-    transition: transform 0.3s ease;
+    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
     margin-left: auto;
     margin-right: auto;
     left: 0;
@@ -86,7 +86,7 @@
     display: inline-block;
     fill: #000;
     transform: rotate(0deg);
-    transition: transform 0.2s ease;
+    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
 }
 
 .menu-icon.menu-open {
@@ -108,10 +108,10 @@
     max-height: calc(100vh - 120px);
     overflow-y: auto;
     white-space: nowrap;
-    opacity: 0;
     visibility: hidden;
     transform: translateX(120%);
-    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
+    transition: all 0.4s cubic-bezier(0.22, 1, 0.36, 1);
+    user-select: none;
 }
 
 #select-denylist {
@@ -120,7 +120,6 @@
 
 .menu-options.visible {
     display: block;
-    opacity: 1;
     visibility: visible;
     transform: translateX(0);
 }