/* Headings, names, numbers and buttons. Self-hosted so it works offline. Latin only, which covers Danish. */ @font-face { font-family: "Bricolage Grotesque"; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url("../fonts/bricolage-grotesque-latin.woff2") format("woff2"); } :root { --pa-font-display: "Bricolage Grotesque", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --pa-green: #2f7d4f; --pa-green-dark: #1f5a37; --pa-green-soft: #e6f2ea; --pa-bg: #f6f7f4; --pa-surface: #ffffff; --pa-border: #dde3dc; --pa-text: #1d2520; --pa-muted: #5f6b63; /* Clay: plants, the things that live in pots. Green is for growing and for actions. */ --pa-clay: #b85c38; --pa-clay-soft: #f6e6dc; /* Pests: the one thing in the app that should catch the eye rather than blend in. Redder than clay so an outbreak never reads as just another plant. */ --pa-alert: #b3261e; --pa-alert-soft: #fbe3e0; /* Delete buttons and links use the same red as pests, so the app has one red */ --bs-danger: var(--pa-alert); --bs-danger-rgb: 179, 38, 30; --bs-danger-text-emphasis: var(--pa-alert); --bs-border-radius: 0.6rem; --bs-border-radius-sm: 0.5rem; --bs-border-radius-lg: 0.75rem; /* Point Bootstrap's primary colour at the app green */ --bs-primary: var(--pa-green); --bs-primary-rgb: 47, 125, 79; --bs-link-color: var(--pa-green-dark); --bs-link-color-rgb: 31, 90, 55; --bs-body-bg: var(--pa-bg); --bs-body-color: var(--pa-text); } /* Dark theme: theme.js sets data-bs-theme="dark" on */ :root[data-bs-theme="dark"] { color-scheme: dark; --pa-green: #5fb883; --pa-green-dark: #86d1a4; --pa-green-soft: #1f3327; --pa-bg: #121814; --pa-surface: #1a221d; --pa-border: #2c3830; --pa-text: #e3e9e4; --pa-muted: #9aa89f; --pa-clay: #e08a64; --pa-clay-soft: #36241b; --pa-alert: #ff978b; --pa-alert-soft: #3d1c1a; --bs-danger: var(--pa-alert); --bs-danger-rgb: 255, 151, 139; --bs-danger-text-emphasis: var(--pa-alert); --bs-primary: var(--pa-green); --bs-primary-rgb: 95, 184, 131; --bs-link-color: var(--pa-green-dark); --bs-link-color-rgb: 134, 209, 164; --bs-body-bg: var(--pa-bg); --bs-body-color: var(--pa-text); --bs-border-color: var(--pa-border); } .btn-outline-primary { --bs-btn-color: var(--pa-green-dark); --bs-btn-disabled-color: var(--pa-green-dark); --bs-btn-disabled-border-color: var(--pa-green); --bs-btn-border-color: var(--pa-green); --bs-btn-hover-color: #fff; --bs-btn-hover-bg: var(--pa-green); --bs-btn-hover-border-color: var(--pa-green); --bs-btn-active-color: #fff; --bs-btn-active-bg: var(--pa-green); --bs-btn-active-border-color: var(--pa-green); } /* Dark text on the lighter green keeps button labels readable in dark mode */ :root[data-bs-theme="dark"] .btn-primary, :root[data-bs-theme="dark"] .btn-outline-primary { --bs-btn-hover-color: #0f1a13; --bs-btn-active-color: #0f1a13; } :root[data-bs-theme="dark"] .btn-primary { --bs-btn-color: #0f1a13; } html, body { font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; background: var(--pa-bg); color: var(--pa-text); accent-color: var(--pa-green); caret-color: var(--pa-green); scrollbar-color: var(--pa-border) transparent; } ::selection { background: var(--pa-green-soft); color: var(--pa-green-dark); } a { text-underline-offset: 0.18em; text-decoration-thickness: 1px; } h1:focus { outline: none; } h1 { font-family: var(--pa-font-display); font-size: 2rem; font-weight: 700; font-stretch: 92%; line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; } .btn { font-family: var(--pa-font-display); font-weight: 600; } .btn-danger { --bs-btn-bg: var(--pa-alert); --bs-btn-border-color: var(--pa-alert); --bs-btn-hover-bg: color-mix(in srgb, var(--pa-alert) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--pa-alert) 85%, black); --bs-btn-active-bg: color-mix(in srgb, var(--pa-alert) 85%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--pa-alert) 85%, black); --bs-btn-disabled-bg: var(--pa-alert); --bs-btn-disabled-border-color: var(--pa-alert); } :root[data-bs-theme="dark"] .btn-danger { --bs-btn-color: #2a0d0a; --bs-btn-hover-color: #2a0d0a; --bs-btn-active-color: #2a0d0a; --bs-btn-disabled-color: #2a0d0a; } .alert-danger { --bs-alert-bg: var(--pa-alert-soft); --bs-alert-border-color: color-mix(in srgb, var(--pa-alert) 30%, transparent); } /* Counts, days and doses line up when they're stacked */ .item-meta, .detail-list, .experiment-result, .prop-summary, .today-counts { font-variant-numeric: tabular-nums; } .btn-primary { --bs-btn-bg: var(--pa-green); --bs-btn-disabled-bg: var(--pa-green); --bs-btn-disabled-border-color: var(--pa-green); --bs-btn-disabled-opacity: 0.45; --bs-btn-border-color: var(--pa-green); --bs-btn-hover-bg: var(--pa-green-dark); --bs-btn-hover-border-color: var(--pa-green-dark); --bs-btn-active-bg: var(--pa-green-dark); --bs-btn-active-border-color: var(--pa-green-dark); } /* Inputs use the card colour so they don't look disabled against the page background */ .form-control, .form-select { background-color: var(--pa-surface); border-color: var(--pa-border); } .form-check-input:checked { background-color: var(--pa-green); border-color: var(--pa-green); } .form-check-input:focus, .form-control:focus, .form-select:focus { border-color: var(--pa-green); box-shadow: 0 0 0 0.2rem rgb(var(--bs-primary-rgb) / 0.25); } .form-control::placeholder { color: var(--pa-muted); opacity: 0.8; } .page-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.75rem; } .page-heading h1 { margin: 0; } /* Round "add" button floating above the bottom navigation */ .fab { position: fixed; right: max(1rem, calc((100% - 48rem) / 2 + 1rem)); bottom: calc(4.5rem + env(safe-area-inset-bottom)); z-index: 11; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 50%; background: var(--pa-green); color: #fff; box-shadow: 0 4px 12px rgb(0 0 0 / 0.25); } .fab:hover, .fab:focus-visible { background: var(--pa-green-dark); color: #fff; } .fab svg { width: 1.6rem; height: 1.6rem; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; } :root[data-bs-theme="dark"] .fab, :root[data-bs-theme="dark"] .fab:hover { color: #0f1a13; } /* A row in the plant and propagation lists: thumbnail, names and a short status line */ .item-card { display: flex; align-items: center; gap: 0.85rem; padding: 0.7rem; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: 0.75rem; color: inherit; text-decoration: none; } a.item-card { transition: border-color 0.15s ease-out, transform 0.2s cubic-bezier(0.16, 1, 0.3, 1); } a.item-card:hover, a.item-card:focus-visible { border-color: var(--pa-green); } a.item-card:active { transform: scale(0.985); } .item-thumb { flex: none; width: 3.5rem; height: 3.5rem; display: grid; place-items: center; overflow: hidden; border-radius: 0.6rem; background: var(--pa-green-soft); color: var(--pa-green); } /* A plant sits in a pot, so its placeholder is clay. Propagations keep the green. */ .item-thumb.potted, .detail-icon.potted { background: var(--pa-clay-soft); color: var(--pa-clay); } .item-thumb.alert, .detail-icon.alert { background: var(--pa-alert-soft); color: var(--pa-alert); } /* How many days a propagation has been going, in the tile where a photo would be. Big enough to read from arm's length, and narrow so three digits still fit. */ .day-thumb { display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1; color: var(--pa-green-dark); } .day-thumb b { font-family: var(--pa-font-display); font-size: 1.4rem; font-weight: 700; font-stretch: 80%; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; } .day-thumb small { margin-top: 0.1rem; font-size: 0.7rem; color: var(--pa-muted); } /* The same count on a photo, in a corner, on a solid tile so any photo keeps it readable */ .item-thumb { position: relative; } .thumb-days { position: absolute; left: 0.2rem; bottom: 0.2rem; padding: 0.1rem 0.3rem; border-radius: 0.35rem; background: var(--pa-green-soft); color: var(--pa-green-dark); font-family: var(--pa-font-display); font-size: 0.75rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.2; } .item-thumb svg { width: 1.75rem; height: 1.75rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .item-thumb img, .item-thumb .photo-placeholder { width: 100%; height: 100%; object-fit: cover; } .item-text { min-width: 0; } .item-card .item-text { flex: 1 1 auto; } .item-name, .item-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .item-name { font-family: var(--pa-font-display); font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.005em; } .item-sub { font-style: italic; font-size: 0.875rem; color: var(--pa-muted); } .item-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.15rem; font-size: 0.8rem; color: var(--pa-muted); } .item-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.6rem; } /* A row on Today with small square buttons after the card: done, put off, take a photo */ .today-row-main { display: flex; align-items: center; gap: 0.4rem; } .today-row-main > .item-card { flex: 1 1 auto; min-width: 0; } .row-btn { flex: none; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: 0.75rem; color: var(--pa-green-dark); cursor: pointer; transition: border-color 0.15s ease-out; } .row-btn:hover, .row-btn:focus-visible, .row-btn.open { border-color: var(--pa-green); } .row-btn.open { background: var(--pa-green-soft); } .row-btn:disabled, .row-btn.disabled { opacity: 0.5; pointer-events: none; } .row-btn svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .put-off { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem; margin-top: 0.4rem; } .put-off-label { margin-right: 0.15rem; font-size: 0.85rem; color: var(--pa-muted); } .today-row-status { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--pa-muted); } .flag-line { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .flag-line b { font-weight: 600; color: var(--pa-text); } /* Experiment rows: one line per batch, so the substrates can be compared at a glance */ .experiment-list { gap: 0; overflow: hidden; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: 0.75rem; } .experiment-list li + li { border-top: 1px solid var(--pa-border); } .experiment-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.5rem; min-height: 44px; padding: 0.7rem 0.9rem; color: inherit; text-decoration: none; } .experiment-medium { flex: 1 1 auto; font-family: var(--pa-font-display); font-weight: 600; } /* Days on a shared scale, so the batches compare by length. A batch that hasn't rooted yet is drawn hollow up to today, since it's still running. */ .experiment-bar { flex: 1 0 100%; order: 3; height: 0.5rem; margin: 0.35rem 0 0.1rem; border-radius: 999px; background: var(--pa-green-soft); } .experiment-bar span { display: block; width: calc(var(--share) * 100%); min-width: 0.5rem; height: 100%; border-radius: inherit; background: var(--pa-green); transform-origin: left; animation: bar-grow 0.7s cubic-bezier(0.16, 1, 0.3, 1) both; } .experiment-bar.running span { background: transparent; border: 1.5px dashed var(--pa-green); } @keyframes bar-grow { from { transform: scaleX(0); } } @media (prefers-reduced-motion: reduce) { .experiment-bar span { animation: none; } } .experiment-result { flex: 0 0 auto; font-size: 0.85rem; color: var(--pa-muted); } .experiment-result.rooted { color: var(--pa-green-dark); font-weight: 600; } /* How long it took to root, on a card as well as in an experiment group */ .rooted-in { color: var(--pa-green-dark); font-weight: 600; } /* Whether a propagation that hasn't rooted is keeping up with earlier batches. Running behind counts as overdue, so slow takes the alert colour. */ .pace-on-time { color: var(--pa-green-dark); font-weight: 600; } .pace-slow { color: var(--pa-alert); font-weight: 600; } .experiment-milestones { flex: 1 0 100%; order: 4; font-size: 0.8rem; color: var(--pa-muted); } .experiment-outcome { flex: 1 0 100%; order: 4; font-size: 0.8rem; color: var(--pa-muted); } /* Groups in a list (stages on Propagations, due and open on Pests) */ .stage-group + .stage-group { margin-top: 1.25rem; } .stage-group h2 { margin: 0 0 0.5rem; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pa-muted); } /* Radio buttons shown as a segmented control (filters, propagation stage) */ .segmented { display: flex; } .segmented .btn { flex: 1; } .stage-badge { display: inline-flex; align-items: center; gap: 0.4em; background: var(--pa-green-soft); color: var(--pa-green-dark); font-weight: 600; } /* Three ticks in front of a propagation's stage: how far along started, rooting, rooted it is */ .stage-steps { display: inline-flex; gap: 2px; } .stage-steps i { width: 0.3rem; height: 0.65rem; border-radius: 1px; background: var(--pa-green); opacity: 0.25; } .stage-steps[data-step="1"] i:nth-child(-n+1), .stage-steps[data-step="2"] i:nth-child(-n+2), .stage-steps[data-step="3"] i { opacity: 1; } /* The stage picker on a propagation reads as a path: stages behind you stay tinted */ .stage-track .btn-outline-primary.passed { --bs-btn-bg: var(--pa-green-soft); --bs-btn-color: var(--pa-green-dark); } .stage-track .btn { position: relative; transition: background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease-out; } /* Add/edit forms: each group of fields is a card */ .edit-form fieldset { margin-bottom: 1.25rem; padding: 1rem; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: 0.75rem; } /* Bootstrap floats the legend inside the fieldset; only the text is restyled */ .edit-form legend { margin-bottom: 0.75rem; } .form-actions { display: flex; gap: 0.5rem; align-items: center; } /* Plant and propagation pages */ .detail-hero { margin: 0 -1rem 1rem; aspect-ratio: 4 / 3; max-height: 60vh; overflow: hidden; background: var(--pa-green-soft); } .detail-hero img, .detail-hero .photo-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; } @media (min-width: 48rem) { .detail-hero { margin-inline: 0; border-radius: 0.9rem; } } .detail-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; border-bottom: 1px solid var(--pa-border); } .detail-tab { padding: 0.55rem 1rem; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; background: transparent; color: var(--pa-muted); font-family: var(--pa-font-display); font-weight: 500; } .detail-tab.active { color: var(--pa-green-dark); border-bottom-color: var(--pa-green); font-weight: 600; } .detail-header { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .detail-header h1 { margin: 0; font-size: 1.75rem; overflow-wrap: anywhere; } .detail-icon { flex: none; width: 5rem; height: 5rem; display: grid; place-items: center; border-radius: 0.9rem; background: var(--pa-green-soft); color: var(--pa-green); } .detail-icon svg { width: 2.5rem; height: 2.5rem; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .day-tile { display: flex; flex-direction: column; justify-content: center; align-items: center; line-height: 1; color: var(--pa-green-dark); } .day-tile b { font-family: var(--pa-font-display); font-size: 2.25rem; font-weight: 700; font-stretch: 80%; font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .day-tile small { margin-top: 0.2rem; font-size: 0.75rem; color: var(--pa-muted); } .min-w-0 { min-width: 0; } .detail-sub { margin: 0.1rem 0 0.3rem; font-style: italic; color: var(--pa-muted); } .detail-actions { display: flex; gap: 0.5rem; margin-bottom: 1rem; } .detail-card { margin-bottom: 1rem; padding: 1rem; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: 0.75rem; } .detail-card h2, .edit-form legend { font-family: var(--pa-font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.005em; } .detail-card h2 { margin: 0 0 0.5rem; } .detail-card dl + h2 { margin-top: 1rem; } .detail-card h3 { font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pa-muted); margin: 0.75rem 0 0.35rem; } .detail-card h2 + h3 { margin-top: 0; } .detail-list { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1rem; margin: 0; } .detail-list dt { font-weight: 500; color: var(--pa-muted); } .detail-list dd { margin: 0; } .detail-notes { margin: 0; white-space: pre-line; } /* Care log */ .care-sheet .form-label { margin-bottom: 0.15rem; font-size: 0.8rem; color: var(--pa-muted); } .care-actions { display: flex; gap: 0.5rem; align-items: center; margin-top: 0.75rem; } /* One picked product and its dose. The name and what to measure out sit on one line and the dose under them, since "5 ml per 4 L" needs the width. */ .care-dose { margin-top: 0.6rem; } .care-dose-head { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.2rem; } .care-dose-head label { flex: 1 1 auto; min-width: 0; margin: 0; font-size: 0.9rem; } /* What to measure out for the water given, next to the product it's for */ .care-measure { flex: 0 0 auto; white-space: nowrap; font-weight: 600; color: var(--pa-green-dark); font-variant-numeric: tabular-nums; } .care-water .water-input { width: 9rem; } /* A dose the way the bottle puts it. The two numbers stay narrow so the whole thing fits on a phone; the unit boxes size to their text. */ .dose-input { flex-wrap: nowrap; max-width: 20rem; } .dose-input .dose-amount { flex: 1 1 4rem; min-width: 3.5rem; } .dose-input .dose-per { flex: 1 1 3.5rem; min-width: 3rem; } /* Bootstrap gives a select in a small input group 3rem on the right for its arrow, which leaves no room for "ml" */ .input-group.dose-input > .dose-per-unit, .input-group.water-input > .water-unit { flex: 0 0 4.5rem; padding-right: 1.75rem; background-position: right 0.5rem center; } /* The unit picked on a recipe ingredient, wide enough for "drops" */ .input-group.dose-input > .dose-unit { flex: 0 0 5.25rem; padding-right: 1.75rem; background-position: right 0.5rem center; } /* How a recipe says to use it, kept to the lines it was typed on */ .treatment-method { white-space: pre-line; } /* What was in a recipe on the day, under the treatment it was used on */ .treatment-recipe { font-size: 0.85rem; color: var(--pa-muted); } .care-moisture { margin-top: 0.6rem; color: var(--pa-green-dark); font-weight: 600; } .care-list { list-style: none; margin: 0; padding: 0; } .care-list li + li { border-top: 1px solid var(--pa-border); } .care-entry { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.15rem 0.75rem; padding: 0.55rem 0; } .care-what { font-weight: 600; } .care-when { font-size: 0.85rem; color: var(--pa-muted); white-space: nowrap; } /* The latest moisture reading, on a plant card */ .moisture-badge { padding: 0.05rem 0.4rem; background: var(--pa-green-soft); color: var(--pa-green-dark); border-radius: 0.6rem; font-weight: 600; } .family-list { margin: 0; padding-left: 1.2rem; } /* Pests */ .pest-badge { padding: 0.05rem 0.4rem; background: var(--pa-alert-soft); color: var(--pa-alert); border-radius: 0.6rem; font-weight: 600; text-decoration: none; } .pest-due { font-weight: 600; } /* A favourite's star is Clay, the colour of a plant, so it stays away from the alert red */ /* The name gives way to the star, so a long name is cut short before the star is */ .item-name.has-star { display: flex; align-items: center; } .item-name.has-star .item-name-text { overflow: hidden; text-overflow: ellipsis; } .favourite-star { flex: none; width: 0.9rem; height: 0.9rem; margin-left: 0.25rem; vertical-align: -0.1em; fill: var(--pa-clay); stroke: var(--pa-clay); stroke-width: 1.5; stroke-linejoin: round; } .favourite-toggle { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin: -0.5rem 0; padding: 0; border: 0; background: none; vertical-align: middle; color: var(--pa-muted); } .favourite-toggle svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linejoin: round; } .favourite-toggle.on { color: var(--pa-clay); } .favourite-toggle.on svg { fill: currentColor; } /* Quarantine is a precaution rather than a problem, so it gets the pest colour in outline only */ .quarantine-badge { padding: 0.05rem 0.4rem; border: 1px solid var(--pa-alert); color: var(--pa-alert); border-radius: 0.6rem; font-weight: 600; } /* Dormant is a plant resting, not a problem, so it stays in the quiet ink of the meta line */ .dormant-badge { padding: 0.05rem 0.4rem; border: 1px solid var(--pa-muted); color: var(--pa-muted); border-radius: 0.6rem; font-weight: 600; } /* Your own labels. Quiet on purpose, so they don't compete with status and pests */ .tag-label { display: inline-block; padding: 0.05rem 0.45rem; border: 1px solid var(--pa-border); border-radius: 0.6rem; color: var(--pa-muted); font-size: 0.78rem; line-height: 1.4; text-decoration: none; } a.tag-label:hover { border-color: var(--pa-green); color: var(--pa-green-dark); } .item-tags, .detail-tags, .tag-filters { display: flex; flex-wrap: wrap; gap: 0.3rem; } .item-tags { margin-top: 0.3rem; } .detail-tags .tag-label { font-size: 0.85rem; padding: 0.15rem 0.6rem; } .tag-filters { gap: 0.35rem; } .tag-draft { display: flex; gap: 0.5rem; margin-top: 0.5rem; } /* Only a treatment that is actually due is worth colouring; "next in 3 days" is not news */ .pest-due.now { color: var(--pa-alert); } .trap-head { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .trap-head h2 { margin: 0; } /* Asking whether new ones on a trap mean treating again: a panel awaiting a decision */ .trap-ask { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--pa-green); border-radius: 0.6rem; } .trap-ask p { margin-bottom: 0.5rem; } /* The catch per week. Bars are pests, so they are the pest red */ .trap-chart { margin-top: 1rem; display: flex; align-items: stretch; gap: 0.5rem; height: 8rem; } .trap-bar { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; } /* The top padding keeps room for the number over the tallest bar */ .trap-track { flex: 1; width: 100%; padding-top: 1.3rem; display: flex; justify-content: center; align-items: flex-end; } .trap-fill { position: relative; width: 100%; max-width: 2.5rem; background: var(--pa-alert); border-radius: 0.3rem 0.3rem 0 0; } .trap-value { position: absolute; bottom: 100%; left: 0; right: 0; text-align: center; font-family: var(--pa-font-display); font-weight: 700; font-variant-numeric: tabular-nums; font-size: 0.9rem; line-height: 1.4; } .trap-date { margin-top: 0.3rem; color: var(--pa-muted); font-size: 0.75rem; white-space: nowrap; } .trap-caption { margin: 0.5rem 0 0; color: var(--pa-muted); font-size: 0.875rem; } /* Picking the plants a case covers: a plain list of checkbox cards */ .pick-list { max-height: 18rem; overflow-y: auto; } .danger-zone { margin-top: 1.5rem; font-size: 0.9rem; } /* Camera and gallery buttons, used when adding photos */ .composer-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 0.5rem; } .icon-btn { display: inline-flex; align-items: center; gap: 0.3rem; } .icon-btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .composer-status { margin: 0.5rem 0 0; font-size: 0.85rem; color: var(--pa-muted); } /* Photos picked while adding a plant */ .photo-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr)); gap: 0.35rem; margin-bottom: 0.5rem; } .photo-pick { position: relative; aspect-ratio: 1; border-radius: 0.5rem; overflow: hidden; background: var(--pa-green-soft); } .photo-pick img, .photo-pick .photo-placeholder { display: block; width: 100%; height: 100%; object-fit: cover; } .photo-remove { position: absolute; top: 0.2rem; right: 0.2rem; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.55); color: #fff; line-height: 1; } .family-hint { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--pa-muted); } .back-link { display: inline-flex; align-items: center; gap: 0.15rem; margin-bottom: 0.5rem; font-size: 0.9rem; text-decoration: none; } /* A stroked chevron in front of the label, drawn like the rest of the icons */ .back-link::before { content: ""; width: 1rem; height: 1rem; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15 5-7 7 7 7'/%3E%3C/svg%3E") center / contain no-repeat; } .link-chevron { width: 0.9em; height: 0.9em; vertical-align: -0.1em; fill: none; stroke: currentColor; stroke-width: 2.25; stroke-linecap: round; stroke-linejoin: round; } .empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--pa-muted); background: var(--pa-surface); border: 1px dashed var(--pa-border); border-radius: 0.75rem; } .empty-state p { margin-bottom: 0; } /* The first thing a new visitor sees, so it gets a drawing and a real heading */ .empty-state.first-run { padding: 2rem 1.25rem 2.25rem; background: var(--pa-green-soft); border-color: color-mix(in srgb, var(--pa-green) 35%, transparent); color: var(--pa-text); } .empty-state.first-run svg { width: 5.5rem; height: 5.5rem; margin-bottom: 0.75rem; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; } .empty-state.first-run .glass { stroke: var(--pa-green-dark); } .empty-state.first-run .growth { stroke: var(--pa-green); } .empty-state.first-run .pot { stroke: var(--pa-clay); } .empty-state.first-run h2 { margin: 0 0 0.35rem; font-family: var(--pa-font-display); font-size: 1.35rem; font-weight: 700; letter-spacing: -0.01em; color: var(--pa-green-dark); } .empty-state p + p { margin-top: 0.5rem; } .empty-state.first-run p { max-width: 28rem; margin-inline: auto; color: var(--pa-muted); } .first-run-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin-top: 1rem; } .first-run-help { display: inline-block; margin-top: 0.85rem; font-size: 0.9rem; } .valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } .invalid { outline: 1px solid red; } .validation-message { color: red; } #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: #b32121; padding: 1rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .loading-progress { position: absolute; display: block; width: 8rem; height: 8rem; inset: 20vh 0 auto 0; margin: 0 auto 0 auto; } .loading-progress circle { fill: none; stroke: var(--pa-border); stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: var(--pa-green); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } /* Chips: picked from buttons rather than a datalist, which a phone will not show. Used for rooms and spots, and for anything else you pick one of. */ .chip-row, .room-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; } .chip, .room-chip { min-height: 2.25rem; padding: 0.3rem 0.75rem; border: 1px solid var(--pa-border); border-radius: 999px; background: var(--pa-surface); color: var(--pa-text); font-size: 0.9rem; line-height: 1.3; } .chip.picked, .room-chip.picked { border-color: var(--pa-green); background: var(--pa-green-soft); color: var(--pa-green-dark); font-weight: 600; } /* Dashed, so adding a name doesn't look like another room you already have */ .chip.new, .room-chip.new { border-style: dashed; color: var(--pa-muted); } .chip.new.picked, .room-chip.new.picked { color: var(--pa-green-dark); } .tag-picker .form-label { margin-bottom: 0.35rem; } /* Names to tap under the name field being typed in. A long one wraps inside its chip. */ .name-chip { text-align: left; } .chip-note { color: var(--pa-muted); font-size: 0.8rem; } /* Shared by Settings and the pages that came out of it */ .settings-section { margin-bottom: 1.75rem; } .settings-section h2 { font-size: 1rem; font-weight: 600; margin-bottom: 0.6rem; } .section-label { margin-bottom: 0.6rem; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--pa-muted); } .settings-hint { margin: 0.5rem 0 0; font-size: 0.875rem; color: var(--pa-muted); } /* Row links on Settings and Supplies close up into one block divided by hairlines, like the Help page */ .settings-rows { display: flex; flex-direction: column; overflow: hidden; background: var(--pa-surface); border: 1px solid var(--pa-border); border-radius: 0.75rem; } .settings-hint + .settings-rows { margin-top: 1rem; } .settings-rows > a.item-card { border: 0; border-top: 1px solid var(--pa-border); border-radius: 0; transition: background-color 0.15s ease-out; } .settings-rows > a.item-card:first-child { border-top: 0; } .settings-rows > a.item-card:hover, .settings-rows > a.item-card:focus-visible { background: var(--pa-green-soft); } .settings-rows > a.item-card:focus-visible { outline: 2px solid var(--pa-green); outline-offset: -2px; } .settings-rows > a.item-card:active { transform: none; } .settings-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; } .confirm-card { margin-top: 0.75rem; padding: 0.85rem; background: var(--pa-surface); border: 1px solid var(--pa-green); border-radius: 0.75rem; } .confirm-card-danger { border-color: var(--pa-alert); } .confirm-card p { margin-bottom: 0.25rem; } .settings-message { margin: 0.75rem 0 0; font-size: 0.9rem; } .room-list { list-style: none; margin: 0.75rem 0 0; padding: 0; } .room-list > li { padding: 0.6rem 0; border-top: 1px solid var(--pa-border); } .room-list > li:first-child { border-top: 0; } .room-row { display: flex; align-items: baseline; gap: 0.5rem; } .room-name { font-weight: 600; } .room-count { margin-right: auto; font-size: 0.85rem; color: var(--pa-muted); } /* Spots read as part of the room above them */ .room-spot { margin: 0.4rem 0 0 0.75rem; padding-left: 0.75rem; border-left: 2px solid var(--pa-border); } .room-spot .room-name { font-weight: 400; }