Restructure css

module/webui/styles/global.css

@@ -0,0 +1,161 @@
+body {
+    background-color: #F5F5F5;
+    padding-top: var(--window-inset-top);
+    padding-bottom: var(--window-inset-bottom);
+}
+
+.no-scroll {
+    overflow: hidden;
+}
+
+.floating-card {
+    display: flex;
+    justify-content: center;
+    position: fixed;
+    bottom: -70px;
+    left: 50%;
+    transform: translateX(-50%);
+    z-index: 3;
+}
+
+.floating-btn {
+    flex-shrink: 0;
+    background-color: #007bff;
+    border: none;
+    box-shadow: 0 4px 8px #0003;
+    color: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 10px 20px;
+    font-size: 20px;
+    font-weight: bold;
+    transition: transform 0.3s ease-in-out, background-color 0.2s ease;
+    border-radius: 50px 50px;
+}
+
+.floating-btn:active {
+    background-color: #003d80;
+}
+
+.prompt {
+    position: fixed;
+    bottom: 0;
+    left: 10px;
+    background-color: #4CAF50;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+    color: white;
+    font-size: 15px;
+    padding: 5px 10px;
+    z-index: 2000;
+    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;
+}
+
+.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;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    color: #6E6E6E;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 24px;
+    z-index: 1000;
+}
+
+.footer {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: calc(100% - 10px);
+    max-width: 1100px;
+    padding: 25px 0;
+    position: relative;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.uninstall-container {
+    padding: 10px 10px;
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    display: flex;
+    align-items: center;
+    border-radius: 8px;
+    background-color: #CE0000;
+    white-space: nowrap;
+    transition: background-color 0.2s ease;
+}
+
+.uninstall-container:active {
+    background-color: #830000;
+}
+
+.uninstall-container i {
+    margin-right: 5px;
+}
+
+.uninstall-container span {
+    font-size: 16px;
+    font-weight: bold;
+    color: #fff;
+}
+
+.uninstall-container.hidden-uninstall {
+    display: none;
+}
+
+@media (prefers-color-scheme: dark) {
+    body {
+        background-color: #121212;
+        color: #fff;
+    }
+}