Spaces:

SOLRICKS
/

solricks-image-generator-v2

Running

solricks-image-generator-v2 / image-generator.css
Update image-generator.css
6604329 verified 4 months ago
28 kB
:root {
    --sol-bg-1: #08131f;
    --sol-bg-2: #0a1020;
    --sol-bg-3: #15173b;
    --sol-panel: linear-gradient(90deg, rgba(28, 41, 70, 0.84) 0%, rgba(10, 18, 33, 0.95) 42%, rgba(6, 13, 25, 0.99) 100%);
    --sol-panel-right: linear-gradient(90deg, rgba(28, 41, 70, 0.74) 0%, rgba(10, 18, 33, 0.95) 42%, rgba(6, 13, 25, 0.99) 100%);
    --sol-field-bg: rgba(34, 42, 58, 0.94);
    --sol-field-border: rgba(255,255,255,0.12);
    --sol-text: #f2f4f8;
    --sol-text-soft: rgba(242,244,248,0.76);
    --sol-accent: #7268ff;
    --sol-accent-2: #596dff;
    --sol-border: rgba(125, 167, 255, 0.17);
    --sol-border-strong: rgba(125, 167, 255, 0.24);
}

* { box-sizing: border-box; }
*::-webkit-scrollbar { display: none !important; }
html, body, .gradio-container {
    min-height: 100dvh !important;
    color: var(--sol-text) !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    background:
        radial-gradient(circle at 18% 12%, rgba(32, 107, 194, 0.22), transparent 28%),
        radial-gradient(circle at 82% 16%, rgba(78, 54, 177, 0.20), transparent 34%),
        linear-gradient(135deg, var(--sol-bg-1) 0%, var(--sol-bg-2) 50%, var(--sol-bg-3) 100%) !important;
}
.gradio-container {
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    --body-background-fill: transparent !important;
    --block-background-fill: transparent !important;
    --block-border-color: transparent !important;
    --input-background-fill: transparent !important;
    --input-border-color: transparent !important;
    --button-primary-background-fill: linear-gradient(90deg, #7268ff 0%, #596dff 100%) !important;
    --button-primary-text-color: #ffffff !important;
    --button-secondary-background-fill: #262d3c !important;
    --button-secondary-text-color: #ffffff !important;
}
footer, .gradio-container footer, gradio-app footer, .gradio-container .footer, [data-testid="footer"] { display:none !important; }

#sol-shell {
    width: min(1120px, calc(100vw - 32px)) !important;
    margin: 0 auto !important;
    padding: 42px 0 18px !important;
}
#sol-main-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: stretch !important;
}
#sol-left-col, #sol-right-col { min-width: 0 !important; width: 100% !important; }
#sol-left-col > div, #sol-right-col > div { height: 100% !important; }

.sol-panel,
#sol-left-card,
#sol-right-card {
    height: 100% !important;
    border: 1px solid var(--sol-border) !important;
    border-radius: 0 !important;
    background: var(--sol-panel) !important;
    box-shadow: none !important;
    overflow: hidden !important;
}
#sol-right-card { background: var(--sol-panel-right) !important; }
#sol-left-card > .wrap, #sol-right-card > .wrap, #sol-left-card .block, #sol-right-card .block { background: transparent !important; border: 0 !important; box-shadow: none !important; }

