/* ============================================================================ * Frime PWA v2 — shared mobile styles for Staff Portal, Expense, and other * standalone PWA views. Eats safe-area, provides helpers. * * Layered after design-tokens.css → consumes var(--f-*) only (no MD3, no raw hex). * Layered before style.css → existing view-specific rules can override. * * Reference mockup: .agent/design-mockups/staff-portal-v2.html * ============================================================================ */ /* ---------------------------------------------------------------------------- * Safe-area utilities — use on fixed headers / bottom navs inside PWAs. * Fallback values match the mockup so layouts don't collapse on non-iOS. * ---------------------------------------------------------------------------- */ .pwa-app .pwa-safe-top { padding-top: max(env(safe-area-inset-top, 0px), 12px); } .pwa-app .pwa-safe-bottom { padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px); } .pwa-app .pwa-safe-left { padding-left: max(env(safe-area-inset-left, 0px), 0px); } .pwa-app .pwa-safe-right { padding-right: max(env(safe-area-inset-right, 0px), 0px); } /* Header-specific: bigger default so the iPhone status-bar fits. */ .pwa-app .pwa-safe-header-top { padding-top: max(env(safe-area-inset-top, 0px), 44px); } /* Bottom-nav: compensates for home-indicator clearance. */ .pwa-app .pwa-safe-nav-bottom { padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px); } /* ---------------------------------------------------------------------------- * Scrollbar hiding (mobile webviews shouldn't show tracks). * ---------------------------------------------------------------------------- */ .pwa-app .pwa-hide-scroll { scrollbar-width: none; -ms-overflow-style: none; } .pwa-app .pwa-hide-scroll::-webkit-scrollbar { display: none; } /* ---------------------------------------------------------------------------- * Typography helpers for mobile contexts. * .num for monospaced tabular numerics (prices, times, percentages). * ---------------------------------------------------------------------------- */ .pwa-app .num { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-variant-numeric: tabular-nums; font-weight: 600; } /* Body font reset — PWAs should inherit Inter from , but legacy * StaffPortal/Expense hardcoded Roboto/Manrope inline. This nudges those * scopes back to the project default. */ .pwa-app, .pwa-app.staff-portal, .pwa-app .staff-portal, .pwa-app.expense-app, .pwa-app .expense-app { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ============================================================================ * v2 COMPONENT LIBRARY — reusable across PWA views. * * All rules consume var(--f-*). Keep these generic (no .staff-portal / * .expense-app prefix) so the same classes work in both. * ============================================================================ */ /* ---------------------------------------------------------------------------- * Buttons — .f-btn + modifiers. 44×44pt min touch target. * ---------------------------------------------------------------------------- */ .pwa-app .f-btn { height: 44px; min-width: 44px; padding: 0 18px; border-radius: var(--r-md); border: 1px solid transparent; background: transparent; color: var(--f-text); font: 600 14px/1 'Inter', -apple-system, sans-serif; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: background .15s, border-color .15s, color .15s, transform .05s; user-select: none; -webkit-tap-highlight-color: transparent; touch-action: manipulation; } .pwa-app .f-btn:active { transform: scale(.98); } .pwa-app .f-btn:focus-visible { outline: 0; box-shadow: var(--f-ring); } .pwa-app .f-btn:disabled, .pwa-app .f-btn.is-disabled { background: var(--f-border-strong) !important; color: var(--f-text-placeholder) !important; border-color: var(--f-border-strong) !important; cursor: not-allowed; transform: none; } .pwa-app .f-btn-primary { background: var(--f-accent); color: var(--f-accent-on); border-color: var(--f-accent); } .pwa-app .f-btn-primary:hover { background: var(--f-accent-hover); border-color: var(--f-accent-hover); } .pwa-app .f-btn-secondary { background: var(--f-surface); color: var(--f-text); border-color: var(--f-border); } .pwa-app .f-btn-secondary:hover { background: var(--f-surface-alt); border-color: var(--f-border-strong); } .pwa-app .f-btn-tonal { background: var(--f-accent-soft); color: var(--f-accent-text); border-color: transparent; } .pwa-app .f-btn-tonal:hover { background: var(--f-accent-soft-hover); } .pwa-app .f-btn-ghost { background: transparent; color: var(--f-text); border-color: transparent; } .pwa-app .f-btn-ghost:hover { background: var(--f-surface-alt); } .pwa-app .f-btn-danger { background: var(--f-danger); color: #fff; border-color: var(--f-danger); } .pwa-app .f-btn-danger:hover { filter: brightness(.92); } .pwa-app .f-btn-block { display: flex; width: 100%; } .pwa-app .f-btn-sm { height: 36px; padding: 0 12px; font-size: 13px; } /* Icon-only button (square, circular, used in headers for back/search/etc) */ .pwa-app .f-icon-btn { width: 40px; height: 40px; min-width: 40px; border-radius: var(--r-full); border: 0; background: transparent; color: var(--f-text); display: grid; place-items: center; cursor: pointer; transition: background .15s; flex-shrink: 0; -webkit-tap-highlight-color: transparent; } .pwa-app .f-icon-btn:hover { background: var(--f-surface-alt); } .pwa-app .f-icon-btn:focus-visible { outline: 0; box-shadow: var(--f-ring); } .pwa-app .f-icon-btn .ph { font-size: 22px; color: var(--f-text-muted); } /* Floating action button — absolutely positioned by the view. */ .pwa-app .f-fab { width: 56px; height: 56px; border-radius: var(--r-full); background: var(--f-accent); color: var(--f-accent-on); border: 0; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 16px rgba(90,26,36,.35), 0 2px 4px rgba(90,26,36,.2); transition: transform .1s; -webkit-tap-highlight-color: transparent; } .dark .pwa-app .f-fab { box-shadow: 0 6px 16px rgba(0,0,0,.6); } .pwa-app .f-fab:active { transform: scale(.95); } .pwa-app .f-fab .ph { font-size: 26px; } /* ---------------------------------------------------------------------------- * Cards * ---------------------------------------------------------------------------- */ .pwa-app .f-card { background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--r-lg); padding: 14px 16px; box-shadow: var(--f-shadow-sm); } .pwa-app .f-card + .f-card { margin-top: 10px; } .pwa-app .f-card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .pwa-app .f-card-header h3 { margin: 0; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--f-text-subtle); } .pwa-app .f-card-header .ph { font-size: 18px; color: var(--f-text-subtle); } .pwa-app .f-card-header .f-card-spacer { flex: 1; } /* ---------------------------------------------------------------------------- * Form controls — no padding shift on focus (box-shadow ring instead). * ---------------------------------------------------------------------------- */ .pwa-app .f-input, .pwa-app .f-select, .pwa-app .f-textarea { width: 100%; padding: 0 14px; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--r-md); color: var(--f-text); font: 500 14px/1 'Inter', sans-serif; transition: border-color .15s, box-shadow .15s; -webkit-appearance: none; appearance: none; } .pwa-app .f-input, .pwa-app .f-select { height: 44px; } .pwa-app .f-textarea { padding: 10px 14px; min-height: 72px; line-height: 1.4; resize: vertical; } .pwa-app .f-input::placeholder, .pwa-app .f-textarea::placeholder { color: var(--f-text-placeholder); } .pwa-app .f-input:hover, .pwa-app .f-select:hover, .pwa-app .f-textarea:hover { border-color: var(--f-border-strong); } .pwa-app .f-input:focus, .pwa-app .f-select:focus, .pwa-app .f-textarea:focus { outline: 0; border-color: var(--f-accent); box-shadow: var(--f-ring); } .pwa-app .f-input[disabled], .pwa-app .f-select[disabled], .pwa-app .f-textarea[disabled] { opacity: .55; cursor: not-allowed; } .pwa-app .f-label { display: block; font-size: 12px; font-weight: 500; color: var(--f-text-muted); margin-bottom: 6px; } .pwa-app .f-helper { font-size: 11.5px; color: var(--f-text-subtle); margin-top: 5px; } .pwa-app .f-error { font-size: 11.5px; color: var(--f-danger-text); margin-top: 5px; } /* ---------------------------------------------------------------------------- * Segmented control (used by tabs inside views, theme switcher, etc). * ---------------------------------------------------------------------------- */ .pwa-app .f-seg { display: inline-flex; background: var(--f-surface-alt); border: 1px solid var(--f-border); border-radius: var(--r-md); padding: 3px; gap: 2px; width: 100%; } .pwa-app .f-seg > button { flex: 1; height: 36px; border: 0; background: transparent; color: var(--f-text-muted); font: 500 12.5px/1 'Inter', sans-serif; cursor: pointer; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; gap: 6px; -webkit-tap-highlight-color: transparent; } .pwa-app .f-seg > button.is-active, .pwa-app .f-seg > button[aria-selected="true"] { background: var(--f-surface); color: var(--f-text); box-shadow: var(--f-shadow-sm); } .pwa-app .f-seg > button .ph { font-size: 16px; } /* Badges определены в components.css (.f-badge, .f-badge-{xs,sm,md}, * .f-badge-{soft,solid}.f-badge-{tone}). Дубликат здесь перебивал size-варианты * xs/sm, из-за чего бейджи на Dashboard-KPI визуально становились больше * задуманного. См. renderBadge() в frontend/js/components/Badge.js. */ /* ---------------------------------------------------------------------------- * Avatars * ---------------------------------------------------------------------------- */ .pwa-app .f-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--f-accent-soft); color: var(--f-accent-text); font-weight: 600; font-size: 14px; flex-shrink: 0; overflow: hidden; } .pwa-app .f-avatar img { width: 100%; height: 100%; object-fit: cover; } .pwa-app .f-avatar-sm { width: 28px; height: 28px; font-size: 11px; } .pwa-app .f-avatar-lg { width: 56px; height: 56px; font-size: 20px; } .pwa-app .f-avatar-xl { width: 80px; height: 80px; font-size: 28px; } /* ---------------------------------------------------------------------------- * Empty state — unified placeholder for lists with no data. * ---------------------------------------------------------------------------- */ .pwa-app .f-empty { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 48px 24px; gap: 6px; } .pwa-app .f-empty-icon { width: 56px; height: 56px; border-radius: var(--r-full); background: var(--f-surface-alt); display: grid; place-items: center; margin-bottom: 8px; } .pwa-app .f-empty-icon .ph { font-size: 28px; color: var(--f-text-subtle); } .pwa-app .f-empty-title { margin: 0; font-size: 15px; font-weight: 600; color: var(--f-text); } .pwa-app .f-empty-text { margin: 0; font-size: 13px; color: var(--f-text-muted); max-width: 280px; line-height: 1.5; } .pwa-app .f-empty .f-btn { margin-top: 16px; } /* ---------------------------------------------------------------------------- * Bottom tab bar (shared between StaffPortal and Expense). * Usage: * * ---------------------------------------------------------------------------- */ .pwa-app .f-tab-bar { background: var(--f-surface); border-top: 1px solid var(--f-divider); padding: 8px 4px calc(max(env(safe-area-inset-bottom, 0px), 12px) - 4px); display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; box-shadow: 0 -4px 16px rgba(20,15,10,.04); } .dark .pwa-app .f-tab-bar { box-shadow: 0 -4px 16px rgba(0,0,0,.3); } .pwa-app .f-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 6px 2px; border-radius: var(--r-md); color: var(--f-text-muted); font-size: 10.5px; font-weight: 500; text-decoration: none; transition: color .15s, background .15s; min-height: 52px; position: relative; cursor: pointer; border: 0; background: transparent; -webkit-tap-highlight-color: transparent; } .pwa-app .f-tab .ph { font-size: 22px; font-variation-settings: 'FILL' 0; } .pwa-app .f-tab.is-active { color: var(--f-accent-text); } .pwa-app .f-tab.is-active .ph { font-variation-settings: 'FILL' 1; } .pwa-app .f-tab.is-active::before { content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%); width: 24px; height: 3px; background: var(--f-accent); border-radius: 0 0 3px 3px; } .pwa-app .f-tab:active { background: var(--f-surface-alt); } .pwa-app .f-tab .f-tab-badge { position: absolute; top: 4px; right: calc(50% - 18px); min-width: 16px; height: 16px; padding: 0 4px; background: var(--f-accent); color: var(--f-accent-on); border-radius: var(--r-full); font-size: 10px; font-weight: 700; display: grid; place-items: center; border: 2px solid var(--f-surface); } /* ---------------------------------------------------------------------------- * App header (sticky top bar for PWA views). * ---------------------------------------------------------------------------- */ .pwa-app .f-app-header { background: var(--f-surface); border-bottom: 1px solid var(--f-divider); padding: max(env(safe-area-inset-top, 0px), 44px) 16px 10px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; } .pwa-app .f-app-header h1 { margin: 0; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--f-text); } .pwa-app .f-app-header .f-app-subtitle { color: var(--f-text-muted); font-size: 12px; margin-top: 1px; } /* ---------------------------------------------------------------------------- * Bottom sheet / modal — reused for request creation, expense entry, etc. * ---------------------------------------------------------------------------- */ .pwa-app .f-sheet-scrim { position: fixed; inset: 0; background: rgba(20,15,10,.5); z-index: 200; display: flex; align-items: flex-end; animation: f-sheet-fade-in .2s ease-out; } @keyframes f-sheet-fade-in { from { opacity: 0; } to { opacity: 1; } } .pwa-app .f-sheet { width: 100%; background: var(--f-surface); border-radius: 22px 22px 0 0; padding: 12px 16px calc(max(env(safe-area-inset-bottom, 0px), 16px)); max-height: 88%; display: flex; flex-direction: column; overflow: hidden; animation: f-sheet-slide-up .3s cubic-bezier(.2,.8,.2,1); } @keyframes f-sheet-slide-up { from { transform: translateY(100%); } to { transform: translateY(0); } } .pwa-app .f-sheet-grip { width: 40px; height: 4px; background: var(--f-border-strong); border-radius: 3px; margin: 0 auto 12px; flex-shrink: 0; } .pwa-app .f-sheet h2 { margin: 0 0 4px; font-size: 19px; font-weight: 600; letter-spacing: -.01em; color: var(--f-text); } .pwa-app .f-sheet-subtitle { color: var(--f-text-muted); font-size: 13px; margin-bottom: 16px; } .pwa-app .f-sheet-body { overflow-y: auto; padding-bottom: 8px; flex: 1; scrollbar-width: none; } .pwa-app .f-sheet-body::-webkit-scrollbar { display: none; } .pwa-app .f-sheet-footer { display: flex; gap: 10px; padding-top: 12px; border-top: 1px solid var(--f-divider); flex-shrink: 0; } .pwa-app .f-sheet-footer .f-btn { flex: 1; } /* ============================================================================ * Legacy bridge — StaffPortal glass header/nav override. * Existing .sp-glass-header/.sp-glass-nav rules in style.css set MD3 tokens * and win by specificity. We redirect them to v2 tokens so the shell looks * right without ripping the classes out (they're still used for scroll * elevation: .sp-header-elevated). * Will be removed in commit 7 when .sp-glass-* classes are dropped. * ============================================================================ */ .pwa-app.staff-portal .sp-glass-header { background: var(--f-surface) !important; border-bottom: 1px solid var(--f-divider); height: auto; } .pwa-app.staff-portal .sp-glass-header.sp-header-elevated { background: var(--f-surface-alt) !important; box-shadow: var(--f-shadow-sm); } .pwa-app.staff-portal .sp-glass-nav { background: var(--f-surface) !important; border-top: 1px solid var(--f-divider); height: auto !important; padding-bottom: calc(max(env(safe-area-inset-bottom, 0px), 12px) - 4px); } /* Neutralise the old MD3 nav-item dot so our .f-tab.is-active indicator wins */ .pwa-app.staff-portal .sp-nav-item { color: inherit; } .pwa-app.staff-portal .sp-nav-icon-wrap { width: auto; height: auto; background: transparent !important; border-radius: 0; } /* Staff-portal body background + text colour, no longer inherited from MD3. * NB: .pwa-app + .staff-portal лежат на ОДНОМ div (см. StaffPortalView.js), * поэтому compound-selector без пробела. */ .pwa-app.staff-portal, .pwa-app .staff-portal { background: var(--f-bg); color: var(--f-text); } .pwa-app.staff-portal .sp-main-content { padding-bottom: 96px; /* clearance for fixed tab-bar */ } /* ---------------------------------------------------------------------------- * ExpenseView legacy bridge — old .exp-glass-*/.pwa-app .exp-nav-item/.exp-card rules * in style.css set blue glass + Manrope vars. Redirect them to v2 tokens. * ---------------------------------------------------------------------------- */ .expense-app { background: var(--f-bg) !important; color: var(--f-text); font-family: 'Inter', -apple-system, sans-serif; } .pwa-app .expense-app .exp-glass-header { background: var(--f-surface) !important; border-bottom: 1px solid var(--f-divider) !important; backdrop-filter: none; } .pwa-app .expense-app .exp-glass-nav { background: var(--f-surface) !important; border-top: 1px solid var(--f-divider) !important; backdrop-filter: none; } /* Override old .exp-nav-item MD3-ish styling — let .f-tab handle it. * .exp-nav-item may still be on the buttons via style.css, but new markup * uses .f-tab. Neutralise to avoid double-padding. */ .pwa-app .expense-app .exp-nav-item { color: inherit; background: transparent; } /* Cards that still carry .exp-card or .exp-card-low via legacy class * mixing get the v2 look. */ .pwa-app .expense-app .exp-card, .pwa-app .expense-app .exp-card-low { background: var(--f-surface) !important; border: 1px solid var(--f-border) !important; border-radius: var(--r-lg); box-shadow: var(--f-shadow-sm) !important; } /* Old exp-safe class → simple bottom safe-area helper. */ .pwa-app .expense-app .exp-safe { padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px); } /* ============================================================================ * PWA MONOCHROME PALETTE OVERRIDE * * Админка остаётся с бордовым брендом (--f-accent: #5a1a24). PWA для * сотрудников переопределяет токены на тёплую графитовую палитру — * premium-feel, без розовых оттенков. Применяется через scope .pwa-app, * остальная часть продукта не затрагивается. * ============================================================================ */ .pwa-app { /* Canvas — тёплый stone, не плоский белый */ --f-bg: #f3f2ee; --f-surface: #fbfaf7; --f-surface-alt: #ecebe5; --f-surface-sunken: #e5e3dc; --f-border: #dcd8ce; --f-border-strong: #c4bfb2; --f-divider: #e7e4db; /* Text — графит с тёплым уклоном */ --f-text: #1a1815; --f-text-muted: #5e594f; --f-text-subtle: #8a8579; --f-text-placeholder: #aea99c; /* Accent — espresso graphite вместо бордового */ --f-accent: #1a1815; --f-accent-hover: #2c2925; --f-accent-soft: #e8e6df; --f-accent-soft-hover: #dedbd1; --f-accent-text: #1a1815; --f-accent-on: #ffffff; /* Semantic — приглушены, не кричащие */ --f-success: #2d7a4f; --f-success-soft: #e4eee6; --f-warning: #8a6a1a; --f-warning-soft: #f2ead1; --f-danger: #a83028; --f-danger-soft: #f2e2e0; --f-info: #2f6080; --f-info-soft: #e0e9f0; /* Shadows — чуть глубже и тише, чтобы surface «всплывал» */ --f-shadow-sm: 0 1px 2px rgba(26,24,21,.05), 0 1px 1px rgba(26,24,21,.03); --f-shadow: 0 1px 3px rgba(26,24,21,.06), 0 6px 16px rgba(26,24,21,.05); --f-shadow-md: 0 4px 12px rgba(26,24,21,.07), 0 2px 4px rgba(26,24,21,.04); --f-shadow-lg: 0 6px 12px rgba(26,24,21,.08), 0 20px 48px rgba(26,24,21,.1); --f-ring: 0 0 0 3px rgba(26,24,21,.12); } .dark .pwa-app { --f-bg: #0d0c0a; --f-surface: #161512; --f-surface-alt: #1d1c18; --f-surface-sunken: #0a0907; --f-border: #27251f; --f-border-strong: #37342d; --f-divider: #1f1d18; --f-text: #ededea; --f-text-muted: #9b968c; --f-text-subtle: #6e6a60; --f-text-placeholder: #48463f; --f-accent: #e8e7e4; --f-accent-hover: #f1f0ed; --f-accent-soft: #1f1d18; --f-accent-soft-hover: #2a2822; --f-accent-text: #f1f0ed; --f-accent-on: #111110; --f-success: #5aa77a; --f-success-soft: #152620; --f-warning: #d6a452; --f-warning-soft: #241b12; --f-danger: #d8726a; --f-danger-soft: #281614; --f-info: #8ab4d4; --f-info-soft: #11202c; --f-shadow-sm: 0 1px 2px rgba(0,0,0,.35); --f-shadow: 0 1px 3px rgba(0,0,0,.4), 0 6px 16px rgba(0,0,0,.3); --f-shadow-md: 0 4px 12px rgba(0,0,0,.5); --f-shadow-lg: 0 6px 16px rgba(0,0,0,.5), 0 20px 48px rgba(0,0,0,.55); --f-ring: 0 0 0 3px rgba(232,231,228,.18); } /* ---------------------------------------------------------------------------- * MD3 token override — staff-portal legacy CSS в style.css (`.bg-slate-*` * маппинги, MD3-primary, бэкграунды) цепляется за --md3-*; проксируем их * на графитовые --f-*. * * ВАЖНО: у StaffPortal классы .pwa-app и .staff-portal стоят на ОДНОМ * элементе (см. StaffPortalView.js:211/322/503), поэтому нужен compound * селектор .pwa-app.staff-portal, а не descendant .pwa-app .staff-portal. * Оставляем оба на случай, если в каких-то экранах .staff-portal ещё * окажется вложенным. * ---------------------------------------------------------------------------- */ .pwa-app.staff-portal, .pwa-app .staff-portal { --md3-primary: var(--f-accent); --md3-on-primary: var(--f-accent-on); --md3-primary-container: var(--f-accent-soft); --md3-on-primary-container: var(--f-accent-text); --md3-secondary: var(--f-text-muted); --md3-on-secondary: var(--f-surface); --md3-secondary-container: var(--f-surface-alt); --md3-on-secondary-container: var(--f-text); --md3-surface: var(--f-bg); --md3-surface-dim: var(--f-surface-alt); --md3-surface-container-lowest: var(--f-surface); --md3-surface-container-low: var(--f-surface); --md3-surface-container: var(--f-surface-alt); --md3-surface-container-high: var(--f-surface-sunken); --md3-surface-container-highest: var(--f-surface-sunken); --md3-on-surface: var(--f-text); --md3-on-surface-variant: var(--f-text-muted); --md3-outline: var(--f-border-strong); --md3-outline-variant: var(--f-divider); --md3-inverse-surface: var(--f-text); --md3-inverse-on-surface: var(--f-surface); --md3-error: var(--f-danger); --md3-on-error: #ffffff; --md3-error-container: var(--f-danger-soft); background-color: var(--f-bg); color: var(--f-text); font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------------------- * Count badges — used in Stop/Go-list cards and nav badges. * Единый вид для count=0 и count>0, чтобы layout не прыгал. * ---------------------------------------------------------------------------- */ .pwa-app .sp-count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 8px; border-radius: var(--r-pill); font: 700 12px/1 'Inter', -apple-system, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1; transition: background .2s, color .2s, transform .2s; } .pwa-app .sp-count-badge--danger { background: var(--f-danger); color: #fff; } .pwa-app .sp-count-badge--success { background: var(--f-success); color: #fff; } .pwa-app .sp-count-badge--muted { background: var(--f-surface-alt); color: var(--f-text-subtle); font-weight: 600; } /* ---------------------------------------------------------------------------- * Header logo — бордовый на light, кремовый на dark. Без подложки, просто * контурный знак. Aspect ratio оригинала 362×400 ≈ 0.9:1. * ---------------------------------------------------------------------------- */ .pwa-app .sp-header-logo { height: 32px; width: auto; display: block; flex-shrink: 0; object-fit: contain; user-select: none; -webkit-user-drag: none; } .pwa-app .sp-header-logo--dark { display: none; } .dark .pwa-app .sp-header-logo--light { display: none; } .dark .pwa-app .sp-header-logo--dark { display: block; } /* ---------------------------------------------------------------------------- * Home: Stop/Go quick buttons — фиксируем геометрию так, чтобы ни иконка, * ни бейдж (0 … 999+) не меняли размер контейнера. * ---------------------------------------------------------------------------- */ .pwa-app .sp-home-quick-btn { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 12px 14px; background: var(--f-surface); border: 1px solid var(--f-border); border-radius: var(--r-lg); box-shadow: var(--f-shadow-sm); color: var(--f-text); font: 600 14px/1.1 'Inter', -apple-system, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .18s cubic-bezier(.22,1,.36,1), box-shadow .2s, border-color .2s; } .pwa-app .sp-home-quick-btn:active { transform: scale(.985); } .pwa-app .sp-home-quick-btn__icon { width: 20px; height: 20px; display: inline-flex; } .pwa-app .sp-home-quick-btn__label { text-align: left; color: var(--f-text); } .pwa-app .sp-home-quick-btn__badge { display: inline-flex; } /* ---------------------------------------------------------------------------- * Checklist: крупные Да/Нет кнопки (48pt), Да справа (правая рука). * ---------------------------------------------------------------------------- */ .pwa-app .sp-cl-btn { flex: 1; min-height: 48px; padding: 0 14px; border-radius: var(--r-lg); border: 1.5px solid var(--f-border); background: var(--f-surface); color: var(--f-text-muted); font: 600 15px/1 'Inter', -apple-system, sans-serif; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .18s, color .18s, border-color .18s, transform .12s cubic-bezier(.22,1,.36,1); } .pwa-app .sp-cl-btn:active { transform: scale(.97); } .pwa-app .sp-cl-btn--yes.is-active { background: var(--f-success); border-color: var(--f-success); color: #fff; } .pwa-app .sp-cl-btn--no.is-active { background: var(--f-danger); border-color: var(--f-danger); color: #fff; } .pwa-app .sp-cl-photo-btn { position: relative; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-lg); background: var(--f-surface-alt); border: 1px solid var(--f-border); cursor: pointer; -webkit-tap-highlight-color: transparent; flex-shrink: 0; transition: background .18s, transform .12s cubic-bezier(.22,1,.36,1); } .pwa-app .sp-cl-photo-btn:active { transform: scale(.95); } .pwa-app .sp-cl-photo-btn__req { position: absolute; top: 4px; right: 6px; color: var(--f-danger); font-size: 14px; font-weight: 700; line-height: 1; } /* ============================================================================ * PWA ANIMATIONS — плавные переходы, respects prefers-reduced-motion. * ============================================================================ */ /* Tab content — fade-slide при каждом _switchTab */ @keyframes sp-tab-enter { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } .pwa-app #sp-content > * { animation: sp-tab-enter .22s cubic-bezier(.22, 1, .36, 1); } /* Popovers / modals — scale+fade */ @keyframes sp-pop-in { from { opacity: 0; transform: scale(.96) translateY(4px); } to { opacity: 1; transform: scale(1) translateY(0); } } .pwa-app .portal-more-popover:not(.hidden) { animation: sp-pop-in .18s cubic-bezier(.22, 1, .36, 1); transform-origin: bottom right; } /* Bottom-nav tabs — smooth active-state + ripple уже есть через .sp-ripple */ .pwa-app .f-tab { transition: color .2s, background .2s; } .pwa-app .f-tab.is-active, .pwa-app .f-tab.is-active .ph, .pwa-app .f-tab.is-active span { transition: color .2s, opacity .2s; } /* Cards — lift on press */ .pwa-app .f-card { transition: transform .18s cubic-bezier(.22, 1, .36, 1), box-shadow .2s ease, border-color .2s ease; } .pwa-app button.f-card:active, .pwa-app .f-card.is-pressable:active { transform: scale(.985); } /* Buttons — уже имеют transition, усилим лёгким bounce */ .pwa-app .f-btn-primary, .pwa-app .f-btn-secondary, .pwa-app .f-btn-tonal, .pwa-app .f-btn-ghost, .pwa-app .f-btn-danger { transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .12s cubic-bezier(.22, 1, .36, 1); } /* Skeleton shimmer — для Loading состояний */ @keyframes sp-shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } .pwa-app .sp-skeleton { background: linear-gradient( 90deg, var(--f-surface-alt) 0%, var(--f-surface-sunken) 50%, var(--f-surface-alt) 100% ); background-size: 200% 100%; animation: sp-shimmer 1.4s ease-in-out infinite; border-radius: var(--r-md); } /* Toasts / alerts — fade-in */ @keyframes sp-fade-in { from { opacity: 0; } to { opacity: 1; } } .pwa-app .sp-fade-in { animation: sp-fade-in .2s ease-out; } /* Respect user preference — kill animations entirely */ @media (prefers-reduced-motion: reduce) { .pwa-app *, .pwa-app *::before, .pwa-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }