/* Нижняя панель HolyCode на телефоне и лист «Сервисы» (mobile-nav.js). Самодостаточный файл: только свои классы .hcm-*, свои переменные --hcm-* и отметки data-hcm-* на ; от стилей приложения (Tailwind и т. п.) не зависит. Цвета — переменные с тёмными значениями по умолчанию, data-theme="light" на .hcm даёт светлые; сервис может переопределить любую переменную на .hcm (почта — своими токенами). Разметка — в шапке mobile-nav.js. Байт в байт во всех копиях модуля переключателя. */ .hcm { --hcm-font: inherit; /* Панель — ниже модальных окон сервиса (у них z-index от 50), лист с затемнением — поверх всего, кроме тостов. */ --hcm-z: 45; --hcm-sheet-z: 1100; --hcm-bar-bg: rgba(16, 15, 31, 0.97); --hcm-bar-border: #26233f; --hcm-bar-shadow: 0 -10px 30px rgba(3, 3, 12, 0.35); --hcm-tab-fg: #8f8bb0; --hcm-tab-active-fg: #efeaff; --hcm-tab-active-bg: rgba(139, 92, 246, 0.22); --hcm-accent: #8b5cf6; --hcm-accent-text: #c4b5fd; --hcm-badge-bg: #ef4444; --hcm-badge-fg: #ffffff; --hcm-backdrop: rgba(5, 5, 15, 0.58); --hcm-sheet-bg: #141226; --hcm-sheet-border: #2e2a4d; --hcm-sheet-shadow: 0 -18px 50px rgba(0, 0, 0, 0.5); --hcm-grab: #3b3660; --hcm-text: #ece7ff; --hcm-muted: #9f96cf; --hcm-tile-bg: #1b1930; --hcm-tile-border: #2e2748; --hcm-tile-icon-bg: #25213f; --hcm-current-bg: rgba(139, 92, 246, 0.16); --hcm-item-bg: rgba(255, 255, 255, 0.035); --hcm-item-hover: rgba(139, 92, 246, 0.12); --hcm-card-bg: rgba(255, 255, 255, 0.04); --hcm-field-bg: #100f1f; --hcm-field-border: #3a345d; --hcm-avatar: linear-gradient(135deg, #3b82f6, #6366f1); --hcm-danger: #fca5a5; --hcm-ring: rgba(141, 105, 255, 0.6); display: none; font-family: var(--hcm-font); color: var(--hcm-text); -webkit-tap-highlight-color: transparent; } .hcm[data-theme="light"] { --hcm-bar-bg: rgba(255, 255, 255, 0.97); --hcm-bar-border: #e2e8f0; --hcm-bar-shadow: 0 -8px 24px rgba(15, 23, 42, 0.08); --hcm-tab-fg: #64748b; --hcm-tab-active-fg: #4c1d95; --hcm-tab-active-bg: #ede9fe; --hcm-accent: #7c3aed; --hcm-accent-text: #6d28d9; --hcm-backdrop: rgba(15, 23, 42, 0.38); --hcm-sheet-bg: #ffffff; --hcm-sheet-border: #e2e8f0; --hcm-sheet-shadow: 0 -16px 40px rgba(15, 23, 42, 0.16); --hcm-grab: #cbd5e1; --hcm-text: #1e1b3a; --hcm-muted: #64748b; --hcm-tile-bg: #f8fafc; --hcm-tile-border: #e2e8f0; --hcm-tile-icon-bg: #ede9fe; --hcm-current-bg: #f5f3ff; --hcm-item-bg: #f8fafc; --hcm-item-hover: #f3f0ff; --hcm-card-bg: #f8fafc; --hcm-field-bg: #ffffff; --hcm-field-border: #cbd5e1; --hcm-danger: #dc2626; --hcm-ring: rgba(167, 139, 250, 0.55); } /* Отступ контента под панель: 56 px + safe-area, пока панель на странице и клавиатура закрыта; на десктопе — 0. Сервис берёт --hcm-space в своих правилах или вешает класс .hcm-pad. */ :root { --hcm-space: 0px; } .hcm-pad { padding-bottom: var(--hcm-space, 0px); } @media (max-width: 767.98px) { .hcm { display: block; } :root[data-hcm-nav] { --hcm-space: calc(56px + env(safe-area-inset-bottom, 0px)); } :root[data-hcm-nav][data-hcm-keyboard="open"] { --hcm-space: 0px; } } .hcm *, .hcm *::before, .hcm *::after { box-sizing: border-box; } .hcm svg { display: block; flex: none; } /* ── Панель ───────────────────────────────────────────────────────────── */ .hcm-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--hcm-z); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); height: calc(56px + env(safe-area-inset-bottom, 0px)); margin: 0; padding: 0 max(4px, env(safe-area-inset-left, 0px)) env(safe-area-inset-bottom, 0px) max(4px, env(safe-area-inset-right, 0px)); border-top: 1px solid var(--hcm-bar-border); background: var(--hcm-bar-bg); box-shadow: var(--hcm-bar-shadow); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); } .hcm[data-keyboard="open"] .hcm-bar { display: none; } .hcm-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; height: 56px; margin: 0; padding: 5px 1px 4px; border: 0; border-radius: 12px; background: transparent; color: var(--hcm-tab-fg); font: inherit; font-size: 10.5px; font-weight: 500; line-height: 1.15; letter-spacing: -0.005em; text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: color 150ms ease; } .hcm-tab:focus { outline: none; } .hcm-tab:focus-visible .hcm-tab-icon { box-shadow: 0 0 0 2px var(--hcm-ring); } .hcm-tab-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 48px; height: 28px; border-radius: 14px; transition: background-color 150ms ease, color 150ms ease; } .hcm-tab-icon svg { width: 22px; height: 22px; } .hcm-tab-label { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Длинная подпись («Пространства») на узком телефоне — короткой («Простр.»); от 420 px в 1/5 ширины влезает полная. */ .hcm-label-full { display: none; } @media (min-width: 420px) { .hcm-label-full { display: inline; } .hcm-label-short { display: none; } } .hcm-tab[aria-current="page"], .hcm-tab--services[aria-expanded="true"], .hcm-tab--services[data-more-active="true"] { color: var(--hcm-tab-active-fg); } .hcm-tab[aria-current="page"] .hcm-tab-icon, .hcm-tab--services[aria-expanded="true"] .hcm-tab-icon { background: var(--hcm-tab-active-bg); color: var(--hcm-accent-text); } .hcm-tab[aria-current="page"] .hcm-tab-label { font-weight: 650; } /* Открыт раздел из «Ещё» — у «Сервисов» точка-метка. */ .hcm-tab--services[data-more-active="true"] .hcm-tab-icon::after { content: ''; position: absolute; top: 1px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--hcm-accent); box-shadow: 0 0 0 2px var(--hcm-bar-bg); } .hcm-badge { position: absolute; top: -4px; left: calc(50% + 5px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--hcm-badge-bg); color: var(--hcm-badge-fg); font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; white-space: nowrap; box-shadow: 0 0 0 2px var(--hcm-sheet-bg); } /* ── Лист «Сервисы» ───────────────────────────────────────────────────── */ .hcm-backdrop { position: fixed; inset: 0; z-index: var(--hcm-sheet-z); background: var(--hcm-backdrop); animation: hcm-fade 180ms ease-out; } .hcm-sheet { --hcm-drag: 0px; position: fixed; left: 0; right: 0; bottom: 0; z-index: calc(var(--hcm-sheet-z) + 1); max-height: calc(100dvh - 40px - env(safe-area-inset-top, 0px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 6px max(14px, env(safe-area-inset-right, 0px)) calc(16px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px)); border: 1px solid var(--hcm-sheet-border); border-bottom: 0; border-radius: 20px 20px 0 0; background: var(--hcm-sheet-bg); color: var(--hcm-text); box-shadow: var(--hcm-sheet-shadow); font-size: 13px; line-height: 1.35; text-align: left; transform: translateY(var(--hcm-drag)); transition: transform 200ms ease; animation: hcm-up 220ms cubic-bezier(0.2, 0.8, 0.2, 1); } .hcm-sheet:focus { outline: none; } .hcm-sheet[data-dragging="true"] { transition: none; } .hcm-grab { width: 100%; height: 22px; margin: 0 0 2px; display: flex; align-items: center; justify-content: center; cursor: grab; touch-action: none; } .hcm-grab::before { content: ''; width: 40px; height: 5px; border-radius: 999px; background: var(--hcm-grab); } .hcm-section { margin: 12px 2px 8px; overflow: hidden; color: var(--hcm-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; } .hcm-grab + .hcm-section { margin-top: 2px; } .hcm-back { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; min-height: 34px; margin: 0 0 4px; padding: 0 12px 0 10px; border: 1px solid var(--hcm-tile-border); border-radius: 999px; background: var(--hcm-current-bg); color: var(--hcm-accent-text); font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hcm-back svg { width: 14px; height: 14px; } /* Плитки сервисов — как .hcs-tile переключателя у логотипа. */ .hcm-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .hcm-tile { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; min-width: 0; min-height: 84px; margin: 0; padding: 10px 6px 9px; border: 1px solid var(--hcm-tile-border); border-radius: 13px; background: var(--hcm-tile-bg); color: inherit; font: inherit; text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color 150ms ease, border-color 150ms ease; } .hcm-tile:focus { outline: none; } .hcm-tile:focus-visible { box-shadow: 0 0 0 2px var(--hcm-ring); } .hcm-tile:active { background: var(--hcm-item-hover); } .hcm-tile--current { border-color: var(--hcm-accent); background: var(--hcm-current-bg); box-shadow: inset 0 0 0 1px var(--hcm-accent); cursor: default; } .hcm-tile-icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; margin-bottom: 6px; border-radius: 10px; background: var(--hcm-tile-icon-bg); color: var(--hcm-accent-text); font-size: 16px; font-weight: 800; line-height: 1; } .hcm-tile-icon svg { width: 18px; height: 18px; } .hcm-tile-name { display: block; max-width: 100%; overflow: hidden; font-size: 12.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .hcm-tile-hint { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; margin-top: 2px; overflow: hidden; overflow-wrap: anywhere; color: var(--hcm-muted); font-size: 10.5px; line-height: 1.25; } .hcm-tile--current .hcm-tile-hint { color: var(--hcm-accent-text); font-weight: 600; } /* «Ещё в <сервисе>»: разделы плитками в три колонки. */ .hcm-more { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; } .hcm-item { display: flex; flex-direction: column; align-items: center; /* Значки в ряду на одной высоте, даже если подпись в две строки. */ justify-content: flex-start; gap: 6px; min-width: 0; min-height: 66px; margin: 0; padding: 11px 5px 9px; border: 1px solid transparent; border-radius: 12px; background: var(--hcm-item-bg); color: var(--hcm-text); font: inherit; font-size: 11.5px; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; transition: background-color 150ms ease, border-color 150ms ease; } .hcm-item:focus { outline: none; } .hcm-item:focus-visible { box-shadow: 0 0 0 2px var(--hcm-ring); } .hcm-item:active { background: var(--hcm-item-hover); } .hcm-item[aria-current="page"] { border-color: var(--hcm-accent); background: var(--hcm-current-bg); color: var(--hcm-tab-active-fg); font-weight: 600; } .hcm-item-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; color: var(--hcm-accent-text); font-size: 18px; line-height: 1; } .hcm-item-icon svg { width: 20px; height: 20px; } .hcm-item-icon .hcm-badge { top: -6px; left: 14px; } .hcm-item-label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-width: 100%; overflow: hidden; overflow-wrap: anywhere; } .hcm-divider { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin: 6px 2px 0; color: var(--hcm-muted); font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; } .hcm-divider::after { content: ''; flex: 1; height: 1px; background: var(--hcm-sheet-border); } /* Своё у сервиса (статус подключения и т. п.) — между «Ещё» и аккаунтом. */ .hcm-extra { margin-top: 14px; } /* ── Аккаунт и организация ───────────────────────────────────────────── */ .hcm-account { display: grid; gap: 12px; margin-top: 14px; padding: 12px; border: 1px solid var(--hcm-tile-border); border-radius: 16px; background: var(--hcm-card-bg); } .hcm-account-head { display: flex; align-items: center; gap: 10px; min-width: 0; } .hcm-avatar { display: flex; flex: none; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; background: var(--hcm-avatar); color: #ffffff; font-size: 14px; font-weight: 700; letter-spacing: 0.02em; } .hcm-account-text { display: flex; flex-direction: column; min-width: 0; } .hcm-account-name { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; } .hcm-account-sub { overflow: hidden; color: var(--hcm-muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .hcm-org { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 40px; margin: 0; padding: 0 2px; border-radius: 10px; } .hcm-org-label { flex: none; color: var(--hcm-muted); font-size: 13.5px; font-weight: 600; } .hcm-org-name { min-width: 0; margin-left: auto; overflow: hidden; font-size: 14px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; } .hcm-org-caret { flex: none; color: var(--hcm-muted); } .hcm-org-caret svg { width: 16px; height: 16px; } /* Выбор организации — системный список поверх строки, сам невидим. */ .hcm-org--switch { cursor: pointer; } .hcm-org--switch:active { background: var(--hcm-item-hover); } .hcm-org--switch:focus-within { box-shadow: 0 0 0 2px var(--hcm-ring); } .hcm-org-select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; opacity: 0; font-size: 16px; -webkit-appearance: none; appearance: none; cursor: pointer; } .hcm-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .hcm-action { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; min-height: 42px; margin: 0; padding: 0 12px; border: 1px solid var(--hcm-tile-border); border-radius: 12px; background: transparent; color: var(--hcm-text); font: inherit; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; touch-action: manipulation; } .hcm-action > span { overflow: hidden; text-overflow: ellipsis; } /* Во всю ширину — «Сменить пользователя» и кнопка, оставшаяся в ряду одна. */ .hcm-action--wide { grid-column: 1 / -1; } .hcm-action svg { width: 16px; height: 16px; color: var(--hcm-accent-text); } .hcm-action:focus { outline: none; } .hcm-action:focus-visible { box-shadow: 0 0 0 2px var(--hcm-ring); } .hcm-action:active { background: var(--hcm-item-hover); } .hcm-action--danger { color: var(--hcm-danger); } .hcm-action--danger svg { color: var(--hcm-danger); } @keyframes hcm-up { from { transform: translateY(100%); } to { transform: translateY(var(--hcm-drag)); } } @keyframes hcm-fade { from { opacity: 0; } to { opacity: 1; } } @media (prefers-reduced-motion: reduce) { .hcm-sheet, .hcm-backdrop { animation: none; } .hcm-sheet, .hcm-tab, .hcm-tab-icon { transition: none; } }