.sol-top-strip {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 12px 28px 0;
    color: rgba(242,244,248,0.96);
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.03em;
}
.sol-mini-live, .sol-mini-link {
    display: inline-flex; align-items: center; gap: 8px;
    color: rgba(242,244,248,0.96) !important;
}
.sol-mini-link { opacity: 0.95; }
.sol-live-dot { width: 10px; height: 10px; border-radius: 999px; background: #30ff93; box-shadow: 0 0 12px rgba(48,255,147,0.45); }

.sol-header-area { padding: 20px 28px 18px; }
.sol-logo-holder { margin-bottom: 18px; }
.sol-logo { width: clamp(210px, 22vw, 300px); height: auto; display: block; object-fit: contain; }
.sol-text-logo { color: #ffffff; font-size: 38px; font-weight: 950; letter-spacing: -0.04em; }
.sol-title { margin: 0; color: rgba(238, 241, 248, 0.82); font-size: clamp(42px, 4.8vw, 56px); line-height: 0.95; font-weight: 950; letter-spacing: -0.06em; }
.sol-subtitle { margin: 12px 0 0; max-width: 540px; color: var(--sol-text-soft); font-size: 15px; line-height: 1.65; font-weight: 600; }

.sol-field-label {
    margin: 0 28px 8px;
    color: rgba(238,241,248,0.82);
    font-size: 12px;
    font-weight: 900;
    letter-spacing: 0.08em;
}
#sol-prompt-box, #sol-style-dropdown, #sol-resolution-dropdown { margin: 0 28px 16px !important; }
#sol-two-col-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 12px !important;
    margin: 0 28px 20px !important;
}
#sol-two-col-row > div { min-width: 0 !important; }
#sol-two-col-row .sol-field-label { margin: 0 0 8px !important; }
#sol-two-col-row #sol-style-dropdown, #sol-two-col-row #sol-resolution-dropdown { margin: 0 !important; }

/* Hard dark input styling */
#sol-prompt-box,
#sol-style-dropdown,
#sol-resolution-dropdown,
#sol-prompt-box *,
#sol-style-dropdown *,
#sol-resolution-dropdown * {
    box-shadow: none !important;
}

#sol-prompt-box > div,
#sol-style-dropdown > div,
#sol-resolution-dropdown > div,
#sol-prompt-box .wrap,
#sol-style-dropdown .wrap,
#sol-resolution-dropdown .wrap,
#sol-prompt-box .block,
#sol-style-dropdown .block,
#sol-resolution-dropdown .block,
#sol-prompt-box .form,
#sol-style-dropdown .form,
#sol-resolution-dropdown .form,
#sol-prompt-box .container,
#sol-style-dropdown .container,
#sol-resolution-dropdown .container {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
}

#sol-prompt-box textarea,
#sol-prompt-box input {
    width: 100% !important;
    min-height: 140px !important;
    padding: 18px !important;
    border-radius: 0 !important;
    border: 1px solid var(--sol-field-border) !important;
    background: var(--sol-field-bg) !important;
    color: var(--sol-text) !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    box-shadow: none !important;
}
#sol-prompt-box textarea::placeholder { color: rgba(242,244,248,0.50) !important; }
#sol-prompt-box textarea:focus { border-color: var(--sol-border-strong) !important; box-shadow: none !important; }

/* Dark dropdowns regardless of internal Gradio renderer */
#sol-style-dropdown .choices,
#sol-resolution-dropdown .choices,
#sol-style-dropdown .choices__inner,
#sol-resolution-dropdown .choices__inner,
#sol-style-dropdown select,
#sol-resolution-dropdown select,
#sol-style-dropdown button,
#sol-resolution-dropdown button,
#sol-style-dropdown input,
#sol-resolution-dropdown input,
#sol-style-dropdown [role="button"],
#sol-resolution-dropdown [role="button"],
#sol-style-dropdown [class*="select"],
#sol-resolution-dropdown [class*="select"],
#sol-style-dropdown [class*="dropdown"],
#sol-resolution-dropdown [class*="dropdown"] {
    width: 100% !important;
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 16px !important;
    border-radius: 0 !important;
    border: 1px solid var(--sol-field-border) !important;
    background: var(--sol-field-bg) !important;
    color: var(--sol-text) !important;
    box-shadow: none !important;
    outline: none !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}
