/* Styles généraux pour l'application BandTrack. On utilise des variables CSS pour permettre de changer rapidement de thème (mode clair ou sombre). Le changement de thème est géré en ajoutant ou en supprimant la classe `dark` sur l'élément dans app.js. */ /* Police principale: Noto Sans (remplace la pile Tailwind .font-sans) */ .font-sans { font-family: "Noto Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } :root { --bg-color: url("bg_img2.webp"); --glass-bg: rgba(255, 255, 255, 0.16); --glass-elevated-bg: rgba(255, 255, 255, 0.28); --glass-border: rgba(255, 255, 255, 0.35); --shadow-lg: 0 18px 40px rgba(4, 3, 15, 0.45); --shadow-md: 0 12px 30px rgba(4, 3, 15, 0.35); --text-color: #f7f7ff; --text-muted: rgba(255, 255, 255, 0.7); --primary-color: #ff33cc; --primary-alt: #7a60ff; --success-color: #3be8c4; --warning-color: #ffd166; --danger-color: #ff5f8f; --card-bg: var(--glass-bg); --card-border: var(--glass-border); --border-color: rgba(255, 255, 255, 0.2); --nav-bg: var(--glass-bg); --nav-border: var(--glass-border); --input-bg: rgba(5, 7, 20, 0.85); --input-border: rgba(255, 255, 255, 0.24); --btn-hover: rgba(255, 255, 255, 0.12); --link-color: #ffe0ff; --modal-backdrop: rgba(2, 3, 12, 0.82); --badge-zero-bg: rgba(255, 255, 255, 0.16); --badge-zero-fg: rgba(255, 255, 255, 0.55); --radius-panel: 12px; --radius-field: 12px; --content-max-width: min(92vw, 980px); } body.dark { --glass-bg: rgba(20, 22, 35, 0.35); --glass-elevated-bg: rgba(25, 27, 45, 0.45); --glass-border: rgba(255, 255, 255, 0.18); --card-bg: var(--glass-bg); --nav-bg: var(--glass-bg); --card-border: var(--glass-border); --border-color: rgba(255, 255, 255, 0.16); --input-bg: rgba(2, 3, 12, 0.85); --input-border: rgba(255, 255, 255, 0.18); --text-color: #f9f8ff; --text-muted: rgba(255, 255, 255, 0.6); --link-color: #ffe7ff; } /* Réinitialisation de base */ html, body { margin: 0; padding: 0; min-height: 100%; font-family: "Noto Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; } body { background: var(--bg-color); color: var(--text-color); background-position: center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overscroll-behavior: none; } #page-content { width: var(--content-max-width); margin: 100px auto 80px; padding: 56px 36px; background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: 24px; box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); display: flex; flex-direction: column; max-height: calc(100vh - 180px); } #page-title { margin: 0 0 24px 0; font-size: clamp(1.5rem, 2.8vw, 2.25rem); font-weight: 700; color: #fff; text-shadow: 0 4px 24px rgba(0, 0, 0, 0.4); text-align: left; flex-shrink: 0; } /* Container principal */ #app { flex-grow: 1; overflow-y: auto; padding-right: 12px; margin-right: -12px; touch-action: pan-y; } /* En-tête avec logo */ .header { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); width: var(--content-max-width); max-width: var(--content-max-width); display: flex; align-items: center; gap: 16px; padding: 12px 22px; border-radius: var(--radius-panel); background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); z-index: 200; } .header-content { display: flex; align-items: center; justify-content: space-between; gap: 18px; width: 100%; } .header-brand { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; } .brand-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .brand-text h1 { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--text-color); } .brand-text span { color: var(--text-muted); font-size: 0.95rem; } .header-actions { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: inherit; min-width: 0; flex: 0 0 auto; } .logo-img { width: 46px; height: 46px; border-radius: var(--radius-panel); border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.08); padding: 6px; } .brand-copy { display: flex; flex-direction: column; line-height: 1.1; } .brand-title { font-size: 1.3rem; font-weight: 800; letter-spacing: 0.02em; } .online-users-bar { width: min(1120px, calc(100% - 32px)); margin: 98px auto 0; display: flex; justify-content: flex-end; padding: 0 8px; box-sizing: border-box; } .online-users-bar.is-hidden { display: none; } .online-users-container { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 6px 12px; border-radius: 999px; background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04); min-height: 44px; } .online-users-container:empty { display: none; } .online-user-bubble { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-color), var(--primary-alt)); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.8rem; cursor: pointer; box-shadow: var(--shadow-md); } .header-actions { display: flex; align-items: center; gap: 12px; margin-left: auto; flex-shrink: 0; margin-right: 10px; } #theme-toggle, #profile-btn { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.25); background: rgba(255, 255, 255, 0.06); color: var(--text-color); cursor: pointer; transition: transform 0.15s ease, border-color 0.2s ease, background 0.2s ease; } #theme-toggle { font-size: 1.2rem; } #theme-toggle:hover, #profile-btn:hover { transform: translateY(-1px); border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.12); } #profile-btn { padding: 0; overflow: hidden; } #profile-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } #menu-container { position: relative; display: flex; align-items: center; } #profile-menu { position: absolute; top: calc(100% + 12px); right: 0; min-width: 200px; background: var(--glass-elevated-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-panel); padding: 8px; z-index: 300; box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); } #profile-menu button { background: none; border: none; padding: 10px 12px; text-align: left; color: var(--text-color); cursor: pointer; font-weight: 600; border-radius: var(--radius-field); width: 100%; } #profile-menu button:hover { background-color: rgba(255, 255, 255, 0.1); } #profile-menu button.logout-btn { background-image: linear-gradient(135deg, var(--danger-color), #ff3366); color: #fff; border-radius: var(--radius-field); margin-top: 6px; } #profile-menu button.logout-btn:hover { opacity: 0.9; } @media (max-width: 900px) { .header { width: calc(100% - 24px); flex-direction: row; align-items: center; flex-wrap: nowrap; row-gap: 0; padding: 12px 18px; } .brand-shell { flex: 1 1 auto; } .header-actions { margin-left: 16px; width: auto; justify-content: flex-end; flex-wrap: nowrap; } .online-users-bar { margin-top: 12px; padding: 0; justify-content: flex-start; } .online-users-container { width: 100%; } } @media (max-width: 600px) { .header { border-radius: var(--radius-panel); } .online-users-bar { width: calc(100% - 24px); margin-top: 8px; } .online-users-container { width: 100%; padding: 10px 12px; } #page-content { width: min(96vw, 640px); padding: 48px 20px; margin: 100px auto 80px; max-height: calc(100vh - 180px); } } /* Formulaires d'authentification */ .auth-container { max-width: 420px; margin: 80px auto; padding: 28px; background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-md); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px); } .auth-container h2 { margin-top: 0; text-align: center; color: #fff; } .auth-container label { display: block; margin-bottom: 6px; margin-top: 12px; } .auth-container input[type="text"], .auth-container input[type="password"], .auth-container input[type="date"] { box-sizing: border-box; } .auth-container button { display: inline-flex; align-items: center; justify-content: center; width: 100%; padding: 12px 18px; margin-top: 20px; background-image: linear-gradient(135deg, var(--primary-color), var(--primary-alt)); color: #fff; border: none; border-radius: 999px; text-align: center; cursor: pointer; font-size: 1rem; font-weight: 600; box-shadow: 0 12px 24px rgba(122, 96, 255, 0.45); transition: transform 0.15s ease, filter 0.15s ease; } .auth-container button:hover { transform: translateY(-1px); filter: brightness(1.05); } .auth-container .link { display: block; text-align: center; margin-top: 12px; color: var(--link-color); text-decoration: none; cursor: pointer; } /* Styles généraux pour les champs de formulaire texte */ input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="url"], input[type="email"], input[type="number"], input[type="datetime-local"], textarea, select { width: 100%; padding: 10px 14px; border-radius: var(--radius-field); border: 1px solid var(--input-border); background: var(--input-bg); color: var(--text-color); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04), 0 12px 24px rgba(4, 3, 15, 0.35); transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; } input[type="text"]:focus, input[type="password"]:focus, input[type="date"]:focus, input[type="time"]:focus, input[type="url"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="datetime-local"]:focus, textarea:focus, select:focus { outline: none; border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15), 0 16px 30px rgba(4, 3, 15, 0.4); } input::placeholder, textarea::placeholder { color: var(--text-muted); } /* Page d'accueil après connexion */ .home-container { width: 100%; margin: 0; padding: 0; /* l'enveloppe .page gère déjà le padding global */ text-align: left; } .home-upcoming-list { list-style: none; padding: 0; margin: 12px 0 0 0; display: flex; flex-direction: column; gap: 6px; } .home-upcoming-item { display: flex; align-items: center; gap: 8px; } .home-upcoming-item::before { content: "•"; color: var(--text-color); font-weight: 700; } .home-upcoming-item span { flex: 1; } .home-upcoming-item .map-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--primary-color); color: #fff; text-decoration: none; transition: transform 0.15s ease, opacity 0.15s ease; } .home-upcoming-item .map-link-icon:hover { transform: translateY(-1px); opacity: 0.92; } .home-upcoming-item .map-link-icon svg { width: 14px; height: 14px; fill: currentColor; } .home-container button { padding: 10px 20px; margin-top: 20px; background-image: linear-gradient(135deg, var(--primary-color), var(--primary-alt)); color: #fff; border: none; border-radius: 999px; cursor: pointer; font-size: 16px; font-weight: 600; box-shadow: 0 12px 24px rgba(122, 96, 255, 0.45); transition: transform 0.15s ease, filter 0.15s ease; } .home-container button:hover { transform: translateY(-1px); filter: brightness(1.05); } /* Barre de navigation en bas de page */ .nav-bar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); width: var(--content-max-width); padding: 8px; display: flex; align-items: center; justify-content: space-between; background: var(--nav-bg); border: 1px solid var(--nav-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); z-index: 190; } .nav-bar button { background: transparent; border: none; flex: 1; padding: 8px 6px; color: var(--text-muted); font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; font-weight: 600; border-radius: var(--radius-panel); transition: color 0.15s ease, background 0.15s ease, transform 0.15s ease; } .repertoire-view { display: flex; flex-direction: column; gap: 16px; } .repertoire-tabs { display: flex; align-items: center; justify-content: center; gap: 10px; overflow-x: auto; padding: 2px; } .repertoire-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 9999px; border: 1px solid var(--border-color); background: rgba(255, 255, 255, 0.08); color: var(--text-color); font-weight: 600; font-size: 13px; transition: background 0.2s ease, transform 0.15s ease, color 0.2s ease; white-space: nowrap; } .repertoire-tab__icon { display: inline-flex; align-items: center; justify-content: center; } .repertoire-tab__label { line-height: 1; } .repertoire-tab svg { width: 16px; height: 16px; } .repertoire-tab.is-active { background: var(--primary-color); color: #fff; border-color: var(--primary-color); transform: translateY(-1px); } .repertoire-tab:not(.is-active):hover { background: rgba(255, 255, 255, 0.15); } .repertoire-content { min-height: 200px; } .repertoire-loading { display: flex; align-items: center; justify-content: center; min-height: 120px; font-size: 15px; color: var(--text-muted, var(--text-color)); } .nav-bar button svg { width: 24px; height: 24px; margin-bottom: 4px; } @media (max-width: 520px) { .nav-bar { width: calc(100% - 24px); bottom: 16px; } } /* Sur petits écrans, afficher icônes seules dans la barre nav */ @media (max-width: 420px) { .nav-bar button span { display: none; } } /* Badge compteur dans la barre nav (ex: Archives) */ .nav-bar .nav-badge { display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--primary-color), var(--primary-alt)); color: #fff; border-radius: 9999px; padding: 2px 6px; margin-left: 6px; font-size: 12px; line-height: 1; min-width: 18px; position: absolute; top: 4px; right: -14px; /* léger décalage vers la droite */ pointer-events: none; } /* Variante atténuée quand le compteur vaut 0 */ .nav-bar .nav-badge.is-zero { background: var(--badge-zero-bg); color: var(--badge-zero-fg); } /* Contexte positionné pour l'icône de nav afin de superposer la pastille */ .nav-bar button .icon-wrap { position: relative; display: inline-block; } .nav-bar button:hover { background: rgba(255, 255, 255, 0.08); color: var(--text-color); } .nav-bar button.active { color: #fff; background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); } /* Contenu de page */ .page { width: 100%; max-width: 100%; margin: 0; padding: 0; border-radius: 0; background: transparent; border: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; touch-action: pan-y; } /* Cartes pour les listes */ .card { margin-bottom: 20px; padding: 20px; border-radius: var(--radius-panel); background: var(--card-bg); border: 1px solid var(--card-border); box-shadow: var(--shadow-md); -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); } .card.collapsed .card-details { display: none; } .card h3 { margin-top: 0; cursor: pointer; font-weight: bold; } .card-header { display: flex; justify-content: space-between; align-items: center; } .level-badge { font-weight: bold; } .like-info { display: flex; gap: 6px; align-items: center; } .like-btn { background: transparent; border: none; cursor: pointer; font-size: 18px; } .actions { margin-top: 10px; display: flex; gap: 6px; flex-wrap: wrap; } /* Boutons génériques dans les zones d'actions */ .actions button { cursor: pointer; } /* Boutons d'actions compacts avec icône */ .actions button svg { width: 18px; height: 18px; margin-right: 6px; } .actions .btn-primary, .actions .btn-secondary, .actions .btn-danger { padding: 8px 10px; /* léger resserrement pour les actions en carte */ } /* Sur mobile: icône seule, on cache le label */ @media (max-width: 520px) { .actions .btn-primary, .actions .btn-secondary, .actions .btn-danger { padding: 8px; /* carré autour de l'icône */ } .actions button .btn-label { display: none; /* garder l'explicite via title/aria-label */ } .actions button svg { margin-right: 0; } } /* Boutons modernes (pills) */ .btn-primary, .btn-secondary, .btn-danger { display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; border-radius: 9999px; border: 1px solid transparent; font-size: 14px; font-weight: 600; line-height: 1; transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease, transform 0.15s ease; } .btn-primary { background-image: linear-gradient(135deg, var(--primary-color), var(--primary-alt)); color: #fff; box-shadow: 0 6px 14px rgba(122, 96, 255, 0.32); } .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.05); } .btn-primary:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); } .btn-danger { background-image: linear-gradient(135deg, var(--danger-color), #ff3366); color: #fff; box-shadow: 0 6px 14px rgba(255, 83, 143, 0.28); } .btn-danger:hover { transform: translateY(-1px); filter: brightness(1.05); } .btn-danger:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2); } .btn-danger svg, .btn-secondary svg { fill: currentColor; } .btn-secondary { background: rgba(255, 255, 255, 0.08); color: var(--text-color); border-color: rgba(255, 255, 255, 0.25); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); } .btn-secondary:hover { background-color: rgba(255, 255, 255, 0.2); color: #fff; border-color: rgba(255, 255, 255, 0.4); } .btn-secondary:focus { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.15); } /* Variante boutons pour le template violet */ body.template-violet .btn-primary, body.template-violet .btn-secondary, body.template-violet.dark .btn-primary, body.template-violet.dark .btn-secondary { background-color: #3C096C; color: #fff; border-color: #3C096C; } body.template-violet .btn-primary:hover, body.template-violet .btn-secondary:hover, body.template-violet.dark .btn-primary:hover, body.template-violet.dark .btn-secondary:hover { background-color: #2a064f; color: #fff; } body.template-violet .btn-primary:focus, body.template-violet .btn-secondary:focus, body.template-violet.dark .btn-primary:focus, body.template-violet.dark .btn-secondary:focus { outline: none; box-shadow: 0 0 0 3px rgba(60, 9, 108, 0.45); } button:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled { opacity: 0.6; cursor: not-allowed; } /* Inputs spécifiques */ input[type="range"] { width: 100%; margin-top: 8px; } .level-display { font-weight: bold; } /* Zone modale pour ajout */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--modal-backdrop); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 12px; /* évite que le contenu touche les bords sur mobile */ } .modal-content { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--radius-panel); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); padding: 20px; width: 100%; max-width: 480px; /* un peu plus étroit pour petits écrans */ max-height: 90vh; /* évite le dépassement vertical */ overflow: auto; box-sizing: border-box; word-break: break-word; overflow-wrap: anywhere; } .modal-content h3 { margin-top: 0; } .modal-hero { display: flex; align-items: center; gap: 14px; margin: -20px -20px 24px; padding: 18px 20px; border-radius: var(--radius-panel); background: var(--bg-color); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 24px rgba(15, 23, 42, 0.12); color: var(--text-color); } .modal-hero-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-panel); background: var(--card-bg); border: 1px solid var(--border-color); box-shadow: 0 6px 12px rgba(15, 23, 42, 0.08); color: var(--primary-color); } .modal-hero-icon svg { width: 26px; height: 26px; fill: currentColor; } .modal-hero-text h3 { margin: 0; font-size: 18px; font-weight: 700; } .modal-hero-subtitle { margin: 4px 0 0; font-size: 13px; color: var(--text-color); opacity: 0.75; } .modal-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; } /* Champ de note */ textarea { width: 100%; min-height: 60px; padding: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-field); box-sizing: border-box; } /* Hauteur plus généreuse pour les notes des morceaux */ .notes-textarea { min-height: 120px; } /* Titre des sections (pages, séparateurs de prestations, etc.) */ .section-title { margin-top: 24px; margin-bottom: 12px; margin-left: auto; margin-right: auto; font-size: 20px; font-weight: bold; text-align: center; background-color: var(--card-bg); color: var(--text-color); border: 1px solid var(--border-color); padding: 10px 15px; border-radius: var(--radius-panel); width: fit-content; text-transform: uppercase; } /* Barre d’actions sous le titre de section */ .section-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin: 4px 0 12px 0; } .section-header { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 24px; margin-bottom: 12px; position: relative; } .section-title-row { width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 12px; } .section-header .section-title { margin: 0; flex: 1; text-align: left; background: none; border: none; padding: 0; border-radius: 0; width: auto; text-transform: none; font-size: 32px; line-height: 1.2; } .section-subtitle { display: block; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--primary-color); margin-bottom: 6px; } .detail-block { margin-top: 16px; padding: 12px; border: 1px solid var(--border-color); border-radius: var(--radius-panel); background: var(--card-bg); } .detail-block textarea { width: 100%; min-height: 90px; } .detail-block.detail-level input[type="range"] { margin-top: 6px; } .detail-block.detail-level { border-left: 4px solid var(--primary-color); } .detail-block.detail-notes { border-left: 4px solid #9d8099; } .detail-block.detail-partitions { border-left: 4px solid #082BCB; } .detail-block.detail-audio { border-left: 4px solid #ff9800; } .detail-block.detail-lyrics { border-left: 4px solid #4caf50; } .detail-block.detail-lyrics.collapsed .lyrics-content { display: none; } .lyrics-header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; } .lyrics-header .section-subtitle { margin-bottom: 0; } .lyrics-status { font-size: 12px; color: var(--text-color); opacity: 0.7; } .lyrics-toggle { margin-left: auto; background: none; border: 0; color: var(--primary-color); font-weight: 700; font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; display: flex; align-items: center; gap: 4px; padding: 4px 8px; } .lyrics-toggle:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; } .lyrics-toggle-label { line-height: 1; } .lyrics-toggle-icon { font-size: 12px; line-height: 1; } .lyrics-content { margin-top: 8px; color: var(--text-color); } .lyrics-content p { white-space: pre-wrap; margin: 0; } .detail-block.detail-media { border-left: 4px solid #e53935; } .detail-block.detail-others { border-left: 4px solid #4b5563; } .detail-block.detail-partitions > div, .detail-block.detail-audio > div, .detail-block.detail-others > div { margin-top: 6px; } .detail-block.detail-audio .audio-title-input { display: block; width: 100%; margin-top: 8px; } .detail-block.detail-audio .btn-secondary { margin-top: 8px; } .audio-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .audio-note-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; background: rgba(255, 152, 0, 0.12); color: #c2410c; font-size: 12px; font-weight: 600; } .audio-note-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; } .audio-note-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--radius-panel); border: 1px dashed rgba(255, 152, 0, 0.6); background: rgba(255, 152, 0, 0.08); } .audio-note-info { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .audio-note-title { font-size: 14px; } .audio-note-actions { display: inline-flex; align-items: center; gap: 8px; } .audio-note-icon { display: inline-flex; color: #fb8c00; } .audio-note-icon svg { width: 18px; height: 18px; fill: currentColor; } .partition-section { display: flex; flex-direction: column; gap: 8px; } .partition-section-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .partition-indicator { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(37, 99, 235, 0.2); background: rgba(37, 99, 235, 0.08); color: #cfe0ff; font-size: 12px; font-weight: 600; } .partition-indicator-icon { display: inline-flex; } .partition-indicator-icon svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 1.5; fill: none; } .partition-list { display: flex; flex-direction: column; gap: 8px; } .partition-list--others { margin-top: 8px; } .partition-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 8px 12px; border-radius: var(--radius-panel); border: 1px dashed rgba(37, 99, 235, 0.35); background: rgba(37, 99, 235, 0.1); } .partition-info { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 220px; } .partition-icon { display: inline-flex; color: #a5c9ff; } .partition-icon svg { width: 20px; height: 20px; } .partition-details { display: flex; flex-direction: column; gap: 4px; } .partition-title { font-weight: 600; font-size: 14px; } .partition-meta { font-size: 12px; color: var(--text-muted); } .partition-actions { display: flex; align-items: center; gap: 8px; } .partition-empty { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); } .partition-name-input { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-field); font-size: 14px; } .partition-upload-actions { display: flex; align-items: center; gap: 8px; } .other-member-block { padding: 8px 0; border-bottom: 1px solid rgba(148, 163, 184, 0.35); } .other-member-block:last-child { border-bottom: none; } .other-member-header { font-size: 14px; font-weight: 600; } .other-member-info { color: var(--text-muted); font-weight: 500; } .other-audio-note-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; } .other-audio-note-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .other-audio-note-title { font-size: 13px; font-weight: 500; } .section-header .section-actions { width: 100%; margin: 0; } .section-actions--center { justify-content: center; } .help-icon-btn { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border-color); background: var(--card-bg); color: var(--primary-color); font-size: 18px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.1s ease; } .help-icon-btn:hover { background: var(--primary-color); color: #fff; transform: translateY(-1px); } .help-icon-btn:focus { outline: 2px solid var(--primary-color); outline-offset: 2px; } .section-help-btn { position: static; margin-left: 12px; flex-shrink: 0; align-self: center; } .help-modal p { margin-bottom: 0.75rem; } /* Bouton rond icône-only */ .icon-btn { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--card-bg); border: 1px solid var(--border-color); color: var(--text-color); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease, opacity 0.15s ease; } .icon-btn:hover { background: var(--primary-color); color: #fff; } .icon-btn svg { width: 20px; height: 20px; fill: currentColor; } .icon-btn-danger { background: var(--danger-color); border-color: var(--danger-color); color: #fff; } .icon-btn-danger:hover { opacity: 0.85; } .icon-btn-tonal { background: var(--primary-color); border-color: var(--primary-color); color: #fff; } .icon-btn-tonal:hover { opacity: 0.85; } /* Harmonize SVG icon size on danger buttons with icon-only controls */ .btn-danger svg { width: 20px; height: 20px; } /* Message affiché lorsqu'aucune donnée n'est disponible */ .empty-state { text-align: center; color: var(--text-color); opacity: 0.7; font-style: italic; margin-top: 12px; } /* Liste d'éléments sélectionnables */ .select-list { max-height: 200px; overflow-y: auto; border: 1px solid var(--border-color); border-radius: var(--radius-panel); padding: 8px; margin-bottom: 12px; } .select-list label { display: flex; align-items: center; margin-bottom: 6px; } .select-list input[type="checkbox"] { margin-right: 8px; } /* Bouton flottant pour ajout */ .fab { position: fixed; bottom: 80px; right: 20px; width: 56px; height: 56px; border-radius: 50%; background-color: var(--primary-color); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 28px; cursor: pointer; box-shadow: 0 2px 4px rgba(0,0,0,0.3); } /* Section générique pour les paramètres */ .settings-section { /* Tailwind classes will style the container */ margin-top: 20px; } .settings-section h3 { margin-top: 0; font-weight: 700; } .admin-subsection { margin-top: 20px; padding: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-panel); background: var(--card-bg); border-left: 5px solid transparent; box-shadow: var(--shadow-md); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); overflow-x: auto; } body.dark .admin-subsection { border-color: rgba(255, 255, 255, 0.18); background: var(--card-bg); } .admin-subsection--group { border-left-color: #7c3aed; } .admin-subsection--users { border-left-color: #0ea5e9; } .admin-subsection-title { margin: 0 0 8px; font-size: 1.05rem; font-weight: 700; padding: 8px 12px; border-radius: var(--radius-panel); color: #ffffff; } .admin-subsection--group .admin-subsection-title { background-color: #7c3aed; } .admin-subsection--users .admin-subsection-title { background-color: #0ea5e9; } body.dark .admin-subsection--group .admin-subsection-title { background-color: #5b21b6; } body.dark .admin-subsection--users .admin-subsection-title { background-color: #0369a1; } .admin-subsection-description { margin: 0 0 16px; color: var(--text-color); opacity: 0.85; } .admin-subsection-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; } .admin-subsection-row:last-child { margin-bottom: 0; } .admin-subsection-chip { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: rgba(124, 58, 237, 0.3); color: #f5f0ff; } .admin-subsection--users .admin-subsection-chip { background: rgba(14, 165, 233, 0.3); color: #e0f7ff; } body.dark .admin-subsection-chip { background: rgba(167, 139, 250, 0.35); color: #fdfbff; } body.dark .admin-subsection--users .admin-subsection-chip { background: rgba(34, 211, 238, 0.35); color: #f5feff; } .admin-code-badge { display: inline-flex; align-items: center; padding: 6px 14px; border-radius: 999px; font-weight: 600; letter-spacing: 0.03em; background: rgba(124, 58, 237, 0.3); color: #f5f0ff; } .admin-subsection--users .admin-code-badge { background: rgba(14, 165, 233, 0.3); color: #e0f7ff; } body.dark .admin-code-badge { background: rgba(167, 139, 250, 0.35); color: #fdfbff; } body.dark .admin-subsection--users .admin-code-badge { background: rgba(34, 211, 238, 0.35); color: #f5feff; } .admin-subsection-subtitle { margin: 20px 0 8px; font-weight: 600; color: var(--text-color); } .admin-subsection-note { color: var(--text-color); opacity: 0.75; font-style: italic; } .admin-subsection input, .admin-subsection select { border: 1px solid var(--border-color); border-radius: var(--radius-field); padding: 6px 10px; background: var(--card-bg); color: var(--text-color); } body.dark .admin-subsection input, body.dark .admin-subsection select { border-color: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.08); } .admin-subsection-row input[type="email"] { flex: 1 1 240px; } .user-table { width: 100%; border-collapse: collapse; margin-top: 12px; } .user-table th, .user-table td { padding: 10px; text-align: left; border-bottom: 1px solid var(--border-color); } .user-table th { font-weight: 600; color: var(--text-color); text-transform: uppercase; font-size: 12px; letter-spacing: 0.04em; } .user-table tbody tr:last-child td { border-bottom: none; } .user-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.04); } body.dark .user-table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.06); } .btn-compact { padding: 6px 12px; font-size: 0.85rem; } .admin-action { margin-top: 16px; } /* Sous-titres de section (groupes dans Répètes) */ .subsection-title { margin-top: 16px; margin-bottom: 8px; padding: 6px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-panel); background: var(--card-bg); color: var(--text-color); font-weight: 700; display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .subsection-title .count-badge { background: var(--primary-color); color: #fff; border-radius: 9999px; padding: 2px 8px; font-size: 12px; } /* Style visuel pour les morceaux archivés */ .archived-card { background: rgba(255, 255, 255, 0.05); border: 1px dashed var(--border-color); color: var(--text-color); } .archived-chip { background: rgba(255, 255, 255, 0.12); color: var(--text-color); border-radius: 9999px; padding: 2px 6px; font-size: 10px; text-transform: uppercase; opacity: 0.85; } /* Bouton de déconnexion */ .logout-btn, .delete-account-btn { margin-top: 20px; padding: 12px 18px; background-image: linear-gradient(135deg, var(--danger-color), #ff3366); color: #fff; border: none; border-radius: 999px; cursor: pointer; width: 100%; font-weight: 600; box-shadow: 0 12px 24px rgba(255, 83, 143, 0.35); transition: transform 0.15s ease, filter 0.15s ease; } .logout-btn:hover, .delete-account-btn:hover { transform: translateY(-1px); filter: brightness(1.05); } /* Agenda */ .agenda-list { list-style: none; padding: 0; } .agenda-item { margin-bottom: 8px; } .agenda-item a { color: var(--primary-color); text-decoration: none; } /* Calendrier mensuel */ .calendar-nav { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; justify-content: center; /* Trame de fond adaptée au thème */ background-color: var(--card-bg); color: var(--text-color); padding: 4px 8px; border: 1px solid var(--border-color); border-radius: var(--radius-panel); } /* Boutons de navigation (flèches) */ .calendar-nav button { background: var(--primary-color); color: #fff; border: none; padding: 2px 8px; border-radius: var(--radius-field); cursor: pointer; } .calendar-nav button:hover { opacity: 0.9; } /* Libellé mois/année */ .calendar-nav span { font-weight: bold; background-color: var(--card-bg); color: var(--text-color); padding: 2px 6px; border: 1px solid var(--border-color); border-radius: var(--radius-panel); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-top: 10px; } .calendar-day-name { font-weight: bold; text-align: center; /* Fond adapté au thème pour les jours de la semaine */ background-color: var(--card-bg); color: var(--text-color); padding: 4px 0; border: 1px solid var(--border-color); border-radius: var(--radius-panel); } .calendar-cell { border: 1px solid var(--border-color); min-height: 80px; padding: 4px; /* Ajout d'une trame translucide pour mettre en valeur la date */ background-color: rgba(255, 255, 255, 0.4); } .calendar-cell.empty { border: none; } .calendar-date { font-weight: bold; /* Fond adapté au thème derrière le numéro pour une meilleure lisibilité */ display: inline-block; background-color: var(--card-bg); color: var(--text-color); padding: 2px 4px; border: 1px solid var(--border-color); border-radius: var(--radius-panel); } .calendar-event { background: var(--primary-color); color: #fff; margin-top: 2px; padding: 2px; border-radius: var(--radius-panel); cursor: pointer; font-size: 12px; font-weight: 600; } .calendar-event.performance { background: #ff6b81; } .calendar-event.rehearsal { background: #4ac7ff; } .user-info { font-weight: bold; text-align: center; margin-top: 8px; color: var(--primary-color); } .welcome-section { margin-bottom: 1rem; font-size: 1.25rem; } .upcoming-section { margin-top: 1rem; } /* Mise en forme de la section des morceaux dans une prestation */ .songs-section { border: 1px solid var(--border-color); border-radius: var(--radius-panel); margin-top: 10px; padding: 10px; background-color: var(--card-bg); } .songs-section .songs-title { font-weight: bold; margin-bottom: 4px; } .songs-section ul { list-style: none; padding-left: 0; margin: 0; } .performance-address { display: flex; align-items: center; gap: 8px; margin-top: 6px; } .performance-address > span { flex: 1; } .performance-address .map-link-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-field); background: var(--primary-color); color: #fff; border: none; text-decoration: none; font-size: 0.85rem; font-weight: 600; } .performance-address .map-link-btn svg { width: 18px; height: 18px; fill: currentColor; } .performance-address .map-link-btn:hover { opacity: 0.9; } /* Indicateur de durée pour setlist */ .duration-badge { font-style: italic; margin-left: 6px; } .duration-badge.duration-default { color: var(--success-color); } .duration-badge.duration-estimate { color: var(--primary-color); } /* Saisie de durée dans la modale (override vs. valeur morceau) */ .reorder-list input.dur-default-input { color: var(--success-color); border-color: var(--success-color); } .reorder-list input.dur-estimate-input { color: var(--primary-color); border-color: var(--primary-color); } /* Liste réordonnable (modale setlist) */ .reorder-list { list-style: none; padding-left: 0; margin: 8px 0 0 0; } .reorder-list li { padding: 6px 8px; border: 1px solid var(--border-color); border-radius: var(--radius-panel); background: var(--card-bg); margin-bottom: 6px; } .reorder-list li.dragging { opacity: 0.7; } /* Barre de titre cliquable avec chevron */ .title-wrap { display: flex; align-items: center; gap: 6px; } .chevron-icon { display: inline-block; width: 16px; height: 16px; transition: transform 0.2s ease; color: var(--text-color); object-fit: contain; } .card.collapsed .chevron-icon { transform: rotate(0deg); } .card:not(.collapsed) .chevron-icon { transform: rotate(90deg); } /* Liens avec icône (YouTube/Spotify) */ .link-with-icon { display: inline-flex; align-items: center; gap: 6px; } .link-icon { display: inline-flex; width: 16px; height: 16px; line-height: 0; } .link-icon svg { width: 16px; height: 16px; fill: currentColor; } .link-icon.yt { color: #ff0000; } .link-icon.sp { color: #1DB954; } /* Grille centrée pour 1–2 liens (YouTube/Spotify) */ .links-grid { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 24px; justify-content: center; justify-items: center; align-items: center; margin-top: 6px; } /* Sous-titres de sections dans les fiches morceaux */ .subsection-label { display: block; font-weight: bold; color: var(--text-color); margin-top: 8px; } .detail-block.detail-audio { display: flex; flex-direction: column; gap: 8px; } .detail-block.detail-audio .audio-upload-actions { display: flex; gap: 8px; align-items: center; } /* ===================== */ /* Messagerie privée */ /* ===================== */ .messages-view .section-header { margin-top: 8px; margin-bottom: 8px; } .messages-view { display: flex; flex-direction: column; gap: 8px; } .messages-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .messages-layout { display: flex; gap: 16px; min-height: 420px; } .messages-list-column { width: 280px; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-panel); padding: 12px; display: flex; flex-direction: column; gap: 12px; } .messages-list-column h3 { margin: 0; font-size: 1rem; } .conversation-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; overflow-y: auto; } .conversation-item { border: 1px solid transparent; border-radius: var(--radius-panel); padding: 10px; cursor: pointer; background: rgba(255, 255, 255, 0.05); display: flex; flex-direction: column; gap: 4px; transition: border-color 0.2s ease, background 0.2s ease; } .conversation-item:hover { border-color: var(--border-color); background: rgba(255, 255, 255, 0.12); } .conversation-item.is-active { border-color: var(--primary-color); background: rgba(255, 255, 255, 0.18); } .conversation-title-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 600; } .conversation-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conversation-unread { background: var(--primary-color); color: #fff; font-size: 0.75rem; padding: 2px 6px; border-radius: var(--radius-panel); } .conversation-preview { font-size: 0.85rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .conversation-time { font-size: 0.75rem; color: rgba(255, 255, 255, 0.55); } .conversation-empty { padding: 12px; text-align: center; color: var(--text-muted); border-radius: var(--radius-panel); background: rgba(255, 255, 255, 0.06); } .messages-panel { flex: 1; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-panel); display: flex; flex-direction: column; padding: 12px; gap: 12px; } .message-thread { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-right: 4px; } .message-thread.is-loading { opacity: 0.6; } .messages-placeholder, .messages-error { text-align: center; color: var(--text-muted); } .messages-error { color: var(--danger-color); } .message-bubble { max-width: 75%; border-radius: var(--radius-panel); padding: 10px 12px; background: rgba(255, 255, 255, 0.08); align-self: flex-start; display: flex; flex-direction: column; gap: 4px; word-break: break-word; position: relative; } .message-bubble.is-own { background: linear-gradient(135deg, rgba(122, 96, 255, 0.5), rgba(255, 51, 204, 0.4)); align-self: flex-end; } .message-meta { font-size: 0.75rem; color: var(--text-muted); } .message-body { white-space: pre-wrap; font-size: 0.95rem; } .message-delete-btn { position: absolute; top: 4px; right: 4px; background: none; border: none; cursor: pointer; padding: 4px; display: none; color: var(--danger-color); } .message-bubble:hover .message-delete-btn { display: block; } .message-delete-btn:hover { color: #fff; background-color: var(--danger-color); border-radius: 50%; } .message-composer { display: flex; gap: 12px; border-top: 1px solid var(--border-color); padding-top: 8px; } .message-composer textarea { flex: 1; font-size: 0.95rem; padding: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-field); resize: vertical; min-height: 60px; } .message-composer .btn-primary { align-self: flex-end; } .message-composer.is-disabled { opacity: 0.5; pointer-events: none; } .message-composer.is-sending { opacity: 0.7; } .messages-status { font-size: 0.85rem; color: var(--danger-color); min-height: 1.2em; } .messages-empty { padding: 16px; text-align: center; background: var(--card-bg); border: 1px solid var(--border-color); border-radius: var(--radius-panel); } .modal .conversation-modal { max-width: 520px; display: flex; flex-direction: column; gap: 16px; } .conversation-fields { display: flex; flex-direction: column; gap: 12px; } .conversation-members { max-height: 240px; overflow-y: auto; display: grid; gap: 8px; } .conversation-member { display: flex; align-items: center; gap: 8px; padding: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-panel); } .conversation-title-field { display: flex; flex-direction: column; gap: 6px; } .conversation-title-field input { padding: 8px; border: 1px solid var(--border-color); border-radius: var(--radius-field); } .conversation-error { color: var(--danger-color); text-align: center; } @media (max-width: 900px) { .messages-layout { flex-direction: column; } .messages-list-column { width: 100%; } .message-bubble { max-width: 90%; } } .map-link, .map-link-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 999px; border: 1px solid rgba(122, 96, 255, 0.32); background: rgba(122, 96, 255, 0.12); color: var(--primary-color); transition: transform 0.18s ease, background 0.2s ease; } .map-link:hover, .map-link-icon:hover { transform: translateY(-1px); background: rgba(122, 96, 255, 0.2); } .map-link svg, .map-link-icon svg { width: 16px; height: 16px; fill: currentColor; } .schedule-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 24px 0 12px; } .schedule-tabs { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; } .schedule-tab { padding: 10px 18px; border-radius: 12px; border: 1px solid rgba(122, 96, 255, 0.28); background: rgba(122, 96, 255, 0.1); color: var(--primary-color); font-weight: 600; letter-spacing: 0.02em; transition: transform 0.18s ease, background 0.2s ease, color 0.2s ease; } .schedule-tab.is-active { background: rgba(122, 96, 255, 0.24); border-color: rgba(122, 96, 255, 0.4); color: #fff; box-shadow: 0 14px 28px rgba(122, 96, 255, 0.26); transform: translateY(-1px); } .schedule-content { display: flex; flex-direction: column; gap: 22px; } .schedule-section { display: flex; flex-direction: column; gap: 12px; } .schedule-section__title { margin: 0; font-size: 1.05rem; color: var(--text-muted, rgba(16, 18, 24, 0.6)); text-transform: uppercase; letter-spacing: 0.08em; } .schedule-list { display: flex; flex-direction: column; gap: 14px; } .schedule-card { background: rgba(255, 255, 255, 0.18); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 18px; box-shadow: 0 14px 32px rgba(12, 16, 32, 0.22); padding: 18px; display: flex; flex-direction: column; gap: 14px; backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); } .schedule-card--performance { border-left: 4px solid rgba(122, 96, 255, 0.6); } .schedule-card--rehearsal { border-left: 4px solid rgba(74, 196, 255, 0.55); } .schedule-card__header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .schedule-card__title { margin: 0; font-size: 1.1rem; } .schedule-card__date { font-size: 0.95rem; color: rgba(16, 18, 24, 0.55); } .schedule-card__body { display: flex; flex-direction: column; gap: 10px; color: rgba(16, 18, 24, 0.65); } .schedule-card__location { display: flex; align-items: center; gap: 10px; } .schedule-card__map-link { width: 30px; height: 30px; } .schedule-card__songs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .schedule-song { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .schedule-song__title { color: var(--text-color, #101218); } .schedule-song__duration { font-size: 0.85rem; color: rgba(16, 18, 24, 0.55); } .schedule-song__duration--custom { color: var(--primary-color); } .schedule-card__total { font-size: 0.85rem; color: rgba(16, 18, 24, 0.55); } .schedule-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .schedule-card__actions .btn-secondary { background: rgba(122, 96, 255, 0.12); border: 1px solid rgba(122, 96, 255, 0.28); color: var(--primary-color); } .schedule-card__actions .btn-secondary:hover { background: rgba(122, 96, 255, 0.2); } .schedule-alert { display: none; margin-bottom: 16px; padding: 14px 18px; border-radius: 12px; background: rgba(255, 98, 98, 0.18); border: 1px solid rgba(255, 142, 142, 0.35); color: #8b1b1f; } .schedule-alert.is-visible { display: block; } .schedule-empty { margin: 0; color: rgba(16, 18, 24, 0.55); }