/** * ═══════════════════════════════════════════════════════════════════════════════ * MODAL SYSTEM — Enterprise Standard * ═══════════════════════════════════════════════════════════════════════════════ * * АРХИТЕКТУРНЫЙ СТАНДАРТ: * * 1. ВСЕ модалки должны быть прямыми потомками * - Статические модалки: размещать в HTML вне stacking context контейнеров * - Динамические модалки: document.body.appendChild(modalElement) * * 2. ЗАПРЕЩЕНО размещать модалки внутри элементов с: * - CSS-фильтрами и эффектами размытия * - transform (не none) * - filter (не none) * - perspective * - contain: paint / layout / strict * - will-change: transform / filter * Эти свойства создают новый stacking context, изолируя z-index * * 3. Z-INDEX СХЕМА (Bootstrap-совместимая): * - .modal-backdrop: 1050 * - .modal: 1055 * - .modal-dialog: auto (наследуется) * - .toast: 1090 * - .tooltip: 1080 * - .popover: 1070 * * 4. ЗАПРЕЩЕНО: * - z-index: 99999 или подобные "магические" значения * - inline style="z-index:..." для модалок * - pointer-events манипуляции на модалках (кроме backdrop) * * ПРИМЕЧАНИЕ: * - .glass-workspace использует CSS-эффекты, создающие stacking context * - Модалка внутри этого контейнера не может "пробить" z-index наружу * - Решение: модалка должна быть вне этого контейнера (прямой потомок body) * * ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ ЗАЩИТА ОТ ПЕРЕХВАТА КЛИКОВ Все декоративные псевдоэлементы не должны перехватывать клики ═══════════════════════════════════════════════════════════════════════════════ */ body::before, body::after, .glass-workspace::before, .glass-workspace::after, .workspace-overlay, .app-scroll::before, .app-scroll::after { pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════════════════ Z-INDEX СХЕМА (Bootstrap 5 совместимая) Единственное место определения z-index для overlay элементов ═══════════════════════════════════════════════════════════════════════════════ */ /* Backdrop модалок */ .modal-backdrop { z-index: 1050; } /* Сама модалка */ .modal { z-index: 1055; } /* Тосты (уведомления) */ .toast-container, .toast { z-index: 1090; } /* Тултипы */ .tooltip { z-index: 1080; } /* Поповеры */ .popover { z-index: 1070; } /* Дропдауны (ниже модалок, но выше контента) */ .dropdown-menu { z-index: 1000; } /* ═══════════════════════════════════════════════════════════════════════════════ MODAL BASE STYLES Базовые стили для всех модалок проекта ═══════════════════════════════════════════════════════════════════════════════ */ /* Гарантируем что модалки всегда выше stacking context контейнеров */ .modal { /* isolation создаёт новый stacking context на уровне body */ isolation: isolate; } /* Общий стиль контента модалки */ .modal-content { border-radius: 16px; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 246, 0.98) ); box-shadow: 0 20px 40px rgba(16, 28, 22, 0.12); border: 1px solid rgba(135, 158, 146, 0.12); } /* Заголовок модалки */ .modal-header { border-bottom: 1px solid rgba(135, 158, 146, 0.06); } .modal-title { color: var(--text-primary, #2f3a34); } /* Футер модалки */ .modal-footer { border-top: 1px solid rgba(135, 158, 146, 0.04); } /* ═══════════════════════════════════════════════════════════════════════════════ MODAL BACKDROP Настройки backdrop (затемнение за модалкой) ═══════════════════════════════════════════════════════════════════════════════ */ .modal-backdrop { /* Bootstrap default, но явно указываем для предсказуемости */ background-color: rgba(0, 0, 0, 0.5); } .modal-backdrop.show { opacity: 1; } /* ═══════════════════════════════════════════════════════════════════════════════ ACCESSIBILITY Доступность для модалок ═══════════════════════════════════════════════════════════════════════════════ */ /* Focus ring для интерактивных элементов внутри модалки */ .modal .btn:focus-visible, .modal .form-control:focus-visible, .modal .form-select:focus-visible { outline: 2px solid var(--focus-ring, rgba(59, 130, 246, 0.9)); outline-offset: 2px; } /* Кнопка закрытия */ .modal .btn-close:focus-visible { outline: 2px solid var(--focus-ring, rgba(59, 130, 246, 0.9)); outline-offset: 2px; box-shadow: none; }