/* ========================================================================== Music system UI A self-contained dark "player app" surface that sits inside the social theme. Everything is scoped under .wo-music so it cannot leak into the rest of the site, and the persistent player bar (.wo-mplayer) lives on so playback survives SPA navigation. ========================================================================== */ .wo-music { --m-accent: #7c5cff; --m-accent-2: #c46bff; --m-accent-rgb: 124, 92, 255; --m-accent-2-rgb: 196, 107, 255; --m-surface: #0c0c11; --m-surface-2: #16161f; --m-elev: rgba(255, 255, 255, .055); --m-elev-hover: rgba(255, 255, 255, .095); --m-line: rgba(255, 255, 255, .09); --m-line-strong: rgba(255, 255, 255, .16); --m-text: #f3f3f6; --m-text-dim: #a5a5b2; --m-text-faint: #71717f; --m-radius: 22px; /* Widest measure for page content on very large screens */ --m-measure: 1640px; position: relative; /* Music runs edge to edge: the chat rail is hidden and .content-container is unwrapped on music pages (see "host layout" at the bottom of this file). */ margin: 0; min-height: calc(100vh - var(--wo-mtop-offset, 46px)); color: var(--m-text); background: radial-gradient(1100px 460px at 8% -14%, rgba(var(--m-accent-rgb), .30), transparent 62%), radial-gradient(900px 420px at 96% -4%, rgba(var(--m-accent-2-rgb), .20), transparent 60%), linear-gradient(180deg, var(--m-surface-2) 0%, var(--m-surface) 520px); -webkit-font-smoothing: antialiased; } .wo-music *, .wo-mplayer * { box-sizing: border-box; } .wo-music a { color: inherit; text-decoration: none; } .wo-music a:hover { color: #fff; text-decoration: none; } .wo-music h1, .wo-music h2, .wo-music h3, .wo-music h4 { color: var(--m-text); margin: 0; } .wo-micon { flex: 0 0 auto; } /* ---------- top bar ---------------------------------------------------- */ .wo-mtop { position: sticky; top: var(--wo-mtop-offset, 46px); z-index: 24; display: flex; align-items: center; gap: 14px; padding: 13px 26px; background: rgba(12, 12, 17, .74); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); border-bottom: 1px solid var(--m-line); } .wo-mtop-nav { display: flex; align-items: center; gap: 4px; min-width: 0; overflow-x: auto; scrollbar-width: none; } .wo-mtop-nav::-webkit-scrollbar { display: none; } .wo-mtop-nav a { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 650; color: var(--m-text-dim); white-space: nowrap; transition: background .18s, color .18s; } .wo-mtop-nav a:hover { background: var(--m-elev); color: var(--m-text); } .wo-mtop-nav a.is-active { background: #fff; color: #111; } .wo-mtop-nav a.is-active:hover { background: #fff; color: #111; } .wo-msearch { position: relative; margin-left: auto; flex: 0 1 300px; min-width: 150px; } .wo-msearch input { width: 100%; height: 40px; padding: 0 14px 0 42px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-elev); color: var(--m-text); font-size: 13.5px; outline: none; transition: border-color .18s, box-shadow .18s, background .18s; -webkit-appearance: none; appearance: none; } .wo-msearch input::placeholder { color: var(--m-text-faint); } .wo-msearch input:focus { background: rgba(255, 255, 255, .09); border-color: rgba(var(--m-accent-rgb), .75); box-shadow: 0 0 0 4px rgba(var(--m-accent-rgb), .16); } .wo-msearch .wo-micon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--m-text-faint); pointer-events: none; } .wo-msearch button { display: none; } /* ---------- page body -------------------------------------------------- */ .wo-mbody { max-width: var(--m-measure); margin: 0 auto; padding: 28px 26px 40px; } .wo-mbody--tight { padding-top: 20px; } .wo-msection { margin: 0 0 36px; } .wo-msection:last-child { margin-bottom: 0; } .wo-msection-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 16px; } .wo-msection-title { font-size: 20px; font-weight: 800; letter-spacing: -.015em; display: flex; align-items: center; gap: 9px; } .wo-msection-title .wo-micon { color: rgba(var(--m-accent-2-rgb), .95); } .wo-msection-sub { display: block; margin-top: 3px; font-size: 13px; font-weight: 400; letter-spacing: 0; color: var(--m-text-faint); } .wo-msection-more { flex: 0 0 auto; border: 0; background: transparent; font-family: inherit; cursor: pointer; font-size: 11.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--m-text-dim); padding: 7px 12px; border-radius: 999px; transition: background .18s, color .18s; } .wo-msection-more:hover { background: var(--m-elev); color: #fff; } /* ---------- hero ------------------------------------------------------- */ .wo-mhero { position: relative; padding: 44px 26px 36px; overflow: hidden; } .wo-mhero-bg { position: absolute; inset: -35% -12%; background-position: center; background-size: cover; filter: blur(54px) saturate(1.7); opacity: .6; transform: scale(1.12); } .wo-mhero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12, 12, 17, .28) 0%, rgba(12, 12, 17, .78) 62%, var(--m-surface) 100%); } .wo-mhero-inner { position: relative; z-index: 1; max-width: var(--m-measure); margin: 0 auto; display: flex; align-items: flex-end; gap: 26px; } .wo-mhero-art { position: relative; flex: 0 0 auto; width: 196px; height: 196px; border-radius: 16px; overflow: hidden; background: linear-gradient(140deg, #262634, #12121a) center/cover no-repeat; box-shadow: 0 26px 60px -16px rgba(0, 0, 0, .85); } .wo-mhero-art.is-round { border-radius: 50%; } .wo-mhero-copy { min-width: 0; flex: 1 1 auto; padding-bottom: 4px; } .wo-mkicker { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--m-text-dim); } .wo-mhero-title { margin: 10px 0 12px; font-size: clamp(28px, 4.2vw, 54px); line-height: 1.03; font-weight: 800; letter-spacing: -.025em; word-break: break-word; } .wo-mhero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 13.5px; color: var(--m-text-dim); } .wo-mhero-meta a { font-weight: 700; color: var(--m-text); } .wo-mhero-meta .sep { opacity: .45; } .wo-mhero-bio { margin: 12px 0 0; max-width: 60ch; font-size: 14px; line-height: 1.6; color: var(--m-text-dim); } .wo-mhero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 24px; } /* ---------- buttons ---------------------------------------------------- */ .wo-mbtn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 42px; padding: 0 20px; border: 1px solid transparent; border-radius: 999px; font-size: 13.5px; font-weight: 700; color: var(--m-text); background: var(--m-elev); cursor: pointer; transition: transform .16s, background .18s, border-color .18s, box-shadow .18s; -webkit-appearance: none; appearance: none; } .wo-mbtn:hover { background: var(--m-elev-hover); border-color: var(--m-line); color: #fff; } .wo-mbtn:active { transform: translateY(1px); } .wo-mbtn:disabled { opacity: .5; cursor: default; } .wo-mbtn--primary, .wo-mbtn--primary:hover { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); border-color: transparent; color: #fff; box-shadow: 0 12px 28px -12px rgba(var(--m-accent-rgb), .95); } .wo-mbtn--danger { color: #ff8f8f; } .wo-mbtn--danger:hover { background: rgba(255, 90, 90, .14); color: #ffb3b3; } .wo-mbtn--sm { height: 34px; padding: 0 14px; font-size: 12.5px; } .wo-mbtn--icon { width: 34px; height: 34px; padding: 0; border-radius: 50%; color: var(--m-text-dim); background: transparent; } .wo-mbtn--icon:hover { background: var(--m-elev-hover); color: #fff; } /* big circular hero play */ .wo-mplay-lg { display: inline-grid; place-items: center; width: 58px; height: 58px; border: 0; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); box-shadow: 0 14px 32px -10px rgba(var(--m-accent-rgb), 1); cursor: pointer; transition: transform .16s; } .wo-mplay-lg:hover { transform: scale(1.07); } /* the player swaps these glyphs at runtime, so pin the size to the button */ .wo-mplay-lg .wo-micon { width: 26px; height: 26px; margin-left: 2px; } .wo-mtrack-btn .wo-micon { width: 18px; height: 18px; } .wo-mcard-play .wo-micon { width: 20px; height: 20px; } /* ---------- artwork placeholder --------------------------------------- */ .wo-mart-ph { position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255, 255, 255, .17); } /* ---------- shelves & grids ------------------------------------------- */ .wo-mshelf-wrap { position: relative; } .wo-mshelf { display: grid; grid-auto-flow: column; grid-auto-columns: 172px; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-behavior: smooth; padding: 2px 2px 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .18) transparent; } .wo-mshelf > * { scroll-snap-align: start; } .wo-mshelf::-webkit-scrollbar { height: 6px; } .wo-mshelf::-webkit-scrollbar-track { background: transparent; } .wo-mshelf::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .16); border-radius: 999px; } .wo-mshelf-nav { position: absolute; top: 32%; z-index: 3; display: none; place-items: center; width: 38px; height: 38px; border: 1px solid var(--m-line); border-radius: 50%; background: rgba(16, 16, 22, .9); color: #fff; cursor: pointer; transition: transform .16s, background .18s; } .wo-mshelf-nav:hover { background: rgba(28, 28, 38, .96); transform: scale(1.08); } .wo-mshelf-nav--prev { left: -14px; } .wo-mshelf-nav--next { right: -14px; } .wo-mshelf-wrap.can-prev:hover .wo-mshelf-nav--prev, .wo-mshelf-wrap.can-next:hover .wo-mshelf-nav--next { display: grid; } .wo-mgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 16px; } /* ---------- card ------------------------------------------------------- */ .wo-mcard { display: block; padding: 12px; border: 1px solid transparent; border-radius: 16px; background: var(--m-elev); transition: transform .2s, background .2s, border-color .2s; } .wo-mcard:hover { background: var(--m-elev-hover); border-color: var(--m-line); transform: translateY(-3px); } .wo-mcard-art { position: relative; aspect-ratio: 1 / 1; margin-bottom: 12px; border-radius: 11px; overflow: hidden; background: linear-gradient(140deg, #262634, #12121a) center/cover no-repeat; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .9); } .wo-mcard-art.is-round { border-radius: 50%; } .wo-mcard-play { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 42px; height: 42px; border: 0; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); box-shadow: 0 10px 22px -8px rgba(0, 0, 0, .85); opacity: 0; transform: translateY(10px); cursor: pointer; transition: opacity .2s, transform .2s; } .wo-mcard:hover .wo-mcard-play, .wo-mcard.is-playing .wo-mcard-play, .wo-mcard-play:focus-visible { opacity: 1; transform: none; } .wo-mcard.is-current .wo-mcard-title { color: rgba(var(--m-accent-2-rgb), 1); } .wo-mcard-play .wo-micon { margin-left: 2px; } .wo-mcard-title { display: flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 700; line-height: 1.32; } .wo-mcard-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wo-mcard-meta { margin-top: 4px; font-size: 12.5px; color: var(--m-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- track list ------------------------------------------------- */ .wo-mtracks { display: flex; flex-direction: column; gap: 2px; } .wo-mtracks-head, .wo-mtrack { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 140px) 74px 52px auto; align-items: center; gap: 14px; } .wo-mtracks-head { padding: 0 14px 10px; margin-bottom: 6px; border-bottom: 1px solid var(--m-line); font-size: 11px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; color: var(--m-text-faint); } .wo-mtrack { padding: 9px 14px; border-radius: 12px; transition: background .16s; } .wo-mtrack:hover { background: var(--m-elev); } .wo-mtrack.is-playing { background: rgba(var(--m-accent-rgb), .13); } .wo-mtrack-lead { position: relative; display: grid; place-items: center; height: 34px; } .wo-mtrack-num { font-size: 13.5px; font-variant-numeric: tabular-nums; color: var(--m-text-faint); transition: opacity .14s; } .wo-mtrack-btn { position: absolute; inset: 0; display: grid; place-items: center; border: 0; border-radius: 9px; background: transparent; color: #fff; opacity: 0; cursor: pointer; transition: opacity .14s, background .16s; } .wo-mtrack-btn:hover { background: var(--m-elev-hover); } .wo-mtrack:hover .wo-mtrack-num { opacity: 0; } .wo-mtrack:hover .wo-mtrack-btn, .wo-mtrack-btn:focus-visible { opacity: 1; } .wo-mtrack.is-playing .wo-mtrack-num { display: none; } .wo-mtrack-main { display: flex; align-items: center; gap: 12px; min-width: 0; } .wo-mtrack-art { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 8px; overflow: hidden; background: linear-gradient(140deg, #262634, #12121a) center/cover no-repeat; } .wo-mtrack-text { min-width: 0; } .wo-mtrack-title { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 650; color: var(--m-text); overflow: hidden; } .wo-mtrack-title > a, .wo-mtrack-title > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wo-mtrack.is-current .wo-mtrack-title { color: rgba(var(--m-accent-2-rgb), 1); } .wo-mtrack-sub { margin-top: 2px; font-size: 12.5px; color: var(--m-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wo-mtrack-cell { font-size: 12.5px; color: var(--m-text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .wo-mtrack-cell--num { font-variant-numeric: tabular-nums; } .wo-mtrack-actions { display: flex; align-items: center; justify-content: flex-end; gap: 4px; opacity: .35; transition: opacity .16s; } .wo-mtrack:hover .wo-mtrack-actions, .wo-mtrack-actions:focus-within { opacity: 1; } /* animated equaliser shown on the row that is currently playing */ .wo-meq { display: none; align-items: flex-end; gap: 2px; height: 15px; } /* while playing the row shows the equaliser, and swaps to a pause button on hover */ .wo-mtrack.is-playing .wo-meq { display: flex; } .wo-mtrack.is-playing .wo-mtrack-btn { opacity: 0; } .wo-mtrack.is-playing:hover .wo-meq { display: none; } .wo-mtrack.is-playing:hover .wo-mtrack-btn, .wo-mtrack.is-playing .wo-mtrack-btn:focus-visible { opacity: 1; } .wo-meq i { width: 3px; height: 5px; border-radius: 2px; background: rgba(var(--m-accent-2-rgb), 1); animation: wo-meq-bounce .9s ease-in-out infinite; } .wo-meq i:nth-child(2) { animation-delay: .18s; } .wo-meq i:nth-child(3) { animation-delay: .36s; } .wo-meq i:nth-child(4) { animation-delay: .54s; } @keyframes wo-meq-bounce { 0%, 100% { height: 4px; } 50% { height: 15px; } } /* ---------- chips, badges, tabs --------------------------------------- */ .wo-mchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-elev); font-size: 12px; font-weight: 650; color: var(--m-text-dim); } .wo-mverified { display: inline-flex; align-items: center; color: #4ea6ff; } .wo-mtabs { display: flex; gap: 6px; margin-bottom: 22px; flex-wrap: wrap; } .wo-mtabs a { padding: 9px 16px; border: 1px solid var(--m-line); border-radius: 999px; background: var(--m-elev); font-size: 13px; font-weight: 650; color: var(--m-text-dim); transition: background .18s, color .18s, border-color .18s; } .wo-mtabs a:hover { background: var(--m-elev-hover); color: #fff; } .wo-mtabs a.is-active, .wo-mtabs a.is-active:hover { background: #fff; border-color: #fff; color: #111; } /* ---------- empty state ----------------------------------------------- */ .wo-mempty { padding: 46px 24px; border: 1px dashed var(--m-line); border-radius: 18px; background: rgba(255, 255, 255, .02); text-align: center; } .wo-mempty-ic { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 16px; border-radius: 18px; background: var(--m-elev); color: var(--m-text-faint); } .wo-mempty-title { font-size: 16px; font-weight: 750; } .wo-mempty-text { margin: 6px auto 0; max-width: 46ch; font-size: 13.5px; line-height: 1.6; color: var(--m-text-faint); } .wo-mempty .wo-mbtn { margin-top: 18px; } .wo-mprose { max-width: 72ch; font-size: 14.5px; line-height: 1.7; color: var(--m-text-dim); } /* ---------- forms ------------------------------------------------------ */ .wo-mpanel { padding: 24px; border: 1px solid var(--m-line); border-radius: 18px; background: rgba(255, 255, 255, .025); } .wo-mform-grid { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 28px; align-items: start; } .wo-mfield { margin-bottom: 18px; } .wo-mfield:last-child { margin-bottom: 0; } .wo-mlabel { display: block; margin-bottom: 8px; font-size: 11.5px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; color: var(--m-text-dim); } .wo-mhint { margin-top: 7px; font-size: 12.5px; color: var(--m-text-faint); } .wo-music input[type="text"].wo-minput, .wo-music input[type="search"].wo-minput, .wo-music input[type="number"].wo-minput, .wo-music textarea.wo-minput, .wo-music select.wo-minput { width: 100%; padding: 12px 14px; border: 1px solid var(--m-line); border-radius: 12px; background: var(--m-elev); color: var(--m-text); font-size: 14px; font-family: inherit; line-height: 1.5; outline: none; transition: border-color .18s, box-shadow .18s, background .18s; -webkit-appearance: none; appearance: none; } .wo-music textarea.wo-minput { min-height: 96px; resize: vertical; } .wo-music select.wo-minput { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23a5a5b2' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; } .wo-music select.wo-minput option { background: #17171f; color: #f3f3f6; } .wo-music .wo-minput::placeholder { color: var(--m-text-faint); } .wo-music .wo-minput:focus { background: rgba(255, 255, 255, .09); border-color: rgba(var(--m-accent-rgb), .75); box-shadow: 0 0 0 4px rgba(var(--m-accent-rgb), .15); } /* file drop zone */ .wo-mdrop { position: relative; display: block; padding: 24px 20px; border: 1.5px dashed var(--m-line-strong); border-radius: 16px; background: rgba(255, 255, 255, .022); text-align: center; cursor: pointer; transition: border-color .18s, background .18s; } .wo-mdrop:hover, .wo-mdrop.is-over { border-color: rgba(var(--m-accent-rgb), .85); background: rgba(var(--m-accent-rgb), .09); } .wo-mdrop input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .wo-mdrop-ic { display: grid; place-items: center; width: 46px; height: 46px; margin: 0 auto 12px; border-radius: 14px; background: var(--m-elev); color: var(--m-text-dim); } .wo-mdrop-title { font-size: 14px; font-weight: 700; } .wo-mdrop-sub { margin-top: 5px; font-size: 12.5px; color: var(--m-text-faint); } .wo-mdrop.has-file { border-style: solid; border-color: rgba(var(--m-accent-rgb), .6); background: rgba(var(--m-accent-rgb), .07); } /* square cover picker */ .wo-mcover-pick { position: relative; display: block; width: 100%; aspect-ratio: 1 / 1; border: 1.5px dashed var(--m-line-strong); border-radius: 16px; overflow: hidden; background: linear-gradient(140deg, #23232f, #12121a) center/cover no-repeat; cursor: pointer; transition: border-color .18s; } .wo-mcover-pick:hover { border-color: rgba(var(--m-accent-rgb), .85); } .wo-mcover-pick input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .wo-mcover-overlay { position: absolute; inset: auto 0 0 0; padding: 10px 12px; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .82)); font-size: 12px; font-weight: 650; color: #fff; text-align: center; } .wo-mcover-pick.has-file { border-style: solid; border-color: var(--m-line); } /* switch */ .wo-mswitch { display: flex; align-items: center; gap: 13px; padding: 14px 16px; border: 1px solid var(--m-line); border-radius: 14px; background: var(--m-elev); cursor: pointer; } .wo-mswitch input { position: absolute; opacity: 0; pointer-events: none; } .wo-mswitch-track { position: relative; flex: 0 0 auto; width: 44px; height: 26px; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: background .2s; } .wo-mswitch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: transform .2s; } .wo-mswitch input:checked + .wo-mswitch-track { background: linear-gradient(135deg, var(--m-accent), var(--m-accent-2)); } .wo-mswitch input:checked + .wo-mswitch-track::after { transform: translateX(18px); } .wo-mswitch-copy { min-width: 0; } .wo-mswitch-title { font-size: 13.5px; font-weight: 700; } .wo-mswitch-sub { margin-top: 2px; font-size: 12.5px; color: var(--m-text-faint); } /* segmented control */ .wo-mseg { display: inline-flex; gap: 4px; padding: 4px; border: 1px solid var(--m-line); border-radius: 13px; background: var(--m-elev); } .wo-mseg label { margin: 0; cursor: pointer; } .wo-mseg input { position: absolute; opacity: 0; pointer-events: none; } .wo-mseg span { display: inline-flex; align-items: center; gap: 7px; padding: 8px 15px; border-radius: 10px; font-size: 13px; font-weight: 650; color: var(--m-text-dim); transition: background .18s, color .18s; } .wo-mseg label:hover span { color: #fff; } .wo-mseg input:checked + span { background: #fff; color: #111; } .wo-mstatus { margin-left: 12px; font-size: 13px; color: var(--m-text-dim); } .wo-mstatus.is-error { color: #ff9c9c; } .wo-mform-actions { display: flex; align-items: center; gap: 10px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--m-line); } /* inline add-to-playlist row */ .wo-minline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .wo-minline select.wo-minput { width: auto; min-width: 220px; } /* ========================================================================== Persistent player bar (lives on , outside the SPA content node) ========================================================================== */ body.wo-has-mplayer { padding-bottom: 84px; } .wo-mplayer { --m-accent: #7c5cff; --m-accent-2: #c46bff; --m-accent-rgb: 124, 92, 255; --m-accent-2-rgb: 196, 107, 255; position: fixed; left: var(--wo-mplayer-left, 0px); right: var(--wo-mplayer-right, 0px); bottom: 0; z-index: 1042; display: none; align-items: center; gap: 16px; height: 76px; padding: 0 18px; background: rgba(11, 11, 15, .9); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border-top: 1px solid rgba(255, 255, 255, .09); color: #f3f3f6; font-family: inherit; -webkit-font-smoothing: antialiased; } .wo-mplayer.is-ready { display: flex; } .wo-mplayer a { color: inherit; text-decoration: none; } .wo-mp-now { display: flex; align-items: center; gap: 12px; flex: 1 1 220px; min-width: 0; } .wo-mp-art { position: relative; flex: 0 0 auto; width: 52px; height: 52px; border-radius: 10px; overflow: hidden; background: linear-gradient(140deg, #262634, #12121a) center/cover no-repeat; box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .9); } .wo-mp-text { min-width: 0; } .wo-mp-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wo-mp-artist { margin-top: 2px; font-size: 12px; color: #a5a5b2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .wo-mp-artist:hover { color: #fff; } .wo-mp-center { display: flex; flex: 1 1 460px; flex-direction: column; align-items: center; gap: 5px; max-width: 620px; min-width: 0; } .wo-mp-controls { display: flex; align-items: center; gap: 8px; } .wo-mp-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: #c9c9d4; cursor: pointer; transition: background .16s, color .16s, transform .16s; } .wo-mp-btn:hover { background: rgba(255, 255, 255, .1); color: #fff; } .wo-mp-btn.is-on { color: #c46bff; } .wo-mp-btn.is-on::after { content: ""; position: absolute; bottom: 3px; width: 4px; height: 4px; border-radius: 50%; background: currentColor; } .wo-mp-btn--repeat, .wo-mp-btn--shuffle { position: relative; } .wo-mp-toggle { width: 40px; height: 40px; background: #fff; color: #111; } .wo-mp-toggle:hover { background: #fff; color: #111; transform: scale(1.07); } .wo-mp-toggle .wo-micon { margin-left: 1px; } .wo-mp-toggle .wo-mp-ic-pause { display: none; margin-left: 0; } .wo-mplayer.is-playing .wo-mp-toggle .wo-mp-ic-play { display: none; } .wo-mplayer.is-playing .wo-mp-toggle .wo-mp-ic-pause { display: block; } .wo-mp-seek { display: flex; align-items: center; gap: 10px; width: 100%; } .wo-mp-time { min-width: 36px; font-size: 11px; color: #8a8a97; font-variant-numeric: tabular-nums; text-align: center; } .wo-mp-rail { position: relative; flex: 1 1 auto; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .15); cursor: pointer; touch-action: none; } .wo-mp-buffer, .wo-mp-fill { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-radius: 999px; pointer-events: none; } .wo-mp-buffer { background: rgba(255, 255, 255, .14); } .wo-mp-fill { background: linear-gradient(90deg, var(--m-accent), var(--m-accent-2)); } .wo-mp-knob { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .7); opacity: 0; transform: translateY(-50%); pointer-events: none; transition: opacity .16s; } .wo-mp-rail:hover .wo-mp-knob, .wo-mp-rail.is-dragging .wo-mp-knob { opacity: 1; } .wo-mp-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: 1 1 200px; } .wo-mp-vol { width: 84px; } .wo-mp-queue-count { min-width: 20px; padding: 2px 6px; border-radius: 999px; background: rgba(255, 255, 255, .1); font-size: 11px; font-weight: 700; color: #a5a5b2; text-align: center; } /* ---------- responsive ------------------------------------------------- */ @media (max-width: 1100px) { .wo-mform-grid { grid-template-columns: 220px minmax(0, 1fr); } } @media (max-width: 980px) { .wo-mtracks-head { display: none; } .wo-mtrack { grid-template-columns: 34px minmax(0, 1fr) 52px auto; } .wo-mtrack-cell--genre, .wo-mtrack-cell--plays { display: none; } } @media (max-width: 900px) { .wo-mplayer { height: auto; padding: 10px 12px 12px; flex-wrap: wrap; gap: 10px; } .wo-mp-now { flex: 1 1 auto; } .wo-mp-center { order: 3; flex: 1 1 100%; max-width: none; } .wo-mp-right { flex: 0 0 auto; } .wo-mp-vol, .wo-mp-btn--shuffle, .wo-mp-btn--repeat { display: none; } body.wo-has-mplayer { padding-bottom: 132px; } } @media (max-width: 820px) { .wo-mhero { padding: 26px 16px 24px; } .wo-mhero-inner { flex-direction: column; align-items: flex-start; gap: 18px; } .wo-mhero-art { width: 148px; height: 148px; } .wo-mbody { padding: 20px 16px 28px; } .wo-mtop { flex-wrap: wrap; padding: 12px 16px; } .wo-msearch { flex: 1 1 100%; margin-left: 0; } .wo-mform-grid { grid-template-columns: minmax(0, 1fr); } .wo-mcover-pick { max-width: 220px; } .wo-mshelf { grid-auto-columns: 148px; } } @media (prefers-reduced-motion: reduce) { .wo-music *, .wo-mplayer * { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .wo-mshelf { scroll-behavior: auto; } } /* ========================================================================== Host layout: music owns the full page width Scoped to body.wo-page-music, which container.phtml sets on load and Wo_ApplyAjaxPageBodyContext() keeps in sync during SPA navigation. The :has() twins cover the first paint of a cached AJAX response. ========================================================================== */ body.wo-page-music .content-container.container, .content-container.container:has(.wo-music) { max-width: none; width: 100%; padding-left: 0; padding-right: 0; } body.wo-page-music .content-container.container #contnet, .content-container.container:has(.wo-music) #contnet { max-width: none; width: 100%; } /* The chat rail is a fixed 250px column that the theme reserves with body padding. Music reclaims that space and hides the rail. */ body.wo-page-music, body.wo-page-music .navbar-default, body.wo-page-music .wo_about_wrapper_parent { padding-left: 0 !important; padding-right: 0 !important; } body.wo-page-music .chat-all-container { display: none !important; } body.wo-page-music .wow_main_float_head { right: 0 !important; } body.wo-lang-rtl.wo-page-music .wow_main_float_head { left: 0 !important; } /* ========================================================================== The global header adopts the music palette while browsing music ========================================================================== */ body.wo-page-music { --fb-header-icon-hover-bg: rgba(255, 255, 255, .12); } body.wo-page-music .header-container, body.wo-page-music .navbar-default { background: linear-gradient(90deg, rgba(var(--m-accent-rgb, 124, 92, 255), .16) 0%, rgba(var(--m-accent-2-rgb, 196, 107, 255), .10) 46%, rgba(0, 0, 0, 0) 78%), linear-gradient(180deg, #16161f 0%, #0c0c11 100%) !important; border: none !important; border-bottom: 1px solid rgba(255, 255, 255, .08) !important; box-shadow: none !important; } body.wo-page-music .navbar-default .navbar-nav > li > a, body.wo-page-music .navbar-default #head_menu_rght > li > a, body.wo-page-music .navbar-default .wo-desktop-search-toggle, body.wo-page-music .navbar-default .wo-mobile-header-btn, body.wo-page-music .navbar-default .user-menu-combination, body.wo-page-music .navbar-default .sixteen-font-size, body.wo-page-music .navbar-default .wo-desktop-mid-nav a { color: #ece9f7 !important; } body.wo-page-music .navbar-default .navbar-nav > li > a:hover, body.wo-page-music .navbar-default .navbar-nav > li > a:focus, body.wo-page-music .navbar-default .navbar-nav > li.open > a, body.wo-page-music .navbar-default .navbar-nav > .active > a { color: #fff !important; background-color: rgba(255, 255, 255, .12) !important; } body.wo-page-music .navbar-default .search-container .form-control, body.wo-page-music .navbar-default .search-input { background: rgba(255, 255, 255, .09) !important; border-color: rgba(255, 255, 255, .12) !important; color: #f3f3f6 !important; box-shadow: none !important; } body.wo-page-music .navbar-default .search-input::-webkit-input-placeholder { color: rgba(243, 243, 246, .55) !important; } body.wo-page-music .navbar-default .search-input::placeholder { color: rgba(243, 243, 246, .55) !important; } body.wo-page-music .navbar-default .search-container .inner-addon svg, body.wo-page-music .navbar-default .wow_hdr_innr_left svg, body.wo-page-music .navbar-default #head_menu_rght svg, body.wo-page-music .navbar-default .wo-desktop-mid-nav svg, body.wo-page-music .navbar-default .sixteen-font-size svg { color: rgba(243, 243, 246, .86) !important; stroke: currentColor !important; fill: none; } body.wo-page-music .navbar-default .new-update-alert { background: linear-gradient(135deg, var(--m-accent, #7c5cff), var(--m-accent-2, #c46bff)) !important; color: #fff !important; border-color: transparent !important; } body.wo-page-music .navbar-default .dropdown-menu { background: #16161f !important; border: 1px solid rgba(255, 255, 255, .1) !important; color: #f3f3f6 !important; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7) !important; } body.wo-page-music .navbar-default .dropdown-menu > li > a, body.wo-page-music .navbar-default .dropdown-menu .notification-text, body.wo-page-music .navbar-default .dropdown-menu .search-advanced-link { color: #ece9f7 !important; } body.wo-page-music .navbar-default .dropdown-menu > li > a:hover, body.wo-page-music .navbar-default .dropdown-menu > li > a:focus { background: rgba(255, 255, 255, .08) !important; color: #fff !important; } body.wo-page-music .navbar-default .wo-desktop-mid-nav .wo-dnav.is-active, body.wo-page-music .navbar-default .wo-desktop-mid-nav .wo-dnav:hover { background: rgba(255, 255, 255, .12) !important; color: #fff !important; } /* Full-bleed: no footer chrome under the player */ body.wo-page-music .content-container > footer, body.wo-page-music .ad-placement-header-footer { display: none; } body.wo-page-music .wo-mplayer { left: 0; right: 0; } body.wo-page-music .wo-ajax-page-load { padding: 0; background: radial-gradient(1100px 460px at 8% -14%, rgba(var(--m-accent-rgb), .22), transparent 62%), linear-gradient(180deg, var(--m-surface-2) 0%, var(--m-surface) 520px); min-height: calc(100vh - var(--wo-mtop-offset, 46px)); } body.wo-page-music .wo-ajax-page-load__inner { max-width: var(--m-measure); margin: 0 auto; padding: 28px 26px 40px; } body.wo-page-music .wo-ajax-page-load .wo_loading_post { background: rgba(255, 255, 255, .045); box-shadow: none; } /* ========================================================================== Header dropdown panels – notifications, messages, profile account menu ========================================================================== */ body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown, body.wo-page-music .navbar-default .dropdown-menu.ani-acc-menu { background: #16161f !important; border: 1px solid rgba(255, 255, 255, .1) !important; color: #f3f3f6 !important; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7) !important; } body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .notification-list, body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .notification-list a, body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .notification-text, body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .notification-text p, body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .notification-text span, body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .messages-list, body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .messages-list a, body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown h4, body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown p { color: #ece9f7 !important; } body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .notification-list:hover, body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .messages-list:hover { background: rgba(255, 255, 255, .06) !important; } body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .see_all_not a, body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .search-advanced-link, body.wo-page-music .navbar-default .dropdown-menu.notifications-dropdown .compose-message-link { color: var(--m-accent, #7c5cff) !important; } body.wo-page-music .navbar-default .dropdown-menu.ani-acc-menu > li > a { color: #ece9f7 !important; } body.wo-page-music .navbar-default .dropdown-menu.ani-acc-menu > li > a:hover, body.wo-page-music .navbar-default .dropdown-menu.ani-acc-menu > li > a:focus { background: rgba(255, 255, 255, .08) !important; color: #fff !important; } body.wo-page-music .navbar-default .dropdown-menu.ani-acc-menu .wo_user_name { color: #fff !important; } body.wo-page-music .navbar-default .dropdown-menu.ani-acc-menu .divider, body.wo-page-music .navbar-default .dropdown-menu.ani-acc-menu > li > hr { border-color: rgba(255, 255, 255, .1) !important; background: transparent !important; } body.wo-page-music .navbar-default .dropdown-menu.ani-acc-menu .icon_main, body.wo-page-music .navbar-default .dropdown-menu.ani-acc-menu .icon_main svg { color: rgba(243, 243, 246, .7) !important; fill: none !important; stroke: currentColor !important; } body.wo-page-music .navbar-default .dropdown-menu.ani-acc-menu .icon_main_fill, body.wo-page-music .navbar-default .dropdown-menu.ani-acc-menu .icon_main_fill svg { color: rgba(243, 243, 246, .7) !important; } /* Create-menu dropdown */ body.wo-page-music .navbar-default .dropdown-menu.create_head_menu { background: #16161f !important; border: 1px solid rgba(255, 255, 255, .1) !important; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7) !important; } body.wo-page-music .navbar-default .dropdown-menu.create_head_menu > li > a { color: #ece9f7 !important; } body.wo-page-music .navbar-default .dropdown-menu.create_head_menu > li > a:hover { background: rgba(255, 255, 255, .08) !important; color: #fff !important; } /* Search dropdown */ body.wo-page-music .navbar-default .dropdown-menu.search-dropdown-container { background: #16161f !important; border: 1px solid rgba(255, 255, 255, .1) !important; color: #f3f3f6 !important; box-shadow: 0 18px 40px -20px rgba(0, 0, 0, .7) !important; } body.wo-page-music .navbar-default .dropdown-menu.search-dropdown-container a, body.wo-page-music .navbar-default .dropdown-menu.search-dropdown-container p, body.wo-page-music .navbar-default .dropdown-menu.search-dropdown-container span { color: #ece9f7 !important; } body.wo-page-music .navbar-default .dropdown-menu.search-dropdown-container a:hover { background: rgba(255, 255, 255, .08) !important; } /* ---------- Fix bottom white line (global page footer/border) ---------- */ body.wo-page-music, body.wo-page-music .layout_content, body.wo-page-music #content-container, body.wo-page-music .content-container, body.wo-page-music .main-content, body.wo-page-music #main-content { border-bottom: none !important; box-shadow: none !important; } body.wo-page-music .content-container { padding-bottom: 0 !important; margin-bottom: 0 !important; min-height: 100vh; } body.wo-page-music .footer, body.wo-page-music footer, body.wo-page-music .wo-footer, body.wo-page-music .ad-placement-header-footer, body.wo-page-music #footer { display: none !important; } body.wo-page-music .right-sidebar, body.wo-page-music #right-sidebar { display: none !important; }