kitchen/web/static/app.css

/**
 * Copyright 2022 Jeremy Wall
 * 
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 * 
 *     http://www.apache.org/licenses/LICENSE-2.0
 * 
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */
:root {
    --tab-border-color: black;
    --tab-border-width: 3px;
    --tab-border-style: solid;
    --tab-border-radius: 15px;
    --unicode-button-size: 2em;
    --toast-anim-duration: 3s;
    --toast-travel-distance: 0;
    --notification-font-size: calc(var(--font-size) / 2);
    --error-message-color: rgba(255, 98, 0, 0.797);
    --error-message-bg: grey;
}

@media (prefers-reduced-motion: no-preference) {
    .gui-toast {
        --toast-travel-distance: 5vh;
    }
}


@media print {

    .no-print,
    .no-print * {
        display: none !important;
    }

    .page-breaker {
        page-break-after: always;
    }
}

@media (min-width: 768px) {
    :root {
        --font-size: 35px;
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --tab-border-color: lightgrey;
    }
}

body {
    padding: 10px;
    margin: 10px;
}

nav>ul.tabs>li {
    border-style: none;
}

nav>ul.tabs>li.selected {
    border-style: none;
    border-bottom-style: var(--tab-border-style);
    border-bottom-color: var(--tab-border-color);
    border-bottom-width: var(--tab-border-width);
}

nav>h1 {
    margin: 0px;
    margin-left: 3px;
    margin-right: 3px;
    display: inline;
    vertical-align: middle;
    text-align: left;
}

.destructive {
    background-color: firebrick !important;
}

.item-count-inc-dec {
    font-size: var(--unicode-button-size);
}

#toast-container {
    position: fixed;
    z-index: 1;
    inset-block-start: 0;
    inset-inline: 0;
    padding-block-start: 5vh;

    display: grid;
    justify-items: center;
    justify-content: center;
    gap: 1vh;

    font-size: var(--notification-font-size);

    pointer-events: none;
}

.toast-container .error {
    color: var(--error-message-color);
    background-color: var(--error-message-bg);
}

.toast {
    max-inline-size: min(25ch, 90vw);
    padding-block: .5ch;
    padding-inline: 1ch;
    border-radius: 3px;

    will-change: transform;
    animation:
        fade-in 1s ease,
        fade-out .5s ease var(--toast-anim-duration);
}

@keyframes fade-in {
    from {
        opacity: 0
    }
}

@keyframes fade-out {
    to {
        opacity: 0
    }
}