HelenaExpressApp/www/assets/css/customstyles.css

/*
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));
}

#scan-barcode-fab a svg {
    height: calc(var(--f7-fab-size) / 2);
    width: calc(var(--f7-fab-size) / 2);
    fill: var(--f7-fab-text-color);
}

#home-page-tabbar {
    background-color: var(--translucent-color);
}

#home-page-tabbar .toolbar-inner {
    justify-content: start;
}

#home-page-tabbar-logo {
    height: calc(var(--f7-toolbar-height) / 1.5);
    margin-left: auto; /* make it go all the way to the right https://stackoverflow.com/a/36606694 */
}

.drop-shadow {
    filter: drop-shadow(0 0 0.25rem rgba(0, 0, 0, .75));
}

/*

    Receipt viewer

*/

#receiptvieweriframe {
    width: 100%;
    height: calc(100% - var(--f7-navbar-height));
    border: 0;
    padding: 0;
    margin: 0;
}

/*

    Service Area page

*/

:root {
    --location-map-height: calc(100vh - calc(var(--f7-navbar-height) + var(--f7-toolbar-height)));
}

.md, .aurora {
    --service-area-map-height: calc(100vh - calc(var(--f7-navbar-height) + var(--f7-toolbar-height)));
}

.ios {
    --service-area-map-height: calc(100vh - calc(var(--f7-navbar-height) + calc(var(--f7-toolbar-height) * 2)));
}

#mapbox-servicearea {
    width: 100%;
    height: var(--service-area-map-height);
}

#mapbox-locations {
    width: 100%;
    height: var(--location-map-height);
}

#locationInfoModal .sheet-modal-inner {
    overflow-y: auto;
}

#locationInfoModalContainer {
    margin-top: 1em;
}

#mapbox-locations.sheet-open {
    height: calc(var(--location-map-height) - var(--f7-sheet-height));
}

/*

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

/*

    Crypto

*/

#paymentRequestQRCodeContainer img {
    padding: 2em;
    background-color: white;
    max-width: 100%;
}

/*

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

/*

    Request Pickup

*/

.item-inner.no-line-after:after {
    height: 0px;
}

/*

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