/* ========================================================================================================== Rydwan - ewidencja czasu pracy: THE theme. Rules of this file - Every colour, size, radius, shadow, weight, duration and z-index is a custom property declared in the :root blocks below. Rules use var(--...) only. The only literals allowed outside :root are 0, 1px hairlines, %, auto, unitless ratios and keywords (and the breakpoints of @media, which CSS cannot take from variables). - Dark scheme: prefers-color-scheme redefines the colour tokens only. The sidebar stays near-black in both. - No web fonts, no url() in CSS, no data: URIs (the CSP allows only same-origin resources). The company logo and icon are the two PNG files in public/brand, placed with / by src/views/layout.mjs. - Page stylesheets (public/pages/*.css) may use tokens only, never literals, and never edit this file. Components (pages use only these classes) Shell .app .sidebar .brand-block .brand .brand-logo .brand-sub .demo-chip .nav .nav-label .nav-list .nav-link .nav-icon .nav-text .nav-badge .user-block .user .user-text .user-name .user-role .logout-form .main .content .skip-link .sr-only Page .page-header (h1 + .page-sub + .actions) .toolbar .grid-2 (+ aside) .stack .kpi-grid .stats .kpi (.kpi-icon[data-tone=ok|warn|neutral|accent] .kpi-label .kpi-value .kpi-hint) .card (.card-header .card-title .card-body .card-footer, .card-highlight, a.card) .empty (+ svg, h1/h2, p, .btn) Data .table-wrap .table (.table-dense, .num, .muted, .weekend, .problem, .corrected, tfoot totals) .cell-person .cell-text (.person) .row-actions .chip (.chip-ok|warn|danger|muted) .badge (.badge-ok|warn|danger|muted) .avatar[data-hue=0..5] (.avatar-sm .avatar-lg) .feed (li, .feed-time .feed-body|.feed-text .feed-meta .feed-icon) dl/dt/dd Forms .form .form-row .form-inline .form-actions .field (label, input, select, textarea, .hint, .error) .check .btn .btn-primary .btn-danger .btn-ghost .btn-link .btn-sm .btn-lg .btn-block .btn-icon details/summary Messages .flash .flash-ok .flash-error .flash-text Charts .ring (svg + any non-svg child is centred over it: .ring-value .ring-label) .bars .daybar .legend SVG text/shape classes: .chart-label .chart-label-strong .chart-value .chart-tick .chart-grid .chart-axis .chart-bar .chart-bar-muted .chart-track .daybar-track .daybar-presence .daybar-normal .daybar-overtime .daybar-hatch (also data-kind="track|presence|normal|overtime" and data-current) Rings: draw the arc rotated from 12 o'clock with the transform ATTRIBUTE on the circle (transform="rotate(-90 60 60)"); circles with stroke-dasharray are the value, others the track. Misc .mono .code-block .token-box .muted .num .nowrap .truncate .text-right .text-center .actions .stack .icon .icon-sm Overtime .ot-pill .ot-text .ot-meter (.ot-meter-track .ot-meter-fill) .chip-overtime .ot-col .ot-cell .kpi[data-emphasis="overtime"] (the loud tile); .early-tag (arrival before the schedule start: shown, not counted); .late-tag (exit within the overtime threshold after the schedule end: shown, not counted) .ot-reset .ot-reset-line .ot-reset-warn .ot-reset-form (the previous month's overtime, to be zeroed) Sign-in .auth .auth-aside .auth-aside-inner .auth-logo .auth-bar .auth-tagline .auth-main .auth-brand .auth-brand-logo .auth-content .auth-card (the motion lives in public/pages/login.css, its tokens are --auth-* below) ========================================================================================================== */ :root { color-scheme: light; /* ---- spacing: 4px base, every step a multiple ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ---- type ---- */ --font: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "SF Mono", Consolas, Menlo, "Liberation Mono", monospace; --text-xs: 12px; --text-sm: 13px; --text-base: 14px; --text-md: 16px; --text-lg: 20px; --text-xl: 24px; --text-2xl: 32px; --leading-xs: 16px; --leading-sm: 20px; --leading-base: 22px; --leading-md: 24px; --leading-lg: 28px; --leading-xl: 32px; --leading-2xl: 40px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-title: 650; --weight-bold: 700; --tracking-tight: -0.01em; --tracking-wide: 0.06em; --tracking-mono: 0.02em; /* ---- shape ---- */ --radius-xs: 4px; --radius-1: 8px; --radius-2: 12px; --radius-pill: 999px; --stroke: 2px; --focus-width: 2px; --focus-offset: 2px; --rotate-closed: -45deg; --rotate-open: 45deg; /* ---- layout sizes ---- */ --screen-h: 100vh; --sidebar-width: 248px; --content-max: 1280px; --aside-width: 340px; --gutter: 32px; --gutter-narrow: 24px; --control-h: 36px; --control-h-sm: 28px; --control-h-lg: 44px; --row-h: 52px; --row-h-dense: 44px; --nav-h: 40px; --avatar: 36px; --avatar-sm: 28px; --avatar-lg: 48px; --icon: 20px; --icon-sm: 16px; --brand-logo-w: 200px; --brand-logo-w-compact: 148px; --kpi-icon: 40px; --ring-size: 160px; --empty-art: 48px; --chip-h: 24px; --badge-h: 20px; --dot: 8px; --bar-w: 3px; --form-max: 480px; --field-min: 180px; --auth-card-w: 400px; --auth-aside-w: 440px; --auth-logo-w: 380px; --deco-size: 520px; --deco-stroke: 56px; --measure: 46ch; --feed-time-w: 48px; --table-min-h: 320px; --table-max-h: max(var(--table-min-h), calc(var(--screen-h) - var(--space-12) * 3)); --z-behind: -1; --z-sticky: 2; --z-topbar: 10; --z-skip: 100; /* ---- motion ---- */ --duration-fast: 120ms; --duration: 140ms; --duration-slow: 160ms; --ease: cubic-bezier(0.2, 0, 0, 1); --transition: background-color var(--duration) var(--ease), border-color var(--duration) var(--ease), color var(--duration) var(--ease), box-shadow var(--duration) var(--ease), opacity var(--duration) var(--ease); --transition-lift: var(--transition), transform var(--duration) var(--ease); --select-arrow: linear-gradient(45deg, transparent 50%, var(--color-muted) 50%), linear-gradient(135deg, var(--color-muted) 50%, transparent 50%); --opacity-disabled: 0.5; --opacity-glow: 0.55; /* ---- colour: surfaces and text (light) ---- */ --color-bg: #f3f4f6; --color-surface: #ffffff; --color-surface-2: #f8f9fb; --color-surface-3: #eff1f4; --color-border: #e4e6eb; --color-border-subtle: #eceef2; --color-border-strong: #cdd1da; --color-text: #16181d; --color-muted: #5b6270; --color-faint: #8a91a0; --color-white: #ffffff; --color-row-hover: #f6f7fa; --color-weekend: #f6f7f9; --color-track: #e6e8ed; --color-ink: #16181d; --color-ink-soft: #8a91a0; --color-scroll: #c8ccd5; /* ---- colour: sidebar (near-black in both schemes) ---- */ --color-sidebar: #141313; --color-sidebar-2: #232121; --color-sidebar-3: #2e2b2b; --color-sidebar-line: #2b2929; --color-sidebar-text: #f1f1f1; --color-sidebar-muted: #a9a7a7; --color-demo-dot: #f2b441; /* ---- colour: brand accent ---- */ --color-accent: #d80000; --color-accent-hover: #b80000; --color-accent-press: #970000; --color-accent-bright: #ff0000; --color-accent-deep: #550000; --color-accent-tint: #fff0f0; --color-accent-text: #ffffff; --color-link: #d80000; --color-link-hover: #b80000; --color-focus: #ff0000; /* ---- colour: status pairs (text on tint) ---- */ --color-ok: #0f7b4f; --color-ok-bg: #e5f5ec; --color-ok-border: #bfe3d0; --color-warn: #9a5b00; --color-warn-bg: #fff3dc; --color-warn-border: #f1d8a3; --color-danger: #b42318; --color-danger-bg: #feecea; --color-danger-border: #f4c3bd; --color-neutral: #4b5260; --color-neutral-bg: #eceef2; /* ---- colour: six calm avatar tints ---- */ --hue-0-bg: #fde7e7; --hue-0-fg: #a61b1b; --hue-1-bg: #fbebcf; --hue-1-fg: #7f4b00; --hue-2-bg: #ddf1e6; --hue-2-fg: #0d6240; --hue-3-bg: #e0eafa; --hue-3-fg: #234682; --hue-4-bg: #ebe4f7; --hue-4-fg: #53358a; --hue-5-bg: #e6e8ed; --hue-5-fg: #3c4352; /* ---- elevation ---- */ --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.08); --shadow-2: 0 4px 12px rgba(16, 24, 40, 0.1); /* Obsidian glass: the look of the dashboard "Obecność dziś" (public/pages/today.css). A stage of soft light with a fine grain, cards of frosted glass with a gradient hairline edge, big numerals, glowing marks of data. Everything the page uses is a token here. */ --radius-glass: 20px; --glass-blur: 24px; --glass-saturate: 160%; --glass-fill: linear-gradient(155deg, rgba(255, 255, 255, 0.84), rgba(255, 255, 255, 0.5) 52%, rgba(255, 255, 255, 0.66)); --glass-fill-accent: linear-gradient(155deg, rgba(255, 96, 96, 0.3), rgba(255, 255, 255, 0.55) 60%, rgba(255, 120, 120, 0.2)); --glass-fill-solid: rgba(255, 255, 255, 0.96); --glass-edge-line: linear-gradient(155deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.4) 28%, rgba(120, 132, 200, 0.16) 62%, rgba(255, 80, 80, 0.34)); --glass-edge-line-hover: linear-gradient(155deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.6) 30%, rgba(120, 132, 200, 0.3) 62%, rgba(255, 60, 60, 0.62)); --glass-edge-line-accent: linear-gradient(155deg, rgba(255, 255, 255, 0.9), rgba(255, 120, 120, 0.4) 40%, rgba(255, 40, 40, 0.5)); --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 28px 56px -24px rgba(52, 62, 140, 0.34), 0 2px 8px rgba(52, 62, 140, 0.07); --glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 38px 66px -22px rgba(52, 62, 140, 0.44), 0 4px 14px rgba(52, 62, 140, 0.1); --glass-hairline: rgba(70, 82, 150, 0.12); --glass-row-hover: rgba(80, 96, 200, 0.07); --glass-mask: linear-gradient(black 0 0); --aurora: radial-gradient(60% 50% at 6% 0%, rgba(255, 92, 92, 0.22), transparent 70%), radial-gradient(48% 44% at 100% 4%, rgba(104, 124, 255, 0.26), transparent 70%), radial-gradient(56% 56% at 80% 100%, rgba(255, 176, 96, 0.26), transparent 70%), radial-gradient(44% 44% at 0% 96%, rgba(70, 200, 210, 0.16), transparent 70%), linear-gradient(180deg, #f7f8fc, #eceff9); --display-fill: linear-gradient(180deg, #0b0c14, #4d5270); --text-display: 48px; --leading-display: 52px; --text-2xs: 11px; --caps-tracking: 0.09em; --tracking-display: -0.035em; --live-dur: 2.4s; --lift-dur: 280ms; --icon-glow-ok: 0 0 0 1px rgba(22, 163, 74, 0.25), 0 10px 26px -6px rgba(22, 163, 74, 0.55); --icon-glow-warn: 0 0 0 1px rgba(217, 119, 6, 0.28), 0 10px 26px -6px rgba(217, 119, 6, 0.55); --icon-glow-accent: 0 0 0 1px rgba(255, 30, 30, 0.25), 0 10px 26px -6px rgba(255, 30, 30, 0.55); --icon-glow-neutral: 0 0 0 1px rgba(100, 116, 160, 0.25), 0 10px 26px -6px rgba(100, 116, 160, 0.45); --meter-track: rgba(90, 100, 150, 0.16); --meter-glow-ok: drop-shadow(0 0 6px rgba(22, 163, 74, 0.6)); --meter-glow-warn: drop-shadow(0 0 6px rgba(217, 119, 6, 0.6)); --meter-glow-accent: drop-shadow(0 0 6px rgba(255, 30, 30, 0.6)); --meter-glow-neutral: drop-shadow(0 0 6px rgba(100, 116, 160, 0.5)); --bar-top: #ff6a5c; --bar-bottom: #d40000; --bar-glow: drop-shadow(0 6px 10px rgba(255, 40, 40, 0.34)); --ring-from: #ff8a48; --ring-to: #e00000; --ring-glow: drop-shadow(0 6px 12px rgba(255, 50, 30, 0.42)); --dot-glow: 0 0 0 3px rgba(255, 30, 30, 0.14), 0 0 14px rgba(255, 30, 30, 0.7); --live-ring: 0 0 0 0 rgba(22, 163, 74, 0.5); --nav-glow: 0 0 22px -2px rgba(255, 40, 40, 0.55); --nav-active-fill: linear-gradient(90deg, rgba(255, 40, 40, 0.26), rgba(255, 255, 255, 0.05) 85%); --glass-fill-card: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.74)); --cta-fill: linear-gradient(180deg, #ff5242, #d20000); --cta-fill-hover: linear-gradient(180deg, #ff6657, #e30000); --cta-glow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 14px 32px -10px rgba(255, 30, 30, 0.7), 0 2px 6px rgba(120, 0, 0, 0.3); --cta-glow-hover: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 20px 40px -10px rgba(255, 30, 30, 0.85), 0 2px 8px rgba(120, 0, 0, 0.35); --field-glass: rgba(255, 255, 255, 0.7); --shadow-3: 0 12px 32px rgba(16, 24, 40, 0.16); --auth-logo-rest-glow: drop-shadow(0 4px 12px rgba(255, 0, 0, 0.3)); /* ---- overtime: time worked after the schedule end (default 16:00) always wears this red; standard time stays plain ink ---- */ --color-overtime: #d80000; --color-overtime-solid: #d80000; --color-overtime-bg: #fff0f0; --color-overtime-wash: #fff6f6; /* ---- sign-in motion (public/pages/login.css): entrance, ambient loops, focus and error. prefers-reduced-motion switches it all off ---- */ --auth-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --auth-t-enter: 700ms; --auth-t-step: 90ms; --auth-t-roll: 1400ms; --auth-t-shake: 480ms; --auth-t-pulse: 4500ms; --auth-t-sheen: 5500ms; --auth-t-orbit: 6s; --auth-t-blob: 18s; --auth-t-aurora: 26s; --auth-t-embers-fast: 24s; --auth-t-embers-slow: 38s; --auth-t-wheel: 70s; --auth-rise: 20px; --auth-shake: 8px; --auth-roll: 40%; --auth-drift: 6%; --auth-bleed: 25%; --auth-blob: 520px; --auth-ring: 2px; --auth-turn: 360deg; --auth-tilt: 7deg; --auth-spoke: 3deg; --auth-spoke-gap: 36deg; --auth-sheen-w: 40%; --auth-ember-span: var(--screen-h); --auth-ember-hot: rgba(255, 0, 0, 0.85); --auth-ember-mid: rgba(255, 0, 0, 0.45); --auth-ember-ash: rgba(241, 241, 241, 0.4); --auth-glow-hot: rgba(255, 0, 0, 0.3); --auth-logo-glow: drop-shadow(0 6px 28px rgba(255, 0, 0, 0.55)); --auth-blob-color: rgba(216, 0, 0, 0.1); --auth-focus-ring: 0 0 0 4px rgba(216, 0, 0, 0.18); --auth-btn-glow: 0 8px 24px rgba(216, 0, 0, 0.35); --auth-sheen: rgba(255, 255, 255, 0.45); --auth-embers-slow: calc(50vw * 0.260) calc(var(--auth-ember-span) * -0.056) 8px 2px var(--auth-ember-mid), calc(50vw * 0.260) calc(var(--auth-ember-span) * 0.944) 8px 2px var(--auth-ember-mid), calc(50vw * 0.893) calc(var(--auth-ember-span) * -0.085) 8px 2px var(--auth-ember-mid), calc(50vw * 0.893) calc(var(--auth-ember-span) * 0.915) 8px 2px var(--auth-ember-mid), calc(50vw * 0.372) calc(var(--auth-ember-span) * -0.156) 8px 2px var(--auth-ember-hot), calc(50vw * 0.372) calc(var(--auth-ember-span) * 0.844) 8px 2px var(--auth-ember-hot), calc(50vw * 0.945) calc(var(--auth-ember-span) * -0.274) 8px 2px var(--auth-ember-mid), calc(50vw * 0.945) calc(var(--auth-ember-span) * 0.726) 8px 2px var(--auth-ember-mid), calc(50vw * 0.456) calc(var(--auth-ember-span) * -0.324) 8px 2px var(--auth-ember-mid), calc(50vw * 0.456) calc(var(--auth-ember-span) * 0.676) 8px 2px var(--auth-ember-mid), calc(50vw * 0.755) calc(var(--auth-ember-span) * -0.407) 8px 2px var(--auth-ember-mid), calc(50vw * 0.755) calc(var(--auth-ember-span) * 0.593) 8px 2px var(--auth-ember-mid), calc(50vw * 0.476) calc(var(--auth-ember-span) * -0.482) 8px 2px var(--auth-ember-mid), calc(50vw * 0.476) calc(var(--auth-ember-span) * 0.518) 8px 2px var(--auth-ember-mid), calc(50vw * 0.483) calc(var(--auth-ember-span) * -0.515) 8px 2px var(--auth-ember-mid), calc(50vw * 0.483) calc(var(--auth-ember-span) * 0.485) 8px 2px var(--auth-ember-mid), calc(50vw * 0.807) calc(var(--auth-ember-span) * -0.600) 8px 2px var(--auth-ember-hot), calc(50vw * 0.807) calc(var(--auth-ember-span) * 0.400) 8px 2px var(--auth-ember-hot), calc(50vw * 0.943) calc(var(--auth-ember-span) * -0.660) 8px 2px var(--auth-ember-mid), calc(50vw * 0.943) calc(var(--auth-ember-span) * 0.340) 8px 2px var(--auth-ember-mid), calc(50vw * 0.460) calc(var(--auth-ember-span) * -0.730) 8px 2px var(--auth-ember-hot), calc(50vw * 0.460) calc(var(--auth-ember-span) * 0.270) 8px 2px var(--auth-ember-hot), calc(50vw * 0.612) calc(var(--auth-ember-span) * -0.835) 8px 2px var(--auth-ember-hot), calc(50vw * 0.612) calc(var(--auth-ember-span) * 0.165) 8px 2px var(--auth-ember-hot), calc(50vw * 0.597) calc(var(--auth-ember-span) * -0.914) 8px 2px var(--auth-ember-hot), calc(50vw * 0.597) calc(var(--auth-ember-span) * 0.086) 8px 2px var(--auth-ember-hot), calc(50vw * 0.583) calc(var(--auth-ember-span) * -0.957) 8px 2px var(--auth-ember-hot), calc(50vw * 0.583) calc(var(--auth-ember-span) * 0.043) 8px 2px var(--auth-ember-hot); --auth-embers-fast: calc(50vw * 0.268) calc(var(--auth-ember-span) * -0.009) 3px 1px var(--auth-ember-hot), calc(50vw * 0.268) calc(var(--auth-ember-span) * 0.991) 3px 1px var(--auth-ember-hot), calc(50vw * 0.790) calc(var(--auth-ember-span) * -0.049) 3px 1px var(--auth-ember-ash), calc(50vw * 0.790) calc(var(--auth-ember-span) * 0.951) 3px 1px var(--auth-ember-ash), calc(50vw * 0.689) calc(var(--auth-ember-span) * -0.091) 3px 1px var(--auth-ember-ash), calc(50vw * 0.689) calc(var(--auth-ember-span) * 0.909) 3px 1px var(--auth-ember-ash), calc(50vw * 0.374) calc(var(--auth-ember-span) * -0.156) 3px 1px var(--auth-ember-ash), calc(50vw * 0.374) calc(var(--auth-ember-span) * 0.844) 3px 1px var(--auth-ember-ash), calc(50vw * 0.865) calc(var(--auth-ember-span) * -0.184) 3px 1px var(--auth-ember-hot), calc(50vw * 0.865) calc(var(--auth-ember-span) * 0.816) 3px 1px var(--auth-ember-hot), calc(50vw * 0.927) calc(var(--auth-ember-span) * -0.228) 3px 1px var(--auth-ember-ash), calc(50vw * 0.927) calc(var(--auth-ember-span) * 0.772) 3px 1px var(--auth-ember-ash), calc(50vw * 0.629) calc(var(--auth-ember-span) * -0.260) 3px 1px var(--auth-ember-ash), calc(50vw * 0.629) calc(var(--auth-ember-span) * 0.740) 3px 1px var(--auth-ember-ash), calc(50vw * 0.950) calc(var(--auth-ember-span) * -0.303) 3px 1px var(--auth-ember-ash), calc(50vw * 0.950) calc(var(--auth-ember-span) * 0.697) 3px 1px var(--auth-ember-ash), calc(50vw * 0.640) calc(var(--auth-ember-span) * -0.368) 3px 1px var(--auth-ember-mid), calc(50vw * 0.640) calc(var(--auth-ember-span) * 0.632) 3px 1px var(--auth-ember-mid), calc(50vw * 0.400) calc(var(--auth-ember-span) * -0.398) 3px 1px var(--auth-ember-ash), calc(50vw * 0.400) calc(var(--auth-ember-span) * 0.602) 3px 1px var(--auth-ember-ash), calc(50vw * 0.554) calc(var(--auth-ember-span) * -0.447) 3px 1px var(--auth-ember-hot), calc(50vw * 0.554) calc(var(--auth-ember-span) * 0.553) 3px 1px var(--auth-ember-hot), calc(50vw * 0.201) calc(var(--auth-ember-span) * -0.474) 3px 1px var(--auth-ember-hot), calc(50vw * 0.201) calc(var(--auth-ember-span) * 0.526) 3px 1px var(--auth-ember-hot), calc(50vw * 0.190) calc(var(--auth-ember-span) * -0.525) 3px 1px var(--auth-ember-ash), calc(50vw * 0.190) calc(var(--auth-ember-span) * 0.475) 3px 1px var(--auth-ember-ash), calc(50vw * 0.138) calc(var(--auth-ember-span) * -0.575) 3px 1px var(--auth-ember-mid), calc(50vw * 0.138) calc(var(--auth-ember-span) * 0.425) 3px 1px var(--auth-ember-mid), calc(50vw * 0.907) calc(var(--auth-ember-span) * -0.592) 3px 1px var(--auth-ember-ash), calc(50vw * 0.907) calc(var(--auth-ember-span) * 0.408) 3px 1px var(--auth-ember-ash), calc(50vw * 0.166) calc(var(--auth-ember-span) * -0.643) 3px 1px var(--auth-ember-ash), calc(50vw * 0.166) calc(var(--auth-ember-span) * 0.357) 3px 1px var(--auth-ember-ash), calc(50vw * 0.526) calc(var(--auth-ember-span) * -0.687) 3px 1px var(--auth-ember-hot), calc(50vw * 0.526) calc(var(--auth-ember-span) * 0.313) 3px 1px var(--auth-ember-hot), calc(50vw * 0.789) calc(var(--auth-ember-span) * -0.728) 3px 1px var(--auth-ember-mid), calc(50vw * 0.789) calc(var(--auth-ember-span) * 0.272) 3px 1px var(--auth-ember-mid), calc(50vw * 0.605) calc(var(--auth-ember-span) * -0.767) 3px 1px var(--auth-ember-ash), calc(50vw * 0.605) calc(var(--auth-ember-span) * 0.233) 3px 1px var(--auth-ember-ash), calc(50vw * 0.944) calc(var(--auth-ember-span) * -0.813) 3px 1px var(--auth-ember-ash), calc(50vw * 0.944) calc(var(--auth-ember-span) * 0.187) 3px 1px var(--auth-ember-ash), calc(50vw * 0.242) calc(var(--auth-ember-span) * -0.845) 3px 1px var(--auth-ember-hot), calc(50vw * 0.242) calc(var(--auth-ember-span) * 0.155) 3px 1px var(--auth-ember-hot), calc(50vw * 0.290) calc(var(--auth-ember-span) * -0.897) 3px 1px var(--auth-ember-mid), calc(50vw * 0.290) calc(var(--auth-ember-span) * 0.103) 3px 1px var(--auth-ember-mid), calc(50vw * 0.787) calc(var(--auth-ember-span) * -0.949) 3px 1px var(--auth-ember-hot), calc(50vw * 0.787) calc(var(--auth-ember-span) * 0.051) 3px 1px var(--auth-ember-hot), calc(50vw * 0.894) calc(var(--auth-ember-span) * -0.985) 3px 1px var(--auth-ember-ash), calc(50vw * 0.894) calc(var(--auth-ember-span) * 0.015) 3px 1px var(--auth-ember-ash); } @media screen and (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --color-bg: #0e0e10; --color-surface: #17171a; --color-surface-2: #1e1e22; --color-surface-3: #26262b; --color-border: #2a2a30; --color-border-subtle: #222226; --color-border-strong: #3a3a42; --color-text: #f1f1f3; --color-muted: #a3a7b3; --color-faint: #7b8090; --color-row-hover: #1c1c20; --color-weekend: #131316; --color-track: #2a2a30; --color-ink: #f1f1f3; --color-ink-soft: #7b8090; --color-scroll: #3a3a42; --color-accent: #e11d1d; --color-accent-hover: #f03a3a; --color-accent-press: #c41616; --color-accent-tint: #2a1517; --color-link: #ff7b7b; --color-link-hover: #ff9c9c; --color-ok: #52d6a0; --color-ok-bg: #10281e; --color-ok-border: #1d4d39; --color-warn: #f2b441; --color-warn-bg: #2e2310; --color-warn-border: #5a4317; --color-danger: #ff8f85; --color-danger-bg: #321614; --color-danger-border: #6a2a25; --color-neutral: #b9becb; --color-neutral-bg: #26272d; --hue-0-bg: #3a1a1c; --hue-0-fg: #ff9a94; --hue-1-bg: #36290f; --hue-1-fg: #f0b95a; --hue-2-bg: #12301f; --hue-2-fg: #6fd7a3; --hue-3-bg: #172a4a; --hue-3-fg: #8fb3f2; --hue-4-bg: #2a2140; --hue-4-fg: #b9a2ee; --hue-5-bg: #2b2c33; --hue-5-fg: #bfc4d2; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5); --glass-fill: linear-gradient(155deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 48%, rgba(255, 255, 255, 0.055)), rgba(15, 15, 21, 0.58); --glass-fill-accent: linear-gradient(155deg, rgba(255, 40, 40, 0.24), rgba(255, 40, 40, 0.05) 55%, rgba(255, 40, 40, 0.12)), rgba(22, 8, 10, 0.6); --glass-fill-solid: rgba(20, 20, 26, 0.97); --glass-edge-line: linear-gradient(155deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 70, 70, 0.34)); --glass-edge-line-hover: linear-gradient(155deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 70, 70, 0.66)); --glass-edge-line-accent: linear-gradient(155deg, rgba(255, 255, 255, 0.3), rgba(255, 80, 80, 0.4) 45%, rgba(255, 30, 30, 0.6)); --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -22px rgba(0, 0, 0, 0.78), 0 2px 10px rgba(0, 0, 0, 0.35); --glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 42px 72px -20px rgba(0, 0, 0, 0.88), 0 4px 18px rgba(0, 0, 0, 0.45); --glass-hairline: rgba(255, 255, 255, 0.07); --glass-row-hover: rgba(255, 255, 255, 0.045); --aurora: radial-gradient(58% 46% at 6% 0%, rgba(255, 24, 24, 0.34), transparent 70%), radial-gradient(46% 42% at 100% 4%, rgba(80, 100, 255, 0.32), transparent 70%), radial-gradient(52% 52% at 82% 100%, rgba(255, 120, 30, 0.22), transparent 70%), radial-gradient(40% 40% at 0% 96%, rgba(20, 184, 166, 0.16), transparent 70%), linear-gradient(180deg, #0b0b10, #07070a); --display-fill: linear-gradient(180deg, #ffffff, #9aa0b6); --glass-fill-card: linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)), rgba(14, 14, 20, 0.78); --field-glass: rgba(255, 255, 255, 0.05); --icon-glow-ok: 0 0 0 1px rgba(52, 211, 153, 0.3), 0 10px 28px -6px rgba(52, 211, 153, 0.6); --icon-glow-warn: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 10px 28px -6px rgba(251, 191, 36, 0.55); --icon-glow-accent: 0 0 0 1px rgba(255, 70, 70, 0.34), 0 10px 28px -6px rgba(255, 40, 40, 0.7); --icon-glow-neutral: 0 0 0 1px rgba(160, 170, 210, 0.22), 0 10px 28px -6px rgba(140, 150, 200, 0.4); --meter-track: rgba(255, 255, 255, 0.09); --meter-glow-ok: drop-shadow(0 0 8px rgba(52, 211, 153, 0.75)); --meter-glow-warn: drop-shadow(0 0 8px rgba(251, 191, 36, 0.7)); --meter-glow-accent: drop-shadow(0 0 8px rgba(255, 50, 50, 0.8)); --meter-glow-neutral: drop-shadow(0 0 8px rgba(160, 170, 210, 0.55)); --bar-top: #ff7468; --bar-bottom: #c20000; --bar-glow: drop-shadow(0 0 12px rgba(255, 40, 40, 0.6)); --ring-from: #ff9a52; --ring-to: #ff1a1a; --ring-glow: drop-shadow(0 0 14px rgba(255, 50, 30, 0.6)); --dot-glow: 0 0 0 3px rgba(255, 30, 30, 0.2), 0 0 16px rgba(255, 30, 30, 0.85); --live-ring: 0 0 0 0 rgba(52, 211, 153, 0.55); --nav-glow: 0 0 26px -2px rgba(255, 40, 40, 0.7); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6); --color-overtime: #ff7b7b; --color-overtime-solid: #e11d1d; --color-overtime-bg: #2a1517; --color-overtime-wash: #1e1315; --auth-blob-color: rgba(225, 29, 29, 0.2); --auth-focus-ring: 0 0 0 4px rgba(225, 29, 29, 0.35); } } /* The dark theme chosen by hand (the switch in the menu): the very same tokens as the block above, whatever the system prefers. (The light theme chosen by hand is the base :root: the block above leaves it alone when data-theme="light".) */ @media screen { :root[data-theme="dark"] { color-scheme: dark; --color-bg: #0e0e10; --color-surface: #17171a; --color-surface-2: #1e1e22; --color-surface-3: #26262b; --color-border: #2a2a30; --color-border-subtle: #222226; --color-border-strong: #3a3a42; --color-text: #f1f1f3; --color-muted: #a3a7b3; --color-faint: #7b8090; --color-row-hover: #1c1c20; --color-weekend: #131316; --color-track: #2a2a30; --color-ink: #f1f1f3; --color-ink-soft: #7b8090; --color-scroll: #3a3a42; --color-accent: #e11d1d; --color-accent-hover: #f03a3a; --color-accent-press: #c41616; --color-accent-tint: #2a1517; --color-link: #ff7b7b; --color-link-hover: #ff9c9c; --color-ok: #52d6a0; --color-ok-bg: #10281e; --color-ok-border: #1d4d39; --color-warn: #f2b441; --color-warn-bg: #2e2310; --color-warn-border: #5a4317; --color-danger: #ff8f85; --color-danger-bg: #321614; --color-danger-border: #6a2a25; --color-neutral: #b9becb; --color-neutral-bg: #26272d; --hue-0-bg: #3a1a1c; --hue-0-fg: #ff9a94; --hue-1-bg: #36290f; --hue-1-fg: #f0b95a; --hue-2-bg: #12301f; --hue-2-fg: #6fd7a3; --hue-3-bg: #172a4a; --hue-3-fg: #8fb3f2; --hue-4-bg: #2a2140; --hue-4-fg: #b9a2ee; --hue-5-bg: #2b2c33; --hue-5-fg: #bfc4d2; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4); --shadow-2: 0 4px 16px rgba(0, 0, 0, 0.5); --glass-fill: linear-gradient(155deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.025) 48%, rgba(255, 255, 255, 0.055)), rgba(15, 15, 21, 0.58); --glass-fill-accent: linear-gradient(155deg, rgba(255, 40, 40, 0.24), rgba(255, 40, 40, 0.05) 55%, rgba(255, 40, 40, 0.12)), rgba(22, 8, 10, 0.6); --glass-fill-solid: rgba(20, 20, 26, 0.97); --glass-edge-line: linear-gradient(155deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 30%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 70, 70, 0.34)); --glass-edge-line-hover: linear-gradient(155deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.1) 30%, rgba(255, 255, 255, 0.06) 62%, rgba(255, 70, 70, 0.66)); --glass-edge-line-accent: linear-gradient(155deg, rgba(255, 255, 255, 0.3), rgba(255, 80, 80, 0.4) 45%, rgba(255, 30, 30, 0.6)); --glass-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 30px 60px -22px rgba(0, 0, 0, 0.78), 0 2px 10px rgba(0, 0, 0, 0.35); --glass-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 42px 72px -20px rgba(0, 0, 0, 0.88), 0 4px 18px rgba(0, 0, 0, 0.45); --glass-hairline: rgba(255, 255, 255, 0.07); --glass-row-hover: rgba(255, 255, 255, 0.045); --aurora: radial-gradient(58% 46% at 6% 0%, rgba(255, 24, 24, 0.34), transparent 70%), radial-gradient(46% 42% at 100% 4%, rgba(80, 100, 255, 0.32), transparent 70%), radial-gradient(52% 52% at 82% 100%, rgba(255, 120, 30, 0.22), transparent 70%), radial-gradient(40% 40% at 0% 96%, rgba(20, 184, 166, 0.16), transparent 70%), linear-gradient(180deg, #0b0b10, #07070a); --display-fill: linear-gradient(180deg, #ffffff, #9aa0b6); --glass-fill-card: linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02)), rgba(14, 14, 20, 0.78); --field-glass: rgba(255, 255, 255, 0.05); --icon-glow-ok: 0 0 0 1px rgba(52, 211, 153, 0.3), 0 10px 28px -6px rgba(52, 211, 153, 0.6); --icon-glow-warn: 0 0 0 1px rgba(251, 191, 36, 0.3), 0 10px 28px -6px rgba(251, 191, 36, 0.55); --icon-glow-accent: 0 0 0 1px rgba(255, 70, 70, 0.34), 0 10px 28px -6px rgba(255, 40, 40, 0.7); --icon-glow-neutral: 0 0 0 1px rgba(160, 170, 210, 0.22), 0 10px 28px -6px rgba(140, 150, 200, 0.4); --meter-track: rgba(255, 255, 255, 0.09); --meter-glow-ok: drop-shadow(0 0 8px rgba(52, 211, 153, 0.75)); --meter-glow-warn: drop-shadow(0 0 8px rgba(251, 191, 36, 0.7)); --meter-glow-accent: drop-shadow(0 0 8px rgba(255, 50, 50, 0.8)); --meter-glow-neutral: drop-shadow(0 0 8px rgba(160, 170, 210, 0.55)); --bar-top: #ff7468; --bar-bottom: #c20000; --bar-glow: drop-shadow(0 0 12px rgba(255, 40, 40, 0.6)); --ring-from: #ff9a52; --ring-to: #ff1a1a; --ring-glow: drop-shadow(0 0 14px rgba(255, 50, 30, 0.6)); --dot-glow: 0 0 0 3px rgba(255, 30, 30, 0.2), 0 0 16px rgba(255, 30, 30, 0.85); --live-ring: 0 0 0 0 rgba(52, 211, 153, 0.55); --nav-glow: 0 0 26px -2px rgba(255, 40, 40, 0.7); --shadow-3: 0 12px 32px rgba(0, 0, 0, 0.6); --color-overtime: #ff7b7b; --color-overtime-solid: #e11d1d; --color-overtime-bg: #2a1517; --color-overtime-wash: #1e1315; --auth-blob-color: rgba(225, 29, 29, 0.2); --auth-focus-ring: 0 0 0 4px rgba(225, 29, 29, 0.35); } } @supports (height: 100dvh) { :root { --screen-h: 100dvh; } } /* ========================================================================================================== Base ========================================================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: var(--space-6); } body { margin: 0; min-height: var(--screen-h); background: var(--color-bg); color: var(--color-text); font-family: var(--font); font-size: var(--text-base); line-height: var(--leading-base); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: var(--weight-semibold); color: var(--color-text); } h1 { font-size: var(--text-xl); line-height: var(--leading-xl); font-weight: var(--weight-title); letter-spacing: var(--tracking-tight); } h2 { font-size: var(--text-md); line-height: var(--leading-md); } h3 { font-size: var(--text-base); line-height: var(--leading-base); } p { margin: 0; } p + p { margin-top: var(--space-2); } ul, ol { margin: 0; padding-left: var(--space-5); } small { font-size: var(--text-sm); } strong, b { font-weight: var(--weight-semibold); } hr { height: 0; margin: var(--space-6) 0; border: 0; border-top: 1px solid var(--color-border); } a { color: var(--color-link); text-decoration: none; transition: var(--transition); } a:hover { color: var(--color-link-hover); text-decoration: underline; text-underline-offset: var(--space-1); } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); } :focus:not(:focus-visible) { outline: none; } ::selection { background: var(--color-accent-tint); color: var(--color-text); } svg { flex: none; vertical-align: middle; } /* an icon svg without its own size attributes still gets a sane size */ svg:where(:not([width]):not([height])) { width: var(--icon); height: var(--icon); } .icon { width: var(--icon); height: var(--icon); flex: none; } .icon-sm { width: var(--icon-sm); height: var(--icon-sm); } .sprite { position: absolute; width: 0; height: 0; overflow: hidden; } [hidden] { display: none !important; } .sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .skip-link { position: fixed; top: var(--space-2); left: var(--space-2); z-index: var(--z-skip); padding: var(--space-2) var(--space-4); border-radius: var(--radius-1); background: var(--color-accent); color: var(--color-accent-text); font-weight: var(--weight-semibold); transform: translateY(-200%); transition: transform var(--duration) var(--ease); } .skip-link:focus { transform: translateY(0); color: var(--color-accent-text); text-decoration: none; } code, kbd, samp, .mono { font-family: var(--font-mono); letter-spacing: var(--tracking-mono); } code, kbd, samp { padding: 0 var(--space-1); border-radius: var(--radius-xs); background: var(--color-surface-3); font-size: var(--text-sm); } .mono { font-size: var(--text-sm); } .muted { color: var(--color-muted); } .num { text-align: right; font-variant-numeric: tabular-nums; } .nowrap { white-space: nowrap; } .text-right { text-align: right; } .text-center { text-align: center; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } time, .tabular { font-variant-numeric: tabular-nums; } dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-2) var(--space-6); margin: 0; } dl > div { display: contents; } dt { color: var(--color-muted); font-weight: var(--weight-medium); } dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } pre, .code-block, .token-box { display: block; margin: 0; padding: var(--space-3) var(--space-4); overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-1); background: var(--color-surface-2); color: var(--color-text); font-family: var(--font-mono); font-size: var(--text-sm); line-height: var(--leading-md); letter-spacing: var(--tracking-mono); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; } pre code { padding: 0; background: none; } /* ========================================================================================================== Shell: sidebar + content ========================================================================================================== */ .app { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); min-height: var(--screen-h); } .sidebar { position: sticky; top: 0; align-self: start; display: flex; flex-direction: column; gap: var(--space-6); height: var(--screen-h); padding: var(--space-5) var(--space-3) var(--space-4); overflow-y: auto; overscroll-behavior: contain; background: var(--color-sidebar); color: var(--color-sidebar-text); scrollbar-width: thin; scrollbar-color: var(--color-sidebar-3) transparent; } .brand-block { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); padding: var(--space-1) var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-sidebar-line); } .brand { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-width: 0; color: var(--color-sidebar-text); text-decoration: none; } .brand:hover { color: var(--color-white); text-decoration: none; } /* the company logo exactly as on rydwan.eu: white on transparent, so it sits on the near-black sidebar */ .brand-logo { display: block; width: var(--brand-logo-w); max-width: 100%; height: auto; flex: none; } .brand-sub { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-sidebar-muted); } .demo-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--chip-h); padding: 0 var(--space-3); border: 1px solid var(--color-sidebar-line); border-radius: var(--radius-pill); background: var(--color-sidebar-2); color: var(--color-sidebar-text); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; } .demo-chip::before { content: ""; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--color-demo-dot); } .nav { min-height: 0; } .nav-label { margin: 0 0 var(--space-2); padding: 0 var(--space-3); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-sidebar-muted); } .nav-list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; } .nav-link { position: relative; display: flex; align-items: center; gap: var(--space-3); min-height: var(--nav-h); padding: 0 var(--space-3); border-radius: var(--radius-1); color: var(--color-sidebar-muted); font-weight: var(--weight-medium); text-decoration: none; transition: var(--transition); } .nav-icon { width: var(--icon); height: var(--icon); flex: none; } .nav-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-link:hover { background: var(--color-sidebar-2); color: var(--color-sidebar-text); text-decoration: none; } .nav-link:active { background: var(--color-sidebar-3); } .nav-link[aria-current="page"] { background: var(--nav-active-fill), var(--color-sidebar-3); color: var(--color-white); font-weight: var(--weight-semibold); } .nav-link[aria-current="page"]::before { content: ""; position: absolute; top: var(--space-2); bottom: var(--space-2); left: 0; width: var(--bar-w); border-radius: var(--radius-pill); background: var(--color-accent-bright); box-shadow: var(--nav-glow); } .nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: var(--icon); height: var(--icon); margin-left: auto; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--color-accent); color: var(--color-accent-text); font-size: var(--text-xs); font-weight: var(--weight-bold); line-height: 1; } .user-block { display: flex; flex-direction: column; gap: var(--space-3); margin-top: auto; padding-top: var(--space-4); border-top: 1px solid var(--color-sidebar-line); } .user { display: flex; align-items: center; gap: var(--space-3); min-width: 0; padding: 0 var(--space-3); } .user-text { display: flex; flex-direction: column; min-width: 0; } .user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--color-sidebar-text); font-weight: var(--weight-medium); line-height: var(--leading-sm); } .user-role { font-size: var(--text-xs); line-height: var(--leading-xs); color: var(--color-sidebar-muted); } .sidebar .avatar[data-hue], .sidebar .avatar { background: var(--color-accent-deep); color: var(--color-white); } .logout-form { margin: 0; } .logout-form .btn { width: 100%; } .sidebar .btn-ghost { border-color: var(--color-sidebar-line); color: var(--color-sidebar-muted); } .sidebar .btn-ghost:hover { border-color: var(--color-sidebar-3); background: var(--color-sidebar-2); color: var(--color-white); } .sidebar .btn-ghost:active { background: var(--color-sidebar-3); } .main { min-width: 0; } .main:focus { outline: none; } .content { max-width: var(--content-max); margin: 0 auto; padding: var(--space-8) var(--gutter) var(--space-12); } /* vertical rhythm between the blocks of a page */ .content > * + * { margin-top: var(--space-6); } .stack > * + * { margin-top: var(--space-4); } /* a heading sits close to the block it introduces */ .content > h2 + *, .content > h3 + * { margin-top: var(--space-3); } /* ========================================================================================================== Page structure ========================================================================================================== */ .page-header { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--space-4); row-gap: var(--space-1); } .page-header > :not(.actions) { grid-column: 1; min-width: 0; } .page-header > .actions { grid-column: 2; grid-row: 1 / span 2; justify-self: end; } .page-sub { margin: 0; color: var(--color-muted); font-size: var(--text-base); line-height: var(--leading-base); } .actions:not(td):not(th), .page-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .toolbar { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3) var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-2); background: var(--color-surface); box-shadow: var(--shadow-1); } .toolbar .field { flex: 0 1 var(--field-min); } .toolbar .field input, .toolbar .field select { width: 100%; } .toolbar .actions, .toolbar-end { margin-left: auto; } .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) var(--aside-width); gap: var(--space-6); align-items: start; } .grid-2 > aside, .grid-2 > .aside { display: flex; flex-direction: column; gap: var(--space-6); min-width: 0; } .grid-2 > * { min-width: 0; } /* ---- cards ---- */ .card { min-width: 0; border: 1px solid var(--color-border); border-radius: var(--radius-2); background: var(--color-surface); box-shadow: var(--shadow-1); transition: var(--transition-lift); } a.card, .card-interactive { display: block; color: inherit; text-decoration: none; } a.card:hover, .card-interactive:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-2); color: inherit; text-decoration: none; transform: translateY(-1px); } .card-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--control-h-lg); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); } .card-header h2, .card-header h3, .card-title { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-semibold); } .card-header a, .card-header .btn-link { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); font-weight: var(--weight-medium); } .card-body { padding: var(--space-5); } .card-body > * + * { margin-top: var(--space-4); } .card-footer { padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-subtle); border-radius: 0 0 var(--radius-2) var(--radius-2); background: var(--color-surface-2); } .card-body:has(> .table-wrap), .card-body:has(> .table), .card-body:has(> .feed), .card-body.flush { padding: 0; } .card-highlight, .card-accent, .token-reveal, .card[data-tone="accent"] { border-color: var(--color-accent); background: var(--color-accent-tint); box-shadow: var(--shadow-2); } .card-highlight .badge, .card-accent .badge, .token-reveal .badge { background: var(--color-surface); } .card-highlight .card-header, .card-accent .card-header, .card[data-tone="accent"] .card-header, .token-reveal .card-header { border-bottom-color: var(--color-danger-border); } /* ---- KPI tiles ---- */ .kpi-grid, .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } .kpi { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-content: start; min-width: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-2); background: var(--color-surface); box-shadow: var(--shadow-1); transition: var(--transition-lift); } a.kpi { color: inherit; text-decoration: none; } a.kpi:hover { border-color: var(--color-border-strong); box-shadow: var(--shadow-2); color: inherit; text-decoration: none; transform: translateY(-1px); } .kpi > * { grid-column: 1; min-width: 0; } .kpi > :not(.kpi-icon):not(.kpi-value):not(.kpi-hint), .kpi-label { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); } .kpi-icon { grid-column: 2; grid-row: 1 / span 2; display: inline-flex; align-items: center; justify-content: center; width: var(--kpi-icon); height: var(--kpi-icon); border-radius: 50%; background: var(--color-neutral-bg); color: var(--color-neutral); } .kpi-icon svg { width: var(--icon); height: var(--icon); } .kpi-icon[data-tone="ok"] { background: var(--color-ok-bg); color: var(--color-ok); } .kpi-icon[data-tone="warn"] { background: var(--color-warn-bg); color: var(--color-warn); } .kpi-icon[data-tone="accent"] { background: var(--color-accent-tint); color: var(--color-accent); } .kpi-icon[data-tone="neutral"] { background: var(--color-neutral-bg); color: var(--color-neutral); } .kpi-value { margin: var(--space-1) 0 0; font-size: var(--text-2xl); line-height: var(--leading-2xl); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); color: var(--color-text); } .kpi-hint { margin: 0; color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); } /* ========================================================================================================== Tables ========================================================================================================== */ .table-wrap { /* contains the absolutely positioned .sr-only labels of its cells, so they cannot widen the page */ position: relative; max-height: var(--table-max-h); overflow: auto; border: 1px solid var(--color-border); border-radius: var(--radius-2); background: var(--color-surface); box-shadow: var(--shadow-1); scrollbar-width: thin; scrollbar-color: var(--color-scroll) transparent; } .card .table-wrap, .card-body > .table-wrap { border: 0; border-radius: 0 0 var(--radius-2) var(--radius-2); box-shadow: none; } .table { width: 100%; border-collapse: separate; border-spacing: 0; font-variant-numeric: tabular-nums; } .table caption { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .table caption.caption-visible { position: static; width: auto; height: auto; margin: 0; padding: var(--space-3) var(--space-5); clip: auto; clip-path: none; text-align: left; font-weight: var(--weight-semibold); white-space: normal; } .table th, .table td { padding: var(--space-2) var(--space-4); text-align: left; vertical-align: middle; } .table thead, .table thead tr { background: var(--color-surface-2); } .table thead th { position: sticky; top: 0; z-index: var(--z-sticky); height: var(--control-h-lg); border-bottom: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; white-space: nowrap; } .table tbody td, .table tbody th { height: var(--row-h); border-bottom: 1px solid var(--color-border-subtle); background: var(--color-surface); transition: background-color var(--duration) var(--ease); } .table tbody th { font-weight: var(--weight-medium); } .table th:first-child, .table td:first-child { padding-left: var(--space-5); } .table tbody td:first-child { font-weight: var(--weight-medium); } .table th:last-child, .table td:last-child { padding-right: var(--space-5); } .table tbody tr:last-child > * { border-bottom: 0; } .table tbody tr:hover > * { background: var(--color-row-hover); } .table-dense tbody td, .table-dense tbody th, .table-compact tbody td, .table-compact tbody th { height: var(--row-h-dense); padding-top: var(--space-1); padding-bottom: var(--space-1); } .table-dense th, .table-dense td, .table-compact th, .table-compact td { padding-right: var(--space-3); padding-left: var(--space-3); } .table-dense th:first-child, .table-dense td:first-child, .table-compact th:first-child, .table-compact td:first-child { padding-left: var(--space-5); } .table-dense th:last-child, .table-dense td:last-child, .table-compact th:last-child, .table-compact td:last-child { padding-right: var(--space-5); } .table .num, .table th.num, .table td.num { text-align: right; white-space: nowrap; } .table .weekend > *, .table tr.weekend > *, .table td.weekend, .table th.weekend { background: var(--color-weekend); color: var(--color-muted); } .table tr.problem > :first-child { box-shadow: inset var(--bar-w) 0 0 var(--color-warn); } .table tfoot td, .table tfoot th { position: sticky; bottom: 0; height: var(--row-h-dense); border-top: 1px solid var(--color-border); background: var(--color-surface-2); color: var(--color-text); font-weight: var(--weight-semibold); } .table td.actions, .table th.actions, .row-actions { text-align: right; white-space: nowrap; } .row-actions { display: inline-flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); } .cell-person, .person { display: flex; align-items: center; gap: var(--space-3); min-width: 0; } .cell-text { display: flex; flex-direction: column; min-width: 0; } .cell-text > :first-child { font-weight: var(--weight-medium); color: var(--color-text); } .cell-text > .muted, .cell-sub { color: var(--color-muted); font-size: var(--text-sm); font-weight: var(--weight-regular); } .corrected { text-decoration: underline dotted; text-underline-offset: var(--space-1); cursor: help; } /* ========================================================================================================== Chips, badges, avatars ========================================================================================================== */ .chip { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--chip-h); padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-neutral-bg); color: var(--color-neutral); font-size: var(--text-sm); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap; } .chip::before { content: ""; width: var(--dot); height: var(--dot); flex: none; border-radius: 50%; background: currentColor; } .chip-ok { background: var(--color-ok-bg); color: var(--color-ok); } .chip-warn { background: var(--color-warn-bg); color: var(--color-warn); } .chip-danger { background: var(--color-danger-bg); color: var(--color-danger); } .chip-muted { background: var(--color-neutral-bg); color: var(--color-neutral); } /* "−0:11" next to an arrival time: came before the schedule start, shown but not counted (blue: neither overtime nor a problem); "+0:07" next to an exit time: the minutes after the schedule end that fall below the overtime threshold, the same blue */ .early-tag, .late-tag { display: inline-flex; align-items: center; height: var(--badge-h); margin-left: var(--space-2); padding: 0 var(--space-2); border-radius: var(--radius-xs); background: var(--hue-3-bg); color: var(--hue-3-fg); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; cursor: help; } /* ---- overtime: solid red pill with white bold hours; the only pill that carries a number of hours (the nav badge is a count of cards) ---- */ .chip-overtime { background: var(--color-overtime-solid); color: var(--color-accent-text); font-size: var(--text-base); font-weight: var(--weight-bold); } .chip-overtime::before { display: none; } .ot-text { color: var(--color-overtime); font-weight: var(--weight-semibold); } .ot-pill { display: inline-flex; align-items: center; height: var(--chip-h); padding: 0 var(--space-3); border-radius: var(--radius-pill); background: var(--color-overtime-solid); color: var(--color-accent-text); font-size: var(--text-base); font-weight: var(--weight-bold); line-height: 1; font-variant-numeric: tabular-nums; white-space: nowrap; } /* "Wyzeruj nadgodziny": the previous month's overtime still to be settled (or already zeroed), with its confirm form in a
*/ .ot-reset { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); } .ot-reset-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; } /* "Uwaga" lines of the block (days still to fix; the month changed since the reset): warning colour, same size as a hint. Two classes deep on purpose: .hint comes later in this file with the same weight and would win with a single class. */ .ot-reset .ot-reset-warn { color: var(--color-warn); } .ot-reset-form > form { width: 100%; max-width: var(--form-max); margin-top: var(--space-2); } /* the overtime column: a red rule under its header and a light red wash behind its cells, so the eye finds it without reading */ .table thead th.ot-col { color: var(--color-overtime); box-shadow: inset 0 calc(var(--bar-w) * -1) 0 var(--color-overtime-solid); } .table tbody td.ot-cell, .table tfoot td.ot-cell { background: var(--color-overtime-wash); } .table tbody tr:hover > td.ot-cell { background: var(--color-overtime-bg); } /* a bar next to the number: how much of the largest overtime in the list this is */ .ot-meter { display: inline-flex; align-items: center; justify-content: flex-end; gap: var(--space-3); } .ot-meter-track { fill: var(--color-track); } .ot-meter-fill { fill: var(--color-overtime-solid); } /* the overtime tile of a KPI row: the one that is loud on purpose */ .kpi[data-emphasis="overtime"] { border-color: var(--color-overtime-solid); background: var(--color-overtime-bg); box-shadow: var(--shadow-2), inset 0 var(--bar-w) 0 var(--color-overtime-solid); } .kpi[data-emphasis="overtime"] .kpi-label, .kpi[data-emphasis="overtime"] .kpi-value { color: var(--color-overtime); } .kpi[data-emphasis="overtime"] .kpi-icon { background: var(--color-overtime-solid); color: var(--color-accent-text); } .badge { display: inline-flex; align-items: center; height: var(--badge-h); padding: 0 var(--space-2); border-radius: var(--radius-xs); background: var(--color-neutral-bg); color: var(--color-neutral); font-size: var(--text-xs); font-weight: var(--weight-semibold); line-height: 1; white-space: nowrap; } .badge-ok { background: var(--color-ok-bg); color: var(--color-ok); } .badge-warn { background: var(--color-warn-bg); color: var(--color-warn); } .badge-danger { background: var(--color-danger-bg); color: var(--color-danger); } .badge-muted { background: var(--color-neutral-bg); color: var(--color-neutral); } .avatar { display: inline-flex; align-items: center; justify-content: center; width: var(--avatar); height: var(--avatar); flex: none; border-radius: 50%; background: var(--hue-5-bg); color: var(--hue-5-fg); font-size: var(--text-sm); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-mono); line-height: 1; text-transform: uppercase; user-select: none; } .avatar[data-hue="0"] { background: var(--hue-0-bg); color: var(--hue-0-fg); } .avatar[data-hue="1"] { background: var(--hue-1-bg); color: var(--hue-1-fg); } .avatar[data-hue="2"] { background: var(--hue-2-bg); color: var(--hue-2-fg); } .avatar[data-hue="3"] { background: var(--hue-3-bg); color: var(--hue-3-fg); } .avatar[data-hue="4"] { background: var(--hue-4-bg); color: var(--hue-4-fg); } .avatar[data-hue="5"] { background: var(--hue-5-bg); color: var(--hue-5-fg); } .avatar-sm { width: var(--avatar-sm); height: var(--avatar-sm); font-size: var(--text-xs); } .avatar-lg { width: var(--avatar-lg); height: var(--avatar-lg); font-size: var(--text-md); } /* ========================================================================================================== Forms ========================================================================================================== */ .form { display: flex; flex-direction: column; gap: var(--space-4); } .form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--field-min), 1fr)); gap: var(--space-4); } .form-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .form-inline > select, .form-inline > input:where(:not([type="checkbox"], [type="radio"], [type="hidden"])) { flex: 1 1 var(--field-min); width: auto; } .form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; } label, .label { font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); color: var(--color-text); } input:where(:not([type="checkbox"], [type="radio"], [type="hidden"], [type="submit"], [type="button"], [type="range"], [type="file"])), select, textarea { width: 100%; min-width: 0; height: var(--control-h); padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-1); background: var(--color-surface); color: var(--color-text); line-height: var(--leading-sm); transition: var(--transition); } textarea { height: auto; min-height: calc(var(--control-h) * 3); padding: var(--space-2) var(--space-3); resize: vertical; } select { padding-right: var(--space-8); appearance: none; background-image: var(--select-arrow); background-position: calc(100% - var(--space-5)) 50%, calc(100% - var(--space-4)) 50%; background-size: var(--space-1) var(--space-1), var(--space-1) var(--space-1); background-repeat: no-repeat; cursor: pointer; } select option { background: var(--color-surface); color: var(--color-text); } input::placeholder, textarea::placeholder { color: var(--color-faint); } input:where(:not([type="checkbox"], [type="radio"])):hover, select:hover, textarea:hover { border-color: var(--color-faint); } input[aria-invalid="true"], select[aria-invalid="true"], textarea[aria-invalid="true"], .field:has(.error) input, .field:has(.error) select, .field:has(.error) textarea { border-color: var(--color-danger); } input:disabled, select:disabled, textarea:disabled { background: var(--color-surface-2); color: var(--color-muted); cursor: not-allowed; } input[type="date"], input[type="time"], input[type="month"], input[type="number"] { font-variant-numeric: tabular-nums; } input[type="checkbox"], input[type="radio"] { width: var(--icon-sm); height: var(--icon-sm); margin: 0; accent-color: var(--color-accent); cursor: pointer; } .check { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-regular); } fieldset { margin: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-1); } legend { padding: 0 var(--space-2); font-weight: var(--weight-medium); } .hint { color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); } .error { display: flex; align-items: flex-start; gap: var(--space-2); color: var(--color-danger); font-size: var(--text-sm); line-height: var(--leading-sm); font-weight: var(--weight-medium); } .error svg { width: var(--icon-sm); height: var(--icon-sm); margin-top: var(--space-1); } /* ---- buttons ---- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-h); padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-1); background: var(--color-surface); color: var(--color-text); font-size: var(--text-base); font-weight: var(--weight-medium); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; user-select: none; transition: var(--transition); } .btn svg { width: var(--icon-sm); height: var(--icon-sm); } .btn:hover { border-color: var(--color-faint); background: var(--color-surface-2); color: var(--color-text); text-decoration: none; } .btn:active { background: var(--color-surface-3); } .btn-primary { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-text); box-shadow: var(--shadow-1); } .btn-primary:hover { border-color: var(--color-accent-hover); background: var(--color-accent-hover); color: var(--color-accent-text); } .btn-primary:active { border-color: var(--color-accent-press); background: var(--color-accent-press); } .btn-danger { border-color: var(--color-danger); background: var(--color-surface); color: var(--color-danger); } .btn-danger:hover { border-color: var(--color-danger); background: var(--color-danger-bg); color: var(--color-danger); } .btn-danger:active { background: var(--color-danger-border); } .btn-ghost { border-color: transparent; background: transparent; color: var(--color-muted); } .btn-ghost:hover { border-color: transparent; background: var(--color-surface-3); color: var(--color-text); } .btn-link { display: inline; height: auto; padding: 0; border: 0; border-radius: var(--radius-xs); background: none; color: var(--color-link); font-weight: var(--weight-medium); line-height: inherit; } .btn-link:hover { background: none; color: var(--color-link-hover); text-decoration: underline; text-underline-offset: var(--space-1); } .btn-sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--text-sm); } .btn-lg { height: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--text-md); } .btn-block { width: 100%; } .btn-icon { width: var(--control-h); padding: 0; } .btn-icon.btn-sm { width: var(--control-h-sm); } .btn[disabled], .btn[aria-disabled="true"] { opacity: var(--opacity-disabled); cursor: not-allowed; pointer-events: none; } /* ---- details / summary: the no-JavaScript confirm step and the per-day panels ---- */ details > summary { display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-1); color: var(--color-link); font-weight: var(--weight-medium); cursor: pointer; list-style: none; user-select: none; transition: var(--transition); } details > summary::-webkit-details-marker { display: none; } details > summary::before { content: ""; width: var(--space-2); height: var(--space-2); flex: none; border-right: var(--stroke) solid currentColor; border-bottom: var(--stroke) solid currentColor; transform: rotate(var(--rotate-closed)); transition: transform var(--duration) var(--ease); } details[open] > summary::before { transform: rotate(var(--rotate-open)); } details > summary.btn::before { display: none; } details > summary:hover { color: var(--color-link-hover); } details > summary.btn:hover { color: var(--color-text); } details > summary.btn-danger:hover { color: var(--color-danger); } details > summary.btn-primary:hover { color: var(--color-accent-text); } details > :not(summary) { margin-top: var(--space-3); } /* ========================================================================================================== Flash, empty state, feed ========================================================================================================== */ .flash { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-2); background: var(--color-surface); box-shadow: var(--shadow-2); animation: flash-in var(--duration-slow) var(--ease); } .flash > svg { width: var(--icon); height: var(--icon); margin-top: var(--space-1); } .flash-text { margin: 0; min-width: 0; font-weight: var(--weight-medium); } .flash-ok { border-color: var(--color-ok-border); background: var(--color-ok-bg); color: var(--color-ok); box-shadow: inset var(--bar-w) 0 0 var(--color-ok), var(--shadow-2); } .flash-error { border-color: var(--color-danger-border); background: var(--color-danger-bg); color: var(--color-danger); box-shadow: inset var(--bar-w) 0 0 var(--color-danger), var(--shadow-2); } @keyframes flash-in { from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)); } to { opacity: 1; transform: translateY(0); } } .empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-12) var(--space-6); border: 1px dashed var(--color-border-strong); border-radius: var(--radius-2); background: var(--color-surface); text-align: center; } .empty > svg { width: var(--empty-art); height: var(--empty-art); margin-bottom: var(--space-2); color: var(--color-faint); } .empty .il-dot { fill: var(--color-accent-bright); } .empty h1, .empty h2, .empty h3, .empty-title { margin: 0; font-size: var(--text-md); line-height: var(--leading-md); font-weight: var(--weight-semibold); letter-spacing: 0; } .empty p { max-width: var(--measure); margin: 0; color: var(--color-muted); } .empty .btn, .empty form { margin-top: var(--space-3); } .card .empty, .table-wrap .empty { border: 0; border-radius: 0; background: none; } .feed { margin: 0; padding: 0; list-style: none; } .feed > li, .feed-item { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-5); border-bottom: 1px solid var(--color-border-subtle); transition: background-color var(--duration) var(--ease); } .feed > li:last-child { border-bottom: 0; } .feed > li:hover { background: var(--color-row-hover); } .feed-time { flex: none; min-width: var(--feed-time-w); padding-top: var(--space-1); color: var(--color-muted); font-size: var(--text-sm); line-height: var(--leading-sm); font-variant-numeric: tabular-nums; } .feed-body, .feed-text { flex: 1; min-width: 0; } .feed-icon { display: inline-flex; align-items: center; justify-content: center; width: var(--avatar-sm); height: var(--avatar-sm); flex: none; border-radius: 50%; background: var(--color-neutral-bg); color: var(--color-neutral); } .feed-icon svg { width: var(--icon-sm); height: var(--icon-sm); } .feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); color: var(--color-muted); font-size: var(--text-sm); } /* ========================================================================================================== Charts (inline SVG; shapes get their colour from these classes, never from style attributes) ========================================================================================================== */ .ring { position: relative; width: var(--ring-size); max-width: 100%; margin: 0 auto; } .ring > svg, .bars > svg, .daybar > svg { display: block; width: 100%; height: auto; } .ring > :not(svg) { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; } .ring-value { font-size: var(--text-xl); line-height: var(--leading-lg); font-weight: var(--weight-bold); letter-spacing: var(--tracking-tight); } .ring-label { color: var(--color-muted); font-size: var(--text-xs); line-height: var(--leading-xs); } :where(.ring) text { fill: var(--color-text); font-family: var(--font); } :where(.ring) circle { fill: none; stroke: var(--color-track); } :where(.ring) circle:where([stroke-dasharray]) { stroke: var(--color-accent-bright); stroke-linecap: round; } .ring .ring-track, .ring .chart-track { stroke: var(--color-track); } .ring .ring-value-arc, .ring .ring-progress, .ring .ring-fill { stroke: var(--color-accent-bright); stroke-linecap: round; } .bars, .daybar { min-width: 0; } :where(.bars) rect { fill: var(--color-accent-bright); } :where(.daybar) rect { fill: var(--color-ink); } :where(.bars, .daybar) text, .chart-label { fill: var(--color-muted); font-family: var(--font); font-size: var(--text-xs); } :where(.bars, .daybar) line, .chart-axis { stroke: var(--color-border); } :where(.bars) text[data-current], :where(.bars) .is-current, :where(.bars) .current, .chart-label-strong { fill: var(--color-text); font-weight: var(--weight-semibold); } .chart-value { fill: var(--color-text); font-family: var(--font); font-size: var(--text-sm); font-weight: var(--weight-semibold); } .chart-tick { fill: var(--color-faint); font-family: var(--font); font-size: var(--text-xs); } .chart-grid { stroke: var(--color-border-subtle); } .chart-bar { fill: var(--color-accent-bright); } .chart-bar-muted { fill: var(--color-track); } .chart-track, .daybar-track, .daybar rect[data-kind="track"] { fill: var(--color-track); } .daybar-presence, .daybar rect[data-kind="presence"] { fill: var(--color-ink-soft); } .daybar-normal, .daybar rect[data-kind="normal"] { fill: var(--color-text); } .daybar-overtime, .daybar rect[data-kind="overtime"] { fill: var(--color-overtime-solid); } .daybar-hatch { stroke: var(--color-faint); fill: none; } .daybar { min-width: calc(var(--space-12) * 3); } .legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; color: var(--color-muted); font-size: var(--text-sm); } .legend > li { display: inline-flex; align-items: center; gap: var(--space-2); } .legend > li::before { content: ""; width: var(--dot); height: var(--dot); border-radius: 50%; background: var(--color-accent-bright); } /* ========================================================================================================== Sign-in ========================================================================================================== */ .auth { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: var(--screen-h); } .auth-aside { position: relative; display: flex; align-items: center; justify-content: center; padding: var(--space-12); overflow: hidden; isolation: isolate; background: var(--color-sidebar); color: var(--color-sidebar-text); } .auth-aside::before { content: ""; position: absolute; inset: 0; z-index: var(--z-behind); opacity: var(--opacity-glow); background: radial-gradient(circle at 12% 8%, var(--color-accent-deep) 0, transparent 46%), radial-gradient(circle at 92% 100%, var(--color-sidebar-3) 0, transparent 52%); } .auth-aside::after { content: ""; position: absolute; right: calc(var(--deco-size) / -3); bottom: calc(var(--deco-size) / -3); z-index: var(--z-behind); width: var(--deco-size); height: var(--deco-size); border: var(--deco-stroke) solid var(--color-sidebar-2); border-radius: 50%; } .auth-aside-inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); width: 100%; max-width: var(--auth-aside-w); } .auth-logo { display: block; width: min(100%, var(--auth-logo-w)); height: auto; } .auth-bar { display: block; width: var(--space-12); height: var(--space-1); border-radius: var(--radius-pill); background: var(--color-accent-bright); } .auth-tagline { margin: 0; color: var(--color-sidebar-muted); font-size: var(--text-lg); line-height: var(--leading-lg); } .auth-main { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; padding: var(--space-8) var(--space-6); background: var(--color-bg); } .auth-main:focus { outline: none; } /* narrow screens have no brand panel: the white logo sits on a red plate, like the header of rydwan.eu */ .auth-brand { display: none; align-items: center; margin-bottom: var(--space-6); padding: var(--space-3) var(--space-4); border-radius: var(--radius-2); background: var(--color-accent-bright); } .auth-brand-logo { display: block; width: auto; height: var(--space-6); } .auth-content { width: 100%; max-width: var(--auth-card-w); } .auth-content > * + * { margin-top: var(--space-4); } .auth-card { padding: var(--space-8); border: 1px solid var(--color-border); border-radius: var(--radius-2); background: var(--color-surface); box-shadow: var(--shadow-2); } .auth-card .page-sub { margin-top: var(--space-1); margin-bottom: var(--space-6); } .auth-card .error { margin-top: var(--space-4); } /* ========================================================================================================== Obsidian glass: the look of the whole panel. A stage of soft light and fine grain; cards of frosted glass with a hairline edge that fades from lit to dark (a masked gradient); big numerals; glowing marks of data. Every value is a token (--glass-*, --aurora, ...). ========================================================================================================== */ .main { background: url(/static/brand/grain.svg), var(--aurora); background-attachment: fixed; } .content .card, .content .kpi, .content > .empty { position: relative; isolation: isolate; border: 0; border-radius: var(--radius-glass); background: var(--glass-fill); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); transition: transform var(--lift-dur) var(--ease), box-shadow var(--lift-dur) var(--ease); } .content .card::before, .content .kpi::before, .content > .empty::before { content: ""; position: absolute; inset: 0; z-index: var(--z-sticky); padding: 1px; border-radius: inherit; background: var(--glass-edge-line); -webkit-mask: var(--glass-mask) content-box, var(--glass-mask); -webkit-mask-composite: xor; mask: var(--glass-mask) content-box, var(--glass-mask); mask-composite: exclude; pointer-events: none; } .content .card:hover, .content .kpi:hover { box-shadow: var(--glass-shadow-hover); } .content .card:hover::before, .content .kpi:hover::before { background: var(--glass-edge-line-hover); } .content .kpi:hover { transform: translateY(calc(var(--space-1) * -0.5)); } /* the red glass: the card of the month's overtime, the highlighted ones (a new token) */ .content .card-highlight, .content .card-accent, .content .token-reveal, .content .card[data-tone="accent"] { background: var(--glass-fill-accent); } .content .card-highlight::before, .content .card-accent::before, .content .token-reveal::before, .content .card[data-tone="accent"]::before { background: var(--glass-edge-line-accent); } /* what sits in a glass card does not make an opaque patch */ .content .card-header, .content .card-footer, .content .feed > li { border-color: var(--glass-hairline); } .content .card-footer { background: transparent; } .content .card-title { display: inline-flex; align-items: center; gap: var(--space-3); letter-spacing: var(--tracking-tight); } .content .card-title::before { content: ""; flex: none; width: var(--space-2); height: var(--space-2); border-radius: 50%; background: var(--color-accent-bright); box-shadow: var(--dot-glow); } .content .card[data-tone="accent"] .card-title::before, .content .card-highlight .card-title::before { background: var(--color-white); } /* tables: glass as well; a header that stays readable when the rows scroll under it, a glass highlight under the pointer */ .content .table-wrap { border: 1px solid var(--glass-hairline); border-radius: var(--radius-glass); background: var(--glass-fill); box-shadow: var(--glass-shadow); -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-saturate)); } .content .card .table-wrap, .content .card-body > .table-wrap { border: 0; border-radius: 0 0 var(--radius-glass) var(--radius-glass); background: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } .content .table thead, .content .table thead tr { background: transparent; } .content .table thead th { border-bottom-color: var(--glass-hairline); background: var(--glass-fill-solid); font-size: var(--text-2xs); letter-spacing: var(--caps-tracking); } .content .table tbody td, .content .table tbody th { border-bottom-color: var(--glass-hairline); background: transparent; } .content .table tbody tr:hover > td, .content .table tbody tr:hover > th, .content .feed > li:hover { background: var(--glass-row-hover); } .page-header h1 { letter-spacing: var(--tracking-display); } /* the figures: a small caption, a huge numeral, a hint and a glowing meter that shows the share */ .kpi { padding: var(--space-6); } .kpi-label { font-size: var(--text-2xs); letter-spacing: var(--caps-tracking); text-transform: uppercase; } .kpi-value { margin-top: var(--space-2); font-size: var(--text-display); line-height: var(--leading-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; background: var(--display-fill); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .kpi-icon { width: calc(var(--kpi-icon) + var(--space-2)); height: calc(var(--kpi-icon) + var(--space-2)); background: var(--glass-fill); } .kpi-icon[data-tone="ok"] { box-shadow: var(--icon-glow-ok); } .kpi-icon[data-tone="warn"] { box-shadow: var(--icon-glow-warn); } .kpi-icon[data-tone="accent"] { box-shadow: var(--icon-glow-accent); } .kpi-icon[data-tone="neutral"] { box-shadow: var(--icon-glow-neutral); } .kpi-meter { display: block; grid-column: 1 / -1; width: 100%; height: var(--space-1); margin-top: var(--space-5); overflow: visible; } .kpi-meter-track { fill: var(--meter-track); } .kpi[data-tone="ok"] .kpi-meter-fill { fill: var(--color-ok); filter: var(--meter-glow-ok); } .kpi[data-tone="warn"] .kpi-meter-fill { fill: var(--color-warn); filter: var(--meter-glow-warn); } .kpi[data-tone="accent"] .kpi-meter-fill { fill: var(--color-accent-bright); filter: var(--meter-glow-accent); } .kpi[data-tone="neutral"] .kpi-meter-fill { fill: var(--color-neutral); filter: var(--meter-glow-neutral); } /* the switch of the theme: three small buttons, in the menu and in the corner of the sign-in page */ .theme-form { margin: 0; } .theme-sidebar .theme-switch { width: 100%; } .theme-auto { letter-spacing: var(--tracking-wide); } .theme-switch { display: flex; gap: var(--space-1); padding: var(--space-1); border: 1px solid var(--color-sidebar-line); border-radius: var(--radius-pill); background: var(--color-sidebar-2); } .theme-btn { display: inline-flex; flex: 1; align-items: center; justify-content: center; min-height: calc(var(--space-6) + var(--space-2)); padding: 0 var(--space-3); border: 0; border-radius: var(--radius-pill); background: transparent; color: var(--color-sidebar-muted); font: inherit; font-size: var(--text-xs); font-weight: var(--weight-semibold); cursor: pointer; transition: var(--transition); } .theme-btn:hover { color: var(--color-sidebar-text); } .theme-btn[aria-pressed="true"] { background: var(--nav-active-fill), var(--color-sidebar-3); color: var(--color-white); } .theme-auth { position: absolute; top: var(--space-5); right: var(--space-5); z-index: var(--z-sticky); } .theme-auth .theme-switch { border-color: var(--glass-hairline); background: var(--glass-fill); -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur)); } .theme-auth .theme-btn { color: var(--color-muted); } .theme-auth .theme-btn:hover { color: var(--color-text); } .theme-auth .theme-btn[aria-pressed="true"] { background: var(--cta-fill); color: var(--color-accent-text); } /* without a blur (an old browser), with reduced transparency asked for, or in forced colours: plain, readable surfaces */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .content .card:not([data-tone="accent"]), .content .kpi, .content > .empty, .content .table-wrap { background: var(--glass-fill-solid); } } @media (prefers-reduced-transparency: reduce) { .content .card:not([data-tone="accent"]), .content .kpi, .content > .empty, .content .table-wrap { background: var(--glass-fill-solid); -webkit-backdrop-filter: none; backdrop-filter: none; } } @media (prefers-reduced-motion: reduce) { .content .card, .content .kpi { transition: none; } .content .kpi:hover { transform: none; } } @media (forced-colors: active) { .content .card, .content .kpi, .content .table-wrap { -webkit-backdrop-filter: none; backdrop-filter: none; } .kpi-value { background: none; color: CanvasText; -webkit-text-fill-color: currentColor; } } /* ========================================================================================================== Responsive ========================================================================================================== */ @media (max-width: 1199px) { .grid-2 { grid-template-columns: minmax(0, 1fr); } .grid-2 > aside, .grid-2 > .aside { display: grid; grid-template-columns: repeat(auto-fit, minmax(var(--field-min), 1fr)); align-items: start; } } /* Two columns side by side: the card marked .card-fill (the table of the dashboard) is exactly as tall as the other column and scrolls inside itself, so there is no empty field under it. It takes no height of its own (height 0) and is stretched to the row (min-height). */ @media (min-width: 1200px) { .grid-2:has(> .card-fill) { align-items: stretch; } .grid-2 > .card-fill { display: flex; flex-direction: column; height: 0; min-height: max(100%, calc(var(--row-h) * 9)); } .card-fill > .card-body { display: flex; flex: 1 1 0; flex-direction: column; min-height: 0; } .card-fill .table-wrap { flex: 1 1 0; min-height: 0; max-height: none; } } @media (max-width: 1099px) { .content { padding-right: var(--gutter-narrow); padding-left: var(--gutter-narrow); } .kpi-grid, .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* under 1000px the sidebar becomes a top bar: brand left, nav as a scrollable row */ @media (max-width: 999px) { .app { display: block; } .sidebar { position: sticky; z-index: var(--z-topbar); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "brand user" "nav nav"; align-items: center; gap: var(--space-2) var(--space-4); height: auto; padding: var(--space-2) var(--space-4) 0; overflow: visible; } .brand-block { grid-area: brand; flex-direction: row; align-items: center; padding: 0; border-bottom: 0; } .brand { flex-direction: row; align-items: center; gap: var(--space-3); } .brand-logo { width: var(--brand-logo-w-compact); } .brand { min-height: var(--control-h); } .nav { grid-area: nav; min-width: 0; overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; } .nav-label { display: none; } .nav-list { flex-direction: row; gap: var(--space-1); } .nav-link { min-height: var(--control-h); white-space: nowrap; } .nav-link[aria-current="page"]::before { top: auto; right: var(--space-3); bottom: 0; left: var(--space-3); width: auto; height: var(--bar-w); } .user-block { grid-area: user; flex-direction: row; align-items: center; margin: 0; padding: 0; border-top: 0; } .user { padding: 0; } .user-text { display: none; } .logout-form .btn { width: auto; } .content { padding-top: var(--space-6); padding-bottom: var(--space-8); } .table-wrap { max-height: none; } .table thead th, .table tfoot td, .table tfoot th { position: static; } } @media (max-width: 899px) { .auth { grid-template-columns: minmax(0, 1fr); } .auth-aside { display: none; } .auth-brand { display: flex; } .auth-main { justify-content: flex-start; padding-top: var(--space-12); } } @media (max-width: 719px) { .brand-sub, .sidebar .demo-chip { display: none; } .logout-form .btn span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .logout-form .btn { width: var(--control-h); padding: 0; } .content { padding-right: var(--space-4); padding-left: var(--space-4); } .page-header { grid-template-columns: minmax(0, 1fr); } .page-header > .actions { grid-column: 1; grid-row: auto; justify-self: start; margin-top: var(--space-3); } .toolbar { align-items: stretch; padding: var(--space-4); } .toolbar .field { flex: 1 1 100%; } .toolbar .actions, .toolbar-end { margin-left: 0; } .card-header, .card-body { padding-right: var(--space-4); padding-left: var(--space-4); } .table th:first-child, .table td:first-child { padding-left: var(--space-4); } .table th:last-child, .table td:last-child { padding-right: var(--space-4); } dl { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } dd { margin-bottom: var(--space-3); } .auth-card { padding: var(--space-6); } } @media (max-width: 479px) { .kpi-grid, .stats { grid-template-columns: minmax(0, 1fr); } } /* ========================================================================================================== Accessibility preferences and print ========================================================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } a.card:hover, .card-interactive:hover, a.kpi:hover { transform: none; } } /* Windows high-contrast mode replaces backgrounds with the system canvas: keep the dark panels the white logo sits on, and give the overtime pills an outline and the meters a system colour, so that they do not lose their shape (the "+H:MM" text is there anyway) */ @media (forced-colors: active) { .sidebar, .auth-aside, .auth-brand { forced-color-adjust: none; } .ot-pill, .chip-overtime { border: 1px solid CanvasText; } .ot-meter-fill { fill: Highlight; } } @media print { body { background: var(--color-surface); } .sidebar, .skip-link, .flash, .toolbar, .actions, .btn, .row-actions, details > summary { display: none !important; } .app { display: block; } .content { max-width: none; padding: 0; } .card, .kpi, .table-wrap { border-color: var(--color-border); box-shadow: none; } .table-wrap { max-height: none; overflow: visible; } .table thead th, .table tfoot td, .table tfoot th { position: static; } .table tr { break-inside: avoid; } a { color: inherit; text-decoration: none; } }