/* VibeDesk foundation — дизайн-токены по умолчанию. См. docs/UI_BASELINE.md: «Архитектура стилей (refactor)». Порядок: _Layout грузит этот файл раньше wwwroot/css/site.css. */ :root { --vd-motion-instant: 0ms; --vd-motion-fast: 150ms; --vd-motion-base: 220ms; --vd-motion-slow: 350ms; } @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; } } html { font-size: 14px; } @media (min-width: 768px) { html { font-size: 16px; } } /* ============================================================ VibeDesk design tokens — светлая Corporate Minimal по умолчанию. Переопределяется через body[data-color-palette="..."] (офисные, совместимость, Vibe). ============================================================ */ :root { /* Базовые поверхности / фон — по умолчанию LIGHT (Corporate Minimal) */ --vd-bg: #e8ecf2; --vd-bg-deep: #dfe4ec; --vd-panel: #eef1f6; --vd-panel-strong: #f3f5f9; --vd-panel-soft: #e9eef4; /* Границы */ --vd-border: #d4dbe4; --vd-border-soft: #e3e8ee; --vd-border-strong: #c5cdd8; /* Акценты */ --vd-accent: #2563eb; --vd-accent-strong: #1d4ed8; --vd-accent-soft: rgba(37, 99, 235, 0.10); --vd-accent-soft-2: rgba(37, 99, 235, 0.20); --vd-accent-glow: 0 0 0 3px rgba(37, 99, 235, 0.16); /* Chrome (navbar/sidebar) */ --vd-chrome-bg: #1b263b; --vd-chrome-bg-soft: #223152; --vd-chrome-text: #e2e8f0; --vd-chrome-text-muted: rgba(226, 232, 240, 0.72); --vd-chrome-text-faint: rgba(226, 232, 240, 0.48); --vd-chrome-border: rgba(255, 255, 255, 0.08); --vd-chrome-active-bg: rgba(59, 130, 246, 0.22); --vd-chrome-active-text: #dbeafe; /* Плоский «как сайдбар» оттенок для card-header.bg-unified / .vd-kb-root-head / #calendar-container > .card-header.bg-unified (см. Часть 4 PLAN_css_refactor_v2.md). По умолчанию = light-office #506782; каждая палитра переопределяет под свой тон. */ --vd-chrome-flat: #506782; /* Диагональный chrome-gradient (card-header / hero / modal / календарь). Дефолт — тон корпоративного --vd-chrome-bg; палитры задают свои rgba. */ --vd-chrome-gradient-135-from: rgba(27, 38, 59, 0.92); --vd-chrome-gradient-135-to: rgba(34, 49, 82, 0.86); /* Вертикальное «стекло» сайдбара (полупрозрачный chrome). */ --vd-chrome-sidebar-glass-from: rgba(28, 40, 62, 0.71); --vd-chrome-sidebar-glass-to: rgba(24, 35, 55, 0.68); /* Вертикальный плотный chrome (мессенджер, шапка KB в светлых темах). */ --vd-chrome-panel-180-from: rgba(28, 40, 62, 0.96); --vd-chrome-panel-180-to: rgba(24, 35, 55, 0.94); /* Шапка корня KB — чуть плотнее/мягче чем panel (light-office). */ --vd-chrome-kb-head-180-from: rgba(28, 40, 62, 0.95); --vd-chrome-kb-head-180-to: rgba(24, 35, 55, 0.92); /* Гостевой login: светлое матовое стекло (светлые палитры; тёмные переопределяют). */ --vd-glass-guest-stop-1: rgba(248, 250, 252, 0.26); --vd-glass-guest-stop-2: rgba(226, 232, 242, 0.2); --vd-glass-guest-stop-3: rgba(237, 242, 249, 0.24); --vd-glass-guest-border: rgba(255, 255, 255, 0.34); /* Базовый .vd-glass-card до загрузки палитры (vibe-like; палитры переопределяют). */ --vd-glass-card-from: rgba(30, 20, 50, 0.82); --vd-glass-card-to: rgba(20, 15, 35, 0.62); /* Заголовки секций в vd-glass-card (S0 UI consistency) */ --vd-card-head-bg: transparent; --vd-card-head-fg: var(--vd-text); --vd-card-head-border: var(--vd-border-soft); /* Дельты на карточках метрик главной */ --vd-stat-delta-up: var(--vd-chip-emerald-text); --vd-stat-delta-dn: var(--vd-chip-orange-text); /* RGB-триплет для elevation-теней chrome-семейства (hero/kb/calendar/cards). Используется как rgba(var(--vd-chrome-shadow-rgb), X), где X — alpha-«слой». По умолчанию = slate, чтобы тени на любом фоне не уходили в коричневый. */ --vd-chrome-shadow-rgb: 15, 23, 42; /* Текст (на светлом фоне) */ --vd-text: #0f172a; --vd-text-strong: #0b1220; --vd-text-muted: #475569; --vd-text-faint: #94a3b8; /* Поверхности внутри модулей (KB и т.п.) */ --vd-surface: var(--vd-panel); --vd-surface-card: var(--vd-panel); --vd-surface-muted: rgba(15, 23, 42, 0.045); /* Геометрия */ --vd-radius-sm: 0.4rem; --vd-radius-md: 0.55rem; --vd-radius-lg: 0.75rem; --vd-radius-xl: 1rem; /* Тени */ --vd-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08); --vd-shadow-md: 0 6px 18px rgba(15, 23, 42, 0.10); --vd-shadow-lg: 0 16px 40px rgba(15, 23, 42, 0.14); /* Статус-пилюли */ --vd-chip-violet-bg: rgba(139, 92, 246, 0.14); --vd-chip-violet-text: #6d28d9; --vd-chip-violet-border: rgba(139, 92, 246, 0.28); --vd-chip-blue-bg: rgba(37, 99, 235, 0.14); --vd-chip-blue-text: #1d4ed8; --vd-chip-blue-border: rgba(37, 99, 235, 0.32); --vd-chip-emerald-bg: rgba(16, 185, 129, 0.14); --vd-chip-emerald-text: #047857; --vd-chip-emerald-border: rgba(16, 185, 129, 0.32); --vd-chip-orange-bg: rgba(249, 115, 22, 0.14); --vd-chip-orange-text: #c2410c; --vd-chip-orange-border: rgba(249, 115, 22, 0.32); --vd-chip-red-bg: rgba(239, 68, 68, 0.14); --vd-chip-red-text: #b91c1c; --vd-chip-red-border: rgba(239, 68, 68, 0.32); --vd-chip-yellow-bg: rgba(234, 179, 8, 0.14); --vd-chip-yellow-text: #854d0e; --vd-chip-yellow-border: rgba(234, 179, 8, 0.32); --vd-chip-gray-bg: rgba(100, 116, 139, 0.12); --vd-chip-gray-text: #334155; --vd-chip-gray-border: rgba(148, 163, 184, 0.34); /* Маска поверх фонового изображения (тёмные палитры усиливают её через --vd-overlay) */ --vd-overlay: transparent; /* Bootstrap .modal-content: в Zen перекрывается vd-overrides; палитры могут задавать фон точечно */ --vd-modal-content-bg: var(--vd-panel); --vd-modal-content-color: var(--vd-text); --vd-modal-content-border: var(--vd-border); --vd-modal-content-shadow: var(--vd-shadow-lg); /* Редкий случай без body.zen-body — как чистый Bootstrap */ --vd-modal-content-fallback-bg: #ffffff; --vd-modal-content-fallback-shadow: 0 1.25rem 3rem rgba(0, 0, 0, 0.2); /* Login: полноэкранная Lottie-заставка (фиолетовый оверлей; палитры могут переопределить) */ --vd-login-splash-gradient-from: rgba(11, 8, 22, 0.94); --vd-login-splash-gradient-to: rgba(26, 14, 58, 0.92); --vd-login-splash-backdrop-blur: 14px; /* Legacy zen-* glass/shadow/radius (переопределяются vd-user-theme-chrome.css) */ --zen-glass-bg: rgba(255, 255, 255, 0.92); --zen-glass-border: rgba(203, 213, 225, 0.95); --zen-shadow-sm: 0 1px 2px rgba(var(--vd-chrome-shadow-rgb), 0.06), 0 2px 8px rgba(var(--vd-chrome-shadow-rgb), 0.06); --zen-shadow-md: 0 4px 14px rgba(var(--vd-chrome-shadow-rgb), 0.1); --zen-radius-lg: 0.7rem; --zen-radius-xl: 0.85rem; /* Аватары (fallback без фото) */ --vd-avatar-ring: #fff; --vd-avatar-fallback-from: #dbeafe; --vd-avatar-fallback-to: #e9d5ff; /* Шапка срочной заявки */ --vd-ticket-urgent-meta-from: #7f1d1d; --vd-ticket-urgent-meta-mid: #b91c1c; --vd-ticket-urgent-meta-to: #dc2626; --vd-ticket-urgent-meta-fg: #fff; --vd-ticket-urgent-meta-muted: rgba(255, 255, 255, 0.88); /* Футер для авторизованных (не гость) */ --vd-footer-authed-glass-bg: rgba(255, 255, 255, 0.72); --vd-footer-authed-border: rgba(var(--vd-chrome-shadow-rgb), 0.08); }