/* ============================================================ Фонотека и сквозной плеер — layout из foyer-music-prototype.html. Цвета из tokens.css → следуют data-theme на . Now Playing — тёмный chrome (--chrome-bar-*). ============================================================ */ #view:has(> .music) { background: var(--paper-sink); color: var(--ink); min-height: 50vh; padding: 0.15rem 0 1rem; } .music { width: min(100%, 360px); max-width: 360px; margin: 0 auto; padding: 0; color: var(--ink); font-family: var(--grotesk); position: relative; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-screen, 20px); box-shadow: var(--shadow-raise); min-height: min(740px, calc(100vh - 8rem)); display: flex; flex-direction: column; } .music__scroll { flex: 1; min-height: 0; padding: 0 1rem 0.65rem; } .music__dock { flex: none; padding: 0.55rem 1rem 0.85rem; margin-top: auto; } .music__dock:empty { display: none; } /* Вкладка «Моя музыка» в кабинете: та же карточка, но без своей шапки — возвращаем ей верхний воздух и держим по центру пейна. */ .u-music { display: flex; justify-content: center; } .music--embed .music__scroll { padding-top: 0.9rem; } .music .top { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 1rem 0.65rem; } .music .top__title { flex: 1; text-align: center; font-family: var(--serif); font-size: 1rem; font-weight: 500; margin: 0; color: var(--ink); } .music .ico-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); background: var(--grad-raise); color: var(--ink); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-surface); padding: 0; } .music .ico-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .music .ico-btn--flat { background: transparent; border-color: transparent; box-shadow: none; } .music .hero__controls .ico-btn--flat, .music .ico-btn--flat.ico-btn--transport { position: relative; } .music .ico-btn--flat.is-on, .music .hero__controls .ico-btn--flat.is-on { color: var(--accent-deep); background: oklch(var(--accent-mid) / 0.14); box-shadow: inset 0 0 0 1px oklch(var(--accent-mid) / 0.38); } .music .ico-btn.is-on svg path { fill: var(--accent); stroke: var(--accent); } .music .ico-btn.is-on svg text { fill: var(--accent-deep); } .music .ico-btn:disabled { opacity: 0.35; cursor: default; } .music .ico-btn--sm { width: 32px; height: 32px; } .music .ico-btn--sm svg { width: 15px; height: 15px; } .music .hero { display: block; margin: -0.75rem 0 0.15rem; } .music .hero__eq-stage { width: min(100%, 260px); aspect-ratio: 1; margin: 0 auto; transform: translateY(-1.1rem); } .music .hero__eq-stage canvas { display: block; width: 100%; height: 100%; } .music .hero__wave { display: block; margin: 0 auto 0.1rem; max-width: 280px; padding: 0 0.15rem; transform: translateY(-0.5rem); } .music .track-wave { display: flex; flex-direction: column; line-height: 0; } .music .track-wave__viz { display: block; width: 100%; height: 44px; cursor: pointer; flex-shrink: 0; } .music .wave-seek__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.65rem; margin-top: 0.35rem; line-height: 1.2; min-width: 0; } .music .wave-seek__left { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.45rem; } .music .wave-seek__cur { flex: 0 0 2.4rem; font-family: var(--mono); font-size: 0.55rem; color: var(--ink-faint); } .music .wave-seek__track { flex: 1; min-width: 0; font-family: var(--grotesk); font-size: 0.72rem; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .music .wave-seek__dur { flex: 0 0 2.4rem; text-align: right; font-family: var(--mono); font-size: 0.55rem; color: var(--ink-faint); } .music .hero__controls { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin: 0.2rem 0 0.65rem; } .music .hero__controls .controls__main { width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer; background: var(--grad-accent); box-shadow: var(--shadow-btn-accent); display: grid; place-items: center; padding: 0; } .music .hero__controls .controls__icon { display: grid; place-items: center; line-height: 0; color: var(--accent-deep); } .music .hero__controls .controls__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: currentColor; stroke-width: 0; } .music .bar { --music-bar-h: 32px; display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; width: 100%; box-sizing: border-box; padding: 0; margin: -1.15rem 0 1.1rem; } .music .bar > .tab, .music .bar > .ico-btn { flex: 0 0 auto; } .music .bar .tab { height: var(--music-bar-h); min-height: var(--music-bar-h); max-height: var(--music-bar-h); padding: 0 0.55rem; box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; line-height: 1; white-space: nowrap; font-family: var(--mono); font-size: 0.58rem; letter-spacing: 0.05em; text-transform: uppercase; border-radius: var(--radius-pill); border: 1px solid var(--line); background: transparent; color: var(--ink); cursor: pointer; } .music .bar .tab.is-on { border-color: oklch(var(--accent-mid) / 0.35); color: var(--accent-deep); background: var(--grad-raise); box-shadow: var(--shadow-surface); } .music .tab__n { opacity: 0.55; margin-left: 0.2rem; } .music .bar > .ico-btn { width: var(--music-bar-h); height: var(--music-bar-h); min-width: var(--music-bar-h); min-height: var(--music-bar-h); max-width: var(--music-bar-h); max-height: var(--music-bar-h); padding: 0; margin: 0; box-sizing: border-box; border-radius: 50%; display: grid; place-items: center; } .music .bar > .ico-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; } .music .bar > .bar__upload { border: none; background: var(--grad-accent); color: oklch(var(--on-accent)); box-shadow: var(--shadow-surface); } .music .bar > .bar__upload:disabled { opacity: 0.55; cursor: default; } .music .bar > .bar__playmode.is-on { color: var(--accent-deep); border-color: oklch(var(--accent-mid) / 0.4); background: oklch(var(--accent-mid) / 0.14); } .music .bar > .bar__playmode.is-on svg path { fill: var(--accent); stroke: var(--accent); } .music .bar > .bar__playmode.is-on svg text { fill: var(--accent-deep); } .music__file { display: none; } .music__queue-title { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); margin: 0 0 0.4rem; padding: 0 0.15rem; } .music .tracks { display: flex; flex-direction: column; gap: 0.2rem; } .music__body > .tracks, .music .pls__body > .tracks { --music-track-row: 2.85rem; max-height: calc(var(--music-track-row) * 7 + 0.2rem * 6); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .music .track { display: grid; grid-template-columns: 26px 1fr auto; gap: 0.4rem; align-items: center; padding: 0.5rem 0.45rem; border-radius: 12px; border: 1px solid transparent; position: relative; } .music .track__main { display: flex; align-items: center; gap: 0.4rem; min-width: 0; cursor: pointer; grid-column: 1 / 3; } .music .track__acts { display: flex; align-items: center; gap: 0.1rem; grid-column: 3; } .music .track:hover { background: var(--paper-raise); } .music .track.is-active { background: var(--grad-wash); border-color: var(--line); box-shadow: var(--shadow-surface); } .music .track__num { font-family: var(--mono); font-size: 0.62rem; color: var(--ink-faint); text-align: center; width: 26px; flex-shrink: 0; } .music .track__eq { display: flex; gap: 2px; align-items: flex-end; justify-content: center; height: 14px; width: 26px; flex-shrink: 0; } .music .track__eq span, .music .music-eq__bar { width: 3px; background: var(--accent); border-radius: 1px; } .music .track__eq span:nth-child(1), .music .track__eq span:nth-child(3) { height: 6px; } .music .track__eq span:nth-child(2) { height: 12px; } .music .music-eq { display: flex; gap: 2px; align-items: flex-end; justify-content: center; width: 26px; height: 14px; } .music .music-eq__bar { flex: none; height: 100%; transform-origin: center bottom; } .music .track:not(.is-active) .music-eq__bar { background: var(--ink-faint); opacity: 0.35; } .music .track__meta { min-width: 0; flex: 1; } .music .track__name { font-size: 0.86rem; margin: 0 0 0.08rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--ink); } .music .track__sub { font-family: var(--mono); font-size: 0.55rem; color: var(--ink-faint); margin: 0; } .music .menu-wrap { position: relative; } .music .menu { position: absolute; right: 0; top: calc(100% + 2px); z-index: 20; min-width: 168px; background: var(--paper-raise); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-screen); padding: 0.3rem; display: none; } .music .menu.is-open { display: block; } .music .menu button { width: 100%; text-align: left; border: none; background: transparent; cursor: pointer; font-family: var(--grotesk); font-size: 0.78rem; padding: 0.45rem 0.55rem; border-radius: 8px; color: var(--ink); } .music .menu button:hover { background: var(--paper); } .music .menu button.danger { color: oklch(var(--warn)); } .music .pls-head { margin-bottom: 0.65rem; } .music .pls-new { width: 100%; min-height: 42px; border-radius: 12px; border: 1px dashed var(--line-strong); background: transparent; cursor: pointer; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--ink-faint); display: flex; align-items: center; justify-content: center; gap: 0.35rem; } .music .pls-new svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; } .music .pls { border: 1px solid var(--line); border-radius: 14px; background: var(--paper-raise); margin-bottom: 0.45rem; overflow: hidden; } .music .pls__head { display: flex; align-items: center; gap: 0.35rem; padding: 0.55rem 0.65rem; } .music .pls__toggle { flex: 1; display: flex; align-items: center; gap: 0.4rem; background: none; border: none; cursor: pointer; text-align: left; padding: 0; color: var(--ink); } .music .pls__toggle svg { width: 14px; height: 14px; stroke: var(--ink-faint); fill: none; stroke-width: 2; transition: transform 0.2s; flex-shrink: 0; } .music .pls.is-open .pls__toggle svg { transform: rotate(90deg); } .music .pls__name { font-family: var(--serif); font-size: 1rem; font-weight: 500; } .music .pls__count { font-family: var(--mono); font-size: 0.55rem; color: var(--ink-faint); } .music .pls__body { padding: 0 0.45rem 0.45rem; display: none; } .music .pls.is-open .pls__body { display: block; } .music .empty, .music .pls__empty { font-size: 0.8rem; color: var(--ink-faint); padding: 0.8rem 0.2rem; margin: 0; } /* ---- сквозной плеер (док) — те же токены темы ---- */ .player { position: fixed; left: 50%; transform: translateX(-50%); width: min(calc(100% - 1.2rem), 360px); bottom: calc(0.6rem + env(safe-area-inset-bottom, 0px)); z-index: 60; display: none; align-items: center; gap: 0.55rem; padding: 0.45rem 0.55rem; border-radius: 16px; background: var(--grad-raise); border: 1px solid var(--line); box-shadow: var(--shadow-screen); color: var(--ink); } .player.is-on { display: flex; } .player.is-docked { position: static; left: auto; bottom: auto; transform: none; width: 100%; z-index: 1; } .player__open { flex: 1; display: flex; align-items: center; gap: 0.55rem; min-width: 0; background: none; border: none; cursor: pointer; padding: 0; text-align: left; color: inherit; } .player__ring { width: 38px; height: 38px; flex-shrink: 0; border-radius: 50%; background: conic-gradient(from 200deg, var(--accent), var(--accent-deep)); box-shadow: 0 2px 8px oklch(var(--accent-mid) / 0.2); position: relative; overflow: hidden; } .player__ring canvas { width: 100%; height: 100%; display: block; border-radius: 50%; } .player__ring::after { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--paper-raise); pointer-events: none; } .player__title { font-size: 0.8rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player__artist { font-family: var(--mono); font-size: 0.55rem; color: var(--ink-faint); margin: 0; } .player__play { width: 42px; height: 42px; border-radius: 50%; border: none; cursor: pointer; flex-shrink: 0; background: var(--grad-accent); color: oklch(var(--on-accent)); box-shadow: var(--shadow-btn-accent-sm); display: grid; place-items: center; padding: 0; } .player__play svg { width: 16px; height: 16px; stroke: currentColor; fill: currentColor; stroke-width: 0; } .player .ico-btn { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); background: var(--grad-raise); color: var(--ink); cursor: pointer; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--shadow-surface); padding: 0; } .player .ico-btn svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 1.75; } /* ---- Now Playing — тёмный chrome (переключается с темой) ---- */ .np { position: fixed; inset: 0; z-index: 70; display: none; flex-direction: column; background: oklch(var(--chrome-bar-bg)); color: oklch(var(--chrome-bar-fg)); } .np.is-open { display: flex; } .np .top { padding: 1rem 1rem 0.65rem; } .np .top__title { color: oklch(var(--chrome-bar-fg)); } .np .ico-btn { width: 40px; height: 40px; border-radius: 50%; background: oklch(var(--chrome-bar-fg) / 0.08); border: 1px solid oklch(var(--chrome-bar-fg) / 0.15); color: oklch(var(--chrome-bar-fg)); box-shadow: none; display: grid; place-items: center; padding: 0; cursor: pointer; } .np .ico-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.75; } .np .ico-btn--flat { background: transparent; border-color: transparent; } .np .ico-btn.is-on { color: var(--accent); } .np .ico-btn.is-on svg path { fill: var(--accent); stroke: var(--accent); } .np .ico-btn--sm { width: 32px; height: 32px; } .np .ico-btn--sm svg { width: 15px; height: 15px; } .np__scroll { flex: 1; overflow: auto; padding: 0 1rem 1.5rem; } .np__eq-stage { width: min(100%, 260px); aspect-ratio: 1; margin: 0 auto 0; transform: translateY(-0.75rem); } .np__eq-stage canvas { display: block; width: 100%; height: 100%; } .np .track-wave { margin: 0.1rem auto 0.2rem; max-width: 280px; padding: 0 0.15rem; display: flex; flex-direction: column; line-height: 0; } .np .track-wave__viz { display: block; width: 100%; height: 44px; cursor: pointer; flex-shrink: 0; } .wave-seek__foot { display: flex; align-items: baseline; justify-content: space-between; gap: 0.65rem; margin-top: 0.35rem; line-height: 1.2; min-width: 0; } .wave-seek__left { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 0.45rem; } .wave-seek__cur { flex: 0 0 2.4rem; font-family: var(--mono); font-size: 0.55rem; } .wave-seek__track { flex: 1; min-width: 0; font-family: var(--grotesk); font-size: 0.72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wave-seek__dur { flex: 0 0 2.4rem; text-align: right; font-family: var(--mono); font-size: 0.55rem; } .np .wave-seek__cur { color: oklch(var(--chrome-bar-muted)); } .np .wave-seek__track { color: oklch(var(--chrome-bar-fg)); } .np .wave-seek__dur { color: oklch(var(--chrome-bar-muted)); } .np__controls { display: flex; align-items: center; justify-content: center; gap: 0.85rem; margin: -0.2rem 0 0; } .np__controls .controls__main { width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer; background: var(--grad-accent); box-shadow: var(--shadow-btn-accent); display: grid; place-items: center; padding: 0; } .np__controls .controls__icon { display: grid; place-items: center; line-height: 0; color: var(--accent-deep); } .np__controls .controls__icon svg { width: 22px; height: 22px; stroke: currentColor; fill: currentColor; stroke-width: 0; } .np__queue { max-width: 280px; margin: 0 auto; padding: 0 0.15rem; } .np__queue-title { font-family: var(--mono); font-size: 0.55rem; letter-spacing: 0.08em; text-transform: uppercase; color: oklch(var(--chrome-bar-muted)); margin: 0.35rem 0 0.35rem; padding: 0; } .np .queue .track { grid-template-columns: 26px 1fr auto; color: oklch(var(--chrome-bar-fg)); } .np .queue .track__main { grid-column: 1 / 3; } .np .queue .track__acts { grid-column: 3; } .np .queue .track__acts .ico-btn { background: transparent; border-color: transparent; box-shadow: none; color: oklch(var(--chrome-bar-fg) / 0.45); } .np .queue .track:hover { background: oklch(var(--chrome-bar-fg) / 0.05); } .np .queue .track.is-active { background: oklch(var(--chrome-bar-fg) / 0.07); border-color: oklch(var(--chrome-bar-fg) / 0.1); box-shadow: none; } .np .queue .track__sub, .np .queue .track__num { color: oklch(var(--chrome-bar-muted)); } .np .queue .track__name { color: oklch(var(--chrome-bar-fg)); } @media (max-width: 640px) { #view:has(> .music) { padding: 0 0 1rem; } .music { width: 100%; max-width: none; border-radius: 0; border-left: none; border-right: none; min-height: calc(100vh - 4rem); } .player:not(.is-docked) { width: calc(100% - 1.2rem); } .player__artist { display: none; } } @media (min-width: 641px) { #view:has(> .music) { display: flex; justify-content: center; padding: 0.5rem 1rem 1.5rem; } .music { border-radius: 36px; overflow: hidden; } /* Вкладка «Плейлисты» — класс ставит music.js в paintHero. */ .music--lists .music__scroll { grid-template-columns: 1fr; } .music--lists .bar, .music--lists .music__body { grid-column: 1; } }