mirror of
https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
synced 2026-02-02 05:43:39 -08:00
8a305a2356
Complete UI overhaul featuring: - Modern color palette with comprehensive design tokens - Professional shadows and depth hierarchy - Smooth transitions and animations - Enhanced typography system - Modern card designs with hover effects - Improved form controls and inputs - Cleaner button styles with better interactions - Enhanced dark mode support - Better spacing and visual hierarchy - Responsive design improvements - Performance optimizations - Accessibility enhancements The new design provides a clean, contemporary, and functional interface that significantly improves user experience.
1470 lines
35 KiB
CSS
1470 lines
35 KiB
CSS
/* Modern Stable Diffusion WebUI - Revamped Design System */
|
||
|
||
@import url('webui-assets/css/sourcesanspro.css');
|
||
|
||
/* ============================================
|
||
MODERN DESIGN SYSTEM - CSS VARIABLES
|
||
============================================ */
|
||
|
||
:root {
|
||
/* Modern Color Palette - Light Mode */
|
||
--primary-50: #f0f9ff;
|
||
--primary-100: #e0f2fe;
|
||
--primary-200: #bae6fd;
|
||
--primary-300: #7dd3fc;
|
||
--primary-400: #38bdf8;
|
||
--primary-500: #0ea5e9;
|
||
--primary-600: #0284c7;
|
||
--primary-700: #0369a1;
|
||
--primary-800: #075985;
|
||
--primary-900: #0c4a6e;
|
||
|
||
/* Neutral Grays */
|
||
--gray-50: #fafafa;
|
||
--gray-100: #f5f5f5;
|
||
--gray-200: #e5e5e5;
|
||
--gray-300: #d4d4d4;
|
||
--gray-400: #a3a3a3;
|
||
--gray-500: #737373;
|
||
--gray-600: #525252;
|
||
--gray-700: #404040;
|
||
--gray-800: #262626;
|
||
--gray-900: #171717;
|
||
|
||
/* Semantic Colors */
|
||
--success-light: #d1fae5;
|
||
--success: #10b981;
|
||
--success-dark: #059669;
|
||
--warning-light: #fef3c7;
|
||
--warning: #f59e0b;
|
||
--warning-dark: #d97706;
|
||
--error-light: #fee2e2;
|
||
--error: #ef4444;
|
||
--error-dark: #dc2626;
|
||
|
||
/* Design System Variables */
|
||
--surface-primary: #ffffff;
|
||
--surface-secondary: var(--gray-50);
|
||
--surface-tertiary: var(--gray-100);
|
||
--text-primary: var(--gray-900);
|
||
--text-secondary: var(--gray-600);
|
||
--text-tertiary: var(--gray-400);
|
||
--border-color: var(--gray-200);
|
||
--border-color-strong: var(--gray-300);
|
||
|
||
/* Shadows */
|
||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||
|
||
/* Border Radius */
|
||
--radius-sm: 0.375rem;
|
||
--radius-md: 0.5rem;
|
||
--radius-lg: 0.75rem;
|
||
--radius-xl: 1rem;
|
||
--radius-2xl: 1.5rem;
|
||
|
||
/* Spacing */
|
||
--spacing-xs: 0.25rem;
|
||
--spacing-sm: 0.5rem;
|
||
--spacing-md: 1rem;
|
||
--spacing-lg: 1.5rem;
|
||
--spacing-xl: 2rem;
|
||
--spacing-2xl: 3rem;
|
||
|
||
/* Typography */
|
||
--font-size-xs: 0.75rem;
|
||
--font-size-sm: 0.875rem;
|
||
--font-size-base: 1rem;
|
||
--font-size-lg: 1.125rem;
|
||
--font-size-xl: 1.25rem;
|
||
--font-size-2xl: 1.5rem;
|
||
--font-size-3xl: 1.875rem;
|
||
--line-height-tight: 1.25;
|
||
--line-height-normal: 1.5;
|
||
--line-height-relaxed: 1.75;
|
||
|
||
/* Transitions */
|
||
--transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
--transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
--transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
|
||
|
||
/* Gradio Overrides */
|
||
--checkbox-label-gap: 0.5em 0.25em;
|
||
--section-header-text-size: 14pt;
|
||
--block-background-fill: transparent;
|
||
}
|
||
|
||
.dark {
|
||
/* Dark Mode Colors */
|
||
--surface-primary: var(--gray-900);
|
||
--surface-secondary: var(--gray-800);
|
||
--surface-tertiary: var(--gray-700);
|
||
--text-primary: var(--gray-50);
|
||
--text-secondary: var(--gray-400);
|
||
--text-tertiary: var(--gray-500);
|
||
--border-color: var(--gray-700);
|
||
--border-color-strong: var(--gray-600);
|
||
|
||
/* Adjusted shadows for dark mode */
|
||
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
|
||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
|
||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.4);
|
||
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.5);
|
||
--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.7);
|
||
}
|
||
|
||
/* ============================================
|
||
BASE STYLES & RESETS
|
||
============================================ */
|
||
|
||
* {
|
||
transition: background-color var(--transition-base),
|
||
border-color var(--transition-base),
|
||
color var(--transition-base),
|
||
box-shadow var(--transition-base);
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
.compact {
|
||
background: transparent !important;
|
||
padding: 0 !important;
|
||
}
|
||
|
||
/* ============================================
|
||
GRADIO CONTAINER & LAYOUT
|
||
============================================ */
|
||
|
||
div.gradio-container {
|
||
max-width: unset !important;
|
||
font-size: var(--font-size-base);
|
||
}
|
||
|
||
.block.padded:not(.gradio-accordion) {
|
||
padding: 0 !important;
|
||
}
|
||
|
||
div.form {
|
||
border-width: 0;
|
||
box-shadow: none;
|
||
background: transparent;
|
||
overflow: visible;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
.gap.compact {
|
||
padding: 0;
|
||
gap: var(--spacing-sm) 0;
|
||
}
|
||
|
||
div.compact {
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
/* ============================================
|
||
MODERN BUTTON STYLES
|
||
============================================ */
|
||
|
||
button, .gradio-button {
|
||
border-radius: var(--radius-lg) !important;
|
||
font-weight: 600 !important;
|
||
letter-spacing: 0.01em;
|
||
transition: all var(--transition-base) !important;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
button:hover, .gradio-button:hover {
|
||
transform: translateY(-1px);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
button:active, .gradio-button:active {
|
||
transform: translateY(0);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.gradio-button.tool {
|
||
max-width: 2.5em;
|
||
min-width: 2.5em !important;
|
||
height: 2.5em;
|
||
align-self: end;
|
||
line-height: 1em;
|
||
border-radius: var(--radius-md);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.gradio-button.tool:hover {
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.gradio-button.secondary-down {
|
||
background: var(--button-secondary-background-fill);
|
||
color: var(--button-secondary-text-color);
|
||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
button.custom-button {
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-md) var(--spacing-lg);
|
||
font-weight: 600;
|
||
border: 2px solid var(--border-color);
|
||
background: var(--surface-primary);
|
||
color: var(--text-primary);
|
||
font-size: var(--font-size-base);
|
||
display: inline-flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
transition: all var(--transition-base);
|
||
box-shadow: var(--shadow-sm);
|
||
cursor: pointer;
|
||
}
|
||
|
||
button.custom-button:hover {
|
||
border-color: var(--primary-500);
|
||
box-shadow: var(--shadow-md);
|
||
transform: translateY(-1px);
|
||
}
|
||
|
||
/* ============================================
|
||
MODERN INPUT STYLES
|
||
============================================ */
|
||
|
||
.block.gradio-dropdown,
|
||
.block.gradio-slider,
|
||
.block.gradio-checkbox,
|
||
.block.gradio-textbox,
|
||
.block.gradio-radio,
|
||
.block.gradio-checkboxgroup,
|
||
.block.gradio-number,
|
||
.block.gradio-colorpicker {
|
||
border-width: 0 !important;
|
||
box-shadow: none !important;
|
||
}
|
||
|
||
.gradio-dropdown div.wrap.wrap.wrap.wrap {
|
||
box-shadow: var(--shadow-sm);
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-color);
|
||
transition: all var(--transition-base);
|
||
}
|
||
|
||
.gradio-dropdown div.wrap.wrap.wrap.wrap:hover {
|
||
border-color: var(--primary-400);
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
.gradio-dropdown div.wrap.wrap.wrap.wrap:focus-within {
|
||
border-color: var(--primary-500);
|
||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1), var(--shadow-md);
|
||
}
|
||
|
||
.gradio-dropdown ul.options {
|
||
z-index: 3000;
|
||
min-width: fit-content;
|
||
max-width: inherit;
|
||
white-space: nowrap;
|
||
border-radius: var(--radius-md);
|
||
box-shadow: var(--shadow-xl);
|
||
border: 1px solid var(--border-color);
|
||
overflow: hidden;
|
||
}
|
||
|
||
@media (pointer:fine) {
|
||
.gradio-dropdown ul.options li.item {
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
transition: background-color var(--transition-fast);
|
||
}
|
||
}
|
||
|
||
.gradio-dropdown ul.options li.item:hover {
|
||
background-color: var(--gray-100);
|
||
}
|
||
|
||
.dark .gradio-dropdown ul.options li.item:hover {
|
||
background-color: var(--gray-700);
|
||
}
|
||
|
||
.gradio-dropdown ul.options li.item.selected {
|
||
background-color: var(--primary-50);
|
||
color: var(--primary-700);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.dark .gradio-dropdown ul.options li.item.selected {
|
||
background-color: var(--primary-900);
|
||
color: var(--primary-200);
|
||
}
|
||
|
||
.gradio-slider input[type="number"] {
|
||
width: 6em;
|
||
border-radius: var(--radius-md);
|
||
border: 1px solid var(--border-color);
|
||
padding: var(--spacing-sm);
|
||
transition: all var(--transition-base);
|
||
}
|
||
|
||
.gradio-slider input[type="number"]:focus {
|
||
border-color: var(--primary-500);
|
||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||
}
|
||
|
||
.block.gradio-checkbox {
|
||
margin: var(--spacing-md) var(--spacing-lg) 0 0;
|
||
}
|
||
|
||
/* ============================================
|
||
MODERN ACCORDION STYLES
|
||
============================================ */
|
||
|
||
div.block.gradio-accordion {
|
||
border: 1px solid var(--border-color) !important;
|
||
border-radius: var(--radius-lg) !important;
|
||
margin: var(--spacing-sm) 0;
|
||
padding: var(--spacing-md) !important;
|
||
background: var(--surface-secondary);
|
||
box-shadow: var(--shadow-sm);
|
||
transition: all var(--transition-base);
|
||
}
|
||
|
||
div.block.gradio-accordion:hover {
|
||
border-color: var(--border-color-strong) !important;
|
||
box-shadow: var(--shadow-md);
|
||
}
|
||
|
||
input[type="checkbox"].input-accordion-checkbox {
|
||
vertical-align: sub;
|
||
margin-right: var(--spacing-sm);
|
||
cursor: pointer;
|
||
}
|
||
|
||
/* ============================================
|
||
MODERN CARD STYLES
|
||
============================================ */
|
||
|
||
.extra-network-pane .card, .standalone-card-preview.card {
|
||
display: inline-block;
|
||
margin: var(--spacing-md);
|
||
width: 16rem;
|
||
height: 24rem;
|
||
box-shadow: var(--shadow-md);
|
||
border-radius: var(--radius-xl);
|
||
position: relative;
|
||
background-size: auto 100%;
|
||
background-position: center;
|
||
overflow: hidden;
|
||
cursor: pointer;
|
||
background-image: url('./file=html/card-no-preview.png');
|
||
transition: all var(--transition-base);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.extra-network-pane .card:hover {
|
||
transform: translateY(-4px);
|
||
box-shadow: var(--shadow-xl), 0 0 0 2px var(--primary-400);
|
||
border-color: var(--primary-500);
|
||
}
|
||
|
||
.extra-network-pane .card .preview {
|
||
position: absolute;
|
||
object-fit: cover;
|
||
width: 100%;
|
||
height: 100%;
|
||
transition: transform var(--transition-slow);
|
||
}
|
||
|
||
.extra-network-pane .card:hover .preview {
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.extra-network-pane .card .actions {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: var(--spacing-md);
|
||
background: linear-gradient(to top, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.7) 70%, transparent);
|
||
backdrop-filter: blur(8px);
|
||
transition: all var(--transition-base);
|
||
}
|
||
|
||
.extra-network-pane .card .actions * {
|
||
color: white;
|
||
}
|
||
|
||
.extra-network-pane .card .actions .name {
|
||
font-size: 1.125rem;
|
||
font-weight: 700;
|
||
line-break: anywhere;
|
||
margin-bottom: var(--spacing-xs);
|
||
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.extra-network-pane .card .actions .description {
|
||
display: block;
|
||
max-height: 3em;
|
||
white-space: pre-wrap;
|
||
line-height: var(--line-height-tight);
|
||
font-size: var(--font-size-sm);
|
||
opacity: 0.9;
|
||
}
|
||
|
||
.extra-network-pane .card .actions:hover .additional {
|
||
display: block;
|
||
}
|
||
|
||
.extra-network-pane .card .button-row {
|
||
position: absolute;
|
||
right: var(--spacing-sm);
|
||
top: var(--spacing-sm);
|
||
z-index: 1;
|
||
display: inline-flex;
|
||
visibility: hidden;
|
||
gap: var(--spacing-xs);
|
||
}
|
||
|
||
.extra-network-pane .card:hover .button-row {
|
||
visibility: visible;
|
||
}
|
||
|
||
.extra-network-pane .card-button {
|
||
width: 2em;
|
||
height: 2em;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
backdrop-filter: blur(8px);
|
||
border-radius: var(--radius-md);
|
||
color: white;
|
||
font-size: 1.25rem;
|
||
transition: all var(--transition-base);
|
||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.extra-network-pane .card-button:hover {
|
||
background: var(--primary-600);
|
||
transform: scale(1.1);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
.extra-network-pane .copy-path-button::before {
|
||
content: "⎘";
|
||
}
|
||
|
||
.extra-network-pane .metadata-button::before {
|
||
content: "🛈";
|
||
}
|
||
|
||
.extra-network-pane .edit-button::before {
|
||
content: "🛠";
|
||
}
|
||
|
||
/* ============================================
|
||
GALLERY STYLES
|
||
============================================ */
|
||
|
||
.block.gradio-gallery {
|
||
background: var(--surface-secondary);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.gradio-gallery .thumbnails img {
|
||
object-fit: scale-down !important;
|
||
border-radius: var(--radius-md);
|
||
transition: transform var(--transition-base);
|
||
}
|
||
|
||
.gradio-gallery .thumbnails img:hover {
|
||
transform: scale(1.05);
|
||
box-shadow: var(--shadow-lg);
|
||
}
|
||
|
||
@media screen and (min-width: 2500px) {
|
||
#txt2img_gallery, #img2img_gallery {
|
||
min-height: 768px;
|
||
}
|
||
}
|
||
|
||
/* ============================================
|
||
TOKEN COUNTER
|
||
============================================ */
|
||
|
||
.block.token-counter {
|
||
position: absolute;
|
||
display: inline-block;
|
||
right: 1em;
|
||
min-width: 0 !important;
|
||
width: auto;
|
||
z-index: 100;
|
||
top: -0.75em;
|
||
}
|
||
|
||
.block.token-counter-visible {
|
||
display: block !important;
|
||
}
|
||
|
||
.block.token-counter span {
|
||
background: var(--surface-primary) !important;
|
||
box-shadow: var(--shadow-md);
|
||
border: 2px solid var(--primary-300) !important;
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-xs) var(--spacing-md);
|
||
font-weight: 600;
|
||
font-size: var(--font-size-sm);
|
||
color: var(--primary-700);
|
||
}
|
||
|
||
.dark .block.token-counter span {
|
||
color: var(--primary-300);
|
||
}
|
||
|
||
.block.token-counter.error span {
|
||
box-shadow: var(--shadow-md);
|
||
border: 2px solid var(--error) !important;
|
||
color: var(--error);
|
||
background: var(--error-light) !important;
|
||
}
|
||
|
||
.dark .block.token-counter.error span {
|
||
background: var(--gray-800) !important;
|
||
color: var(--error-light);
|
||
}
|
||
|
||
/* ============================================
|
||
PROGRESS BAR
|
||
============================================ */
|
||
|
||
.progressDiv {
|
||
position: absolute;
|
||
height: 24px;
|
||
background: var(--gray-200);
|
||
border-radius: var(--radius-lg) !important;
|
||
top: -16px;
|
||
left: 0px;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.dark .progressDiv {
|
||
background: var(--gray-700);
|
||
}
|
||
|
||
.progressDiv .progress {
|
||
width: 0%;
|
||
height: 24px;
|
||
background: linear-gradient(90deg, var(--primary-500), var(--primary-600));
|
||
color: white;
|
||
font-weight: 700;
|
||
line-height: 24px;
|
||
padding: 0 var(--spacing-md);
|
||
text-align: right;
|
||
border-radius: var(--radius-lg);
|
||
overflow: visible;
|
||
white-space: nowrap;
|
||
box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.3);
|
||
transition: width var(--transition-base);
|
||
}
|
||
|
||
.progress-container {
|
||
position: relative;
|
||
}
|
||
|
||
[id$=_results].mobile {
|
||
margin-top: 32px;
|
||
}
|
||
|
||
.livePreview {
|
||
position: absolute;
|
||
z-index: 300;
|
||
background: var(--surface-primary);
|
||
width: 100%;
|
||
height: 100%;
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.livePreview img {
|
||
position: absolute;
|
||
object-fit: contain;
|
||
width: 100%;
|
||
height: calc(100% - 60px);
|
||
}
|
||
|
||
/* ============================================
|
||
GENERATE BUTTONS
|
||
============================================ */
|
||
|
||
#txt2img_generate, #img2img_generate {
|
||
min-height: 4.5em;
|
||
font-size: var(--font-size-lg);
|
||
font-weight: 700;
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-lg);
|
||
background: linear-gradient(135deg, var(--primary-500), var(--primary-600));
|
||
border: none;
|
||
color: white;
|
||
}
|
||
|
||
#txt2img_generate:hover, #img2img_generate:hover {
|
||
background: linear-gradient(135deg, var(--primary-600), var(--primary-700));
|
||
transform: translateY(-2px);
|
||
box-shadow: var(--shadow-xl);
|
||
}
|
||
|
||
.generate-box-compact #txt2img_generate,
|
||
.generate-box-compact #img2img_generate {
|
||
min-height: 3.5em;
|
||
}
|
||
|
||
.generate-box {
|
||
position: relative;
|
||
}
|
||
|
||
.gradio-button.generate-box-skip,
|
||
.gradio-button.generate-box-interrupt,
|
||
.gradio-button.generate-box-interrupting {
|
||
position: absolute;
|
||
width: 50%;
|
||
height: 100%;
|
||
display: none;
|
||
background: var(--error);
|
||
color: white;
|
||
font-weight: 700;
|
||
transition: all var(--transition-base);
|
||
}
|
||
|
||
.gradio-button.generate-box-skip:hover,
|
||
.gradio-button.generate-box-interrupt:hover,
|
||
.gradio-button.generate-box-interrupting:hover {
|
||
background: var(--error-dark);
|
||
}
|
||
|
||
.gradio-button.generate-box-interrupt,
|
||
.gradio-button.generate-box-interrupting {
|
||
left: 0;
|
||
border-radius: var(--radius-xl) 0 0 var(--radius-xl);
|
||
}
|
||
|
||
.gradio-button.generate-box-skip {
|
||
right: 0;
|
||
border-radius: 0 var(--radius-xl) var(--radius-xl) 0;
|
||
}
|
||
|
||
/* ============================================
|
||
SETTINGS TAB
|
||
============================================ */
|
||
|
||
#quicksettings {
|
||
align-items: end;
|
||
gap: var(--spacing-md);
|
||
}
|
||
|
||
#quicksettings > div, #quicksettings > fieldset {
|
||
max-width: 36em;
|
||
width: fit-content;
|
||
flex: 0 1 fit-content;
|
||
padding: 0;
|
||
border: none;
|
||
box-shadow: none;
|
||
background: none;
|
||
}
|
||
|
||
#quicksettings > div.gradio-dropdown {
|
||
min-width: 24em !important;
|
||
}
|
||
|
||
#settings {
|
||
display: block;
|
||
}
|
||
|
||
#settings > div {
|
||
border: none;
|
||
margin-left: 12em;
|
||
padding: 0 var(--spacing-xl);
|
||
}
|
||
|
||
#settings > div.tab-nav {
|
||
float: left;
|
||
display: block;
|
||
margin-left: 0;
|
||
width: 12em;
|
||
background: var(--surface-secondary);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-md);
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
#settings > div.tab-nav button {
|
||
display: block;
|
||
border: none;
|
||
text-align: left;
|
||
white-space: initial;
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border-radius: var(--radius-md);
|
||
margin: var(--spacing-xs) 0;
|
||
transition: all var(--transition-base);
|
||
font-weight: 500;
|
||
}
|
||
|
||
#settings > div.tab-nav button:hover {
|
||
background: var(--surface-tertiary);
|
||
transform: translateX(4px);
|
||
}
|
||
|
||
#settings > div.tab-nav button.selected {
|
||
background: var(--primary-500);
|
||
color: white;
|
||
font-weight: 600;
|
||
}
|
||
|
||
#settings > div.tab-nav .settings-category {
|
||
display: block;
|
||
margin: var(--spacing-lg) 0 var(--spacing-sm) 0;
|
||
font-weight: 700;
|
||
font-size: var(--font-size-sm);
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.05em;
|
||
color: var(--text-secondary);
|
||
cursor: default;
|
||
user-select: none;
|
||
}
|
||
|
||
#settings_result {
|
||
height: 2em;
|
||
margin: 0 var(--spacing-lg);
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border-radius: var(--radius-md);
|
||
background: var(--success-light);
|
||
color: var(--success-dark);
|
||
font-weight: 600;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
/* ============================================
|
||
MODAL & POPUP STYLES
|
||
============================================ */
|
||
|
||
.popup-metadata {
|
||
color: var(--text-primary);
|
||
background: var(--surface-primary);
|
||
display: inline-block;
|
||
padding: var(--spacing-xl);
|
||
white-space: pre-wrap;
|
||
border-radius: var(--radius-xl);
|
||
box-shadow: var(--shadow-2xl);
|
||
}
|
||
|
||
.global-popup {
|
||
display: flex;
|
||
position: fixed;
|
||
z-index: 1001;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
backdrop-filter: blur(4px);
|
||
}
|
||
|
||
.global-popup * {
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.global-popup-close:before {
|
||
content: "×";
|
||
position: fixed;
|
||
right: var(--spacing-lg);
|
||
top: var(--spacing-lg);
|
||
cursor: pointer;
|
||
color: white;
|
||
font-size: 48pt;
|
||
font-weight: 300;
|
||
transition: all var(--transition-base);
|
||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.global-popup-close:before:hover {
|
||
transform: scale(1.1);
|
||
color: var(--error-light);
|
||
}
|
||
|
||
.global-popup-close {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: rgba(0, 0, 0, 0.9);
|
||
}
|
||
|
||
.global-popup-inner {
|
||
display: inline-block;
|
||
margin: auto;
|
||
padding: var(--spacing-2xl);
|
||
z-index: 1001;
|
||
max-height: 90%;
|
||
max-width: 90%;
|
||
}
|
||
|
||
/* ============================================
|
||
LIGHTBOX IMAGE VIEWER
|
||
============================================ */
|
||
|
||
#lightboxModal {
|
||
display: none;
|
||
position: fixed;
|
||
z-index: 1001;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
overflow: auto;
|
||
background-color: rgba(0, 0, 0, 0.95);
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.modalControls {
|
||
display: flex;
|
||
position: absolute;
|
||
right: 0px;
|
||
left: 0px;
|
||
gap: var(--spacing-md);
|
||
padding: var(--spacing-lg);
|
||
background-color: rgba(0, 0, 0, 0);
|
||
z-index: 1;
|
||
transition: background-color var(--transition-base);
|
||
}
|
||
|
||
.modalControls:hover {
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
}
|
||
|
||
.modalClose {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.modalControls span {
|
||
color: white;
|
||
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
|
||
font-size: 32px;
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
width: 1.5em;
|
||
height: 1.5em;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
border-radius: var(--radius-md);
|
||
transition: all var(--transition-base);
|
||
}
|
||
|
||
.modalControls span:hover {
|
||
background: rgba(255, 255, 255, 0.1);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
#lightboxModal > img {
|
||
display: block;
|
||
margin: auto;
|
||
width: auto;
|
||
}
|
||
|
||
#lightboxModal > img.modalImageFullscreen {
|
||
object-fit: contain;
|
||
height: 100%;
|
||
width: 100%;
|
||
min-height: 0;
|
||
}
|
||
|
||
.modalPrev,
|
||
.modalNext {
|
||
cursor: pointer;
|
||
position: absolute;
|
||
top: 50%;
|
||
width: auto;
|
||
padding: var(--spacing-lg);
|
||
margin-top: -50px;
|
||
color: white;
|
||
font-weight: bold;
|
||
font-size: 24px;
|
||
transition: all var(--transition-base);
|
||
border-radius: var(--radius-md);
|
||
user-select: none;
|
||
-webkit-user-select: none;
|
||
background: rgba(0, 0, 0, 0.3);
|
||
}
|
||
|
||
.modalNext {
|
||
right: var(--spacing-lg);
|
||
}
|
||
|
||
.modalPrev {
|
||
left: var(--spacing-lg);
|
||
}
|
||
|
||
.modalPrev:hover,
|
||
.modalNext:hover {
|
||
background: rgba(0, 0, 0, 0.8);
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
/* ============================================
|
||
CONTEXT MENU
|
||
============================================ */
|
||
|
||
#context-menu {
|
||
z-index: 9999;
|
||
position: absolute;
|
||
display: block;
|
||
padding: var(--spacing-xs) 0;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-lg);
|
||
box-shadow: var(--shadow-xl);
|
||
width: 220px;
|
||
background: var(--surface-primary);
|
||
overflow: hidden;
|
||
}
|
||
|
||
.context-menu-items {
|
||
list-style: none;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
.context-menu-items a {
|
||
display: block;
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
cursor: pointer;
|
||
transition: all var(--transition-fast);
|
||
color: var(--text-primary);
|
||
font-weight: 500;
|
||
}
|
||
|
||
.context-menu-items a:hover {
|
||
background: var(--primary-50);
|
||
color: var(--primary-700);
|
||
}
|
||
|
||
.dark .context-menu-items a:hover {
|
||
background: var(--primary-900);
|
||
color: var(--primary-200);
|
||
}
|
||
|
||
/* ============================================
|
||
EXTENSIONS TAB
|
||
============================================ */
|
||
|
||
#tab_extensions table {
|
||
border-collapse: collapse;
|
||
overflow-x: auto;
|
||
display: block;
|
||
border-radius: var(--radius-lg);
|
||
overflow: hidden;
|
||
}
|
||
|
||
#tab_extensions table td, #tab_extensions table th {
|
||
border: 1px solid var(--border-color);
|
||
padding: var(--spacing-md) var(--spacing-lg);
|
||
}
|
||
|
||
#tab_extensions table th {
|
||
background: var(--surface-secondary);
|
||
font-weight: 700;
|
||
text-transform: uppercase;
|
||
font-size: var(--font-size-sm);
|
||
letter-spacing: 0.05em;
|
||
}
|
||
|
||
#tab_extensions table input[type="checkbox"] {
|
||
margin-right: var(--spacing-sm);
|
||
appearance: checkbox;
|
||
}
|
||
|
||
#tab_extensions button {
|
||
max-width: 18em;
|
||
}
|
||
|
||
.extension-tag {
|
||
font-weight: 700;
|
||
font-size: 90%;
|
||
padding: var(--spacing-xs) var(--spacing-sm);
|
||
border-radius: var(--radius-sm);
|
||
background: var(--primary-100);
|
||
color: var(--primary-700);
|
||
}
|
||
|
||
.dark .extension-tag {
|
||
background: var(--primary-900);
|
||
color: var(--primary-200);
|
||
}
|
||
|
||
#extensions tr:hover td,
|
||
#config_state_extensions tr:hover td,
|
||
#available_extensions tr:hover td {
|
||
background: var(--gray-100);
|
||
}
|
||
|
||
.dark #extensions tr:hover td,
|
||
.dark #config_state_extensions tr:hover td,
|
||
.dark #available_extensions tr:hover td {
|
||
background: var(--gray-800);
|
||
}
|
||
|
||
/* ============================================
|
||
FOOTER
|
||
============================================ */
|
||
|
||
footer {
|
||
display: none !important;
|
||
}
|
||
|
||
#footer {
|
||
text-align: center;
|
||
padding: var(--spacing-xl);
|
||
margin-top: var(--spacing-2xl);
|
||
border-top: 1px solid var(--border-color);
|
||
}
|
||
|
||
#footer div {
|
||
display: inline-block;
|
||
}
|
||
|
||
#footer .versions {
|
||
font-size: var(--font-size-sm);
|
||
opacity: 0.7;
|
||
color: var(--text-secondary);
|
||
}
|
||
|
||
/* ============================================
|
||
EXTRA NETWORKS
|
||
============================================ */
|
||
|
||
.extra-networks > div.tab-nav {
|
||
min-height: 3rem;
|
||
gap: var(--spacing-sm);
|
||
background: var(--surface-secondary);
|
||
border-radius: var(--radius-lg);
|
||
padding: var(--spacing-sm);
|
||
}
|
||
|
||
.extra-networks > div.tab-nav button {
|
||
border-radius: var(--radius-md);
|
||
padding: var(--spacing-sm) var(--spacing-lg);
|
||
transition: all var(--transition-base);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.extra-networks > div.tab-nav button:hover {
|
||
background: var(--surface-tertiary);
|
||
}
|
||
|
||
.extra-networks > div.tab-nav button.selected {
|
||
background: var(--primary-500);
|
||
color: white;
|
||
box-shadow: var(--shadow-sm);
|
||
}
|
||
|
||
.extra-network-pane {
|
||
display: flex;
|
||
height: calc(100vh - 24rem);
|
||
resize: vertical;
|
||
min-height: 52rem;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
border-radius: var(--radius-lg);
|
||
}
|
||
|
||
.extra-network-pane .extra-network-cards {
|
||
flex: 3;
|
||
overflow: clip auto !important;
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-lg);
|
||
background: var(--surface-secondary);
|
||
}
|
||
|
||
.extra-network-pane .extra-network-tree {
|
||
flex: 1;
|
||
font-size: var(--font-size-base);
|
||
border: 1px solid var(--border-color);
|
||
overflow: clip auto !important;
|
||
border-radius: var(--radius-lg);
|
||
background: var(--surface-secondary);
|
||
}
|
||
|
||
.extra-network-pane .extra-network-cards::-webkit-scrollbar,
|
||
.extra-network-pane .extra-network-tree::-webkit-scrollbar {
|
||
background-color: transparent;
|
||
width: 12px;
|
||
}
|
||
|
||
.extra-network-pane .extra-network-cards::-webkit-scrollbar-track,
|
||
.extra-network-pane .extra-network-tree::-webkit-scrollbar-track {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.extra-network-pane .extra-network-cards::-webkit-scrollbar-thumb,
|
||
.extra-network-pane .extra-network-tree::-webkit-scrollbar-thumb {
|
||
background-color: var(--gray-400);
|
||
border-radius: 12px;
|
||
border: 3px solid var(--surface-secondary);
|
||
}
|
||
|
||
.extra-network-pane .extra-network-cards::-webkit-scrollbar-thumb:hover,
|
||
.extra-network-pane .extra-network-tree::-webkit-scrollbar-thumb:hover {
|
||
background-color: var(--gray-500);
|
||
}
|
||
|
||
/* ============================================
|
||
TREE VIEW CONTROLS
|
||
============================================ */
|
||
|
||
.extra-network-control {
|
||
position: relative;
|
||
display: flex;
|
||
width: 100%;
|
||
padding: var(--spacing-md);
|
||
margin: 0;
|
||
gap: var(--spacing-sm);
|
||
background: var(--surface-secondary);
|
||
border-radius: var(--radius-lg);
|
||
border: 1px solid var(--border-color);
|
||
}
|
||
|
||
.extra-network-control .extra-network-control--search {
|
||
display: inline-flex;
|
||
position: relative;
|
||
flex: 1;
|
||
}
|
||
|
||
.extra-network-control .extra-network-control--search::before {
|
||
content: "🔎︎";
|
||
position: absolute;
|
||
left: var(--spacing-md);
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
font-size: var(--font-size-base);
|
||
color: var(--text-tertiary);
|
||
pointer-events: none;
|
||
}
|
||
|
||
.extra-network-control .extra-network-control--search-text {
|
||
border: 1px solid var(--border-color);
|
||
border-radius: var(--radius-md);
|
||
color: var(--text-primary);
|
||
background-color: var(--surface-primary);
|
||
width: 100%;
|
||
padding: var(--spacing-sm) var(--spacing-md) var(--spacing-sm) 2.5rem;
|
||
line-height: 1.5;
|
||
transition: all var(--transition-base);
|
||
font-size: var(--font-size-base);
|
||
}
|
||
|
||
.extra-network-control .extra-network-control--search-text:focus {
|
||
border-color: var(--primary-500);
|
||
box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.1);
|
||
outline: none;
|
||
}
|
||
|
||
.extra-network-control .extra-network-control--search-text::placeholder {
|
||
color: var(--text-tertiary);
|
||
}
|
||
|
||
/* Control Icons */
|
||
.extra-network-control--sort,
|
||
.extra-network-control--sort-dir,
|
||
.extra-network-control--tree-view,
|
||
.extra-network-control--refresh {
|
||
padding: var(--spacing-sm);
|
||
display: inline-flex;
|
||
cursor: pointer;
|
||
border-radius: var(--radius-md);
|
||
transition: all var(--transition-base);
|
||
}
|
||
|
||
.extra-network-control--sort:hover,
|
||
.extra-network-control--sort-dir:hover,
|
||
.extra-network-control--tree-view:hover,
|
||
.extra-network-control--refresh:hover {
|
||
background: var(--surface-tertiary);
|
||
}
|
||
|
||
.extra-network-control--sort-icon,
|
||
.extra-network-control--sort-dir-icon,
|
||
.extra-network-control--tree-view-icon,
|
||
.extra-network-control--refresh-icon {
|
||
height: 1.5rem;
|
||
width: 1.5rem;
|
||
mask-repeat: no-repeat;
|
||
mask-position: center center;
|
||
mask-size: 100%;
|
||
background-color: var(--text-secondary);
|
||
transition: background-color var(--transition-base);
|
||
}
|
||
|
||
.extra-network-control--enabled {
|
||
background: var(--primary-100);
|
||
}
|
||
|
||
.dark .extra-network-control--enabled {
|
||
background: var(--primary-900);
|
||
}
|
||
|
||
.extra-network-control--enabled .extra-network-control--icon {
|
||
background-color: var(--primary-600);
|
||
}
|
||
|
||
.dark .extra-network-control--enabled .extra-network-control--icon {
|
||
background-color: var(--primary-400);
|
||
}
|
||
|
||
/* ============================================
|
||
TREE LIST STYLES
|
||
============================================ */
|
||
|
||
.extra-network-tree .tree-list-content {
|
||
padding: var(--spacing-sm) var(--spacing-md);
|
||
border-radius: var(--radius-md);
|
||
transition: all var(--transition-fast);
|
||
margin: var(--spacing-xs) 0;
|
||
}
|
||
|
||
.extra-network-tree .tree-list-content:hover {
|
||
background: var(--gray-100);
|
||
}
|
||
|
||
.dark .extra-network-tree .tree-list-content:hover {
|
||
background: var(--gray-700);
|
||
}
|
||
|
||
.extra-network-tree .tree-list-content[data-selected] {
|
||
background: var(--primary-100);
|
||
font-weight: 600;
|
||
}
|
||
|
||
.dark .extra-network-tree .tree-list-content[data-selected] {
|
||
background: var(--primary-900);
|
||
}
|
||
|
||
.tree-list-item-action-chevron {
|
||
display: inline-flex;
|
||
padding: 0.3rem;
|
||
box-shadow: 0.1rem 0.1rem 0 0 var(--text-secondary) inset;
|
||
transform: rotate(135deg);
|
||
transition: transform var(--transition-base);
|
||
}
|
||
|
||
.extra-network-tree .tree-list-content-dir[data-expanded] .tree-list-item-action-chevron {
|
||
transform: rotate(225deg);
|
||
}
|
||
|
||
/* ============================================
|
||
STICKY COLUMNS & RESIZE HANDLES
|
||
============================================ */
|
||
|
||
#img2img_results, #txt2img_results, #extras_results {
|
||
position: sticky;
|
||
top: var(--spacing-md);
|
||
}
|
||
|
||
body.resizing {
|
||
cursor: col-resize !important;
|
||
}
|
||
|
||
body.resizing * {
|
||
pointer-events: none !important;
|
||
}
|
||
|
||
.resize-handle {
|
||
position: relative;
|
||
cursor: col-resize;
|
||
grid-column: 2 / 3;
|
||
min-width: 16px !important;
|
||
max-width: 16px !important;
|
||
height: 100%;
|
||
transition: opacity var(--transition-base);
|
||
}
|
||
|
||
.resize-handle::after {
|
||
content: '';
|
||
position: absolute;
|
||
top: 0;
|
||
bottom: 0;
|
||
left: 7.5px;
|
||
border-left: 2px dashed var(--border-color);
|
||
transition: border-color var(--transition-base);
|
||
}
|
||
|
||
.resize-handle:hover::after {
|
||
border-color: var(--primary-500);
|
||
border-style: solid;
|
||
}
|
||
|
||
/* ============================================
|
||
UTILITY CLASSES
|
||
============================================ */
|
||
|
||
.inactive {
|
||
opacity: 0.5;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.unequal-height {
|
||
align-content: flex-start;
|
||
}
|
||
|
||
div.gradio-group, div.styler {
|
||
border-width: 0 !important;
|
||
background: none;
|
||
}
|
||
|
||
.gradio-container .prose a, .gradio-container .prose a:visited {
|
||
color: var(--primary-600);
|
||
text-decoration: none;
|
||
transition: color var(--transition-base);
|
||
}
|
||
|
||
.dark .gradio-container .prose a, .dark .gradio-container .prose a:visited {
|
||
color: var(--primary-400);
|
||
}
|
||
|
||
.gradio-container .prose a:hover {
|
||
color: var(--primary-700);
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.dark .gradio-container .prose a:hover {
|
||
color: var(--primary-300);
|
||
}
|
||
|
||
a {
|
||
font-weight: 600;
|
||
cursor: pointer;
|
||
color: var(--primary-600);
|
||
transition: color var(--transition-base);
|
||
}
|
||
|
||
.dark a {
|
||
color: var(--primary-400);
|
||
}
|
||
|
||
a:hover {
|
||
color: var(--primary-700);
|
||
}
|
||
|
||
.dark a:hover {
|
||
color: var(--primary-300);
|
||
}
|
||
|
||
.gradio-html div.wrap {
|
||
height: 100%;
|
||
}
|
||
|
||
div.gradio-html.min {
|
||
min-height: 0;
|
||
}
|
||
|
||
/* Hide gradio crop tool */
|
||
div.gradio-image button[aria-label="Edit"] {
|
||
display: none;
|
||
}
|
||
|
||
/* Overflow fixes */
|
||
div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdown {
|
||
overflow: visible !important;
|
||
}
|
||
|
||
/* ============================================
|
||
ANIMATION KEYFRAMES
|
||
============================================ */
|
||
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(-10px);
|
||
}
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
@keyframes slideIn {
|
||
from {
|
||
transform: translateX(-20px);
|
||
opacity: 0;
|
||
}
|
||
to {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.7;
|
||
}
|
||
}
|
||
|
||
/* Apply fade-in animation to cards */
|
||
.extra-network-pane .card {
|
||
animation: fadeIn var(--transition-base) ease-out;
|
||
}
|
||
|
||
/* ============================================
|
||
RESPONSIVE DESIGN
|
||
============================================ */
|
||
|
||
@media (max-width: 768px) {
|
||
:root {
|
||
--spacing-md: 0.75rem;
|
||
--spacing-lg: 1rem;
|
||
--spacing-xl: 1.5rem;
|
||
}
|
||
|
||
#settings > div {
|
||
margin-left: 0;
|
||
}
|
||
|
||
#settings > div.tab-nav {
|
||
float: none;
|
||
width: 100%;
|
||
margin-bottom: var(--spacing-lg);
|
||
}
|
||
|
||
.extra-network-pane .card {
|
||
width: 14rem;
|
||
height: 21rem;
|
||
margin: var(--spacing-sm);
|
||
}
|
||
}
|
||
|
||
/* ============================================
|
||
PERFORMANCE OPTIMIZATIONS
|
||
============================================ */
|
||
|
||
.gradio-button,
|
||
.extra-network-pane .card,
|
||
.tree-list-content {
|
||
will-change: transform;
|
||
}
|
||
|
||
/* Reduce motion for users who prefer it */
|
||
@media (prefers-reduced-motion: reduce) {
|
||
* {
|
||
animation-duration: 0.01ms !important;
|
||
animation-iteration-count: 1 !important;
|
||
transition-duration: 0.01ms !important;
|
||
}
|
||
}
|