Upload 25 files

_res/_custom.css

@@ -1,524 +1,300 @@
-/* :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;
-    }
-} */
+/* :root {
+    --primary-700: rgb(67, 56, 202);
+    --primary-50: color-mix(in srgb, var(--primary-700) 5%, white);
+    --primary-100: color-mix(in srgb, var(--primary-700) 10%, white);
+    --primary-200: color-mix(in srgb, var(--primary-700) 20%, white);
+    --primary-300: color-mix(in srgb, var(--primary-700) 60%, white);
+    --primary-400: color-mix(in srgb, var(--primary-700) 70%, white);
+    --primary-500: color-mix(in srgb, var(--primary-700) 80%, white);
+    --primary-600: color-mix(in srgb, var(--primary-700) 90%, white);
+    --primary-800: color-mix(in srgb, var(--primary-700) 70%, black);
+    --primary-900: color-mix(in srgb, var(--primary-700) 80%, black);
+    --primary-950: color-mix(in srgb, var(--primary-700) 90%, black);
+}
+
+.dark {
+    --primary-700: rgb(67, 56, 202);
+    --primary-50: color-mix(in srgb, var(--primary-700) 5%, white);
+    --primary-100: color-mix(in srgb, var(--primary-700) 10%, white);
+    --primary-200: color-mix(in srgb, var(--primary-700) 20%, white);
+    --primary-300: color-mix(in srgb, var(--primary-700) 60%, white);
+    --primary-400: color-mix(in srgb, var(--primary-700) 70%, white);
+    --primary-500: color-mix(in srgb, var(--primary-700) 80%, white);
+    --primary-600: color-mix(in srgb, var(--primary-700) 90%, white);
+    --primary-800: color-mix(in srgb, var(--primary-700) 70%, black);
+    --primary-900: color-mix(in srgb, var(--primary-700) 80%, black);
+    --primary-950: color-mix(in srgb, var(--primary-700) 90%, black);
+} */
+
+/* width */
+::-webkit-scrollbar {
+    width: 0px;
+}
+
+body::-webkit-scrollbar {
+    width: 8px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+    background: var(--neutral-900);
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+    background: var(--primary-600);
+    border-radius: 3px;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+    background: var(--primary-800);
+}
+
+body {
+    min-height: 101vh;
+}
+
+body>gradio-app {
+    /* background: var(--primary-950);
+    background-image: 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-width: 900px;
+    transition: opacity 0.4s linear;
+    position: relative;
+}
+
+body>gradio-app::before {
+    position: absolute;
+    content: "";
+    background: var(--primary-950);
+    width: 100%;
+    height: 355px;
+    top: 0;
+    z-index: 0;
+}
+
+body>gradio-app.has-bg-image::before {
+    /* --bg-image-path: none; */
+    /* --bg-image-path: url("https://image.pollinations.ai/prompt/A%20midnight%20blue%20stallion%20gallops%20across%20a%20misty%2C%20moonlit%20meadow%2C%20its%20mane%20and%20tail%20flowing%20in%20the%20wind%20like%20a%20celestial%20river%2C%20as%20stars%20twinkle%20in%20the%20sky%20above%20-%20Expressionist%20Watercolor%20Painting?model=flux&width=1024&height=683&nologo=true&enhance=false&nofeed=true&seed=42"); */
+    background-image: var(--bg-image-path);
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    filter: blur(12px);
+
+}
+
+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 {
+    height: 120px;
+
+    & label {
+        width: calc(25% - calc(var(--spacing-xl) + 2px) * 2 / 4);
+        justify-content: center;
+        align-items: end;
+
+        & input {
+            display: none;
+        }
+    }
+
+    & label span {
+        margin-left: 0;
+    }
+}
+
+span.has-info+div {
+    margin-top: var(--spacing-lg);
+    margin-bottom: var(--spacing-lg);
+}
+
+.switch-ratio-btn {
+    /* max-width: 38px;
+    min-width: 38px !important;
+    height: 33px; */
+    --icon-ratio: 3/2;
+    aspect-ratio: 1;
+    min-width: 40px;
+    max-width: 120px;
+
+    & svg {
+        fill: var(--block-title-text-color);
+        width: 70%;
+        transition: transform 0.2s ease-in-out;
+    }
+
+    & svg.portrait {
+        transform: rotate(90deg) rotateX(180deg);
+    }
+}
+
+.switch-ratio-btn:hover {
+    & svg {
+        transform: rotate(40deg);
+    }
+
+    & svg.portrait {
+        transform: rotate(40deg) rotateX(180deg);
+    }
+}
+
+/* .image-height-selector {
+    & div.head {
+        justify-content: end;
+    }
+#component-5057 > label > input
+    & label {
+        display: none;
+    }
+} */
+
+.fade-bg *,
+.fade-bg .primary {
+    /* transition: background-color 0.8s ease-in-out;
+    transition: background 0.8s ease-in-out; */
+    /* transition: background-color 1.8s linear; */
+    /* transition: background 1.8s linear; */
+}
+
+.output-dominant-image-color {
+    display: none;
+}
+
+.image-info-wrapper {
+    transition: opacity 0.4s linear;
+    /* opacity: 0;
+    display: none; */
+}
+
+.tb-img-width input[type=text],
+.tb-img-height input[type=text],
+.tb-img-seed input[type=text] {
+    display: block;
+    position: relative;
+    outline: none !important;
+    box-shadow: var(--input-shadow);
+    border: var(--input-border-width) solid var(--input-border-color);
+    border-radius: var(--input-radius);
+    background: var(--input-background-fill);
+    padding: var(--size-2) var(--size-2);
+    height: var(--size-6);
+    color: var(--body-text-color);
+    font-size: var(--input-text-size);
+    line-height: var(--line-sm);
+    text-align: center;
+}
+
+#output_image>div.image-container>div.icon-buttons {
+
+
+    /* display: flex;
+    position: absolute;
+    top: var(--block-label-margin);
+    right: var(--block-label-margin);
+    align-items: center; */
+    & button,
+    a button {
+        display: inline-block;
+        position: relative;
+        z-index: var(--layer-4);
+        border: solid var(--block-title-border-width) var(--block-title-border-color);
+        border-radius: var(--block-title-radius);
+        background: var(--block-title-background-fill);
+        padding: var(--block-title-padding);
+        color: var(--block-title-text-color);
+        font-weight: var(--block-title-text-weight);
+        font-size: var(--block-title-text-size);
+        line-height: var(--line-sm);
+    }
+}
+
+.random-prompt-btn,
+.enhance-prompt-btn,
+.run-btn {
+    min-width: 110px;
+
+    & svg {
+        fill: var(--block-title-text-color);
+        width: 1.8rem;
+    }
+
+}
+
+.image-height-selector>label,
+.image-width-selector>label {
+    display: flex;
+    justify-content: space-between;
+
+    & input {
+        min-width: 100px;
+        width: 50%;
+        height: var(--size-9);
+    }
+
+}

