Start moving inline CSS to a file, make tracking search button blue

www/assets/css/app.css

@@ -58,6 +58,10 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     background-color: var(--solid-translucent-color);
 }
 
+.background-color-transparent {
+    background-color: transparent;
+}
+
 .page-content-fab-pad {
     padding-bottom: var(--f7-fab-size);
 }
@@ -73,13 +77,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     -webkit-app-region: no-drag;
 }
 
-.maplibregl-map .package-marker {
-    width: 32px;
-    height: 32px;
-    background-image: url(../images/package-icon.png);
-    background-size: contain;
-}
-
 /*
  * Material icons are too big and disrupt the flow of text
  */
@@ -95,12 +92,16 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     font-size: var(--f7-block-font-size);
 }
 
-.card-header.no-hairlines:after {
+.searchbar-icon-button {
-    display: none;
+    pointer-events: auto;
 }
 
-.homepage-card {
+.searchbar-icon-button:after {
-    height: calc(100% - calc(var(--f7-card-margin-vertical) * 2));
+    color: var(--f7-navbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));
+}
+
+.card-header.no-hairlines:after {
+    display: none;
 }
 
 .no-animation * {
@@ -131,59 +132,6 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     }
 }
 
-.signature-wrapper {
-    background-color: white;
-    border-radius: 10px;
-    position: relative;
-    width: 400px;
-    max-width: 100%;
-    height: 200px;
-    margin: 0 auto;
-    border: 1px solid rgba(0,0,0,0.5);
-    /* fix bug on iOS where image sticks out right side and makes entire page scroll horiz. */
-    overflow: hidden;
-}
-
-.signature-wrapper img {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-}
-
-.signature-wrapper canvas {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 400px;
-    max-width: 95vw;
-    height: 200px;
-}
-
-.signature-wrapper #signatureClearBtn {
-    display: block;
-    position: absolute;
-    right: 0;
-    top: 0;
-    padding: 10px;
-}
-
-.signature-wrapper #signatureUndoBtn {
-    display: block;
-    position: absolute;
-    right: 40px;
-    top: 0;
-    padding: 10px;
-}
-
-#noticeslip-pay-popup {
-    background: var(--f7-page-bg-color);
-}
-
-#noticeslip-pay-popup #noticeslip-stripe-elements {
-    background-color: white;
-    padding: 1em;
-    border-radius: 10px;
-}
 
 .pointercursor {
     cursor: pointer;
@@ -209,23 +157,7 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     padding-top: calc(var(--f7-navbar-height) * 1.5);
 }
 
-.maplibregl-popup-content {
-    color: var(--f7-text-color);
-    background-color: var(--f7-page-bg-color);
-}
 
-.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
-    border-bottom-color: var(--f7-page-bg-color);
-}
-.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
-    border-top-color: var(--f7-page-bg-color);
-}
-.maplibregl-popup-anchor-left .maplibregl-popup-tip {
-    border-right-color: var(--f7-page-bg-color);
-}
-.maplibregl-popup-anchor-right .maplibregl-popup-tip {
-    border-left-color: var(--f7-page-bg-color);
-}
 
 .list.basic-list li {
     padding-top: calc(var(--f7-list-item-min-height) / 4);
@@ -253,35 +185,3 @@ file, You can obtain one at http://mozilla.org/MPL/2.0/.
     transform-origin: 50% 100%;
     transform: scaleY(calc(1 / var(--f7-device-pixel-ratio)));
 }
-
-#trackMapContainer {
-    margin: 0;
-    min-height: 200px;
-    max-height: 500px;
-    height: 30vh;
-}
-
-#receiptvieweriframe {
-    width: 100%;
-    height: calc(100% - var(--f7-navbar-height));
-    border: 0;
-    padding: 0;
-    margin: 0;
-}
-
-html.md #track-page-tabbar .tabbar-label {
-    margin-top: 0.2em;
-}
-
-@media all and (min-width: 1024px) {
-    #trackMapContainer {
-        height: calc(calc(100vh - calc(var(--f7-list-margin-vertical) * 2)) - var(--f7-navbar-height));
-        min-height: none;
-        max-height: none;
-        margin: var(--f7-list-margin-vertical) 0;
-    }
-    #trackResultContainer ul {
-        height: calc(calc(100vh - calc(var(--f7-list-margin-vertical) * 2)) - var(--f7-navbar-height));
-        overflow-y: auto;
-    }
-}

www/assets/css/customstyles.css

