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;