#sol-style-dropdown .choices__list--single,
#sol-resolution-dropdown .choices__list--single { padding: 0 !important; display:flex !important; align-items:center !important; height:100% !important; background: transparent !important; }
#sol-style-dropdown .choices__item,
#sol-resolution-dropdown .choices__item { color: var(--sol-text) !important; background: transparent !important; }
#sol-style-dropdown .choices[data-type*="select-one"]::before,
#sol-resolution-dropdown .choices[data-type*="select-one"]::before,
#sol-style-dropdown .choices__inner::before,
#sol-resolution-dropdown .choices__inner::before,
#sol-style-dropdown .choices__inner::after,
#sol-resolution-dropdown .choices__inner::after,
#sol-style-dropdown .choices::before,
#sol-resolution-dropdown .choices::before {
    display:none !important; content:none !important;
}
#sol-style-dropdown .choices[data-type*="select-one"]::after,
#sol-resolution-dropdown .choices[data-type*="select-one"]::after {
    border-color: rgba(242,244,248,0.76) transparent transparent transparent !important;
    right: 14px !important;
    margin-top: -2px !important;
}
#sol-style-dropdown .choices[data-type*="select-one"].is-open::after,
#sol-resolution-dropdown .choices[data-type*="select-one"].is-open::after {
    border-color: transparent transparent rgba(242,244,248,0.76) transparent !important;
    margin-top: -8px !important;
}
#sol-style-dropdown .choices__list--dropdown,
#sol-style-dropdown .choices__list[aria-expanded],
#sol-resolution-dropdown .choices__list--dropdown,
#sol-resolution-dropdown .choices__list[aria-expanded] {
    background: #1f2737 !important;
    border: 1px solid var(--sol-field-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
#sol-style-dropdown .choices__list--dropdown .choices__item,
#sol-style-dropdown .choices__list[aria-expanded] .choices__item,
#sol-resolution-dropdown .choices__list--dropdown .choices__item,
#sol-resolution-dropdown .choices__list[aria-expanded] .choices__item {
    padding: 10px 14px !important;
    color: var(--sol-text) !important;
}
#sol-style-dropdown .choices__list--dropdown .choices__item--selectable.is-highlighted,
#sol-style-dropdown .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
#sol-resolution-dropdown .choices__list--dropdown .choices__item--selectable.is-highlighted,
#sol-resolution-dropdown .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background: rgba(108, 99, 255, 0.20) !important;
    color: #ffffff !important;
}

#sol-action-row {
    display: grid !important;
    grid-template-columns: 160px 1fr !important;
    gap: 12px !important;
    margin: 0 28px 28px !important;
}
#sol-action-row > div { min-width: 0 !important; }

#sol-clear-button button, #sol-clear-button > button, #sol-clear-button .wrap,
#sol-generate-button button, #sol-generate-button > button, #sol-generate-button .wrap {
    min-height: 54px !important;
    width: 100% !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    font-weight: 900 !important;
    box-shadow: none !important;
}
#sol-clear-button, #sol-clear-button *, #sol-clear-button::before, #sol-clear-button::after,
#sol-clear-button [class*="progress"], #sol-clear-button [data-testid*="progress"], #sol-clear-button svg {
    box-shadow: none !important;
}
#sol-clear-button button, #sol-clear-button > button {
    background: #262d3c !important;
    border: 1px solid var(--sol-field-border) !important;
    color: #ffffff !important;
}
#sol-clear-button button:hover { background: #2d3547 !important; }
#sol-clear-button [class*="progress"], #sol-clear-button [data-testid*="progress"], #sol-clear-button svg { display: none !important; }
#sol-generate-button button, #sol-generate-button > button {
    background: linear-gradient(90deg, #7268ff 0%, #596dff 100%) !important;
    border: 1px solid rgba(114,104,255,0.22) !important;
    color: #ffffff !important;
}
#sol-generate-button button:hover { background: linear-gradient(90deg, #7a71ff 0%, #6276ff 100%) !important; }

#sol-output-header {
    padding: 26px 26px 14px !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
