opt: move MMRL inset from js to css

module/webui/index.html

@@ -5,7 +5,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>TrickyAddon</title>
-    <link rel="stylesheet" type="text/css" href="/mmrl/insets.css" />
     <link rel="stylesheet" href="styles/global.css" type="text/css">
     <link rel="stylesheet" href="styles/about.css" type="text/css">
     <link rel="stylesheet" href="styles/applist.css" type="text/css">

module/webui/scripts/main.js

@@ -124,11 +124,7 @@ export function showPrompt(key, isSuccess = true, duration = 3000) {
         clearTimeout(window.promptTimeout);
     }
     setTimeout(() => {
-        if (typeof ksu !== 'undefined' && ksu.mmrl) {
+        prompt.style.transform = 'translateY(calc((var(--window-inset-bottom, 0px) + 60%) * -1))';
-            prompt.style.transform = 'translateY(calc((var(--window-inset-bottom) + 60%) * -1))';
-        } else {
-            prompt.style.transform = 'translateY(-60%)';
-        }
         window.promptTimeout = setTimeout(() => {
             prompt.style.transform = 'translateY(100%)';
         }, duration);
@@ -227,12 +223,7 @@ async function uninstallWebUI() {
 async function checkMMRL() {
     if (typeof ksu !== 'undefined' && ksu.mmrl) {
         // Adjust elements position for MMRL
-        title.style.top = 'var(--window-inset-top)';
-        const insetTop = getComputedStyle(document.documentElement).getPropertyValue('--window-inset-top');
-        const insetTopValue = parseInt(insetTop, 10);
-        searchMenuContainer.style.top = `${insetTopValue + 40}px`;
         headerBlock.style.display = 'block';
-        floatingCard.style.bottom = 'calc(var(--window-inset-bottom) + 50px)';
 
         // Set status bars theme based on device theme
         try {
@@ -262,13 +253,8 @@ async function checkMMRL() {
 
 // Funtion to adapt floating button hide in MMRL
 export function hideFloatingBtn(hide = true) {
-    if (!hide) {
+    if (!hide) floatingCard.style.transform = 'translateY(0)';
-        floatingCard.style.transform = 'translateY(0)';
+    else floatingCard.style.transform = 'translateY(calc(var(--window-inset-bottom, 0px) + 120px))';
-    } else if (typeof ksu !== 'undefined' && ksu.mmrl) {
-        floatingCard.style.transform = 'translateY(calc(var(--window-inset-bottom) + 120px))';
-    } else {
-        floatingCard.style.transform = 'translateY(120px)';
-    }
 }
 
 // Function to apply ripple effect

module/webui/styles/global.css

@@ -1,7 +1,14 @@
+@import url('https://mui.kernelsu.org/mmrl/insets.css');
+
+:root {
+    --top-inset: var(--window-inset-top, 0px);
+    --bottom-inset: var(--window-inset-bottom, 0px);
+}
+
 body {
     background-color: #F5F5F5;
-    padding-top: var(--window-inset-top);
+    padding-top: var(--top-inset);
-    padding-bottom: var(--window-inset-bottom);
+    padding-bottom: var(--bottom-inset);
     margin: 0;
 }
 
@@ -14,7 +21,7 @@ body {
     justify-content: center;
     position: fixed;
     width: 100%;
-    bottom: 50px;
+    bottom: calc(var(--bottom-inset) + 50px);
     transition: transform 0.4s ease;
     pointer-events: none;
     z-index: 2;

module/webui/styles/header.css

@@ -3,7 +3,7 @@
     align-items: center;
     justify-content: space-between;
     position: fixed;
-    top: 0;
+    top: var(--top-inset);
     height: 40px;
     width: calc(100% - 10px);
     max-width: 1100px;
@@ -26,7 +26,7 @@
     width: 100%;
     z-index: 1100;
     transition: transform 0.4s ease;
-    height: var(--window-inset-top);
+    height: var(--top-inset);
 }
 
 #module-version,

module/webui/styles/search_menu.css

@@ -1,7 +1,7 @@
 .search-menu-container {
     display: flex;
     position: fixed;
-    top: 40px;
+    top: calc(var(--top-inset) + 40px);
     height: 50px;
     width: calc(100% - 20px);
     max-width: 1100px;