/* nallium-music-frontend — design system * * Palette/typographie ancrées sur les tokens partagés du reste de la suite * (--text/--muted/--blue/--green/--amber/--pink/--violet/--red/--cyan/ * --border/--radius, voir nallium-drive-frontend/css/style.css) MAIS avec * un thème SOMBRE par défaut et un thème clair optionnel (cahier des * charges, section "Design & expérience utilisateur" : "thème sombre par * défaut, thème clair en option") — contrairement au reste de la suite * bureautique (Drive/Docs/Sheets/Slides), qui reste volontairement clair * uniquement. Bascule via une classe .theme-light sur (voir * js/app.js::applyTheme), persistée en localStorage (préférence d'affichage * pure, jamais une donnée à synchroniser côté serveur). * * Disposition : barre latérale fixe (cahier des charges : Accueil, * Recherche, Découvrir, Ma bibliothèque, Mes playlists, Mes albums, Mes * artistes, Mes téléchargements, Favoris, Historique) + zone de contenu + * lecteur permanent en bas de page (jamais démonté entre deux vues). */ :root { --text: #f2f4fa; --muted: #9aa3ba; --muted-2: #6b7490; --blue: #60a5fa; --green: #34d399; --amber: #fbbf24; --pink: #f472b6; --violet: #a78bfa; --red: #f87171; --cyan: #22d3ee; --bg: #0c0e16; --bg-elevated: #12141f; --panel: #171a29; --panel-solid: #1b1e2e; --panel-hover: #21253a; --border: rgba(255, 255, 255, 0.08); --shadow: 0 24px 80px rgba(0, 0, 0, 0.45); --shadow-soft: 0 14px 38px rgba(0, 0, 0, 0.32); --radius: 14px; --radius-sm: 8px; --player-height: 88px; --sidebar-width: 232px; --accent-gradient: linear-gradient(135deg, #a78bfa, #f472b6); } html.theme-light { --text: #172033; --muted: #64748b; --muted-2: #94a3b8; --blue: #3b82f6; --green: #16a34a; --amber: #d97706; --pink: #db2777; --violet: #7c3aed; --red: #dc2626; --cyan: #0891b2; --bg: #f5f6fb; --bg-elevated: #ffffff; --panel: #ffffff; --panel-solid: #ffffff; --panel-hover: #eef0f9; --border: rgba(23, 32, 51, 0.1); --shadow: 0 24px 80px rgba(30, 41, 59, 0.12); --shadow-soft: 0 14px 38px rgba(30, 41, 59, 0.09); } * { box-sizing: border-box; } html, body { max-width: 100%; overflow-x: hidden; height: 100%; } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; transition: background-color 0.15s ease, color 0.15s ease; } a { color: var(--blue); text-decoration: none; } button { font: inherit; } img { max-width: 100%; } /* --------------------------------------------------------------------- * Boutons / formulaires / alertes — vocabulaire partagé avec le reste de * la suite (mêmes noms de classes que nallium-drive-frontend). * ------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent; border-radius: 999px; padding: 9px 18px; font-size: 13.5px; font-weight: 600; cursor: pointer; background: var(--panel-hover); color: var(--text); transition: transform 0.08s ease, background-color 0.12s ease, opacity 0.12s ease; } .btn:hover { background: var(--panel-solid); } .btn:active { transform: scale(0.97); } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .btn-primary { background: var(--accent-gradient); color: #14081f; } .btn-primary:hover { filter: brightness(1.08); } .btn-outline { background: transparent; border-color: var(--border); } .btn-danger { background: var(--red); color: #2a0a0a; } .btn-sm { padding: 5px 12px; font-size: 12px; } .btn-icon { width: 36px; height: 36px; padding: 0; border-radius: 50%; } input, select, textarea { font: inherit; color: var(--text); background: var(--panel-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 9px 12px; } input:focus, select:focus, textarea:focus { outline: 2px solid var(--violet); outline-offset: 1px; } .alert-banner { border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 12px; border: 1px solid var(--border); } .alert-banner.error { background: rgba(248, 113, 113, 0.12); color: var(--red); border-color: rgba(248, 113, 113, 0.3); } .alert-banner.success { background: rgba(52, 211, 153, 0.12); color: var(--green); border-color: rgba(52, 211, 153, 0.3); } .alert-banner.info { background: rgba(96, 165, 250, 0.12); color: var(--blue); border-color: rgba(96, 165, 250, 0.3); } .empty-state { text-align: center; color: var(--muted); padding: 60px 20px; font-size: 13.5px; } .empty-icon { font-size: 34px; margin-bottom: 10px; } .login-gate { text-align: center; padding: 80px 20px; color: var(--muted); } .badge-pill { display: inline-flex; align-items: center; gap: 4px; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; } .badge-pill.available { background: rgba(52, 211, 153, 0.15); color: var(--green); } .badge-pill.degraded { background: rgba(251, 191, 36, 0.15); color: var(--amber); } .badge-pill.unavailable { background: rgba(248, 113, 113, 0.15); color: var(--red); } .badge-pill.pending { background: rgba(154, 163, 186, 0.15); color: var(--muted); } /* --------------------------------------------------------------------- * Coquille applicative : barre latérale + contenu + lecteur permanent. * ------------------------------------------------------------------- */ .music-shell { display: flex; min-height: 100vh; padding-bottom: var(--player-height); } .music-sidebar { width: var(--sidebar-width); flex-shrink: 0; background: var(--bg-elevated); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; padding: 18px 12px; } .music-brand { display: flex; align-items: center; gap: 10px; padding: 6px 10px 20px; cursor: pointer; } .music-brand-logo { width: 32px; height: 32px; border-radius: 9px; background: var(--accent-gradient); display: flex; align-items: center; justify-content: center; font-weight: 800; color: #14081f; } .music-brand-name { font-weight: 800; font-size: 15px; letter-spacing: -0.01em; } .music-nav { display: flex; flex-direction: column; gap: 2px; } .music-nav a { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: var(--radius-sm); color: var(--muted); font-size: 13.5px; font-weight: 600; } .music-nav a:hover { background: var(--panel-hover); color: var(--text); } .music-nav a.active { background: var(--panel-hover); color: var(--text); } .music-nav .music-nav-icon { width: 18px; text-align: center; } .music-nav-section { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); } .music-nav-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); padding: 4px 12px 6px; font-weight: 700; } .music-sidebar-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .music-user { display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12.5px; color: var(--muted); } .music-user-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--accent-gradient); color: #14081f; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 12px; flex-shrink: 0; } .music-theme-toggle { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px; font-size: 12px; color: var(--muted); } .music-main { flex: 1; min-width: 0; padding: 26px 34px 40px; } .music-topbar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; } .music-search-box { flex: 1; max-width: 420px; position: relative; } .music-search-box input { width: 100%; border-radius: 999px; padding: 9px 14px 9px 34px; } .music-search-box .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); opacity: 0.6; font-size: 13px; } .music-page-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 4px; } .music-page-subtitle { color: var(--muted); font-size: 13px; margin: 0 0 20px; } /* --------------------------------------------------------------------- * Grilles de cartes (morceaux / albums / artistes / playlists). * ------------------------------------------------------------------- */ .music-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 18px; } .music-card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; cursor: pointer; transition: background-color 0.12s ease, transform 0.1s ease; position: relative; } .music-card:hover { background: var(--panel-hover); } .music-card:hover .music-card-play { opacity: 1; transform: translateY(0); } .music-card-cover { width: 100%; aspect-ratio: 1; border-radius: var(--radius-sm); background: var(--panel-solid); background-size: cover; background-position: center; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; font-size: 30px; color: var(--muted-2); position: relative; overflow: hidden; } .music-card.round .music-card-cover { border-radius: 50%; } .music-card-play { position: absolute; right: 8px; bottom: 8px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent-gradient); color: #14081f; display: flex; align-items: center; justify-content: center; font-size: 16px; box-shadow: var(--shadow-soft); opacity: 0; transform: translateY(6px); transition: opacity 0.12s ease, transform 0.12s ease; } .music-card-title { font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .music-card-subtitle { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; } /* --------------------------------------------------------------------- * Listes de morceaux (table façon Spotify : #, titre, album, durée...). * ------------------------------------------------------------------- */ .track-list { display: flex; flex-direction: column; } .track-row { display: grid; grid-template-columns: 32px 40px 1fr minmax(0, 200px) 90px 40px; align-items: center; gap: 12px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13.5px; } .track-row:hover { background: var(--panel-hover); } .track-row.playing { color: var(--violet); } .track-row.unavailable { opacity: 0.45; } .track-row .track-index { color: var(--muted-2); font-variant-numeric: tabular-nums; text-align: center; } .track-row .track-cover-sm { width: 40px; height: 40px; border-radius: 6px; background: var(--panel-solid); background-size: cover; background-position: center; } .track-row .track-title-block { min-width: 0; } .track-row .track-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-row .track-artist { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-row .track-album { color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .track-row .track-duration { color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; font-size: 12.5px; } .track-row .track-actions { display: flex; justify-content: flex-end; opacity: 0; } .track-row:hover .track-actions { opacity: 1; } .track-row .track-fav.active { color: var(--pink); } /* --------------------------------------------------------------------- * Lecteur permanent. * ------------------------------------------------------------------- */ .music-player { position: fixed; left: 0; right: 0; bottom: 0; height: var(--player-height); background: var(--bg-elevated); border-top: 1px solid var(--border); display: grid; grid-template-columns: minmax(180px, 1fr) minmax(320px, 2fr) minmax(180px, 1fr); align-items: center; padding: 0 18px; gap: 16px; z-index: 40; } .player-now { display: flex; align-items: center; gap: 12px; min-width: 0; } .player-now .track-cover-sm { width: 52px; height: 52px; border-radius: 8px; background: var(--panel-solid); background-size: cover; background-position: center; flex-shrink: 0; } .player-now-meta { min-width: 0; } .player-now-title { font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-now-artist { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .player-center { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .player-controls { display: flex; align-items: center; gap: 14px; } .player-controls button { background: transparent; border: none; color: var(--text); font-size: 16px; cursor: pointer; padding: 4px; } .player-controls button.active { color: var(--violet); } .player-controls .play-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--text); color: var(--bg); display: flex; align-items: center; justify-content: center; font-size: 14px; } .player-seek { display: flex; align-items: center; gap: 8px; width: 100%; max-width: 520px; } .player-time { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 34px; } .player-time.end { text-align: right; } .player-progress-track, .player-volume-track { flex: 1; height: 4px; background: var(--panel-solid); border-radius: 999px; position: relative; cursor: pointer; } .player-progress-fill, .player-volume-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--text); width: 0%; } .player-progress-track:hover .player-progress-fill { background: var(--violet); } .player-right { display: flex; align-items: center; justify-content: flex-end; gap: 10px; } .player-quality { font-size: 10.5px; color: var(--muted-2); border: 1px solid var(--border); border-radius: 999px; padding: 2px 8px; white-space: nowrap; } .player-volume { display: flex; align-items: center; gap: 6px; width: 110px; } .player-error { font-size: 11px; color: var(--red); } /* --------------------------------------------------------------------- * Menu contextuel (clic droit) — morceau / playlist / album / artiste / * élément de file. Cahier des charges : séparation visuelle des actions * destructrices + jamais présenter une suppression de téléchargement comme * une suppression globale du morceau. * ------------------------------------------------------------------- */ .ctx-menu { position: fixed; z-index: 200; min-width: 220px; background: var(--panel-solid); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 6px; font-size: 13px; } .ctx-menu-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; } .ctx-menu-item:hover { background: var(--panel-hover); } .ctx-menu-item.danger { color: var(--red); } .ctx-menu-sep { height: 1px; background: var(--border); margin: 6px 2px; } /* --------------------------------------------------------------------- * File d'attente (panneau latéral droit, distinct des playlists). * ------------------------------------------------------------------- */ .queue-panel { position: fixed; right: 0; top: 0; bottom: var(--player-height); width: 340px; background: var(--bg-elevated); border-left: 1px solid var(--border); padding: 18px; overflow-y: auto; z-index: 30; transform: translateX(100%); transition: transform 0.15s ease; } .queue-panel.open { transform: translateX(0); } .queue-panel h3 { margin: 0 0 4px; font-size: 15px; } .queue-panel .queue-source { font-size: 12px; color: var(--muted); margin-bottom: 14px; } /* --------------------------------------------------------------------- * Modales — Bootstrap standard (voir js/app.js), quelques classes * complémentaires pour le contenu import/partage. * ------------------------------------------------------------------- */ .modal-content { background: var(--panel-solid); color: var(--text); border: 1px solid var(--border); } .modal-header, .modal-footer { border-color: var(--border); } .btn-close { filter: invert(1) grayscale(1); } html.theme-light .btn-close { filter: none; } .form-row { margin-bottom: 12px; } .form-row label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 5px; } .form-row input, .form-row select, .form-row textarea { width: 100%; } /* --------------------------------------------------------------------- * Responsive. * ------------------------------------------------------------------- */ @media (max-width: 900px) { .music-sidebar { width: 72px; padding: 14px 6px; } .music-brand-name, .music-nav a span.label, .music-nav-label, .music-user span, .music-theme-toggle span { display: none; } .music-nav a { justify-content: center; } .music-main { padding: 18px 16px 40px; } .music-player { grid-template-columns: minmax(0, 1fr) auto; } .player-right { display: none; } .player-now-meta { display: none; } .queue-panel { width: 100%; } }