@font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 600; src: url("vendor/fonts/Manrope-600-cyrillic.e58febde317b.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 600; src: url("vendor/fonts/Manrope-600-latin.938c6e8019b6.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 700; src: url("vendor/fonts/Manrope-700-cyrillic.e58febde317b.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 700; src: url("vendor/fonts/Manrope-700-latin.938c6e8019b6.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 800; src: url("vendor/fonts/Manrope-800-cyrillic.e58febde317b.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: "Manrope"; font-style: normal; font-display: swap; font-weight: 800; src: url("vendor/fonts/Manrope-800-latin.938c6e8019b6.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* StaffControl PWA — сотрудник. Две темы через data-theme на . */ :root, [data-theme="dark"] { --bg: #0B1220; --bg-soft: #0F1A2E; --card: #131C2E; --card-2: #1B2740; --text: #F1F5F9; --muted: #94A3B8; --border: #243247; --primary: #16A34A; --primary-2: #22C55E; --in: #22C55E; --out: #F59E0B; --ok: #22C55E; --warn: #FBBF24; --danger: #F87171; --accent: #22C55E; --destructive: #F87171; --ring: rgba(34, 197, 94, 0.45); --shadow: 0 10px 34px rgba(0,0,0,.42); } [data-theme="light"] { --bg: #F4F6FB; --bg-soft: #FFFFFF; --card: #FFFFFF; --card-2: #F1F5F9; --text: #0B1220; --muted: #64748B; --border: #E2E8F0; --primary: #15803D; --primary-2: #16A34A; --in: #16A34A; --out: #D97706; --ok: #15803D; --warn: #B45309; --danger: #DC2626; --accent: #16A34A; --destructive: #DC2626; --ring: rgba(21, 128, 61, 0.35); --shadow: 0 10px 30px rgba(11,23,42,.10); } * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } /* iOS: убирает серую вспышку при тапе на всём документе. */ html { -webkit-tap-highlight-color: transparent; } html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; transition: background .25s ease, color .25s ease; /* iOS: убирает резиновое оттягивание документа — главный признак «это сайт». Именно `none`, а не `contain`: `contain` гасит только scroll chaining, локальный bounce остаётся. Модель скролла НЕ меняем: свой pull-to-refresh (initPTR в app.js) работает на touch-событиях с preventDefault и от этого не страдает, а фиксированный шелл ломает поле ввода под клавиатурой. */ overscroll-behavior-y: none; } /* Долгий тап по УПРАВЛЯЮЩИМ элементам не должен выделять текст и поднимать меню «Скопировать/Найти/Preview ссылки» — это главный признак «это сайт». Расширенный список охватывает все интерактивные элементы PWA и кабинета владельца. input/textarea/[contenteditable] явно восстанавливают выделение ниже. */ button, .btn, .brand, .brandmark, .chip, .seg__btn, .quick__btn, .apphead, .stat__l, .ios-steps, .sheet__title, .tabbar, .more-link, [role="button"], label, a, .sfield, .sfield--link, .sbtn, .geo-btn, .obtn, .sc-select, .sc-select__display, .sc-select2, .sc-select2__trigger, .sc-select2__opt, .okpi__card, .dnav, .ohead__act, .obranch-chip { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; } /* Поля ввода — выделение текста ОБЯЗАТЕЛЬНО сохранять. */ input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; } .app { min-height: 100dvh; max-width: 480px; margin: 0 auto; /* safe-area-inset-top = 0 при status-bar-style: default (контент не заезжает под статус-бар) — это запас на случай перехода на black-translucent. */ padding: calc(22px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; } .screen { display: none; flex-direction: column; gap: 15px; flex: 1; } .screen.is-active { display: flex; animation: scr-fade .26s ease; } /* Под-экраны заезжают слайдом справа (нативное «вглубь»). */ .screen.is-active.is-sub { animation: scr-fwd .3s cubic-bezier(.22, .7, .2, 1); } @keyframes scr-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes scr-fwd { from { opacity: 0; transform: translateX(26px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .screen.is-active, .screen.is-active.is-sub { animation: none; } } .center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px; } h1 { font-size: 27px; margin: 0; } h2 { font-size: 22px; margin: 4px 0 0; } .lead { color: var(--muted); font-size: 15px; line-height: 1.5; margin: 0; } .muted { color: var(--muted); font-size: 14px; } .brand { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 10px; } /* Theme toggle */ .theme-fab { position: fixed; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 50; width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow); } [data-theme="dark"] .ico-sun { display: block; } [data-theme="dark"] .ico-moon { display: none; } [data-theme="light"] .ico-sun { display: none; } [data-theme="light"] .ico-moon { display: block; } .field { display: flex; flex-direction: column; gap: 8px; } .field label { font-size: 14px; color: var(--muted); } .field input, .field select, .field textarea { padding: 14px 16px; border-radius: 14px; border: 1px solid var(--border); background: var(--card-2); color: var(--text); font-size: 16px; font-family: inherit; width: 100%; box-sizing: border-box; transition: border-color .15s ease, box-shadow .15s ease; } .field textarea { resize: vertical; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--primary-2); box-shadow: 0 0 0 3px var(--ring); } /* Заявки */ .lv-item { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); } .lv-item__top { display: flex; align-items: center; gap: 8px; } .lv-item__type { flex: 1; font-weight: 600; } .lv-item__dates { font-size: 13px; color: var(--muted); margin-top: 3px; } .lv-st { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; } .lv-st--approved { background: rgba(16,185,129,.16); color: var(--ok); } .lv-st--rejected { background: rgba(239,68,68,.16); color: var(--danger); } .lv-st--pending { background: rgba(234,179,8,.16); color: var(--warn); } .check { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.4; } .check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--primary-2); } /* Единый премиум-переключатель (.sw) — общий для всех экранов приложения (настройки, филиалы). Раньше жил только инлайн в settings.html. */ .sw { position: relative; display: inline-block; width: 50px; height: 30px; flex: 0 0 auto; } .sw input { position: absolute; opacity: 0; width: 0; height: 0; } .sw__t { position: absolute; inset: 0; cursor: pointer; background: var(--card-2); border: 1px solid var(--border); border-radius: 999px; transition: .2s; } .sw__t::before { content: ""; position: absolute; height: 24px; width: 24px; left: 3px; top: 2px; background: #fff; border-radius: 50%; transition: .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); } .sw input:checked + .sw__t { background: var(--primary); border-color: var(--primary); } .sw input:checked + .sw__t::before { transform: translateX(20px); } .sw input:focus-visible + .sw__t { outline: 2px solid var(--primary); outline-offset: 2px; } .sw input:disabled + .sw__t { opacity: .45; cursor: not-allowed; } .owner-link { margin-top: auto; text-align: center; color: var(--muted); font-size: 14px; text-decoration: none; padding-top: 14px; } .owner-link:hover { color: var(--primary-2); } /* Входные экраны (онбординг сотрудника, вход владельца): цельная группа по центру по вертикали — без «пустого низа». */ .screen--entry { justify-content: center; gap: 16px; } .screen--entry .brand { margin-top: 0; } .screen--entry .owner-link { margin-top: 8px; padding-top: 8px; } .screen--entry .lead { text-align: center; } /* Объяснение непроизвольного выхода: спокойный информационный блок, не «ошибка» — человек ничего не сделал не так, ему просто надо ввести код заново. */ .notice { margin: 0; padding: 12px 14px; border-radius: 14px; text-align: left; font-size: 14px; line-height: 1.45; color: var(--text); background: var(--card-2); border: 1px solid var(--border); border-left: 3px solid var(--warn); } /* На широком экране (компьютер) входные экраны — аккуратной карточкой по центру, а не «плавающими» элементами в пустоте. На телефоне остаётся на весь экран. */ @media (min-width: 600px) { .screen--entry { flex: 0 0 auto; align-self: center; width: 100%; max-width: 400px; margin: auto; background: var(--card); border: 1px solid var(--border); border-radius: 24px; padding: 34px 28px; box-shadow: var(--shadow); } } .btn { padding: 15px 18px; border: 0; border-radius: 16px; font-weight: 800; font-size: 16px; font-family: inherit; color: #fff; cursor: pointer; width: 100%; transition: transform .12s ease, box-shadow .18s ease, filter .18s ease; } a.btn { display: block; text-align: center; text-decoration: none; } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: .45; cursor: not-allowed; } .btn-primary { background: linear-gradient(135deg, var(--primary-2), var(--primary)); box-shadow: 0 8px 22px rgba(22,163,74,.35), inset 0 1px 0 rgba(255,255,255,.14); } .btn-primary:hover { filter: brightness(1.05); } .btn-ghost { background: var(--card); color: var(--text); font-weight: 700; border: 1px solid var(--border); } .btn-in { background: linear-gradient(135deg, #22C55E, #16A34A); } .btn-out { background: linear-gradient(135deg, #F59E0B, #D97706); } .btn.big { padding: 20px; font-size: 18px; } /* Home header */ .apphead { display: flex; align-items: center; justify-content: space-between; margin-top: 6px; } .apphead__user { display: flex; align-items: center; gap: 12px; min-width: 0; } .apphead__user > div { min-width: 0; } .apphead__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .apphead__actions { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; } .apphead__hi { font-size: 13px; color: var(--muted); } .apphead__name { font-size: 18px; font-weight: 700; } .bell { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: var(--text); display: flex; align-items: center; justify-content: center; cursor: pointer; } .bell__badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; } .ntf { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); } .ntf--unread { border-color: var(--primary-2); background: var(--card-2); } .ntf__ic { flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--card-2); color: var(--muted); } .ntf--leave .ntf__ic { color: #0ea5e9; background: rgba(14,165,233,.14); } .ntf--task .ntf__ic { color: var(--primary-2); background: rgba(34,197,94,.14); } .ntf--ok .ntf__ic { color: var(--ok); background: rgba(34,197,94,.14); } .ntf--info .ntf__ic { color: var(--warn); background: rgba(251,191,36,.14); } .ntf__main { flex: 1; min-width: 0; } .ntf__title { font-weight: 700; font-size: 15px; } .ntf__body { font-size: 14px; color: var(--muted); margin-top: 3px; } .ntf__time { font-size: 12px; color: var(--muted); margin-top: 5px; } /* Пустое состояние (уведомления/списки). */ .empty { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 20px; text-align: center; color: var(--muted); } .empty svg { opacity: .45; } .empty .muted { font-size: 14px; } .avatar { width: 46px; height: 46px; border-radius: 50%; background: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 700; color: #fff; text-transform: uppercase; } .card { background: var(--card); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); } /* Today status card */ .status-card { padding: 20px; text-align: center; position: relative; } .status-card__badge { display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; margin-bottom: 8px; } .status-card__badge--ok { background: rgba(22,163,74,.16); color: var(--ok); } .status-card__badge--late { background: rgba(251,191,36,.16); color: var(--warn); } .status-card__badge--leave { background: rgba(14,165,233,.16); color: #0ea5e9; } .status-card__date { font-size: 12.5px; letter-spacing: .2px; margin-bottom: 6px; text-transform: capitalize; } .status-card__label { font-size: 14px; color: var(--muted); } .status-card__time { font-size: 34px; font-weight: 800; letter-spacing: -1px; margin: 2px 0; } .status-card__sub { font-size: 14px; } .chips { display: flex; gap: 8px; flex-wrap: wrap; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border); font-size: 13px; color: var(--muted); } .chip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); } .chip--ok { color: var(--ok); } .chip--ok .chip__dot { background: var(--ok); } .chip--bad { color: var(--danger); } .chip--bad .chip__dot { background: var(--danger); } .stats-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .stat { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 8px; text-align: center; } .stat__v { font-size: 22px; font-weight: 800; } .stat__v--warn { color: var(--warn); } .stat__v--ok { color: var(--ok); } .stat__l { font-size: 11px; color: var(--muted); margin-top: 2px; } .section-title { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-top: 4px; } /* Быстрые действия на главном (сотрудник): зарплата / заявки — пара плиток. */ .quick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .quick__btn { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 10px; background: var(--card); border: 1px solid var(--border); border-radius: 16px; color: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: transform .06s ease; } .quick__btn svg { color: var(--primary-2); } .quick__btn:active { transform: scale(.98); } .quick__badge { position: absolute; top: 8px; right: 10px; min-width: 18px; height: 18px; padding: 0 5px; display: flex; align-items: center; justify-content: center; border-radius: 999px; font-size: 11px; font-weight: 800; color: #fff; background: var(--danger); } .history { display: flex; flex-direction: column; gap: 8px; } .hrow { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; } .hrow__day { width: 42px; text-align: center; } .hrow__wd { font-size: 11px; color: var(--muted); } .hrow__dt { font-size: 14px; font-weight: 600; } .hrow__mid { flex: 1; min-width: 0; } .hrow__st { font-size: 14px; font-weight: 600; } .hrow__tm { font-size: 12px; color: var(--muted); } .hrow__badge { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 10px; } .st-present { background: var(--in); } .st-late { background: var(--warn); } .st-absent { background: var(--danger); } .st-other { background: var(--muted); } /* --- Моя зарплата --- */ .ernnav { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; } .ernnav__btn { flex: 0 0 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: inherit; font-size: 20px; font-weight: 700; cursor: pointer; } .ernnav__btn:disabled { opacity: .35; cursor: default; } .ernnav__cur { flex: 1; text-align: center; font-weight: 800; font-size: 16px; } .ern-sum { text-align: center; } .ern-money__v { font-size: 30px; font-weight: 800; line-height: 1.1; color: var(--ok); } .ern-money__l { font-size: 13px; color: var(--muted); margin-top: 4px; } .ern-ded { margin-top: 8px; font-size: 13px; color: var(--warn); } .ern-noconf { font-size: 14px; padding: 6px 0; } .hrow__pay { flex: 0 0 auto; text-align: right; } .ern-row__pay { font-size: 14px; font-weight: 700; white-space: nowrap; } .ern-row__pay--zero { color: var(--muted); font-weight: 600; } /* Мини-график часов по дням */ .ec { margin-bottom: 12px; } .ec-bars { display: flex; align-items: flex-end; gap: 3px; height: 64px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 14px; } .ec-bar { flex: 1 1 0; min-width: 2px; border-radius: 3px 3px 0 0; background: var(--muted); } .ec-bar--present { background: var(--in); } .ec-bar--late { background: var(--warn); } .ec-bar--absent { background: var(--border); } .ec-cap { font-size: 11px; text-align: center; margin-top: 6px; } .camera { position: relative; aspect-ratio: 3/4; border-radius: 20px; overflow: hidden; background: #000; } .camera video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); } .camera-ring { position: absolute; inset: 12%; border: 3px dashed var(--ring); border-radius: 50%; pointer-events: none; } .error { color: var(--danger); background: rgba(239,68,68,.12); padding: 12px 14px; border-radius: 12px; font-size: 14px; margin: 0; } .result-icon { width: 96px; height: 96px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 52px; background: rgba(22,163,74,.2); color: var(--ok); animation: pop .4s ease; } .result-icon.bad { background: rgba(239,68,68,.2); color: var(--danger); } @keyframes pop { 0% { transform: scale(.5); opacity: 0; } 60% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } } .spinner { width: 44px; height: 44px; border-radius: 50%; border: 4px solid var(--border); border-top-color: var(--primary-2); animation: spin .9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Контраст статус-бейджей/чипов сотрудника в светлой теме (тёмный текст, читаемый фон). */ [data-theme="light"] .lv-st--approved { background: rgba(21,128,61,.15); color: var(--ok); } [data-theme="light"] .lv-st--rejected { background: rgba(220,38,38,.14); color: var(--danger); } [data-theme="light"] .lv-st--pending { background: rgba(180,83,9,.16); color: var(--warn); } [data-theme="light"] .status-card__badge--ok { background: rgba(21,128,61,.15); color: var(--ok); } [data-theme="light"] .status-card__badge--late { background: rgba(180,83,9,.16); color: var(--warn); } [data-theme="light"] .status-card__badge--leave { background: rgba(3,105,161,.14); color: #0369a1; } /* Видимый фокус для клавиатуры/switch-control (доступность). */ .btn:focus-visible, a.btn:focus-visible, .quick__btn:focus-visible, .owner-link:focus-visible, button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Manrope typography */ h1, h2, .ohead__org, .brand h1, .sethead__t b { font-family: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: -0.02em; } h1 { font-size: 28px; font-weight: 800; } h2 { font-size: 22px; font-weight: 800; } /* Брендмарка — иконка-тайл с прозрачными уголками, свитч по теме: тёмный тайл на тёмной теме, светлый — на светлой. */ .brandmark { display: inline-block; line-height: 0; } .brandmark__img { width: 104px; height: 104px; display: block; } .brandmark__img--light { display: none; } [data-theme="light"] .brandmark__img--dark { display: none; } [data-theme="light"] .brandmark__img--light { display: block; } .brand__mark--sm .brandmark__img { width: 66px; height: 66px; } .brand--hero { position: relative; align-items: center; } .brand--hero::before { content: ""; position: absolute; top: -18px; left: 50%; transform: translateX(-50%); width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle, rgba(34,197,94,.22), transparent 70%); filter: blur(8px); z-index: -1; animation: heroGlow 4s ease-in-out infinite alternate; } @keyframes heroGlow { from{opacity:.5} to{opacity:1} } @media (prefers-reduced-motion: reduce) { .brand--hero::before { animation: none; } } /* Кнопка выхода из аккаунта сотрудника — внизу главного, сдержанная. */ .btn-logout { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 8px; padding: 13px 16px; border: 1px solid var(--border); border-radius: 14px; background: transparent; color: var(--muted); font-family: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; transition: color .15s ease, border-color .15s ease, background .15s ease; } .btn-logout svg { opacity: .9; } .btn-logout:hover { color: var(--danger); border-color: var(--danger); } .btn-logout:active { transform: scale(.98); } .btn-logout:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* На главном экране кнопка темы живёт в шапке рядом с колокольчиком, поэтому плавающую .theme-fab прячем — иначе две кнопки налезают друг на друга. */ body[data-active-screen="home"] .theme-fab { display: none; } /* Кнопка в состоянии отправки. */ .btn.is-busy { cursor: progress; } /* Toast — всплывающее подтверждение действия. */ .toast { position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); z-index: 80; max-width: min(92vw, 440px); padding: 12px 18px; border-radius: 14px; font-size: 14px; font-weight: 700; background: var(--card); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .toast--show { opacity: 1; transform: translate(-50%, 0); } .toast--error { border-color: var(--danger); color: var(--danger); } @media (prefers-reduced-motion: reduce) { .toast { transition: none; } } /* ── Шапка → профиль (tappable) ─────────────────────────────── */ .apphead__user { cursor: pointer; border-radius: 12px; } .apphead__chev { color: var(--muted); opacity: .65; flex: 0 0 auto; margin-left: 2px; } /* ── «Показать всю историю» ─────────────────────────────────── */ .more-link { display: inline-block; width: 100%; text-align: center; padding: 10px; margin-top: 2px; background: transparent; border: 0; color: var(--primary-2); font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; } .more-link:active { opacity: .7; } /* ── Мой профиль ────────────────────────────────────────────── */ .avatar--lg { width: 84px; height: 84px; font-size: 34px; } .profile-hero { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; margin: 8px 0 4px; } .profile-hero__name { font-size: 22px; font-weight: 800; } .profile-hero__role { font-size: 14px; } .pf-list { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .pf-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; background: var(--card); } .pf-row__l { color: var(--muted); font-size: 14px; flex: 0 0 auto; } .pf-row__v { font-weight: 600; font-size: 14.5px; text-align: right; overflow-wrap: anywhere; } /* ── Segmented (неделя/месяц) ───────────────────────────────── */ .seg { display: flex; gap: 4px; padding: 4px; background: var(--card-2); border: 1px solid var(--border); border-radius: 14px; } .seg__btn { flex: 1; padding: 10px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; transition: background .15s ease, color .15s ease; } .seg__btn.is-active { background: var(--card); color: var(--text); box-shadow: var(--shadow); } /* ── Skeleton-загрузка ──────────────────────────────────────── */ .skel { background: linear-gradient(90deg, var(--card-2) 25%, var(--border) 37%, var(--card-2) 63%); background-size: 400% 100%; animation: shimmer 1.3s ease infinite; border-radius: 8px; } @keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } } .skel-row { display: flex; align-items: center; gap: 12px; padding: 11px 13px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; } .skel--dot { width: 42px; height: 36px; border-radius: 8px; flex: 0 0 42px; } .skel-row__mid { flex: 1; display: flex; flex-direction: column; gap: 6px; } .skel--line { height: 12px; width: 70%; } .skel--sm { width: 45%; height: 10px; } .skel--pill { width: 46px; height: 14px; border-radius: 999px; flex: 0 0 46px; } .skel--block { height: 118px; border-radius: 16px; } @media (prefers-reduced-motion: reduce) { .skel { animation: none; } } /* Ошибка загрузки подэкрана с кнопкой «Обновить» (вместо тупика). */ .loaderr { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 22px 0; text-align: center; } .loaderr__retry { width: auto; min-height: 44px; padding: 10px 22px; } /* ── Pull-to-refresh ────────────────────────────────────────── */ .screen[data-screen="home"] { position: relative; } .ptr { position: absolute; top: -46px; left: calc(50% - 18px); width: 36px; height: 36px; z-index: 5; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--card); border: 1px solid var(--border); box-shadow: var(--shadow); transition: transform .18s ease, opacity .18s ease, border-color .15s ease; /* По умолчанию полностью скрыт: раньше полагались только на top:-46px, но safe-area (чёлка) сдвигала контент вниз и вечно крутящийся спиннер выглядывал сверху («постоянная загрузка»). Показываем ТОЛЬКО во время реального жеста. */ opacity: 0; pointer-events: none; } .ptr.is-active { opacity: 1; } .ptr.is-ready { border-color: var(--primary-2); } .spinner--sm { width: 20px; height: 20px; border-width: 3px; } /* ── Статистика месяца в профиле ────────────────────────────── */ .pf-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } /* ── Диалог подтверждения (bottom-sheet) ────────────────────── */ .btn-danger { background: linear-gradient(135deg, #F87171, #DC2626); box-shadow: 0 8px 22px rgba(220,38,38,.3), inset 0 1px 0 rgba(255,255,255,.14); } .sheet-back { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(2,6,18,.55); opacity: 0; pointer-events: none; transition: opacity .2s ease; } .sheet-back.is-open { opacity: 1; pointer-events: auto; } /* Без этого атрибут hidden не работает: авторский `display: flex` выше перебивает браузерное правило [hidden]{display:none}, и лист остаётся в потоке, в tab-order и в дереве доступности (VoiceOver его читает). */ .sheet-back[hidden] { display: none; } .sheet { width: 100%; max-width: 480px; background: var(--bg-soft); border: 1px solid var(--border); border-radius: 22px 22px 0 0; padding: 22px 18px calc(20px + env(safe-area-inset-bottom)); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); transform: translateY(28px); transition: transform .24s cubic-bezier(.2, .7, .2, 1); } .sheet-back.is-open .sheet { transform: none; } .sheet__title { font-size: 18px; font-weight: 800; } .sheet__text { font-size: 14px; line-height: 1.5; margin-bottom: 4px; } @media (prefers-reduced-motion: reduce) { .sheet, .sheet-back { transition: none; } } /* ── Отмена заявки / тапабельные уведомления / версия ───────── */ .lv-cancel { margin-top: 10px; width: 100%; padding: 9px; border-radius: 10px; background: transparent; border: 1px solid var(--border); color: var(--danger); font-family: inherit; font-weight: 700; font-size: 13px; cursor: pointer; transition: border-color .15s ease, transform .06s ease; } .lv-cancel:hover { border-color: var(--danger); } .lv-cancel:active { transform: scale(.98); } .lv-decision { margin-top: 8px; padding: 8px 11px; border-radius: 10px; font-size: 13px; background: var(--card-2); } .lv-decision__l { display: block; font-weight: 700; } .lv-decision--approved .lv-decision__l { color: var(--ok); } .lv-decision--rejected .lv-decision__l { color: var(--danger); } .lv-decision__note { display: block; color: var(--muted); margin-top: 3px; line-height: 1.4; } /* Баннер-подсказка «Включите уведомления» на главной */ .notif-nudge { display:flex; align-items:center; gap:11px; padding:12px 13px; margin-bottom:12px; border-radius:15px; background:var(--card); border:1px solid var(--border); } .notif-nudge__ic { flex:0 0 38px; width:38px; height:38px; border-radius:11px; display:flex; align-items:center; justify-content:center; color:var(--primary-2); background:rgba(34,197,94,.14); } .notif-nudge__body { flex:1; min-width:0; } .notif-nudge__t { font-weight:700; font-size:14px; } .notif-nudge__s { font-size:12px; color:var(--muted); margin-top:2px; line-height:1.35; } .notif-nudge__go { flex:0 0 auto; border:0; background:var(--primary); color:#fff; font-weight:700; font-size:13px; padding:9px 13px; border-radius:11px; cursor:pointer; } .notif-nudge__x { flex:0 0 auto; border:0; background:transparent; color:var(--muted); font-size:15px; width:44px; height:44px; border-radius:8px; cursor:pointer; display:flex; align-items:center; justify-content:center; } /* Задачи сотрудника */ .tsk { padding: 12px 14px; border-radius: 14px; background: var(--card); border: 1px solid var(--border); } .tsk__top { display: flex; align-items: center; gap: 8px; } .tsk__prio { width: 8px; height: 8px; border-radius: 999px; flex: 0 0 auto; } .tsk-prio--high { background: var(--danger); } .tsk-prio--medium { background: var(--warn); } .tsk-prio--low { background: var(--muted); } .tsk__title { flex: 1; font-weight: 600; line-height: 1.35; } .tsk-st { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; } .tsk-st--new { background: rgba(34,197,94,.16); color: var(--primary-2); } .tsk-st--returned { background: rgba(248,113,113,.16); color: var(--danger); } .tsk-st--submitted { background: rgba(251,191,36,.16); color: var(--warn); } .tsk__desc { font-size: 13px; color: var(--muted); margin-top: 6px; line-height: 1.4; } .tsk__due { font-size: 13px; color: var(--muted); margin-top: 6px; } .tsk__due--over { color: var(--danger); font-weight: 600; } .tsk__note { margin-top: 8px; padding: 8px 11px; border-radius: 10px; font-size: 13px; background: var(--card-2); color: var(--muted); line-height: 1.4; } .tsk__btn { margin-top: 10px; } [data-theme="light"] .tsk-st--new { background: rgba(21,128,61,.14); color: var(--primary); } [data-theme="light"] .tsk-st--returned { background: rgba(220,38,38,.13); color: var(--danger); } [data-theme="light"] .tsk-st--submitted { background: rgba(180,83,9,.14); color: var(--warn); } .ntf--nav { cursor: pointer; } .ntf--nav:active { transform: scale(.99); } .pf-ver { text-align: center; font-size: 12px; margin-top: 8px; opacity: .8; } .pf-notif { margin-top: 12px; } /* ── Прогресс рабочего дня на карточке статуса ──────────────── */ .shift { margin-top: 14px; } .shift__bar { height: 8px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--border); overflow: hidden; } .shift__fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, var(--primary-2), var(--primary)); transition: width .4s ease; } .shift__fill--over { background: linear-gradient(90deg, var(--warn), var(--out)); } .shift__label { font-size: 12px; color: var(--muted); margin-top: 6px; } /* ── Календарь месяца (история) ─────────────────────────────── */ .cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; gap: 10px; } .cal-nav__cur { flex: 1; text-align: center; font-weight: 800; font-size: 15px; } .cal-nav__btn { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--border); background: var(--card); color: inherit; font-size: 20px; font-weight: 700; cursor: pointer; } .cal-nav__btn:disabled { opacity: .35; cursor: default; } .cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal__wd { text-align: center; font-size: 11px; color: var(--muted); padding-bottom: 2px; } .cal__cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 13px; font-weight: 700; background: var(--card); border: 1px solid var(--border); color: var(--muted); } .cal__cell--empty { background: transparent; border: 0; } .cal__cell--present { background: rgba(34,197,94,.16); color: var(--ok); border-color: transparent; } .cal__cell--late { background: rgba(251,191,36,.20); color: var(--warn); border-color: transparent; } .cal__cell--absent { background: rgba(248,113,113,.16); color: var(--danger); border-color: transparent; } .cal__cell--leave { background: rgba(14,165,233,.16); color: #0ea5e9; border-color: transparent; } .cal__cell--today { outline: 2px solid var(--primary-2); outline-offset: 0; } .cal-legend { display: flex; flex-wrap: wrap; gap: 10px 14px; margin-top: 14px; font-size: 12px; color: var(--muted); } .cal-legend span { display: inline-flex; align-items: center; gap: 6px; } .cal-legend .dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; } .dot.st-leave { background: #0EA5E9; } .cal__cell--tap { cursor: pointer; } .cal__cell--tap:active { transform: scale(.94); } .hrow--tap { cursor: pointer; } .hrow--tap:active { transform: scale(.99); } /* ── Детали дня (bottom-sheet: таймлайн отметок) ────────────── */ .sheet__body { display: block; } .day-title { font-size: 18px; font-weight: 800; } .day-sub { font-size: 13px; margin: 4px 0 12px; } .tl-wrap { display: flex; flex-direction: column; } .tl { display: flex; align-items: center; gap: 12px; padding: 11px 4px; border-top: 1px solid var(--border); } .tl:first-child { border-top: 0; } .tl__dot { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; } .tl__dot--in { background: var(--in); } .tl__dot--out { background: var(--out); } .tl__t { flex: 1; font-weight: 600; font-size: 15px; } .tl__time { font-weight: 800; font-variant-numeric: tabular-nums; font-size: 15px; } /* ── Контраст в светлой теме (аудит уведомлений/интерфейса) ───── */ [data-theme="light"] .ntf--leave .ntf__ic { color: #0369a1; background: rgba(3,105,161,.12); } [data-theme="light"] .cal__cell--leave { color: #0369a1; } [data-theme="light"] .seg__btn.is-active { border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(11,23,42,.12); } /* Чип «серия без опозданий» — тёплый акцент */ .chip--streak { color: var(--out); border-color: transparent; background: color-mix(in srgb, var(--out) 15%, transparent); font-weight: 700; } /* ── Подсказка установки на iPhone ──────────────────────────── */ .ios-steps { list-style: none; margin: 2px 0 6px; padding: 0; display: flex; flex-direction: column; gap: 11px; } .ios-steps li { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 1.4; } .ios-steps__n { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; } .ios-share { flex: 0 0 auto; vertical-align: -4px; color: var(--primary-2); } .ios-note { font-size: 12.5px; line-height: 1.45; color: var(--muted); margin: 2px 0 4px; } /* ── Объяснение перед системным запросом геопозиции ─────────── */ .geo-why__ic { width: 52px; height: 52px; border-radius: 16px; margin: 2px auto 4px; display: flex; align-items: center; justify-content: center; color: var(--primary-2); background: color-mix(in srgb, var(--primary-2) 15%, transparent); } .geo-why__list { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; flex-direction: column; gap: 9px; } .geo-why__list li { position: relative; padding-left: 24px; font-size: 14px; line-height: 1.4; } .geo-why__list li::before { content: ""; position: absolute; left: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--primary-2); }