web: improvements for android web app

- reduced padding when installed as standalone
- now attempting to color the navigation bar

src/front/cobalt.css

@@ -1171,7 +1171,7 @@ button:active,
     .tab-content-settings,
     #picker-holder {
         padding-bottom: calc(var(--padding) + 3.5rem);
-        padding-top: calc(var(--padding) + 3rem);
+        padding-top: calc(var(--padding) + 3rem - var(--padding-small));
     }
     #footer,
     .popup-tabs {
@@ -1191,7 +1191,7 @@ button:active,
     }
     .tab-content-settings,
     #tab-about-about .popup-content-inner {
-        padding-top: 5rem;
+        padding-top: calc(5rem - var(--padding-small));
     }
 }
 @media screen and (max-width: 535px) and (display-mode: standalone) {
@@ -1252,4 +1252,18 @@ button:active,
             calc(4rem - var(--padding) + var(--padding-small))
         );
     }
+
+    .android .popup-header {
+        padding-top: var(--padding);
+    }
+    .android .popup-content-inner,
+    .android .tab-content-settings,
+    .android #picker-holder {
+        padding-bottom: calc(var(--padding) + 3.5rem);
+        padding-top: calc(var(--padding) + 3rem - var(--padding-small));
+    }
+    .android .tab-content-settings,
+    .android #tab-about-about .popup-content-inner {
+        padding-top: calc(5rem - var(--padding-small));
+    }
 }

src/front/cobalt.js

@@ -1,5 +1,6 @@
 const ua = navigator.userAgent.toLowerCase();
 const isIOS = ua.includes("iphone os") || (ua.includes("mac os") && navigator.maxTouchPoints > 0);
+const isAndroid = ua.includes("android");
 const isMobile = ua.includes("android") || isIOS;
 const isSafari = ua.includes("safari/");
 const isFirefox = ua.includes("firefox/");
@@ -167,6 +168,7 @@ const changeStatusBarColor = () => {
     }
 
     document.querySelector('meta[name="theme-color"]').setAttribute('content', colors[state]);
+    document.querySelector('meta[name="background-color"]').setAttribute('content', colors[state]);
 }
 const detectColorScheme = () => {
     document.documentElement.setAttribute("data-theme", preferredColorScheme());
@@ -626,6 +628,9 @@ const loadSettings = () => {
     if (!isMobile) {
         eid("cobalt-body").classList.add('desktop');
     }
+    if (isAndroid) {
+        eid("cobalt-body").classList.add('android');
+    }
     if (isIOS) {
         eid("download-switcher")
             .querySelector(".explanation")

src/modules/pageRender/page.js

@@ -69,7 +69,6 @@ export default function(obj) {
         <meta property="og:image" content="${env.webURL}icons/generic.png">
         <meta name="title" content="${t("AppTitleCobalt")}">
         <meta name="description" content="${t('AboutSummary')}">
-        <meta name="theme-color" content="#000000">
         <meta name="twitter:card" content="summary">
         
         <meta name="apple-mobile-web-app-capable" content="yes">
@@ -86,6 +85,9 @@ export default function(obj) {
         <link rel="stylesheet" href="fonts/notosansmono.css">
         <link rel="stylesheet" href="cobalt.css">
 
+        <meta name="theme-color" content="#000000">
+        <meta name="background-color" content="#000000">
+
         <link rel="preload" href="fonts/notosansmono.css" as="style">
         <link rel="preload" href="assets/meowbalt/error.png" as="image">
         <link rel="preload" href="assets/meowbalt/question.png" as="image">