/* ============================================================================ unity.css — общая дизайн-система UnityShop Одна на три поверхности: worker.html, index.html, admin.html. Направление выбрано пользователем: категорийный стандарт (привычная рабочая панель), выполненный на уровне ремесла Linear. Никаких экзотических миров. Правила, которые здесь держатся: 1. Тон берётся ТОЛЬКО из нейтральной шкалы --n-*. Цвет появляется там, где несёт смысл: интерактивность (акцент) или состояние (семантика). 2. Светлая и тёмная темы равноправны. Тема переключается классом на или : .theme-dark / .theme-light. По умолчанию — системная. 3. Все числа (суммы, остатки, номера) — табличным моноширинным. 4. Любая анимация обязана исчезать при prefers-reduced-motion. ========================================================================== */ /* ── 1. Токены ───────────────────────────────────────────────────────────── */ :root { /* Нейтральная шкала — единственный источник тонов. Холодный подтон. */ --n-0: #ffffff; --n-50: #f7f8f9; --n-100: #eff1f3; --n-200: #e3e6e9; --n-300: #cdd2d8; --n-400: #a3aab4; --n-500: #7c838e; --n-600: #5b626c; --n-700: #3c424b; --n-800: #23262b; --n-900: #16181c; --n-950: #0c0d10; /* Акцент — только интерактивность и активное состояние. */ --a-100: #eceaff; --a-200: #d7d2ff; --a-300: #b6aaff; --a-400: #9b8cff; --a-500: #7c63f5; --a-600: #6a4fe8; --a-700: #5840c4; /* Шкала времени и кривые. */ --dur-instant: 80ms; --dur-fast: 130ms; --dur: 200ms; --dur-slow: 320ms; --ease: cubic-bezier(.2, 0, 0, 1); /* стандартный вход/выход */ --ease-out: cubic-bezier(.16, 1, .3, 1); /* экспоненциальный выход */ --ease-emphasized: cubic-bezier(.32, .72, 0, 1); /* шиты и крупные панели */ /* Шаг 4pt. */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Радиусы. */ --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 999px; /* Типографика. */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-num: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --fs-11: 11px; --fs-12: 12px; --fs-13: 13px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-22: 22px; --fs-28: 28px; --fs-36: 36px; --lh-tight: 1.2; --lh-snug: 1.35; --lh-normal: 1.5; --lh-loose: 1.65; --tr-tight: -0.02em; /* крупный кегль */ --tr-normal: -0.01em; /* интерфейсный текст */ --tr-caps: 0.06em; /* микро-подписи капслоком */ /* Плотность: перекрывается в медиазапросе на тач-ширинах. */ --pad-page: 24px; --row-h: 36px; --tap: 32px; /* Брейкпоинты (для справки — CSS не читает переменные в @media): sm 480 · md 768 · lg 1024 · xl 1280 */ } /* Светлая тема — база. */ :root, .theme-light { --bg: var(--n-50); --surface: var(--n-0); --surface-2: var(--n-100); --surface-3: var(--n-200); --border: var(--n-200); --border-strong: var(--n-300); --text: var(--n-900); --text-2: var(--n-600); --text-3: var(--n-500); --accent: var(--a-600); --accent-hover: var(--a-500); --accent-fg: #ffffff; --accent-bg: var(--a-100); --accent-border: var(--a-200); --ok-fg: #15803d; --ok-bg: #e8f6ec; --ok-border: #bfe3ca; --warn-fg: #a35a07; --warn-bg: #fdf2e3; --warn-border: #f3d9a8; --danger-fg: #c62828; --danger-bg: #fdeaea; --danger-border: #f3c2c2; --info-fg: var(--a-700); --info-bg: var(--a-100); --info-border: var(--a-200); --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--a-400); --shadow-1: 0 1px 2px rgba(16, 18, 22, .06), 0 1px 1px rgba(16, 18, 22, .04); --shadow-2: 0 4px 12px rgba(16, 18, 22, .10), 0 1px 3px rgba(16, 18, 22, .06); --shadow-3: 0 16px 40px rgba(16, 18, 22, .18), 0 4px 12px rgba(16, 18, 22, .08); --skeleton-base: var(--n-100); --skeleton-shine: var(--n-200); --scrollbar: var(--n-300); color-scheme: light; } .theme-dark { --bg: var(--n-950); --surface: #121418; --surface-2: var(--n-900); --surface-3: var(--n-800); --border: #22252b; --border-strong: #2f333a; --text: var(--n-50); --text-2: var(--n-400); --text-3: var(--n-500); --accent: var(--a-400); --accent-hover: var(--a-300); --accent-fg: #12101f; --accent-bg: rgba(124, 99, 245, .14); --accent-border: rgba(124, 99, 245, .32); --ok-fg: #4ade80; --ok-bg: rgba(34, 197, 94, .12); --ok-border: rgba(34, 197, 94, .28); --warn-fg: #fbbf24; --warn-bg: rgba(245, 158, 11, .12); --warn-border: rgba(245, 158, 11, .28); --danger-fg: #f87171; --danger-bg: rgba(248, 113, 113, .12); --danger-border: rgba(248, 113, 113, .30); --info-fg: var(--a-300); --info-bg: rgba(124, 99, 245, .14); --info-border: rgba(124, 99, 245, .30); --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--a-500); --shadow-1: 0 1px 2px rgba(0, 0, 0, .40); --shadow-2: 0 4px 14px rgba(0, 0, 0, .48), 0 1px 3px rgba(0, 0, 0, .32); --shadow-3: 0 20px 48px rgba(0, 0, 0, .60), 0 6px 16px rgba(0, 0, 0, .40); --skeleton-base: var(--n-800); --skeleton-shine: #2b2f36; --scrollbar: var(--n-700); color-scheme: dark; } /* Системная тема, пока пользователь не выбрал явно. */ @media (prefers-color-scheme: dark) { :root:not(.theme-light):not(.theme-dark) { --bg: var(--n-950); --surface: #121418; --surface-2: var(--n-900); --surface-3: var(--n-800); --border: #22252b; --border-strong: #2f333a; --text: var(--n-50); --text-2: var(--n-400); --text-3: var(--n-500); --accent: var(--a-400); --accent-hover: var(--a-300); --accent-fg: #12101f; --accent-bg: rgba(124, 99, 245, .14); --accent-border: rgba(124, 99, 245, .32); --ok-fg: #4ade80; --ok-bg: rgba(34, 197, 94, .12); --ok-border: rgba(34, 197, 94, .28); --warn-fg: #fbbf24; --warn-bg: rgba(245, 158, 11, .12); --warn-border: rgba(245, 158, 11, .28); --danger-fg: #f87171; --danger-bg: rgba(248, 113, 113, .12); --danger-border: rgba(248, 113, 113, .30); --info-fg: var(--a-300); --info-bg: rgba(124, 99, 245, .14); --info-border: rgba(124, 99, 245, .30); --ring: 0 0 0 2px var(--bg), 0 0 0 4px var(--a-500); --shadow-1: 0 1px 2px rgba(0, 0, 0, .40); --shadow-2: 0 4px 14px rgba(0, 0, 0, .48), 0 1px 3px rgba(0, 0, 0, .32); --shadow-3: 0 20px 48px rgba(0, 0, 0, .60), 0 6px 16px rgba(0, 0, 0, .40); --skeleton-base: var(--n-800); --skeleton-shine: #2b2f36; --scrollbar: var(--n-700); color-scheme: dark; } } /* Плотность на тач-ширинах: цели крупнее, поля страницы уже. */ @media (max-width: 767px) { :root { --pad-page: 12px; --row-h: 44px; --tap: 44px; } } /* ── 2. База ─────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); font-size: var(--fs-14); line-height: var(--lh-normal); letter-spacing: var(--tr-normal); background: var(--bg); color: var(--text); min-height: 100vh; min-height: 100svh; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } /* Поверхности браузера тоже часть системы. */ ::selection { background: var(--accent-bg); color: var(--text); } :where(input, textarea) { caret-color: var(--accent); } :where(a) { color: var(--accent); text-underline-offset: 2px; } :where(*) { scrollbar-width: thin; scrollbar-color: var(--scrollbar) transparent; } ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: var(--r-full); border: 3px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-3); background-clip: content-box; } :where(button, a, input, select, textarea, [tabindex]):focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--r-sm); } :where(button, input, select, textarea) { font: inherit; letter-spacing: inherit; color: inherit; } /* iOS ждёт возможного двойного тапа и на быстрых нажатиях слегка двигает страницу. manipulation отключает double-tap zoom и это ожидание. */ :where(button, a, input, select, textarea, [role='button'], summary) { touch-action: manipulation; } /* ── 3. Типографические утилиты ──────────────────────────────────────────── */ .u-num { /* любые числа: суммы, остатки, номера */ font-family: var(--font-num); font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } .u-title { font-size: var(--fs-22); font-weight: 640; letter-spacing: var(--tr-tight); line-height: var(--lh-tight); } .u-subtitle { font-size: var(--fs-13); color: var(--text-2); } .u-label { /* микро-подпись над данными */ font-size: var(--fs-11); font-weight: 600; letter-spacing: var(--tr-caps); text-transform: uppercase; color: var(--text-2); /* не text-3: на 11px он не дотягивает до 4.5:1 */ } .u-muted { color: var(--text-2); } .u-mono { font-family: var(--font-num); } /* ── 4. Кнопки ───────────────────────────────────────────────────────────── */ .u-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); min-height: var(--tap); padding: 0 var(--sp-3); border: 1px solid transparent; border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font-size: var(--fs-13); font-weight: 550; white-space: nowrap; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); } .u-btn:active { transform: translateY(.5px); } .u-btn[disabled], .u-btn:disabled { opacity: .45; cursor: not-allowed; } .u-btn--primary { background: var(--accent); color: var(--accent-fg); } .u-btn--ghost { background: transparent; border-color: var(--border); color: var(--text-2); } .u-btn--subtle { background: transparent; color: var(--text-2); } .u-btn--danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); } .u-btn--sm { min-height: 26px; padding: 0 var(--sp-2); font-size: var(--fs-12); border-radius: var(--r-sm); } .u-btn--block { width: 100%; } @media (hover: hover) { .u-btn:hover { background: var(--surface-3); } .u-btn--primary:hover { background: var(--accent-hover); } .u-btn--ghost:hover { border-color: var(--border-strong); color: var(--text); background: var(--surface-2); } .u-btn--subtle:hover { background: var(--surface-2); color: var(--text); } .u-btn--danger:hover { background: var(--danger-fg); color: var(--n-0); border-color: var(--danger-fg); } } /* ── 5. Поля ─────────────────────────────────────────────────────────────── */ .u-input { width: 100%; min-height: var(--tap); padding: 0 var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); color: var(--text); font-size: var(--fs-13); outline: none; transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); } .u-input::placeholder { color: var(--text-3); } .u-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .u-input--invalid { border-color: var(--danger-border); background: var(--danger-bg); } /* ── 6. Бейджи состояний ─────────────────────────────────────────────────── */ .u-badge { display: inline-flex; align-items: center; gap: var(--sp-1); padding: 2px var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); font-size: var(--fs-11); font-weight: 600; line-height: 18px; white-space: nowrap; } .u-badge--ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-fg); } .u-badge--warn { background: var(--warn-bg); border-color: var(--warn-border); color: var(--warn-fg); } .u-badge--danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger-fg); } .u-badge--info { background: var(--info-bg); border-color: var(--info-border); color: var(--info-fg); } .u-badge--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } /* ── 7. Сегмент-контрол ──────────────────────────────────────────────────── */ .u-segmented { position: relative; display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--r-md); overflow-x: auto; scrollbar-width: none; } .u-segmented::-webkit-scrollbar { display: none; } .u-segmented__ind { /* едущий индикатор активного сегмента */ position: absolute; top: 3px; left: 0; height: calc(100% - 6px); background: var(--surface); border-radius: var(--r-sm); box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease), width var(--dur) var(--ease); pointer-events: none; } .u-seg { position: relative; z-index: 1; flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-1); min-height: 28px; padding: 0 var(--sp-3); border: none; background: none; border-radius: var(--r-sm); color: var(--text-2); font-size: var(--fs-12); font-weight: 550; white-space: nowrap; cursor: pointer; transition: color var(--dur-fast) var(--ease); } .u-seg[aria-selected='true'], .u-seg.is-active { color: var(--text); } @media (hover: hover) { .u-seg:hover { color: var(--text); } } @media (max-width: 767px) { .u-seg { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--fs-13); } } /* ── 8. Карточка и строка ────────────────────────────────────────────────── */ .u-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); transition: border-color var(--dur-fast) var(--ease); } .u-row { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--row-h); padding: var(--sp-2) var(--sp-3); border-bottom: 1px solid var(--border); } .u-row:last-child { border-bottom: none; } /* ── 9. Раскрывающийся блок (без display:none — чтобы анимировался) ──────── */ .u-collapse { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); } .u-collapse > * { overflow: hidden; min-height: 0; } .u-collapse.is-open { grid-template-rows: 1fr; } .u-chev { transition: transform var(--dur) var(--ease); flex-shrink: 0; } .u-chev.is-open { transform: rotate(180deg); } /* ── 10. Skeleton ────────────────────────────────────────────────────────── */ .u-skeleton { position: relative; overflow: hidden; background: var(--skeleton-base); border-radius: var(--r-sm); } .u-skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--skeleton-shine), transparent); animation: u-shimmer 1.4s infinite; } @keyframes u-shimmer { to { transform: translateX(100%); } } /* ── 11. Тосты ───────────────────────────────────────────────────────────── */ .u-toasts { position: fixed; z-index: 9999; right: var(--sp-4); bottom: calc(var(--sp-4) + env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-2); pointer-events: none; } @media (max-width: 767px) { .u-toasts { left: var(--sp-3); right: var(--sp-3); align-items: stretch; } } .u-toast { display: flex; align-items: center; gap: var(--sp-2); max-width: min(420px, 90vw); padding: var(--sp-3); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-2); color: var(--text); font-size: var(--fs-13); pointer-events: auto; animation: u-toast-in var(--dur) var(--ease-out) both; } .u-toast--ok { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok-fg); } .u-toast--danger { border-color: var(--danger-border); background: var(--danger-bg); color: var(--danger-fg); } .u-toast.is-out { animation: u-toast-out var(--dur-fast) var(--ease) both; } @keyframes u-toast-in { from { opacity: 0; transform: translateY(8px) scale(.98); } } @keyframes u-toast-out { to { opacity: 0; transform: translateY(4px) scale(.98); } } /* ── 12. Диалог (замена confirm) ─────────────────────────────────────────── */ .u-dialog-backdrop { position: fixed; inset: 0; z-index: 9998; display: flex; align-items: center; justify-content: center; padding: var(--sp-4); background: rgba(6, 7, 9, .55); animation: u-fade var(--dur-fast) var(--ease) both; } .u-dialog { width: min(420px, 100%); padding: var(--sp-5); background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-xl); box-shadow: var(--shadow-3); animation: u-dialog-in var(--dur) var(--ease-out) both; } .u-dialog__title { font-size: var(--fs-16); font-weight: 620; letter-spacing: var(--tr-normal); } .u-dialog__body { margin-top: var(--sp-2); font-size: var(--fs-13); color: var(--text-2); line-height: var(--lh-normal); } .u-dialog__foot { display: flex; gap: var(--sp-2); justify-content: flex-end; margin-top: var(--sp-5); } @keyframes u-fade { from { opacity: 0; } } @keyframes u-dialog-in { from { opacity: 0; transform: translateY(8px) scale(.97); } } @media (max-width: 767px) { .u-dialog-backdrop { align-items: flex-end; padding: 0; } .u-dialog { width: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0; padding-bottom: calc(var(--sp-5) + env(safe-area-inset-bottom)); animation: u-sheet-in var(--dur) var(--ease-emphasized) both; } @keyframes u-sheet-in { from { transform: translateY(100%); } } } /* ── 13. Пустые состояния и ошибки ───────────────────────────────────────── */ .u-empty { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); padding: var(--sp-12) var(--sp-4); text-align: center; color: var(--text-2); } .u-empty__icon { color: var(--text-3); } .u-empty__title { font-size: var(--fs-14); font-weight: 560; color: var(--text); } .u-empty__text { font-size: var(--fs-13); max-width: 44ch; } /* ── 14. Клавиша (подсказка горячих клавиш) ──────────────────────────────── */ .u-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border: 1px solid var(--border); border-bottom-width: 2px; border-radius: var(--r-xs); background: var(--surface-2); color: var(--text-3); font-family: var(--font-num); font-size: 10px; line-height: 1; } /* ── 15. Уважение к настройкам движения ──────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } .u-skeleton::after { display: none; } }