/* * BenOS UI — sdílené komponenty `ui-*` * ════════════════════════════════════════════════════════════════════════ * Pojmenované podle ROLE, ne podle modulu (`ui-button--danger`, ne * `sd-btn-red`). HTML a přístupnost drží Jinja makra v * `templates/ui/components.html`; chování (taby, modal) `static/js/ui/ui.js`. * Živý katalog: /ui-kit. * * Pravidla: * • barvy jen přes sémantické tokeny, rozměry přes `--ui-*` tokeny, * • modifikátor = `ui-x--varianta`, část = `ui-x__cast` (BEM), * • stav přes ARIA atributy, kde existují (`aria-invalid`, `aria-selected`, * `aria-busy`), ne přes vlastní třídy — styl pak nejde rozejít se * sémantikou, * • žádné `!important`. * * Lišta filtrů uvnitř stránky zůstává `.page-toolbar` (shell.css) — je to * hotová sdílená komponenta, `ui-button` do ní patří taky. */ /* Atribut `hidden` musí vyhrát nad `display` komponenty (.ui-button je * inline-flex, hlavička modalu flex…) — jinak `el.hidden = true` nic neudělá. * Jen pro ui-* prvky; legacy CSS se tím nemění. */ [class^="ui-"][hidden], [class*=" ui-"][hidden] { display: none; } /* ─── Tlačítko ─────────────────────────────────────────────────────────── */ .ui-button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--ui-control-height); padding: 0 var(--space-4); border: 1px solid var(--ui-control-border); border-radius: var(--ui-control-radius); background: var(--ui-control-bg); color: var(--color-text-body); font: inherit; font-size: var(--ui-control-font); font-weight: var(--font-weight-medium); line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; transition: background var(--duration-fast) ease, border-color var(--duration-fast) ease, color var(--duration-fast) ease; } .ui-button:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--color-primary); color: var(--color-primary); } .ui-button:disabled, .ui-button[aria-disabled="true"] { opacity: .5; cursor: not-allowed; } .ui-button--primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); } .ui-button--primary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); } .ui-button--danger { background: var(--color-error-600); border-color: var(--color-error-600); color: var(--color-text-inverse); } .ui-button--danger:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-error-700); border-color: var(--color-error-700); color: var(--color-text-inverse); } /* Nevratná akce na řádku / v liště (Smazat, Zamítnout): červená, ale ne * plná — plná --danger je pro potvrzovací tlačítko v dialogu. */ .ui-button--danger-subtle { color: var(--color-error-600); border-color: rgba(239, 68, 68, 0.3); } .ui-button--danger-subtle:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-error-50); border-color: var(--color-error-500); color: var(--color-error-700); } .ui-button--success-subtle { color: var(--color-success-600); border-color: var(--color-success-500); background: var(--color-success-50); } .ui-button--success-subtle:hover:not(:disabled):not([aria-disabled="true"]) { border-color: var(--color-success-600); color: var(--color-success-700); } .ui-button--success { background: var(--color-success-600); border-color: var(--color-success-600); color: var(--color-text-inverse); } .ui-button--success:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-success-700); border-color: var(--color-success-700); color: var(--color-text-inverse); } .ui-button--ghost { background: transparent; border-color: transparent; } .ui-button--ghost:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--color-bg-subtle); border-color: transparent; color: var(--color-text); } .ui-button--sm { min-height: var(--ui-control-height-sm); padding: 0 var(--space-3); font-size: var(--font-size-xs); } .ui-button--lg { min-height: var(--ui-control-height-lg); padding: 0 var(--space-5); font-size: var(--font-size-base); } .ui-button--block { display: flex; width: 100%; } .ui-button--icon { padding: 0; width: var(--ui-control-height); } .ui-button--icon.ui-button--sm { width: var(--ui-control-height-sm); } /* Načítání: text zůstane pro čtečky, vizuálně spinner. */ .ui-button[aria-busy="true"] { position: relative; color: transparent; pointer-events: none; } .ui-button[aria-busy="true"]::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-color: var(--color-text-muted) transparent var(--color-text-muted) transparent; border-radius: 50%; animation: ui-spin .8s linear infinite; } .ui-button--primary[aria-busy="true"]::after, .ui-button--danger[aria-busy="true"]::after { border-color: var(--color-on-primary) transparent var(--color-on-primary) transparent; } @keyframes ui-spin { to { transform: rotate(360deg); } } /* ─── Formulářové pole ─────────────────────────────────────────────────── */ .ui-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-4); } .ui-field:last-child { margin-bottom: 0; } .ui-label { font-size: var(--ui-label-font); font-weight: var(--font-weight-medium); color: var(--color-text-muted); text-transform: var(--ui-label-transform); letter-spacing: var(--ui-label-tracking); } .ui-label__required { color: var(--color-error-600); margin-left: 2px; } .ui-input, .ui-select, .ui-textarea { width: 100%; min-height: var(--ui-control-height-lg); padding: 0 14px; background: var(--ui-control-bg); border: 1px solid var(--ui-control-border); border-radius: var(--ui-control-radius); color: var(--color-text); font: inherit; font-size: var(--font-size-base); font-feature-settings: var(--font-feature-settings); outline: none; transition: border-color var(--duration-fast) ease, box-shadow var(--duration-fast) ease; } .ui-textarea { min-height: 96px; padding: 10px 14px; resize: vertical; line-height: var(--line-height-normal); } .ui-select { cursor: pointer; } .ui-input::placeholder, .ui-textarea::placeholder { color: var(--color-text-disabled); } .ui-input:hover, .ui-select:hover, .ui-textarea:hover { border-color: var(--color-border-hover); } .ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--color-primary); box-shadow: 0 0 0 2px var(--color-primary-ring); } .ui-input:disabled, .ui-select:disabled, .ui-textarea:disabled { background: var(--color-bg-subtle); color: var(--color-text-disabled); cursor: not-allowed; } .ui-input[aria-invalid="true"], .ui-select[aria-invalid="true"], .ui-textarea[aria-invalid="true"] { border-color: var(--color-error-500); } .ui-help { font-size: var(--font-size-xs); color: var(--color-text-muted); line-height: 1.4; } .ui-help--success { color: var(--color-success-600); } .ui-error { font-size: var(--font-size-xs); color: var(--color-error-600); line-height: 1.4; } .ui-check { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-body); cursor: pointer; } .ui-check input { width: 16px; height: 16px; margin: 0; accent-color: var(--color-primary); } /* Telefon: pole i tlačítka aspoň 40 px a písmo 16 px (iOS jinak přizoomuje). */ @media (max-width: 640px) { .ui-button { min-height: var(--touch-target-min); } .ui-button--icon { width: var(--touch-target-min); } .ui-input, .ui-select, .ui-textarea { font-size: 16px; } } /* ─── Karta ────────────────────────────────────────────────────────────── */ .ui-card { background: var(--color-surface); border: 1px solid var(--ui-card-border); border-radius: var(--ui-card-radius); box-shadow: var(--ui-card-shadow); padding: var(--ui-card-padding); } :not(.ui-stack) > .ui-card + .ui-card { margin-top: var(--space-4); } .ui-card__header { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); } .ui-card__title { font-size: var(--font-size-sm); font-weight: var(--font-weight-semibold); color: var(--color-text-secondary); } .ui-card__actions { margin-left: auto; display: flex; gap: var(--space-2); } .ui-card__footer { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-5); } /* ─── KPI ────────────────────────────────────────────────────────────── * Jedna definice pro novou komponentu `ui-kpi` i legacy `.kpi-card` * (21 šablon + helper yoyCard v base.html). Hodnoty = dnešní vzhled; staré * třídy se smažou, až je nikdo nepoužije. */ .kpi-grid, .ui-kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); } @media (max-width: 900px) { .kpi-grid, .ui-kpi-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); } } .kpi-card, .ui-kpi { background: var(--color-surface); border: 1px solid var(--ui-card-border); border-radius: var(--ui-card-radius); padding: 18px var(--space-5); box-shadow: var(--ui-card-shadow); transition: all .2s ease; } .kpi-card:hover, .ui-kpi:hover { box-shadow: var(--shadow-card-hover); border-color: var(--color-primary-ring); } .kpi-label, .ui-kpi__label { font-size: var(--ui-label-font); color: var(--color-text-muted); text-transform: var(--ui-label-transform); letter-spacing: var(--ui-label-tracking); font-weight: var(--font-weight-medium); margin-bottom: 10px; } .kpi-value, .ui-kpi__value { font-size: var(--font-size-3xl); font-weight: var(--font-weight-semibold); letter-spacing: -0.5px; color: var(--color-text); font-feature-settings: "cv01", "tnum"; } .kpi-sub, .ui-kpi__sub { font-size: var(--font-size-xs); color: var(--color-text-muted); margin-top: 6px; font-weight: var(--font-weight-regular); } /* Změna proti srovnání (▲ 8 % vs. loni). */ .kpi-badge, .ui-kpi__delta { display: inline-block; padding: 1px 6px; border-radius: var(--radius-sm); font-size: var(--font-size-2xs); font-weight: var(--font-weight-regular); margin-top: var(--space-2); } .badge-up, .ui-kpi__delta--up { background: rgba(21, 190, 83, 0.12); color: var(--color-success-600); border: 1px solid rgba(21, 190, 83, 0.25); } .badge-down, .ui-kpi__delta--down { background: rgba(239, 68, 68, 0.08); color: var(--color-error-600); border: 1px solid rgba(239, 68, 68, 0.2); } /* Varování (žlutá) — legacy .badge-warn z Přehledu. */ .badge-warn, .ui-kpi__delta--warn { background: rgba(245, 158, 11, 0.12); color: var(--color-warning-600); border: 1px solid rgba(245, 158, 11, 0.3); } /* Stav karty — barevný pruh vlevo (tempo rezervací, plnění cíle). */ .ui-kpi--success { border-left: 3px solid var(--color-success-500); } .ui-kpi--warning { border-left: 3px solid var(--color-warning-500); } .ui-kpi--danger { border-left: 3px solid var(--color-error-500); } /* Nadpis sekce mezi bloky KPI / grafů (legacy .kpi-section-title v shell.css). */ .ui-section-title { font-size: var(--ui-label-font); text-transform: var(--ui-label-transform); letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: var(--font-weight-medium); margin: 22px 0 10px; } .ui-section-title:first-child { margin-top: 0; } .ui-section-title__note { text-transform: none; letter-spacing: 0; font-weight: var(--font-weight-regular); } /* ─── Graf ───────────────────────────────────────────────────────────── * Obal plátna Chart.js s pevnou výškou (graf s maintainAspectRatio:false * ji vyplní). Výška je komponentový token, ne !important ve stránce. */ .ui-chart { position: relative; height: var(--ui-chart-height, 280px); } .ui-chart--tall { --ui-chart-height: 420px; } @media (max-width: 900px) { .ui-chart { --ui-chart-height: 240px; } .ui-chart--tall { --ui-chart-height: 320px; } } /* ─── Odznak ───────────────────────────────────────────────────────────── */ .ui-badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: var(--radius-full); font-size: var(--font-size-2xs); font-weight: var(--font-weight-semibold); line-height: 1.6; white-space: nowrap; background: var(--color-bg-subtle); color: var(--color-text-muted); border: 1px solid var(--color-border); vertical-align: middle; } .ui-badge--primary { background: var(--color-primary-tint); color: var(--color-primary); border-color: var(--color-primary-ring); } .ui-badge--success { background: var(--color-success-50); color: var(--color-success-700); border-color: rgba(21, 190, 83, 0.25); } .ui-badge--warning { background: var(--color-warning-50); color: var(--color-warning-700); border-color: rgba(245, 158, 11, 0.3); } .ui-badge--danger { background: var(--color-error-50); color: var(--color-error-700); border-color: rgba(239, 68, 68, 0.25); } .ui-badge--info { background: var(--color-info-50); color: var(--color-info-700); border-color: rgba(6, 182, 212, 0.25); } /* ─── Hláška ───────────────────────────────────────────────────────────── */ .ui-alert { display: flex; gap: var(--space-3); padding: 10px 14px; border: 1px solid var(--color-border); border-radius: var(--ui-control-radius); background: var(--color-bg-subtle); color: var(--color-text-body); font-size: var(--font-size-sm); line-height: var(--line-height-normal); margin-bottom: var(--space-4); } .ui-alert__body { flex: 1; min-width: 0; overflow-wrap: anywhere; } .ui-alert__title { font-weight: var(--font-weight-semibold); margin-bottom: 2px; } .ui-alert a { color: inherit; } .ui-alert--success { background: rgba(21, 190, 83, 0.06); border-color: rgba(21, 190, 83, 0.2); color: var(--color-success-600); } .ui-alert--warning { background: var(--color-warning-50); border-color: rgba(245, 158, 11, 0.35); color: var(--color-warning-700); } .ui-alert--danger { background: rgba(239, 68, 68, 0.06); border-color: rgba(239, 68, 68, 0.2); color: var(--color-error-600); } .ui-alert--info { background: var(--color-primary-tint); border-color: var(--color-primary-ring); color: var(--color-text-secondary); } /* ─── Taby ─────────────────────────────────────────────────────────────── */ .ui-tabs { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--color-border); margin-bottom: var(--space-4); overflow-x: auto; scrollbar-width: none; } .ui-tab { flex-shrink: 0; padding: 10px 14px; border: none; border-bottom: 2px solid transparent; margin-bottom: -1px; background: none; color: var(--color-text-muted); font: inherit; font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); cursor: pointer; white-space: nowrap; } .ui-tab:hover { color: var(--color-text); } .ui-tab[aria-selected="true"], .ui-tab[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); } /* Záložky jako navigace mezi stránkami (