/* ===================================================================== MUVIO · Skin Música (estilo Spotify) · FASE 1 (base) --------------------------------------------------------------------- Se carga SOLO cuando el dominio coincide con el ajuste "music_domain" (index.php añade la clase .music al ). Reescribe la paleta a un look tipo Spotify: verde #1DB954, fondos casi negros, botones píldora, tarjetas cuadradas. NO usa el logo ni la tipografía propietaria de Spotify: solo el lenguaje visual (layout + color). FASE 2 reestructura el layout en 3 zonas (biblioteca izquierda / contenido centro / barra de reproducción abajo). Aquí solo va la base. ===================================================================== */ /* ---- Paleta música: sobrescribe las variables sobre ---- */ body.music{ --brand-primary:#1DB954; /* verde principal */ --brand-accent:#1ed760; /* verde hover/brillo */ --bg:#000000; --surface:#121212; --surface-2:#181818; --elevated:#242424; --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13); --text:#ffffff; --muted:#b3b3b3; --muted-2:#7a7a7a; --grad:linear-gradient(120deg,#1DB954,#1ed760); --radius:8px; --rail-w:232px; --topbar-h:60px; --tabbar-h:62px; /* tipografía del sistema, redonda como Spotify pero sin su fuente */ --font-ui:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-d:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; } /* Ocultar todo lo exclusivo de video en modo música */ body.music [data-exp="video"]{ display:none !important; } /* ---- Fondo general con degradado sutil hacia negro (como Spotify) --- */ body.music{ background:#000; } body.music .app{ background:linear-gradient(180deg,#1a1a1a 0,#000 220px); min-height:100vh; } /* ---- Login música ---- */ body.music.is-auth{ background:radial-gradient(70% 60% at 50% 0%, rgba(29,185,84,.18), transparent 60%), #000; } body.music .auth-card{ background:#121212; border-color:rgba(255,255,255,.08); border-radius:14px; } body.music .auth-title{ letter-spacing:-.5px; font-weight:800; } body.music .field{ border-radius:6px; background:#2a2a2a; border-color:transparent; } body.music .field:focus-within{ border-color:#1DB954; } /* ===================== BARRA SUPERIOR ===================== */ body.music .topbar{ background:rgba(0,0,0,.72); backdrop-filter:blur(16px); border-bottom:1px solid rgba(255,255,255,.05); } body.music .tb-brand{ font-weight:800; letter-spacing:-.5px; } body.music .tb-logo{ border-radius:50%; } body.music .tb-search, body.music .tb-search-btn, body.music .tb-avatar{ background:#1a1a1a; border:1px solid transparent; color:#fff; } body.music .tb-search{ border-radius:500px; } body.music .tb-avatar{ border-radius:50%; background:#282828; } body.music .tb-avatar:hover, body.music .tb-search:hover{ background:#2a2a2a; } /* ===================== RAIL (nav lateral) ===================== */ body.music .rail{ background:#000; border-right:0; padding:16px 8px; gap:2px; } body.music .rail-item{ border-radius:6px; color:#b3b3b3; font-weight:700; font-size:14.5px; letter-spacing:.2px; } body.music .rail-item .ic{ width:24px; height:24px; } body.music .rail-item:hover{ background:transparent; color:#fff; } body.music .rail-item.active{ background:#1a1a1a; color:#fff; } /* ===================== BOTONES (píldora) ===================== */ body.music .btn{ border-radius:500px; font-weight:700; letter-spacing:.3px; } body.music .btn-primary{ background:#1DB954; color:#000; border:0; } body.music .btn-primary:hover{ background:#1ed760; transform:scale(1.04); filter:none; } body.music .btn-primary .ic{ color:#000; } body.music .btn:not(.btn-primary):not(.btn-block):hover{ transform:scale(1.03); } /* Botón grande de reproducir (verde, redondo, como Spotify) */ body.music .big-play{ background:#1DB954; box-shadow:0 8px 24px -6px rgba(0,0,0,.6); } body.music .big-play span .ic, body.music .big-play .ic{ color:#000; } body.music .big-play:hover{ transform:scale(1.06); background:#1ed760; } /* ===================== TARJETAS ===================== */ body.music .card{ background:#181818; border:0; border-radius:8px; padding:14px; transition:background .2s; } body.music .card:hover{ background:#282828; } body.music .card-thumb, body.music .card .thumb, body.music .card img{ border-radius:6px; } /* En música todas las carátulas tienden a cuadradas */ body.music .shelf-row .card{ width:180px; } body.music .shelf-head h3{ font-weight:800; letter-spacing:-.3px; font-size:22px; } body.music .section-title{ font-weight:800; letter-spacing:-.3px; } /* Círculos de artistas (Spotify los muestra redondos) */ body.music .artist-circle img, body.music .artist-avatar img{ border-radius:50%; } /* Tiles de género redondeados suaves */ body.music .genre-tile{ border-radius:8px; } /* ===================== REPRODUCTOR (barra inferior) ===================== */ /* Base tipo Spotify: barra negra sólida abajo. El layout completo llega en FASE 2; aquí solo el color y la forma. */ body.music .mini{ background:#181818; border-top:1px solid rgba(255,255,255,.08); height:72px; } body.music .mini-art{ border-radius:6px; } body.music .mini-prog i, body.music .mini-bar i, body.music #miniBar{ background:#1DB954; } body.music .mini-btn:hover{ color:#fff; } /* Reproductor expandido */ body.music .expand{ background:linear-gradient(180deg,#1f1f1f 0,#0a0a0a 60%,#000); } body.music .ex-badge{ background:#1DB954; color:#000; font-weight:700; } body.music .ex-play{ background:#fff; color:#000; } body.music .ex-play .ic{ color:#000; } body.music .ex-play:hover{ transform:scale(1.06); } body.music #exRange::-webkit-slider-thumb{ background:#fff; } body.music #exRange::-moz-range-thumb{ background:#fff; } body.music .ex-seek input[type=range]{ accent-color:#1DB954; } /* ===================== TABBAR (móvil) ===================== */ body.music .tabbar{ background:rgba(10,10,10,.96); backdrop-filter:blur(12px); border-top:1px solid rgba(255,255,255,.06); } body.music .tab{ color:#b3b3b3; } body.music .tab.active{ color:#fff; } /* ===================== DETALLE ===================== */ body.music .detail-title{ font-weight:800; letter-spacing:-.6px; } body.music .poster-hero img{ border-radius:8px; } /* Chips / pills verdes al estar activos */ body.music .chip.chip-on, body.music .pill.active{ background:rgba(29,185,84,.16); color:#1ed760; } /* Scrollbars finas oscuras */ body.music ::-webkit-scrollbar{ width:12px; height:12px; } body.music ::-webkit-scrollbar-thumb{ background:#4d4d4d; border-radius:8px; border:3px solid transparent; background-clip:content-box; } body.music ::-webkit-scrollbar-thumb:hover{ background:#6a6a6a; background-clip:content-box; } /* ===================================================================== FASE 2 · Sidebar de biblioteca (estilo Spotify) --------------------------------------------------------------------- El rail se ensancha y aloja: nav arriba (Inicio/Escuchar/Buscar) y, debajo, "Tu biblioteca" con las playlists del usuario. La barra de reproducción pasa a ancho completo abajo. ===================================================================== */ body.music{ --rail-w:300px; --player-h:82px; } /* Rail = columna izquierda con dos bloques */ body.music .rail{ bottom:0; width:var(--rail-w); padding:12px 8px 8px; gap:8px; background:#000; overflow:hidden; } body.music.has-player .rail{ bottom:var(--player-h); } /* Bloque de biblioteca dentro del rail */ body.music .lib-block{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; background:#121212; border-radius:10px; margin-top:4px; overflow:hidden; } body.music .lib-head{ display:flex; align-items:center; justify-content:space-between; padding:14px 14px 10px; } body.music .lib-title{ display:flex; align-items:center; gap:10px; color:#b3b3b3; font-weight:800; font-size:15px; letter-spacing:.2px; } body.music .lib-title .ic{ width:22px; height:22px; } body.music .lib-add{ width:32px; height:32px; border-radius:50%; border:0; cursor:pointer; background:#232323; color:#b3b3b3; font-size:20px; line-height:1; display:grid; place-items:center; transition:.15s; } body.music .lib-add:hover{ background:#2a2a2a; color:#fff; transform:scale(1.05); } /* Lista scrolleable de playlists */ body.music .lib-list{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:4px 6px 8px; display:flex; flex-direction:column; gap:2px; } body.music .lib-item{ display:flex; align-items:center; gap:12px; padding:8px; border-radius:6px; cursor:pointer; transition:background .15s; } body.music .lib-item:hover{ background:#1a1a1a; } body.music .lib-item.active{ background:#232323; } body.music .lib-ico{ width:48px; height:48px; border-radius:6px; flex:0 0 auto; overflow:hidden; background:#282828; display:grid; place-items:center; color:#8a8a8a; } body.music .lib-ico img{ width:100%; height:100%; object-fit:cover; } body.music .lib-ico.ph .ic{ width:22px; height:22px; } body.music .lib-ico.liked{ background:linear-gradient(135deg,#4600b0,#c13cff); color:#fff; } body.music .lib-ico.collage{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:0; } body.music .lib-ico.collage i{ display:block; width:100%; height:100%; background-size:cover; background-position:center; } body.music .lib-meta{ min-width:0; display:flex; flex-direction:column; gap:2px; } body.music .lib-n{ color:#fff; font-weight:600; font-size:14.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.music .lib-s{ color:#a7a7a7; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.music .lib-list::-webkit-scrollbar{ width:8px; } body.music .lib-list::-webkit-scrollbar-thumb{ background:#3a3a3a; border-radius:8px; } /* Barra de reproducción a ancho completo (abajo del todo) */ body.music .mini{ left:0; right:0; height:var(--player-h); } body.music.has-player .view{ padding-bottom:calc(var(--player-h) + 28px); } /* En móvil el rail se oculta (ya lo hace app.css); la biblioteca vive en la pestaña "Biblioteca". El sidebar solo aplica en escritorio. */ @media (max-width:900px){ body.music .lib-block{ display:none; } }