| |
| |
| |
| |
| |
|
|
| |
| .app-root { |
| display: flex; |
| flex-direction: column; |
| height: 100vh; |
| width: 100vw; |
| overflow: hidden; |
| background: #13131c; |
| color: #e4e1ee; |
| font-family: 'Varela Round', sans-serif; |
| } |
|
|
| .app-main { |
| display: flex; |
| flex: 1; |
| min-height: 0; |
| position: relative; |
| } |
|
|
| .app-error-toast { |
| position: fixed; |
| bottom: 1.5rem; |
| left: 50%; |
| transform: translateX(-50%); |
| background: #93000a; |
| color: #ffdad6; |
| padding: 0.75rem 1.5rem; |
| border-radius: 0.5rem; |
| font-family: 'Sono', monospace; |
| font-size: 0.75rem; |
| z-index: 1000; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5); |
| animation: toast-in 0.3s ease; |
| } |
|
|
| @keyframes toast-in { |
| from { opacity: 0; transform: translateX(-50%) translateY(10px); } |
| to { opacity: 1; transform: translateX(-50%) translateY(0); } |
| } |
|
|
| |
| .header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| padding: 0 1rem; |
| height: 52px; |
| min-height: 52px; |
| background: rgba(19, 19, 28, 0.85); |
| backdrop-filter: blur(12px); |
| border-bottom: 1px solid rgba(255, 255, 255, 0.06); |
| z-index: 100; |
| position: relative; |
| } |
|
|
| .header-left { |
| display: flex; |
| align-items: center; |
| gap: 0.625rem; |
| flex: 1; |
| } |
|
|
| .header-logo { |
| display: flex; |
| align-items: center; |
| gap: 0.375rem; |
| padding: 0.3rem 0.5rem; |
| background: rgba(76, 215, 246, 0.1); |
| border: 1px solid rgba(76, 215, 246, 0.2); |
| border-radius: 0.375rem; |
| } |
|
|
| .header-logo-icon { |
| color: #4cd7f6; |
| } |
|
|
| .header-logo-text { |
| font-family: 'Sono', monospace; |
| font-size: 0.6875rem; |
| font-weight: 700; |
| letter-spacing: 0.05em; |
| color: #4cd7f6; |
| } |
|
|
| .header-title-group { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .header-title { |
| font-size: 0.875rem; |
| font-weight: 700; |
| line-height: 1.2; |
| color: #e4e1ee; |
| margin: 0; |
| } |
|
|
| .header-subtitle { |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| color: #869397; |
| letter-spacing: 0.03em; |
| } |
|
|
| |
| .header-nav { |
| display: flex; |
| align-items: center; |
| gap: 0.125rem; |
| background: rgba(13, 13, 22, 0.6); |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 0.5rem; |
| padding: 0.1875rem; |
| } |
|
|
| .header-nav-btn { |
| display: flex; |
| align-items: center; |
| gap: 0.375rem; |
| padding: 0.3rem 0.75rem; |
| background: none; |
| border: none; |
| border-radius: 0.375rem; |
| color: #869397; |
| font-family: 'Sono', monospace; |
| font-size: 0.6875rem; |
| font-weight: 700; |
| letter-spacing: 0.02em; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| } |
|
|
| .header-nav-btn:hover { |
| color: #bcc9cd; |
| background: rgba(255, 255, 255, 0.04); |
| } |
|
|
| .header-nav-btn--active { |
| background: rgba(76, 215, 246, 0.12); |
| color: #4cd7f6; |
| } |
|
|
| .header-right { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| flex: 1; |
| justify-content: flex-end; |
| } |
|
|
| .header-status { |
| display: flex; |
| align-items: center; |
| gap: 0.3rem; |
| padding: 0.2rem 0.5rem; |
| background: rgba(255, 255, 255, 0.04); |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 0.3rem; |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| color: #bcc9cd; |
| } |
|
|
| .header-status-dot { |
| width: 5px; |
| height: 5px; |
| border-radius: 50%; |
| } |
|
|
| .header-status-dot--online { |
| background: #4cd7f6; |
| box-shadow: 0 0 6px rgba(76, 215, 246, 0.6); |
| animation: pulse-dot 2s ease-in-out infinite; |
| } |
|
|
| .header-status-dot--ready { |
| background: #ffb873; |
| box-shadow: 0 0 5px rgba(255, 184, 115, 0.4); |
| } |
|
|
| .header-settings-btn { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 30px; |
| height: 30px; |
| background: rgba(255, 255, 255, 0.04); |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 0.375rem; |
| color: #bcc9cd; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| } |
|
|
| .header-settings-btn:hover { |
| background: rgba(76, 215, 246, 0.1); |
| border-color: rgba(76, 215, 246, 0.3); |
| color: #4cd7f6; |
| } |
|
|
| @keyframes pulse-dot { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
|
|
| |
| .synthesizer-deck { |
| width: 320px; |
| min-width: 320px; |
| height: 100%; |
| background: #1b1b24; |
| border-right: 1px solid rgba(255, 255, 255, 0.06); |
| display: flex; |
| flex-direction: column; |
| overflow: hidden; |
| } |
|
|
| .synthesizer-deck-header { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.625rem 0.875rem; |
| border-bottom: 1px solid rgba(255, 255, 255, 0.04); |
| } |
|
|
| .synthesizer-deck-header-icon { |
| color: #4cd7f6; |
| } |
|
|
| .synthesizer-deck-header-text { |
| font-size: 0.8125rem; |
| font-weight: 700; |
| letter-spacing: 0.02em; |
| color: #e4e1ee; |
| } |
|
|
| .synthesizer-deck-body { |
| flex: 1; |
| overflow-y: auto; |
| padding: 0.625rem 0.875rem; |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| } |
|
|
| .synthesizer-deck-body::-webkit-scrollbar { |
| display: none; |
| } |
|
|
| .synthesizer-deck-footer { |
| padding: 0.625rem 0.875rem 0.75rem; |
| border-top: 1px solid rgba(255, 255, 255, 0.04); |
| } |
|
|
| |
| .prompt-input { |
| display: flex; |
| flex-direction: column; |
| position: relative; |
| } |
|
|
| .prompt-input-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 0.25rem; |
| } |
|
|
| .prompt-input-label { |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| font-weight: 700; |
| letter-spacing: 0.05em; |
| color: #869397; |
| text-transform: uppercase; |
| } |
|
|
| .prompt-input-counter { |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| color: #869397; |
| } |
|
|
| .prompt-input-field { |
| width: 100%; |
| background: #0d0d16; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 0.5rem; |
| padding: 0.5rem 0.625rem; |
| color: #e4e1ee; |
| font-family: 'Varela Round', sans-serif; |
| font-size: 0.75rem; |
| line-height: 1.4; |
| resize: vertical; |
| outline: none; |
| transition: border-color 0.2s ease; |
| } |
|
|
| .prompt-input-field::placeholder { |
| color: #4a4a55; |
| } |
|
|
| .prompt-input-field:focus { |
| border-color: rgba(76, 215, 246, 0.4); |
| } |
|
|
| .prompt-input-focus-bar { |
| height: 2px; |
| background: transparent; |
| margin-top: -1px; |
| border-radius: 0 0 0.5rem 0.5rem; |
| transition: background 0.3s ease; |
| } |
|
|
| .prompt-input-focus-bar--active { |
| background: linear-gradient(90deg, transparent, #4cd7f6, transparent); |
| } |
|
|
| |
| .negative-prompt { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .negative-prompt-toggle { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| width: 100%; |
| padding: 0.25rem 0; |
| background: none; |
| border: none; |
| cursor: pointer; |
| color: #bcc9cd; |
| } |
|
|
| .negative-prompt-label { |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| font-weight: 700; |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| color: #869397; |
| } |
|
|
| .negative-prompt-chevron { |
| color: #869397; |
| transition: transform 0.2s ease; |
| } |
|
|
| .negative-prompt-chevron--open { |
| transform: rotate(180deg); |
| } |
|
|
| .negative-prompt-field { |
| width: 100%; |
| margin-top: 0.25rem; |
| background: #0d0d16; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 0.375rem; |
| padding: 0.4rem 0.625rem; |
| color: #e4e1ee; |
| font-family: 'Varela Round', sans-serif; |
| font-size: 0.6875rem; |
| line-height: 1.4; |
| resize: vertical; |
| outline: none; |
| } |
|
|
| .negative-prompt-field::placeholder { |
| color: #4a4a55; |
| } |
|
|
| |
| .aesthetic-profile { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .aesthetic-profile-label { |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| font-weight: 700; |
| letter-spacing: 0.05em; |
| color: #869397; |
| text-transform: uppercase; |
| margin-bottom: 0.375rem; |
| } |
|
|
| .aesthetic-profile-grid { |
| display: grid; |
| grid-template-columns: repeat(3, 1fr); |
| gap: 0.25rem; |
| } |
|
|
| .aesthetic-profile-chip { |
| padding: 0.3rem 0.2rem; |
| background: #0d0d16; |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 0.3rem; |
| color: #bcc9cd; |
| font-family: 'Varela Round', sans-serif; |
| font-size: 0.625rem; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| text-align: center; |
| } |
|
|
| .aesthetic-profile-chip:hover { |
| border-color: rgba(76, 215, 246, 0.3); |
| color: #4cd7f6; |
| } |
|
|
| .aesthetic-profile-chip--active { |
| background: rgba(76, 215, 246, 0.12); |
| border-color: rgba(76, 215, 246, 0.5); |
| color: #4cd7f6; |
| } |
|
|
| |
| .model-checkpoint { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .model-checkpoint-label { |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| font-weight: 700; |
| letter-spacing: 0.05em; |
| color: #869397; |
| text-transform: uppercase; |
| margin-bottom: 0.25rem; |
| } |
|
|
| .model-checkpoint-select { |
| width: 100%; |
| background: #0d0d16; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 0.375rem; |
| padding: 0.4rem 0.625rem; |
| color: #e4e1ee; |
| font-family: 'Sono', monospace; |
| font-size: 0.6875rem; |
| outline: none; |
| cursor: pointer; |
| appearance: none; |
| background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23869397' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); |
| background-repeat: no-repeat; |
| background-position: right 0.625rem center; |
| padding-right: 1.75rem; |
| } |
|
|
| |
| .aspect-ratio-switcher { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .aspect-ratio-switcher-label { |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| font-weight: 700; |
| letter-spacing: 0.05em; |
| color: #869397; |
| text-transform: uppercase; |
| margin-bottom: 0.375rem; |
| } |
|
|
| .aspect-ratio-switcher-row { |
| display: flex; |
| gap: 0.25rem; |
| align-items: stretch; |
| } |
|
|
| .aspect-ratio-switcher-btn { |
| flex: 1; |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: 0.25rem; |
| padding: 0.4rem 0.2rem; |
| background: #0d0d16; |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 0.3rem; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| min-height: 48px; |
| } |
|
|
| .aspect-ratio-switcher-btn:hover { |
| border-color: rgba(76, 215, 246, 0.3); |
| } |
|
|
| .aspect-ratio-switcher-btn--active { |
| background: rgba(76, 215, 246, 0.12); |
| border-color: rgba(76, 215, 246, 0.5); |
| } |
|
|
| .aspect-ratio-switcher-icon-wrap { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| height: 22px; |
| width: 22px; |
| } |
|
|
| .aspect-ratio-switcher-icon { |
| display: block; |
| border: 1.5px solid #869397; |
| border-radius: 2px; |
| transition: border-color 0.15s ease, transform 200ms ease; |
| } |
|
|
| .aspect-ratio-switcher-btn--active .aspect-ratio-switcher-icon { |
| border-color: #4cd7f6; |
| } |
|
|
| .aspect-ratio-switcher-icon[data-ratio="1:1"] { width: 14px; height: 14px; } |
| .aspect-ratio-switcher-icon[data-ratio="16:9"] { width: 18px; height: 10px; } |
| .aspect-ratio-switcher-icon[data-ratio="3:4"] { width: 12px; height: 16px; } |
|
|
| .aspect-ratio-switcher-text { |
| font-family: 'Sono', monospace; |
| font-size: 0.5rem; |
| color: #bcc9cd; |
| } |
|
|
| .aspect-ratio-switcher-btn--active .aspect-ratio-switcher-text { |
| color: #4cd7f6; |
| } |
|
|
| .aspect-ratio-switcher-rotate { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 32px; |
| min-width: 32px; |
| background: #0d0d16; |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 0.3rem; |
| color: #869397; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| } |
|
|
| .aspect-ratio-switcher-rotate:hover:not(:disabled) { |
| border-color: rgba(76, 215, 246, 0.3); |
| color: #4cd7f6; |
| } |
|
|
| .aspect-ratio-switcher-rotate:disabled { |
| opacity: 0.3; |
| cursor: not-allowed; |
| } |
|
|
| |
| .batch-count { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .batch-count-header { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| margin-bottom: 0.375rem; |
| } |
|
|
| .batch-count-label { |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| font-weight: 700; |
| letter-spacing: 0.05em; |
| color: #869397; |
| text-transform: uppercase; |
| } |
|
|
| .batch-count-value { |
| font-family: 'Sono', monospace; |
| font-size: 0.6875rem; |
| color: #4cd7f6; |
| font-weight: 700; |
| } |
|
|
| .batch-count-row { |
| display: flex; |
| gap: 0.25rem; |
| } |
|
|
| .batch-count-btn { |
| flex: 1; |
| padding: 0.3rem; |
| background: #0d0d16; |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 0.3rem; |
| color: #bcc9cd; |
| font-family: 'Sono', monospace; |
| font-size: 0.6875rem; |
| font-weight: 700; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| } |
|
|
| .batch-count-btn:hover { |
| border-color: rgba(76, 215, 246, 0.3); |
| } |
|
|
| .batch-count-btn--active { |
| background: rgba(76, 215, 246, 0.12); |
| border-color: rgba(76, 215, 246, 0.5); |
| color: #4cd7f6; |
| } |
|
|
| |
| .sampling-steps { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .sampling-steps-label { |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| font-weight: 700; |
| letter-spacing: 0.05em; |
| color: #869397; |
| text-transform: uppercase; |
| margin-bottom: 0.25rem; |
| } |
|
|
| |
| .numeric-input { |
| width: 100%; |
| background: #0d0d16; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 0.375rem; |
| padding: 0.35rem 0.5rem; |
| color: #e4e1ee; |
| font-family: 'Sono', monospace; |
| font-size: 0.6875rem; |
| outline: none; |
| transition: border-color 0.15s ease; |
| -moz-appearance: textfield; |
| } |
|
|
| .numeric-input::-webkit-outer-spin-button, |
| .numeric-input::-webkit-inner-spin-button { |
| -webkit-appearance: none; |
| margin: 0; |
| } |
|
|
| .numeric-input:focus { |
| border-color: rgba(76, 215, 246, 0.4); |
| } |
|
|
| .numeric-input:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| } |
|
|
| |
| .advanced-settings { |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| .advanced-settings-toggle { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| width: 100%; |
| padding: 0.25rem 0; |
| background: none; |
| border: none; |
| cursor: pointer; |
| color: #bcc9cd; |
| } |
|
|
| .advanced-settings-label { |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| font-weight: 700; |
| letter-spacing: 0.05em; |
| text-transform: uppercase; |
| color: #869397; |
| } |
|
|
| .advanced-settings-chevron { |
| color: #869397; |
| transition: transform 0.2s ease; |
| } |
|
|
| .advanced-settings-chevron--open { |
| transform: rotate(180deg); |
| } |
|
|
| .advanced-settings-body { |
| display: flex; |
| flex-direction: column; |
| gap: 0.5rem; |
| padding-top: 0.25rem; |
| } |
|
|
| .advanced-settings-grid { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 0.5rem; |
| } |
|
|
| .advanced-settings-field { |
| display: flex; |
| flex-direction: column; |
| gap: 0.25rem; |
| } |
|
|
| .advanced-settings-field--full { |
| grid-column: 1 / -1; |
| } |
|
|
| .advanced-settings-field-label { |
| font-family: 'Sono', monospace; |
| font-size: 0.5rem; |
| color: #869397; |
| text-transform: uppercase; |
| letter-spacing: 0.03em; |
| } |
|
|
| .advanced-settings-select { |
| width: 100%; |
| background: #0d0d16; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 0.375rem; |
| padding: 0.35rem 0.5rem; |
| color: #e4e1ee; |
| font-family: 'Sono', monospace; |
| font-size: 0.6875rem; |
| outline: none; |
| cursor: pointer; |
| appearance: none; |
| } |
|
|
| .advanced-settings-format-row { |
| display: flex; |
| gap: 0.25rem; |
| } |
|
|
| .advanced-settings-format-btn { |
| flex: 1; |
| padding: 0.3rem; |
| background: #0d0d16; |
| border: 1px solid rgba(255, 255, 255, 0.06); |
| border-radius: 0.3rem; |
| color: #bcc9cd; |
| font-family: 'Sono', monospace; |
| font-size: 0.5625rem; |
| font-weight: 700; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| } |
|
|
| .advanced-settings-format-btn:hover { |
| border-color: rgba(76, 215, 246, 0.3); |
| } |
|
|
| .advanced-settings-format-btn--active { |
| background: rgba(76, 215, 246, 0.12); |
| border-color: rgba(76, 215, 246, 0.5); |
| color: #4cd7f6; |
| } |
|
|
| |
| .seed-input-row { |
| display: flex; |
| gap: 0.25rem; |
| } |
|
|
| .seed-input { |
| flex: 1; |
| } |
|
|
| .seed-lock-btn { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 30px; |
| min-width: 30px; |
| background: #0d0d16; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 0.375rem; |
| color: #869397; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| } |
|
|
| .seed-lock-btn:hover { |
| border-color: rgba(76, 215, 246, 0.3); |
| color: #4cd7f6; |
| } |
|
|
| .seed-lock-btn:active { |
| transform: scale(0.95); |
| } |
|
|
| |
| .generate-button { |
| width: 100%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| gap: 0.5rem; |
| padding: 0.625rem 1rem; |
| background: linear-gradient(135deg, #06b6d4 0%, #4cd7f6 100%); |
| border: none; |
| border-radius: 0.5rem; |
| color: #003640; |
| font-family: 'Varela Round', sans-serif; |
| font-size: 0.8125rem; |
| font-weight: 700; |
| letter-spacing: 0.02em; |
| cursor: pointer; |
| transition: all 0.2s ease; |
| box-shadow: 0 4px 16px rgba(76, 215, 246, 0.25); |
| } |
|
|
| .generate-button:hover:not(:disabled) { |
| box-shadow: 0 6px 24px rgba(76, 215, 246, 0.4); |
| transform: translateY(-1px); |
| } |
|
|
| .generate-button:active:not(:disabled) { |
| transform: translateY(0); |
| } |
|
|
| .generate-button:disabled { |
| opacity: 0.4; |
| cursor: not-allowed; |
| box-shadow: none; |
| } |
|
|
| .generate-button-spinner { |
| width: 16px; |
| height: 16px; |
| border: 2px solid rgba(0, 54, 64, 0.3); |
| border-top-color: #003640; |
| border-radius: 50%; |
| animation: spin 0.6s linear infinite; |
| } |
|
|
| @keyframes spin { |
| to { transform: rotate(360deg); } |
| } |
|
|
| |
| .infinite-canvas { |
| flex: 1; |
| position: relative; |
| overflow: hidden; |
| background: #0d0d16; |
| } |
|
|
| .canvas-viewport { |
| width: 100%; |
| height: 100%; |
| position: relative; |
| overflow: hidden; |
| cursor: grab; |
| background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px); |
| background-size: 20px 20px; |
| background-position: 0 0; |
| } |
|
|
| .canvas-viewport:active { |
| cursor: grabbing; |
| } |
|
|
| .canvas-surface { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| transform-origin: 0 0; |
| transition: transform 0.05s linear; |
| } |
|
|
| |
| .canvas-empty-state { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 0.5rem; |
| pointer-events: none; |
| } |
|
|
| .canvas-empty-state-icon { |
| width: 64px; |
| height: 64px; |
| border: 2px dashed rgba(76, 215, 246, 0.2); |
| border-radius: 1rem; |
| } |
|
|
| .canvas-empty-state-text { |
| font-size: 1.125rem; |
| font-weight: 700; |
| color: #4a4a55; |
| } |
|
|
| .canvas-empty-state-hint { |
| font-family: 'Sono', monospace; |
| font-size: 0.6875rem; |
| color: #4a4a55; |
| text-align: center; |
| max-width: 280px; |
| line-height: 1.4; |
| } |
|
|
| |
| .canvas-node { |
| position: absolute; |
| display: flex; |
| flex-direction: column; |
| cursor: move; |
| user-select: none; |
| transition: box-shadow 0.2s ease; |
| } |
|
|
| .canvas-node--selected { |
| z-index: 10; |
| } |
|
|
| .canvas-node-frame { |
| background: #1b1b24; |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 0.5rem; |
| overflow: hidden; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); |
| transition: border-color 0.2s ease; |
| } |
|
|
| .canvas-node--selected .canvas-node-frame { |
| border-color: rgba(76, 215, 246, 0.5); |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(76, 215, 246, 0.3); |
| } |
|
|
| .canvas-node-image-area { |
| position: relative; |
| width: 100%; |
| background: #0d0d16; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| overflow: hidden; |
| min-height: 100px; |
| } |
|
|
| .canvas-node-image { |
| width: 100%; |
| height: auto; |
| display: block; |
| } |
|
|
| .canvas-node-loading { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 2rem 1rem; |
| color: #869397; |
| } |
|
|
| .canvas-node-spinner { |
| animation: spin 1s linear infinite; |
| color: #4cd7f6; |
| } |
|
|
| .canvas-node-loading-text { |
| font-family: 'Sono', monospace; |
| font-size: 0.625rem; |
| color: #869397; |
| } |
|
|
| .canvas-node-error { |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 2rem 1rem; |
| color: #ffb4ab; |
| } |
|
|
| .canvas-node-error-text { |
| font-family: 'Sono', monospace; |
| font-size: 0.625rem; |
| } |
|
|
| .canvas-node-idle { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| padding: 2rem 1rem; |
| color: #4a4a55; |
| } |
|
|
| .canvas-node-info { |
| padding: 0.4rem 0.5rem; |
| display: flex; |
| flex-direction: column; |
| gap: 0.1rem; |
| } |
|
|
| .canvas-node-prompt { |
| font-size: 0.625rem; |
| font-weight: 700; |
| color: #e4e1ee; |
| white-space: nowrap; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| } |
|
|
| .canvas-node-meta { |
| display: flex; |
| gap: 0.25rem; |
| font-family: 'Sono', monospace; |
| font-size: 0.5rem; |
| color: #869397; |
| } |
|
|
| .canvas-node-remove { |
| position: absolute; |
| top: -8px; |
| right: -8px; |
| width: 20px; |
| height: 20px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| background: #93000a; |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| border-radius: 50%; |
| color: #ffdad6; |
| cursor: pointer; |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); |
| } |
|
|
| |
| .canvas-toolbar { |
| position: absolute; |
| bottom: 1rem; |
| left: 50%; |
| transform: translateX(-50%); |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| padding: 0.3rem 0.5rem; |
| background: rgba(27, 27, 36, 0.9); |
| backdrop-filter: blur(12px); |
| border: 1px solid rgba(255, 255, 255, 0.08); |
| border-radius: 0.5rem; |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); |
| z-index: 50; |
| } |
|
|
| .canvas-toolbar-group { |
| display: flex; |
| align-items: center; |
| gap: 0.25rem; |
| } |
|
|
| .canvas-toolbar-btn { |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| width: 28px; |
| height: 28px; |
| background: none; |
| border: none; |
| border-radius: 0.375rem; |
| color: #bcc9cd; |
| cursor: pointer; |
| transition: all 0.15s ease; |
| } |
|
|
| .canvas-toolbar-btn:hover { |
| background: rgba(76, 215, 246, 0.1); |
| color: #4cd7f6; |
| } |
|
|
| .canvas-toolbar-btn--danger:hover { |
| background: rgba(255, 100, 100, 0.1); |
| color: #ffb4ab; |
| } |
|
|
| .canvas-toolbar-zoom { |
| font-family: 'Sono', monospace; |
| font-size: 0.625rem; |
| color: #bcc9cd; |
| min-width: 2.5rem; |
| text-align: center; |
| } |
|
|
| .canvas-toolbar-divider { |
| width: 1px; |
| height: 16px; |
| background: rgba(255, 255, 255, 0.1); |
| } |
|
|
| .canvas-toolbar-count { |
| font-family: 'Sono', monospace; |
| font-size: 0.625rem; |
| color: #869397; |
| } |
|
|
| |
| .ambient-glow { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| pointer-events: none; |
| overflow: hidden; |
| z-index: 0; |
| } |
|
|
| .ambient-glow-orb { |
| position: absolute; |
| border-radius: 50%; |
| filter: blur(80px); |
| opacity: 0.08; |
| animation: orb-float 20s ease-in-out infinite; |
| } |
|
|
| .ambient-glow-orb--1 { |
| width: 400px; |
| height: 400px; |
| background: #4cd7f6; |
| top: 10%; |
| left: 15%; |
| animation-delay: 0s; |
| } |
|
|
| .ambient-glow-orb--2 { |
| width: 350px; |
| height: 350px; |
| background: #ffb873; |
| bottom: 15%; |
| right: 20%; |
| animation-delay: -7s; |
| } |
|
|
| .ambient-glow-orb--3 { |
| width: 300px; |
| height: 300px; |
| background: #ffb0cd; |
| top: 40%; |
| right: 40%; |
| animation-delay: -14s; |
| } |
|
|
| @keyframes orb-float { |
| 0%, 100% { transform: translate(0, 0) scale(1); } |
| 33% { transform: translate(30px, -20px) scale(1.1); } |
| 66% { transform: translate(-20px, 30px) scale(0.95); } |
| } |
|
|
| |
| @media (max-width: 768px) { |
| .app-main { |
| flex-direction: column; |
| } |
| .synthesizer-deck { |
| width: 100%; |
| min-width: 100%; |
| max-height: 50vh; |
| } |
| .infinite-canvas { |
| flex: 1; |
| min-height: 50vh; |
| } |
| .header-nav { |
| display: none; |
| } |
| } |
|
|
