diff --git a/module/webui/index.html b/module/webui/index.html
index aa94b00..3b44c37 100644
--- a/module/webui/index.html
+++ b/module/webui/index.html
@@ -5,7 +5,6 @@
TrickyAddon
-
diff --git a/module/webui/scripts/main.js b/module/webui/scripts/main.js
index d1ab407..570d4c6 100644
--- a/module/webui/scripts/main.js
+++ b/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) + 60%) * -1))';
- } else {
- prompt.style.transform = 'translateY(-60%)';
- }
+ prompt.style.transform = 'translateY(calc((var(--window-inset-bottom, 0px) + 60%) * -1))';
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) {
- floatingCard.style.transform = 'translateY(0)';
- } else if (typeof ksu !== 'undefined' && ksu.mmrl) {
- floatingCard.style.transform = 'translateY(calc(var(--window-inset-bottom) + 120px))';
- } else {
- floatingCard.style.transform = 'translateY(120px)';
- }
+ if (!hide) floatingCard.style.transform = 'translateY(0)';
+ else floatingCard.style.transform = 'translateY(calc(var(--window-inset-bottom, 0px) + 120px))';
}
// Function to apply ripple effect
diff --git a/module/webui/styles/global.css b/module/webui/styles/global.css
index bff0465..3b4590e 100644
--- a/module/webui/styles/global.css
+++ b/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-bottom: var(--window-inset-bottom);
+ padding-top: var(--top-inset);
+ 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;
diff --git a/module/webui/styles/header.css b/module/webui/styles/header.css
index 8388a11..f9227dd 100644
--- a/module/webui/styles/header.css
+++ b/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,
diff --git a/module/webui/styles/search_menu.css b/module/webui/styles/search_menu.css
index ff767e9..a0de85a 100644
--- a/module/webui/styles/search_menu.css
+++ b/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;