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 (No Neon) */ | |
| --color-accent: #6f9c78; /* Muted Emerald Sage */ | |
| --color-accent-hover: #83b08c; | |
| --color-accent-bg: rgba(111, 156, 120, 0.12); | |
| --color-accent-active: #a1c7aa; | |
| --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; /* Muted Gold */ | |
| animation: pulse 1.5s infinite; | |
| } | |
| /* Dashboard Layout */ | |
| .dashboard-content { | |
| flex: 1; | |
| display: grid; | |
| grid-template-columns: 240px 1fr 240px; | |
| 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.15); | |
| border: 1px solid rgba(255, 255, 255, 0.03); | |
| 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: 20px; | |
| min-width: 0; | |
| overflow-y: auto; | |
| max-height: 100%; | |
| padding-right: 4px; | |
| } | |
| /* Custom Scrollbar for Sidebar Column */ | |
| .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 */ | |
| .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; /* Hide default arrow */ | |
| display: flex; | |
| align-items: center; | |
| justify-content: space-between; | |
| } | |
| .settings-dropdown summary::-webkit-details-marker { | |
| display: none; /* Hide default arrow in Safari */ | |
| } | |
| .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: 20px; | |
| margin-top: 16px; | |
| } | |
| .settings-column { | |
| display: flex; | |
| flex-direction: column; | |
| gap: 16px; | |
| } | |
| .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); | |
| } | |
| 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); | |
| } | |
| /* Subtle attention styling for New Song button */ | |
| #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); | |
| } | |
| } | |
| /* Sliders */ | |
| .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; | |
| } | |
| /* Slider Thumb */ | |
| 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 Configuration */ | |
| .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; | |
| } | |
| .advanced-info { | |
| font-size: 0.68rem; | |
| color: var(--color-text-dim); | |
| font-style: italic; | |
| } | |
| /* Select Dropdown & Seeding Style overrides */ | |
| .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 Pretty Select Dropdown styles */ | |
| .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); | |
| } | |
| /* Header Top Model Switcher */ | |
| .top-model-selector { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| 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-model-label { | |
| font-size: 0.74rem; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| letter-spacing: 0.5px; | |
| color: var(--color-accent); | |
| white-space: nowrap; | |
| } | |
| .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-emerald-accent); | |
| box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12); | |
| } | |
| /* Custom Chevron Indicator */ | |
| .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-emerald-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; | |
| } | |
| /* Pulse Animation */ | |
| @keyframes pulse { | |
| 0% { opacity: 0.5; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.5; } | |
| } | |
| /* Mobile Compatibility & Responsiveness */ | |
| @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) { | |
| .settings-grid { | |
| grid-template-columns: 1fr; | |
| gap: 16px; | |
| } | |
| .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; | |
| } | |
| } | |
| /* MIDI Timeline & Seeding Selections */ | |
| .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; /* Bottom padding accommodates bar labels */ | |
| overflow-x: auto; | |
| align-items: flex-end; | |
| margin-bottom: 8px; | |
| margin-top: 4px; | |
| } | |
| /* Custom Scrollbar for Timeline */ | |
| .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); | |
| } | |
| /* Warm-up context window styling */ | |
| .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); /* Soft sage green */ | |
| } | |
| /* Selected Bar styling */ | |
| .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); /* Solid white */ | |
| } | |
| /* Label for bar number */ | |
| .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); | |
| } | |
| /* Segmented Toggle Control Group */ | |
| .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; | |
| } | |
| /* Active Recording Styling */ | |
| .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) ; | |
| } | |
| @keyframes recordPulse { | |
| 0% { opacity: 0.4; } | |
| 50% { opacity: 1; } | |
| 100% { opacity: 0.4; } | |
| } | |
| .pulse-record { | |
| animation: recordPulse 1.5s infinite; | |
| } | |