_res/_custom.js

@@ -1,24 +1,113 @@
-//component-15
-const tabNav = document.querySelector("#component-153 > div.tab-nav.svelte-1uw5tnk")
-//const tabNav = document.querySelector('.tab-nav');
-tabNav.addEventListener("wheel", (event) => {
-	event.preventDefault()
-	const scrollLeft = tabNav.scrollLeft + event.deltaY
-	tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth))
-})
-
-tabNav.addEventListener("mouseover", () => {
-	tabNav.addEventListener("wheel", (event) => {
-		event.preventDefault()
-		const scrollLeft = tabNav.scrollLeft + event.deltaY
-		tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth))
+function gradioColorChange() {
+	function onDomChange(callback) {
+		const observer = new MutationObserver(callback)
+		observer.observe(document.querySelector("#dominant_image_color"), {
+			childList: true,
+			subtree: true,
+		})
+	}
+
+	onDomChange(() => {
+		console.log("changed: " + document.querySelector("#dominant_image_color > label > textarea").value)
+		if (document.querySelector("#dominant_image_color > label > textarea").value.match(/^rgb\((\d{1,3}),(\s\d{1,3}),(\s\d{1,3})\)$/) && document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").src) {
+			document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").style.opacity = "0"
+			document.querySelector("body > gradio-app > div").classList.add("fade-bg")
+			document.querySelector("gradio-app").style.opacity = "0"
+			setTimeout(() => {
+				document.querySelector("body").style.setProperty("--primary-700", document.querySelector("#dominant_image_color > label > textarea").value)
+				document.querySelector("gradio-app").classList.add("has-bg-image")
+				document.querySelector("body").style.setProperty("--bg-image-path", `url("${document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").src}")`)
+			}, 400)
+			setTimeout(() => {
+				document.querySelector("gradio-app").style.opacity = "1"
+				document.querySelector("#output_image > div.image-container.svelte-1p15vfy > button > div > img").style.opacity = "1"
+				document.querySelector("#dominant_image_color > label > textarea").value = ""
+			}, 800)
+			setTimeout(() => {
+				//document.querySelector("body > gradio-app > div").classList.remove("fade-bg")
+			}, 2000)
+		}
+		//document.querySelector("body").style.setProperty("--primary-700", document.querySelector("#dominant_image_color > label > textarea").value)
 	})
-})
 
-tabNav.addEventListener("mouseout", () => {
-	tabNav.removeEventListener("wheel", (event) => {
-		event.preventDefault()
-		const scrollLeft = tabNav.scrollLeft + event.deltaY
-		tabNav.scrollLeft = Math.max(0, Math.min(scrollLeft, tabNav.scrollWidth - tabNav.clientWidth))
+	document.querySelector("body").style.setProperty("--primary-700", "rgb(14, 116, 144)")
+	document.querySelector("body").style.setProperty("--primary-50", "color-mix(in srgb, var(--primary-700) 5%, white)")
+	document.querySelector("body").style.setProperty("--primary-100", "color-mix(in srgb, var(--primary-700) 10%, white)")
+	document.querySelector("body").style.setProperty("--primary-200", "color-mix(in srgb, var(--primary-700) 20%, white)")
+	document.querySelector("body").style.setProperty("--primary-300", "color-mix(in srgb, var(--primary-700) 60%, white)")
+	document.querySelector("body").style.setProperty("--primary-400", "color-mix(in srgb, var(--primary-700) 70%, white)")
+	document.querySelector("body").style.setProperty("--primary-500", "color-mix(in srgb, var(--primary-700) 80%, white)")
+	document.querySelector("body").style.setProperty("--primary-600", "color-mix(in srgb, var(--primary-700) 90%, white)")
+	document.querySelector("body").style.setProperty("--primary-800", "color-mix(in srgb, var(--primary-700) 70%, black)")
+	document.querySelector("body").style.setProperty("--primary-900", "color-mix(in srgb, var(--primary-700) 80%, black)")
+	document.querySelector("body").style.setProperty("--primary-950", "color-mix(in srgb, var(--primary-700) 90%, black)")
+
+	const imageRatioBtns = document.querySelectorAll("#image_ratio_buttons > div label")
+	const width_selector = document.querySelector("#image_width_selector > label > input")
+	const hight_selector = document.querySelector("#image_height_selector > label > input")
+	const switch_width_height = document.querySelector("#switch_width_height")
+
+	const random_prompt_btn = document.querySelector("#random_prompt_btn")
+	random_prompt_btn.innerHTML =
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M42.15 9.85C41.58 9.28 40.9 9 40.12 9H7.88c-.78 0-1.46.28-2.03.85S5 11.1 5 11.88v24.23c0 .78.28 1.46.85 2.03s1.25.85 2.03.85h32.23c.78 0 1.46-.28 2.03-.85s.85-1.25.85-2.03V11.88c0-.78-.28-1.46-.85-2.03ZM13.66 30.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Zm7.28 7.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Zm7.28 7.78c-.68 0-1.24-.55-1.24-1.24s.55-1.24 1.24-1.24 1.24.55 1.24 1.24-.55 1.24-1.24 1.24Zm2.8-7.78-1.3 1.8c-.32.45-.41.76-.48 1.23-.04.26-.13.48-.28.64-.17.19-.42.29-.73.29s-.56-.12-.73-.31c-.16-.18-.25-.42-.25-.73 0-.68.12-1.09.65-1.8l1.48-2c.33-.45.58-.87.58-1.47 0-1.04-.75-1.83-1.83-1.83-.52 0-.99.15-1.36.52-.29.29-.43.65-.55 1.12-.06.22-.16.47-.27.58-.15.17-.39.29-.7.29-.26 0-.49-.1-.66-.29-.18-.2-.23-.42-.23-.71 0-.67.35-1.58 1.03-2.22.68-.65 1.62-1.03 2.73-1.03 2.11 0 3.79 1.4 3.79 3.57 0 1-.35 1.62-.89 2.36Z"/></g></svg>'
+	const enhance_prompt_btn = document.querySelector("#enhance_prompt_btn")
+	enhance_prompt_btn.innerHTML =
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="m33.91 29.59 9.37-8.07h.38c.4.05.72.21.95.49.23.28.35.59.35.91 0 .18-.05.37-.14.55-.09.18-.22.35-.37.5l-7.55 6.48 2.31 10s.04.1.04.17v.14c0 .41-.14.73-.42.98-.28.24-.6.37-.97.37-.12 0-.24-.01-.37-.04s-.25-.07-.37-.13l-.4-.27-2.8-12.09Zm-4.95-15.31-3-7.1.16-.33c.1-.27.26-.47.5-.63.24-.15.49-.23.75-.23.24 0 .49.07.74.22s.43.36.55.65l3.25 7.67-2.95-.26ZM12.1 37.29l8.69-5.23 8.69 5.29-2.3-9.9 7.65-6.64-10.09-.89-3.95-9.31-3.95 9.25-10.09.89 7.65 6.66-2.3 9.88Zm-3.09 1.65 2.44-10.56-8.16-7.13c-.2-.18-.35-.38-.46-.59-.11-.22-.16-.42-.16-.63 0-.41.14-.79.43-1.14.29-.34.67-.53 1.14-.55l10.8-.96 4.18-9.96c.13-.34.34-.59.64-.76.3-.17.6-.25.91-.25s.62.08.93.25c.31.17.53.42.66.76l4.18 9.96 10.8.96c.48.02.86.21 1.15.55.29.34.44.72.44 1.13 0 .22-.06.44-.18.65-.12.21-.27.4-.47.58l-8.16 7.13 2.47 10.56c.03.09.05.21.05.36 0 .48-.17.89-.51 1.22-.34.33-.73.49-1.16.49-.09 0-.4-.09-.93-.27l-9.26-5.59-9.26 5.59c-.14.08-.29.14-.46.19-.16.05-.31.08-.44.08-.5 0-.94-.21-1.31-.62-.37-.41-.48-.9-.32-1.45Z"/></g></svg>'
+	const run_btn = document.querySelector("#run_btn")
+	run_btn.innerHTML =
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M29.27 43.84V33.13l-6.01-5.57-1.89 8.38c-.1.4-.31.7-.64.92-.33.21-.69.28-1.08.22L9.48 34.99c-.28-.06-.51-.21-.69-.46s-.24-.54-.19-.86c.05-.3.21-.53.48-.68s.54-.2.82-.15l8.99 1.79 3.86-19.69-5.88 2.67v5.52c0 .33-.11.6-.33.82-.22.22-.5.33-.83.33-.33 0-.61-.11-.82-.33-.22-.22-.33-.5-.33-.82V17c0-.3.08-.58.25-.82.17-.24.38-.43.65-.55l7.42-3.07c.94-.41 1.62-.67 2.04-.78.42-.11.83-.17 1.22-.17.6 0 1.14.13 1.61.4.47.27.88.66 1.21 1.17l2.12 3.37c.79 1.27 1.85 2.4 3.16 3.39 1.31.99 2.81 1.62 4.5 1.91.33.06.61.2.83.42.23.22.34.49.34.8s-.11.6-.34.82c-.23.22-.49.31-.81.27-1.84-.22-3.58-.87-5.2-1.96-1.62-1.09-3.12-2.68-4.49-4.79l-2.09 9.07 4.11 3.88c.16.14.28.31.36.49.08.19.13.38.13.57v12.42c0 .33-.11.6-.34.82-.23.22-.5.33-.82.33s-.61-.11-.82-.33c-.22-.22-.33-.5-.33-.82Zm-.06-34.83c-.97 0-1.8-.34-2.48-1.02-.68-.68-1.03-1.51-1.03-2.48s.34-1.8 1.02-2.48C27.4 2.35 28.23 2 29.2 2s1.8.34 2.48 1.02c.68.68 1.03 1.51 1.03 2.48s-.34 1.8-1.02 2.48c-.68.68-1.51 1.03-2.48 1.03Z"/></g></svg>'
+
+	switch_width_height.innerHTML =
+		'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48"><g data-name="Ebene_1"><path fill="none" d="M0 48V0h48v48z"/><path d="M33.75 22.5V6.01c0-1.84-1.5-3.34-3.34-3.34H5.01c-1.84 0-3.34 1.5-3.34 3.34V22.5c0 1.84 1.5 3.34 3.34 3.34h25.4c1.84 0 3.34-1.5 3.34-3.34Zm-29.41 0V6.01c0-.37.3-.67.67-.67h25.4c.37 0 .67.3.67.67V22.5c0 .37-.3.67-.67.67H5.01a.67.67 0 0 1-.67-.67Z"/><path d="M39.65 15.1c-.41-.72-1.33-.97-2.05-.56s-.97 1.33-.56 2.05C38.32 18.84 39 21.4 39 24c0 8.27-6.73 15-15 15-5.2 0-9.91-2.61-12.68-7H16c.83 0 1.5-.67 1.5-1.5S16.83 29 16 29H7.5c-.83 0-1.5.67-1.5 1.5V39c0 .83.67 1.5 1.5 1.5S9 39.83 9 39v-5.06C12.35 39 17.9 42 24 42c9.93 0 18-8.07 18-18 0-3.12-.81-6.2-2.35-8.9Z"/></g></svg>'
+
+	switch_width_height.addEventListener("click", () => {
+		switch_width_height.querySelector("svg").classList.toggle("portrait")
+		switch_width_height.querySelector("svg").classList.toggle("landscape")
+
+		imageRatioBtns.forEach((_) => {
+			const ratio = _.querySelector("input").value
+			const [a, b] = ratio.split(":")
+			_.dataset.testid = `${b}:${a}-radio-label`
+			_.querySelector("input").value = `${b}:${a}`
+			_.querySelector("span").textContent = `${b}:${a}`
+		})
+
+		const imageRatioBtnsLabel = document.querySelector("#image_ratio_buttons > span")
+		imageRatioBtnsLabel.textContent = imageRatioBtnsLabel.textContent === "Querformat" ? "Hochformat" : "Querformat"
+		const new_hight = width_selector.value
+		const new_width = hight_selector.value
+		width_selector.value = new_width
+		hight_selector.value = new_hight
 	})
-})
+
+	//document.querySelector("#image_ratio_buttons > div.wrap.svelte-1kzox3m > label")
+	imageRatioBtns.forEach((_) => {
+		_.querySelector("input").addEventListener("click", (e) => {
+			let set_width
+			let set_height
+			const clicked_on = e.target
+			console.log("Clicked Btn:", clicked_on.value)
+
+			const ratio = e.target.value
+			const [a, b] = ratio.split(":")
+
+			if (parseInt(a) > parseInt(b)) {
+				console.log("a: " + a + " > " + "b: " + b)
+				set_width = 1024
+				set_height = Math.round(set_width * (b / a))
+			} else if (parseInt(a) < parseInt(b)) {
+				console.log("a: " + a + " < " + "b: " + b)
+				set_height = 1024
+				set_width = Math.round(set_height * (a / b))
+			} else if (parseInt(a) == parseInt(b)) {
+				set_height = 1024
+				set_width = 1024
+			}
+
+			width_selector.value = set_width
+			hight_selector.value = set_height
+		})
+	})
+
+	return "Animation created"
+}