Start moving inline CSS to a file, make tracking search button blue
This commit is contained in:
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;
|
||||
}
|
||||
|
||||
.homepage-card {
|
||||
height: calc(100% - calc(var(--f7-card-margin-vertical) * 2));
|
||||
.searchbar-icon-button:after {
|
||||
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;
|
||||
}
|
||||
}
|
||||
151
www/assets/css/customstyles.css
Normal file
151
www/assets/css/customstyles.css
Normal file
@ -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…
x
Reference in New Issue
Block a user