/* ============================================================================================= PosMoviles themes, professional monochrome. (default, light) or "graphite" (dark). Chosen per computer with the sun/moon button in the top bar (pos.js, cookie "pos-look"). Black, white and greys with subtle frosted-glass panels; colour only where it means something (errors, warnings, OK) and a thin stripe for each shop. Every rule below reads these tokens; Bootstrap's own variables are mapped onto them. ============================================================================================= */ /* Mono (default). Also used by pages without a theme (printed tickets bring their own white page). */ :root[data-pos-theme="mono"], :root:not([data-pos-theme]) { --pos-bg: linear-gradient(180deg, #FAFAFA 0%, #F1F1F1 100%); /* Frosted panels: cards, sidebar, top bar, alerts. */ --pos-glass-bg: rgba(255, 255, 255, 0.78); --pos-glass-border: rgba(17, 17, 17, 0.08); --pos-glass-shadow: 0 1px 2px rgba(17, 17, 17, 0.04), 0 4px 16px rgba(17, 17, 17, 0.04); --pos-glass-blur: 12px; /* Solid panels: tables, form fields, cart. */ --pos-solid-bg: #FFFFFF; --pos-solid-border: rgba(17, 17, 17, 0.10); --pos-text: #111111; --pos-text-2: #6B6B6B; --pos-heading: #111111; /* The one accent: black buttons with white text. */ --pos-accent: #111111; --pos-accent-rgb: 17, 17, 17; --pos-accent-hover: #333333; --pos-on-accent: #FFFFFF; --pos-link: #111111; --pos-focus-rgb: 17, 17, 17; /* Status colours, muted (only for meaning). */ --pos-success: #067647; --pos-success-rgb: 6, 118, 71; --pos-success-bg: #ECFDF3; --pos-warning: #B54708; --pos-warning-rgb: 181, 71, 8; --pos-warning-bg: #FFFAEB; --pos-danger: #B42318; --pos-danger-rgb: 180, 35, 24; --pos-danger-hover: #912018; --pos-danger-bg: #FEF3F2; --pos-nav-text: #3F3F3F; --pos-nav-section: #8A8A8A; --pos-nav-hover-bg: rgba(17, 17, 17, 0.04); --pos-nav-active-bg: rgba(17, 17, 17, 0.07); --pos-nav-active-text: #111111; --pos-radius: 10px; --pos-radius-sm: 8px; color-scheme: light; } /* Graphite: the same design in the dark (white buttons with black text). */ :root[data-pos-theme="graphite"] { --pos-bg: linear-gradient(180deg, #161618 0%, #0F0F10 100%); --pos-glass-bg: rgba(30, 30, 33, 0.78); --pos-glass-border: rgba(255, 255, 255, 0.08); --pos-glass-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 16px rgba(0, 0, 0, 0.25); --pos-glass-blur: 12px; --pos-solid-bg: #1C1C1E; --pos-solid-border: rgba(255, 255, 255, 0.10); --pos-text: #F5F5F5; --pos-text-2: #A1A1AA; --pos-heading: #FFFFFF; --pos-accent: #F5F5F5; --pos-accent-rgb: 245, 245, 245; --pos-accent-hover: #FFFFFF; --pos-on-accent: #111111; --pos-link: #F5F5F5; --pos-focus-rgb: 255, 255, 255; --pos-success: #47CD89; --pos-success-rgb: 71, 205, 137; --pos-success-bg: rgba(71, 205, 137, 0.10); --pos-warning: #F7B955; --pos-warning-rgb: 247, 185, 85; --pos-warning-bg: rgba(247, 185, 85, 0.10); --pos-danger: #F97066; --pos-danger-rgb: 249, 112, 102; --pos-danger-hover: #F04438; --pos-danger-bg: rgba(249, 112, 102, 0.10); --pos-nav-text: #D4D4D8; --pos-nav-section: #71717A; --pos-nav-hover-bg: rgba(255, 255, 255, 0.05); --pos-nav-active-bg: rgba(255, 255, 255, 0.09); --pos-nav-active-text: #FFFFFF; --pos-radius: 10px; --pos-radius-sm: 8px; color-scheme: dark; } /* Shop colours: only a thin stripe on the shop name and the shop cards, so you always know which shop it is. */ :root { --shop-t1: #0E7490; --shop-t2: #6D28D9; --shop-t3: #047857; --shop-color: #8A8A8A; } :root[data-shop="T1"] { --shop-color: var(--shop-t1); } :root[data-shop="T2"] { --shop-color: var(--shop-t2); } :root[data-shop="T3"] { --shop-color: var(--shop-t3); } /* ---- Bootstrap mapped onto the tokens ------------------------------------------------------ */ :root[data-pos-theme] { --bs-body-font-family: "DM Sans", "Segoe UI", system-ui, -apple-system, sans-serif; --bs-body-bg: var(--pos-solid-bg); --bs-body-color: var(--pos-text); --bs-emphasis-color: var(--pos-text); --bs-heading-color: var(--pos-heading); --bs-secondary-color: var(--pos-text-2); --bs-tertiary-color: var(--pos-text-2); --bs-secondary-bg: var(--pos-glass-bg); --bs-tertiary-bg: var(--pos-glass-bg); --bs-border-color: var(--pos-solid-border); --bs-border-color-translucent: var(--pos-solid-border); --bs-border-radius: var(--pos-radius-sm); --bs-border-radius-lg: var(--pos-radius); --bs-primary: var(--pos-accent); --bs-primary-rgb: var(--pos-accent-rgb); --bs-link-color: var(--pos-link); --bs-link-color-rgb: var(--pos-accent-rgb); --bs-link-hover-color: var(--pos-accent-hover); --bs-link-hover-color-rgb: var(--pos-accent-rgb); --bs-success: var(--pos-success); --bs-success-rgb: var(--pos-success-rgb); --bs-warning: var(--pos-warning); --bs-warning-rgb: var(--pos-warning-rgb); --bs-danger: var(--pos-danger); --bs-danger-rgb: var(--pos-danger-rgb); --bs-success-text-emphasis: var(--pos-success); --bs-success-bg-subtle: var(--pos-success-bg); --bs-success-border-subtle: rgba(var(--pos-success-rgb), 0.3); --bs-warning-text-emphasis: var(--pos-warning); --bs-warning-bg-subtle: var(--pos-warning-bg); --bs-warning-border-subtle: rgba(var(--pos-warning-rgb), 0.3); --bs-danger-text-emphasis: var(--pos-danger); --bs-danger-bg-subtle: var(--pos-danger-bg); --bs-danger-border-subtle: rgba(var(--pos-danger-rgb), 0.3); --bs-primary-text-emphasis: var(--pos-text); --bs-primary-bg-subtle: rgba(var(--pos-accent-rgb), 0.06); --bs-primary-border-subtle: rgba(var(--pos-accent-rgb), 0.2); --bs-info-bg-subtle: rgba(var(--pos-accent-rgb), 0.04); --bs-info-border-subtle: var(--pos-solid-border); --bs-info-text-emphasis: var(--pos-text); } /* Low specificity on purpose: printed tickets (their own