kitchen/web/static/app.css

/**
 * Copyright 2023 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;
    --notification-font-size: calc(var(--font-size) / 2);
    --error-message-color: #CD5C08;
    --error-message-bg: grey;
    --border-width: 3px;
    --cell-margin: 1em;
    --nav-margin: 2em;
    --main-color: #A9907E;
    --light-accent: #F3DEBA;
    --dark-accent: #ABC4AA;
    --heavy-accent: #675D50;
    --text-color: black;
    --menu-bg: var(--main-color);
    --header-bg: var(--light-accent);
    --font-size: 20px;
    --cell-target: 30%;
}

/** TODO(jwall): Dark color scheme?
@media (prefers-color-scheme: dark) {
    :root {
      --text-color: white;
      --menu-bg: var(--main-color);
      --header-bg: var(--dark-accent);
    }
}
**/

/** TODO(jwall): Seperate these out into composable classes **/
@media print {

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

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

/** Resets **/
body {
    margin: 0px;
    padding: 0px;
    background-color: var(--header-bg);
    font-size: var(--font-size)
}

body, body * {
    color: black;
}

a {
    text-decoration: none;
}

/** Our specific page elements **/

/** TODO(jwall): Move these onto the html elements themselves. **/
.column-flex {
  display: flex;
  flex-direction: column;
}

.row-flex {
  display: flex;
  flex-direction: row;
}

.flex-item-grow {
  flex: 1 0 auto;
}

.flex-item-shrink {
  flex: 0 1 auto;
}

.flex-wrap-start {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
}

.expand-height {
  height: 100%;
  min-height: fit-content;
}

.align-center {
    align-items: center;
}

.align-stretch {
    align-items: stretch;
}

.width-third {
    min-width: fit-content;
    width: 33%;
}

.inline-block {
    display: inline-block;
}

.block {
    display: block;
}

/** nav elements **/
nav ul {
    list-style-type: none;
}

nav li {
    margin-right: var(--nav-margin);
}

nav li a::after {
    content: '| ";
}

nav li a {
    color: black;
}

.header-bg {
    background-color: var(--header-bg);
}

.heavy-bottom-border {
    border-bottom: var(--border-width) solid var(--heavy-accent)
}

.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;
    color: black;
}

main {
    border-bottom-left-radius: 1em;
    padding: 1em;
    width: 100%;
    overflow-block: scroll;
}

.cell {
    margin: 1em;
    width: var(--cell-target);
}

.justify-end {
    justify-content: flex-end;
}

.menu-bg {
  background-color: var(--menu-bg);
}

.pad-left {
    padding-left: .5em;
}

.app nav li {
    margin-bottom: var(--nav-margin);
}

.destructive {
    background-color: #CD5C08 !important;
    font-weight: bold;
}

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