_res/_custom.css

:root {
    --name: soft;
    --primary-50: #fdf2f8;
    --primary-100: #fce7f3;
    --primary-200: #fbcfe8;
    --primary-300: #f9a8d4;
    --primary-400: #f472b6;
    --primary-500: #ec4899;
    --primary-600: #db2777;
    --primary-700: #be185d;
    --primary-800: #9d174d;
    --primary-900: #831843;
    --primary-950: #6e1a3d;
    --secondary-50: #eef2ff;
    --secondary-100: #e0e7ff;
    --secondary-200: #c7d2fe;
    --secondary-300: #a5b4fc;
    --secondary-400: #818cf8;
    --secondary-500: #6366f1;
    --secondary-600: #4f46e5;
    --secondary-700: #4338ca;
    --secondary-800: #3730a3;
    --secondary-900: #312e81;
    --secondary-950: #2b2c5e;
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #0b0f19;
    --spacing-xxs: 1px;
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 6px;
    --spacing-lg: 8px;
    --spacing-xl: 10px;
    --spacing-xxl: 16px;
    --radius-xxs: 1px;
    --radius-xs: 1px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-xxl: 12px;
    --text-xxs: 9px;
    --text-xs: 10px;
    --text-sm: 12px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 22px;
    --text-xxl: 26px;
    --font: 'Montserrat', 'ui-sans-serif', 'system-ui', sans-serif;
    --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
    --body-background-fill: var(--background-fill-primary);
    --body-text-color: var(--neutral-800);
    --body-text-size: var(--text-md);
    --body-text-weight: 400;
    --embed-radius: var(--radius-lg);
    --color-accent: var(--primary-500);
    --color-accent-soft: var(--primary-50);
    --background-fill-primary: var(--neutral-50);
    --background-fill-secondary: var(--neutral-50);
    --border-color-accent: var(--primary-300);
    --border-color-primary: var(--neutral-200);
    --link-text-color: var(--secondary-600);
    --link-text-color-active: var(--secondary-600);
    --link-text-color-hover: var(--secondary-700);
    --link-text-color-visited: var(--secondary-500);
    --body-text-color-subdued: var(--neutral-400);
    --accordion-text-color: var(--body-text-color);
    --table-text-color: var(--body-text-color);
    --shadow-drop: 0 1px 4px 0 rgb(0 0 0 / 0.1);
    --shadow-drop-lg: 0 2px 5px 0 rgb(0 0 0 / 0.1);
    --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
    --shadow-spread: 6px;
    --block-background-fill: white;
    --block-border-color: var(--border-color-primary);
    --block-border-width: 0px;
    --block-info-text-color: var(--body-text-color-subdued);
    --block-info-text-size: var(--text-sm);
    --block-info-text-weight: 400;
    --block-label-background-fill: var(--primary-100);
    --block-label-border-color: var(--border-color-primary);
    --block-label-border-width: 1px;
    --block-label-shadow: var(--block-shadow);
    --block-label-text-color: var(--primary-500);
    --block-label-margin: var(--spacing-md);
    --block-label-padding: var(--spacing-sm) var(--spacing-md);
    --block-label-radius: var(--radius-md);
    --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
    --block-label-text-size: var(--text-md);
    --block-label-text-weight: 600;
    --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
    --block-radius: var(--radius-lg);
    --block-shadow: none;
    --block-title-background-fill: var(--block-label-background-fill);
    --block-title-border-color: none;
    --block-title-border-width: 0px;
    --block-title-text-color: var(--primary-500);
    --block-title-padding: var(--block-label-padding);
    --block-title-radius: var(--block-label-radius);
    --block-title-text-size: var(--text-md);
    --block-title-text-weight: 600;
    --container-radius: var(--radius-lg);
    --form-gap-width: 0px;
    --layout-gap: var(--spacing-xxl);
    --panel-background-fill: var(--background-fill-secondary);
    --panel-border-color: var(--border-color-primary);
    --panel-border-width: 1px;
    --section-header-text-size: var(--text-md);
    --section-header-text-weight: 400;
    --border-color-accent-subdued: var(--border-color-accent);
    --code-background-fill: var(--neutral-100);
    --checkbox-background-color: var(--background-fill-primary);
    --checkbox-background-color-focus: var(--checkbox-background-color);
    --checkbox-background-color-hover: var(--checkbox-background-color);
    --checkbox-background-color-selected: var(--primary-600);
    --checkbox-border-color: var(--neutral-100);
    --checkbox-border-color-focus: var(--primary-500);
    --checkbox-border-color-hover: var(--neutral-300);
    --checkbox-border-color-selected: var(--primary-600);
    --checkbox-border-radius: var(--radius-sm);
    --checkbox-border-width: 1px;
    --checkbox-label-background-fill: var(--button-secondary-background-fill);
    --checkbox-label-background-fill-hover: var(--button-secondary-background-fill-hover);
    --checkbox-label-background-fill-selected: var(--primary-500);
    --checkbox-label-border-color: var(--border-color-primary);
    --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
    --checkbox-label-border-width: var(--input-border-width);
    --checkbox-label-gap: var(--spacing-lg);
    --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
    --checkbox-label-shadow: var(--shadow-drop-lg);
    --checkbox-label-text-size: var(--text-md);
    --checkbox-label-text-weight: 400;
    --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    --checkbox-shadow: none;
    --checkbox-label-text-color: var(--body-text-color);
    --checkbox-label-text-color-selected: white;
    --error-background-fill: #fef2f2;
    --error-border-color: #b91c1c;
    --error-border-width: 1px;
    --error-text-color: #b91c1c;
    --error-icon-color: #b91c1c;
    --input-background-fill: white;
    --input-background-fill-focus: var(--secondary-500);
    --input-background-fill-hover: var(--input-background-fill);
    --input-border-color: var(--neutral-50);
    --input-border-color-focus: var(--secondary-300);
    --input-border-color-hover: var(--input-border-color);
    --input-border-width: 0px;
    --input-padding: var(--spacing-xl);
    --input-placeholder-color: var(--neutral-400);
    --input-radius: var(--radius-lg);
    --input-shadow: var(--shadow-drop);
    --input-shadow-focus: var(--shadow-drop-lg);
    --input-text-size: var(--text-md);
    --input-text-weight: 400;
    --loader-color: var(--color-accent);
    --prose-text-size: var(--text-md);
    --prose-text-weight: 400;
    --prose-header-text-weight: 600;
    --slider-color: var(--primary-500);
    --stat-background-fill: var(--primary-300);
    --table-border-color: var(--neutral-300);
    --table-even-background-fill: white;
    --table-odd-background-fill: var(--neutral-50);
    --table-radius: var(--radius-lg);
    --table-row-focus: var(--color-accent-soft);
    --button-border-width: var(--input-border-width);
    --button-cancel-background-fill: var(--button-secondary-background-fill);
    --button-cancel-background-fill-hover: var(--button-secondary-background-fill-hover);
    --button-cancel-border-color: var(--button-secondary-border-color);
    --button-cancel-border-color-hover: var(--button-cancel-border-color);
    --button-cancel-text-color: var(--button-secondary-text-color);
    --button-cancel-text-color-hover: var(--button-cancel-text-color);
    --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
    --button-large-radius: var(--radius-lg);
    --button-large-text-size: var(--text-lg);
    --button-large-text-weight: 600;
    --button-primary-background-fill: var(--primary-500);
    --button-primary-background-fill-hover: var(--primary-400);
    --button-primary-border-color: var(--primary-200);
    --button-primary-border-color-hover: var(--button-primary-border-color);
    --button-primary-text-color: white;
    --button-primary-text-color-hover: var(--button-primary-text-color);
    --button-secondary-background-fill: white;
    --button-secondary-background-fill-hover: var(--neutral-100);
    --button-secondary-border-color: var(--neutral-200);
    --button-secondary-border-color-hover: var(--button-secondary-border-color);
    --button-secondary-text-color: var(--neutral-800);
    --button-secondary-text-color-hover: var(--button-secondary-text-color);
    --button-shadow: var(--shadow-drop-lg);
    --button-shadow-active: var(--shadow-inset);
    --button-shadow-hover: var(--shadow-drop-lg);
    --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
    --button-small-radius: var(--radius-lg);
    --button-small-text-size: var(--text-md);
    --button-small-text-weight: 400;
    --button-transition: background-color 0.2s ease;
}

