/* ========================================================================= OMNIFIN CRM — Components Strict BEM. Components read tokens only; never literal values. Block naming: omni- ========================================================================= */ /* =================================================================== OMNIFIN LEGACY COMPAT LAYER Alte Klassen-Namen → gleiche visuelle Ausgabe wie neue BEM-Klassen. Wird entfernt sobald alle PHP-Views migriert sind. =================================================================== */ /* Legacy token aliases — maps old var() names to new design-tokens */ :root { --text-muted: var(--text-tertiary); --text-dim: var(--text-secondary); /* dashboard compat */ --bg-card: var(--bg-surface); --grad: var(--brand-gradient); --border-color: var(--border); --color-accent: var(--accent); --radius: var(--radius-md); /* legacy shorthand */ /* Semantic shortcuts used in views */ --error: var(--status-danger); --warning: var(--status-warning); --success: var(--status-success); --info: var(--status-info); /* Accent transparent bg — bulk bars etc. */ --accent-light: oklch(62% 0.18 228 / 0.07); } /* Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 0 var(--space-4); height: var(--control-h-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); font-family: var(--font-sans); border-radius: var(--radius-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); } .btn:hover { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); } .btn:active { transform: translateY(1px); } .btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 1; cursor: not-allowed; background: var(--bg-elevated); color: var(--text-secondary); border-color: var(--border); box-shadow: none; transform: none; } .btn-primary, .btn.btn-primary { background: var(--accent); color: var(--accent-contrast); border-color: transparent; } .btn-primary:hover { background: var(--accent-strong); color: var(--accent-contrast); border-color: transparent; } .btn-secondary { background: var(--bg-elevated); color: var(--text-primary); border-color: var(--border); } .btn-ghost { background: transparent; color: var(--text-secondary); border-color: transparent; } .btn-ghost:hover { background: var(--bg-hover); color: var(--text-primary); } .btn-danger { background: var(--status-danger); color: #fff; border-color: transparent; } .btn-danger:hover { background: var(--status-danger); color: #fff; border-color: transparent; filter: brightness(.92); } .btn:disabled:hover, .btn[aria-disabled="true"]:hover { background: var(--bg-elevated); color: var(--text-secondary); border-color: var(--border); filter: none; } .btn-outline { background: transparent; color: var(--accent); border-color: var(--accent); } .btn-outline:hover { background: var(--accent-soft); } .btn-sm { height: var(--control-h-sm); padding: 0 var(--space-3); font-size: var(--fs-xs); } .btn-lg { height: var(--control-h-lg); padding: 0 var(--space-6); font-size: var(--fs-md); } .btn-icon { width: var(--control-h-md); height: var(--control-h-md); padding: 0; } .btn-icon.btn-sm { width: var(--control-h-sm); height: var(--control-h-sm); } /* Cards */ .card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); overflow: hidden; } /* No hard borders — tonal separation via inset shadow (no layout shift) */ .card-header { padding: var(--space-5) var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .card-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text-primary); display: flex; align-items: center; gap: var(--space-2); } .card-subtitle { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--space-1); } .card-body { padding: var(--space-6); } .card-footer { padding: var(--space-4) var(--space-6); background: var(--bg-elevated); display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); border-radius: 0 0 var(--radius-xl) var(--radius-xl); } /* Forms */ .form-group { display: flex; flex-direction: column; gap: var(--space-1); margin-bottom: var(--space-4); } .form-label { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); } .form-control, .form-input { display: block; width: 100%; height: var(--control-h-md); padding: 0 var(--space-3); background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--fs-sm); font-family: var(--font-sans); transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); } .form-control:focus, .form-input:focus { outline: none; border-color: var(--accent); box-shadow: var(--shadow-focus); } .form-control::placeholder, .form-input::placeholder { color: var(--text-tertiary); } .form-select { height: var(--control-h-md); padding: 0 var(--space-3); background: var(--bg-inset); border: 1px solid var(--border); border-radius: var(--radius-md); color: var(--text-primary); font-size: var(--fs-sm); font-family: var(--font-sans); } textarea.form-control { height: auto; min-height: 80px; padding: var(--space-2) var(--space-3); resize: vertical; } .form-hint { font-size: var(--fs-xs); color: var(--text-tertiary); } .form-actions { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); } .form-section-title { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--text-tertiary); padding: var(--space-4) 0 var(--space-2); } /* Tables */ .data-table, table.table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); } .data-table th, table.table th { padding: var(--space-2) var(--space-4); background: var(--bg-elevated); color: var(--text-secondary); font-weight: var(--fw-medium); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; position: sticky; top: 0; z-index: var(--z-raised); } .data-table td, table.table td { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border); color: var(--text-primary); vertical-align: middle; } .data-table tr:hover td, table.table tr:hover td { background: var(--bg-hover); } .table-link { color: var(--accent); text-decoration: none; font-weight: var(--fw-medium); } .table-link:hover { text-decoration: underline; } .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .filter-row, .filter-row-card { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); background: var(--bg-surface); border-bottom: 1px solid var(--border); flex-wrap: wrap; } /* Badges */ .badge { display: inline-flex; align-items: center; height: 20px; padding: 0 var(--space-2); border-radius: var(--radius-pill); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); white-space: nowrap; } .badge-success { background: var(--status-success-soft); color: var(--status-success); } .badge-warning { background: var(--status-warning-soft); color: var(--status-warning); } .badge-error, .badge-danger { background: var(--status-danger-soft); color: var(--status-danger); } .badge-info { background: var(--status-info-soft); color: var(--status-info); } .badge-brand, .badge-accent { background: var(--accent-soft); color: var(--accent); } .badge-neutral { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border); } /* Alerts */ .alert { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); font-size: var(--fs-sm); margin-bottom: var(--space-4); } .alert-success { background: var(--status-success-soft); color: var(--status-success); } .alert-warning { background: var(--status-warning-soft); color: var(--status-warning); } .alert-error, .alert-danger { background: var(--status-danger-soft); color: var(--status-danger); } .alert-info { background: var(--status-info-soft); color: var(--status-info); } /* Modals (legacy) */ .modal-overlay { position: fixed; inset: 0; z-index: var(--z-modal); background: rgb(0 0 0 / .55); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; padding: var(--space-4); } .modal-content { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: var(--space-5) var(--space-6); box-shadow: inset 0 -1px 0 var(--border); } .modal-body { flex: 1; overflow-y: auto; padding: var(--space-6); } .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-6); box-shadow: inset 0 1px 0 var(--border); background: var(--bg-elevated); } .modal-close { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: var(--radius-sm); background: transparent; border: none; cursor: pointer; color: var(--text-secondary); } .modal-close:hover { background: var(--bg-hover); } /* Modal-Backdrop (used by modal.js for dynamic confirm dialogs & slid-overs) */ .modal-backdrop { display: none; position: fixed; inset: 0; z-index: 2000; background: rgb(0 0 0 / .55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 1rem; } .modal-backdrop.open { display: flex; } .modal { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl, 12px); box-shadow: var(--shadow-xl); width: 100%; max-width: 560px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; } .modal-sm { max-width: 400px; } .modal .modal-body { padding: 1.5rem 1.5rem 1rem; text-align: center; } .modal .modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; padding: 1rem 1.5rem; background: var(--bg-elevated); border-top: 1px solid var(--border); } /* Confirm dialog (inside .modal-backdrop) */ .confirm-dialog .modal-footer { background: var(--bg-elevated); } .confirm-dialog .btn { min-width: 96px; font-weight: var(--fw-semibold); } .confirm-dialog .btn-danger:hover, .confirm-dialog .btn-danger:focus-visible { background: var(--status-danger); color: #fff; border-color: transparent; filter: brightness(.88); } .confirm-dialog .btn-secondary:hover, .confirm-dialog .btn-secondary:focus-visible { background: var(--bg-hover); color: var(--text-primary); border-color: var(--border-strong); } .confirm-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; margin: 0 auto .75rem; } .confirm-icon.danger { background: rgba(239, 68, 68, .12); color: #ef4444; } .confirm-icon.info { background: var(--accent-soft); color: var(--accent); } .confirm-title { font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin-bottom: .35rem; } .confirm-message { font-size: .875rem; color: var(--text-secondary); line-height: 1.5; margin: 0; } /* Slideover-Backdrop */ .slideover-backdrop { display: none; position: fixed; inset: 0; z-index: 1900; } .slideover-backdrop.open { display: block; } /* KPI Cards */ .kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); } .kpi-card { background: var(--bg-surface); border: 1px solid var(--border); border-radius: var(--radius-xl); padding: var(--space-5); } .kpi-icon { width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--accent-soft); display: flex; align-items: center; justify-content: center; color: var(--accent); margin-bottom: var(--space-3); } .kpi-value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); color: var(--text-primary); line-height: var(--lh-tight); } .kpi-label { font-size: var(--fs-sm); color: var(--text-secondary); margin-top: var(--space-1); } .kpi-trend { font-size: var(--fs-xs); font-weight: var(--fw-medium); margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-1); } /* Tabs */ .tab-nav, .settings-tab-nav { display: flex; gap: var(--space-1); border-bottom: 1px solid var(--border); margin-bottom: var(--space-5); flex-wrap: wrap; } .tab-item { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-secondary); cursor: pointer; background: transparent; border: none; border-bottom: 2px solid transparent; border-radius: var(--radius-sm) var(--radius-sm) 0 0; margin-bottom: -1px; transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); text-decoration: none; white-space: nowrap; user-select: none; } .tab-item:hover { color: var(--text-primary); background: var(--bg-hover); } .tab-item.active, .tab-item--active { color: var(--accent); border-bottom-color: var(--accent); font-weight: var(--fw-semibold); background: transparent; } .tab-item.active:hover, .tab-item--active:hover { background: var(--bg-hover); } .tab-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius-sm); } /* Page Header */ .page-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-6); } .page-header-left { display: flex; flex-direction: column; gap: var(--space-1); } .page-title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); color: var(--text-primary); letter-spacing: var(--tracking-tight); } .page-subtitle { font-size: var(--fs-sm); color: var(--text-secondary); } .page-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; } /* Layout */ .app-wrapper { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: var(--topbar-height) 1fr; min-height: 100vh; } .app-main { grid-row: 2; grid-column: 2; overflow: auto; background: var(--bg-base); } .app-content { padding: var(--space-8) var(--space-8); width: 100%; max-width: 1500px; margin-left: 0; margin-right: auto; box-sizing: border-box; min-width: 0; } /* Sidebar legacy */ .sidebar { grid-row: 1 / 3; grid-column: 1; background: var(--bg-sidebar); position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; border-right: 1px solid var(--border); } /* Topbar legacy */ .topbar { grid-row: 1; grid-column: 2; background: var(--bg-topbar); backdrop-filter: blur(var(--topbar-blur)); -webkit-backdrop-filter: blur(var(--topbar-blur)); position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-3); padding: 0 var(--space-6); border-bottom: 1px solid var(--border); } /* Timeline */ .timeline { list-style: none; padding: 0; margin: 0; } .timeline-item { position: relative; padding: 0 0 var(--space-5) var(--space-8); } .timeline-item::before { content: ''; position: absolute; left: 11px; top: 20px; bottom: 0; width: 1px; background: var(--border); } .timeline-item:last-child::before { display: none; } .timeline-dot { position: absolute; left: 0; top: 2px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-elevated); border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; } .timeline-content { font-size: var(--fs-sm); color: var(--text-primary); } .timeline-meta { font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: var(--space-1); } /* Pagination */ .pagination { display: flex; align-items: center; gap: var(--space-1); } .pagination-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; padding: 0 var(--space-2); border-radius: var(--radius-md); font-size: var(--fs-sm); font-weight: var(--fw-medium); cursor: pointer; background: transparent; border: 1px solid transparent; color: var(--text-secondary); transition: background var(--dur-fast) var(--ease-out); } .pagination-btn:hover { background: var(--bg-hover); color: var(--text-primary); } .pagination-btn.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .pagination-btn:disabled { opacity: .4; pointer-events: none; } /* Dropdown */ .dropdown { position: relative; } .dropdown-menu { display: none; position: absolute; top: calc(100% + var(--space-1)); right: 0; min-width: 180px; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-popover); padding: var(--space-1); } .dropdown.open > .dropdown-menu { display: block; } .dropdown-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); font-size: var(--fs-sm); color: var(--text-primary); cursor: pointer; background: none; border: none; width: 100%; text-align: left; text-decoration: none; transition: background var(--dur-fast) var(--ease-out); } .dropdown-item:hover { background: var(--bg-hover); } .dropdown-item.danger { color: var(--status-danger); } .dropdown-item.danger:hover { background: var(--status-danger-soft); } .dropdown-divider { height: 1px; background: var(--border); margin: var(--space-1) 0; } /* Misc */ .avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: var(--fs-sm); font-weight: var(--fw-semibold); flex-shrink: 0; } .avatar-sm { width: 24px; height: 24px; font-size: var(--fs-2xs); } .avatar-lg { width: 40px; height: 40px; font-size: var(--fs-md); } .text-muted { color: var(--text-secondary); } .text-tertiary { color: var(--text-tertiary); } .text-sm { font-size: var(--fs-sm); } .text-xs { font-size: var(--fs-xs); } .text-2xs { font-size: var(--fs-2xs); } .text-danger { color: var(--status-danger); } .text-success { color: var(--status-success); } .text-warning { color: var(--status-warning); } .text-info { color: var(--status-info); } .text-accent { color: var(--accent); } .text-sm-muted { font-size: var(--fs-xs); color: var(--text-tertiary); } .nowrap { white-space: nowrap; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Filter-Row innerhalb von .card (Tabellen-Header → Filter → Daten-Tabelle) */ .card .omni-filter-row, .omni-filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-5); background: var(--bg-surface); box-shadow: inset 0 -1px 0 var(--border); } .card .omni-filter-row .form-control, .card .omni-filter-row .form-select, .omni-filter-row .form-control, .omni-filter-row .form-select { height: var(--control-h-md); flex: 0 0 auto; } .card .omni-filter-row .form-control[type="search"], .omni-filter-row .form-control[type="search"] { flex: 1 1 220px; min-width: 200px; max-width: 360px; } .card .omni-filter-row .form-select, .omni-filter-row .form-select { min-width: 160px; max-width: 200px; } .card .omni-filter-row > .btn:last-child, .omni-filter-row > .btn:last-child { margin-left: auto; } /* Card-Footer-Info (ein-zeiliger muted Hinweis am Ende einer Card mit Tabelle) */ .card-footer-info { padding: var(--space-3) var(--space-5); font-size: var(--fs-xs); color: var(--text-tertiary); box-shadow: inset 0 1px 0 var(--border); } /* == END LEGACY COMPAT LAYER == */ /* ---------- Reset / base ------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { font-family: var(--font-sans); font-size: var(--fs-md); line-height: var(--lh-normal); color: var(--text-primary); background: var(--bg-base); -webkit-font-smoothing: antialiased; } body { min-height: 100vh; font-feature-settings: "ss01", "cv11"; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } [hidden] { display: none !important; } /* ---- Global form element base: all corners rounded, consistent ---- */ input, textarea, select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"], button, [role="button"] { border-radius: var(--radius-md); } /* Smaller radius for checkboxes and radios */ input[type="checkbox"] { border-radius: var(--radius-sm); } input[type="radio"] { border-radius: var(--radius-pill); } /* Ensure no element in the system ever has 0 or sharp corners unintentionally */ .omni-card, .omni-panel, .omni-modal, .omni-dropdown, .omni-btn, .omni-badge, .omni-input, .omni-select, .omni-tabs, .omni-tab, .omni-kpi, .omni-deal, .omni-thread, .omni-message, .omni-table, .omni-table th, .omni-table td:first-child, .omni-table td:last-child { border-radius: var(--radius-md); } /* Table: only outer corners of first/last cells per row */ .omni-table tr:first-child th:first-child { border-radius: var(--radius-md) 0 0 0; } .omni-table tr:first-child th:last-child { border-radius: 0 var(--radius-md) 0 0; } .omni-table tr:last-child td:first-child { border-radius: 0 0 0 var(--radius-md); } .omni-table tr:last-child td:last-child { border-radius: 0 0 var(--radius-md) 0; } ::selection { background: var(--accent-soft); color: var(--text-primary); } /* ══ Skeleton Loading ═══════════════════════════════════════════════════════ BEM: omn-skeleton (not omni- — short prefix for utility classes) Usage:
Loading-state overlay: element.classList.add('omn-skeleton--loading') ═══════════════════════════════════════════════════════════════════════════ */ @keyframes omn-shimmer { 0% { background-position: -800px 0; } 100% { background-position: 800px 0; } } /* Base pulse — apply to any placeholder element */ .omn-skeleton { background: linear-gradient( 90deg, var(--bg-elevated) 25%, var(--bg-hover) 50%, var(--bg-elevated) 75% ); background-size: 1600px 100%; animation: omn-shimmer 1.6s ease-in-out infinite; border-radius: var(--radius-sm); display: block; } /* ── Shape modifiers ─────────────────────────────────────────────────────── */ .omn-skeleton--text { height: .875em; width: 100%; } .omn-skeleton--text-sm { height: .75em; width: 70%; } .omn-skeleton--text-xs { height: .7em; width: 45%; } .omn-skeleton--heading { height: 1.35em; width: 55%; } .omn-skeleton--circle { border-radius: 50%; width: 2.5rem; height: 2.5rem; flex-shrink: 0; } .omn-skeleton--avatar { border-radius: 50%; width: 3rem; height: 3rem; flex-shrink: 0; } .omn-skeleton--rect { width: 100%; height: 100%; border-radius: 0; } .omn-skeleton--pill { height: 1.375rem; border-radius: var(--radius-pill); } .omn-skeleton--btn { height: 2rem; width: 6rem; border-radius: var(--radius-md); } /* KPI card placeholders */ .omn-skeleton--kpi-value { height: 2.25rem; width: 80px; } .omn-skeleton--kpi-label { height: .72em; width: 100px; } /* Table row placeholder — wrap a with these children */ .omn-skeleton--table-row td { padding: .6rem .85rem; border-bottom: 1px solid var(--border); } /* Gap helper (stack multiple skeleton lines) */ .omn-skeleton-stack { display: flex; flex-direction: column; gap: .55rem; padding: .6rem 0; } /* ── Full-element loading overlay ────────────────────────────────────────── */ /* Add .omn-skeleton--loading to ANY container during async operations. A translucent shimmer sweeps over the existing content. */ .omn-skeleton--loading { position: relative; overflow: hidden; pointer-events: none; user-select: none; } .omn-skeleton--loading::after { content: ''; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.06) 30%, rgba(var(--accent-rgb),.05) 50%, rgba(255,255,255,.06) 70%, transparent 100% ); background-size: 400% 100%; animation: omn-shimmer 1.4s ease-in-out infinite; pointer-events: none; z-index: 5; border-radius: inherit; } [data-theme="light"] .omn-skeleton--loading::after { background: linear-gradient( 90deg, transparent 0%, rgba(0,0,0,.04) 30%, rgba(var(--accent-rgb),.06) 50%, rgba(0,0,0,.04) 70%, transparent 100% ); background-size: 400% 100%; } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-pill); border: 2px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); background-clip: padding-box; border: 2px solid transparent; } ::-webkit-scrollbar-track { background: transparent; } /* ---------- Utility: monospace numerics -------------------------------- */ .mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-tight); } /* ========================================================================= BLOCK: omni-app (shell) ========================================================================= */ .omni-app { display: grid; grid-template-columns: var(--sidebar-width) 1fr; grid-template-rows: var(--topbar-height) 1fr; min-height: 100vh; background: var(--bg-base); transition: grid-template-columns var(--dur-base) var(--ease-out); } .omni-app--collapsed { grid-template-columns: var(--sidebar-width-collapsed) 1fr; } .omni-app__sidebar { grid-row: 1 / 3; grid-column: 1; } .omni-app__topbar { grid-row: 1; grid-column: 2; } .omni-app__main { grid-row: 2; grid-column: 2; overflow: auto; } /* ========================================================================= BLOCK: omni-sidebar ========================================================================= */ /* ── Dark default sidebar ─────────────────────────────────── */ .omni-sidebar { background: linear-gradient(180deg, var(--bg-elevated) 0%, var(--bg-sidebar) 100%); border-right: 1px solid color-mix(in oklch, var(--accent) 8%, transparent); color: var(--text-primary); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: hidden; } /* ── Light sidebar: pure white, no hard border, subtle shadow ─ */ [data-theme="light"] .omni-sidebar { background: var(--bg-sidebar); border-right: none; box-shadow: var(--sidebar-shadow-light); } .omni-sidebar__brand { display: flex; align-items: center; gap: var(--space-2); height: var(--topbar-height); padding: 0 var(--space-4); border-bottom: 1px solid var(--border); flex-shrink: 0; } .omni-sidebar__logo { width: var(--sidebar-logo-size, 22px); height: var(--sidebar-logo-size, 22px); border-radius: var(--radius-sm); background: var(--brand-gradient); display: grid; place-items: center; color: #fff; font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: 11px; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08) inset; } .omni-sidebar__wordmark { font-family: var(--font-display); font-weight: var(--fw-bold); letter-spacing: var(--tracking-caps); font-size: var(--fs-sm); text-transform: uppercase; background: var(--brand-gradient, linear-gradient(135deg, var(--accent), var(--accent-2))); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .omni-sidebar__wordmark b { font-weight: inherit; background: inherit; -webkit-background-clip: inherit; background-clip: inherit; -webkit-text-fill-color: inherit; } .omni-sidebar__nav { padding: var(--space-3) var(--space-2); overflow-y: auto; flex: 1; } .omni-sidebar__group { margin-bottom: var(--space-2); } .omni-sidebar__group-label { display: block; padding: var(--space-1) var(--space-3); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); margin-bottom: var(--space-1); } /* Collapsible group toggle (replaces static label when JS is active) */ .omni-sidebar__group-toggle { display: flex; align-items: center; width: 100%; padding: var(--space-1) var(--space-3); gap: var(--space-2); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-tertiary); background: none; border: none; cursor: pointer; border-radius: var(--radius-sm); transition: color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); margin-bottom: var(--space-1); } .omni-sidebar__group-toggle:hover { color: var(--text-secondary); background: var(--bg-hover); } .omni-sidebar__group-toggle span { flex: 1; text-align: left; } .omni-sidebar__group-chevron { width: 10px; height: 10px; flex-shrink: 0; transition: transform var(--dur-base) var(--ease-out); } .omni-sidebar__group--collapsed .omni-sidebar__group-chevron { transform: rotate(-90deg); } .omni-sidebar__group-body { overflow: hidden; transition: none; } .omni-sidebar__group--collapsed .omni-sidebar__group-body { display: none; } /* ── Nav items — shared base ─────────────────────────────── */ .omni-nav-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); color: var(--text-secondary); font-size: var(--fs-md); font-weight: var(--fw-medium); line-height: 1; cursor: pointer; position: relative; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); } .omni-nav-item:hover { background: var(--bg-hover); color: var(--text-primary); } .omni-nav-item__icon { width: 16px; height: 16px; flex-shrink: 0; color: currentColor; } .omni-nav-item__label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .omni-nav-item__badge { font-family: var(--font-mono); font-size: var(--fs-2xs); padding: 2px 5px; border-radius: var(--radius-xs); background: var(--bg-elevated); color: var(--text-secondary); min-width: 18px; text-align: center; } /* Active state — dark (neon glow) */ .omni-nav-item--active { background: var(--accent-soft); color: var(--accent-strong); font-weight: var(--fw-semibold); } .omni-nav-item--active::before { content: ""; position: absolute; left: 0; top: 5px; bottom: 5px; width: 3px; background: var(--accent); border-radius: 0 var(--radius-pill) var(--radius-pill) 0; box-shadow: 0 0 8px var(--accent-glow); } .omni-nav-item--active .omni-nav-item__badge { background: var(--accent); color: var(--text-on-accent); } /* Active state override — light (solid, no glow) */ [data-theme="light"] .omni-nav-item--active { background: var(--bg-active); color: var(--accent); } [data-theme="light"] .omni-nav-item--active::before { box-shadow: none; } [data-theme="light"] .omni-nav-item:hover { background: var(--bg-hover); } .omni-sidebar__footer { padding: var(--space-3); box-shadow: inset 0 1px 0 var(--border); flex-shrink: 0; } /* ========================================================================= BLOCK: omni-topbar ========================================================================= */ /* ── Topbar — dark: true glassmorphism ───────────────────── */ .omni-topbar { display: flex; align-items: center; gap: var(--space-4); height: var(--topbar-height); padding: 0 var(--space-5); /* Dark: semi-transparent glass */ background: color-mix(in oklab, var(--bg-topbar) 75%, transparent); -webkit-backdrop-filter: blur(var(--topbar-blur)); backdrop-filter: blur(var(--topbar-blur)); box-shadow: inset 0 -1px 0 var(--border); position: sticky; top: 0; z-index: var(--z-sticky); } /* ── Topbar — light: solid white, subtle bottom line ─────── */ [data-theme="light"] .omni-topbar { background: rgba(255,255,255,.92); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: inset 0 -1px 0 var(--border), 0 1px 6px rgb(16 20 27 / 0.04); } .omni-topbar__breadcrumb { display: flex; align-items: center; gap: var(--space-2); font-size: var(--fs-sm); color: var(--text-secondary); min-width: 0; } .omni-topbar__breadcrumb b { color: var(--text-primary); font-weight: var(--fw-semibold); } .omni-topbar__breadcrumb svg { width: 12px; height: 12px; color: var(--text-tertiary); flex-shrink: 0; } .omni-topbar__search { flex: 1; max-width: 520px; margin-left: auto; } .omni-topbar__actions { display: flex; align-items: center; gap: var(--space-2); } .omni-topbar__divider { width: 1px; height: 20px; background: var(--border); } .omni-topbar__user { display: flex; align-items: center; gap: var(--space-2); padding: 3px 3px 3px var(--space-2); border-radius: var(--radius-pill); cursor: pointer; transition: background var(--dur-fast); } .omni-topbar__user:hover { background: var(--bg-hover); } .omni-topbar__user-name { font-size: var(--fs-sm); font-weight: var(--fw-medium); } /* ========================================================================= BLOCK: omni-avatar ========================================================================= */ .omni-avatar { width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--brand-gradient); color: #fff; display: grid; place-items: center; font-family: var(--font-mono); font-size: var(--fs-2xs); font-weight: var(--fw-semibold); flex-shrink: 0; position: relative; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.08) inset; } .omni-avatar--sm { width: 20px; height: 20px; font-size: 9px; } .omni-avatar--md { width: 28px; height: 28px; font-size: var(--fs-xs); } .omni-avatar--lg { width: 40px; height: 40px; font-size: var(--fs-md); } .omni-avatar__dot { position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; border-radius: var(--radius-pill); background: var(--status-success); box-shadow: 0 0 0 2px var(--bg-surface); } /* ========================================================================= BLOCK: omni-btn ========================================================================= */ .omni-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 36px; padding: 0 1rem; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg-surface); color: var(--text-primary); font-size: var(--fs-sm); font-weight: var(--fw-medium); font-family: var(--font-sans); line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); flex-shrink: 0; -webkit-font-smoothing: antialiased; } .omni-btn:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); } .omni-btn:active { transform: translateY(1px); } .omni-btn:focus-visible { outline: none; box-shadow: var(--shadow-focus); } .omni-btn svg { width: 14px; height: 14px; flex-shrink: 0; } /* ── Variants — color is ALWAYS explicit on each variant + hover ── */ .omni-btn--primary { background: var(--brand-gradient, var(--accent)); border: none; color: var(--text-on-accent); box-shadow: 0 1px 3px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.08); } .omni-btn--primary:hover { background: var(--brand-gradient, var(--accent)); filter: brightness(1.12) saturate(1.08); color: var(--text-on-accent); box-shadow: 0 4px 16px -4px var(--accent-glow), inset 0 1px 0 rgba(255,255,255,.10); } .omni-btn--primary:active { filter: brightness(0.94); color: var(--text-on-accent); transform: translateY(1px); } .omni-btn--secondary { background: var(--bg-elevated); border-color: var(--border); color: var(--text-primary); } .omni-btn--secondary:hover { background: var(--bg-hover); border-color: var(--border-strong); color: var(--text-primary); } .omni-btn--ghost { background: transparent; border-color: transparent; color: var(--text-secondary); } .omni-btn--ghost:hover { background: var(--bg-hover); color: var(--text-primary); border-color: transparent; } .omni-btn--outline { background: transparent; border-color: var(--accent); color: var(--accent); } .omni-btn--outline:hover { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); } .omni-btn--danger { background: transparent; border-color: var(--border); color: var(--status-danger); } .omni-btn--danger:hover { background: var(--status-danger-soft); border-color: var(--status-danger); color: var(--status-danger); } .omni-btn--danger.omni-btn--outline { background: transparent; border-color: var(--status-danger); color: var(--status-danger); } .omni-btn--danger.omni-btn--outline:hover { background: var(--status-danger-soft); } .omni-btn--danger-ghost { background: transparent; border-color: transparent; color: var(--status-danger); } .omni-btn--danger-ghost:hover { background: var(--status-danger-soft); border-color: transparent; color: var(--status-danger); } .omni-btn--danger-outline { background: transparent; border-color: var(--status-danger); color: var(--status-danger); } .omni-btn--danger-outline:hover { background: var(--status-danger-soft); color: var(--status-danger); } .omni-btn--success { background: var(--status-success); border-color: var(--status-success); color: #ffffff; } .omni-btn--success:hover { background: var(--status-success); filter: brightness(1.1); color: #ffffff; } /* ── Sizes ──────────────────────────────────────────────────────── */ .omni-btn--sm { min-height: 28px; font-size: var(--fs-xs); padding: 0 0.625rem; } .omni-btn--lg { min-height: 44px; font-size: var(--fs-md); padding: 0 1.25rem; } /* ── Icon-only square ───────────────────────────────────────────── */ .omni-btn--icon { width: 36px; min-height: 36px; padding: 0; } .omni-btn--sm.omni-btn--icon { width: 28px; min-height: 28px; padding: 0; } .omni-btn--lg.omni-btn--icon { width: 44px; min-height: 44px; padding: 0; } .omni-btn__kbd { font-family: var(--font-mono); font-size: var(--fs-2xs); color: var(--text-tertiary); border: 1px solid var(--border); padding: 1px 4px; border-radius: var(--radius-xs); margin-left: var(--space-1); } /* ========================================================================= BLOCK: omni-row-actions Horizontal flex container for table/list action buttons. Usage:
========================================================================= */ .omni-row-actions { display: flex; align-items: center; gap: var(--space-1); flex-wrap: nowrap; } /* Forms inside action rows must be inline */ .omni-row-actions form { display: contents; } /* ========================================================================= BLOCK: omni-input — premium form fields Works as a wrapper div (BEM: .omni-input > .omni-input__field) AND directly on native ,