Spaces:
Paused
Paused
| /* ============================================================ | |
| Page | |
| ============================================================ */ | |
| .gradio-container { | |
| max-width: 1120px ; | |
| width: 100%; | |
| margin: 0 auto ; | |
| padding: 40px 24px ; | |
| box-sizing: border-box; | |
| } | |
| /* ============================================================ | |
| Header | |
| ============================================================ */ | |
| #header { align-items: flex-start; } | |
| #title h1 { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 6px; } | |
| #title p { font-size: 16px; color: var(--body-text-color-subdued); margin: 0; } | |
| #theme-btn { flex: 0 0 auto ; min-width: 0 ; } | |
| /* ============================================================ | |
| Search | |
| ============================================================ */ | |
| /* --- Card (shared by search and ask panel) --- */ | |
| .card { | |
| background: var(--block-background-fill); | |
| border: 1px solid var(--border-color-primary); | |
| border-radius: 12px; | |
| padding: 20px ; | |
| gap: 14px ; | |
| } | |
| /* --- Search row --- */ | |
| #search-row { align-items: flex-end; gap: 12px; } | |
| #search-btn { height: 46px; min-height: 46px; max-height: 46px; align-self: flex-end; } | |
| /* --- Example chips --- */ | |
| #chips { align-items: center; flex-wrap: wrap; gap: 8px; } | |
| #try-label { flex: 0 0 auto ; min-width: 0 ; } | |
| #try-label p { margin: 0; font-size: 13px; color: var(--body-text-color-subdued); } | |
| #chips .chip { flex: 0 0 auto ; min-width: 0 ; font-size: 13px; font-weight: 400; } | |
| /* ============================================================ | |
| Results | |
| ============================================================ */ | |
| /* --- Results header --- */ | |
| #results-head { align-items: baseline; margin-top: 12px; } | |
| #results-head h2 { font-size: 18px; font-weight: 600; margin: 0; } | |
| #status { text-align: right; } | |
| #status p { font-size: 13px; color: var(--body-text-color-subdued); margin: 0; } | |
| /* --- Empty state --- */ | |
| #empty-state { | |
| width: 100%; | |
| box-sizing: border-box; | |
| min-height: 540px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| border: 1px dashed var(--border-color-primary); | |
| border-radius: 12px; | |
| text-align: center; | |
| } | |
| #empty-state p { margin: 0; font-size: 15px; color: var(--body-text-color-subdued); } | |
| /* --- Gallery --- */ | |
| #gallery { | |
| min-height: 540px; | |
| background: transparent; | |
| } | |
| #gallery .grid-container { gap: 16px ; } | |
| #gallery .grid-wrap { | |
| height: auto ; | |
| max-height: none ; | |
| overflow: visible ; | |
| } | |
| /* --- Tiles --- */ | |
| #gallery .thumbnail-item { | |
| border-radius: 10px; | |
| border: none; | |
| box-shadow: none; | |
| overflow: hidden; | |
| } | |
| #gallery .thumbnail-item.selected { | |
| box-shadow: 0 0 0 3px var(--button-primary-background-fill) ; | |
| } | |
| #gallery .caption-label { | |
| background: var(--block-background-fill); | |
| color: var(--body-text-color); | |
| font-size: 12px; | |
| font-weight: 600; | |
| border-radius: 6px; | |
| padding: 2px 8px; | |
| } | |
| /* ============================================================ | |
| Ask about this image | |
| ============================================================ */ | |
| #ask-panel { margin-top: 16px; scroll-margin-top: 24px; } | |
| #ask-row { align-items: flex-start; gap: 20px; } | |
| #ask-image img { border-radius: 8px; object-fit: cover; } | |
| #ask-info p { margin: 0; font-size: 13px; color: var(--body-text-color-subdued); } | |
| #ask-input-row { gap: 10px; align-items: stretch; } | |
| #ask-answer { | |
| background: var(--body-background-fill); | |
| border-radius: 8px; | |
| padding: 12px 14px; | |
| } | |
| #ask-answer p { margin: 0; color: var(--body-text-color-subdued); } |