#sol-output-title {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #ffffff !important;
    font-size: 18px !important;
    font-weight: 900 !important;
}
#sol-output-title > span:first-child {
    width: 22px; height: 22px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(123, 167, 255, 0.24);
    background: rgba(77, 107, 160, 0.34);
    color: #d8e3ff;
    font-size: 13px;
}

#sol-output-image {
    min-height: 640px !important;
    border: 0 !important;
    background:
        radial-gradient(circle at 50% 34%, rgba(58, 92, 145, 0.32), transparent 24%),
        linear-gradient(90deg, rgba(31,47,78,0.28) 0%, rgba(8,15,28,0) 18%, rgba(8,15,28,0) 82%, rgba(31,47,78,0.18) 100%),
        rgba(4, 10, 20, 0.35) !important;
}
#sol-output-image > div, .sol-preview-state, .sol-image-wrap {
    min-height: 640px !important;
    display: flex; align-items: center; justify-content: center;
    background: transparent !important;
}
.sol-preview-state { flex-direction: column; text-align: center; gap: 14px; padding: 28px; }
.sol-preview-icon-box {
    width: 78px;
    height: 78px;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        radial-gradient(circle at 50% 35%, rgba(98, 208, 255, 0.24), transparent 58%),
        linear-gradient(180deg, rgba(67,73,95,0.82), rgba(40,47,67,0.86));
    border: 1px solid rgba(98, 208, 255, 0.26);
    box-shadow:
        0 0 0 1px rgba(98, 208, 255, 0.10) inset,
        0 0 28px rgba(98, 208, 255, 0.20),
        0 18px 44px rgba(0, 0, 0, 0.32);
}
.sol-preview-icon {
    color: #eaf6ff;
    font-size: 28px;
    text-shadow:
        0 0 12px rgba(98, 208, 255, 0.55),
        0 0 28px rgba(98, 208, 255, 0.28);
}

.sol-preview-state.is-processing .sol-preview-icon-box {
    animation: solBlueGlow 1.35s ease-in-out infinite;
}

@keyframes solBlueGlow {
    0%, 100% {
        transform: scale(1);
        box-shadow:
            0 0 0 1px rgba(98, 208, 255, 0.10) inset,
            0 0 24px rgba(98, 208, 255, 0.18),
            0 18px 44px rgba(0, 0, 0, 0.32);
    }

    50% {
        transform: scale(1.04);
        box-shadow:
            0 0 0 1px rgba(98, 208, 255, 0.22) inset,
            0 0 42px rgba(98, 208, 255, 0.38),
            0 20px 52px rgba(35, 110, 255, 0.24);
    }
}

.sol-preview-title { color: #ffffff; font-size: 18px; font-weight: 900; }
.sol-preview-subtitle { color: rgba(242,244,248,0.64); font-size: 14px; font-weight: 700; }
.sol-image-wrap { position: relative; padding: 10px; }
.sol-image-wrap img {
    max-width: 96% !important;
    max-height: 520px !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
}
.sol-image-actions { position:absolute; top:18px; right:18px; z-index:10; }
.sol-image-actions a {
    display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:0 14px;
    background: rgba(43, 50, 68, 0.88); border:1px solid var(--sol-field-border);
    color:#ffffff !important; text-decoration:none !important; font-size:13px; font-weight:900;
}

#sol-shell [class*="progress"], #sol-shell [data-testid*="progress"], #sol-shell .progress-level, #sol-shell .progress-text, #sol-shell .progress-bar,
#sol-shell .examples, #sol-shell .dataset, #sol-shell .table-wrap {
    display:none !important;
}