@@ -0,0 +1,151 @@
+/*
+This Source Code Form is subject to the terms of the Mozilla Public
+License, v. 2.0. If a copy of the MPL was not distributed with this
+file, You can obtain one at http://mozilla.org/MPL/2.0/.
+*/
+
+
+/*
+
+    Homepage
+
+*/
+.homepage-card {
+    height: calc(100% - calc(var(--f7-card-margin-vertical) * 2));
+}
+
+/*
+
+    Receipt viewer
+
+*/
+
+#receiptvieweriframe {
+    width: 100%;
+    height: calc(100% - var(--f7-navbar-height));
+    border: 0;
+    padding: 0;
+    margin: 0;
+}
+
+
+/*
+
+    Tracking page
+
+*/
+html.md #track-page-tabbar .tabbar-label {
+    margin-top: 0.2em;
+}
+
+#track-page-tabbar {
+    background-color: var(--translucent-color);
+}
+
+#trackMapContainer {
+    margin: 0;
+    min-height: 200px;
+    max-height: 500px;
+    height: 30vh;
+}
+
+@media all and (min-width: 1024px) {
+    #trackMapContainer {
+        height: calc(calc(100vh - calc(var(--f7-list-margin-vertical) * 2)) - var(--f7-navbar-height));
+        min-height: none;
+        max-height: none;
+        margin: var(--f7-list-margin-vertical) 0;
+    }
+    #trackResultContainer ul {
+        height: calc(calc(100vh - calc(var(--f7-list-margin-vertical) * 2)) - var(--f7-navbar-height));
+        overflow-y: auto;
+    }
+}
+
+/*
+
+    Map
+
+*/
+.maplibregl-popup-content {
+    color: var(--f7-text-color);
+    background-color: var(--f7-page-bg-color);
+}
+
+.maplibregl-popup-anchor-top .maplibregl-popup-tip, .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .maplibregl-popup-anchor-top-right .maplibregl-popup-tip {
+    border-bottom-color: var(--f7-page-bg-color);
+}
+.maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip {
+    border-top-color: var(--f7-page-bg-color);
+}
+.maplibregl-popup-anchor-left .maplibregl-popup-tip {
+    border-right-color: var(--f7-page-bg-color);
+}
+.maplibregl-popup-anchor-right .maplibregl-popup-tip {
+    border-left-color: var(--f7-page-bg-color);
+}
+.maplibregl-map .package-marker {
+    width: 32px;
+    height: 32px;
+    background-image: url(../images/package-icon.png);
+    background-size: contain;
+}
+
+/*
+
+    Signature box
+
+*/
+.signature-wrapper {
+    background-color: white;
+    border-radius: 10px;
+    position: relative;
+    width: 400px;
+    max-width: 100%;
+    height: 200px;
+    margin: 0 auto;
+    border: 1px solid rgba(0,0,0,0.5);
+    /* fix bug on iOS where image sticks out right side and makes entire page scroll horiz. */
+    overflow: hidden;
+}
+
+.signature-wrapper img {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+}
+
+.signature-wrapper canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 400px;
+    max-width: 95vw;
+    height: 200px;
+}
+
+.signature-wrapper #signatureClearBtn {
+    display: block;
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: 10px;
+}
+
+.signature-wrapper #signatureUndoBtn {
+    display: block;
+    position: absolute;
+    right: 40px;
+    top: 0;
+    padding: 10px;
+}
+
+#noticeslip-pay-popup {
+    background: var(--f7-page-bg-color);
+}
+
+#noticeslip-pay-popup #noticeslip-stripe-elements {
+    background-color: white;
+    padding: 1em;
+    border-radius: 10px;
+}

www/index.html

@@ -20,6 +20,7 @@
     <link rel="stylesheet" href="assets/fonts/roboto/Roboto.css" />
     <link rel="stylesheet" href="assets/fonts/roboto-mono/Roboto_Mono.css" />
     <link rel="stylesheet" href="assets/css/tablet.css" />
+    <link rel="stylesheet" href="assets/css/customstyles.css" />
 
     <script src="cordova.js"></script>
 </head>

www/pages/account.html

@@ -24,7 +24,7 @@
                 <div class="card margin">
                     <div class="card-content text-align-center padding-vertical">
 
-                        <div id="loadingaccountbox" style="text-align: center;">
+                        <div id="loadingaccountbox" class="text-align-center">
                             <div class="preloader"></div>
                             <br /><br />
                             Loading...

www/pages/track.html

@@ -25,7 +25,7 @@
                     <div class="searchbar-inner">
                         <div class="searchbar-input-wrap">
                             <input type="search" name="trackingcode" id="trackingcode" required validate data-error-message=" " placeholder="Tracking Code" autocomplete="off" autocorrect="off" autocapitalize="off" />
-                            <a class="searchbar-icon" id="brokenscannercodeadd" onclick="openTrackingInfoPage($('input[name=\'trackingcode\']').val())" style="pointer-events: auto;" href="#" class="hapticbtn"></a>
+                            <a class="searchbar-icon searchbar-icon-button hapticbtn" id="brokenscannercodeadd" onclick="openTrackingInfoPage($('input[name=\'trackingcode\']').val())" href="#"></a>
                             <span class="input-clear-button"></span>
                         </div>
                         <span class="searchbar-disable-button if-not-aurora">Cancel</span>
@@ -35,7 +35,7 @@
         </div>
     </div>
 
-    <div class="toolbar tabbar-labels toolbar-bottom" id="track-page-tabbar" style="background-color: var(--translucent-color);">
+    <div class="toolbar tabbar-labels toolbar-bottom" id="track-page-tabbar">
         <div class="toolbar-inner">
             <a href="#tracking-history-list" class="tab-link tab-link-active">
                 <i class="far fa-history"></i>
@@ -58,7 +58,7 @@
             <div id="tracking-history-list" class="tab tab-active">
                 <div class="page-content">
                     <div class="list noselect">
-                        <ul style="background-color: transparent;">
+                        <ul class="background-color-transparent">
 
                         </ul>
                     </div>
@@ -67,7 +67,7 @@
             <div id="tracking-account-list" class="tab">
                 <div class="page-content">
                     <div class="list noselect">
-                        <ul style="background-color: transparent;">
+                        <ul class="background-color-transparent">
                             <li class="item-content">
                                 <div class="item-inner justify-content-center">
                                     <div class="item-title">Loading...</div>
@@ -80,7 +80,7 @@
             <div id="tracking-multi-list" class="tab">
                 <div class="page-content">
                     <div class="list noselect">
-                        <ul style="background-color: transparent;">
+                        <ul class="background-color-transparent">
                             <li class="item-content">
                                 <div class="item-inner justify-content-center">
                                     <div class="item-title">Loading...</div>