kitchen/web/static/app.css

256 lines
4.4 KiB
CSS
Raw Normal View History

2022-02-16 19:13:48 -05:00
/**
* Copyright 2023 Jeremy Wall
2022-02-16 19:13:48 -05:00
*
* 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;
2023-01-11 15:38:32 -05:00
--unicode-button-size: 2em;
2023-03-25 08:55:32 -04:00
--toast-anim-duration: 3s;
--notification-font-size: calc(var(--font-size) / 2);
--error-message-color: #CD5C08;
2023-03-25 08:55:32 -04:00
--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);
2023-12-04 15:05:45 -05:00
--font-size: 1.2em;
2023-12-04 14:48:31 -05:00
--menu-font-size: 1.5em;
--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 **/
2022-02-16 19:13:48 -05:00
@media print {
2022-08-24 18:32:43 -04:00
2022-02-16 19:13:48 -05:00
.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;
2022-10-29 10:15:22 -04:00
}
a {
text-decoration: none;
}
2023-12-04 14:48:31 -05:00
/** layout classes **/
.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;
2022-10-29 10:15:22 -04:00
}
.block {
display: block;
}
2023-12-04 15:05:45 -05:00
.no-list {
list-style-type: none;
}
2023-12-04 14:48:31 -05:00
/** Typography classes **/
.menu-font {
font-size: var(--menu-font-size);
}
2023-12-04 15:05:45 -05:00
/** element specific styling **/
nav li {
margin-right: var(--nav-margin);
}
2023-12-04 15:05:45 -05:00
/** color and borders **/
.header-bg {
background-color: var(--header-bg);
}
.heavy-bottom-border {
border-bottom: var(--border-width) solid var(--heavy-accent)
}
2023-12-04 15:05:45 -05:00
/** Situational **/
.selected {
2023-01-05 13:09:12 -05:00
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;
2023-01-11 15:38:32 -05:00
}
.item-count-inc-dec {
font-size: var(--unicode-button-size);
2023-03-25 08:55:32 -04:00
}
#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
}
}