@media (max-width: 960px) {
    #sol-shell { width: min(100vw - 20px, 760px) !important; }
    #sol-main-grid { grid-template-columns: 1fr !important; }
    .sol-title { font-size: 44px; }
    #sol-output-image, #sol-output-image > div, .sol-preview-state, .sol-image-wrap { min-height: 480px !important; }
}
@media (max-width: 640px) {
    .sol-top-strip, .sol-header-area { padding-left: 16px !important; padding-right: 16px !important; }
    .sol-top-strip { gap: 14px; }
    .sol-field-label { margin-left: 16px !important; margin-right: 16px !important; }
    #sol-prompt-box { margin-left: 16px !important; margin-right: 16px !important; }
    #sol-two-col-row { grid-template-columns: 1fr !important; margin-left: 16px !important; margin-right: 16px !important; }
    #sol-action-row { margin-left: 16px !important; margin-right: 16px !important; }
    .sol-title { font-size: 38px; }
    #sol-output-image, #sol-output-image > div, .sol-preview-state, .sol-image-wrap { min-height: 480px !important; }
}

/* ------------------------------------------------------------------
   STABLE SELECT FIX
   Dropdowns are now filterable=False in app.py.
   This avoids Gradio's searchable combobox light overlay.
------------------------------------------------------------------ */

.sol-top-strip,
.sol-top-strip *,
#sol-output-title,
#sol-output-title * {
    opacity: 1 !important;
    color: #ffffff !important;
}

.sol-mini-live,
.sol-mini-link {
    opacity: 1 !important;
    color: #ffffff !important;
}

#sol-output-title {
    gap: 14px !important;
}

/* Remove prior broad dropdown visuals */
#sol-style-dropdown,
#sol-resolution-dropdown,
#sol-style-dropdown > div,
#sol-resolution-dropdown > div,
#sol-style-dropdown .wrap,
#sol-resolution-dropdown .wrap,
#sol-style-dropdown .block,
#sol-resolution-dropdown .block,
#sol-style-dropdown .form,
#sol-resolution-dropdown .form {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Actual select/dropdown trigger */
#sol-style-dropdown select,
#sol-resolution-dropdown select,
#sol-style-dropdown button,
#sol-resolution-dropdown button,
#sol-style-dropdown input,
#sol-resolution-dropdown input,
#sol-style-dropdown [role="button"],
#sol-resolution-dropdown [role="button"],
#sol-style-dropdown .choices__inner,
#sol-resolution-dropdown .choices__inner {
    width: 100% !important;
    min-height: 54px !important;
    height: 54px !important;
    padding: 0 16px !important;
    border-radius: 0 !important;
    background: #252d3d !important;
    background-color: #252d3d !important;
    background-image: none !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    box-shadow: none !important;
    outline: none !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 850 !important;
}

/* No white pseudo layers */
#sol-style-dropdown *::before,
#sol-style-dropdown *::after,
#sol-resolution-dropdown *::before,
#sol-resolution-dropdown *::after {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

/* Keep Gradio/Choices arrow only */
#sol-style-dropdown .choices[data-type*="select-one"]::after,
#sol-resolution-dropdown .choices[data-type*="select-one"]::after {
    border-color: rgba(255,255,255,0.85) transparent transparent transparent !important;
    right: 14px !important;
}

#sol-style-dropdown .choices__list--single,
#sol-resolution-dropdown .choices__list--single,
#sol-style-dropdown .choices__item,
#sol-resolution-dropdown .choices__item {
    background: transparent !important;
    color: #ffffff !important;
}

#sol-style-dropdown .choices__list--dropdown,
#sol-style-dropdown .choices__list[aria-expanded],
#sol-resolution-dropdown .choices__list--dropdown,
#sol-resolution-dropdown .choices__list[aria-expanded] {
    background: #252d3d !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

#sol-style-dropdown .choices__list--dropdown .choices__item,
#sol-style-dropdown .choices__list[aria-expanded] .choices__item,
#sol-resolution-dropdown .choices__list--dropdown .choices__item,
#sol-resolution-dropdown .choices__list[aria-expanded] .choices__item {
    color: #ffffff !important;
    background: transparent !important;
}

