/* MUSIC FOLDER — финальный блок ON-DEMAND + ПЛЕЙЛИСТ (полноэкранный плейлист). Подключается ПОСЛЕДНИМ: содержит правила, перекрывающие основные стили. */ /* ═══════════════════════════════════════════════════════════ ON-DEMAND + ПЛЕЙЛИСТ — ФИНАЛ v3 (полноэкранный плейлист). Блок ПОСЛЕДНИЙ в , ключевые правила с !important — старые правила из основных стилей перекрыть не могут. Мобайл: плейлист на весь экран без скруглений, плеер пристыкован снизу, ВСЕ кнопки видны, круглые, нажимаются. ═══════════════════════════════════════════════════════════ */ /* ── 1. On-demand панель: десктоп ── */ .od-panel{ position:fixed;left:50%;transform:translateX(-50%); bottom:calc(16px + env(safe-area-inset-bottom));z-index:317; width:min(760px,calc(100% - 24px)); border-radius:20px;border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg,rgba(18,20,38,.97),rgba(10,11,22,.98)); box-shadow:0 0 0 1px rgba(0,0,0,.4),0 24px 70px -18px rgba(0,0,0,.92), 0 0 calc(20px + var(--od-glow,0)*40px) -6px color-mix(in srgb,var(--c1) 50%,transparent), 0 0 calc(50px + var(--od-glow,0)*90px) -14px color-mix(in srgb,var(--c2) 38%,transparent); backdrop-filter:blur(28px) saturate(1.4);-webkit-backdrop-filter:blur(28px) saturate(1.4); padding:14px 16px 12px;display:flex;flex-direction:column;gap:10px;touch-action:pan-x} .od-seekrow{display:flex;align-items:center;gap:10px;padding:0 44px 0 0;position:relative;z-index:1} .od-body{ display:grid;position:relative;z-index:1;padding:0; grid-template-columns:52px minmax(0,1fr) auto auto; grid-template-rows:auto auto; grid-template-areas:"cover meta ctrls side" "cover meta vol extra"; gap:10px 14px;align-items:center} /* явный grid-area у каждого элемента — убивает любые чужие grid-row/column */ .od-cover{grid-area:cover!important;width:52px;height:52px;border-radius:12px} .od-meta{grid-area:meta!important;min-width:0} .od-ctrls{grid-area:ctrls!important;display:flex;align-items:center;justify-content:flex-end;gap:8px} .od-side{grid-area:side!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:76px} .od-vol{grid-area:vol!important;display:flex;align-items:center;justify-content:flex-end;gap:8px} .od-extra{grid-area:extra!important;display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:nowrap} .od-extra .cbtn.od-sm{width:36px!important;height:36px!important;flex:none!important} .od-extra .bass-btn{width:36px!important;height:36px!important;flex:none!important} .od-close{position:absolute!important;top:10px!important;right:10px!important;left:auto!important;bottom:auto!important; z-index:20;width:34px;height:34px;border-radius:50%; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);color:var(--muted); display:grid;place-items:center;cursor:pointer; transition:color .2s,border-color .2s,transform .25s,background .2s} .od-close:hover{color:#fff;border-color:rgba(255,255,255,.35);background:rgba(255,255,255,.14)} .od-close:hover svg{transform:rotate(90deg)} .od-close:active{transform:scale(.88)} /* ── 2. Кнопки: круглые, никогда не сжимаются ── */ .cbtn.od-sm{flex:none!important;width:40px!important;height:40px!important;border-radius:50%!important} .od-play{flex:none!important;border-radius:50%!important} .od-extra .cbtn.od-sm{width:38px!important;height:38px!important} .od-extra .bass-btn{width:38px!important;height:38px!important;border-radius:50%!important;flex:none!important} .od-like{flex:none} /* ── 3. Обычный мобильный on-demand (без плейлиста) ── */ @media(max-width:640px){ .od-panel{left:0;right:0;width:100%;transform:none;bottom:0; border-radius:18px 18px 0 0;border-left:none;border-right:none;border-bottom:none; border-top:1px solid rgba(255,255,255,.12); padding:12px 14px calc(12px + env(safe-area-inset-bottom)); touch-action:pan-x} .od-seekrow{padding:0 40px 0 0;gap:8px} .od-body{ grid-template-columns:46px minmax(0,1fr) auto; grid-template-rows:auto auto auto auto; grid-template-areas: "cover meta meta" "ctrls ctrls ctrls" "extra extra side" "vol vol vol"; gap:10px 12px} .od-cover{width:46px;height:46px;border-radius:11px} .od-ctrls{justify-content:center;gap:14px} .od-extra{justify-content:center;gap:6px;flex-wrap:nowrap} .od-extra .cbtn.od-sm{width:32px!important;height:32px!important;flex:none!important} .od-extra .bass-btn{width:32px!important;height:32px!important;flex:none!important} .od-side{flex-direction:row;justify-content:flex-end;align-items:center;min-width:0} .od-vol{justify-content:center} .od-vol input[type=range]{width:110px} .od-close{top:8px!important;right:8px!important;width:32px!important;height:32px!important} } /* ── 4. Открыт плейлист: десктоп ── */ body.pl-open .pl-card{padding-bottom:140px} body.pl-open .pl-list{flex:1;overflow-y:auto;max-height:none;min-height:0} body.pl-open.od-open .od-panel{ position:fixed;left:50%;transform:translateX(-50%); bottom:calc(20px + env(safe-area-inset-bottom)); width:min(560px,calc(100% - 40px)); border-radius:16px;border:1px solid rgba(255,255,255,.10); background:linear-gradient(180deg,rgba(22,24,44,.98),rgba(12,13,26,.99)); box-shadow:0 16px 48px -12px rgba(0,0,0,.85),0 0 24px -8px color-mix(in srgb,var(--c1) 30%,transparent); z-index:320;padding:12px 14px;animation:none} body.pl-open.od-open .od-body{ grid-template-columns:44px minmax(0,1fr) auto auto; grid-template-areas:"cover meta ctrls side" "cover meta vol extra"; gap:8px 12px} body.pl-open.od-open .od-cover{width:44px;height:44px} body.pl-open.od-open .od-ctrls{display:flex} body.pl-open.od-open .od-side{display:flex} body.pl-open.od-open .od-vol{display:flex} body.pl-open.od-open .od-extra{display:flex} body.pl-open.od-open .od-seekrow{padding:0 44px 0 0} /* ═══ 5. МОБАЙЛ: ПЛЕЙЛИСТ НА ВЕСЬ ЭКРАН ═══ */ @media(max-width:640px){ /* оверлей без отступов — карточка от края до края */ .pl-overlay{padding:0!important} /* карточка: полноэкранная, без скруглений и рамок */ .pl-card{ width:100%!important;max-width:100%!important; height:100vh!important;height:100dvh!important; max-height:100vh!important;max-height:100dvh!important; margin:0!important;border-radius:0!important; border:none!important;box-shadow:none!important; padding:18px 16px 12px!important} .pl-overlay.show .pl-card{transform:none!important} /* крупный крестик — 44px, палец попадает */ .pl-x{width:44px!important;height:44px!important;top:10px!important;right:10px!important; font-size:18px!important;z-index:30!important; background:rgba(255,255,255,.10)!important;border:1px solid rgba(255,255,255,.22)!important} /* НЕТ ложного резерва на карточке — исчезает тёмная полоса поверх треков */ body.pl-open .pl-card{padding-bottom:12px!important} /* список тянется на всё место */ body.pl-open .pl-list{flex:1;overflow-y:auto;max-height:none;min-height:0;padding-bottom:16px} /* резерв под плеер — ТОЛЬКО на списке и ТОЛЬКО когда плеер открыт */ body.pl-open.od-open .pl-list{padding-bottom:200px} /* ── плеер пристыкован к низу экрана. ЕДИНЫЙ стиль с главной страницей (§3): те же скругления, отступы, обложка 46 и кнопки (наследуется из §3 без перебивки размерами). Компактность личного кабинета — только за счёт скрытой громкости, чипа и ранга; сетка та же, минус ряд громкости ── */ body.pl-open.od-open .od-panel{ left:0!important;right:0!important;width:100%!important;transform:none!important;bottom:0!important; border-radius:18px 18px 0 0!important; border-left:none!important;border-right:none!important;border-bottom:none!important; border-top:1px solid rgba(255,255,255,.14)!important; padding:12px 14px calc(12px + env(safe-area-inset-bottom))!important; box-shadow:0 -10px 34px -6px rgba(0,0,0,.75)!important; animation:odInMobile .35s cubic-bezier(.2,.9,.25,1.08)} body.pl-open.od-open .od-chip{display:none} body.pl-open.od-open .od-body{ grid-template-columns:46px minmax(0,1fr) auto; grid-template-rows:auto auto auto; grid-template-areas: "cover meta meta" "ctrls ctrls ctrls" "extra extra side"; gap:10px 12px} body.pl-open.od-open .od-cover{width:46px;height:46px;border-radius:11px} body.pl-open.od-open .od-ctrls{justify-content:center;gap:14px} body.pl-open.od-open .od-side{flex-direction:row;justify-content:flex-end;min-width:0} body.pl-open.od-open .od-extra{justify-content:center;gap:6px;flex-wrap:nowrap} body.pl-open.od-open .od-vol{display:none!important} body.pl-open.od-open .od-seekrow{padding:0 40px 0 0} body.pl-open.od-open .od-close{top:8px!important;right:8px!important;width:32px!important;height:32px!important} body.pl-open.od-open .od-rankline{display:none} /* очень узкие экраны (< 360px): кнопки не должны сжиматься */ @media(max-width:360px){ .od-ctrls{gap:10px!important} .od-play{width:44px!important;height:44px!important} .cbtn.od-sm{width:34px!important;height:34px!important} .od-extra .cbtn.od-sm{width:32px!important;height:32px!important} .od-extra .bass-btn{width:32px!important;height:32px!important} .od-meta b{font-size:12px} .od-meta span{font-size:10px} .od-cover{width:38px!important;height:38px!important} } } /* ── доступность: уважаем системную настройку «уменьшить движение» ────────── JS-анимации оверлеев и тостов построены на setTimeout (transitionend/animationend нигде не слушается), поэтому отключение CSS-переходов ничего не ломает. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } html { scroll-behavior: auto !important; } .user-chip img, .up-ava img { transition: none !important; } } /* ═══ v3 · визуальные правки ══════════════════════════════════════════════ */ /* 1) FAB «Наши сервисы» — рекламная кнопка, она НЕ мешает людям и плееру: при открытом on-demand плавно исчезает, а в любом случае живёт НИЖЕ игрового слоя (z-index 306 < od-панель 317 / плейлистовая 320). Если :has() не поддерживается — просто остаётся под плеером. */ .svc-fab{z-index:306;transition:opacity .25s ease,transform .25s cubic-bezier(.2,.9,.25,1),bottom .3s cubic-bezier(.2,.9,.25,1)} body:has(#odPanel:not([hidden])) .svc-fab{opacity:0;pointer-events:none;transform:scale(.8)} /* 2) Подсказки [data-tip]: плотный непрозрачный фон + двойная тень, чтобы не сливались с обложками и панелью позади */ html:not(.js-tips) [data-tip]:hover::after{background:#0a0c18;border:1px solid rgba(139,92,246,.62);opacity:1;z-index:10002; box-shadow:0 2px 4px rgba(0,0,0,.6),0 16px 42px -8px rgba(0,0,0,.92),0 0 0 3px rgba(5,6,15,.6)} html:not(.js-tips) [data-tip]:hover::before{border-top-color:#0a0c18;z-index:10002} /* 3) Бейдж NEW — в фирменном градиенте сайта (вместо жёлтого), без лишнего мерцания */ .new-badge{background:linear-gradient(135deg,var(--c1),var(--c2));color:#0b0c14;border-radius:999px;padding:2px 8px; animation:none;box-shadow:0 2px 10px -2px color-mix(in srgb,var(--c2) 75%,transparent),inset 0 1px 0 rgba(255,255,255,.45)} .new-badge::after{display:none} /* в «Недавно звучали» длинное название не срезает бейдж: обрезается только текст */ .rmeta b{overflow:visible;gap:7px} .rmeta b .rt{flex:1 1 auto;min-width:0;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .rmeta b .new-badge{order:2;flex:none} /* NEW в основном плеере */ .np-new{align-self:center;margin-left:8px;font-size:9.5px;letter-spacing:.1em} /* 4) Кружок ползунка on-demand — по центру дорожки (раньше задирался на ~5px: margin-top считался для дорожки 6px, а реальная высота элемента 16px) */ #odSeek{height:16px} #odSeek::-webkit-slider-runnable-track{height:16px;border-radius:999px;background:transparent} #odSeek::-webkit-slider-thumb{margin-top:-2px} #odSeek::-moz-range-track{height:16px;border-radius:999px;background:transparent}