/* ────────────────────────────────────────────────────────────── 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; --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; --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; } 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 ───────────────────────────────────────── */ .badge.bg-dark { background: var(--ink) !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 { display: none; } } /* "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 { display: none; } /* Square icon buttons (same height as the normal buttons), centered glyph. */ .board-compact .btn-act { 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; } }