.dark {
    --body-background-fill: var(--background-fill-primary);
    --body-text-color: var(--neutral-100);
    --color-accent-soft: var(--neutral-700);
    --background-fill-primary: var(--neutral-950);
    --background-fill-secondary: var(--neutral-900);
    --border-color-accent: var(--neutral-600);
    --border-color-primary: var(--neutral-700);
    --link-text-color-active: var(--secondary-500);
    --link-text-color: var(--secondary-500);
    --link-text-color-hover: var(--secondary-400);
    --link-text-color-visited: var(--secondary-600);
    --body-text-color-subdued: var(--neutral-400);
    --accordion-text-color: var(--body-text-color);
    --table-text-color: var(--body-text-color);
    --shadow-spread: 1px;
    --block-background-fill: var(--neutral-800);
    --block-border-color: var(--border-color-primary);
    --block_border_width: None;
    --block-info-text-color: var(--body-text-color-subdued);
    --block-label-background-fill: var(--primary-600);
    --block-label-border-color: var(--border-color-primary);
    --block_label_border_width: None;
    --block-label-text-color: white;
    --block_shadow: None;
    --block_title_background_fill: None;
    --block_title_border_color: None;
    --block_title_border_width: None;
    --block-title-text-color: white;
    --panel-background-fill: var(--background-fill-secondary);
    --panel-border-color: var(--border-color-primary);
    --panel_border_width: None;
    --border-color-accent-subdued: var(--border-color-accent);
    --code-background-fill: var(--neutral-800);
    --checkbox-background-color: var(--neutral-800);
    --checkbox-background-color-focus: var(--checkbox-background-color);
    --checkbox-background-color-hover: var(--checkbox-background-color);
    --checkbox-background-color-selected: var(--primary-700);
    --checkbox-border-color: var(--neutral-600);
    --checkbox-border-color-focus: var(--primary-600);
    --checkbox-border-color-hover: var(--neutral-600);
    --checkbox-border-color-selected: var(--primary-700);
    --checkbox-border-width: var(--input-border-width);
    --checkbox-label-background-fill: var(--button-secondary-background-fill);
    --checkbox-label-background-fill-hover: var(--button-secondary-background-fill-hover);
    --checkbox-label-background-fill-selected: var(--primary-600);
    --checkbox-label-border-color: var(--border-color-primary);
    --checkbox-label-border-color-hover: var(--checkbox-label-border-color);
    --checkbox-label-border-width: var(--input-border-width);
    --checkbox-label-text-color: var(--body-text-color);
    --checkbox-label-text-color-selected: var(--checkbox-label-text-color);
    --error-background-fill: var(--background-fill-primary);
    --error-border-color: #ef4444;
    --error_border_width: None;
    --error-text-color: #fef2f2;
    --error-icon-color: #ef4444;
    --input-background-fill: var(--neutral-700);
    --input-background-fill-focus: var(--secondary-600);
    --input-background-fill-hover: var(--input-background-fill);
    --input-border-color: var(--border-color-primary);
    --input-border-color-focus: var(--neutral-700);
    --input-border-color-hover: var(--input-border-color);
    --input_border_width: None;
    --input-placeholder-color: var(--neutral-500);
    --input_shadow: None;
    --input_shadow_focus: None;
    --loader_color: None;
    --slider-color: var(--primary-600);
    --stat-background-fill: var(--primary-500);
    --table-border-color: var(--neutral-700);
    --table-even-background-fill: var(--neutral-950);
    --table-odd-background-fill: var(--neutral-900);
    --table-row-focus: var(--color-accent-soft);
    --button-border-width: var(--input-border-width);
    --button-cancel-background-fill: var(--button-secondary-background-fill);
    --button-cancel-background-fill-hover: var(--button-secondary-background-fill-hover);
    --button-cancel-border-color: var(--button-secondary-border-color);
    --button-cancel-border-color-hover: var(--button-cancel-border-color);
    --button-cancel-text-color: var(--button-secondary-text-color);
    --button-cancel-text-color-hover: var(--button-cancel-text-color);
    --button-primary-background-fill: var(--primary-700);
    --button-primary-background-fill-hover: var(--primary-500);
    --button-primary-border-color: var(--primary-600);
    --button-primary-border-color-hover: var(--button-primary-border-color);
    --button-primary-text-color: white;
    --button-primary-text-color-hover: var(--button-primary-text-color);
    --button-secondary-background-fill: var(--neutral-600);
    --button-secondary-background-fill-hover: var(--primary-500);
    --button-secondary-border-color: var(--neutral-600);
    --button-secondary-border-color-hover: var(--button-secondary-border-color);
    --button-secondary-text-color: white;
    --button-secondary-text-color-hover: var(--button-secondary-text-color);
    --name: soft;
    --primary-50: #fdf2f8;
    --primary-100: #fce7f3;
    --primary-200: #fbcfe8;
    --primary-300: #f9a8d4;
    --primary-400: #f472b6;
    --primary-500: #ec4899;
    --primary-600: #db2777;
    --primary-700: #be185d;
    --primary-800: #9d174d;
    --primary-900: #831843;
    --primary-950: #6e1a3d;
    --secondary-50: #eef2ff;
    --secondary-100: #e0e7ff;
    --secondary-200: #c7d2fe;
    --secondary-300: #a5b4fc;
    --secondary-400: #818cf8;
    --secondary-500: #6366f1;
    --secondary-600: #4f46e5;
    --secondary-700: #4338ca;
    --secondary-800: #3730a3;
    --secondary-900: #312e81;
    --secondary-950: #2b2c5e;
    --neutral-50: #f9fafb;
    --neutral-100: #f3f4f6;
    --neutral-200: #e5e7eb;
    --neutral-300: #d1d5db;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #0b0f19;
    --spacing-xxs: 1px;
    --spacing-xs: 2px;
    --spacing-sm: 4px;
    --spacing-md: 6px;
    --spacing-lg: 8px;
    --spacing-xl: 10px;
    --spacing-xxl: 16px;
    --radius-xxs: 1px;
    --radius-xs: 1px;
    --radius-sm: 2px;
    --radius-md: 4px;
    --radius-lg: 6px;
    --radius-xl: 8px;
    --radius-xxl: 12px;
    --text-xxs: 9px;
    --text-xs: 10px;
    --text-sm: 12px;
    --text-md: 14px;
    --text-lg: 16px;
    --text-xl: 22px;
    --text-xxl: 26px;
    --font: 'Montserrat', 'ui-sans-serif', 'system-ui', sans-serif;
    --font-mono: 'IBM Plex Mono', 'ui-monospace', 'Consolas', monospace;
    --body-text-size: var(--text-md);
    --body-text-weight: 400;
    --embed-radius: var(--radius-lg);
    --color-accent: var(--primary-500);
    --shadow-drop: 0 1px 4px 0 rgb(0 0 0 / 0.1);
    --shadow-drop-lg: 0 2px 5px 0 rgb(0 0 0 / 0.1);
    --shadow-inset: rgba(0, 0, 0, 0.05) 0px 2px 4px 0px inset;
    --block-border-width: 0px;
    --block-info-text-size: var(--text-sm);
    --block-info-text-weight: 400;
    --block-label-border-width: 1px;
    --block-label-shadow: var(--block-shadow);
    --block-label-margin: var(--spacing-md);
    --block-label-padding: var(--spacing-sm) var(--spacing-md);
    --block-label-radius: var(--radius-md);
    --block-label-right-radius: 0 calc(var(--radius-lg) - 1px) 0 calc(var(--radius-lg) - 1px);
    --block-label-text-size: var(--text-md);
    --block-label-text-weight: 600;
    --block-padding: var(--spacing-xl) calc(var(--spacing-xl) + 2px);
    --block-radius: var(--radius-lg);
    --block-shadow: none;
    --block-title-background-fill: var(--block-label-background-fill);
    --block-title-border-color: none;
    --block-title-border-width: 0px;
    --block-title-padding: var(--block-label-padding);
    --block-title-radius: var(--block-label-radius);
    --block-title-text-size: var(--text-md);
    --block-title-text-weight: 600;
    --container-radius: var(--radius-lg);
    --form-gap-width: 0px;
    --layout-gap: var(--spacing-xxl);
    --panel-border-width: 1px;
    --section-header-text-size: var(--text-md);
    --section-header-text-weight: 400;
    --checkbox-border-radius: var(--radius-sm);
    --checkbox-label-gap: var(--spacing-lg);
    --checkbox-label-padding: var(--spacing-md) calc(2 * var(--spacing-md));
    --checkbox-label-shadow: var(--shadow-drop-lg);
    --checkbox-label-text-size: var(--text-md);
    --checkbox-label-text-weight: 400;
    --checkbox-check: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
    --radio-circle: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
    --checkbox-shadow: none;
    --error-border-width: 1px;
    --input-border-width: 0px;
    --input-padding: var(--spacing-xl);
    --input-radius: var(--radius-lg);
    --input-shadow: var(--shadow-drop);
    --input-shadow-focus: var(--shadow-drop-lg);
    --input-text-size: var(--text-md);
    --input-text-weight: 400;
    --loader-color: var(--color-accent);
    --prose-text-size: var(--text-md);
    --prose-text-weight: 400;
    --prose-header-text-weight: 600;
    --table-radius: var(--radius-lg);
    --button-large-padding: var(--spacing-lg) calc(2 * var(--spacing-lg));
    --button-large-radius: var(--radius-lg);
    --button-large-text-size: var(--text-lg);
    --button-large-text-weight: 600;
    --button-shadow: var(--shadow-drop-lg);
    --button-shadow-active: var(--shadow-inset);
    --button-shadow-hover: var(--shadow-drop-lg);
    --button-small-padding: var(--spacing-sm) calc(2 * var(--spacing-sm));
    --button-small-radius: var(--radius-lg);
    --button-small-text-size: var(--text-md);
    --button-small-text-weight: 400;
    --button-transition: background-color 0.2s ease;
}

