Esa Kataja
3564d74c39
The brand row and theme toggle sit on their own background with a hairline under it, so the header reads as an object rather than text floating on the page. The page title and day switcher stay on the page background: they are content, not chrome. The colour is its own --header variable rather than a reuse of --card, so the header can be recoloured without dragging every card along when the palette gets overhauled. The theme-color meta tags match it, so on a phone the browser chrome continues the header instead of butting a different shade against it; those need literal hex, so each file points at the other.
509 lines
12 KiB
CSS
509 lines
12 KiB
CSS
/* Foodster. Hand-written, no framework, no build step.
|
|
Themes come from color-scheme + light-dark(), which also gets native form
|
|
controls, scrollbars and focus rings themed for free. */
|
|
|
|
:root {
|
|
color-scheme: light dark;
|
|
|
|
--paper: light-dark(#ECEDE8, #121316);
|
|
--card: light-dark(#FFFFFF, #1C1E22);
|
|
--sunk: light-dark(#E3E4DE, #17181B);
|
|
--ink: light-dark(#14161A, #E9EAE5);
|
|
--muted: light-dark(#6B6F6A, #8B8F89);
|
|
--line: light-dark(#D5D6D0, #2C2F34);
|
|
--accent: light-dark(#15616D, #58C6D2);
|
|
--onacc: light-dark(#FFFFFF, #0C1417);
|
|
|
|
/* Category colours, keyed by the Finnish names used in the UI. */
|
|
--liha: light-dark(#AF4230, #DE7561);
|
|
--kana: light-dark(#B57E10, #DFA83B);
|
|
--kala: light-dark(#25688F, #63AAD8);
|
|
--kasvis: light-dark(#457A3C, #82BE7A);
|
|
|
|
/* Its own name rather than reusing --card, so the header can be recoloured
|
|
later without dragging every card with it. Keep the theme-color meta tags
|
|
in views.templ in step: those need literal hex. */
|
|
--header: light-dark(#FFFFFF, #1C1E22);
|
|
|
|
--tap: 48px; /* minimum touch target */
|
|
}
|
|
|
|
/* Dark is the default; theme.js swaps the attribute from localStorage. */
|
|
html[data-theme="light"] { color-scheme: only light; }
|
|
html[data-theme="dark"] { color-scheme: only dark; }
|
|
|
|
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--paper);
|
|
color: var(--ink);
|
|
font-family: system-ui, sans-serif;
|
|
font-size: 16px;
|
|
line-height: 1.45;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
button, input, select { font: inherit; }
|
|
:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }
|
|
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
|
|
|
|
/* The header is the brand and the theme toggle, and nothing else. The page
|
|
title below it is content, so it stays on the page background. */
|
|
.brandbar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
padding: 10px 16px;
|
|
background: var(--header);
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.brand {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.03em;
|
|
}
|
|
.brand img { display: block; }
|
|
|
|
/* One button showing the theme that is on: moon while dark, sun while light.
|
|
Both icons ship in the markup and CSS picks one, so the server never needs
|
|
to know what this device chose. */
|
|
.themetoggle {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 40px;
|
|
height: 40px;
|
|
margin-left: auto;
|
|
padding: 0;
|
|
background: var(--sunk);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
color: var(--ink);
|
|
cursor: pointer;
|
|
}
|
|
.themetoggle:hover { color: var(--accent); border-color: var(--accent); }
|
|
.themetoggle svg { display: block; }
|
|
html[data-theme="dark"] .themetoggle .i-sun { display: none; }
|
|
html[data-theme="light"] .themetoggle .i-moon { display: none; }
|
|
|
|
.appbar {
|
|
padding: 16px 16px 4px;
|
|
}
|
|
.appbar h2 { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
|
|
.appbar .meta { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
|
|
|
|
.pad { padding: 16px 16px calc(80px + env(safe-area-inset-bottom)); }
|
|
.muted { color: var(--muted); }
|
|
|
|
/* Bottom bar: primary navigation belongs in the thumb zone on a phone. */
|
|
.tabbar {
|
|
position: fixed;
|
|
inset: auto 0 0 0;
|
|
display: flex;
|
|
background: var(--card);
|
|
border-top: 1px solid var(--line);
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.tabbar a {
|
|
flex: 1;
|
|
min-height: var(--tap);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-decoration: none;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
}
|
|
.tabbar a[aria-current] { color: var(--accent); }
|
|
|
|
.dot {
|
|
width: 9px;
|
|
height: 9px;
|
|
border-radius: 2px;
|
|
flex: none;
|
|
display: inline-block;
|
|
}
|
|
.d-liha { background: var(--liha); }
|
|
.d-kana { background: var(--kana); }
|
|
.d-kala { background: var(--kala); }
|
|
.d-kasvis { background: var(--kasvis); }
|
|
.d-sek {
|
|
background: conic-gradient(var(--liha) 0 25%, var(--kana) 25% 50%,
|
|
var(--kala) 50% 75%, var(--kasvis) 75% 100%);
|
|
}
|
|
|
|
/* Day switcher */
|
|
.dayseg { display: flex; gap: 6px; margin-top: 11px; flex-wrap: wrap; }
|
|
.dayseg .seg {
|
|
min-height: 42px;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0 16px;
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
background: var(--card);
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
font-size: 14px;
|
|
font-weight: 600;
|
|
}
|
|
.dayseg .seg[aria-current] {
|
|
background: var(--ink);
|
|
border-color: var(--ink);
|
|
color: var(--paper);
|
|
}
|
|
.daypick { display: flex; gap: 6px; flex: 1; min-width: 190px; }
|
|
.daypick input {
|
|
flex: 1;
|
|
min-width: 0;
|
|
font-size: 16px;
|
|
background: var(--card);
|
|
color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
padding: 0 10px;
|
|
}
|
|
.daypick button {
|
|
background: var(--card);
|
|
color: var(--muted);
|
|
border: 1px solid var(--line);
|
|
border-radius: 9px;
|
|
padding: 0 14px;
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Tap board */
|
|
.searchrow { margin-bottom: 14px; }
|
|
.filter {
|
|
width: 100%;
|
|
min-height: var(--tap);
|
|
font-size: 16px;
|
|
background: var(--card);
|
|
color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
padding: 0 14px;
|
|
}
|
|
.board { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.pill {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
min-height: var(--tap);
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 11px;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
font-weight: 600;
|
|
letter-spacing: -0.022em;
|
|
}
|
|
.pill .n {
|
|
font-family: ui-monospace, monospace;
|
|
font-weight: 400;
|
|
font-size: 10px;
|
|
color: var(--muted);
|
|
}
|
|
.pill.xl { font-size: 22px; padding: 14px 18px; flex: 1 1 100%; }
|
|
.pill.lg { font-size: 18px; padding: 12px 16px; }
|
|
.pill.md { font-size: 15.5px; padding: 11px 14px; }
|
|
.pill.sm { font-size: 14px; padding: 10px 13px; color: var(--muted); }
|
|
|
|
/* Sides step */
|
|
.q { margin: 14px 0 10px; font-size: 13.5px; color: var(--muted); }
|
|
.chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 16px; }
|
|
/* The checkbox stays visible. Colour alone is not a state indicator: with the
|
|
native control hidden there was no way to tell a chip on from a chip off. */
|
|
.chip {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
min-height: 44px;
|
|
padding: 0 15px 0 12px;
|
|
background: var(--sunk);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
font-size: 14.5px;
|
|
cursor: pointer;
|
|
}
|
|
.chip input[type="checkbox"] {
|
|
flex: none;
|
|
width: 19px;
|
|
height: 19px;
|
|
margin: 0;
|
|
accent-color: var(--accent);
|
|
cursor: pointer;
|
|
}
|
|
.chip:has(input:checked) {
|
|
border-color: var(--accent);
|
|
box-shadow: inset 0 0 0 1px var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
.chip:has(input:focus-visible) { outline: 2.5px solid var(--accent); outline-offset: 2px; }
|
|
|
|
/* Logged card */
|
|
.logged .k {
|
|
margin: 0 0 10px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.08em;
|
|
text-transform: uppercase;
|
|
color: var(--accent);
|
|
}
|
|
.logged .nm {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 0 0 3px;
|
|
font-size: 26px;
|
|
font-weight: 700;
|
|
letter-spacing: -0.035em;
|
|
}
|
|
.logged .sd { margin: 0 0 16px; font-size: 14.5px; color: var(--muted); }
|
|
.pair { display: flex; gap: 8px; }
|
|
.pair form { flex: 1; display: flex; }
|
|
.btn {
|
|
flex: 1;
|
|
min-height: var(--tap);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: var(--sunk);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
color: var(--ink);
|
|
text-decoration: none;
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
}
|
|
.btn.del { color: var(--liha); }
|
|
|
|
.ghost {
|
|
display: block;
|
|
width: 100%;
|
|
min-height: var(--tap);
|
|
margin-top: 4px;
|
|
background: none;
|
|
border: 0;
|
|
color: var(--muted);
|
|
font-size: 15px;
|
|
text-align: center;
|
|
line-height: var(--tap);
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
.empty { text-align: center; }
|
|
.empty p { margin: 0 0 8px; }
|
|
.empty .primary { margin-top: 12px; line-height: var(--tap); text-decoration: none; }
|
|
|
|
/* Historia */
|
|
.monthrule {
|
|
margin: 22px 0 5px;
|
|
font-size: 10px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.12em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
/* History sits under the logger on the same page, so whole rows are links. */
|
|
.history { margin-top: 8px; }
|
|
.entry, .gapline {
|
|
display: flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
min-height: var(--tap);
|
|
padding: 14px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
color: inherit;
|
|
text-decoration: none;
|
|
}
|
|
.gapline .act {
|
|
margin-left: auto;
|
|
padding: 0 4px;
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
}
|
|
.gapline { border-bottom-style: dashed; font-size: 13.5px; color: var(--muted); }
|
|
.entry time, .gapline time {
|
|
flex: none;
|
|
min-width: 54px;
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 11px;
|
|
color: var(--muted);
|
|
}
|
|
.entry .nm {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-size: 17px;
|
|
font-weight: 600;
|
|
letter-spacing: -0.025em;
|
|
}
|
|
.entry .sd { margin-top: 1px; font-size: 12.5px; color: var(--muted); }
|
|
.entry .chev {
|
|
margin-left: auto;
|
|
flex: none;
|
|
padding: 0 6px;
|
|
font-size: 19px;
|
|
color: var(--muted);
|
|
text-decoration: none;
|
|
}
|
|
.gapline a {
|
|
margin-left: auto;
|
|
padding: 0 4px;
|
|
color: var(--accent);
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.card {
|
|
background: var(--card);
|
|
border: 1px solid var(--line);
|
|
border-radius: 14px;
|
|
padding: 18px;
|
|
margin-bottom: 16px;
|
|
}
|
|
.card h3 { margin: 0 0 4px; font-size: 18px; letter-spacing: -0.025em; }
|
|
.small { font-size: 13.5px; }
|
|
|
|
.field { display: block; margin: 0 0 14px; }
|
|
.field > span {
|
|
display: block;
|
|
margin-bottom: 6px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.06em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.field textarea,
|
|
.field input[type="file"] {
|
|
width: 100%;
|
|
background: var(--sunk);
|
|
color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
padding: 12px;
|
|
font-size: 16px; /* below 16px iOS zooms on focus */
|
|
}
|
|
.field textarea {
|
|
font-family: ui-monospace, monospace;
|
|
font-size: 13px;
|
|
line-height: 1.4;
|
|
resize: vertical;
|
|
}
|
|
|
|
.primary {
|
|
width: 100%;
|
|
min-height: var(--tap);
|
|
background: var(--accent);
|
|
color: var(--onacc);
|
|
border: 0;
|
|
border-radius: 11px;
|
|
font-size: 16.5px;
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Catalog rows */
|
|
.sechead {
|
|
margin: 26px 0 6px;
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
letter-spacing: 0.09em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
}
|
|
.row {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 11px;
|
|
min-height: var(--tap);
|
|
padding: 11px 0;
|
|
border-bottom: 1px solid var(--line);
|
|
}
|
|
.rowtext { flex: 1; min-width: 0; }
|
|
.rowtext .nm { font-size: 16px; font-weight: 600; letter-spacing: -0.02em; }
|
|
.rowtext .sd { font-size: 12.5px; color: var(--muted); }
|
|
.rowactions { display: flex; align-items: center; gap: 2px; flex: none; }
|
|
.rowactions a, .rowactions button {
|
|
min-width: 40px;
|
|
min-height: 40px;
|
|
padding: 0 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: none;
|
|
border: 0;
|
|
border-radius: 8px;
|
|
color: var(--muted);
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
cursor: pointer;
|
|
}
|
|
.rowactions svg { display: block; }
|
|
.rowactions a:hover { color: var(--accent); }
|
|
.rowactions .del { color: var(--liha); }
|
|
|
|
/* The row asks before a delete happens; an icon is easy to hit by accident. */
|
|
.rowactions.confirming {
|
|
gap: 4px;
|
|
font-size: 13px;
|
|
color: var(--muted);
|
|
}
|
|
.rowactions.confirming > span { padding-right: 2px; }
|
|
.rowactions.confirming .del { color: var(--liha); font-weight: 700; }
|
|
|
|
.field input[type="text"] {
|
|
width: 100%;
|
|
min-height: var(--tap);
|
|
background: var(--sunk);
|
|
color: var(--ink);
|
|
border: 1px solid var(--line);
|
|
border-radius: 10px;
|
|
padding: 0 12px;
|
|
font-size: 16px;
|
|
}
|
|
.chip.wide { width: 100%; margin-bottom: 14px; }
|
|
.formerr {
|
|
margin: 0 0 12px;
|
|
padding: 10px 12px;
|
|
border-left: 3px solid var(--liha);
|
|
background: var(--sunk);
|
|
border-radius: 0 8px 8px 0;
|
|
font-size: 14px;
|
|
}
|
|
details.card > summary {
|
|
cursor: pointer;
|
|
font-weight: 600;
|
|
min-height: 24px;
|
|
}
|
|
details.card[open] > summary { margin-bottom: 10px; }
|
|
details.card > section.card {
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 0;
|
|
background: none;
|
|
}
|
|
|
|
.report { border-left: 4px solid var(--accent); }
|
|
.report.bad { border-left-color: var(--liha); }
|
|
.report .tally { margin: 0; font-weight: 700; }
|
|
.report .notes {
|
|
margin: 10px 0 0;
|
|
padding-left: 18px;
|
|
font-size: 13.5px;
|
|
color: var(--muted);
|
|
}
|
|
.report .notes li { margin-bottom: 3px; }
|