Spaces:
Paused
Paused
| :root { color-scheme: light; --paper: #ffffff; --ink: #202124; --muted: #60646c; --line: #c9cdd3; --focus: #2563eb; } | |
| body { background: var(--paper) ; } | |
| main, .gradio-container, .gradio-container > .main, .gradio-container .fillable { | |
| width: 100% ; max-width: 1240px ; margin-inline: auto ; box-sizing: border-box; | |
| } | |
| .gradio-container { padding: 0 clamp(16px, 4vw, 36px) ; background: var(--paper) ; color: var(--ink) ; } | |
| .gradio-container, .gradio-container * { font-family: Arial, sans-serif ; } | |
| .gradio-container > .main { padding: 0 ; } | |
| .gradio-container .form { background: transparent ; border: 0 ; border-radius: 0 ; } | |
| .gradio-container .block { background: transparent; border-color: var(--line); box-shadow: none; } | |
| .gradio-container input:not([type="checkbox"]):not([type="radio"]), .gradio-container textarea { background: white ; color: var(--ink) ; } | |
| .gradio-container ::placeholder { color: #68707b ; opacity: 1 ; } | |
| .app-bar { display: flex; align-items: center; min-height: 72px; border-bottom: 1px solid #e5e7eb; margin-bottom: 8px; } | |
| .app-bar h1 { margin: 0 ; font-size: 20px ; font-weight: 600; letter-spacing: -.4px; line-height: 1.4; } | |
| #studio { gap: 32px; } | |
| #controls { gap: 16px; padding-bottom: 8px; } | |
| #controls .padded { padding: 0 ; } | |
| #controls .form { gap: 16px ; } | |
| #controls .details { border: 1px solid var(--line); padding: 0 ; } | |
| #controls .details > .label-wrap { min-height: 44px; padding: 12px ; box-sizing: border-box; border-radius: 5px; } | |
| #controls .details > [data-testid="accordion-content"] { padding: 0 12px 12px ; } | |
| #controls .details .prose p { font-size: 12px; line-height: 1.5; color: var(--muted); } | |
| #prompt textarea { font-size: 15px; line-height: 1.6; padding: 12px; border: 1px solid var(--line) ; border-radius: 6px; } | |
| #controls label { font-size: 13px; } | |
| #controls .block { border-radius: 6px; } | |
| #shape label:has(input), #resolution label:has(input), #quality label:has(input) { min-height: 44px; min-width: 0; flex: 1; justify-content: center; padding: 10px 4px; gap: 0; background: white; border: 1px solid var(--line); border-radius: 5px; box-sizing: border-box; } | |
| #shape label:has(input:checked), #resolution label:has(input:checked), #quality label:has(input:checked) { background: #eef0f3; border-color: #737983; color: var(--ink); } | |
| #shape input, #resolution input, #quality input { position: absolute; opacity: 0; width: 1px; height: 1px; } | |
| #seed-settings input[type="number"] { min-height: 44px; border: 1px solid var(--line) ; border-radius: 5px; padding: 10px ; } | |
| #transparent > label { min-height: 36px; align-items: center; padding: 6px 4px ; border-radius: 4px; } | |
| #size-hint p, #queue-note p, #example-note p { color: var(--muted); font-size: 12px; line-height: 1.5; } | |
| #size-hint { margin-top: -9px; } | |
| #queue-note { text-align: center; margin-top: -8px; } | |
| #generate { min-height: 48px; background: var(--ink) ; border: 1px solid var(--ink) ; color: white ; border-radius: 6px; font-size: 14px; font-weight: 600; box-shadow: none ; } | |
| #generate:hover:not(:disabled) { background: #3c4047 ; border-color: #3c4047 ; } | |
| #generate:active:not(:disabled) { background: #111318 ; } | |
| #generate:disabled { background: #e5e7eb ; border-color: #b6bcc5 ; color: #565c66 ; cursor: wait; opacity: 1 ; } | |
| /* Draw focus inside each hit target: Gradio's image/form wrappers clip outer | |
| outlines. Hidden native radios receive the full visible label's ring. */ | |
| .gradio-container :is(button, a, input, textarea, [tabindex]):focus-visible { | |
| outline: 3px solid var(--focus) ; outline-offset: -3px ; | |
| } | |
| #shape label:has(input:focus-visible), #resolution label:has(input:focus-visible), #quality label:has(input:focus-visible), | |
| .gradio-container label:has(input[type="checkbox"]:focus-visible) { | |
| outline: 3px solid var(--focus) ; outline-offset: -3px ; | |
| } | |
| #generate:focus-visible { outline-color: #93c5fd ; } | |
| .gradio-container button:not(:disabled):hover, .gradio-container a:hover { cursor: pointer; } | |
| .canvas-heading { margin: 0 ; color: var(--ink); font-size: 13px ; line-height: 20px; font-weight: 600; } | |
| #canvas { border: 1px solid var(--line); border-radius: 6px; background: #f5f6f8 ; } | |
| #canvas img { object-fit: contain ; } | |
| #canvas [aria-label="Empty value"] .icon { display: none; } | |
| #canvas [aria-label="Empty value"]::after { content: "Your generated image will appear here."; text-align: center; font-size: 14px; line-height: 1.5; color: var(--muted); padding: 24px; } | |
| #canvas-column { gap: 8px; } | |
| #result-status p { color: var(--muted); font-size: 12px; line-height: 1.65; } | |
| #recipe { margin-top: 4px; border-color: var(--line); border-radius: 6px; } | |
| #recipe .empty { min-height: 50px ; height: 50px ; } | |
| #recipe:has([aria-label="Empty value"]) { display: none; } | |
| #studies { margin-top: 12px; } | |
| #studies button { min-height: 44px; padding: 10px 15px; border: 1px solid var(--line); border-radius: 5px; background: white; color: var(--ink); font-size: 13px; } | |
| #studies button:hover { background: #eef0f3; border-color: #737983; } | |
| .app-footer { padding: 16px 0 24px; border-top: 1px solid #e5e7eb; font-size: 12px; color: var(--muted); line-height: 1.8; } | |
| .app-footer a { display: inline-block; padding: 4px; margin: -4px; color: inherit ; text-underline-offset: 3px; } | |
| #app-header, #canvas-label, #footer { padding: 0 ; } | |
| #app-header .html-container, #canvas-label .html-container, #footer .html-container { padding: 0 ; } | |
| @media (max-width: 760px) { | |
| /* Reserve room for Hugging Face's floating repository badge on the direct URL. */ | |
| #app-header .app-bar { min-height: 98px; padding-top: 40px; margin-bottom: 4px; } | |
| #studio { gap: 20px; } | |
| #controls, #canvas-column { min-width: 0 ; flex-basis: 100% ; } | |
| #canvas:not(.fullscreen) { height: 370px ; min-height: 300px ; } | |
| #studies button { flex: 1 1 140px; } | |
| } | |
| #canvas.fullscreen { height: 100% ; min-height: 0 ; border-radius: 0; } | |
| @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto ; transition: none ; animation: none ; } } | |
| /* Keep image actions visible without hover and large enough for touch. */ | |
| #canvas .icon-button-wrapper, #reference .icon-button-wrapper { opacity: 1 ; visibility: visible ; gap: 4px; padding: 4px; } | |
| #canvas .icon-button, #reference .icon-button, #canvas a[download] { width: 44px ; height: 44px ; min-width: 44px; min-height: 44px; box-sizing: border-box; border-radius: 5px; } | |
| #canvas .icon-button, #reference .icon-button { border: 1px solid #b6bcc5 ; background: white ; color: #3c4047 ; } | |
| #canvas .icon-button > div, #reference .icon-button > div { width: 18px ; height: 18px ; } | |
| #canvas .icon-button:hover, #reference .icon-button:hover { background: #eef0f3 ; } | |
| #canvas .image-container > button { cursor: default; } | |
| #recipe a[download] { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } | |