/* ══════════════════════════════════════════════════════════ OBSIDIAN DESIGN SYSTEM — Tokens Version: 1.0 Usage: - Add class "theme-dark" or "theme-light" to or - Default: theme-dark - Toggle: document.documentElement.classList.toggle('theme-dark') document.documentElement.classList.toggle('theme-light') ══════════════════════════════════════════════════════════ */ /* ── FONTS ─────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;700&display=swap'); :root { --obs-font-base: 'Roboto', sans-serif; --obs-font-mono: 'JetBrains Mono', monospace; /* ── SIZING ──────────────────────────────────────────── */ --obs-radius-sm: 8px; --obs-radius-md: 12px; --obs-radius-lg: 16px; --obs-radius-pill: 20px; --obs-space-xs: 4px; --obs-space-sm: 8px; --obs-space-md: 16px; --obs-space-lg: 24px; --obs-space-xl: 32px; --obs-space-2xl: 48px; --obs-transition: all 0.15s ease; /* ── ACCENT (shared) ─────────────────────────────────── */ --obs-accent: #e5007e; --obs-accent-hover: #ff1a94; --obs-accent-muted: rgba(229,0,126,0.12); --obs-accent-glow: 0 0 16px rgba(229,0,126,0.2); --obs-border-accent: rgba(229,0,126,0.4); /* ── CHART PALETTE ───────────────────────────────────── */ --obs-chart-1: #5b8af5; --obs-chart-1-soft: rgba(91,138,245,0.35); --obs-chart-2: #e5007e; --obs-chart-2-soft: rgba(229,0,126,0.35); --obs-chart-3: #f5a623; --obs-chart-3-soft: rgba(245,166,35,0.35); --obs-chart-4: #34d399; --obs-chart-4-soft: rgba(52,211,153,0.35); --obs-chart-5: #a78bfa; --obs-chart-5-soft: rgba(167,139,250,0.35); --obs-chart-6: #fb7185; --obs-chart-6-soft: rgba(251,113,133,0.35); --obs-chart-7: #22d3ee; --obs-chart-7-soft: rgba(34,211,238,0.35); --obs-chart-8: #fdba74; --obs-chart-8-soft: rgba(253,186,116,0.35); --obs-chart-9: #c4b5fd; --obs-chart-9-soft: rgba(196,181,253,0.35); --obs-chart-10: #6ee7b7; --obs-chart-10-soft: rgba(110,231,183,0.35); /* ── SEMANTIC ────────────────────────────────────────── */ --obs-success: #10b981; --obs-warning: #f59e0b; --obs-error: #ef4444; --obs-info: #3b82f6; } /* ══════════════════════════════════════════════════════════ DARK THEME ══════════════════════════════════════════════════════════ */ .theme-dark { /* Backgrounds */ --obs-bg-page: #070920; --obs-bg-nav: #0a0c28; --obs-bg-card: #0e1035; --obs-bg-elevated: #141750; --obs-bg-active: #1a1d5a; --obs-bg-input: #0e1035; /* Borders */ --obs-border-0: rgba(255,255,255,0.04); --obs-border-1: rgba(255,255,255,0.07); --obs-border-2: rgba(255,255,255,0.12); /* Text */ --obs-text-primary: #eef0ff; --obs-text-body: #bfc2e0; --obs-text-secondary: #7a7da8; --obs-text-disabled: #4a4d80; /* Table */ --obs-table-stripe: rgba(255,255,255,0.07); --obs-table-hover: inset 0 1px 0 var(--obs-border-accent), inset 0 -1px 0 var(--obs-border-accent); /* Chart grid */ --obs-chart-grid: rgba(255,255,255,0.06); /* Misc */ --obs-card-shadow: none; --obs-selection: rgba(229,0,126,0.3); --obs-focus-ring: 0 0 0 2px rgba(229,0,126,0.15); --obs-toggle-off: #141750; --obs-thumb-shadow: none; /* Semantic (dark variants) */ --obs-success: #10b981; --obs-warning: #f59e0b; --obs-error: #ef4444; --obs-info: #3b82f6; color-scheme: dark; } /* ══════════════════════════════════════════════════════════ LIGHT THEME ══════════════════════════════════════════════════════════ */ .theme-light { /* Backgrounds */ --obs-bg-page: #e7eaf3; --obs-bg-nav: #ffffff; --obs-bg-card: #ffffff; --obs-bg-elevated: #ebedf5; --obs-bg-active: #e0e3f0; --obs-bg-input: #ffffff; /* Borders */ --obs-border-0: rgba(0,0,0,0.06); --obs-border-1: rgba(0,0,0,0.10); --obs-border-2: rgba(0,0,0,0.16); /* Text */ --obs-text-primary: #121430; --obs-text-body: #2d3060; --obs-text-secondary: #6b6f98; --obs-text-disabled: #9a9ec0; /* Table */ --obs-table-stripe: #eae7f3; --obs-table-hover: inset 0 1px 0 var(--obs-border-accent), inset 0 -1px 0 var(--obs-border-accent); /* Chart grid */ --obs-chart-grid: #c8cad8; /* Misc */ --obs-card-shadow: 0 1px 3px rgba(0,0,0,0.04); --obs-selection: rgba(229,0,126,0.2); --obs-focus-ring: 0 0 0 2px rgba(229,0,126,0.1); --obs-toggle-off: #ebedf5; --obs-thumb-shadow: 0 1px 3px rgba(0,0,0,0.15); /* Semantic (light variants) */ --obs-success: #0d9668; --obs-warning: #d97706; --obs-error: #dc2626; --obs-info: #2563eb; color-scheme: light; } /* ══════════════════════════════════════════════════════════ BASE RESET & TYPOGRAPHY ══════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; } body { font-family: var(--obs-font-base); color: var(--obs-text-body); background: var(--obs-bg-page); margin: 0; line-height: 1.5; -webkit-font-smoothing: antialiased; } ::selection { background: var(--obs-selection); } /* ── HEADINGS ──────────────────────────────────────────── */ .obs-h1 { font-size: 28px; font-weight: 700; color: var(--obs-text-primary); line-height: 1.3; margin: 0 0 4px; } .obs-h2 { font-size: 22px; font-weight: 700; color: var(--obs-text-primary); line-height: 1.3; margin: 0 0 4px; } .obs-h3 { font-size: 18px; font-weight: 600; color: var(--obs-text-primary); line-height: 1.4; margin: 0 0 4px; } .obs-h4 { font-size: 15px; font-weight: 600; color: var(--obs-text-primary); line-height: 1.4; margin: 0 0 4px; } .obs-h5 { font-size: 13px; font-weight: 600; color: var(--obs-text-body); line-height: 1.4; margin: 0 0 4px; } .obs-h6, .obs-label { font-size: 11px; font-weight: 600; color: var(--obs-text-secondary); line-height: 1.4; margin: 0; text-transform: uppercase; letter-spacing: 1px; } .obs-p { font-size: 14px; line-height: 1.7; color: var(--obs-text-body); margin: 0 0 12px; } .obs-small { font-size: 12px; color: var(--obs-text-secondary); line-height: 1.5; } .obs-mono { font-family: var(--obs-font-mono); } .obs-link { color: var(--obs-accent); text-decoration: none; border-bottom: 1px solid rgba(229,0,126,0.3); cursor: pointer; transition: var(--obs-transition); } .obs-code { font-family: var(--obs-font-mono); font-size: 13px; background: var(--obs-bg-elevated); padding: 2px 8px; border-radius: var(--obs-radius-sm); color: var(--obs-accent); border: 1px solid var(--obs-border-0); } .obs-hr { border: none; border-top: 1px solid var(--obs-border-0); margin: 24px 0; } .obs-section-title { font-size: 11px; letter-spacing: 3px; color: var(--obs-accent); text-transform: uppercase; font-weight: 700; margin-top: 48px; margin-bottom: 16px; } /* ══════════════════════════════════════════════════════════ LAYOUT ══════════════════════════════════════════════════════════ */ .obs-page { background: var(--obs-bg-page); min-height: 100vh; padding-bottom: 60px; } .obs-container { max-width: 1100px; margin: 0 auto; padding: 0 32px; } /* ══════════════════════════════════════════════════════════ NAVBAR ══════════════════════════════════════════════════════════ */ .obs-navbar { background: var(--obs-bg-nav); border-bottom: 1px solid var(--obs-border-0); padding: 0 32px; display: flex; align-items: center; box-shadow: var(--obs-card-shadow); } .obs-navbar__logo { font-weight: 800; font-size: 16px; color: var(--obs-accent); margin-right: 40px; padding: 16px 0; letter-spacing: 1px; } .obs-navbar__item { font-size: 13px; color: var(--obs-text-secondary); padding: 16px 18px; cursor: pointer; border-bottom: 2px solid transparent; transition: var(--obs-transition); } .obs-navbar__item--active, .obs-navbar__item:hover { color: var(--obs-text-primary); border-bottom-color: var(--obs-accent); font-weight: 600; } /* ── MEGA MENU ─────────────────────────────────────────── */ .obs-megamenu { position: absolute; top: 100%; left: 0; right: 0; background: var(--obs-bg-nav); border-bottom: 1px solid var(--obs-border-1); padding: 24px 32px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; z-index: 100; box-shadow: 0 8px 32px rgba(0,0,0,0.15); } .obs-megamenu__category { composes: obs-label; color: var(--obs-accent); margin-bottom: 12px; } .obs-megamenu__link { font-size: 13px; color: var(--obs-text-secondary); padding: 6px 0; cursor: pointer; transition: var(--obs-transition); } /* ══════════════════════════════════════════════════════════ CARD ══════════════════════════════════════════════════════════ */ .obs-card { background: var(--obs-bg-card); border-radius: var(--obs-radius-lg); padding: var(--obs-space-lg); border: 1px solid var(--obs-border-0); box-shadow: var(--obs-card-shadow); transition: var(--obs-transition); } /* ══════════════════════════════════════════════════════════ BUTTONS ══════════════════════════════════════════════════════════ */ .obs-btn { font-family: var(--obs-font-base); font-size: 13px; font-weight: 600; padding: 10px 24px; border-radius: var(--obs-radius-md); cursor: pointer; transition: var(--obs-transition); border: none; display: inline-flex; align-items: center; gap: 8px; } .obs-btn--primary { background: var(--obs-accent); color: #fff; } .obs-btn--secondary { background: transparent; color: var(--obs-accent); border: 1px solid var(--obs-border-accent); } .obs-btn--ghost { background: transparent; color: var(--obs-text-secondary); border: 1px solid var(--obs-border-1); } .obs-btn--icon { padding: 8px; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: var(--obs-radius-sm); background: transparent; color: var(--obs-text-secondary); border: 1px solid var(--obs-border-1); } .obs-btn--disabled { opacity: 0.4; cursor: not-allowed; } /* ── BUTTON GROUP ──────────────────────────────────────── */ .obs-btn-group { display: flex; gap: 0; } .obs-btn-group .obs-btn { border-radius: 0; border: 1px solid var(--obs-border-1); padding: 8px 18px; font-size: 12px; font-weight: 400; background: transparent; color: var(--obs-text-secondary); } .obs-btn-group .obs-btn:first-child { border-radius: var(--obs-radius-sm) 0 0 var(--obs-radius-sm); } .obs-btn-group .obs-btn:last-child { border-radius: 0 var(--obs-radius-sm) var(--obs-radius-sm) 0; } .obs-btn-group .obs-btn + .obs-btn { border-left: none; } .obs-btn-group .obs-btn--active { background: var(--obs-bg-elevated); color: var(--obs-text-primary); } /* ══════════════════════════════════════════════════════════ FILTERS ══════════════════════════════════════════════════════════ */ .obs-filter-pills { display: flex; gap: 8px; flex-wrap: wrap; } .obs-filter-pill { padding: 8px 22px; border-radius: var(--obs-radius-pill); font-size: 12px; font-family: var(--obs-font-base); cursor: pointer; transition: var(--obs-transition); border: 1px solid var(--obs-border-0); background: transparent; color: var(--obs-text-disabled); } .obs-filter-pill--active { border-color: var(--obs-border-accent); background: var(--obs-accent-muted); color: var(--obs-accent); } /* ── SELECT ────────────────────────────────────────────── */ .obs-select-group { display: flex; gap: 12px; flex-wrap: wrap; } .obs-select-wrapper .obs-label { margin-bottom: 6px; padding-left: 14px; } .obs-select { padding: 9px 36px 9px 14px; border-radius: 0; border: 1px solid var(--obs-border-1); background-color: var(--obs-bg-input); color: var(--obs-text-body); font-size: 13px; font-family: var(--obs-font-base); cursor: pointer; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237a7da8' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 12px; } .obs-select:focus { border-color: var(--obs-accent); box-shadow: var(--obs-focus-ring); outline: none; } /* ══════════════════════════════════════════════════════════ FORMS ══════════════════════════════════════════════════════════ */ .obs-input, .obs-textarea { padding: 10px 14px; border-radius: var(--obs-radius-md); border: 1px solid var(--obs-border-1); background: var(--obs-bg-input); color: var(--obs-text-body); font-size: 13px; font-family: var(--obs-font-base); width: 100%; outline: none; transition: var(--obs-transition); } .obs-textarea { min-height: 80px; resize: vertical; } .obs-input:focus, .obs-textarea:focus { border-color: var(--obs-accent); box-shadow: var(--obs-focus-ring); } .obs-input--error { border-color: var(--obs-accent); } .obs-field-error { font-size: 11px; color: var(--obs-accent); margin-top: 4px; } .obs-file-upload { padding: 20px 14px; border: 1px dashed var(--obs-border-2); border-radius: var(--obs-radius-md); text-align: center; color: var(--obs-text-disabled); cursor: pointer; background: var(--obs-bg-input); } .obs-file-upload__link { color: var(--obs-accent); } /* ── TOGGLE ────────────────────────────────────────────── */ .obs-toggle { width: 40px; height: 22px; border-radius: 11px; position: relative; cursor: pointer; transition: var(--obs-transition); background: var(--obs-toggle-off); border: 1px solid var(--obs-border-1); } .obs-toggle--active { background: var(--obs-accent); border-color: transparent; } .obs-toggle__thumb { width: 16px; height: 16px; border-radius: 50%; background: #fff; position: absolute; top: 2px; left: 2px; transition: var(--obs-transition); box-shadow: var(--obs-thumb-shadow); } .obs-toggle--active .obs-toggle__thumb { left: 20px; } /* ── CHECKBOX ──────────────────────────────────────────── */ .obs-checkbox { width: 18px; height: 18px; border-radius: 4px; border: 1px solid var(--obs-border-2); background: transparent; display: flex; align-items: center; justify-content: center; transition: var(--obs-transition); cursor: pointer; flex-shrink: 0; } .obs-checkbox--checked { background: var(--obs-accent); border-color: var(--obs-accent); color: #fff; } /* ── RADIO ─────────────────────────────────────────────── */ .obs-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--obs-border-2); display: flex; align-items: center; justify-content: center; transition: var(--obs-transition); cursor: pointer; flex-shrink: 0; } .obs-radio--selected { border-color: var(--obs-accent); } .obs-radio__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--obs-accent); } /* ══════════════════════════════════════════════════════════ TABLE ══════════════════════════════════════════════════════════ */ .obs-table-card { composes: obs-card; padding: 0; overflow: hidden; } .obs-table-header { padding: 20px 24px 12px; display: flex; justify-content: space-between; align-items: center; } .obs-table { width: 100%; border-collapse: collapse; font-size: 13px; } .obs-table th { font-size: 11px; font-weight: 600; color: var(--obs-text-secondary); text-transform: uppercase; letter-spacing: 1px; padding: 8px 16px; border-bottom: 2px solid var(--obs-border-accent); border-top: 1px solid var(--obs-border-0); } .obs-table th[data-sortable] { cursor: pointer; } .obs-table td { padding: 10px 16px; color: var(--obs-text-body); } .obs-table td.obs-table__cell--mono { font-family: var(--obs-font-mono); font-size: 12.5px; } .obs-table td.obs-table__cell--total { font-family: var(--obs-font-mono); font-size: 12.5px; color: var(--obs-text-primary); font-weight: 600; } .obs-table td.obs-table__cell--empty { color: var(--obs-text-disabled); } .obs-table tbody tr { transition: var(--obs-transition); cursor: pointer; } .obs-table tbody tr:nth-child(even) { background: var(--obs-table-stripe); } .obs-table tbody tr:hover { box-shadow: var(--obs-table-hover); } /* ── PAGINATION ────────────────────────────────────────── */ .obs-pagination { padding: 12px 24px; border-top: 1px solid var(--obs-border-0); display: flex; justify-content: space-between; align-items: center; } .obs-pagination__info { font-size: 12px; color: var(--obs-text-disabled); } .obs-pagination__pages { display: flex; gap: 4px; } .obs-pagination__btn { width: 30px; height: 30px; border-radius: var(--obs-radius-sm); border: 1px solid var(--obs-border-0); background: transparent; color: var(--obs-text-disabled); font-size: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-family: var(--obs-font-base); transition: var(--obs-transition); } .obs-pagination__btn--active { border-color: var(--obs-border-accent); background: var(--obs-accent-muted); color: var(--obs-accent); } .obs-pagination__btn:hover:not(.obs-pagination__btn--active) { border-color: var(--obs-border-1); background: var(--obs-bg-elevated); color: var(--obs-text-primary); } /* ══════════════════════════════════════════════════════════ KPI CARDS ══════════════════════════════════════════════════════════ */ .obs-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--obs-space-md); } .obs-kpi__label { composes: obs-label; margin-bottom: 12px; } .obs-kpi__value { font-size: 30px; font-weight: 700; font-family: var(--obs-font-mono); color: var(--obs-text-primary); line-height: 1; } .obs-kpi__delta { font-size: 12px; font-family: var(--obs-font-mono); margin-top: 8px; } .obs-kpi__delta--up { color: var(--obs-success); } .obs-kpi__delta--down { color: var(--obs-error); } /* ══════════════════════════════════════════════════════════ FEEDBACK ══════════════════════════════════════════════════════════ */ /* ── ALERTS ────────────────────────────────────────────── */ .obs-alert { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-radius: var(--obs-radius-md); font-size: 13px; color: var(--obs-text-body); } .obs-alert--success { background: rgba(16,185,129,0.07); box-shadow: inset 3px 0 0 var(--obs-success); border: 1px solid rgba(16,185,129,0.19); } .obs-alert--error { background: rgba(239,68,68,0.07); box-shadow: inset 3px 0 0 var(--obs-error); border: 1px solid rgba(239,68,68,0.19); } .obs-alert--warning { background: rgba(245,158,11,0.07); box-shadow: inset 3px 0 0 var(--obs-warning); border: 1px solid rgba(245,158,11,0.19); } .obs-alert--info { background: rgba(59,130,246,0.07); box-shadow: inset 3px 0 0 var(--obs-info); border: 1px solid rgba(59,130,246,0.19); } .obs-alert__icon { font-weight: 700; font-size: 14px; } /* ── BADGE ─────────────────────────────────────────────── */ .obs-badge { padding: 4px 12px; border-radius: var(--obs-radius-pill); font-size: 11px; font-weight: 600; display: inline-block; } .obs-badge--success { background: rgba(16,185,129,0.12); color: var(--obs-success); } .obs-badge--error { background: rgba(239,68,68,0.12); color: var(--obs-error); } .obs-badge--warning { background: rgba(245,158,11,0.12); color: var(--obs-warning); } .obs-badge--neutral { background: var(--obs-bg-elevated); color: var(--obs-text-secondary); } .obs-badge--accent { background: var(--obs-accent-muted); color: var(--obs-accent); } /* ── PROGRESS ──────────────────────────────────────────── */ .obs-progress { height: 6px; border-radius: 3px; background: var(--obs-bg-elevated); } .obs-progress__bar { height: 100%; border-radius: 3px; background: var(--obs-accent); transition: width 0.4s ease; } /* ── SPINNER ───────────────────────────────────────────── */ .obs-spinner { width: 20px; height: 20px; border: 2px solid var(--obs-border-1); border-top: 2px solid var(--obs-accent); border-radius: 50%; animation: obs-spin 0.8s linear infinite; } @keyframes obs-spin { to { transform: rotate(360deg); } } /* ── SKELETON ──────────────────────────────────────────── */ .obs-skeleton { background: var(--obs-bg-elevated); border-radius: 6px; animation: obs-pulse 1.5s ease-in-out infinite; } @keyframes obs-pulse { 0%,100% { opacity: 0.4; } 50% { opacity: 0.7; } } /* ── TOAST ─────────────────────────────────────────────── */ .obs-toast { position: fixed; bottom: 24px; right: 24px; padding: 14px 20px; border-radius: var(--obs-radius-md); background: var(--obs-bg-nav); border: 1px solid var(--obs-border-1); box-shadow: 0 8px 32px rgba(0,0,0,0.15); color: var(--obs-text-body); font-size: 13px; display: flex; align-items: center; gap: 10px; z-index: 1000; } /* ══════════════════════════════════════════════════════════ TABS ══════════════════════════════════════════════════════════ */ .obs-tabs { display: flex; gap: 0; border-bottom: 1px solid var(--obs-border-0); } .obs-tab { padding: 10px 20px; font-size: 13px; cursor: pointer; color: var(--obs-text-disabled); border-bottom: 2px solid transparent; font-weight: 400; transition: var(--obs-transition); } .obs-tab--active { color: var(--obs-text-primary); border-bottom-color: var(--obs-accent); font-weight: 600; } .obs-tab:hover:not(.obs-tab--active) { color: var(--obs-text-body); border-bottom: 1px solid var(--obs-border-accent); } /* ══════════════════════════════════════════════════════════ ACCORDION ══════════════════════════════════════════════════════════ */ .obs-accordion__item { border-bottom: 1px solid var(--obs-border-0); } .obs-accordion__trigger { padding: 16px 24px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--obs-transition); font-size: 14px; font-weight: 500; color: var(--obs-text-body); } .obs-accordion__trigger--open { background: var(--obs-table-stripe); color: var(--obs-text-primary); } .obs-accordion__content { padding: 16px 24px; font-size: 13px; color: var(--obs-text-secondary); line-height: 1.7; } /* ══════════════════════════════════════════════════════════ MODAL ══════════════════════════════════════════════════════════ */ .obs-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; z-index: 1000; } .obs-modal { background: var(--obs-bg-card); border-radius: var(--obs-radius-lg); padding: 32px; width: 460px; border: 1px solid var(--obs-border-1); box-shadow: 0 16px 64px rgba(0,0,0,0.3); } /* ══════════════════════════════════════════════════════════ BREADCRUMBS ══════════════════════════════════════════════════════════ */ .obs-breadcrumbs { display: flex; align-items: center; gap: 8px; font-size: 12px; } .obs-breadcrumbs__link { color: var(--obs-accent); cursor: pointer; } .obs-breadcrumbs__sep { color: var(--obs-text-disabled); } .obs-breadcrumbs__current { color: var(--obs-text-secondary); } /* ══════════════════════════════════════════════════════════ TOOLTIP ══════════════════════════════════════════════════════════ */ .obs-tooltip { position: absolute; padding: 8px 14px; border-radius: var(--obs-radius-sm); background: var(--obs-bg-elevated); color: var(--obs-text-primary); font-size: 12px; white-space: nowrap; box-shadow: 0 4px 16px rgba(0,0,0,0.2); border: 1px solid var(--obs-border-1); } /* ══════════════════════════════════════════════════════════ TIMELINE ══════════════════════════════════════════════════════════ */ .obs-timeline { position: relative; padding-left: 24px; } .obs-timeline__line { position: absolute; left: 5px; top: 4px; bottom: 4px; width: 1px; background: var(--obs-border-1); } .obs-timeline__item { position: relative; margin-bottom: 24px; } .obs-timeline__dot { position: absolute; left: -24px; top: 4px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--obs-bg-page); } .obs-timeline__time { composes: obs-label; font-family: var(--obs-font-mono); margin-bottom: 4px; } .obs-timeline__title { font-size: 14px; font-weight: 600; color: var(--obs-text-primary); margin-bottom: 2px; } .obs-timeline__desc { font-size: 12px; color: var(--obs-text-secondary); } /* ══════════════════════════════════════════════════════════ STEPPER ══════════════════════════════════════════════════════════ */ .obs-stepper { display: flex; align-items: center; } .obs-stepper__step { display: flex; align-items: center; gap: 8px; } .obs-stepper__circle { width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; } .obs-stepper__circle--done { background: var(--obs-accent); color: #fff; } .obs-stepper__circle--current { background: var(--obs-accent-muted); color: var(--obs-accent); border: 1px solid var(--obs-border-accent); } .obs-stepper__circle--pending { background: var(--obs-bg-elevated); color: var(--obs-text-disabled); } .obs-stepper__connector { width: 40px; height: 1px; margin: 0 12px; } .obs-stepper__connector--done { background: var(--obs-accent); } .obs-stepper__connector--pending { background: var(--obs-border-1); } /* ══════════════════════════════════════════════════════════ LIST ══════════════════════════════════════════════════════════ */ .obs-list-item { display: flex; align-items: center; gap: 14px; padding: 14px 24px; border-bottom: 1px solid var(--obs-border-0); cursor: pointer; transition: var(--obs-transition); } .obs-list-item:last-child { border-bottom: none; } .obs-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--obs-bg-elevated); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600; color: var(--obs-text-primary); flex-shrink: 0; } .obs-status-dot { width: 8px; height: 8px; border-radius: 50%; } .obs-status-dot--online { background: var(--obs-success); } .obs-status-dot--offline { background: var(--obs-text-disabled); } /* ══════════════════════════════════════════════════════════ EMPTY STATE ══════════════════════════════════════════════════════════ */ .obs-empty-state { text-align: center; padding: 48px 24px; } .obs-empty-state__icon { font-size: 40px; margin-bottom: 16px; opacity: 0.3; } .obs-empty-state__title { font-size: 16px; font-weight: 600; color: var(--obs-text-primary); margin-bottom: 8px; } .obs-empty-state__desc { font-size: 13px; color: var(--obs-text-disabled); margin-bottom: 20px; } /* ══════════════════════════════════════════════════════════ FOOTER ══════════════════════════════════════════════════════════ */ .obs-footer { padding: 24px 0; border-top: 1px solid var(--obs-border-0); display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--obs-text-disabled); } /* ══════════════════════════════════════════════════════════ THEME TOGGLE ══════════════════════════════════════════════════════════ */ .obs-theme-toggle { display: flex; align-items: center; gap: 6px; cursor: pointer; } /* ══════════════════════════════════════════════════════════ CHART (container & tooltip styles) ══════════════════════════════════════════════════════════ */ .obs-chart-tooltip { background: var(--obs-bg-elevated); border: 1px solid var(--obs-border-1); border-radius: var(--obs-radius-sm); padding: 10px 14px; min-width: 200px; font-size: 12px; font-family: var(--obs-font-mono); } .obs-chart-tooltip__label { composes: obs-label; font-family: var(--obs-font-mono); margin-bottom: 6px; } .obs-chart-tooltip__row { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; } .obs-chart-tooltip__dot { width: 8px; height: 8px; border-radius: 2px; flex-shrink: 0; } .obs-chart-tooltip__name { color: var(--obs-text-secondary); flex: 1; } .obs-chart-tooltip__value { color: var(--obs-text-primary); font-weight: 600; } /* ── CHART LEGEND ──────────────────────────────────────── */ .obs-chart-legend { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; margin-top: 8px; padding: 4px 0; } .obs-chart-legend__item { display: flex; align-items: center; gap: 6px; cursor: pointer; } .obs-chart-legend__item--hidden { opacity: 0.3; } .obs-chart-legend__item--hidden .obs-chart-legend__label { text-decoration: line-through; color: var(--obs-text-disabled); } .obs-chart-legend__label { font-size: 12px; color: var(--obs-text-secondary); } /* ══════════════════════════════════════════════════════════ NUMBER FORMATTING (utility classes) ══════════════════════════════════════════════════════════ */ .obs-num { font-family: var(--obs-font-mono); font-variant-numeric: tabular-nums; } .obs-num--currency::after { content: '\2009₽'; }