/** * Timing Design System v0.9.0 * * Complete CSS bundle with all tokens and components. * Supports dark (.theme-dark) and light (.theme-light) themes. * * Generated: 2026-04-21 */ /* ======================================== * tokens/fonts * ======================================== */ /** * Font Face Declarations * * Self-hosted Inter and JetBrains Mono fonts. * All fonts are latin subset, woff2 format. */ /* Inter - Primary sans-serif font */ @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/inter-regular.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/inter-medium.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('./fonts/inter-semibold.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/inter-bold.woff2') format('woff2'); } /* JetBrains Mono - Monospace font for code and numbers */ @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('./fonts/jetbrains-mono-regular.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('./fonts/jetbrains-mono-medium.woff2') format('woff2'); } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('./fonts/jetbrains-mono-bold.woff2') format('woff2'); } /* ======================================== * tokens/colors * ======================================== */ /** * Color Tokens * * Barevná paleta pro Timing Design System. * Podpora dark a light theme pomocí CSS custom properties. * * ⚠️ THEME CLASS PLACEMENT * Apply `.theme-dark` / `.theme-light` on the root element (``), never on * `` or deeper. CSS custom properties computed from other custom properties * (e.g. `--my-bg: var(--color-bg-surface)` on `:root`) are resolved at the * declaration site and inherited as already-computed values. Putting the theme * class on a descendant will override the underlying `--color-*` tokens, but the * derived aliases will keep the value resolved at `:root` — mixing themes. * * The auto-detection media query below targets `:root` for the same reason; keep * manual overrides consistent with it. */ /* ========================================================================== Light Theme (default) ========================================================================== */ :root, .theme-light { /* Backgrounds */ --color-bg-body: #f5f5f5; --color-bg-surface: #ffffff; --color-bg-elevated: #ffffff; --color-bg-input: #ffffff; /* Borders */ --color-border: #e0e0e0; --color-border-focus: #999999; /* Text */ --color-text-primary: #1a1a1a; --color-text-secondary: #666666; --color-text-muted: #999999; /* Accent (primary brand color) */ --color-accent: #0066cc; --color-accent-hover: #0052a3; --color-accent-subtle: rgba(0, 102, 204, 0.1); --color-accent-glow: rgba(0, 102, 204, 0.3); /* Semantic colors */ --color-success: #059669; --color-success-subtle: rgba(5, 150, 105, 0.1); --color-warning: #d97706; --color-warning-subtle: rgba(217, 119, 6, 0.1); --color-error: #dc2626; --color-error-subtle: rgba(220, 38, 38, 0.1); --color-info: #0284c7; --color-info-subtle: rgba(2, 132, 199, 0.1); } /* ========================================================================== Dark Theme ========================================================================== */ .theme-dark { /* Backgrounds - Anthracite palette */ --color-bg-body: #0a0a0a; --color-bg-surface: #141414; --color-bg-elevated: #1f1f1f; --color-bg-input: #0d0d0d; /* Borders */ --color-border: #2a2a2a; --color-border-focus: #404040; /* Text */ --color-text-primary: #ffffff; --color-text-secondary: #999999; --color-text-muted: #707070; /* Accent (electric blue) */ --color-accent: #0088ff; --color-accent-hover: #0066cc; --color-accent-subtle: rgba(0, 136, 255, 0.12); --color-accent-glow: rgba(0, 136, 255, 0.4); /* Semantic colors */ --color-success: #00d26a; --color-success-subtle: rgba(0, 210, 106, 0.15); --color-warning: #ff9500; --color-warning-subtle: rgba(255, 149, 0, 0.15); --color-error: #ff3b30; --color-error-subtle: rgba(255, 59, 48, 0.15); --color-info: #0a84ff; --color-info-subtle: rgba(10, 132, 255, 0.15); } /* ========================================================================== Auto Theme (system preference) ========================================================================== */ @media (prefers-color-scheme: dark) { :root:not(.theme-light) { /* Backgrounds - Anthracite palette */ --color-bg-body: #0a0a0a; --color-bg-surface: #141414; --color-bg-elevated: #1f1f1f; --color-bg-input: #0d0d0d; /* Borders */ --color-border: #2a2a2a; --color-border-focus: #404040; /* Text */ --color-text-primary: #ffffff; --color-text-secondary: #999999; --color-text-muted: #707070; /* Accent (electric blue) */ --color-accent: #0088ff; --color-accent-hover: #0066cc; --color-accent-subtle: rgba(0, 136, 255, 0.12); --color-accent-glow: rgba(0, 136, 255, 0.4); /* Semantic colors */ --color-success: #00d26a; --color-success-subtle: rgba(0, 210, 106, 0.15); --color-warning: #ff9500; --color-warning-subtle: rgba(255, 149, 0, 0.15); --color-error: #ff3b30; --color-error-subtle: rgba(255, 59, 48, 0.15); --color-info: #0a84ff; --color-info-subtle: rgba(10, 132, 255, 0.15); } } /* ======================================== * tokens/typography * ======================================== */ /** * Typography Tokens * * Font families, sizes, weights, and line heights. */ :root { /* Font families */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', Monaco, 'Cascadia Code', monospace; /* Font sizes */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.8125rem; /* 13px */ --text-base: 0.875rem; /* 14px */ --text-lg: 1rem; /* 16px */ --text-xl: 1.125rem; /* 18px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2.25rem; /* 36px */ /* Font weights */ --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* Line heights */ --leading-none: 1; --leading-tight: 1.25; --leading-snug: 1.375; --leading-normal: 1.5; --leading-relaxed: 1.625; /* Letter spacing */ --tracking-tight: -0.025em; --tracking-normal: 0; --tracking-wide: 0.025em; } /* ======================================== * tokens/spacing * ======================================== */ /** * Spacing Tokens * * Consistent spacing scale based on 4px base unit. * Also includes border radius and shadow tokens. */ :root { /* Spacing scale (4px base) */ --space-0: 0; --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-8: 2rem; /* 32px */ --space-10: 2.5rem; /* 40px */ --space-12: 3rem; /* 48px */ --space-16: 4rem; /* 64px */ /* Border radius */ --radius-none: 0; --radius-sm: 0.25rem; /* 4px */ --radius-md: 0.375rem; /* 6px */ --radius-lg: 0.5rem; /* 8px */ --radius-xl: 0.75rem; /* 12px */ --radius-2xl: 1rem; /* 16px */ --radius-full: 9999px; /* Shadows (light theme) */ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); /* Transitions */ --transition-fast: 150ms ease; --transition-normal: 200ms ease; --transition-slow: 300ms ease; } /* Dark theme shadow adjustments */ .theme-dark { --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 8px 10px -6px rgba(0, 0, 0, 0.5); } /* ======================================== * tokens/canoe * ======================================== */ /** * Canoe Timing Design System - Canoe-specific tokens * * Vodacke specificke design tokeny: * - Slalom gate colors (cervena/zelena branka) * - Glow effects * - Wave pattern pro vodacky smrnc */ :root { /* Slalom gate colors */ --color-gate-green: #00d26a; --color-gate-red: #ff3b30; /* Glow effects */ --glow-accent: 0 0 10px rgba(0, 136, 255, 0.4); --glow-success: 0 0 8px rgba(0, 210, 106, 0.4); --glow-error: 0 0 8px rgba(255, 59, 48, 0.4); --glow-warning: 0 0 8px rgba(255, 149, 0, 0.4); /* Wave pattern - subtle wavy line for canoe branding */ --pattern-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='4' viewBox='0 0 40 4'%3E%3Cpath d='M0 2 Q5 0.5, 10 2 Q15 3.5, 20 2 Q25 0.5, 30 2 Q35 3.5, 40 2' stroke='%230088ff' stroke-width='2' fill='none' opacity='0.8'/%3E%3C/svg%3E"); --pattern-wave-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='4' viewBox='0 0 40 4'%3E%3Cpath d='M0 2 Q5 0.5, 10 2 Q15 3.5, 20 2 Q25 0.5, 30 2 Q35 3.5, 40 2' stroke='%232a2a2a' stroke-width='2' fill='none'/%3E%3C/svg%3E"); --pattern-wave-height: 4px; /* Header bar */ --header-bar-width: 4px; --header-bar-glow: 0 0 20px rgba(0, 136, 255, 0.4); } /* Light theme adjustments */ .theme-light { --pattern-wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='4' viewBox='0 0 40 4'%3E%3Cpath d='M0 2 Q5 0.5, 10 2 Q15 3.5, 20 2 Q25 0.5, 30 2 Q35 3.5, 40 2' stroke='%230066cc' stroke-width='2' fill='none' opacity='0.8'/%3E%3C/svg%3E"); --pattern-wave-border: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='4' viewBox='0 0 40 4'%3E%3Cpath d='M0 2 Q5 0.5, 10 2 Q15 3.5, 20 2 Q25 0.5, 30 2 Q35 3.5, 40 2' stroke='%23e0e0e0' stroke-width='2' fill='none'/%3E%3C/svg%3E"); --glow-accent: 0 0 10px rgba(0, 102, 204, 0.3); --glow-success: 0 0 8px rgba(5, 150, 105, 0.3); --glow-error: 0 0 8px rgba(220, 38, 38, 0.3); --glow-warning: 0 0 8px rgba(217, 119, 6, 0.3); } /* ========================================================================== WAVY UNDERLINE - vodácký motiv ========================================================================== */ /* * Rovná čára s vlnkou na konci * Použití: .line-wave na elementu */ .line-wave { position: relative; border-bottom: none !important; } /* Rovná čára */ .line-wave::before { content: ''; position: absolute; left: 0; bottom: 0; width: calc(100% - 40px); height: 2px; background: var(--color-accent); } /* Vlnka na konci */ .line-wave::after { content: ''; position: absolute; right: 0; bottom: -1px; width: 40px; height: var(--pattern-wave-height); background: var(--pattern-wave) no-repeat right center; } /* ======================================== * css/base * ======================================== */ /** * Base Styles * * CSS reset and foundational styles. */ /* ========================================================================== CSS Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { min-height: 100vh; font-family: var(--font-sans); font-size: var(--text-base); font-weight: var(--font-normal); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-bg-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================== Typography ========================================================================== */ h1, h2, h3, h4, h5, h6 { font-weight: var(--font-semibold); line-height: var(--leading-tight); color: var(--color-text-primary); } h1 { font-size: var(--text-4xl); } h2 { font-size: var(--text-3xl); } h3 { font-size: var(--text-2xl); } h4 { font-size: var(--text-xl); } h5 { font-size: var(--text-lg); } h6 { font-size: var(--text-base); } p { margin-bottom: var(--space-4); } a { color: var(--color-accent); text-decoration: none; transition: color var(--transition-fast); } a:hover { color: var(--color-accent-hover); text-decoration: underline; } /* ========================================================================== Code ========================================================================== */ code, kbd, pre, samp { font-family: var(--font-mono); font-size: 0.9em; } code { padding: 0.125em 0.375em; background-color: var(--color-bg-elevated); border-radius: var(--radius-sm); } pre { padding: var(--space-4); background-color: var(--color-bg-elevated); border-radius: var(--radius-md); overflow-x: auto; } pre code { padding: 0; background: none; } /* ========================================================================== Lists ========================================================================== */ ul, ol { padding-left: var(--space-6); margin-bottom: var(--space-4); } li { margin-bottom: var(--space-1); } /* ========================================================================== Media ========================================================================== */ img, svg, video, canvas { display: block; max-width: 100%; height: auto; } /* ========================================================================== Focus Styles (Accessibility) ========================================================================== */ :focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ========================================================================== Reduced Motion ========================================================================== */ @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; } } /* ========================================================================== Selection ========================================================================== */ ::selection { background-color: var(--color-accent-subtle); color: var(--color-text-primary); } /* ======================================== * css/buttons * ======================================== */ /** * Button Components * * Primary, secondary, ghost, and danger button variants. */ /* ========================================================================== Base Button ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: var(--font-medium); line-height: var(--leading-tight); text-decoration: none; white-space: nowrap; border: 1px solid transparent; border-radius: var(--radius-md); cursor: pointer; transition: all var(--transition-fast); } .btn:disabled, .btn.disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ========================================================================== Primary Button ========================================================================== */ .btn-primary { color: #ffffff; background-color: var(--color-accent); border-color: var(--color-accent); } .btn-primary:hover { background-color: var(--color-accent-hover); border-color: var(--color-accent-hover); } .btn-primary:active { transform: translateY(1px); } /* ========================================================================== Secondary Button ========================================================================== */ .btn-secondary { color: var(--color-text-primary); background-color: var(--color-bg-elevated); border-color: var(--color-border); } .btn-secondary:hover { background-color: var(--color-bg-surface); border-color: var(--color-border-focus); } /* ========================================================================== Ghost Button ========================================================================== */ .btn-ghost { color: var(--color-text-secondary); background-color: transparent; border-color: transparent; } .btn-ghost:hover { color: var(--color-text-primary); background-color: var(--color-accent-subtle); } /* ========================================================================== Danger Button ========================================================================== */ .btn-danger { color: #ffffff; background-color: var(--color-error); border-color: var(--color-error); } .btn-danger:hover { background-color: #b91c1c; border-color: #b91c1c; } /* ========================================================================== Button Sizes ========================================================================== */ .btn-sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); } .btn-lg { padding: var(--space-3) var(--space-6); font-size: var(--text-base); } /* ========================================================================== Icon Button ========================================================================== */ .btn-icon { padding: var(--space-2); aspect-ratio: 1; } .btn-icon.btn-sm { padding: var(--space-1); } .btn-icon.btn-lg { padding: var(--space-3); } /* ======================================== * css/forms * ======================================== */ /** * Form Components * * Input, select, checkbox, radio, and switch styles. */ /* ========================================================================== Form Group ========================================================================== */ .form-group { margin-bottom: var(--space-4); } .form-label { display: block; margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-medium); color: var(--color-text-primary); } .form-hint { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); } /* ========================================================================== Text Input ========================================================================== */ .input { display: block; width: 100%; padding: var(--space-2) var(--space-3); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-normal); color: var(--color-text-primary); background-color: var(--color-bg-input); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .input::placeholder { color: var(--color-text-muted); } .input:hover { border-color: var(--color-border-focus); } .input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px var(--color-accent-subtle); } .input:disabled { opacity: 0.5; cursor: not-allowed; } /* Input with error */ .input.input-error { border-color: var(--color-error); } .input.input-error:focus { box-shadow: 0 0 0 3px var(--color-error-subtle); } /* ========================================================================== Select ========================================================================== */ .select { appearance: none; padding-right: var(--space-8); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23666666'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; background-size: 1rem; } .theme-dark .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23999999'%3E%3Cpath d='M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z'/%3E%3C/svg%3E"); } /* Select size variants */ .select-sm { padding: var(--space-1) var(--space-6) var(--space-1) var(--space-2); font-size: var(--text-sm); } .select-lg { padding: var(--space-3) var(--space-10) var(--space-3) var(--space-4); font-size: var(--text-lg); font-weight: var(--font-medium); } /* ========================================================================== Checkbox & Radio ========================================================================== */ .checkbox, .radio { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; } .checkbox input, .radio input { width: 1rem; height: 1rem; margin: 0; accent-color: var(--color-accent); } /* ========================================================================== Switch / Toggle ========================================================================== */ .switch { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; } .switch-input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-slider { position: relative; width: 2.5rem; height: 1.5rem; background-color: var(--color-border); border-radius: var(--radius-full); transition: background-color var(--transition-fast); } .switch-slider::before { content: ''; position: absolute; top: 2px; left: 2px; width: calc(1.5rem - 4px); height: calc(1.5rem - 4px); background-color: #ffffff; border-radius: var(--radius-full); transition: transform var(--transition-fast); } .switch-input:checked + .switch-slider { background-color: var(--color-accent); } .switch-input:checked + .switch-slider::before { transform: translateX(1rem); } .switch-input:focus-visible + .switch-slider { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ======================================== * css/cards * ======================================== */ /** * Card Components * * Basic, elevated, and interactive card styles. */ /* ========================================================================== Base Card ========================================================================== */ .card { background-color: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .card-header { padding: var(--space-4); border-bottom: 1px solid var(--color-border); } .card-body { padding: var(--space-4); } .card-footer { padding: var(--space-4); border-top: 1px solid var(--color-border); } .card-title { margin: 0; font-size: var(--text-lg); font-weight: var(--font-semibold); } .card-subtitle { margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-text-secondary); } /* ========================================================================== Elevated Card ========================================================================== */ .card-elevated { border-color: transparent; box-shadow: var(--shadow-md); } /* ========================================================================== Interactive Card ========================================================================== */ .card-interactive { cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); } .card-interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); } .card-interactive:active { transform: translateY(0); } /* ========================================================================== Card Padding Variants ========================================================================== */ .card-compact .card-header, .card-compact .card-body, .card-compact .card-footer { padding: var(--space-3); } .card-spacious .card-header, .card-spacious .card-body, .card-spacious .card-footer { padding: var(--space-6); } /* ========================================================================== Canoe Card Variant (wavy border) ========================================================================== */ .card-canoe { position: relative; border-top: none; padding-top: var(--pattern-wave-height); } .card-canoe::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: var(--pattern-wave-height); background-image: var(--pattern-wave); background-repeat: repeat-x; background-size: 40px var(--pattern-wave-height); } /* ========================================================================== Status Card Variants ========================================================================== */ .card-status-success { border-left: 4px solid var(--color-success); } .card-status-warning { border-left: 4px solid var(--color-warning); } .card-status-error { border-left: 4px solid var(--color-error); } .card-status-info { border-left: 4px solid var(--color-info); } /* Status cards with glow effect */ .card-status-success.card-glow { box-shadow: var(--glow-success); } .card-status-warning.card-glow { box-shadow: var(--glow-warning); } .card-status-error.card-glow { box-shadow: var(--glow-error); } .card-status-info.card-glow { box-shadow: var(--glow-accent); } /* ======================================== * css/tables * ======================================== */ /** * Table Components * * Basic table styles with striped, hover, and bordered variants. */ /* ========================================================================== Base Table ========================================================================== */ .table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); } .table th, .table td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: middle; } .table th { font-weight: var(--font-semibold); color: var(--color-text-secondary); background-color: var(--color-bg-elevated); border-bottom: 1px solid var(--color-border); } .table td { border-bottom: 1px solid var(--color-border); } /* ========================================================================== Striped Table ========================================================================== */ .table-striped tbody tr:nth-child(even) { background-color: var(--color-bg-elevated); } /* ========================================================================== Hover Table ========================================================================== */ .table-hover tbody tr { transition: background-color var(--transition-fast); } .table-hover tbody tr:hover { background-color: var(--color-accent-subtle); } /* ========================================================================== Bordered Table ========================================================================== */ .table-bordered { border: 1px solid var(--color-border); } .table-bordered th, .table-bordered td { border: 1px solid var(--color-border); } /* ========================================================================== Compact Table ========================================================================== */ .table-compact th, .table-compact td { padding: var(--space-2) var(--space-3); } /* ========================================================================== Numeric Cells ========================================================================== */ .table .cell-numeric { font-family: var(--font-mono); text-align: right; font-variant-numeric: tabular-nums; } /* ========================================================================== Status Cells ========================================================================== */ .table .cell-status { width: 1%; white-space: nowrap; } /* ========================================================================== Responsive Table ========================================================================== */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ======================================== * css/status * ======================================== */ /** * Status Components * * Badges, status indicators, and alerts. */ /* ========================================================================== Badge ========================================================================== */ .badge { display: inline-flex; align-items: center; padding: 0.125rem var(--space-2); font-size: var(--text-xs); font-weight: var(--font-medium); line-height: var(--leading-normal); border-radius: var(--radius-full); } .badge-success { color: var(--color-success); background-color: var(--color-success-subtle); } .badge-warning { color: var(--color-warning); background-color: var(--color-warning-subtle); } .badge-error { color: var(--color-error); background-color: var(--color-error-subtle); } .badge-info { color: var(--color-info); background-color: var(--color-info-subtle); } .badge-neutral { color: var(--color-text-secondary); background-color: var(--color-bg-elevated); } /* ========================================================================== Status Dot ========================================================================== */ .status-dot { display: inline-block; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); } .status-dot-success { background-color: var(--color-success); } .status-dot-warning { background-color: var(--color-warning); } .status-dot-error { background-color: var(--color-error); } .status-dot-info { background-color: var(--color-info); } /* Pulsing animation for live status */ .status-dot-pulse { animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* Glow effect for status dots */ .status-dot-glow.status-dot-success { box-shadow: var(--glow-success); } .status-dot-glow.status-dot-warning { box-shadow: var(--glow-warning); } .status-dot-glow.status-dot-error { box-shadow: var(--glow-error); } .status-dot-glow.status-dot-info { box-shadow: var(--glow-accent); } /* ========================================================================== Alert ========================================================================== */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: 1px solid transparent; } .alert-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; } .alert-content { flex: 1; min-width: 0; } .alert-title { font-weight: var(--font-semibold); margin-bottom: var(--space-1); } .alert-success { color: var(--color-success); background-color: var(--color-success-subtle); border-color: var(--color-success); } .alert-warning { color: var(--color-warning); background-color: var(--color-warning-subtle); border-color: var(--color-warning); } .alert-error { color: var(--color-error); background-color: var(--color-error-subtle); border-color: var(--color-error); } .alert-info { color: var(--color-info); background-color: var(--color-info-subtle); border-color: var(--color-info); } /* ========================================================================== Connection Status ========================================================================== */ .connection-status { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-medium); border-radius: var(--radius-full); background-color: var(--color-bg-elevated); } .connection-status.connected { color: var(--color-success); } .connection-status.connecting { color: var(--color-warning); } .connection-status.disconnected { color: var(--color-error); } /* ======================================== * css/layout * ======================================== */ /** * Layout Components * * Container, grid, flex utilities, and spacing helpers. */ /* ========================================================================== Container ========================================================================== */ .container { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; padding-left: var(--space-4); padding-right: var(--space-4); } .container-sm { max-width: 640px; } .container-md { max-width: 768px; } .container-lg { max-width: 1024px; } .container-xl { max-width: 1280px; } .container-fluid { max-width: none; } /* ========================================================================== Grid ========================================================================== */ .grid { display: grid; gap: var(--space-4); } .grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 768px) { .md\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .sm\:grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); } } /* ========================================================================== Flex ========================================================================== */ .flex { display: flex; } .flex-col { flex-direction: column; } .flex-row { flex-direction: row; } .flex-wrap { flex-wrap: wrap; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .flex-1 { flex: 1 1 0%; } .flex-auto { flex: 1 1 auto; } .flex-none { flex: none; } /* ========================================================================== Gap ========================================================================== */ .gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); } .gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); } .gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); } /* ========================================================================== Spacing (Margin & Padding) ========================================================================== */ /* Margin */ .m-0 { margin: var(--space-0); } .m-1 { margin: var(--space-1); } .m-2 { margin: var(--space-2); } .m-3 { margin: var(--space-3); } .m-4 { margin: var(--space-4); } .mt-0 { margin-top: var(--space-0); } .mt-1 { margin-top: var(--space-1); } .mt-2 { margin-top: var(--space-2); } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); } .mt-8 { margin-top: var(--space-8); } .mb-0 { margin-bottom: var(--space-0); } .mb-1 { margin-bottom: var(--space-1); } .mb-2 { margin-bottom: var(--space-2); } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .mb-6 { margin-bottom: var(--space-6); } .mb-8 { margin-bottom: var(--space-8); } /* Padding */ .p-0 { padding: var(--space-0); } .p-1 { padding: var(--space-1); } .p-2 { padding: var(--space-2); } .p-3 { padding: var(--space-3); } .p-4 { padding: var(--space-4); } .p-6 { padding: var(--space-6); } .p-8 { padding: var(--space-8); } /* ========================================================================== Text Utilities ========================================================================== */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } .text-primary { color: var(--color-text-primary); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-accent { color: var(--color-accent); } .text-success { color: var(--color-success); } .text-warning { color: var(--color-warning); } .text-error { color: var(--color-error); } .text-xs { font-size: var(--text-xs); } .text-sm { font-size: var(--text-sm); } .text-base { font-size: var(--text-base); } .text-lg { font-size: var(--text-lg); } .text-xl { font-size: var(--text-xl); } .text-2xl { font-size: var(--text-2xl); } .font-normal { font-weight: var(--font-normal); } .font-medium { font-weight: var(--font-medium); } .font-semibold { font-weight: var(--font-semibold); } .font-bold { font-weight: var(--font-bold); } .font-mono { font-family: var(--font-mono); } /* ========================================================================== Display ========================================================================== */ .hidden { display: none; } .block { display: block; } .inline { display: inline; } .inline-block { display: inline-block; } /* ========================================================================== Width / Height ========================================================================== */ .w-full { width: 100%; } .h-full { height: 100%; } .min-h-screen { min-height: 100vh; } /* ======================================== * css/modal * ======================================== */ /** * Modal Components * * Accessible modal dialogs with backdrop overlay. */ /* ========================================================================== Modal Backdrop ========================================================================== */ .modal-backdrop { position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--space-4); z-index: 1000; opacity: 0; visibility: hidden; transition: opacity var(--transition-normal), visibility var(--transition-normal), backdrop-filter var(--transition-normal); } .modal-backdrop.open { opacity: 1; visibility: visible; } /* Dark theme: darker backdrop */ .theme-dark .modal-backdrop { background-color: rgba(0, 0, 0, 0.75); } /* ========================================================================== Modal Container ========================================================================== */ .modal { background-color: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); max-width: 500px; width: 100%; max-height: calc(100vh - var(--space-8)); overflow: hidden; display: flex; flex-direction: column; transform: scale(0.95) translateY(-10px); transition: transform var(--transition-normal); } .modal-backdrop.open .modal { transform: scale(1) translateY(0); } /* ========================================================================== Modal Sizes ========================================================================== */ .modal-sm { max-width: 400px; } .modal-lg { max-width: 700px; } .modal-xl { max-width: 900px; } .modal-fullscreen { max-width: calc(100vw - var(--space-8)); max-height: calc(100vh - var(--space-8)); width: 100%; height: 100%; } /* ========================================================================== Modal Header ========================================================================== */ .modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4); border-bottom: 1px solid var(--color-border); flex-shrink: 0; } .modal-title { margin: 0; font-size: var(--text-lg); font-weight: var(--font-semibold); } .modal-close { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: none; background: transparent; border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: background-color var(--transition-fast), color var(--transition-fast); } .modal-close:hover { background-color: var(--color-bg-elevated); color: var(--color-text-primary); } .modal-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ========================================================================== Modal Body ========================================================================== */ .modal-body { padding: var(--space-4); overflow-y: auto; flex-grow: 1; } /* ========================================================================== Modal Footer ========================================================================== */ .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3); padding: var(--space-4); border-top: 1px solid var(--color-border); flex-shrink: 0; } .modal-footer-left { justify-content: flex-start; } .modal-footer-center { justify-content: center; } .modal-footer-between { justify-content: space-between; } /* ========================================================================== Confirmation Modal Variant ========================================================================== */ .modal-confirm .modal-body { text-align: center; padding: var(--space-6); } .modal-confirm .modal-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-full); margin-bottom: var(--space-4); } .modal-confirm .modal-icon-warning { background-color: var(--color-warning-subtle); color: var(--color-warning); } .modal-confirm .modal-icon-error { background-color: var(--color-error-subtle); color: var(--color-error); } .modal-confirm .modal-icon-success { background-color: var(--color-success-subtle); color: var(--color-success); } .modal-confirm .modal-icon-info { background-color: var(--color-info-subtle); color: var(--color-info); } .modal-confirm .modal-footer { justify-content: center; } /* ========================================================================== Accessibility ========================================================================== */ /* Prevent body scroll when modal is open */ body.modal-open { overflow: hidden; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .modal-backdrop { transition: none; } .modal { transition: none; transform: none; } .modal-backdrop.open .modal { transform: none; } } /* ======================================== * css/toast * ======================================== */ /** * Toast/Notification Components * * Non-blocking notifications that appear temporarily. * Supports success, warning, error, and info variants. */ /* ========================================================================== Toast Container ========================================================================== */ .toast-container { position: fixed; z-index: 1000; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); pointer-events: none; max-width: 100%; } /* Position variants */ .toast-container-top-right { top: 0; right: 0; } .toast-container-top-left { top: 0; left: 0; } .toast-container-top-center { top: 0; left: 50%; transform: translateX(-50%); } .toast-container-bottom-right { bottom: 0; right: 0; } .toast-container-bottom-left { bottom: 0; left: 0; } .toast-container-bottom-center { bottom: 0; left: 50%; transform: translateX(-50%); } /* ========================================================================== Toast ========================================================================== */ .toast { display: flex; align-items: flex-start; gap: var(--space-3); min-width: 300px; max-width: 420px; padding: var(--space-3) var(--space-4); background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); pointer-events: auto; animation: toast-slide-in 0.3s ease-out; } .toast.toast-exiting { animation: toast-slide-out 0.2s ease-in forwards; } /* Animation keyframes */ @keyframes toast-slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-slide-out { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(100%); } } /* Left-side toasts slide from left */ .toast-container-top-left .toast, .toast-container-bottom-left .toast { animation-name: toast-slide-in-left; } .toast-container-top-left .toast.toast-exiting, .toast-container-bottom-left .toast.toast-exiting { animation-name: toast-slide-out-left; } @keyframes toast-slide-in-left { from { opacity: 0; transform: translateX(-100%); } to { opacity: 1; transform: translateX(0); } } @keyframes toast-slide-out-left { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(-100%); } } /* Center toasts slide down/up */ .toast-container-top-center .toast { animation-name: toast-slide-in-top; } .toast-container-top-center .toast.toast-exiting { animation-name: toast-slide-out-top; } .toast-container-bottom-center .toast { animation-name: toast-slide-in-bottom; } .toast-container-bottom-center .toast.toast-exiting { animation-name: toast-slide-out-bottom; } @keyframes toast-slide-in-top { from { opacity: 0; transform: translateX(-50%) translateY(-100%); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes toast-slide-out-top { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(-100%); } } @keyframes toast-slide-in-bottom { from { opacity: 0; transform: translateX(-50%) translateY(100%); } to { opacity: 1; transform: translateX(-50%) translateY(0); } } @keyframes toast-slide-out-bottom { from { opacity: 1; transform: translateX(-50%) translateY(0); } to { opacity: 0; transform: translateX(-50%) translateY(100%); } } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .toast, .toast.toast-exiting { animation: none; } } /* ========================================================================== Toast Icon ========================================================================== */ .toast-icon { flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-top: 0.125rem; } /* ========================================================================== Toast Content ========================================================================== */ .toast-content { flex: 1; min-width: 0; } .toast-title { font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: var(--leading-tight); } .toast-message { font-size: var(--text-sm); color: var(--color-text-secondary); line-height: var(--leading-normal); margin-top: var(--space-1); } /* ========================================================================== Toast Close Button ========================================================================== */ .toast-close { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; margin: -0.25rem -0.5rem -0.25rem 0; padding: 0; border: none; background: transparent; color: var(--color-text-muted); cursor: pointer; border-radius: var(--radius-sm); transition: color 0.15s ease, background-color 0.15s ease; } .toast-close:hover { color: var(--color-text-primary); background-color: var(--color-bg-hover); } .toast-close:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; } /* ========================================================================== Toast Variants ========================================================================== */ .toast-success { border-left: 3px solid var(--color-success); } .toast-success .toast-icon { color: var(--color-success); } .toast-warning { border-left: 3px solid var(--color-warning); } .toast-warning .toast-icon { color: var(--color-warning); } .toast-error { border-left: 3px solid var(--color-error); } .toast-error .toast-icon { color: var(--color-error); } .toast-info { border-left: 3px solid var(--color-info); } .toast-info .toast-icon { color: var(--color-info); } /* ========================================================================== Toast with Action ========================================================================== */ .toast-action { margin-top: var(--space-2); } .toast-action .btn { padding: var(--space-1) var(--space-2); font-size: var(--text-xs); } /* ========================================================================== Toast Progress Bar (optional auto-dismiss indicator) ========================================================================== */ .toast-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background-color: var(--color-border); border-radius: 0 0 var(--radius-md) var(--radius-md); overflow: hidden; } .toast-progress-bar { height: 100%; background-color: var(--color-accent); animation: toast-progress 5s linear forwards; } @keyframes toast-progress { from { width: 100%; } to { width: 0%; } } .toast-success .toast-progress-bar { background-color: var(--color-success); } .toast-warning .toast-progress-bar { background-color: var(--color-warning); } .toast-error .toast-progress-bar { background-color: var(--color-error); } .toast-info .toast-progress-bar { background-color: var(--color-info); } /* Toast needs relative positioning for progress bar */ .toast { position: relative; } /* ======================================== * css/tabs * ======================================== */ /** * Timing Design System - Tabs * * Tab navigation for switching between content panels. * Supports horizontal tabs with underline indicator. * * Structure: * .tabs - Container wrapper * .tab-list - Tab button container (role="tablist") * .tab - Individual tab button (role="tab") * .tab-panels - Content panels container * .tab-panel - Individual content panel (role="tabpanel") * * Variants: * .tabs-bordered - Tabs with bottom border * .tabs-pills - Pill-style tabs with background * .tabs-sm - Smaller tabs * .tabs-lg - Larger tabs */ /* Tab container */ .tabs { display: flex; flex-direction: column; } /* Tab list (navigation) */ .tab-list { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); } /* Individual tab button */ .tab { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); font-weight: 500; color: var(--color-text-secondary); background: transparent; border: none; border-radius: var(--radius-sm) var(--radius-sm) 0 0; cursor: pointer; transition: color var(--transition-fast), background-color var(--transition-fast); white-space: nowrap; } .tab:hover { color: var(--color-text-primary); background-color: var(--color-bg-elevated); } .tab:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; } /* Active tab state */ .tab[aria-selected="true"], .tab.active { color: var(--color-accent); } /* Active indicator (underline) */ .tab[aria-selected="true"]::after, .tab.active::after { content: ''; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background-color: var(--color-accent); border-radius: 2px 2px 0 0; } /* Disabled tab */ .tab:disabled, .tab[aria-disabled="true"] { color: var(--color-text-muted); cursor: not-allowed; opacity: 0.5; } .tab:disabled:hover, .tab[aria-disabled="true"]:hover { background-color: transparent; } /* Tab with icon */ .tab-icon { width: 16px; height: 16px; flex-shrink: 0; } /* Tab badge/count */ .tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1); font-size: var(--text-xs); font-weight: 600; background-color: var(--color-bg-elevated); border-radius: var(--radius-full); } .tab[aria-selected="true"] .tab-badge, .tab.active .tab-badge { background-color: var(--color-accent); color: white; } /* Tab panels container */ .tab-panels { position: relative; } /* Individual tab panel */ .tab-panel { display: none; } .tab-panel[aria-hidden="false"], .tab-panel.active { display: block; } /* Panel animation (optional) */ .tab-panel.active { animation: tabFadeIn var(--transition-normal) ease-out; } @keyframes tabFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } /* Respect reduced motion */ @media (prefers-reduced-motion: reduce) { .tab-panel.active { animation: none; } } /* ========================================================================== Variants ========================================================================== */ /* Bordered variant - tabs with visible border on all sides */ .tabs-bordered .tab-list { border-bottom: 1px solid var(--color-border); } .tabs-bordered .tab[aria-selected="true"], .tabs-bordered .tab.active { background-color: var(--color-bg-surface); border: 1px solid var(--color-border); border-bottom-color: var(--color-bg-surface); margin-bottom: -1px; } .tabs-bordered .tab[aria-selected="true"]::after, .tabs-bordered .tab.active::after { display: none; } /* Pills variant - rounded pill-style tabs */ .tabs-pills .tab-list { gap: var(--space-2); border-bottom: none; background-color: var(--color-bg-elevated); padding: var(--space-1); border-radius: var(--radius-md); margin-bottom: var(--space-4); } .tabs-pills .tab { border-radius: var(--radius-sm); padding: var(--space-2) var(--space-3); } .tabs-pills .tab:hover { background-color: var(--color-bg-surface); } .tabs-pills .tab[aria-selected="true"], .tabs-pills .tab.active { background-color: var(--color-bg-surface); color: var(--color-text-primary); box-shadow: var(--shadow-sm); } .tabs-pills .tab[aria-selected="true"]::after, .tabs-pills .tab.active::after { display: none; } /* ========================================================================== Sizes ========================================================================== */ /* Small tabs */ .tabs-sm .tab { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); } .tabs-sm .tab-icon { width: 14px; height: 14px; } .tabs-sm .tab-badge { min-width: 16px; height: 16px; font-size: 10px; } /* Large tabs */ .tabs-lg .tab { padding: var(--space-4) var(--space-5); font-size: var(--text-base); } .tabs-lg .tab-icon { width: 20px; height: 20px; } .tabs-lg .tab-badge { min-width: 22px; height: 22px; font-size: var(--text-sm); } /* ========================================================================== Full-width tabs ========================================================================== */ .tabs-full .tab-list { width: 100%; } .tabs-full .tab { flex: 1; justify-content: center; } /* ======================================== * css/header * ======================================== */ /** * Canoe Timing Design System - Header Component * * App header s charakteristickým stylem: * - 4px barevny bar vlevo s glow efektem * - Status indikatory (TCP/UDP/XML) * - LIVE badge se slalomovymi pruhy */ /* ========================================================================== APP HEADER ========================================================================== */ .app-header { position: relative; display: flex; align-items: center; gap: var(--space-4); padding: var(--space-3) var(--space-4); padding-left: calc(var(--space-4) + var(--header-bar-width, 4px) + var(--space-3)); background-color: var(--color-bg-surface); border-bottom: none; min-height: 56px; } /* Spodni okraj headeru - rovná čára s vlnkou na konci */ .app-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: var(--pattern-wave-height, 4px); background: /* Rovná čára (vlevo, většina šířky) */ linear-gradient(var(--color-border), var(--color-border)) 0 50% / calc(100% - 40px) 2px no-repeat, /* Vlnka (vpravo) - v barve borderu */ var(--pattern-wave-border) right center / 40px var(--pattern-wave-height) no-repeat; } /* Barevny bar vlevo */ .app-header::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: var(--header-bar-width, 4px); background: var(--color-accent); box-shadow: var(--header-bar-glow, 0 0 20px rgba(0, 136, 255, 0.4)); } /* Header content areas */ .header-brand { display: flex; align-items: center; gap: var(--space-3); flex-shrink: 0; } .header-title { font-size: var(--text-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); margin: 0; } /* Larger title variant for admin dashboards (c123-server style) */ .header-title-lg { font-size: var(--text-2xl); font-weight: var(--font-weight-bold); letter-spacing: -0.02em; } .header-subtitle { font-size: var(--text-sm); color: var(--color-text-secondary); margin: 0; } .header-nav { display: flex; align-items: center; gap: var(--space-2); flex: 1; } .header-actions { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; } /* ========================================================================== STATUS INDICATORS ========================================================================== */ .header-status { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; } /* ========================================================================== MINIMAL STATUS ITEM (admin dashboard style) Jednoduchý status: dot + label, bez badge stylu ========================================================================== */ .header-status-item { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-text-secondary); } .header-status-item .status-dot { flex-shrink: 0; } /* ========================================================================== PORT DISPLAY ========================================================================== */ .header-port { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--color-accent); } /* ========================================================================== SIMPLE LIVE INDICATOR (alternative to badge-live) Pro projekty kde gate pole animace nedává smysl ========================================================================== */ .header-live { display: flex; align-items: center; gap: var(--space-2); color: var(--color-success); font-weight: var(--font-weight-medium); font-size: var(--text-sm); text-transform: uppercase; letter-spacing: 0.05em; } .header-live .status-dot { flex-shrink: 0; } .status-indicator { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-2); background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--color-text-secondary); transition: all var(--transition-fast); } .status-indicator-dot { width: 8px; height: 8px; border-radius: var(--radius-full); background-color: var(--color-text-muted); transition: all var(--transition-fast); } /* Connected state */ .status-indicator.connected .status-indicator-dot { background-color: var(--color-success); box-shadow: var(--glow-success); } .status-indicator.connected { border-color: var(--color-success); color: var(--color-text-primary); } /* Connecting state - pulsing */ .status-indicator.connecting .status-indicator-dot { background-color: var(--color-warning); animation: pulse-glow 1.5s ease-in-out infinite; } .status-indicator.connecting { border-color: var(--color-warning); } /* Disconnected state */ .status-indicator.disconnected .status-indicator-dot { background-color: var(--color-error); } .status-indicator.disconnected { border-color: var(--color-border); opacity: 0.7; } /* Pulse animation */ @keyframes pulse-glow { 0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--color-warning); } 50% { opacity: 0.5; box-shadow: 0 0 8px var(--color-warning); } } /* ========================================================================== SLALOM GATE POLE - pruhovaná tyčka jako indikátor ========================================================================== */ /* * Slalomová branka = svislá tyčka s horizontálními pruhy (bílo-barevná) * Čisté proporce: 5px šířka, 3px pruhy */ .gate-pole { display: inline-block; width: 5px; height: 18px; border-radius: 2.5px 2.5px 1px 1px; background: repeating-linear-gradient( to bottom, #ffffff 0px, #ffffff 3px, var(--color-success) 3px, var(--color-success) 6px ); box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 6px var(--glow-success); } .gate-pole-success { background: repeating-linear-gradient( to bottom, #ffffff 0px, #ffffff 3px, var(--color-success) 3px, var(--color-success) 6px ); box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 210, 106, 0.4); } .gate-pole-warning { background: repeating-linear-gradient( to bottom, #ffffff 0px, #ffffff 3px, var(--color-warning) 3px, var(--color-warning) 6px ); box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 6px rgba(255, 149, 0, 0.4); animation: pole-pulse 1.5s ease-in-out infinite; } .gate-pole-error { background: repeating-linear-gradient( to bottom, #ffffff 0px, #ffffff 3px, var(--color-error) 3px, var(--color-error) 6px ); box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 6px rgba(255, 59, 48, 0.4); } .gate-pole-info { background: repeating-linear-gradient( to bottom, #ffffff 0px, #ffffff 3px, var(--color-accent) 3px, var(--color-accent) 6px ); box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1), 0 0 6px rgba(0, 136, 255, 0.4); } @keyframes pole-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* ========================================================================== LIVE BADGE - s pruhovanou tyčkou ========================================================================== */ .badge-live { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: 6px 10px 6px 16px; border-radius: var(--radius-md); font-size: var(--text-xs); font-weight: var(--font-weight-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-primary); background-color: var(--color-bg-elevated); border: 1px solid var(--color-border); overflow: visible; } /* Pruhovaná tyčka - visí shora */ .badge-live::before { content: ''; position: absolute; left: 6px; top: -4px; width: 5px; height: calc(100% + 4px); /* Zaoblený vrch (jako závěs) */ border-radius: 2.5px 2.5px 1px 1px; /* Čisté pruhy - 3px bílá, 3px zelená */ background: repeating-linear-gradient( to bottom, #ffffff 0px, #ffffff 3px, var(--color-success) 3px, var(--color-success) 6px ); /* Jemný stín pro hloubku */ box-shadow: 1px 0 0 rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 210, 106, 0.3); } /* Jemný glow efekt */ .badge-live::after { content: ''; position: absolute; left: 4px; top: -6px; width: 9px; height: calc(100% + 8px); border-radius: 4px; background: transparent; box-shadow: 0 0 8px rgba(0, 210, 106, 0.4); animation: live-glow 2s ease-in-out infinite; pointer-events: none; } @keyframes live-glow { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } /* ========================================================================== HEADER VARIANTS ========================================================================== */ /* Compact header */ .app-header.header-compact { padding: var(--space-2) var(--space-3); padding-left: calc(var(--space-3) + var(--header-bar-width, 4px) + var(--space-2)); min-height: 44px; } .app-header.header-compact .header-title { font-size: var(--text-base); } /* Header bez baru (plain) */ .app-header.header-plain::before { display: none; } .app-header.header-plain { padding-left: var(--space-4); } /* Header s elevated efektem */ .app-header.header-elevated { box-shadow: var(--shadow-md); border-bottom: none; } /* ========================================================================== RESPONSIVE ========================================================================== */ @media (max-width: 640px) { .app-header { flex-wrap: wrap; gap: var(--space-3); } .header-status { order: 3; width: 100%; justify-content: flex-start; } .header-actions { order: 2; } } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .status-indicator.connecting .status-indicator-dot, .badge-live, .badge-live::before { animation: none; } } /* ======================================== * css/log * ======================================== */ /** * Canoe Timing Design System - Log Component * * Log viewer komponenta pro zobrazeni aplikacnich logu: * - log-container: scrollable kontejner * - log-entry: jednotliva log zprava * - level badges (debug/info/warn/error) * - component highlighting * - timestamp a auto-scroll */ /* ========================================================================== LOG CONTAINER ========================================================================== */ .log-container { display: flex; flex-direction: column; min-height: 200px; max-height: 500px; overflow-y: auto; background-color: var(--color-bg-primary); border: 1px solid var(--color-border); border-radius: var(--radius-lg); font-family: var(--font-mono); font-size: var(--text-xs); line-height: var(--leading-relaxed); } /* Full-height variant */ .log-container.log-fullheight { max-height: none; flex: 1; } /* Fixed height variants */ .log-container.log-sm { max-height: 200px; } .log-container.log-md { max-height: 400px; } .log-container.log-lg { max-height: 600px; } /* Scroll shadow indicators */ .log-container::before, .log-container::after { content: ''; position: sticky; left: 0; right: 0; height: 16px; pointer-events: none; flex-shrink: 0; z-index: 1; } .log-container::before { top: 0; background: linear-gradient( to bottom, var(--color-bg-primary), transparent ); } .log-container::after { bottom: 0; background: linear-gradient( to top, var(--color-bg-primary), transparent ); } /* ========================================================================== LOG ENTRY ========================================================================== */ .log-entry { display: flex; align-items: baseline; gap: var(--space-2); padding: 3px var(--space-3); } .log-entry:hover { background-color: rgba(255, 255, 255, 0.02); } /* Timestamp */ .log-timestamp { flex-shrink: 0; color: var(--color-text-muted); font-variant-numeric: tabular-nums; } /* Level - lehký styl */ .log-level { flex-shrink: 0; min-width: 40px; font-size: var(--text-xs); font-weight: var(--font-weight-medium); text-transform: uppercase; } .log-level-debug { color: var(--color-text-muted); } .log-level-info { color: var(--color-success); } .log-level-warn { color: var(--color-warning); } .log-level-error { color: var(--color-error); } /* Component */ .log-component { flex-shrink: 0; color: var(--color-accent); } .log-component::before { content: '['; opacity: 0.5; } .log-component::after { content: ']'; opacity: 0.5; } /* Message */ .log-message { flex: 1; min-width: 0; color: var(--color-text-primary); word-break: break-word; white-space: pre-wrap; } /* ========================================================================== LOG ENTRY VARIANTS ========================================================================== */ /* Error entry - subtle highlight */ .log-entry.log-entry-error { background-color: rgba(255, 59, 48, 0.05); } .log-entry.log-entry-error:hover { background-color: rgba(255, 59, 48, 0.1); } /* Warning entry - subtle highlight */ .log-entry.log-entry-warn { background-color: rgba(255, 149, 0, 0.05); } .log-entry.log-entry-warn:hover { background-color: rgba(255, 149, 0, 0.1); } /* Compact variant (no gaps, denser) */ .log-container.log-compact .log-entry { padding: var(--space-0-5) var(--space-2); gap: var(--space-1); } .log-container.log-compact .log-level { min-width: 40px; font-size: 9px; } .log-container.log-compact .log-component { min-width: 60px; } /* ========================================================================== LOG HEADER / TOOLBAR ========================================================================== */ .log-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); background-color: var(--color-bg-surface); border-bottom: 1px solid var(--color-border); border-radius: var(--radius-lg) var(--radius-lg) 0 0; position: sticky; top: 0; z-index: 2; } .log-header-title { font-size: var(--text-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); font-family: var(--font-sans); } .log-header-actions { display: flex; align-items: center; gap: var(--space-2); } /* Filter buttons */ .log-filter { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-0-5) var(--space-2); background-color: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: var(--text-xs); font-family: var(--font-mono); color: var(--color-text-secondary); cursor: pointer; transition: all var(--transition-fast); } .log-filter:hover { background-color: var(--color-bg-elevated); color: var(--color-text-primary); } .log-filter.active { background-color: var(--color-accent); border-color: var(--color-accent); color: white; } .log-filter-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 var(--space-1); border-radius: var(--radius-full); background-color: var(--color-bg-elevated); font-size: 10px; font-weight: var(--font-weight-bold); } .log-filter.active .log-filter-count { background-color: rgba(255, 255, 255, 0.2); } /* Filter color variants - subtle level indication */ .log-filter-error { color: var(--color-error); border-color: rgba(255, 59, 48, 0.3); } .log-filter-error:hover { background-color: rgba(255, 59, 48, 0.1); border-color: var(--color-error); } .log-filter-error.active { background-color: var(--color-error); border-color: var(--color-error); color: white; } .log-filter-warn { color: var(--color-warning); border-color: rgba(255, 149, 0, 0.3); } .log-filter-warn:hover { background-color: rgba(255, 149, 0, 0.1); border-color: var(--color-warning); } .log-filter-warn.active { background-color: var(--color-warning); border-color: var(--color-warning); color: white; } .log-filter-info { color: var(--color-success); border-color: rgba(0, 210, 106, 0.3); } .log-filter-info:hover { background-color: rgba(0, 210, 106, 0.1); border-color: var(--color-success); } .log-filter-info.active { background-color: var(--color-success); border-color: var(--color-success); color: white; } .log-filter-debug { color: var(--color-text-muted); border-color: rgba(128, 128, 128, 0.3); } .log-filter-debug:hover { background-color: rgba(128, 128, 128, 0.1); border-color: var(--color-text-muted); } .log-filter-debug.active { background-color: var(--color-text-muted); border-color: var(--color-text-muted); color: white; } /* ========================================================================== LOG EMPTY STATE ========================================================================== */ .log-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8); color: var(--color-text-muted); text-align: center; } .log-empty-icon { width: 48px; height: 48px; margin-bottom: var(--space-3); opacity: 0.5; } .log-empty-text { font-size: var(--text-sm); } /* ========================================================================== LIVE INDICATOR ========================================================================== */ .log-live-indicator { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: var(--font-weight-medium); color: var(--color-success); } .log-live-indicator::before { content: ''; width: 6px; height: 6px; border-radius: var(--radius-full); background-color: var(--color-success); animation: log-live-pulse 2s ease-in-out infinite; } @keyframes log-live-pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--color-success); } 50% { opacity: 0.5; box-shadow: 0 0 8px var(--color-success); } } /* ========================================================================== LIGHT THEME ADJUSTMENTS ========================================================================== */ .theme-light .log-entry.log-entry-error { background-color: rgba(220, 38, 38, 0.05); } .theme-light .log-entry.log-entry-error:hover { background-color: rgba(220, 38, 38, 0.1); } .theme-light .log-entry.log-entry-warn { background-color: rgba(217, 119, 6, 0.05); } .theme-light .log-entry.log-entry-warn:hover { background-color: rgba(217, 119, 6, 0.1); } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .log-live-indicator::before { animation: none; } } /* ======================================== * css/dropzone * ======================================== */ /** * Canoe Timing Design System - DropZone Component * * Drag & drop komponenta: * - Dashed border, hover glow * - Drag-over animované pruhy * - has-file state pro vybraný soubor */ /* ========================================================================== DROPZONE BASE ========================================================================== */ .dropzone { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); min-height: 160px; padding: var(--space-6); border: 2px dashed var(--color-border); border-radius: var(--radius-lg); background-color: var(--color-bg-surface); cursor: pointer; transition: all var(--transition-fast); } .dropzone:hover { border-color: var(--color-accent); background-color: var(--color-bg-elevated); } .dropzone:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* ========================================================================== DROPZONE CONTENT ========================================================================== */ .dropzone-icon { width: 48px; height: 48px; color: var(--color-text-muted); transition: color var(--transition-fast); } .dropzone:hover .dropzone-icon { color: var(--color-accent); } .dropzone-text { text-align: center; } .dropzone-title { margin: 0; font-size: var(--text-base); font-weight: var(--font-weight-medium); color: var(--color-text-primary); } .dropzone-subtitle { margin: var(--space-1) 0 0; font-size: var(--text-sm); color: var(--color-text-secondary); } .dropzone-hint { margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--color-text-muted); } /* Hidden file input */ .dropzone-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } /* ========================================================================== DRAG-OVER STATE (animované pruhy) ========================================================================== */ .dropzone.drag-over { border-style: solid; border-color: var(--color-accent); background-color: var(--color-bg-elevated); box-shadow: var(--glow-accent); } /* Animovaný pruhovaný pattern jako "marching ants" */ .dropzone.drag-over::after { content: ''; position: absolute; inset: -2px; border-radius: var(--radius-lg); pointer-events: none; background: repeating-linear-gradient( -45deg, transparent 0px, transparent 10px, rgba(0, 136, 255, 0.1) 10px, rgba(0, 136, 255, 0.1) 20px ); background-size: 28px 28px; animation: dropzone-march 0.5s linear infinite; } @keyframes dropzone-march { from { background-position: 0 0; } to { background-position: 28px 0; } } .dropzone.drag-over .dropzone-icon { color: var(--color-accent); transform: scale(1.1); } /* ========================================================================== HAS-FILE STATE (soubor je vybraný) ========================================================================== */ .dropzone.has-file { border-color: var(--color-success); border-style: solid; background-color: var(--color-bg-elevated); } .dropzone.has-file .dropzone-icon { color: var(--color-success); } /* File info display */ .dropzone-file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); background-color: var(--color-bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); width: 100%; max-width: 320px; } .dropzone-file-icon { width: 32px; height: 32px; flex-shrink: 0; color: var(--color-accent); } .dropzone-file-info { flex: 1; min-width: 0; } .dropzone-file-name { margin: 0; font-size: var(--text-sm); font-weight: var(--font-weight-medium); color: var(--color-text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dropzone-file-size { margin: var(--space-1) 0 0; font-size: var(--text-xs); color: var(--color-text-secondary); } .dropzone-file-remove { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: none; border-radius: var(--radius-full); background-color: transparent; color: var(--color-text-muted); cursor: pointer; transition: all var(--transition-fast); } .dropzone-file-remove:hover { background-color: var(--color-error); color: white; } /* ========================================================================== ERROR STATE ========================================================================== */ .dropzone.has-error { border-color: var(--color-error); } .dropzone.has-error .dropzone-icon { color: var(--color-error); } .dropzone-error { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-error); text-align: center; } /* ========================================================================== DISABLED STATE ========================================================================== */ .dropzone.disabled, .dropzone:disabled { opacity: 0.5; cursor: not-allowed; pointer-events: none; } /* ========================================================================== SIZE VARIANTS ========================================================================== */ /* Compact */ .dropzone.dropzone-sm { min-height: 100px; padding: var(--space-4); gap: var(--space-2); } .dropzone.dropzone-sm .dropzone-icon { width: 32px; height: 32px; } .dropzone.dropzone-sm .dropzone-title { font-size: var(--text-sm); } /* Large */ .dropzone.dropzone-lg { min-height: 240px; padding: var(--space-8); } .dropzone.dropzone-lg .dropzone-icon { width: 64px; height: 64px; } .dropzone.dropzone-lg .dropzone-title { font-size: var(--text-lg); } /* ========================================================================== MULTIPLE FILES VARIANT ========================================================================== */ .dropzone-files { display: flex; flex-wrap: wrap; gap: var(--space-2); width: 100%; max-width: 100%; } .dropzone-files .dropzone-file { max-width: 280px; } /* ========================================================================== REDUCED MOTION ========================================================================== */ @media (prefers-reduced-motion: reduce) { .dropzone.drag-over::after { animation: none; } .dropzone.drag-over .dropzone-icon { transform: none; } }