2022-02-16 19:13:48 -05:00
|
|
|
/**
|
2023-11-27 19:51:46 -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.
|
|
|
|
*/
|
2022-10-29 11:55:33 -04:00
|
|
|
: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);
|
2023-11-27 19:51:46 -05:00
|
|
|
--error-message-color: #CD5C08;
|
2023-03-25 08:55:32 -04:00
|
|
|
--error-message-bg: grey;
|
2023-11-27 19:51:46 -05:00
|
|
|
--border-width: 3px;
|
2023-11-25 22:06:43 -05:00
|
|
|
--cell-margin: 1em;
|
2023-11-27 19:51:46 -05:00
|
|
|
--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;
|
2023-11-27 19:51:46 -05:00
|
|
|
--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);
|
|
|
|
}
|
2022-10-29 11:55:33 -04:00
|
|
|
}
|
2023-11-27 19:51:46 -05:00
|
|
|
**/
|
2022-10-29 11:55:33 -04:00
|
|
|
|
2023-11-27 19:51:46 -05:00
|
|
|
/** 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;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2023-11-27 19:51:46 -05:00
|
|
|
/** Resets **/
|
|
|
|
body {
|
|
|
|
margin: 0px;
|
|
|
|
padding: 0px;
|
|
|
|
background-color: var(--header-bg);
|
|
|
|
font-size: var(--font-size)
|
2022-04-26 15:21:29 -04:00
|
|
|
}
|
|
|
|
|
2023-11-27 19:51:46 -05:00
|
|
|
body, body * {
|
|
|
|
color: black;
|
2022-10-29 10:15:22 -04:00
|
|
|
}
|
|
|
|
|
2023-11-27 19:51:46 -05:00
|
|
|
a {
|
|
|
|
text-decoration: none;
|
2022-10-29 11:55:33 -04:00
|
|
|
}
|
|
|
|
|
2023-12-04 14:48:31 -05:00
|
|
|
/** layout classes **/
|
2023-11-27 19:51:46 -05:00
|
|
|
|
|
|
|
.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
|
|
|
}
|
|
|
|
|
2023-11-27 19:51:46 -05: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 **/
|
2023-11-27 19:51:46 -05:00
|
|
|
nav li {
|
|
|
|
margin-right: var(--nav-margin);
|
|
|
|
}
|
|
|
|
|
2023-12-04 15:05:45 -05:00
|
|
|
/** color and borders **/
|
2023-11-27 19:51:46 -05:00
|
|
|
.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 **/
|
2023-11-27 19:51:46 -05:00
|
|
|
.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);
|
2022-10-29 11:55:33 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
nav>h1 {
|
|
|
|
margin: 0px;
|
|
|
|
margin-left: 3px;
|
|
|
|
margin-right: 3px;
|
|
|
|
display: inline;
|
|
|
|
vertical-align: middle;
|
|
|
|
text-align: left;
|
2023-11-27 19:51:46 -05:00
|
|
|
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);
|
2022-10-29 11:55:33 -04:00
|
|
|
}
|
|
|
|
|
|
|
|
.destructive {
|
2023-11-27 19:51:46 -05:00
|
|
|
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
|
|
|
|
}
|
2023-11-25 22:06:43 -05:00
|
|
|
}
|