1 files changed, 69 insertions, 6 deletions

diff --git a/assets/styles.css b/assets/styles.css
index a409a09..0ad2afc 100644
--- a/assets/styles.css
+++ b/assets/styles.css
@@ -2,6 +2,11 @@ iframe {
     border: none;
 }
 
+body.native #lyrics-page {
+    top: calc(65px + var(--android-status-bar)) !important;
+    background-color: white !important;
+}
+
 * {
     user-select: none;
     -webkit-user-drag: none;
@@ -121,6 +126,16 @@ iframe {
     }
 }
 
+@media (min-height: 64px) {
+    .navigation-item-desktop {
+        display: block;
+    }
+
+    .navigation-item-mobile {
+        display: none;
+    }
+}
+
 @media (max-width: 863px) {
     #player.bg-white.desktop-player.mobilified .container {
         grid-template-columns: 1fr !important;
@@ -177,6 +192,10 @@ iframe {
         border-top: 1px solid rgba(0, 0, 0, .25);
     }
 
+    .desktop-title {
+        display: none !important;
+    }
+
     iframe#player {
         position: fixed !important;
         top: unset !important;
@@ -245,22 +264,26 @@ iframe {
     }
 
     #ui, #lyrics-page {
-        top: var(--android-status-bar) !important;
+        top: calc(var(--android-status-bar) + 49px) !important;
         bottom: calc(97px + var(--android-navigation-bar)) !important;
         left: 0 !important;
         right: 0 !important;
         width: 100vw !important;
-        height: calc(100vh - 97px - var(--android-navigation-bar) - var(--android-status-bar)) !important;
+        height: calc(100vh - 97px - var(--android-navigation-bar) - var(--android-status-bar) - 49px) !important;
+    }
+
+    #mobile-navbar {
+        display: grid !important;
     }
 
     iframe#lyrics-page {
         display: block !important;
         z-index: 100000 !important;
-        top: 96px !important;
+        top: calc(96px + var(--android-status-bar)) !important;
         left: 20px !important;
         right: 20px !important;
         width: calc(100vw - 40px) !important;
-        height: calc(100vh - 276px) !important;
+        height: calc(100vh - 276px - var(--android-status-bar) - var(--android-navigation-bar)) !important;
         opacity: 0;
         pointer-events: none;
         transition: opacity 200ms !important;
@@ -269,7 +292,7 @@ iframe {
     iframe#lyrics-page.mobile-show {
         transition: opacity 200ms linear 500ms !important;
         opacity: 1;
-        pointer-events: auto !important;
+        pointer-events: none !important;
     }
 }
 
@@ -365,12 +388,20 @@ iframe {
 }
 
 @media (max-height: 64px) {
+    .navigation-item-desktop {
+        display: none;
+    }
+
+    .navigation-item-mobile {
+        display: block;
+    }
+
     #navigation-left, #navigation-version {
         display: none !important;
     }
 
     #navigation-container {
-        grid-template-columns: repeat(6, 1fr) !important;
+        grid-template-columns: repeat(4, 1fr) !important;
         display: grid !important;
         margin-top: 2px;
     }
@@ -450,4 +481,36 @@ body.web {
 .modal-dialog {
     margin-top: calc(1.75rem + var(--android-status-bar));
     margin-bottom: calc(1.75rem + var(--android-navigation-bar));
+}
+
+.has-navigation {
+    padding-top: 32px;
+}
+
+#ui-back-button:hover {
+    opacity: .75;
+}
+
+#ui-back-button:active {
+    opacity: .5;
+}
+
+#filter {
+    background-color: rgba(255, 255, 255, .25) !important;
+}
+
+.mobile-ui.has-navigation {
+    padding-top: 0 !important;
+}
+
+.mobile-ui #ui-navigation {
+    display: none !important;
+}
+
+.mist-stella {
+    display: none !important;
+}
+
+.tooltip {
+    z-index: 99999 !important;
 }
\ No newline at end of file