/* ========================================================================= bsm.css — Выдвигающиеся панели (bottom sheet) + desktop modal Самодостаточный, без зависимостей. Подключи перед bsm.js. Тема настраивается через CSS-переменные на :root (см. ниже). ========================================================================= */ :root { /* Поверхность панели */ --sheet-bg: #ffffff; --sheet-color: #1b1b1f; --sheet-muted: #8a8a8e; --sheet-radius: 22px; --sheet-shadow: 0 -8px 40px rgba(16, 18, 27, 0.16); --sheet-modal-shadow: 0 24px 80px rgba(16, 18, 27, 0.28); /* Затемнение фона (scrim) */ --sheet-scrim: rgba(20, 22, 30, 0.45); /* Ручка-грабер */ --sheet-handle: rgba(60, 60, 67, 0.3); /* Акцент (кнопки/ссылки «Закрыть») */ --sheet-accent: #2b7fff; /* Кнопка-крестик */ --sheet-close-bg: rgba(118, 118, 128, 0.12); --sheet-close-bg-hov: rgba(118, 118, 128, 0.22); --sheet-close-icon: #6a6a70; --sheet-skeleton-a: rgba(120, 120, 128, 0.14); --sheet-skeleton-b: rgba(120, 120, 128, 0.06); /* Фон «сцены» позади стопки карточек (iOS page-sheet) */ --sheet-stage: #000000; /* Тайминги/кривые */ --sheet-ease: cubic-bezier(0.32, 0.72, 0, 1); /* iOS-подобная пружина */ --sheet-ease-modal: cubic-bezier(0.22, 1, 0.36, 1); --sheet-dur: 420ms; --sheet-dur-modal: 240ms; /* Безопасные зоны (iPhone notch / home indicator) */ --sheet-safe-top: env(safe-area-inset-top, 0px); --sheet-safe-bottom: env(safe-area-inset-bottom, 0px); color-scheme: light; } /* Светлая тема окна: или Sheet.open({ theme:'light' }). [data-bs-theme="light"] — связка с темой приложения (Bootstrap/Metronic): при переключении темы на панели/сцена/[data-sheet-app] следуют за ней автоматически. */ [data-sheet-theme="light"], [data-sheet-theme="auto"], [data-bs-theme="light"] { --sheet-bg: #ffffff; --sheet-color: #1b1b1f; --sheet-muted: #8a8a8e; --sheet-shadow: 0 -8px 40px rgba(16, 18, 27, 0.16); --sheet-modal-shadow: 0 24px 80px rgba(16, 18, 27, 0.28); --sheet-scrim: rgba(20, 22, 30, 0.45); --sheet-handle: rgba(60, 60, 67, 0.3); --sheet-accent: #2b7fff; --sheet-close-bg: rgba(118, 118, 128, 0.12); --sheet-close-bg-hov: rgba(118, 118, 128, 0.22); --sheet-close-icon: #6a6a70; --sheet-skeleton-a: rgba(120, 120, 128, 0.14); --sheet-skeleton-b: rgba(120, 120, 128, 0.06); --sheet-stage: #000000; color-scheme: light; } /* Тёмная тема окна: или Sheet.open({ theme:'dark' }). [data-bs-theme="dark"] — связка с тёмной темой приложения (см. светлый блок выше). Per-sheet override через Sheet.open({theme}) ставит [data-sheet-theme] на сам слой и перебивает эту связку (значение на элементе важнее унаследованного от ). */ [data-sheet-theme="dark"], [data-bs-theme="dark"] { --sheet-bg: #1c1c1f; --sheet-color: #f2f2f5; --sheet-muted: #9a9aa2; --sheet-shadow: 0 -8px 44px rgba(0, 0, 0, 0.5); --sheet-modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); --sheet-scrim: rgba(0, 0, 0, 0.55); --sheet-handle: rgba(235, 235, 245, 0.3); --sheet-close-bg: rgba(118, 118, 128, 0.24); --sheet-close-bg-hov: rgba(118, 118, 128, 0.36); --sheet-close-icon: #c7c7cf; --sheet-skeleton-a: rgba(235, 235, 245, 0.10); --sheet-skeleton-b: rgba(235, 235, 245, 0.04); --sheet-stage: #000000; color-scheme: dark; } /* Авто-тема конкретного окна: Sheet.open({ theme:'auto' }) */ @media (prefers-color-scheme: dark) { [data-sheet-theme="auto"] { --sheet-bg: #1c1c1f; --sheet-color: #f2f2f5; --sheet-muted: #9a9aa2; --sheet-shadow: 0 -8px 44px rgba(0, 0, 0, 0.5); --sheet-modal-shadow: 0 24px 80px rgba(0, 0, 0, 0.6); --sheet-scrim: rgba(0, 0, 0, 0.55); --sheet-handle: rgba(235, 235, 245, 0.3); --sheet-accent: #2b7fff; --sheet-close-bg: rgba(118, 118, 128, 0.24); --sheet-close-bg-hov: rgba(118, 118, 128, 0.36); --sheet-close-icon: #c7c7cf; --sheet-skeleton-a: rgba(235, 235, 245, 0.10); --sheet-skeleton-b: rgba(235, 235, 245, 0.04); --sheet-stage: #000000; color-scheme: dark; } } /* Блокировка прокрутки страницы, пока открыта хотя бы одна панель. overflow:hidden ставится ТОЛЬКО на корне (html) — позиция прокрутки сохраняется, высота body/контента не меняется (никаких обрезаний и тёмных полос). Фоновые касания и так перехватывает оверлей панели. */ html.sheet-lock { overflow: hidden; overscroll-behavior: none; } /* ========================================================================= КОНТЕЙНЕР-СЦЕНА для эффекта «карточки» (iOS page-sheet). Элемент приложения, который отъезжает назад, помечается [data-sheet-app]. Позади него видна тёмная «сцена». ========================================================================= */ [data-sheet-app] { transform-origin: center top; transition: transform var(--sheet-dur) var(--sheet-ease), border-radius var(--sheet-dur) var(--sheet-ease), filter var(--sheet-dur) var(--sheet-ease); will-change: transform; background: var(--sheet-bg); } .sheet-stage-bg { /* тёмный фон ПОЗАДИ приложения; виден, когда оно отъехало */ position: fixed; inset: 0; background: var(--sheet-stage); z-index: -1; /* всегда за статичным [data-sheet-app] — без «тёмного экрана» */ pointer-events: none; opacity: 0; transition: opacity var(--sheet-dur) var(--sheet-ease); } .sheet-stage-bg.is-on { opacity: 1; } /* ========================================================================= СЛОЙ панели (один на каждую открытую панель в стопке) ========================================================================= */ .sheet-layer { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; justify-content: flex-end; /* панель прижата вниз (мобайл) */ pointer-events: none; /* кликается только содержимое/scrim */ } /* когда панель смонтирована внутри произвольного контейнера */ .sheet-layer[data-contained] { position: absolute; } .sheet-scrim { position: absolute; inset: 0; background: var(--sheet-scrim); opacity: 0; pointer-events: auto; transition: opacity var(--sheet-dur) var(--sheet-ease); -webkit-tap-highlight-color: transparent; } .sheet-layer.is-open .sheet-scrim { opacity: 1; } /* у «масштабирующих» панелей фоном служит тёмная сцена, а не scrim — делаем scrim прозрачным (но кликабельным для закрытия по фону) */ .sheet-layer[data-scale] .sheet-scrim { background: transparent; } /* «Карточка» панели */ .sheet { position: relative; width: 100%; max-height: 100%; margin: 0 auto; background: var(--sheet-bg); color: var(--sheet-color); border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; box-shadow: var(--sheet-shadow); pointer-events: auto; display: flex; flex-direction: column; overflow: hidden; transform: translateY(100%); will-change: transform; -webkit-tap-highlight-color: transparent; } .sheet-layer[data-mode="sheet"] .sheet { overflow: visible; } .sheet-layer[data-mode="sheet"] .sheet::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: max(120px, calc(72px + var(--sheet-safe-bottom))); background: inherit; pointer-events: none; } .sheet.is-animating { transition: transform var(--sheet-dur) var(--sheet-ease); } /* Грабер (ручка) — зона захвата жеста */ .sheet__grabber { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; height: 26px; cursor: grab; touch-action: none; } .sheet__grabber:active { cursor: grabbing; } .sheet__handle { width: 38px; height: 5px; border-radius: 99px; background: var(--sheet-handle); } .sheet[data-handle="false"] .sheet__grabber { height: 12px; } .sheet[data-handle="false"] .sheet__handle { display: none; } /* Верхняя панель: «Закрыть» / крестик */ .sheet__topbar { flex: 0 0 auto; position: relative; min-height: 0; padding: 0 16px; display: flex; align-items: center; touch-action: none; /* зона захвата жеста */ } .sheet__topbar:empty { display: none; } .sheet__close-text { appearance: none; border: 0; background: none; color: var(--sheet-accent); font: 600 17px/1.2 inherit; padding: 8px 0; cursor: pointer; } .sheet__close-text:active { opacity: 0.6; } .sheet__close-icon { appearance: none; border: 0; position: absolute; top: 4px; right: 14px; width: 32px; height: 32px; border-radius: 50%; background: var(--sheet-close-bg); color: var(--sheet-close-icon); display: grid; place-items: center; cursor: pointer; transition: background 0.15s, transform 0.1s; z-index: 3; } .sheet__close-icon:hover { background: var(--sheet-close-bg-hov); } .sheet__close-icon:active { transform: scale(0.9); } .sheet__close-icon svg { width: 16px; height: 16px; display: block; } /* Заголовок */ .sheet__title { flex: 0 0 auto; margin: 4px 0 0; padding: 6px 20px 10px; font: 800 26px/1.18 inherit; letter-spacing: -0.02em; color: var(--sheet-color); touch-action: none; /* зона захвата жеста */ } .sheet[data-close="icon"] .sheet__title { padding-right: 56px; } /* Тело (прокручиваемое) */ .sheet__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; /* нативная вертикальная прокрутка контента */ padding: 4px 20px calc(24px + var(--sheet-safe-bottom)); } .sheet__body::-webkit-scrollbar { width: 8px; } .sheet__body::-webkit-scrollbar-thumb { background: rgba(120, 120, 128, 0.3); border-radius: 8px; } /* Когда тело — единственный наполнитель и тянется на всю высоту панели */ .sheet[data-size="full"] .sheet__body { padding-bottom: calc(28px + var(--sheet-safe-bottom)); } /* Рецессия (отъезд назад) панели, лежащей под верхней — эффект стопки */ .sheet[data-receded] { transition: transform var(--sheet-dur) var(--sheet-ease), filter var(--sheet-dur) var(--sheet-ease); } .sheet__dim { /* затемнение «спрятанной» панели */ position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; border-radius: inherit; transition: opacity var(--sheet-dur) var(--sheet-ease); z-index: 5; } /* ========================================================================= DESKTOP MODAL — обычное центрированное окно (как Bootstrap) ========================================================================= */ .sheet-layer[data-mode="modal"] { justify-content: center; align-items: center; padding: 24px; } .sheet-layer[data-mode="modal"] .sheet { width: min(560px, 100%); max-height: min(86vh, 760px); margin: 0; border-radius: 16px; box-shadow: var(--sheet-modal-shadow); transform: translateY(16px) scale(0.96); opacity: 0; transition: none; } .sheet-layer[data-mode="modal"][data-size="peek"] .sheet { width: min(400px, 100%); } .sheet-layer[data-mode="modal"][data-size="half"] .sheet { width: min(480px, 100%); } .sheet-layer[data-mode="modal"][data-size="full"] .sheet { width: min(920px, 100%); max-height: 92vh; } .sheet-layer[data-mode="modal"] .sheet.is-animating { transition: transform var(--sheet-dur-modal) var(--sheet-ease-modal), opacity var(--sheet-dur-modal) var(--sheet-ease-modal); } .sheet-layer[data-mode="modal"].is-open .sheet { transform: translateY(0) scale(1); opacity: 1; } /* в модалке грабер не нужен */ .sheet-layer[data-mode="modal"] .sheet__grabber { display: none; } .sheet-layer[data-mode="modal"] .sheet { border-radius: 16px; } .sheet-layer[data-mode="modal"] .sheet__title { font-size: 22px; padding-top: 18px; } /* в модалке по умолчанию крестик в углу */ .sheet-layer[data-mode="modal"] .sheet__close-icon { top: 14px; right: 14px; } /* Лёгкий отступ-стопка для модалок, лежащих ниже */ .sheet-layer[data-mode="modal"][data-receded-layer] .sheet { transform: translateY(0) scale(var(--rs, 0.94)); filter: brightness(0.92); } /* ========================================================================= Доступность / предпочтения ========================================================================= */ @media (prefers-reduced-motion: reduce) { :root { --sheet-dur: 0.001ms; --sheet-dur-modal: 0.001ms; } [data-sheet-app], .sheet, .sheet-scrim, .sheet-stage-bg, .sheet__dim { transition-duration: 0.001ms !important; } } .sheet :focus-visible, .sheet__close-icon:focus-visible, .sheet__close-text:focus-visible { outline: 2px solid var(--sheet-accent); outline-offset: 2px; border-radius: 8px; } /* ========================================================================= Загрузка AJAX-контента: скелетоны, спиннер, ошибка ========================================================================= */ .sheet__body { transition: opacity 0.18s ease; } /* плавная подмена контента */ /* ---- Скелетоны ---- */ .sheet-sk { display: flex; flex-direction: column; gap: 14px; padding-top: 4px; } .sk { --sk-a: var(--sheet-skeleton-a); --sk-b: var(--sheet-skeleton-b); background: linear-gradient(100deg, var(--sk-a) 30%, var(--sk-b) 50%, var(--sk-a) 70%); background-size: 200% 100%; animation: sk-shimmer 1.25s ease-in-out infinite; border-radius: 10px; } @keyframes sk-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .sk-line { height: 14px; } .sk-circle { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; } .sk-rect { width: 100%; } .sk-row { display: flex; align-items: center; gap: 14px; } .sk-col { flex: 1 1 auto; display: flex; flex-direction: column; gap: 8px; min-width: 0; } @media (prefers-reduced-motion: reduce) { .sk { animation: none; } } /* ---- Спиннер ---- */ .sheet-spinner { display: grid; place-items: center; padding: 52px 0; } .sheet-spinner__ring { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(120, 120, 128, 0.25); border-top-color: var(--sheet-accent); animation: sheet-spin 0.8s linear infinite; } @keyframes sheet-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .sheet-spinner__ring { animation-duration: 1.6s; } } /* ---- Ошибка загрузки ---- */ .sheet-error { text-align: center; padding: 36px 14px; color: var(--sheet-muted); } .sheet-error__t { font-weight: 700; color: var(--sheet-color); margin-bottom: 6px; font-size: 17px; } .sheet-error__btn { appearance: none; border: 0; margin-top: 18px; padding: 11px 22px; border-radius: 12px; background: var(--sheet-accent); color: #fff; font: 600 15px/1 inherit; cursor: pointer; } .sheet-error__btn:active { opacity: 0.8; } /* Утилита для демо-контента (необязательная) */ .sheet-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .sheet-list__item { display: flex; gap: 14px; align-items: center; padding: 16px; border-radius: 16px; background: rgba(120, 120, 128, 0.08); cursor: pointer; transition: background 0.15s; } .sheet-list__item:hover { background: rgba(120, 120, 128, 0.14); } .sheet-list__ico { flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 22px; background: rgba(43, 127, 255, 0.12); } .sheet-list__item > span { display: flex; flex-direction: column; min-width: 0; } .sheet-list__tt { display: block; font-weight: 700; } .sheet-list__sb { display: block; color: var(--sheet-muted); font-size: 14px; margin-top: 2px; } .sheet-cta { appearance: none; border: 0; width: 100%; padding: 17px; border-radius: 16px; background: #ffdd2d; color: #1b1b1f; font: 700 17px/1 inherit; cursor: pointer; margin-top: 8px; transition: filter 0.15s, transform 0.1s; } .sheet-cta:hover { filter: brightness(0.97); } .sheet-cta:active { transform: scale(0.99); }