Spaces:
Running
Running
| /* Professional Minimalist Design System */ | |
| :root { | |
| --color-bg: #090b0d; | |
| --color-panel: #111418; | |
| --color-panel-glass: rgba(17, 20, 24, 0.75); | |
| --color-border: rgba(255, 255, 255, 0.07); | |
| --color-border-active: rgba(255, 255, 255, 0.15); | |
| --color-text-primary: #f1f3f5; | |
| --color-text-muted: #868e96; | |
| --color-text-dim: #5c636a; | |
| /* Muted Elegant Accents */ | |
| --color-accent: #6f9c78; | |
| --color-accent-hover: #83b08c; | |
| --color-accent-bg: rgba(111, 156, 120, 0.12); | |
| --color-accent-active: #a1c7aa; | |
| --color-accent-2: #60a5fa; | |
| --color-accent-2-bg: rgba(96, 165, 250, 0.12); | |
| --font-display: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; | |
| --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); | |
| --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); | |
| --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); | |
| --transition-fast: 0.15s ease; | |
| --transition-normal: 0.25s ease; | |
| } | |
| * { | |
| box-sizing: border-box; | |
| margin: 0; | |
| padding: 0; | |
| -webkit-tap-highlight-color: transparent; | |
| } | |
| body { | |
| font-family: var(--font-ui); | |
| background-color: var(--color-bg); | |
| color: var(--color-text-primary); | |
| min-height: 100vh; | |
| display: flex; | |
| flex-direction: column; | |
| overflow-x: hidden; | |
| line-height: 1.5; | |
| -webkit-font-smoothing: antialiased; | |
| -moz-osx-font-smoothing: grayscale; | |
| } | |
| /* Loading Overlay */ | |
| .loading-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: var(--color-bg); | |
| z-index: 1000; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px; | |
| transition: opacity 0.5s ease, visibility 0.5s ease; | |
| } | |
| .loading-overlay.fade-out { | |
| opacity: 0; | |
| visibility: hidden; | |
| pointer-events: none; | |
| } | |
| .loader-card { | |
| width: 100%; | |
| max-width: 420px; | |
| background-color: var(--color-panel); | |
| border: 1px solid var(--color-border); | |
| border-radius: 12px; | |
| padding: 40px 32px; | |
| text-align: center; | |
| box-shadow: var(--shadow-lg); | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| } | |
| .loader-title { | |
| font-family: var(--font-display); | |
| font-size: 1.8rem; | |
| font-weight: 600; | |
| margin-bottom: 6px; | |
| letter-spacing: -0.01em; | |
| } | |
| .loader-subtitle { | |
| font-size: 0.85rem; | |
| color: var(--color-text-muted); | |
| margin-bottom: 32px; | |
| } | |
| .progress-container { | |
| width: 100%; | |
| } | |
| .loader-cta { | |
| margin-top: 28px; | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .loader-heart-notice { | |
| margin-top: 16px; | |
| width: 100%; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .loader-heart-notice a { | |
| font-size: 0.72rem; | |
| color: var(--color-accent-hover); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: all var(--transition-fast); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .loader-heart-notice a:hover { | |
| color: var(--color-accent-active); | |
| transform: translateY(-1px); | |
| } | |
| .heart-notice { | |
| margin-top: 4px; | |
| border-top: 1px solid var(--color-border); | |
| padding-top: 12px; | |
| display: flex; | |
| justify-content: center; | |
| } | |
| .heart-notice a { | |
| font-size: 0.72rem; | |
| color: var(--color-accent-hover); | |
| text-decoration: none; | |
| font-weight: 500; | |
| transition: all var(--transition-fast); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .heart-notice a:hover { | |
| color: var(--color-accent-active); | |
| transform: translateY(-1px); | |
| } | |
| .progress-bar { | |
| width: 100%; | |
| height: 4px; | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| margin-bottom: 12px; | |
| } | |
| #loadProgress { | |
| display: block; | |
| width: 0%; | |
| height: 100%; | |
| background-color: var(--color-accent); | |
| transition: width 0.2s ease; | |
| } | |
| .progress-details { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.78rem; | |
| color: var(--color-text-muted); | |
| } | |
| /* Dashboard Shell */ | |
| .dashboard-shell { | |
| flex: 1; | |
| max-width: 1500px; | |
| width: 100%; | |
| margin: 0 auto; | |
| padding: 24px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| height: 100vh; | |
| max-height: 100vh; | |
| } | |
| /* App Header */ | |
| .app-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding-bottom: 16px; | |
| border-bottom: 1px solid var(--color-border); | |
| } | |
| .brand { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| } | |
| .brand h2 { | |
| font-family: var(--font-display); | |
| font-size: 1.25rem; | |
| font-weight: 600; | |
| line-height: 1.2; | |
| } | |
| .brand p { | |
| font-size: 0.78rem; | |
| color: var(--color-text-muted); | |
| } | |
| .header-status-badge { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| background-color: rgba(255, 255, 255, 0.03); | |
| padding: 6px 12px; | |
| border: 1px solid var(--color-border); | |
| border-radius: 100px; | |
| font-size: 0.78rem; | |
| font-weight: 500; | |
| } | |
| .cta-link-badge { | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 8px; | |
| background-color: var(--color-accent-bg); | |
| border: 1px solid var(--color-accent); | |
| color: var(--color-accent-active); | |
| padding: 8px 16px; | |
| border-radius: 100px; | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| text-decoration: none; | |
| transition: all var(--transition-normal); | |
| box-shadow: 0 0 8px rgba(111, 156, 120, 0.15); | |
| animation: badgePulse 3s infinite ease-in-out; | |
| } | |
| .cta-link-badge:hover { | |
| background-color: var(--color-accent); | |
| color: #0f1511; | |
| box-shadow: 0 0 16px rgba(111, 156, 120, 0.45); | |
| transform: translateY(-1px); | |
| } | |
| .cta-link-badge svg { | |
| transition: transform var(--transition-fast); | |
| } | |
| .cta-link-badge:hover svg { | |
| transform: translate(1px, -1px); | |
| } | |
| @keyframes badgePulse { | |
| 0% { | |
| box-shadow: 0 0 8px rgba(111, 156, 120, 0.15); | |
| border-color: rgba(111, 156, 120, 0.6); | |
| } | |
| 50% { | |
| box-shadow: 0 0 14px rgba(111, 156, 120, 0.4); | |
| border-color: var(--color-accent); | |
| } | |
| 100% { | |
| box-shadow: 0 0 8px rgba(111, 156, 120, 0.15); | |
| border-color: rgba(111, 156, 120, 0.6); | |
| } | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| background-color: var(--color-text-dim); | |
| transition: background-color var(--transition-fast); | |
| } | |
| .status-dot.playing { | |
| background-color: var(--color-accent); | |
| box-shadow: 0 0 8px var(--color-accent); | |
| } | |
| .status-dot.buffering { | |
| background-color: #d9a75d; | |
| animation: pulse 1.5s infinite; | |
| } | |
| /* Dashboard Layout */ | |
| .dashboard-content { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: 240px 1fr 260px; | |
| gap: 20px; | |
| min-height: 0; | |
| width: 100%; | |
| } | |
| /* Panels */ | |
| .visualizer-panel { | |
| background-color: var(--color-panel); | |
| border: 1px solid var(--color-border); | |
| border-radius: 12px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| min-height: 0; | |
| flex: 1; | |
| } | |
| .panel-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .panel-header h3 { | |
| font-family: var(--font-display); | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--color-text-muted); | |
| } | |
| .hud-stats { | |
| display: flex; | |
| gap: 24px; | |
| align-items: center; | |
| } | |
| .hud-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-end; | |
| } | |
| .hud-label { | |
| font-size: 0.68rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--color-text-dim); | |
| } | |
| .hud-value { | |
| font-family: var(--font-display); | |
| font-size: 1.1rem; | |
| font-weight: 500; | |
| } | |
| .visualizer-container { | |
| flex: 1; | |
| background-color: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(255, 255, 255, 0.05); | |
| border-radius: 8px; | |
| overflow: hidden; | |
| position: relative; | |
| min-height: 250px; | |
| } | |
| #noteCanvas { | |
| display: block; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .queue-hud-item { | |
| display: flex; | |
| flex-direction: column; | |
| align-items: flex-start; | |
| min-width: 110px; | |
| } | |
| .queue-hud-row { | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| width: 100%; | |
| margin-top: 2px; | |
| } | |
| .queue-hud-row .readout-progress { | |
| width: 60px; | |
| height: 4px; | |
| background-color: rgba(255, 255, 255, 0.04); | |
| border-radius: 2px; | |
| overflow: hidden; | |
| } | |
| .queue-hud-row #queueFill { | |
| display: block; | |
| width: 0%; | |
| height: 100%; | |
| background-color: var(--color-accent); | |
| transition: width 0.15s ease; | |
| } | |
| /* Controls Panel Bottom */ | |
| .main-column { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| min-width: 0; | |
| } | |
| .sidebar-column { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| min-width: 0; | |
| overflow-y: auto; | |
| max-height: 100%; | |
| padding-right: 4px; | |
| } | |
| .sidebar-column::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| .sidebar-column::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .sidebar-column::-webkit-scrollbar-thumb { | |
| background-color: rgba(255, 255, 255, 0.08); | |
| border-radius: 4px; | |
| } | |
| .sidebar-column::-webkit-scrollbar-thumb:hover { | |
| background-color: rgba(255, 255, 255, 0.15); | |
| } | |
| .info-sidebar { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .info-card { | |
| background-color: var(--color-panel); | |
| border: 1px dashed var(--color-border); | |
| border-radius: 12px; | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .info-card h5 { | |
| font-family: var(--font-display); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--color-text-muted); | |
| border-bottom: 1px solid var(--color-border); | |
| padding-bottom: 6px; | |
| margin-bottom: 4px; | |
| } | |
| .info-card p { | |
| font-size: 0.75rem; | |
| line-height: 1.5; | |
| color: var(--color-text-muted); | |
| } | |
| .controls-panel-bottom { | |
| background-color: var(--color-panel); | |
| border: 1px solid var(--color-border); | |
| border-radius: 12px; | |
| padding: 20px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .controls-main-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .playback-actions { | |
| display: flex; | |
| gap: 12px; | |
| flex-wrap: wrap; | |
| } | |
| .playback-actions button { | |
| flex-shrink: 0; | |
| } | |
| .seeding-group { | |
| display: flex; | |
| align-items: center; | |
| } | |
| .settings-dropdown, .playing-style-panel { | |
| border: 1px solid var(--color-border); | |
| border-radius: 12px; | |
| background-color: var(--color-panel); | |
| padding: 16px; | |
| transition: background-color var(--transition-fast); | |
| } | |
| .settings-dropdown[open] { | |
| background-color: var(--color-panel); | |
| } | |
| .settings-dropdown summary { | |
| font-family: var(--font-display); | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--color-text-muted); | |
| cursor: pointer; | |
| outline: none; | |
| user-select: none; | |
| transition: color var(--transition-fast); | |
| list-style: none; | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .settings-dropdown summary::-webkit-details-marker { | |
| display: none; | |
| } | |
| .settings-dropdown summary::after { | |
| content: '+'; | |
| font-size: 1.1rem; | |
| font-weight: 400; | |
| color: var(--color-text-dim); | |
| } | |
| .settings-dropdown[open] summary::after { | |
| content: '−'; | |
| } | |
| .settings-dropdown summary:hover { | |
| color: var(--color-text-primary); | |
| } | |
| .settings-vertical-stack { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| margin-top: 14px; | |
| } | |
| .settings-column { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .settings-column h5 { | |
| font-family: var(--font-display); | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| color: var(--color-text-muted); | |
| border-bottom: 1px solid var(--color-border); | |
| padding-bottom: 6px; | |
| margin-bottom: 4px; | |
| } | |
| button { | |
| font-family: var(--font-ui); | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| height: 42px; | |
| border-radius: 6px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| gap: 8px; | |
| padding: 0 16px; | |
| white-space: nowrap; | |
| transition: background-color var(--transition-fast), border-color var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast); | |
| } | |
| button:disabled { | |
| cursor: not-allowed; | |
| opacity: 0.35 ; | |
| } | |
| .btn-primary { | |
| background-color: var(--color-accent); | |
| color: #0f1511; | |
| border: none; | |
| } | |
| .btn-primary:hover:not(:disabled) { | |
| background-color: var(--color-accent-hover); | |
| } | |
| .btn-primary:active:not(:disabled) { | |
| background-color: var(--color-accent-active); | |
| } | |
| .btn-secondary { | |
| background-color: rgba(255, 255, 255, 0.04); | |
| color: var(--color-text-primary); | |
| border: 1px solid var(--color-border); | |
| } | |
| .btn-secondary:hover:not(:disabled) { | |
| background-color: rgba(255, 255, 255, 0.08); | |
| border-color: var(--color-border-active); | |
| } | |
| .btn-sm { | |
| height: 34px; | |
| font-size: 0.76rem; | |
| padding: 0 12px; | |
| flex: 1; | |
| } | |
| .btn-file-label { | |
| cursor: pointer; | |
| text-align: center; | |
| } | |
| /* RENDER FULL SONG BUTTON & MODALS */ | |
| .btn-render-song { | |
| background: linear-gradient(135deg, rgba(111, 156, 120, 0.25) 0%, rgba(59, 130, 246, 0.25) 100%) ; | |
| border: 1px solid rgba(111, 156, 120, 0.5) ; | |
| color: #a1c7aa ; | |
| font-weight: 600 ; | |
| transition: all var(--transition-fast) ; | |
| } | |
| .btn-render-song:hover:not(:disabled) { | |
| background: linear-gradient(135deg, rgba(111, 156, 120, 0.45) 0%, rgba(59, 130, 246, 0.45) 100%) ; | |
| border-color: var(--color-accent) ; | |
| box-shadow: 0 0 16px rgba(111, 156, 120, 0.4) ; | |
| transform: translateY(-1px); | |
| } | |
| .render-modal-overlay { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(9, 11, 13, 0.85); | |
| backdrop-filter: blur(8px); | |
| z-index: 1200; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| padding: 24px; | |
| animation: fadeIn 0.25s ease; | |
| } | |
| .render-modal-card { | |
| width: 100%; | |
| max-width: 480px; | |
| background-color: var(--color-panel); | |
| border: 1px solid var(--color-border); | |
| border-radius: 16px; | |
| padding: 32px 28px; | |
| box-shadow: var(--shadow-lg); | |
| display: flex; | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .render-modal-header { | |
| display: flex; | |
| align-items: center; | |
| gap: 16px; | |
| } | |
| .render-icon-spinner { | |
| font-size: 1.8rem; | |
| background: rgba(111, 156, 120, 0.15); | |
| border: 1px solid var(--color-accent); | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| animation: spinSlow 3s infinite linear; | |
| } | |
| .render-icon-success { | |
| font-size: 1.8rem; | |
| background: rgba(16, 185, 129, 0.15); | |
| border: 1px solid #10b981; | |
| width: 48px; | |
| height: 48px; | |
| border-radius: 12px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| @keyframes spinSlow { | |
| 0% { transform: rotate(0deg); } | |
| 100% { transform: rotate(360deg); } | |
| } | |
| .render-modal-title { | |
| font-family: var(--font-display); | |
| font-size: 1.15rem; | |
| font-weight: 600; | |
| color: var(--color-text-primary); | |
| line-height: 1.2; | |
| } | |
| .render-modal-subtitle { | |
| font-size: 0.76rem; | |
| color: var(--color-text-muted); | |
| margin-top: 2px; | |
| } | |
| .render-progress-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .render-progress-bar { | |
| width: 100%; | |
| height: 8px; | |
| background-color: rgba(255, 255, 255, 0.06); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| } | |
| #renderProgressFill { | |
| display: block; | |
| height: 100%; | |
| background: linear-gradient(90deg, #6f9c78 0%, #3b82f6 100%); | |
| transition: width 0.2s ease; | |
| } | |
| .render-progress-details { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.78rem; | |
| color: var(--color-text-muted); | |
| } | |
| .render-pct-text { | |
| font-family: var(--font-display); | |
| font-weight: 700; | |
| color: var(--color-accent); | |
| } | |
| .render-stats-row { | |
| display: flex; | |
| justify-content: space-between; | |
| background: rgba(0, 0, 0, 0.25); | |
| border: 1px solid var(--color-border); | |
| border-radius: 8px; | |
| padding: 12px 16px; | |
| } | |
| .render-stat-item { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .render-stat-label { | |
| font-size: 0.65rem; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| color: var(--color-text-dim); | |
| } | |
| .render-stat-val { | |
| font-family: var(--font-display); | |
| font-size: 0.95rem; | |
| font-weight: 600; | |
| color: var(--color-text-primary); | |
| } | |
| .render-done-summary { | |
| display: flex; | |
| gap: 10px; | |
| justify-content: space-between; | |
| } | |
| .summary-pill { | |
| flex: 1; | |
| background: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--color-border); | |
| border-radius: 8px; | |
| padding: 10px; | |
| display: flex; | |
| flex-direction: column; | |
| align-items: center; | |
| text-align: center; | |
| } | |
| .pill-label { | |
| font-size: 0.65rem; | |
| text-transform: uppercase; | |
| color: var(--color-text-dim); | |
| } | |
| .pill-val { | |
| font-family: var(--font-display); | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| color: var(--color-accent-hover); | |
| margin-top: 2px; | |
| } | |
| .render-action-buttons { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 10px; | |
| } | |
| .btn-lg-action { | |
| height: 46px; | |
| font-size: 0.9rem; | |
| font-weight: 600; | |
| border-radius: 8px; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: scale(0.98); } | |
| to { opacity: 1; transform: scale(1.0); } | |
| } | |
| #newSongBtn { | |
| border-color: rgba(111, 156, 120, 0.25); | |
| transition: background-color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); | |
| } | |
| #newSongBtn:not(:disabled) { | |
| animation: newSongPulse 3.5s infinite ease-in-out; | |
| } | |
| #newSongBtn:hover:not(:disabled) { | |
| animation: none; | |
| border-color: var(--color-accent); | |
| box-shadow: 0 0 16px rgba(111, 156, 120, 0.4); | |
| background-color: rgba(111, 156, 120, 0.25); | |
| } | |
| #newSongBtn svg { | |
| transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); | |
| } | |
| #newSongBtn:hover:not(:disabled) svg { | |
| transform: rotate(360deg); | |
| } | |
| @keyframes newSongPulse { | |
| 0% { | |
| border-color: rgba(111, 156, 120, 0.25); | |
| box-shadow: 0 0 0px rgba(111, 156, 120, 0); | |
| background-color: rgba(255, 255, 255, 0.04); | |
| } | |
| 50% { | |
| border-color: rgba(111, 156, 120, 0.85); | |
| box-shadow: 0 0 12px rgba(111, 156, 120, 0.3); | |
| background-color: rgba(111, 156, 120, 0.16); | |
| } | |
| 100% { | |
| border-color: rgba(111, 156, 120, 0.25); | |
| box-shadow: 0 0 0px rgba(111, 156, 120, 0); | |
| background-color: rgba(255, 255, 255, 0.04); | |
| } | |
| } | |
| .slider-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .slider-header { | |
| display: flex; | |
| justify-content: space-between; | |
| font-size: 0.78rem; | |
| color: var(--color-text-muted); | |
| } | |
| input[type="range"] { | |
| -webkit-appearance: none; | |
| width: 100%; | |
| height: 6px; | |
| background: rgba(255, 255, 255, 0.06); | |
| border-radius: 3px; | |
| outline: none; | |
| cursor: pointer; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance: none; | |
| appearance: none; | |
| width: 16px; | |
| height: 16px; | |
| border-radius: 50%; | |
| background: var(--color-text-primary); | |
| border: 2px solid var(--color-bg); | |
| box-shadow: var(--shadow-sm); | |
| transition: transform var(--transition-fast), background-color var(--transition-fast); | |
| } | |
| input[type="range"]::-webkit-slider-thumb:hover { | |
| transform: scale(1.15); | |
| background: var(--color-accent); | |
| } | |
| input[type="range"]::-moz-range-thumb { | |
| width: 12px; | |
| height: 12px; | |
| border-radius: 50%; | |
| background: var(--color-text-primary); | |
| border: 2px solid var(--color-bg); | |
| box-shadow: var(--shadow-sm); | |
| transition: transform var(--transition-fast), background-color var(--transition-fast); | |
| } | |
| input[type="range"]::-moz-range-thumb:hover { | |
| transform: scale(1.15); | |
| background: var(--color-accent); | |
| } | |
| .advanced-details { | |
| border-top: 1px solid var(--color-border); | |
| padding-top: 16px; | |
| } | |
| .advanced-details summary { | |
| font-size: 0.78rem; | |
| color: var(--color-text-dim); | |
| cursor: pointer; | |
| user-select: none; | |
| outline: none; | |
| transition: color var(--transition-fast); | |
| } | |
| .advanced-details summary:hover { | |
| color: var(--color-text-muted); | |
| } | |
| .advanced-content { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| padding-top: 12px; | |
| } | |
| .input-file-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| } | |
| .input-file-group label { | |
| font-size: 0.72rem; | |
| color: var(--color-text-muted); | |
| } | |
| input[type="file"] { | |
| font-size: 0.72rem; | |
| background-color: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--color-border); | |
| border-radius: 4px; | |
| padding: 6px 8px; | |
| color: var(--color-text-muted); | |
| outline: none; | |
| } | |
| input[type="file"]::file-selector-button { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border: 1px solid var(--color-border); | |
| border-radius: 3px; | |
| color: var(--color-text-primary); | |
| padding: 2px 8px; | |
| margin-right: 8px; | |
| cursor: pointer; | |
| font-size: 0.68rem; | |
| } | |
| .text-input { | |
| font-family: var(--font-ui); | |
| font-size: 0.82rem; | |
| height: 38px; | |
| background-color: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--color-border); | |
| border-radius: 6px; | |
| color: var(--color-text-primary); | |
| padding: 0 12px; | |
| outline: none; | |
| transition: border-color var(--transition-fast), background-color var(--transition-fast); | |
| } | |
| .text-input::placeholder { | |
| color: var(--color-text-dim); | |
| } | |
| .text-input:focus { | |
| border-color: var(--color-accent); | |
| background-color: rgba(255, 255, 255, 0.04); | |
| } | |
| .advanced-info { | |
| font-size: 0.68rem; | |
| color: var(--color-text-dim); | |
| font-style: italic; | |
| } | |
| .select-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .select-group label { | |
| font-size: 0.78rem; | |
| color: var(--color-text-muted); | |
| } | |
| select { | |
| font-family: var(--font-ui); | |
| font-size: 0.85rem; | |
| height: 38px; | |
| background-color: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--color-border); | |
| border-radius: 6px; | |
| color: var(--color-text-primary); | |
| padding: 0 10px; | |
| outline: none; | |
| cursor: pointer; | |
| transition: border-color var(--transition-fast); | |
| } | |
| select:focus { | |
| border-color: var(--color-border-active); | |
| } | |
| select option { | |
| background-color: #111418; | |
| color: #f1f3f5; | |
| } | |
| .custom-select-container { | |
| position: relative; | |
| width: 100%; | |
| } | |
| .custom-select-container select { | |
| width: 100%; | |
| appearance: none; | |
| -webkit-appearance: none; | |
| -moz-appearance: none; | |
| background-color: rgba(255, 255, 255, 0.02); | |
| border: 1px solid var(--color-border); | |
| border-radius: 8px; | |
| color: var(--color-text-primary); | |
| font-size: 0.85rem; | |
| font-weight: 500; | |
| padding: 0 36px 0 14px; | |
| height: 42px; | |
| outline: none; | |
| cursor: pointer; | |
| transition: all var(--transition-normal); | |
| box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15); | |
| } | |
| .custom-select-container select:hover { | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-color: var(--color-border-active); | |
| box-shadow: 0 4px 12px rgba(16, 185, 129, 0.08); | |
| } | |
| .top-model-selector { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| background-color: rgba(255, 255, 255, 0.03); | |
| border: 1px solid var(--color-border); | |
| padding: 4px 12px; | |
| border-radius: 20px; | |
| transition: all var(--transition-fast); | |
| } | |
| .top-model-selector:hover { | |
| border-color: var(--color-border-active); | |
| background-color: rgba(255, 255, 255, 0.05); | |
| } | |
| .top-select-item { | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .top-model-label { | |
| font-size: 0.74rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--color-accent); | |
| white-space: nowrap; | |
| } | |
| .backend-static-badge { | |
| font-size: 0.78rem; | |
| font-weight: 600; | |
| color: var(--color-text-primary); | |
| background-color: rgba(0, 0, 0, 0.25); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| border-radius: 12px; | |
| padding: 0 12px; | |
| height: 32px; | |
| display: inline-flex; | |
| align-items: center; | |
| white-space: nowrap; | |
| cursor: help; | |
| } | |
| .top-select-container { | |
| width: auto; | |
| } | |
| .top-select-container select { | |
| height: 32px; | |
| padding: 0 28px 0 10px; | |
| font-size: 0.8rem; | |
| border-radius: 12px; | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| background-color: rgba(0, 0, 0, 0.25); | |
| width: auto; | |
| } | |
| .custom-select-container select:focus { | |
| border-color: var(--color-accent); | |
| box-shadow: 0 0 0 3px rgba(111, 156, 120, 0.15); | |
| } | |
| .custom-select-container::after { | |
| content: ""; | |
| position: absolute; | |
| right: 15px; | |
| top: 50%; | |
| transform: translateY(-50%); | |
| width: 8px; | |
| height: 5px; | |
| background-color: var(--color-text-muted); | |
| clip-path: polygon(100% 0, 0 0, 50% 100%); | |
| pointer-events: none; | |
| transition: background-color var(--transition-fast); | |
| } | |
| .custom-select-container:hover::after { | |
| background-color: var(--color-accent); | |
| } | |
| .midi-seed-controls { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| background-color: rgba(255, 255, 255, 0.01); | |
| border: 1px solid var(--color-border); | |
| border-radius: 8px; | |
| padding: 12px; | |
| } | |
| .midi-info-text { | |
| font-size: 0.78rem; | |
| color: var(--color-text-muted); | |
| } | |
| .midi-info-subtext { | |
| font-size: 0.72rem; | |
| color: var(--color-text-dim); | |
| margin-top: 4px; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 0.5; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.5; } | |
| } | |
| /* ========================================== | |
| MIDI SUB-MODE TABS (Continue Track vs Trained Style) | |
| ========================================== */ | |
| .mode-tab-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| margin-bottom: 4px; | |
| } | |
| .mode-tab-btn { | |
| height: auto; | |
| min-height: 52px; | |
| justify-content: flex-start; | |
| text-align: left; | |
| gap: 10px; | |
| background-color: rgba(255, 255, 255, 0.015); | |
| border: 1px solid var(--color-border); | |
| color: var(--color-text-muted); | |
| padding: 10px 12px; | |
| border-radius: 8px; | |
| white-space: normal; | |
| } | |
| .mode-tab-btn:hover:not(:disabled) { | |
| background-color: rgba(255, 255, 255, 0.04); | |
| border-color: var(--color-border-active); | |
| } | |
| .mode-tab-btn.active { | |
| background-color: var(--color-accent-bg); | |
| border-color: var(--color-accent); | |
| color: var(--color-text-primary); | |
| box-shadow: 0 4px 12px rgba(111, 156, 120, 0.12); | |
| } | |
| .mode-tab-icon { | |
| font-size: 1.15rem; | |
| flex-shrink: 0; | |
| } | |
| .mode-tab-text { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .mode-tab-title { | |
| font-size: 0.82rem; | |
| font-weight: 600; | |
| color: var(--color-text-primary); | |
| } | |
| .mode-tab-desc { | |
| font-size: 0.68rem; | |
| color: var(--color-text-muted); | |
| white-space: normal; | |
| line-height: 1.3; | |
| } | |
| /* ========================================== | |
| TRAINED STYLE PANEL | |
| ========================================== */ | |
| .train-files-list { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| max-height: 140px; | |
| overflow-y: auto; | |
| background-color: rgba(0, 0, 0, 0.2); | |
| border: 1px solid var(--color-border); | |
| border-radius: 6px; | |
| padding: 6px; | |
| } | |
| .train-files-list::-webkit-scrollbar { | |
| width: 4px; | |
| } | |
| .train-files-list::-webkit-scrollbar-thumb { | |
| background-color: rgba(255, 255, 255, 0.1); | |
| border-radius: 4px; | |
| } | |
| .train-file-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| gap: 8px; | |
| padding: 6px 8px; | |
| border-radius: 4px; | |
| background-color: rgba(255, 255, 255, 0.02); | |
| } | |
| .train-file-name { | |
| font-size: 0.74rem; | |
| color: var(--color-text-primary); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| flex: 1; | |
| min-width: 0; | |
| } | |
| .train-file-stats { | |
| font-size: 0.68rem; | |
| color: var(--color-text-dim); | |
| flex-shrink: 0; | |
| } | |
| .train-actions-row { | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .train-io-row { | |
| display: flex; | |
| gap: 8px; | |
| margin-top: 10px; | |
| } | |
| .active-style-card { | |
| display: flex; | |
| align-items: center; | |
| gap: 12px; | |
| background: linear-gradient(135deg, rgba(111, 156, 120, 0.14) 0%, rgba(59, 130, 246, 0.1) 100%); | |
| border: 1px solid rgba(111, 156, 120, 0.35); | |
| border-radius: 10px; | |
| padding: 12px; | |
| margin-top: 10px; | |
| } | |
| .active-style-icon { | |
| font-size: 1.6rem; | |
| flex-shrink: 0; | |
| } | |
| .active-style-info { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 2px; | |
| min-width: 0; | |
| } | |
| .active-style-name { | |
| font-family: var(--font-display); | |
| font-size: 0.88rem; | |
| font-weight: 600; | |
| color: var(--color-text-primary); | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| white-space: nowrap; | |
| } | |
| .active-style-stats { | |
| font-size: 0.7rem; | |
| color: var(--color-text-muted); | |
| } | |
| @media (max-width: 840px) { | |
| .cta-extra-text { | |
| display: none; | |
| } | |
| .dashboard-shell { | |
| height: auto; | |
| max-height: none; | |
| overflow-y: auto; | |
| padding: 16px; | |
| gap: 16px; | |
| } | |
| .main-column { | |
| order: 1; | |
| } | |
| .sidebar-column { | |
| order: 2; | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .sidebar-column .settings-dropdown { | |
| order: 2; | |
| } | |
| .sidebar-column .playing-style-panel { | |
| order: 1; | |
| } | |
| .sidebar-spacer { | |
| order: 3; | |
| } | |
| .dashboard-content { | |
| grid-template-columns: 1fr; | |
| height: auto; | |
| min-height: 0; | |
| } | |
| .visualizer-panel { | |
| height: auto; | |
| flex: none; | |
| } | |
| .visualizer-container { | |
| height: 300px; | |
| min-height: 250px; | |
| } | |
| .controls-main-row { | |
| flex-direction: column; | |
| align-items: stretch; | |
| gap: 12px; | |
| } | |
| .playback-actions { | |
| width: 100%; | |
| } | |
| .playback-actions button { | |
| flex: 1; | |
| } | |
| .seeding-group { | |
| justify-content: center; | |
| } | |
| } | |
| @media (max-width: 640px) { | |
| .hud-stats { | |
| flex-wrap: wrap; | |
| gap: 12px; | |
| } | |
| } | |
| @media (max-width: 480px) { | |
| .loader-card { | |
| padding: 28px 20px; | |
| } | |
| .app-header { | |
| padding-bottom: 12px; | |
| } | |
| .app-header h2 { | |
| font-size: 1.1rem; | |
| } | |
| .visualizer-panel { | |
| padding: 12px; | |
| height: auto; | |
| gap: 12px; | |
| } | |
| .panel-header { | |
| flex-direction: column; | |
| align-items: flex-start; | |
| gap: 8px; | |
| } | |
| .hud-stats { | |
| width: 100%; | |
| justify-content: space-between; | |
| } | |
| .train-actions-row, | |
| .train-io-row { | |
| flex-direction: column; | |
| } | |
| } | |
| .midi-timeline { | |
| display: flex; | |
| gap: 3px; | |
| height: 52px; | |
| background-color: rgba(0, 0, 0, 0.25); | |
| border: 1px solid var(--color-border); | |
| border-radius: 6px; | |
| padding: 6px 8px 14px 8px; | |
| overflow-x: auto; | |
| align-items: flex-end; | |
| margin-bottom: 8px; | |
| margin-top: 4px; | |
| } | |
| .midi-timeline::-webkit-scrollbar { | |
| height: 4px; | |
| } | |
| .midi-timeline::-webkit-scrollbar-track { | |
| background: transparent; | |
| } | |
| .midi-timeline::-webkit-scrollbar-thumb { | |
| background-color: rgba(255, 255, 255, 0.08); | |
| border-radius: 10px; | |
| } | |
| .timeline-bar-col { | |
| flex: 1; | |
| min-width: 10px; | |
| max-width: 24px; | |
| height: 100%; | |
| display: flex; | |
| flex-direction: column; | |
| justify-content: flex-end; | |
| cursor: pointer; | |
| position: relative; | |
| border-radius: 3px; | |
| transition: background-color var(--transition-fast), transform var(--transition-fast); | |
| } | |
| .timeline-bar-col:hover { | |
| background-color: rgba(255, 255, 255, 0.04); | |
| transform: translateY(-1px); | |
| } | |
| .density-fill { | |
| width: 100%; | |
| background-color: var(--color-text-dim); | |
| border-radius: 1.5px; | |
| transition: background-color var(--transition-fast), height var(--transition-normal); | |
| } | |
| .timeline-bar-col.in-warmup { | |
| background-color: rgba(111, 156, 120, 0.08); | |
| } | |
| .timeline-bar-col.in-warmup .density-fill { | |
| background-color: var(--color-accent); | |
| } | |
| .timeline-bar-col.is-selected { | |
| background-color: rgba(255, 255, 255, 0.08); | |
| box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3); | |
| } | |
| .timeline-bar-col.is-selected .density-fill { | |
| background-color: var(--color-text-primary); | |
| } | |
| .timeline-bar-col::after { | |
| content: attr(data-bar-label); | |
| position: absolute; | |
| bottom: -11px; | |
| left: 50%; | |
| transform: translateX(-50%); | |
| font-size: 0.58rem; | |
| color: var(--color-text-dim); | |
| pointer-events: none; | |
| transition: color var(--transition-fast), opacity var(--transition-fast); | |
| white-space: nowrap; | |
| opacity: 0; | |
| } | |
| .timeline-bar-col.labeled::after { | |
| opacity: 0.6; | |
| } | |
| .timeline-bar-col:hover::after { | |
| opacity: 1; | |
| color: var(--color-text-primary); | |
| } | |
| .toggle-group-container { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 8px; | |
| } | |
| .toggle-group-label { | |
| font-size: 0.78rem; | |
| color: var(--color-text-muted); | |
| font-weight: 500; | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| } | |
| .toggle-group { | |
| display: flex; | |
| background-color: rgba(0, 0, 0, 0.22); | |
| border: 1px solid var(--color-border); | |
| border-radius: 6px; | |
| padding: 3px; | |
| gap: 2px; | |
| } | |
| #seedSourceGroup.toggle-group { | |
| flex-direction: column; | |
| gap: 8px; | |
| background-color: transparent; | |
| border: none; | |
| padding: 0; | |
| } | |
| #seedSourceGroup.toggle-group .toggle-btn { | |
| height: 42px; | |
| font-size: 0.85rem; | |
| border: 1px solid var(--color-border); | |
| background-color: rgba(255, 255, 255, 0.02); | |
| color: var(--color-text-muted); | |
| justify-content: flex-start; | |
| padding: 0 16px; | |
| position: relative; | |
| transition: all var(--transition-normal); | |
| overflow: hidden; | |
| } | |
| .rec-tag { | |
| font-size: 0.55rem; | |
| line-height: 1; | |
| text-transform: uppercase; | |
| letter-spacing: 0.03em; | |
| background-color: rgba(111, 156, 120, 0.08); | |
| color: var(--color-accent); | |
| border: 1px solid rgba(111, 156, 120, 0.25); | |
| padding: 2px 5px; | |
| border-radius: 3px; | |
| font-weight: 600; | |
| margin-left: auto; | |
| transition: all var(--transition-fast); | |
| } | |
| #seedSourceGroup.toggle-group .toggle-btn:hover:not(:disabled) .rec-tag, | |
| #seedSourceGroup.toggle-group .toggle-btn.active .rec-tag { | |
| background-color: var(--color-accent); | |
| color: #0f1511; | |
| border-color: var(--color-accent); | |
| } | |
| #seedSourceGroup.toggle-group .toggle-btn:hover:not(:disabled) { | |
| color: var(--color-text-primary); | |
| background-color: rgba(255, 255, 255, 0.05); | |
| border-color: var(--color-border-active); | |
| transform: translateX(3px); | |
| } | |
| #seedSourceGroup.toggle-group .toggle-btn.active { | |
| background-color: var(--color-accent-bg); | |
| color: var(--color-text-primary); | |
| border-color: var(--color-accent); | |
| box-shadow: 0 4px 12px rgba(111, 156, 120, 0.12); | |
| } | |
| #seedSourceGroup.toggle-group .toggle-btn::before { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| top: 0; | |
| bottom: 0; | |
| width: 3px; | |
| background-color: var(--color-accent); | |
| opacity: 0; | |
| transition: opacity var(--transition-fast); | |
| } | |
| #seedSourceGroup.toggle-group .toggle-btn.active::before { | |
| opacity: 1; | |
| } | |
| #seedSourceGroup.toggle-group .toggle-btn:disabled { | |
| opacity: 0.35; | |
| cursor: not-allowed; | |
| transform: none; | |
| } | |
| .toggle-group .toggle-btn { | |
| flex: 1; | |
| height: 34px; | |
| font-size: 0.8rem; | |
| font-weight: 500; | |
| border: none; | |
| background-color: transparent; | |
| color: var(--color-text-muted); | |
| border-radius: 4px; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: background-color var(--transition-fast), color var(--transition-fast); | |
| padding: 0 16px; | |
| } | |
| .toggle-group .toggle-btn:hover:not(:disabled) { | |
| color: var(--color-text-primary); | |
| background-color: rgba(255, 255, 255, 0.02); | |
| } | |
| .toggle-group .toggle-btn.active { | |
| background-color: var(--color-accent); | |
| color: #0f1511; | |
| } | |
| .toggle-group .toggle-btn:disabled { | |
| opacity: 0.3; | |
| cursor: not-allowed; | |
| } | |
| .timeline-bar-col.disabled { | |
| opacity: 0.25; | |
| cursor: not-allowed; | |
| pointer-events: none; | |
| } | |
| .btn-recording { | |
| border-color: rgba(217, 83, 79, 0.4) ; | |
| background-color: rgba(217, 83, 79, 0.08) ; | |
| color: #f1f3f5 ; | |
| } | |
| .btn-recording:hover:not(:disabled) { | |
| background-color: rgba(217, 83, 79, 0.15) ; | |
| } | |
| .pulse-record { | |
| animation: recordPulse 1.5s infinite; | |
| } | |
| /* AI 2.0 BRAND & MUSICAL INTELLIGENCE HUD */ | |
| .brand-badge-ai { | |
| font-size: 0.65rem; | |
| font-weight: 700; | |
| letter-spacing: 0.05em; | |
| background: linear-gradient(135deg, #6f9c78 0%, #3b82f6 100%); | |
| color: #000; | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| margin-left: 6px; | |
| vertical-align: middle; | |
| } | |
| .visualizer-title-group { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 6px; | |
| } | |
| .ai-hud-badges { | |
| display: flex; | |
| gap: 8px; | |
| align-items: center; | |
| flex-wrap: wrap; | |
| } | |
| .hud-badge { | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| padding: 3px 8px; | |
| border-radius: 100px; | |
| text-transform: uppercase; | |
| letter-spacing: 0.04em; | |
| transition: all var(--transition-fast); | |
| display: inline-flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .ep-badge { | |
| background-color: rgba(139, 92, 246, 0.15); | |
| color: #a78bfa; | |
| border: 1px solid rgba(139, 92, 246, 0.3); | |
| } | |
| .key-badge { | |
| background-color: rgba(59, 130, 246, 0.12); | |
| color: #60a5fa; | |
| border: 1px solid rgba(59, 130, 246, 0.3); | |
| } | |
| .phrase-badge { | |
| background-color: rgba(16, 185, 129, 0.12); | |
| color: #34d399; | |
| border: 1px solid rgba(16, 185, 129, 0.3); | |
| } | |
| .cadence-badge { | |
| background-color: rgba(245, 158, 11, 0.12); | |
| color: #fbbf24; | |
| border: 1px solid rgba(245, 158, 11, 0.3); | |
| } | |
| .cadence-badge.active { | |
| background-color: rgba(239, 68, 68, 0.2); | |
| color: #f87171; | |
| border-color: rgba(239, 68, 68, 0.5); | |
| animation: pulse 1s infinite ease-in-out; | |
| } | |
| .intelligence-settings-dropdown { | |
| border-color: rgba(111, 156, 120, 0.3); | |
| } | |
| .active-heuristics-count { | |
| font-size: 0.68rem; | |
| font-weight: 600; | |
| color: var(--color-accent); | |
| background-color: var(--color-accent-bg); | |
| padding: 2px 8px; | |
| border-radius: 100px; | |
| } | |
| .toggle-switch-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 6px 0; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.03); | |
| } | |
| .switch-info { | |
| display: flex; | |
| flex-direction: column; | |
| } | |
| .switch-title { | |
| font-size: 0.78rem; | |
| font-weight: 500; | |
| color: var(--color-text-primary); | |
| } | |
| .switch-desc { | |
| font-size: 0.68rem; | |
| color: var(--color-text-muted); | |
| } | |
| .switch { | |
| position: relative; | |
| display: inline-block; | |
| width: 36px; | |
| height: 20px; | |
| flex-shrink: 0; | |
| } | |
| .switch input { | |
| opacity: 0; | |
| width: 0; | |
| height: 0; | |
| } | |
| .slider-round { | |
| position: absolute; | |
| cursor: pointer; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| bottom: 0; | |
| background-color: rgba(255, 255, 255, 0.12); | |
| transition: .3s; | |
| border-radius: 20px; | |
| } | |
| .slider-round:before { | |
| position: absolute; | |
| content: ""; | |
| height: 14px; | |
| width: 14px; | |
| left: 3px; | |
| bottom: 3px; | |
| background-color: white; | |
| transition: .3s; | |
| border-radius: 50%; | |
| } | |
| input:checked + .slider-round { | |
| background-color: var(--color-accent); | |
| } | |
| input:checked + .slider-round:before { | |
| transform: translateX(16px); | |
| } | |
| .heuristics-list { | |
| list-style: none; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 4px; | |
| margin-top: 4px; | |
| } | |
| .heuristics-list li { | |
| font-size: 0.72rem; | |
| color: var(--color-text-muted); | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .h-icon { | |
| font-size: 0.75rem; | |
| } | |
| /* BPM TEMPO PRESETS & RUSH E STYLING */ | |
| .btn-bpm-preset { | |
| height: 28px; | |
| font-size: 0.7rem; | |
| font-weight: 600; | |
| padding: 0 8px; | |
| background: rgba(255, 255, 255, 0.04); | |
| border: 1px solid var(--color-border); | |
| color: var(--color-text-muted); | |
| border-radius: 4px; | |
| cursor: pointer; | |
| transition: all var(--transition-fast); | |
| } | |
| .btn-bpm-preset:hover { | |
| background: rgba(255, 255, 255, 0.1); | |
| color: var(--color-text-primary); | |
| border-color: var(--color-border-active); | |
| } | |
| .btn-rush-e { | |
| background: rgba(239, 68, 68, 0.18) ; | |
| color: #f87171 ; | |
| border-color: rgba(239, 68, 68, 0.4) ; | |
| font-weight: 700 ; | |
| animation: rushPulse 1.8s infinite ease-in-out; | |
| } | |
| .btn-rush-e:hover { | |
| background: rgba(239, 68, 68, 0.35) ; | |
| box-shadow: 0 0 12px rgba(239, 68, 68, 0.5) ; | |
| transform: scale(1.03); | |
| } | |
| @keyframes rushPulse { | |
| 0% { box-shadow: 0 0 0px rgba(239, 68, 68, 0); } | |
| 50% { box-shadow: 0 0 10px rgba(239, 68, 68, 0.4); } | |
| 100% { box-shadow: 0 0 0px rgba(239, 68, 68, 0); } | |
| } |