#sol-style-dropdown .choices__list--dropdown .choices__item--selectable.is-highlighted,
#sol-style-dropdown .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
#sol-resolution-dropdown .choices__list--dropdown .choices__item--selectable.is-highlighted,
#sol-resolution-dropdown .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    color: #ffffff !important;
    background: rgba(114, 104, 255, 0.22) !important;
}

#sol-prompt-box textarea {
    background: #252d3d !important;
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
}

#sol-generate-button button,
#sol-generate-button > button {
    background: linear-gradient(90deg, #7469ff 0%, #5c72ff 100%) !important;
    border: 1px solid rgba(132, 126, 255, 0.38) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

#sol-clear-button button,
#sol-clear-button > button {
    background: #252d3d !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ==================================================================
   FINAL POLISH FIX
   - dark dropdown popup / option list
   - smaller, less heavy Generate Images title
   - keep prompt / selects / action row away from right border
   - no light patch behind button or option text
================================================================== */

/* reduce title size/weight */
.sol-title {
    font-size: clamp(32px, 3.9vw, 44px) !important;
    font-weight: 880 !important;
    letter-spacing: -0.05em !important;
    line-height: 1.02 !important;
}

.sol-subtitle {
    max-width: 500px !important;
}

/* keep top texts readable */
.sol-top-strip,
.sol-top-strip *,
.sol-mini-live,
.sol-mini-link,
#sol-output-title,
#sol-output-title * {
    color: #f3f6ff !important;
    opacity: 1 !important;
}

/* explicit inner widths so controls do not touch the right card border */
#sol-prompt-box,
#sol-two-col-row,
#sol-action-row {
    width: calc(100% - 56px) !important;
    max-width: calc(100% - 56px) !important;
    margin-left: 28px !important;
    margin-right: 28px !important;
}

#sol-prompt-box,
#sol-style-dropdown,
#sol-resolution-dropdown {
    overflow: visible !important;
}

#sol-prompt-box textarea,
#sol-prompt-box input {
    width: 100% !important;
    max-width: 100% !important;
    background: #252d3d !important;
    border-color: rgba(255,255,255,0.14) !important;
}

/* within the two-column row, remove any inherited extra margins */
#sol-two-col-row #sol-style-dropdown,
#sol-two-col-row #sol-resolution-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
}

/* buttons */
#sol-clear-button,
#sol-generate-button {
    width: 100% !important;
    max-width: 100% !important;
}

#sol-clear-button button,
#sol-clear-button > button {
    background: #252d3d !important;
    background-color: #252d3d !important;
    background-image: none !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#sol-generate-button button,
#sol-generate-button > button {
    background: linear-gradient(90deg, #7268ff 0%, #5d73ff 100%) !important;
    background-color: #7268ff !important;
    border: 1px solid rgba(126,121,255,0.34) !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

#sol-clear-button button span,
#sol-clear-button > button span,
#sol-generate-button button span,
#sol-generate-button > button span,
#sol-clear-button button *,
#sol-clear-button > button *,
#sol-generate-button button *,
#sol-generate-button > button * {
    background: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

/* trigger fields */
#sol-style-dropdown .choices__inner,
#sol-resolution-dropdown .choices__inner,
#sol-style-dropdown button,
#sol-resolution-dropdown button,
#sol-style-dropdown [role="button"],
#sol-resolution-dropdown [role="button"],
#sol-style-dropdown select,
#sol-resolution-dropdown select,
#sol-style-dropdown input,
#sol-resolution-dropdown input {
    background: #252d3d !important;
    background-color: #252d3d !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
    box-shadow: none !important;
}

#sol-style-dropdown .choices__list--single,
#sol-resolution-dropdown .choices__list--single,
#sol-style-dropdown .choices__item,
#sol-resolution-dropdown .choices__item,
#sol-style-dropdown .choices__item--selectable,
#sol-resolution-dropdown .choices__item--selectable {
    color: #ffffff !important;
    background: transparent !important;
    background-image: none !important;
}

