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

master
Skylar Ittner 2 years ago
parent 3d70dc2289
commit aa3a602a2b

@ -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 {
display: none;
.searchbar-icon-button {
pointer-events: auto;
}
.searchbar-icon-button:after {
color: var(--f7-navbar-link-color,var(--f7-bars-link-color,var(--f7-theme-color)));
}
.homepage-card {
height: calc(100% - calc(var(--f7-card-margin-vertical) * 2));
.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;
}
}

@ -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;
}

@ -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>

@ -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...

@ -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>

Loading…
Cancel
Save