body>gradio-app {
    background: var(--primary-950);
    background: linear-gradient(180deg, color-mix(in srgb, var(--primary-950), transparent 50%) 0%, color-mix(in srgb, var(--primary-950), transparent 50%) 28%, var(--neutral-950) 28%, var(--neutral-950) 100%) !important;
    padding-top: 120px;
    min-widh: 900px;
}

gradio-app .gradio-container {
    max-width: 80% !important;
}

div.tabs>div.tab-nav>button.selected {
    border-width: 0 !important;
    background: var(--primary-600) !important;
    color: var(--neutral-950);
    font-weight: 600;
}

div.tabs>div.tab-nav {
    border-bottom: none !important;
    padding: 0 0.25rem 0 0.25rem !important;
}

div.tabs div.tabitem {
    background-color: var(--neutral-900) !important;
    border-width: 0 !important;
    border-top: 8px solid var(--primary-600) !important;
    border-radius: var(--container-radius) !important;
}

.top-description h1 {
    color: var(--neutral-400);
    font-size: 2rem;
}

.prompt-input textarea {
    font-size: 1.2rem;
    color: var(--neutral-300);
}

.ratio_buttons_wrapper {
    display: flex !important;
    flex-grow: 0 !important;
    min-width: min(48px, 30%) !important;
    flex: 1 1 0%;
    flex-wrap: nowrap;
}

.image_size_selctor_wrapper {
    flex-grow: 2 !important;
    min-width: min(120px, 10%) !important;
}

.info-text-wrapper {
    padding: calc(var(--spacing-xl) / 2) calc(var(--spacing-xl) + 2px);
}

span.info-text {
    margin-bottom: var(--spacing-lg);
    color: var(--block-info-text-color);
    font-weight: var(--block-info-text-weight);
    font-size: var(--block-info-text-size);
    line-height: var(--line-sm);
}

.image-input-read-exfi {
    max-height: 120px;
}

.image-input-read-exfi>button {
    transform: scale(.8);
}

.image-ratio-buttons {
    & label input {
        display: none;
    }

    &label span {
        margin-left: 0;
    }
}

.switch-ratio-btn {
    max-width: 38px;
    min-width: 38px !important;
    height: 33px;
}

/* .image-height-selector {
    & div.head {
        justify-content: end;
    }

    & label {
        display: none;
    }
} */