/* dark popup menu and options - broad selectors because Gradio may portal the popup */
.gradio-container [role="listbox"],
.gradio-container [role="option"],
.gradio-container ul[role="listbox"],
.gradio-container li[role="option"],
.gradio-container .choices__list--dropdown,
.gradio-container .choices__list[aria-expanded],
.gradio-container .choices__list--dropdown .choices__item,
.gradio-container .choices__list[aria-expanded] .choices__item,
.gradio-container .choices__item,
.gradio-container .choices__item--choice,
.gradio-container .choices__item--selectable,
.gradio-container .choices__item--disabled,
.gradio-container .options,
.gradio-container .options li,
.gradio-container .dropdown-options,
.gradio-container .dropdown-options li,
.gradio-container [data-testid="dropdown-options"],
.gradio-container [data-testid="dropdown-options"] * {
    background: #252d3d !important;
    background-color: #252d3d !important;
    background-image: none !important;
    color: #ffffff !important;
    box-shadow: none !important;
}

.gradio-container [role="listbox"],
.gradio-container ul[role="listbox"],
.gradio-container .choices__list--dropdown,
.gradio-container .choices__list[aria-expanded],
.gradio-container .options,
.gradio-container .dropdown-options,
.gradio-container [data-testid="dropdown-options"] {
    border: 1px solid rgba(255,255,255,0.14) !important;
    border-radius: 0 !important;
}

.gradio-container [role="option"][aria-selected="true"],
.gradio-container li[role="option"][aria-selected="true"],
.gradio-container .choices__list--dropdown .choices__item.is-highlighted,
.gradio-container .choices__list[aria-expanded] .choices__item.is-highlighted,
.gradio-container .choices__list--dropdown .choices__item--selectable.is-highlighted,
.gradio-container .choices__list[aria-expanded] .choices__item--selectable.is-highlighted,
.gradio-container .options li:hover,
.gradio-container .dropdown-options li:hover {
    background: rgba(114,104,255,0.24) !important;
    color: #ffffff !important;
}

.gradio-container [role="option"] *,
.gradio-container .choices__item *,
.gradio-container .options li *,
.gradio-container .dropdown-options li * {
    background: transparent !important;
    background-image: none !important;
    color: #ffffff !important;
}

/* mobile keep same side padding */
@media (max-width: 640px) {
    #sol-prompt-box,
    #sol-two-col-row,
    #sol-action-row {
        width: calc(100% - 32px) !important;
        max-width: calc(100% - 32px) !important;
        margin-left: 16px !important;
        margin-right: 16px !important;
    }

    .sol-title {
        font-size: 34px !important;
    }
}

/* Final processing preview pulse fix */
.sol-preview-state.is-processing .sol-preview-icon-box {
    animation: solPreviewBreath 1.45s ease-in-out infinite, solBlueShadow 1.45s ease-in-out infinite !important;
    transform-origin: center;
    will-change: transform, opacity, box-shadow;
}

.sol-preview-state.is-processing .sol-preview-title,
.sol-preview-state.is-processing .sol-preview-subtitle {
    animation: solPreviewBreath 1.45s ease-in-out infinite !important;
    transform-origin: center;
    will-change: transform, opacity;
}

@keyframes solPreviewBreath {
    0%, 100% {
        opacity: 0.62;
        transform: scale(0.97);
    }

    50% {
        opacity: 1;
        transform: scale(1.04);
    }
}

@keyframes solBlueShadow {
    0%, 100% {
        box-shadow:
            0 0 0 1px rgba(98, 208, 255, 0.10) inset,
            0 0 24px rgba(98, 208, 255, 0.18),
            0 18px 44px rgba(0, 0, 0, 0.32);
    }

    50% {
        box-shadow:
            0 0 0 1px rgba(98, 208, 255, 0.22) inset,
            0 0 42px rgba(98, 208, 255, 0.38),
            0 20px 52px rgba(35, 110, 255, 0.24);
    }
}