/* ===================================================================== music_long_popup.css — ПОЗИЦИОНИРОВАНИЕ меню длинных версий. Визуал (цвета/строки/кнопки/is-unlocked) — в music_long.css. ⚠ Карточка музыки содержит каталожный reset .zg-v3 .onetrack.accordion *:not(canvas):not(wave):not(audio){position:static;top/right/bottom/left:auto} со специфичностью 0,3,3. Поэтому ВСЕ правила позиционирования здесь заскоуплены .zg-v3 .onetrack.accordion … (≥0,4,0), иначе position схлопывается в static и попап уезжает в поток (баг «меню обрезается / не всплывает»). Разметка прогера:

+ . JS (music-long-page.js) вешает: .zg-long-menu--up (флип вверх, когда снизу не влезает), .zg-long-track-menu-open (на .onetrack), body.zg-long-menu-open + .zg-long-backdrop (мобайл). ===================================================================== */ /* Анкор = grid-элемент карточки в области "time" и относительный контейнер для меню */ .zg-v3 .onetrack.accordion .zg-long-anchor{ position:relative; display:inline-flex; flex:0 0 auto; grid-area:time; /* та же ячейка, где раньше стоял .waveTime */ align-self:center; justify-self:start; } /* Меню — абсолютно под анкором, выровнено по правому краю триггера */ .zg-v3 .onetrack.accordion .zg-long-anchor > .zg-long-menu{ position:absolute; top:calc(100% + 8px); right:0; bottom:auto; left:auto; width:min(360px, calc(100vw - 24px)); z-index:1200; } /* Флип вверх: JS ставит .zg-long-menu--up, когда снизу до края экрана не влезает */ .zg-v3 .onetrack.accordion .zg-long-anchor > .zg-long-menu.zg-long-menu--up{ top:auto; bottom:calc(100% + 8px); } /* Карточка с открытым меню: не обрезать попап (mainPlayer/rightWavebox = display:contents, но подстрахуемся) и поднять над маркерами конца волны (.wave::before/after z-index:4). */ .zg-v3 .onetrack.accordion.zg-long-track-menu-open, .zg-v3 .onetrack.accordion.zg-long-track-menu-open .mainPlayer, .zg-v3 .onetrack.accordion.zg-long-track-menu-open .rightWavebox{ overflow:visible !important; } .zg-v3 .onetrack.accordion.zg-long-track-menu-open{ z-index:20; } /* Панель фильтров .zg-v3__panel = z-index:30, а в sticky-состоянии 50; контейнер треков .zg-v3__tracks = z-index:1 (весь блок треков ПОД панелью) → z-index карточки не помогает, попап уходил под панель. Пока в треках открыто меню — поднимаем весь блок треков НАД панелью (60 > 50) (десктоп; на мобайле меню в body). */ @media (min-width:561px){ .zg-v3 .zg-v3__tracks:has(.zg-long-track-menu-open){ z-index:60; } } .zg-long-backdrop{ display:none; } /* --- мобайл: меню превращается в шторку снизу --- ⚠ JS переносит в (не в анкор!) — поэтому таргетим меню через body.zg-long-menu-open .zg-long-menu, а не .zg-long-anchor > .zg-long-menu (в body каталожного reset нет, спец. 0,2,0 бьёт базовый .zg-long-menu{position:absolute}). */ @media (max-width:560px){ body.zg-long-menu-open .zg-long-menu, .zg-v3 .onetrack.accordion .zg-long-anchor > .zg-long-menu{ position:fixed; left:0; right:0; bottom:0; top:auto; width:100%; max-width:none; min-width:0; max-height:86vh; max-height:86dvh; overflow-y:auto; overscroll-behavior:contain; border-radius:18px 18px 0 0; z-index:9991; } /* флип-класс на мобайле не нужен — всегда шторка снизу */ body.zg-long-menu-open .zg-long-menu.zg-long-menu--up, .zg-v3 .onetrack.accordion .zg-long-anchor > .zg-long-menu.zg-long-menu--up{ top:auto; bottom:0; } /* ручка-грабер сверху шторки */ body.zg-long-menu-open .zg-long-menu::before, .zg-v3 .onetrack.accordion .zg-long-anchor > .zg-long-menu::before{ content:""; position:absolute; top:8px; left:50%; transform:translateX(-50%); width:40px; height:4px; border-radius:3px; background:#d3d9e4; } /* если меню всё же осталось в карточке — не запирать fixed-шторку в её stacking-context */ .zg-v3 .onetrack.accordion.zg-long-track-menu-open{ z-index:auto; } .zg-long-backdrop{ position:fixed; inset:0; display:block; background:rgba(15,23,42,.45); z-index:9990; } .zg-long-backdrop[hidden]{ display:none; } body.zg-long-menu-open{ overflow:hidden; } }