| .imagine-top-grid { |
| display: grid; |
| grid-template-columns: 2fr 1fr; |
| gap: 24px; |
| margin-bottom: 24px; |
| align-items: stretch; |
| } |
|
|
| @media (max-width: 1024px) { |
| .imagine-top-grid { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| .imagine-card { |
| background: #fff; |
| border: none !important; |
| border-radius: 14px; |
| padding: 20px; |
| box-shadow: none !important; |
| display: flex; |
| flex-direction: column; |
| overflow: visible; |
| } |
|
|
| .imagine-card.settings-card { |
| padding: 16px; |
| } |
|
|
| .imagine-card-collapsible { |
| transition: all 0.3s ease; |
| } |
|
|
| .card-title-row { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| cursor: pointer; |
| user-select: none; |
| margin-bottom: 12px; |
| } |
|
|
| .status-header-row { |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| cursor: pointer; |
| user-select: none; |
| margin-bottom: 12px; |
| } |
|
|
| .status-header-row .card-title { |
| margin-bottom: 0; |
| } |
|
|
| .status-header-row .status-text { |
| flex: 1; |
| text-align: right; |
| } |
|
|
| .status-header-row .collapse-icon { |
| flex-shrink: 0; |
| } |
|
|
| .collapse-icon { |
| transition: transform 0.3s ease; |
| flex-shrink: 0; |
| color: var(--accents-4); |
| } |
|
|
| .imagine-card-collapsible.collapsed .collapse-icon { |
| transform: rotate(-90deg); |
| } |
|
|
| .card-title-row:hover .collapse-icon { |
| color: var(--accents-7); |
| } |
|
|
| .card-content { |
| overflow: hidden; |
| transition: max-height 0.3s ease, opacity 0.2s ease; |
| max-height: 2000px; |
| opacity: 1; |
| } |
|
|
| .imagine-card-collapsible.collapsed .card-content { |
| max-height: 0; |
| opacity: 0; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .imagine-card-collapsible.collapsed .card-title-row { |
| margin-bottom: 0; |
| } |
|
|
| .imagine-card-collapsible.collapsed .card-title { |
| margin-bottom: 0; |
| } |
|
|
| .imagine-card-collapsible.collapsed .status-header-row { |
| margin-bottom: 0; |
| } |
|
|
| .imagine-card-collapsible.collapsed { |
| padding: 12px 20px; |
| } |
|
|
| .floating-actions { |
| position: fixed; |
| bottom: 32px; |
| left: 50%; |
| transform: translateX(-50%); |
| z-index: 20; |
| background: #fff; |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| padding: 8px 12px; |
| display: flex; |
| align-items: center; |
| gap: 12px; |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); |
| cursor: move; |
| user-select: none; |
| white-space: nowrap; |
| } |
|
|
| .floating-actions:active { |
| cursor: grabbing; |
| } |
|
|
| .shadow-xl { |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important; |
| } |
|
|
| .toolbar-sep { |
| display: inline-block; |
| width: 1px; |
| height: 14px; |
| background: var(--border); |
| margin: 0 6px; |
| } |
|
|
| .imagine-textarea { |
| height: auto; |
| min-height: 0; |
| resize: vertical; |
| line-height: 1.5; |
| flex: 1; |
| } |
|
|
| .settings-grid { |
| --row-gap: 10px; |
| --row-h: 52px; |
| display: grid; |
| grid-template-columns: 2.2fr 1fr; |
| grid-template-rows: calc(var(--row-h) * 2 + var(--row-gap)) var(--row-h) var(--row-h); |
| column-gap: 16px; |
| row-gap: var(--row-gap); |
| align-items: stretch; |
| } |
|
|
| .settings-block { |
| display: flex; |
| flex-direction: column; |
| gap: 6px; |
| height: 100%; |
| } |
|
|
| .settings-block-prompt { |
| grid-column: 1; |
| grid-row: 1; |
| } |
|
|
| .settings-block-duo { |
| grid-column: 2; |
| grid-row: 1; |
| height: 100%; |
| display: grid; |
| grid-template-rows: 1fr 1fr; |
| gap: 10px; |
| } |
|
|
| .settings-block-row2 { |
| grid-column: 1; |
| grid-row: 2; |
| } |
|
|
| .settings-block-row2b { |
| grid-column: 2; |
| grid-row: 2; |
| } |
|
|
| .settings-block-row3 { |
| grid-column: 1; |
| grid-row: 3; |
| } |
|
|
| .settings-block-row3b { |
| grid-column: 2; |
| grid-row: 3; |
| } |
|
|
| .settings-block-single { |
| height: 100%; |
| align-self: stretch; |
| justify-content: stretch; |
| } |
|
|
| .settings-prompt { |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| } |
|
|
| .settings-row { |
| display: grid; |
| grid-template-columns: 1fr 1fr; |
| gap: 8px; |
| align-items: stretch; |
| height: 100%; |
| } |
|
|
| .settings-field { |
| display: flex; |
| flex-direction: column; |
| height: 100%; |
| justify-content: space-between; |
| } |
|
|
| .settings-field .field-label { |
| margin-bottom: 0; |
| } |
|
|
| .toggle-row { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| height: 100%; |
| padding: 0 10px; |
| border-radius: 10px; |
| background: #f7f7f8; |
| border: 1px solid var(--accents-1); |
| } |
|
|
| .toggle-text { |
| display: flex; |
| flex-direction: column; |
| gap: 2px; |
| min-width: 0; |
| } |
|
|
| .toggle-title { |
| font-size: 11px; |
| font-weight: 600; |
| color: var(--accents-6); |
| line-height: 1.2; |
| } |
|
|
| .toggle-desc { |
| font-size: 10px; |
| color: var(--accents-4); |
| line-height: 1.2; |
| } |
|
|
| .toggle-row-fill { |
| height: 100%; |
| } |
|
|
| .settings-folder { |
| display: flex; |
| flex-direction: column; |
| align-items: flex-start; |
| height: 100%; |
| justify-content: space-between; |
| } |
|
|
| .settings-folder .field-label { |
| margin-bottom: 0; |
| line-height: 1; |
| } |
|
|
| .folder-select-btn { |
| width: 100%; |
| justify-content: flex-start; |
| font-size: 12px; |
| height: 30px; |
| padding: 0 12px; |
| gap: 8px; |
| align-items: center; |
| white-space: normal; |
| } |
|
|
| .folder-select-btn #folderPath { |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| } |
|
|
| @media (max-width: 768px) { |
| .settings-grid { |
| grid-template-columns: 1fr; |
| grid-template-rows: auto; |
| } |
|
|
| .settings-row { |
| grid-template-columns: 1fr; |
| } |
|
|
| .settings-block-prompt, |
| .settings-block-duo, |
| .settings-block-row2, |
| .settings-block-row2b, |
| .settings-block-row3, |
| .settings-block-row3b { |
| grid-column: 1; |
| grid-row: auto; |
| } |
|
|
| .settings-block-duo { |
| height: auto; |
| display: flex; |
| flex-direction: column; |
| } |
| } |
|
|
|
|
| .waterfall-header { |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| margin-bottom: 16px; |
| min-height: 28px; |
| } |
|
|
| .card-title { |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--accents-7); |
| margin: 0; |
| } |
|
|
| .waterfall-actions { |
| display: flex; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .batch-download-btn { |
| height: 28px; |
| padding: 0 10px; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| transition: all 0.2s; |
| color: var(--fg); |
| flex-shrink: 0; |
| } |
|
|
| .batch-download-btn svg { |
| width: 14px; |
| height: 14px; |
| } |
|
|
| .selection-toolbar { |
| display: none; |
| align-items: center; |
| gap: 8px; |
| } |
|
|
| .selection-toolbar.hidden { |
| display: none; |
| } |
|
|
| .selection-toolbar:not(.hidden) { |
| display: flex; |
| } |
|
|
| .selection-toolbar .geist-button-outline { |
| height: 28px; |
| padding: 0 10px; |
| font-size: 12px; |
| } |
|
|
| .selected-count { |
| display: inline-flex; |
| align-items: center; |
| justify-content: center; |
| min-width: 18px; |
| height: 18px; |
| padding: 0 6px; |
| border-radius: 999px; |
| background: var(--accents-2); |
| color: var(--accents-6); |
| font-size: 10px; |
| font-weight: 600; |
| line-height: 1; |
| } |
|
|
| .field-label { |
| display: block; |
| font-size: 11px; |
| color: var(--accents-4); |
| margin-bottom: 6px; |
| } |
|
|
| .status-text { |
| font-size: 11px; |
| color: var(--accents-4); |
| } |
|
|
| .status-text.connected { |
| color: #059669; |
| } |
|
|
| .status-text.connecting { |
| color: #d97706; |
| } |
|
|
| .status-text.error { |
| color: #dc2626; |
| } |
|
|
|
|
| .meta-grid { |
| display: grid; |
| grid-template-columns: 1fr; |
| gap: 12px; |
| } |
|
|
| .mode-item { |
| align-items: center; |
| } |
|
|
| .mode-switch { |
| display: flex; |
| align-items: center; |
| gap: 6px; |
| padding: 0; |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| background: #fff; |
| flex-wrap: wrap; |
| } |
|
|
| .mode-btn { |
| border: 1px solid transparent; |
| background: transparent; |
| color: var(--accents-6); |
| font-size: 11px; |
| padding: 1px 8px; |
| border-radius: 999px; |
| cursor: pointer; |
| transition: all 0.2s; |
| white-space: nowrap; |
| } |
|
|
| .mode-btn:hover { |
| background: var(--hover-bg); |
| border-color: var(--border); |
| } |
|
|
| .mode-btn.active { |
| background: #000; |
| color: #fff; |
| border-color: #000; |
| } |
|
|
| .meta-item { |
| padding: 12px; |
| border-radius: 10px; |
| background: #f7f7f8; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| min-height: 42px; |
| } |
|
|
| .meta-label { |
| font-size: 10px; |
| color: var(--accents-4); |
| } |
|
|
| .meta-value { |
| font-size: 12px; |
| font-weight: 600; |
| color: var(--accents-7); |
| text-align: right; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| max-width: 150px; |
| } |
|
|
| .toggle { |
| display: inline-flex; |
| align-items: center; |
| gap: 10px; |
| cursor: pointer; |
| user-select: none; |
| } |
|
|
| .toggle input { |
| display: none; |
| } |
|
|
| .toggle-track { |
| width: 38px; |
| height: 20px; |
| background: #e5e7eb; |
| border-radius: 999px; |
| position: relative; |
| transition: background 0.2s ease; |
| } |
|
|
| .toggle-track::after { |
| content: ""; |
| width: 14px; |
| height: 14px; |
| background: #fff; |
| border-radius: 999px; |
| position: absolute; |
| top: 3px; |
| left: 3px; |
| box-shadow: none; |
| transition: transform 0.2s ease; |
| } |
|
|
| .toggle input:checked + .toggle-track { |
| background: #111; |
| } |
|
|
| .toggle input:checked + .toggle-track::after { |
| transform: translateX(18px); |
| } |
|
|
| .toggle-label { |
| font-size: 12px; |
| color: var(--accents-4); |
| } |
|
|
| .imagine-empty { |
| text-align: center; |
| padding: 32px 24px; |
| font-size: 12px; |
| color: var(--accents-4); |
| display: flex; |
| flex-direction: column; |
| align-items: center; |
| justify-content: center; |
| gap: 6px; |
| min-height: 220px; |
| border: 1px dashed var(--border); |
| border-radius: 14px; |
| background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%); |
| } |
|
|
| .empty-title { |
| font-size: 13px; |
| font-weight: 600; |
| color: var(--accents-6); |
| } |
|
|
| .empty-subtitle { |
| font-size: 11px; |
| color: var(--accents-4); |
| } |
|
|
| .empty-hint { |
| margin-top: 4px; |
| font-size: 10px; |
| color: var(--accents-3); |
| padding: 2px 8px; |
| border-radius: 999px; |
| border: 1px solid var(--accents-1); |
| background: #fff; |
| } |
|
|
| .waterfall { |
| display: grid; |
| grid-template-columns: repeat(4, 1fr); |
| gap: 16px; |
| width: 100%; |
| } |
|
|
| @media (max-width: 1200px) { |
| .waterfall { |
| grid-template-columns: repeat(3, 1fr); |
| } |
| } |
|
|
| @media (max-width: 768px) { |
| .waterfall { |
| grid-template-columns: repeat(2, 1fr); |
| } |
| } |
|
|
| @media (max-width: 480px) { |
| .waterfall { |
| grid-template-columns: 1fr; |
| } |
| } |
|
|
| .waterfall-item { |
| border-radius: 14px; |
| overflow: hidden; |
| border: none !important; |
| background: #fff; |
| box-shadow: none !important; |
| animation: riseIn 0.4s ease; |
| cursor: pointer; |
| transition: transform 0.2s ease; |
| display: flex; |
| flex-direction: column; |
| position: relative; |
| } |
|
|
| .waterfall-item:hover { |
| transform: scale(1.02); |
| } |
|
|
| .waterfall-item.selection-mode { |
| cursor: default; |
| } |
|
|
| .waterfall-item.selection-mode:hover { |
| transform: none; |
| } |
|
|
| .waterfall-item img { |
| width: 100%; |
| height: auto; |
| display: block; |
| border-radius: 14px 14px 0 0; |
| } |
|
|
| .waterfall-item .image-checkbox { |
| position: absolute; |
| top: 8px; |
| left: 8px; |
| width: 16px; |
| height: 16px; |
| background: rgba(255, 255, 255, 0.9); |
| border: 1px solid #ddd; |
| border-radius: 2px; |
| cursor: pointer; |
| display: none; |
| align-items: center; |
| justify-content: center; |
| transition: all 0.2s; |
| backdrop-filter: blur(4px); |
| z-index: 2; |
| } |
|
|
| .waterfall-item.selection-mode .image-checkbox { |
| display: flex; |
| } |
|
|
| .waterfall-item .image-checkbox:hover { |
| border-color: #000; |
| background: rgba(255, 255, 255, 1); |
| } |
|
|
| .waterfall-item.selected .image-checkbox { |
| background: #000; |
| border-color: #000; |
| } |
|
|
| .waterfall-item.selected .image-checkbox::after { |
| content: ''; |
| width: 5px; |
| height: 8px; |
| border: solid #fff; |
| border-width: 0 1px 1px 0; |
| transform: rotate(45deg); |
| margin-top: -2px; |
| } |
|
|
| .waterfall-meta { |
| display: flex; |
| justify-content: space-between; |
| align-items: center; |
| gap: 8px; |
| padding: 10px 12px; |
| font-size: 11px; |
| color: var(--accents-4); |
| background: #fff; |
| border-radius: 0 0 14px 14px; |
| } |
|
|
| .waterfall-meta .meta-right { |
| display: inline-flex; |
| align-items: center; |
| gap: 6px; |
| } |
|
|
| .image-status { |
| font-size: 10px; |
| font-weight: 600; |
| padding: 2px 6px; |
| border-radius: 999px; |
| background: #f3f4f6; |
| color: var(--accents-5); |
| line-height: 1; |
| } |
|
|
| .image-status.running { |
| background: #fef3c7; |
| color: #b45309; |
| } |
|
|
| .image-status.done { |
| background: #d1fae5; |
| color: #047857; |
| } |
|
|
| .image-status.error { |
| background: #fee2e2; |
| color: #b91c1c; |
| } |
|
|
| .waterfall-meta span { |
| font-family: 'Geist Mono', ui-monospace, monospace; |
| color: var(--accents-5); |
| } |
|
|
|
|
| @keyframes riseIn { |
| from { |
| opacity: 0; |
| transform: translateY(8px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
|
|
| |
| .image-lightbox { |
| display: none; |
| position: fixed; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: rgba(0, 0, 0, 0.9); |
| z-index: 9999; |
| justify-content: center; |
| align-items: center; |
| cursor: zoom-out; |
| animation: fadeIn 0.2s ease; |
| } |
|
|
| .image-lightbox.active { |
| display: flex; |
| } |
|
|
| .image-lightbox img { |
| max-width: 90%; |
| max-height: 90%; |
| object-fit: contain; |
| border-radius: 8px; |
| box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); |
| } |
|
|
| .lightbox-close { |
| position: absolute; |
| top: 20px; |
| right: 20px; |
| background: rgba(255, 255, 255, 0.1); |
| border: none; |
| color: #fff; |
| width: 40px; |
| height: 40px; |
| border-radius: 50%; |
| cursor: pointer; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| transition: background 0.2s; |
| } |
|
|
| .lightbox-close:hover { |
| background: rgba(255, 255, 255, 0.2); |
| } |
|
|
| .lightbox-nav { |
| position: absolute; |
| top: 50%; |
| transform: translateY(-50%); |
| background: rgba(255, 255, 255, 0.1); |
| border: 1px solid rgba(255, 255, 255, 0.2); |
| color: #fff; |
| width: 50px; |
| height: 50px; |
| border-radius: 50%; |
| display: flex; |
| align-items: center; |
| justify-content: center; |
| cursor: pointer; |
| z-index: 10000; |
| transition: all 0.2s; |
| backdrop-filter: blur(10px); |
| } |
|
|
| .lightbox-nav:hover { |
| background: rgba(255, 255, 255, 0.2); |
| border-color: rgba(255, 255, 255, 0.4); |
| } |
|
|
| .lightbox-nav:active { |
| transform: translateY(-50%) scale(0.95); |
| } |
|
|
| .lightbox-prev { |
| left: 30px; |
| } |
|
|
| .lightbox-next { |
| right: 30px; |
| } |
|
|
| .lightbox-nav:disabled { |
| opacity: 0.3; |
| cursor: not-allowed; |
| } |
|
|
| .lightbox-nav:disabled:hover { |
| background: rgba(255, 255, 255, 0.1); |
| border-color: rgba(255, 255, 255, 0.2); |
| transform: translateY(-50%); |
| } |
|
|
| @media (max-width: 768px) { |
| .lightbox-nav { |
| width: 40px; |
| height: 40px; |
| } |
| |
| .lightbox-prev { |
| left: 15px; |
| } |
| |
| .lightbox-next { |
| right: 15px; |
| } |
| } |
|
|
