/* ────────────────────────────────────────────────────────────── JKOrderManager theme — editorial look adapted from dev.jkuehne.ch/solar Red brand, "paper" surfaces, Bricolage Grotesque + DM Sans, sharp radii. ────────────────────────────────────────────────────────────── */ :root { /* Brand & ink */ --brand: #E31221; --brand-deep: #B30E1A; --brand-tint: #FBE7E9; /* Age-restriction marker (*JS*) in the delivery views — the brand red carries enough alarm on paper-white; dark mode lightens it below so it stays legible on the dark surface. */ --js-mark: var(--brand); --ink: #0F1115; --ink-soft: #4B5159; --ink-faint: #9097A1; --paper: #FFFFFF; --paper-tint: #F7F7F4; --paper-deep: #EDEBE5; --rule: #E5E3DE; --rule-strong: #C8C5BD; --font-display: "Bricolage Grotesque", "Helvetica Neue", sans-serif; --font-body: "DM Sans", "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Code", monospace; /* Type scale — one declared ladder instead of mixing .h5/.h6/.fs-5/.small ad hoc. Use the --step-* tokens (or the semantic classes below) for anything new. */ --step--1: 0.8125rem; /* meta, captions, helper text */ --step-0: 1rem; /* body */ --step-1: 1.125rem; /* item names, emphasised body */ --step-2: 1.375rem; /* section headings */ --step-3: 1.75rem; /* page headings */ --step-4: 2.25rem; /* display: order numbers, grand totals */ /* Radii — the "sharp" end of the scale is deliberate (see the theme note above). Never hard-code a radius in a component; pick one of these three. */ --radius-sm: 2px; /* badges, chips */ --radius: 4px; /* default: inputs, buttons, thumbnails */ --radius-lg: 8px; /* large surfaces: board cards, QR cells, previews */ /* Retint Bootstrap globally via its CSS variables */ --bs-primary: #E31221; --bs-primary-rgb: 227, 18, 33; --bs-link-color: #B30E1A; --bs-link-color-rgb: 179, 14, 26; --bs-link-hover-color: #8f0b15; --bs-body-bg: #F7F7F4; --bs-body-color: #0F1115; --bs-border-color: #E5E3DE; --bs-border-radius: var(--radius); --bs-border-radius-sm: var(--radius-sm); --bs-border-radius-lg: var(--radius-lg); --bs-font-sans-serif: "DM Sans", "Segoe UI", system-ui, sans-serif; } /* Dark theme — activated by data-bs-theme="dark" on (navbar toggle). Redefines the "paper/ink" surfaces and the Bootstrap surface variables; the brand red and fonts are shared from :root. Same specificity as :root, so being later wins when active. */ [data-bs-theme="dark"] { --brand-tint: #3A1416; --js-mark: #FF7A82; --ink: #E8E6E1; --ink-soft: #B0B5BC; --ink-faint: #7C838D; --paper: #1B1D21; --paper-tint: #141519; --paper-deep: #26282D; --rule: #2E3136; --rule-strong: #42464D; --bs-link-color: #FF7A82; --bs-link-color-rgb: 255, 122, 130; --bs-link-hover-color: #FF9BA1; --bs-body-bg: #141519; --bs-body-color: #E8E6E1; --bs-border-color: #2E3136; --bs-emphasis-color: #F5F4F1; --bs-secondary-color: rgba(232, 230, 225, 0.72); --bs-tertiary-bg: #26282D; } /* Links use the lighter red only outside the brand-red navbar (which stays white-on-red). */ [data-bs-theme="dark"] a:not(.nav-link):not(.navbar-brand):not(.btn) { color: var(--bs-link-color); } html { font-size: 16px; position: relative; min-height: 100%; } body { font-family: var(--font-body); color: var(--ink); background: var(--paper-tint); letter-spacing: -0.002em; padding-bottom: 5rem; } h1, h2, h3, h4, h5, h6, .navbar-brand { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.012em; color: var(--ink); } /* Numbers feel tabular (order numbers, prices, KPIs). The size classes are a safety net for existing markup; .amount is the semantic hook to use for any money value from now on. */ .value, table td, code, .mono, input[type="number"], .display-4, .fs-3, .fs-4, .fs-5, .amount { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* ── Amounts ────────────────────────────────────────────────── A price is primary content on a menu, not metadata: .amount keeps a money value at full ink instead of letting it fade into .text-muted. .amount-lg is the prominent variant (cart total, order total) and picks up the display face. */ .amount { color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; } .amount-lg { font-family: var(--font-display); font-weight: 600; font-size: var(--step-2); line-height: 1.1; } /* ── Age-restriction marker ─────────────────────────────────── The *JS* suffix on an article name in the delivery views. Only there is it emphasised: that is the moment someone hands the drink over and has to decide whether to ask for an ID. On the guest menu and the printed menu card the same marker stays plain text. */ .js-mark { color: var(--js-mark); font-weight: 700; white-space: nowrap; } code, kbd, pre { font-family: var(--font-mono); } .btn:focus, .btn:active:focus, .form-control:focus, .form-check-input:focus { box-shadow: 0 0 0 0.2rem rgba(227,18,33,0.18); } /* ── Motion ─────────────────────────────────────────────────── Buttons lift on hover and cards/buttons animate their border. Honour the OS-level "reduce motion" preference: drop the movement, keep the colour feedback. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } .btn-primary:hover:not(:disabled) { transform: none; } } /* ── Navbar — brand-coloured ──────────────────────────────── */ .navbar { background: var(--brand) !important; border-bottom: 1px solid var(--brand-deep); box-shadow: 0 1px 0 rgba(0,0,0,0.04); } .navbar .navbar-brand { color: #fff !important; font-size: 1.05rem; } /* Optional installation label (e.g. "Demo"/"Test") under the brand. Absolutely positioned so it never changes the navbar height nor shifts the menu items; may run the full width if long. */ .navbar .brand-wrap { position: relative; } .navbar .brand-wrap .env-label { position: absolute; top: 100%; left: 0; margin-top: -0.15rem; font-size: 0.7rem; font-style: italic; font-weight: 400; line-height: 1; white-space: nowrap; color: yellow; pointer-events: none; } .navbar .nav-link { color: rgba(255,255,255,0.92) !important; } .navbar .nav-link:hover, .navbar .nav-link:focus { color: #fff !important; } .navbar .navbar-text, .navbar .text-muted { color: rgba(255,255,255,0.78) !important; } .navbar .navbar-toggler { border-color: rgba(255,255,255,0.45); } .navbar .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2.2); } /* Light secondary buttons (e.g. Abmelden) on the red bar */ .navbar .btn-outline-secondary { color: #fff; border-color: rgba(255,255,255,0.55); } .navbar .btn-outline-secondary:hover { background: #fff; color: var(--brand); border-color: #fff; } /* ── Buttons ────────────────────────────────────────────────── Bootstrap 5.3 bakes per-variant colours into --bs-btn-* vars, so we retint those (covers normal, hover, active AND disabled states). */ .btn { font-weight: 500; letter-spacing: -0.002em; transition: all .15s ease; } .btn-primary { --bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand-deep); --bs-btn-hover-border-color: var(--brand-deep); --bs-btn-active-bg: var(--brand-deep); --bs-btn-active-border-color: var(--brand-deep); --bs-btn-disabled-bg: var(--brand); --bs-btn-disabled-border-color: var(--brand); } .btn-primary:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 14px -6px rgba(227,18,33,0.45); } .btn-outline-primary { --bs-btn-color: var(--brand-deep); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg: var(--brand); --bs-btn-hover-border-color: var(--brand); --bs-btn-active-bg: var(--brand-deep); --bs-btn-active-border-color: var(--brand-deep); } /* ── Cards & list groups — flat, ruled, hover ─────────────── */ .card { background: var(--paper); border: 1px solid var(--rule); box-shadow: none; transition: border-color .15s ease, transform .15s ease; } .card.shadow-sm { box-shadow: none !important; } .card:hover { border-color: var(--rule-strong); } .list-group-item { border-color: var(--rule); } .list-group-item-action:hover { background: var(--paper-tint); } /* ── Tables ───────────────────────────────────────────────── */ .table > thead { --bs-table-bg: var(--paper-deep); } .table { --bs-table-striped-bg: var(--paper-tint); } /* ── Forms ────────────────────────────────────────────────── */ .form-control, .form-select { border-color: var(--rule-strong); background: var(--paper); } .form-control:focus, .form-select:focus { border-color: var(--brand); box-shadow: 0 0 0 0.2rem rgba(227,18,33,0.15); } /* ── Badges & links ───────────────────────────────────────── */ /* Table-number badges (board cards, delivery lists, open payments) carry the ink colour, so in the dark theme the chip turns light — Bootstrap's white badge text then sits on a light background and is barely readable. Flip the text to the dark surface there. */ .badge.bg-dark { background: var(--ink) !important; } [data-bs-theme="dark"] .badge.bg-dark { color: var(--paper-tint) !important; } a { color: var(--brand-deep); } a:hover { color: var(--brand); } /* ── Footer ───────────────────────────────────────────────── */ .footer { border-top: 1px solid var(--rule); color: var(--ink-faint); background: var(--paper); padding: 0.25rem 0; } /* ── Buttons ────────────────────────────────────────────────── Keep a button's icon and label on one line (Bootstrap 5 drops the old white-space:nowrap, so a squeezed button in a flex/input-group would stack the icon above the text). */ .btn { white-space: nowrap; } /* ── Print ──────────────────────────────────────────────────── Elements marked .no-print are removed from print output entirely (display:none → they take no space, e.g. the "act-as" admin banner). */ @media print { .no-print { display: none !important; } } /* Product image preview on the article form. */ .article-preview { max-height: 120px; max-width: 100%; border: 1px solid var(--rule); border-radius: var(--radius-lg); } /* ── Station board (passwordless /b/… and the Crew area board) ──────── Both boards render the same cards, so the layout lives here instead of in each view. */ .board-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .5rem; } .board-cols { display: flex; gap: .6rem; align-items: flex-start; } .board-col { flex: 1 1 0; min-width: 0; } .board-col-head { font-weight: 600; padding: .35rem .5rem; background: var(--paper-deep); border-radius: var(--radius); position: sticky; top: 0; } .board-card { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: .5rem .6rem; margin-top: .5rem; container-type: inline-size; } .board-card .order-no { font-size: 1.5rem; font-weight: 700; line-height: 1; font-family: var(--font-display); } /* Narrow cards (small window / many columns): icon-only action buttons so they never overflow. */ @container (max-width: 300px) { .btn-act .btn-txt, .btn-reprint .btn-txt { display: none; } } /* "Bon erneut drucken" only does something while the local print app is connected, and the Crew board does not load the bridge at all — so the button stays hidden until label-print.js marks the page. The class sits on , which the innerHTML board refreshes never touch. */ .btn-reprint { display: none; } body.label-print-ready .btn-reprint { display: inline-block; } /* "Kleine Kacheln": hide wait time + customer name, move the (icon-only) buttons up beside the item list — the card gets flatter while the buttons keep their normal size. */ .board-compact .board-card { display: grid; grid-template-columns: minmax(0,1fr) auto; column-gap: .5rem; } .board-compact .board-card > .card-head, .board-compact .board-card > .card-note { grid-column: 1 / -1; } .board-compact .board-card > .card-items { grid-column: 1; } .board-compact .board-card > .card-actions { grid-column: 2; grid-row: 2; align-self: start; margin-top: 5px !important; } .board-compact .board-card > .wait-time, .board-compact .board-card > .cust-name, .board-compact .board-card .ready-hint, .board-compact .btn-act .btn-txt, .board-compact .btn-reprint .btn-txt { display: none; } /* Square icon buttons (same height as the normal buttons), centered glyph. */ .board-compact .btn-act, body.label-print-ready .board-compact .btn-reprint { width: 2.6rem; height: 2.6rem; padding: 0; display: inline-flex; align-items: center; justify-content: center; } .card-items { list-style: none; padding: 0; margin: .4rem 0 0; } .card-items li { font-size: 1.05rem; } .btn-act { font-size: 1.1rem; padding: .4rem; } /* ── QR sheets (Qr/Sheet, Qr/DeliverySheet, Qr/StationSheet) ─────────── */ .qr-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .qr-cell { border: 1px dashed #bbb; border-radius: var(--radius-lg); padding: .75rem; text-align: center; page-break-inside: avoid; } .qr-cell img { width: 100%; max-width: 220px; height: auto; } .qr-cell .lbl { font-weight: 700; font-size: 1.2rem; margin-bottom: .25rem; } /* A sheet with a single code: larger and centred on the page. */ .qr-cell.qr-single { padding: 1.5rem; max-width: 360px; margin: 0 auto; } .qr-cell.qr-single img { max-width: 260px; } .qr-cell.qr-single .lbl { font-size: 1.3rem; margin-bottom: .5rem; } /* ── Print sheets ───────────────────────────────────────────────────── Views that are meant to be printed (QR sheets, menu card) set ViewData["PrintView"] = true, which puts .print-view on . The app chrome is then dropped so only the sheet itself ends up on paper. */ @media print { .print-view header, .print-view .footer, .print-view nav[aria-label="breadcrumb"] { display: none !important; } .print-view a[href]:after { content: none !important; } body.print-view { background: #fff !important; } } /* ── Wartungs-Kalender (Plattform) ──────────────────────────────────── Jahres-Heatmap der Anlass-Belegung über alle Vereine. Die Farbstufen sind lokal definiert statt in :root, weil sie nur diese eine Ansicht betreffen; die Dunkel-Variante überschreibt nur die fünf Werte. Legende und Kalender stehen in getrennten Blöcken, deshalb tragen beide dieselbe Definition. */ .cal-year, .cal-legend { --heat-0: var(--paper-deep); --heat-1: #F8D0D3; --heat-2: #F0A3A9; --heat-3: #E8737C; --heat-4: #E31221; --heat-5: #B30E1A; } [data-bs-theme="dark"] .cal-year, [data-bs-theme="dark"] .cal-legend { --heat-1: #4A1E22; --heat-2: #6E2A30; --heat-3: #96343C; --heat-4: #C0303A; --heat-5: #E31221; } .cal-year { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 1rem; } .cal-month { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: .6rem; } .cal-month-head { font-family: var(--font-display); font-weight: 600; margin-bottom: .4rem; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; } .cal-wd { font-size: 0.6875rem; color: var(--ink-faint); text-align: center; padding-bottom: 2px; } .cal-pad { aspect-ratio: 1; } .cal-day { position: relative; aspect-ratio: 1; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } /* Day-of-month in the corner, the event count as the cell's actual content. */ .cal-dnum { position: absolute; top: 1px; left: 3px; font-size: 0.625rem; line-height: 1; color: var(--ink-faint); } .cal-cnt { font-size: 0.8125rem; font-weight: 700; line-height: 1; } .cal-h0 { background: var(--heat-0); } .cal-h1 { background: var(--heat-1); } .cal-h2 { background: var(--heat-2); } .cal-h3 { background: var(--heat-3); } .cal-h4 { background: var(--heat-4); } .cal-h5 { background: var(--heat-5); } /* From step 3 on the background is dark enough that ink-coloured text stops working. */ .cal-h3 .cal-cnt, .cal-h4 .cal-cnt, .cal-h5 .cal-cnt, .cal-h3 .cal-dnum, .cal-h4 .cal-dnum, .cal-h5 .cal-dnum { color: #FFFFFF; } /* Today's ring uses --ink, not the brand red: red would vanish on the hot steps, which are brand red themselves. */ .cal-today { outline: 2px solid var(--ink); outline-offset: 1px; z-index: 1; } .cal-today .cal-dnum { font-weight: 700; color: var(--ink); } .cal-h3.cal-today .cal-dnum, .cal-h4.cal-today .cal-dnum, .cal-h5.cal-today .cal-dnum { color: #FFFFFF; } .cal-legend { display: flex; align-items: center; gap: 4px; font-size: var(--step--1); } .cal-key { width: 15px; height: 15px; border-radius: var(--radius-sm); display: inline-block; }