/* * Шкала слоёв витрины. * * ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ. Слои росли поштучно: каждый новый элемент брал число * «побольше соседнего», и к августу их набралось десять — от 40 у полосы * каталога до 10002 у плашек отмены. Лежали они в семи файлах разных треков, * и ответить на вопрос «кто кого перекрывает» можно было только собрав все * семь в голове. Теперь число живёт здесь, а в файлах стоит имя роли. * * ЭТО ПЕРЕНОС, А НЕ ПЕРЕСБОРКА. Каждая переменная равна ровно тому числу, * что стояло на её месте до 17.08. Единственный слой, который переехал, — * шторка разделов товара: она стала модальной (см. --mit-z-modal). * * ЗАПАСНОЕ ЗНАЧЕНИЕ В КАЖДОМ var() — НЕ УКРАШЕНИЕ. Файл подключается * безусловно, но если он однажды не доедет, витрина обязана остаться на * прежних слоях, а не сложиться в один. * * ГЛАВНОЕ ЗДЕСЬ НЕ ЧИСЛО, А КОНТЕКСТ НАЛОЖЕНИЯ. * * Слой считается ВНУТРИ контекста наложения, и элемент с z-index 9999 внутри * чужого контекста лежит ровно там, где лежит сам этот контекст. Контекст * создаёт не только `z-index` у позиционированного элемента: `position: * sticky` заводит его САМ ПО СЕБЕ, без единого числа, — и так же ведут себя * `transform`, `filter`, `opacity` меньше единицы, `isolation`, `contain`, * `will-change`. * * На этом мы и попались 17.08 (находка B1 приёмки). Шторка разделов товара * стояла в инфо-колонке карточки, а та липкая (`.uc-item-info > .wp-block- * group` в теме). Своим `z-index: 90` шторка обгоняла соседей ВНУТРИ колонки * и ровно ничего не значила снаружи: похожие товары, идущие в разметке * ПОЗЖЕ колонки, рисовались поверх открытой шторки, а липкий бар покупки * (он ребёнок ``, то есть в корневом контексте) закрывал её всегда. * Лечится не числом, а переездом: скрипт переносит шторку в `` — * assets/js/content-blocks.js. * * ПОЭТОМУ ПРАВИЛО: прежде чем поднимать число — проверьте предков. Если * элемент лежит не там, где велит его слой, виноват контекст, и большее * число не поможет, а только запутает следующего. * * АДМИНКА СЮДА НЕ ВХОДИТ. У экрана разделов свои числа * (assets/css/content-blocks-admin.css) и свой сосед по слоям — интерфейс * WordPress, а не витрина. Мешать их в одну шкалу значило бы притворяться, * что они когда-нибудь встретятся. */ :root { /* Полоса каталога внутри шапки (header.css). */ --mit-z-nav: 40; /* * Липкие полосы под шапкой: бар покупки на карточке (product-options.css) * и полоса каталога с фильтрами (catalog-filters.css). Ниже шапки нарочно: * они выезжают ИЗ-ПОД неё и туда же уходят. */ --mit-z-sticky: 90; /* Шапка сайта (header.css) и плашка cookie (notice.css). */ --mit-z-header: 100; /* * То, что обязано перекрыть шапку: бар покупки с раскрытым листом * размеров. Подложка листа лежит внутри бара, и без этой ступени шапка * оставалась непритушенной и кликабельной посреди выбора размера. */ --mit-z-over-header: 110; /* Просмотрщик фотографий товара (product-gallery.css). */ --mit-z-viewer: 200; /* Панель SHOP под шапкой (header-menu.css). */ --mit-z-menu: 9990; /* Шторки ядра: мини-корзина WooCommerce и фильтры каталога. */ --mit-z-drawer: 9999; /* * Модальные шторки витрины — сейчас это разделы товара * (content-blocks.css). Выше шапки, бара И шторок ядра. * * ПОЧЕМУ ПОДНЯЛИ (ревью, M-1). Раньше модалка стояла на 9995, ниже * мини-корзины: считалось, что шторки ядра остаются последним словом. * На деле получалось хуже обоих вариантов. Открытая мини-корзина лежит * поверх притемнения — и при этом попадает под `inert`, которым модалка * выключает страницу. То есть панель видна, перекрывает модальное окно и * при этом мертва: ни закрыть, ни нажать. Достижимо через хеш и кнопку * «назад» (assets/js/content-blocks.js, fromHash). * * Модальность или есть, или её нет. Если модалка перекрывает страницу, * она перекрывает и шторки страницы. */ --mit-z-modal: 10000; /* * Мобильное меню во весь экран (header-menu.css). Остаётся выше модалки * намеренно: это выход с любой страницы, и перекрывать его нечему. * Встретиться они не могут — при открытой модалке шапка выключена. */ --mit-z-menu-full: 10001; /* * Плашки «товар удалён — отменить» (cart.css). Выше всего, что может * оказаться на экране за их десять секунд: отменить удаление покупатель * должен успеть и с открытым меню. */ --mit-z-toast: 10002; } /* * ЧИСЛО ШТОРКИ ЯДРА ЖИВЁТ ЗДЕСЬ, А НЕ В ЧУЖОМ ФАЙЛЕ (ревью, M-1). * * 9999 у мини-корзины задаёт сам WooCommerce * (assets/client/blocks/mini-cart.css), а наша переменная его только * ОПИСЫВАЛА. Значит обновление ядра могло разъехаться со шкалой молча. * Прибиваем явно: теперь число действительно одно и оно наше. */ .wc-block-components-drawer__screen-overlay { z-index: var(--mit-z-drawer); } /* * ПОЛОСА ПРОКРУТКИ НЕ ДОЛЖНА ИСЧЕЗАТЬ ВМЕСТЕ С ПРОКРУТКОЙ (ревью, L-11). * * Замок прокрутки ставит `overflow: hidden` на , полоса пропадает, и * область просмотра становится шире на её ширину. Скрипт компенсирует это * полем на , но поле двигает только содержимое в потоке: шапка, * липкий бар и плашка cookie позиционированы фиксированно и прыгают вправо * при каждом открытии шторки. Резервируем место под полосу всегда — тогда * ширина области просмотра не меняется вовсе и компенсировать нечего. * * На системах с наложенной полосой (macOS, телефоны) правило ничего не * занимает и ничего не меняет. */ html { scrollbar-gutter: stable; }