diff --git a/.gitignore b/.gitignore index e81ad31f..7c57c2fd 100644 --- a/.gitignore +++ b/.gitignore @@ -42,3 +42,5 @@ notification.mp3 /cache trace.json /sysinfo-????-??-??-??-??.json +/extensions-builtin/sd-webui-ux/.git +/sd_models.db diff --git a/extensions-builtin/sd-webui-ux/.gitignore b/extensions-builtin/sd-webui-ux/.gitignore index 5c325f32..57199f49 100644 --- a/extensions-builtin/sd-webui-ux/.gitignore +++ b/extensions-builtin/sd-webui-ux/.gitignore @@ -1,4 +1,7 @@ __pycache__ package-lock.json +sd_webui_ux.db node_modules -temp \ No newline at end of file +temp +**/thumbnails/ +user \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/README.md b/extensions-builtin/sd-webui-ux/README.md index d077e041..10a346e9 100644 --- a/extensions-builtin/sd-webui-ux/README.md +++ b/extensions-builtin/sd-webui-ux/README.md @@ -1,25 +1,22 @@ # SD Web UI UX -A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, utilizing the powerful [Gradio](https://www.gradio.app/) library. This cutting-edge browser interface offers an unparalleled level of customization and optimization for users, setting it apart from other web interfaces. +A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, engineered for unmatched user experience and performance. -This extension is compatible with both backends: [Stable Diffusion web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) and [Stable Diffusion web UI Forge](https://github.com/lllyasviel/stable-diffusion-webui-forge). +Compatible with both [Stable Diffusion web UI](https://github.com/AUTOMATIC1111/stable-diffusion-webui) and [Stable Diffusion web UI Forge](https://github.com/lllyasviel/stable-diffusion-webui-forge) backends. -Please note that while this extension focuses solely on frontend optimizations, [Stable Diffusion web UI UX](https://github.com/anapnoe/stable-diffusion-webui-ux), along with its variant [Stable Diffusion web UI UX Forge](https://github.com/anapnoe/stable-diffusion-webui-ux-forge), incorporates backend optimizations for an even better and faster user experience. Together, these changes ensure a more effective and enjoyable interaction with the application. +*This extension performs frontend optimizations **post-DOM load** (modifying elements after they're created), meaning developer tools may show initial resource allocation before optimizations apply. In contrast [Stable Diffusion web UI UX](https://github.com/anapnoe/stable-diffusion-webui-ux) & [Stable Diffusion web UI UX Forge](https://github.com/anapnoe/stable-diffusion-webui-ux-forge) implement **upstream backend optimizations** that prevent unnecessary element creation entirely, enabling faster performance from initialization.* -[🌟 Your Support Makes a Difference! 🌟](https://buymeacoffee.com/dayanbayah) +[💖 Your Support Makes a Difference! 💖](https://buymeacoffee.com/dayanbayah) - - -## Optimizations -- **Redundant Checkpoints & Extra Networks**: Removing redundant Checkpoints and "Extra Networks" (Textual Inversion, Lora, and Hypernetworks) from img2img to reduce duplicated images and event listeners. -- **Inline Event Listeners**: Eradicating inline event listeners from "Extra Networks" cards and action buttons. -- **Event Delegation Pattern**: Applying an event delegation pattern to further streamline the code by consolidating event handling for "Extra Networks" cards and action buttons. -- **Optimized Stylesheets**: Enhanced visual coherence by substituting all default Gradio stylesheets in the DOM with an optimized version. -- **Inline Styles & Svelte Classes**: Improved efficiency by eliminating unnecessary inline styles and Svelte classes. + ## Features Overview - **Mobile Responsive Design**: Optimal display and usability across various devices. - **Versatile Micro-Template Engine**: Leverage for enhanced functionality through other extensions. - **Customizable Theme Styles**: User-friendly interface for theme customization. +- **Styles Manager**: Versatile database-driven styles management. +- **Image Browser**: High-performance database-powered image navigation. +- **Civitai Images**: Ultra-fast virtualized browser for Civitai images. +- **Civitai Models**: Ultra-fast virtualized browser for Civitai models. - **Built-in Console Log**: Debugging capabilities for developers. - **Production and Development Modes**: Dynamically compile the web UI UX using Vite directly from the interface. - **Ignore Overrides Option**: Flexibility to maintain original settings when necessary. @@ -27,12 +24,68 @@ Please note that while this extension focuses solely on frontend optimizations, - **Toggle Input Modes**: Switch between slider and numeric input modes for a compact interface. - **Compatible with Gradio 3 and 4**: Works seamlessly with both Gradio 3 and Gradio 4 frameworks. -## Seamless UI Integration with Extensions +### Seamless UI Integration with Extensions - **Infinite Image Browsing Extension** - **Deforum Extension** - **Prompt-All-In-One Extension** - **Aspect-Ratio-Helper Extension** +## Optimizations +- **Redundant Checkpoints & Extra Networks**: Removed redundant Checkpoints and Extra Networks (Textual Inversion, LoRA, Hypernetworks) from txt2img/img2img tabs. → Implemented single-instance infinite scroll to progressively load optimized assets + metadata from SQLite DB. +- **Inline Event Listeners**: Eradicating inline event listeners from "Extra Networks" cards and action buttons. +- **Event Delegation Pattern**: Applying an event delegation pattern to further streamline the code by consolidating event handling for "Extra Networks" cards and action buttons. +- **Optimized Stylesheets**: Enhanced visual coherence by substituting all default Gradio stylesheets in the DOM with an optimized version. +- **Inline Styles & Svelte Classes**: Improved efficiency by eliminating unnecessary inline styles and Svelte classes. +- **Database-Powered**: SQLite implementation enables rapid indexing/searching across: Extra Networks, Image Browser and Styles Manager. +- **Virtualized Grid**: Dynamic virtualized grid with memory/DOM efficiency for: Checkpoints, Textual Inversions, LoRA, Hypernetworks, Image Browser, Styles Manager, Civitai Images & Models. + +### Performance Comparison: UI vs UX +| Core Metrics | SD web UI | SD web UI UX | Δ (%) | Key Improvements | +|-----------------|-----------:|-------------:|-----------:|:-----------------| +| **JS Heap** | 96,945,380 | 55,048,600 | **-43.2%** | **Memory Efficiency**: 43% ↓ JS heap memory | +| **Documents** | 109 | 134 | **+22.9%** | **Resource Management**: Optimized overhead | +| **Nodes** | 53,895 | 41,542 | **-22.9%** | **DOM Efficiency**: 23% ↓ nodes despite 23% ↑ documents | +| **Listeners** | 8,195 | 4,178 | **-49.0%** | **Event Handling**: 49% ↓ listeners | + +| **Visual Comparison** | | +|---|---| +|  |  | +| *Automatic1111 - Stable Diffusion web UI* | *Anapnoe - Stable Diffusion web UI UX* | + +### Performance Comparison: Forge vs UX Forge +| Core Metrics | SD web UI Forge | SD web UI UX Forge | Δ (%) | Key Improvements | +|-----------------|-----------------:|-------------------:|------------:|:-----------------| +| **JS Heap** | 56,121,196 | 45,049,884 | **-19.7%** | **Memory Efficiency**: 19% ↓ JS heap memory | +| **Documents** | 21 | 111 | **+428.6%** | **Resource Management**: Optimized overhead | +| **Nodes** | 46,943 | 43,651 | **-7.0%** | **DOM Efficiency**: 7% ↓ nodes despite 428% ↑ documents | +| **Listeners** | 10,562 | 7,495 | **-29.0%** | **Event Handling**: 29% ↓ listeners | + +| **Visual Comparison** | | +|---|---| +|  |  | +| *lllyasviel - Stable Diffusion web UI Forge* | *Anapnoe - Stable Diffusion web UI UX Forge* | + +⚠️ *Baseline metrics reflect measurements with **all additional webui extensions disabled** - particularly relevant for SD Forge's extensive collection - to ensure balanced comparisons; enabling these extensions raises event listeners beyond 16,000 and introduces significant test-run performance variability.* + + +### 🚀 Scalable Event Handling & DOM Optimization +SD webUI UX implements **event delegation** + **virtualized grid** for O(1) performance scaling. + +**Stable Diffusion web UI & web UI Forge Constraints**: +- **DOM Bloat**: Loads all assets → 10k LoRAs create 60k+ DOM nodes (10k images + 50k+ container elements) +- **Listener Overload**: ~5 listeners per asset → 50k+ listeners for 10K LoRAs +- **O(n) Scaling**: Linear performance degradation ***(Checkpoints, Textual Inversions, LoRAs, Hypernetworks)*** + +**Stable Diffusion web UI UX & web UI UX Forge optimized Architecture**: +- **Virtualized Grid**: Renders only visible assets (~15 items in default viewport) +- **Event Delegation**: Single listener handles all interactions +- **DOM Recycling**: Dynamic pool manages thumbnail elements + +🎯 **Performance Outcome**: +- Flat memory profile (≈50MB heap regardless of model assets library size) +- O(1) event handling complexity +- Instant scrolling with 100K+ assets + ## Installation - **Open the Extensions tab in SD-webui.** - **Select the Install from URL option.** @@ -41,25 +94,28 @@ Please note that while this extension focuses solely on frontend optimizations, - **Wait for the installation to complete and click on Apply and restart UI.** ## Todo -- Separate and organize CSS into individual files (in progress). -- Create documentation for developers on how to incorporate their components into various areas of the UI/UX. -- Implement fullscreen gallery functionality. -- Fork the Gradio project and contribute to enhancing their components. +- [ ] Separate and organize CSS into individual files (in progress). +- [ ] Create documentation for component integration into UI/UX. +- [ ] Automatically update the Image Browser's SQLite database when files added or removed. +- [ ] Improve Civitai Models download manager. +- [ ] Add virtualization for **Tree View** component. +- [ ] Develop framework-specific npm packages for the UI/UX Dynamic Virtualized Grid component, supporting React, Vue, Svelte, Solid, and Qwik. - -## Advanced Theme Style Configurator (in progress)(upcoming feature) -A sophisticated theme editor allowing you to personalize any aspect of the UI-UX. Tailor the visual experience of the user interface with the Advanced Theme Style configurator. - -[🌟 Get early access to Advanced Theme Style Configurator! 🌟](https://buymeacoffee.com/dayanbayah) - - - - -## Workspaces UI-UX (in progress)(upcoming extension) +## Workspaces UI-UX (in progress)(early access) The workspaces extension empowers you to create customized views and organize them according to your unique preferences. With an intuitive drag-and-drop interface, you can design workflows that are perfectly tailored to your specific requirements, giving you ultimate control over your work environment. [🌟 Get early access to Workspaces! 🌟](https://buymeacoffee.com/dayanbayah) - + + +## Advanced Theme Style Configurator (in progress)(upcoming) +A sophisticated theme editor allowing you to personalize any aspect of the UI-UX. Tailor the visual experience of the user interface with the Advanced Theme Style configurator. + +[🌟 Get early access to Advanced Theme Style Configurator! 🌟](https://buymeacoffee.com/dayanbayah) + + + + + diff --git a/extensions-builtin/sd-webui-ux/assets/css/style-gradio-4.css b/extensions-builtin/sd-webui-ux/assets/css/style-gradio-4.css index 1a637ce8..ec2d72f8 100644 --- a/extensions-builtin/sd-webui-ux/assets/css/style-gradio-4.css +++ b/extensions-builtin/sd-webui-ux/assets/css/style-gradio-4.css @@ -52,6 +52,7 @@ --ae-uiux_exnet_header_size: 14; --ae-uiux_exnet_image_tint: 0; --ae-uiux_min_wrap_size: 140; + --ae-uiux_exnet_aspect_ratio: calc(var(--ae-uiux_exnet_aspect_ratio_x) / var(--ae-uiux_exnet_aspect_ratio_y)); } body { @@ -342,6 +343,7 @@ body { padding: var(--ae-input-padding); margin: 0; min-height: var(--ae-input-height); + } .range-line, @@ -353,6 +355,13 @@ body { order: -1; } +* select, +* input:not([type="range"]), +* textarea { + padding-left: calc(var(--ae-input-padding) + (var(--ae-border-radius) * 0.25)) !important; + padding-right: calc(var(--ae-input-padding) + (var(--ae-border-radius) * 0.25)) !important; +} + /* * .no-slider-layout .min-width, * .no-slider-layout .flexbox, * .no-slider-layout .gradio-slider{ @@ -869,6 +878,8 @@ label>span+div, flex-direction: column; height: auto; white-space: normal; + padding-left: calc(var(--ae-border-radius) * 0.5); + padding-right: calc(var(--ae-border-radius) * 0.5); } .gradio-video .controls .inner { @@ -1438,8 +1449,10 @@ li.item span { .mask-icon { display: inline-block; background: var(--ae-input-text-color); + /* border: var(--ae-input-border-size) solid var(--ae-input-border-color); border-radius: var(--ae-border-radius); + */ line-height: var(--ae-input-line-height); font-size: var(--ae-input-font-size); padding: var(--ae-input-padding); @@ -1776,24 +1789,46 @@ div#layout-3 { z-index: 1; } + +.sponsors_grid, #contributors_grid { gap: 5px; align-items: flex-start; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); - white-space: nowrap; - overflow: auto; - margin: var(--ae-panel-padding); + /*white-space: nowrap;*/ padding-right: var(--ae-panel-padding); } - +.sponsors_grid.current { + grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); +} +#contributors_grid{ + overflow: auto; +} +.sponsors_grid a, #contributors_grid a { align-items: center; padding: 10px; + position: relative; + flex-flow: wrap !important; + flex-direction: column !important; + height: 100%; } +.sponsors_grid figure, #contributors_grid figure { margin: 0; + width: 60px; + height: 60px; + border-radius: 50%; + background-size: cover; + background-position: center; + background-color: var(--ae-panel-bg-color); +} + +.sponsors_grid.current figure{ + width: 120px; + height: 120px;; } #contributors_grid img { @@ -1801,6 +1836,34 @@ div#layout-3 { border-radius: 50%; } +.sponsors-coffee +{ + position: absolute; + top: 0; + right: 0; + width: 25px; + line-height: 25px; + background-color: var(--ae-panel-bg-color); + display: flex; + justify-content: center; + margin: 5px; + border-radius: 50%; + color: var(--ae-label-color); +} +.sponsors-coffee::before{ + content: 'x'; +} + +#contributors_tabitem_parent .lrp-32, +#sponsors_tabitem_parent .lrp-32 +{ + max-width: unset; +} + +.sponsors_grid a { + pointer-events: none; +} + #flexbox-9 { justify-content: flex-end; } @@ -2421,8 +2484,8 @@ button.gridjs-sort-neutral { } -#template-settings .split-container:first-child, -.layout-extra-networks .split-container:first-child { +#split-settings-left, +.split-container.exnet-left { min-width: 135px; } @@ -2669,11 +2732,10 @@ span.star_count b { } #popup_close { - position: absolute; - right: calc(var(--ae-panel-padding) * 2); - bottom: calc(var(--ae-panel-padding) * 3); - height: 24px; - padding-right: calc(var(--ae-panel-padding) * 3); + width: 120px; + order: -1; + margin: auto; + margin-right: 0; } @@ -2818,6 +2880,7 @@ div[data-testid="image"] canvas { .group-row>* button, .group-row>* { border-radius: 0 !important; + min-width: fit-content; } .group-row>*:last-child button, @@ -3967,4 +4030,55 @@ select, .about-image-container:hover .about-image-fade:last-child { opacity: 1; +} + +.flex-width { + width: 0%; + flex-grow: 1; + flex-shrink: 1; + min-width: min(calc(var(--ae-uiux_min_wrap_size)* 1px), 100%); +} + +.no-top-padding { + padding-top: 0; +} + +.no-bottom-padding { + padding-bottom: 0; +} + + +table.non-editable-table { + display: block; + text-align: left; +} + +table.non-editable-table td { + line-break: anywhere; + text-wrap: wrap; + min-width: 100px; + vertical-align: top; +} + +.non-editable-div img.thumbnail-image { + max-height: 180px; + width: 100%; + height: auto; + object-fit: contain; + min-width: 120px; + display: block; +} + +.non-editable-info { + justify-content: space-between !important; +} +/* +.ae-button .portal button { + pointer-events: none; +} +*/ +.no-slider-layout .min-width, +.no-slider-layout .flexbox:not(.unset-min-width, .flex-start, .shrink), +.no-slider-layout .block { + min-width: min(100px, 100%) !important; } \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/css/style.css b/extensions-builtin/sd-webui-ux/assets/css/style.css new file mode 100644 index 00000000..0023fcaf --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/css/style.css @@ -0,0 +1,3741 @@ +* { + box-sizing: border-box; + transition-property: color, opacity, background-color, border-color; + transition-duration: 0.2s; + transition-timing-function: ease-out; +} + +:root { + --ae-primary-color: #1485d8; + --ae-secondary-color: #d81485; + --ae-main-bg-color: rgb(32 32 32); + + --ae-input-height: 35px; + --ae-input-slider-height: 0.6; + --ae-input-icon-height: calc(var(--ae-input-height) - var(--ae-input-border-size) * 2); + --ae-input-padding: 5px; + --ae-input-font-size: 14px; + --ae-input-line-height: 14px; + --ae-label-color: rgba(255, 255, 255, 0.75); + --ae-secondary-label-color: rgba(255, 255, 255, 0.5); + --ae-input-border-size: 2px; + --ae-input-border-radius: 0px; + + --ae-input-text-color: rgba(255, 255, 255, 0.75); + --ae-input-placeholder-color: rgba(255, 255, 255, 0.35); + --ae-input-bg-color: rgba(0, 0, 0, 0.25); + --ae-input-border-color: rgba(0, 0, 0, 0.1); + + --ae-input-hover-text-color: rgba(255, 255, 255, 0.75); + + --ae-panel-bg-color: rgba(64, 64, 64, 0.5); + --ae-panel-border-color: rgba(64, 64, 64, 0.75); + --ae-panel-padding: 5px; + --ae-border-radius: 5px; + --ae-border-size: 2px; + --ae-gap-size-val: 5px; + + --ae-gap-size: max(var(--ae-gap-size-val), var(--ae-border-size)); + --ae-border-size-neg: calc(var(--ae-border-size) * -1); + --ae-border-size-x2: calc((var(--ae-border-size) * 2) + 0px); + + --ae-group-bg-color: rgba(0, 0, 0, 0.25); + --ae-group-padding: 2px; + --ae-group-radius: 7px; + --ae-group-border-size: 2px; + --ae-group-border-color: rgba(0, 0, 0, 0.25); + --ae-group-gap: 6px; + + --ae-uiux_exnet_aspect_ratio_x: 3; + --ae-uiux_exnet_aspect_ratio_y: 4; + --ae-uiux_exnet_fit_size: 160; + --ae-uiux_min_wrap_size: 140; + +} + +body { + margin: 0; + color: var(--ae-label-color); + font-size: var(--ae-input-font-size); + /* line-height: 16px; */ + background-color: var(--ae-main-bg-color); + font-family: "IBM Plex Mono", monospace; +} + +.portal, +* .panel { + background-color: var(--ae-panel-bg-color); + padding: var(--ae-panel-padding); + border-radius: var(--ae-border-radius); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + flex-direction: column; + display: flex; + flex: 1 1 0%; + justify-content: space-between; + height: auto; +} + +* .panel { + flex-direction: inherit; + justify-content: flex-start !important; +} + +* .no-panel .portal { + background-color: transparent; +} + +.flexbox { + display: flex; + justify-content: flex-start; + align-items: stretch; + flex-wrap: wrap; + padding: 0; + margin: 0; + flex: 1 1 0%; + gap: 5px; + min-width: min(calc(var(--ae-uiux_min_wrap_size)*1px), 100%); + flex-grow: 1; +} + +.flexbox.row { + flex-direction: row; +} + +.flexbox.col { + flex-direction: column; + flex-wrap: nowrap; + justify-content: center; +} + +.flexbox.group { + background-color: var(--ae-group-bg-color); + padding: var(--ae-group-padding); + ; + border-radius: var(--ae-group-radius); + outline: var(--ae-group-border-size) solid var(--ae-group-border-color); + gap: var(--ae-group-gap); +} + +.sub-group { + background-color: transparent !important; + outline: none !important; + padding: 0 !important; +} + +.inset { + padding: 2px !important; + margin: -2px; +} + +.flexbox.group .flexbox:not(.no-border) { + gap: var(--ae-group-gap); +} + +.grow-all div:not(.shrink) { + flex-grow: 1 !important; +} + +.unset-min-width { + flex-grow: 0; + min-width: unset; +} + +.row { + gap: var(--ae-gap-size); + flex-direction: row; +} + +.col { + gap: var(--ae-gap-size); + flex-direction: column; +} + +.no-border { + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + border-radius: var(--ae-border-radius); + background-color: var(--ae-panel-bg-color); + /* gap: 0; */ + min-width: unset; + padding: var(--ae-panel-padding); +} + +.shrink { + min-width: unset; + flex-wrap: nowrap; + white-space: nowrap; + flex-grow: 0; +} + +.no-wrap { + flex-wrap: nowrap; +} + +.fb-60 { + flex-basis: 20%; + min-width: min(calc(var(--ae-uiux_min_wrap_size) * 1px + 30px), 100%); +} + +.fb-60G { + flex-basis: 67%; +} + +.fb-40 { + flex-basis: 5%; +} + +.fb-40G { + flex-basis: 30%; +} + +.min-width { + min-width: min(calc(var(--ae-uiux_min_wrap_size) * 1px + 30px), 100%); +} + +*.gradio-button.tool { + padding: 0; + align-self: flex-end; +} + +.fb-50 { + flex-basis: 49%; +} + +.flexbox.no-border.shrink { + color: black; +} + +.no-border>* { + align-self: flex-end; + background-color: transparent; + outline: none; + flex-basis: 0%; + flex-grow: 1; + padding: 0; +} + +.invisible *.gradio-button.tool { + font-size: 0; + line-height: 0; + background-color: var(--ae-input-bg-color); +} + +.invisible *.gradio-button.tool:hover { + background-color: var(--ae-primary-color); +} + +.invisible *.gradio-button.tool:hover .mask-icon { + background-color: var(--ae-input-hover-text-color); +} + +*.tab-nav button:hover, +*.tab-nav button.selected, +*.gradio-button:hover { + color: var(--ae-input-hover-text-color); +} + +.portal.no-border { + flex-basis: 0%; +} + +.portal.gap { + gap: var(--ae-gap-size); +} + +.portal.gap>* { + gap: var(--ae-gap-size); + display: flex; + flex-direction: column; +} + +.portal.gap>div>* { + gap: var(--ae-gap-size); + display: flex; + flex-direction: row; +} + +.portal.no-min-width { + min-width: unset; + width: 0%; + height: 100%; +} + +* select, +* input, +* textarea, +* button { + background: var(--ae-input-bg-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + vertical-align: middle; + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + color: var(--ae-input-text-color); + margin: 0; + min-height: var(--ae-input-height); +} + +*.gradio-textbox label { + flex-direction: column; + display: flex; +} + +*.gradio-slider label { + flex-direction: column; + display: flex; +} + +* label>span { + border: var(--ae-input-border-size) solid transparent; + margin-bottom: 5px; + vertical-align: middle; + margin-top: 0; + color: var(--ae-label-color); + font-family: inherit; + line-height: calc(var(--ae-input-line-height)); + font-size: var(--ae-input-font-size); + user-select: none; +} + +*.gradio-slider .head { + margin-bottom: 0; + display: grid; + grid-template-columns: auto 70px; +} + +*.gradio-slider input[type="range"] { + height: calc(var(--ae-input-height) * var(--ae-input-slider-height)); + width: 100%; + min-height: calc(var(--ae-input-height) * var(--ae-input-slider-height)); + margin-bottom: calc(var(--ae-input-height) * (1 - var(--ae-input-slider-height)) * 0.5); + margin-top: calc(var(--ae-input-height) * (1 - var(--ae-input-slider-height)) * 0.5); + padding: 0; +} + +* .no-slider-layout .gradio-slider input[type="range"] { + display: none; +} + +* .no-slider-layout .gradio-slider .head { + flex-direction: column; + display: flex; +} + +* .no-slider-layout .gradio-slider input[type="number"] { + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + margin: 0; + min-height: var(--ae-input-height); +} + +/* * .no-slider-layout .min-width, +* .no-slider-layout .flexbox, +* .no-slider-layout .gradio-slider{ + min-width: unset !important; +} */ + + +*.gradio-dropdown label { + flex-direction: column; + display: flex; + justify-content: space-between; + height: 100%; +} + +* button { + min-width: var(--ae-input-height); + min-height: var(--ae-input-height); +} + +*.gradio-slider input[type="number"] { + line-height: 16px; + /* font-size: 14px; */ + min-height: 22px; + max-height: 22px; + margin-top: 0px; + width: auto; + font-family: inherit; + padding: 0 5px; +} + +*.no-border>*:not(:first-child) { + padding-left: 0; +} + +*.wrap-inner { + display: flex; + position: relative; + flex-wrap: wrap; + align-items: center; + gap: var(--ae-gap-size); +} + +*.gradio-dropdown div.wrap, +* input, +* textarea, +* button { + background: var(--ae-input-bg-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + vertical-align: middle; + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + color: var(--ae-input-text-color); + margin: 0; + min-height: var(--ae-input-height); +} + +*.shrink { + min-width: unset; + flex-wrap: nowrap; + white-space: nowrap; + flex-grow: 0; +} + +*.hidden { + display: none; +} + +*.gradio-accordion .label-wrap { + min-height: var(--ae-input-height); + align-items: center; + display: flex; + justify-content: space-between; + cursor: pointer; + width: 100%; + margin: 0; + padding: var(--ae-panel-padding) calc(var(--ae-panel-padding) + 4px); + border-radius: var(--ae-border-radius); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + background-color: var(--ae-input-bg-color); + color: var(--ae-primary-color); + white-space: nowrap; +} + +*.gradio-accordion .label-wrap.open { + margin-bottom: calc(var(--ae-panel-padding) - var(--ae-border-size)); + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + + /* background-color: var(--ae-panel-bg-color); + outline-color: var(--ae-primary-color); */ +} + +.gradio-accordion:has(> .open) { + /* outline: var(--ae-border-size) solid var(--ae-primary-color) !important; */ + background-color: var(--ae-input-bg-color); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + border-radius: var(--ae-border-radius); + position: relative; + outline-offset: 0px; +} + +.gradio-accordion>div>.gap { + padding: var(--ae-panel-padding); +} + +*.flexbox.align-flex-end { + justify-content: flex-end; +} + +* input[type="checkbox"] { + min-height: var(--ae-input-line-height); +} + +* input[type="radio"] { + min-height: var(--ae-input-line-height); +} + +*.no-bg { + background-color: transparent; + outline: none; +} + +*.gradio-checkboxgroup label, +*.gradio-radio label { + display: flex; + align-items: center; + transition: none; + cursor: pointer; + box-shadow: none; + gap: 1px; + flex: 0 1 0%; + background: var(--ae-input-bg-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + vertical-align: middle; + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + color: var(--ae-input-text-color); + margin: 0; + min-height: var(--ae-input-height); +} + +*.gradio-checkboxgroup span, +*.gradio-radio label span { + margin: 0; + white-space: nowrap; + border: 0; +} + +*.gradio-checkboxgroup .wrap, +*.gradio-radio .wrap { + gap: 5px; + display: flex; + flex-wrap: wrap; +} + +*.gradio-checkboxgroup>span, +*.gradio-radio>span { + border: var(--ae-input-border-size) solid transparent; + margin-bottom: 5px; + vertical-align: middle; + margin-top: 0; + color: var(--ae-label-color); + font-family: inherit; + line-height: var(--ae-input-font-size); + font-size: var(--ae-input-font-size); +} + +* textarea::placeholder { + color: var(--ae-input-placeholder-color); + opacity: 1; +} + +*.gradio-gallery .icon { + opacity: 0.5; + height: var(--ae-input-icon-height); + color: var(--ae-input-text-color); +} + +*.gradio-html p { + margin: 0; + font-size: 13px; + line-height: 16px; + color: var(--ae-label-color); + overflow-wrap: anywhere; +} + +*.gradio-image .image-container { + width: 100%; + height: 100%; +} + +/* *[class*="gradio"] .center { + display: flex; + justify-content: center; + align-items: center; + text-align: center; + cursor: pointer; + width: 100%; + height: 100%; + background: var(--ae-input-bg-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + min-height: 25vh; + position: relative; +} */ + +/* * [data-testid="image"] img { + max-height: 40vh; +} */ + +*.block { + border: 0 !important; + padding: 0; + margin: 0; + display: flex; + flex-direction: column; + justify-content: space-between; + height: auto; + flex: 1 1 0%; + min-width: min(calc(var(--ae-uiux_min_wrap_size)*1px), 100%); +} + +[data-testid="block-label"], +div.float { + position: absolute; + display: inline-flex; + align-items: center; + z-index: 20; + background: var(--ae-input-bg-color); + padding: 3px; + pointer-events: none; + font-weight: normal; + font-size: 10px; + line-height: 10px; + width: fit-content; + border-radius: var(--ae-border-radius); + border-bottom-left-radius: 0; + border-top-right-radius: 0; + border: var(--ae-input-border-size) solid var(--ae-input-border-color); +} + +[data-testid="block-label"] span, +div.float span { + opacity: 0.8; + margin-right: 3px; + width: 11px; + height: 11px; +} + +[data-testid="block-label"] { + position: relative; +} + +.gradio-highlightedtext span { + padding: 0; +} + +.gradio-highlightedtext .textfield span { + padding: 2px; + border-radius: 5px; +} + +.gradio-highlightedtext span.textspan span { + color: #000; + border-radius: 5px; + min-width: 16px; + display: inline-block; + text-align: center; +} + +.gradio-highlightedtext .textfield { + display: flex; + gap: 5px; + padding: 5px; + background-color: var(--ae-input-bg-color); + border-radius: var(--ae-border-radius); + margin-top: 5px; + flex-wrap: wrap; +} + +[id$="edit_user_metadata"] { + gap: var(--ae-gap-size); + text-align: left; +} + +[id$="edit_user_metadata"] .gradio-column.gap { + flex-grow: 1; + justify-content: flex-end; + width: auto; +} + +[id$="edit_user_metadata"] .gradio-column.gap:first-child { + flex-grow: 100; +} + +[id$="edit_user_metadata"] .extra-network-name { + font-size: 16px; + flex-grow: 0; +} + +[id$="edit_user_metadata"] .extra-network-name+.form label, +[id$="edit_user_metadata"] .extra-network-name+.form textarea, +[id$="edit_user_metadata"] .extra-network-name+.form { + flex-grow: 10; +} + +[id$="edit_user_metadata"] .extra-network-name~.form .gradio-dropdown, +[id$="edit_user_metadata"] .extra-network-name+.form .gradio-textbox { + padding: 0; + background-color: transparent; + outline: 0; +} + +[id$="edit_user_metadata"] .gradio-column.gap:has(img) { + line-height: 0; +} + +[id$="edit_user_metadata"] .scroll-hide { + overflow-y: auto !important; +} + +* input.svelte-116rqfv { + display: none; +} + +*.wrap.svelte-xwlu1w { + display: flex; + flex-direction: column; + justify-content: center; +} + +* button:hover { + cursor: pointer; + background-color: var(--ae-primary-color); +} + +* select:focus, +* input:focus, +* button:focus, +* textarea:focus { + outline: none; + border-color: var(--ae-primary-color); +} + +*.gradio-dropdown input:focus { + outline: var(--ae-input-border-size) solid var(--ae-primary-color); +} + +*.tab-nav button { + border-radius: 0; +} + +*.tab-nav button:first-child { + border-top-left-radius: var(--ae-border-radius); +} + +*.tab-nav button:last-child { + border-top-right-radius: var(--ae-border-radius); +} + +*.tab-item { + background-color: var(--ae-panel-bg-color); + padding: var(--ae-panel-padding); +} + +*.gradio-tabitem { + background-color: var(--ae-input-bg-color); + padding: var(--ae-panel-padding); + border-radius: var(--ae-border-radius); + border-top-left-radius: 0; +} + +button:hover, +button.active, +*.tab-nav button:hover, +*.tab-nav button.selected { + background-color: var(--ae-primary-color); +} + +button.active span, +button:hover span { + color: var(--ae-input-hover-text-color); +} + +button.active .mask-icon, +button:hover .mask-icon { + background-color: var(--ae-input-hover-text-color); +} + + + +*.gap { + display: flex; + flex-direction: column; + gap: var(--ae-gap-size); +} + +*.form { + display: inherit; + flex-direction: inherit; + gap: var(--ae-gap-size); + flex: 1 1 0%; + flex-wrap: inherit; +} + +/* +* textarea { + height: auto !important; + overflow-x: hidden; + overflow-y: auto !important; +} +*/ + +*.hidden, +*.hide { + display: none !important; +} + +.gradio-column:empty, +.hide-empty:has(.form.hidden), +.hide-empty:has(.gradio-html:first-child:empty) { + display: none; +} + +:not(.portal)>.gradio-row { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: var(--ae-gap-size); +} + +:not(.portal)>.gradio-column { + display: flex; + flex-direction: column; + gap: var(--ae-gap-size); + flex-grow: 1; + width: 100%; +} + +:not(.portal)>.gradio-highlightedtext, +:not(.portal)>.gradio-row, +:not(.portal)>.block.gradio-slider, +:not(.portal)>.block.gradio-dropdown, +:not(.portal)>.block.gradio-radio, +:not(.portal)>.block.gradio-checkbox, +:not(.portal)>.block.gradio-checkboxgroup, +:not(.portal)>.block.gradio-textbox { + background-color: var(--ae-panel-bg-color); + padding: var(--ae-panel-padding); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + border-radius: var(--ae-border-radius); + margin: 0; +} + +:not(.portal)>.gradio-row>.gradio-row>.gradio-column>.block, +:not(.portal)>.gradio-row>.form>.block, +:not(.portal)>.gradio-row .form { + padding: 0; + background-color: transparent; + outline: none; + justify-content: space-between; + margin: 0; +} + +label>span+div, +:not(.portal)>.gradio-row .form>.gradio-row { + flex-grow: 1; +} + +:not(.portal)>.gradio-file .wrap, +:not(.portal)>.gradio-video .wrap, +:not(.portal)>.gradio-image .wrap { + flex-direction: column; + display: flex; + justify-content: center; + align-items: center; + min-height: 15vh; + width: 100%; + height: 100%; + /*position: absolute !important;*/ + top: 0; +} + +:not(.portal)>.gradio-image .wrap:has(canvas) { + position: absolute !important; +} + +:not(.portal)>.gradio-video .wrap { + position: relative !important; + z-index: 0; +} + +[data-testid="block-info"] { + display: flex; + flex-direction: column; + /*height: 100%;*/ + white-space: normal; + height: auto; +} + +.gradio-video .controls .inner { + display: flex; + max-height: 25px; + gap: 5px; + align-items: center; +} + +.gradio-video .controls .inner>* { + display: flex; + text-wrap: nowrap; +} + +.gradio-video .controls .inner>progress { + display: flex; + flex-grow: 1; + min-width: 50%; +} + +.gradio-video .controls .inner>[role="button"] { + max-width: 20px; +} + +.gradio-video .controls { + width: 100%; + padding: 5px; +} + +.gradio-video .svelte-19sk1im { + position: absolute; + z-index: 2; + padding: var(--ae-panel-padding); + right: var(--ae-panel-padding); +} + +*.gradio-dropdown { + overflow: visible !important; + pointer-events: none; +} + +*.gradio-dropdown .secondary-wrap input { + border: none !important; + background: none; + min-height: unset; + line-height: calc(var(--ae-input-icon-height) - 10px); + flex-grow: 1; + min-height: calc(var(--ae-input-height) - (var(--ae-input-border-size) * 2)); +} + +*.gradio-dropdown .secondary-wrap { + display: flex; + align-items: center; + flex-grow: 1; + gap: var(--ae-gap-size-val); + padding-right: var(--ae-input-height); +} + +*.gradio-dropdown div.wrap { + background: var(--ae-input-bg-color); + padding: 0; + position: relative; + pointer-events: all; + flex-grow: 0; +} + +*.gradio-dropdown label>span { + margin-bottom: 5px; +} + +*.gradio-dropdown label>* { + margin-bottom: 0; +} + +* svg.dropdown-arrow { + height: 90%; + position: absolute; + right: 5px; + fill: var(--ae-input-text-color); +} + +* .gradio-dropdown input { + display: flex; + flex: 1 1 100%; + width: 0px; +} + +ul.options { + position: absolute; + z-index: 99999; + margin: 0px !important; + box-shadow: none; + border-radius: var(--ae-border-radius); + background: var(--ae-main-bg-color); + min-width: fit-content; + max-width: 50vh; + max-height: 25vh !important; + overflow: auto; + color: var(--ae-label-color); + list-style: none; + top: var(--ae-input-height) !important; + margin-top: calc(var(--ae-border-size) * -1) !important; + bottom: unset !important; + padding: 0; + width: 100% !important; + outline: var(--ae-border-size) solid var(--ae-input-border-color); + overflow-x: hidden; +} + +li.item { + display: flex; + cursor: pointer; + padding: var(--ae-panel-padding); + justify-content: space-between; + margin: 0; +} + +li.item.active { + background: var(--ae-primary-color); + color: var(--ae-input-hover-text-color); +} + +li.item span { + order: 2; +} + +*.token { + flex-direction: row; + display: flex; + gap: 5px; + line-height: calc(var(--ae-input-height) - (var(--ae-input-border-size) * 2)); + background: var(--ae-panel-bg-color); + outline: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + font-size: var(--ae-input-font-size); + padding: 0 5px; + color: var(--ae-input-text-color); + margin: 0px; + overflow: hidden; +} + +*.token>span { + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; +} + +*.token-remove { + display: flex; + flex-direction: column; + align-self: center; + background: var(--ae-input-bg-color); + border-radius: 50%; + padding: 1px; + border: var(--ae-input-border-size) solid var(--ae-input-bg-color); +} + +*.token-remove svg { + fill: var(--ae-input-text-color); +} + +*.gradio-gallery { + justify-content: center; + position: relative; + width: 100%; +} + +*.grid-container { + grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); + display: grid; + gap: var(--ae-gap-size); +} + +*.thumbnails.scroll-hide { + /* display: flex; */ + scroll-behavior: smooth; + overflow: hidden; + align-self: center; + gap: 5px; + height: 100%; + padding: 5px; + flex-grow: 0; + max-height: 60px; +} + +*.thumbnail-small img { + width: 100%; + height: 100%; + object-fit: contain; +} + +*.gradio-gallery .preview { + position: absolute; + z-index: 1; + top: 0; + background-color: var(--ae-main-bg-color); + height: 100%; + display: flex; + flex-direction: column; + width: 100%; + border: var(--ae-border-size) solid var(--ae-input-border-color); +} + +*.gradio-gallery .preview img { + width: 100%; + max-height: 100vh; + object-fit: contain; + background-color: var(--ae-input-bg-color); + border: var(--ae-border-size) solid var(--ae-input-border-color); +} + +*.gradio-gallery .preview>img { + border: 0; +} + +*.grid-wrap { + overflow-y: auto; + position: absolute !important; + z-index: 0; + top: 0; + background-color: var(--ae-main-bg-color); + height: 100%; + display: flex; + flex-direction: column; + width: 100%; +} + +*.thumbnail-lg img { + width: 100%; + height: 100%; + object-fit: contain; + margin-bottom: calc(var(--ae-border-size) * -1); +} + +*.thumbnail-item { + height: auto; + width: 100%; + object-fit: contain; +} + +* button.thumbnail-item.thumbnail-small { + min-width: fit-content; + padding: 0; +} + +* button.thumbnail-item:hover { + background: var(--ae-panel-bg-color); +} + +* button.thumbnail-item.selected { + border: var(--ae-border-size) solid var(--ae-primary-color); +} + +*.gradio-gallery .preview button[aria-label] { + width: var(--ae-input-height); + height: var(--ae-input-height); +} + +*.gradio-gallery .preview .svelte-19sk1im { + right: 0; +} + +*.gradio-gallery .empty { + min-height: 100%; + align-items: center; + display: flex; + justify-content: center; +} + +* .styler { + display: flex; + flex-direction: column; + gap: var(--ae-gap-size); +} + +* .icon-buttons { + position: absolute; + display: flex; + right: 0; + padding: var(--ae-panel-padding); + gap: var(--ae-gap-size); +} + +* .livePreview { + position: absolute; + z-index: 2; + width: 100% !important; + height: 100% !important; + object-fit: contain; + background-color: var(--ae-main-bg-color); +} + +* .livePreview img { + object-fit: contain; + width: 100%; + height: 100%; + position: absolute; +} + +::-webkit-scrollbar { + width: 10px; + height: 10px; +} + +::-webkit-scrollbar-button { + display: none; +} + +::-webkit-scrollbar-thumb, +::-webkit-scrollbar-track { + border-radius: var(--ae-border-radius); + border: var(--ae-input-border-size) solid transparent; + background-clip: content-box; + background-color: var(--ae-input-bg-color); +} + +::-webkit-scrollbar-thumb { + background-color: var(--ae-panel-border-color) +} + +.split { + color: #ddd; + min-height: 50px; + display: flex; + flex-direction: row; + height: 100%; + flex-grow: 1; +} + +.split[direction="vertical"] { + flex-direction: column; + height: 100%; +} + +.split-container { + position: relative; + overflow: auto; +} + +* .gutter.gutter-horizontal { + background: linear-gradient(90deg, + rgba(0, 0, 0, 0) 40%, + var(--ae-panel-bg-color) 45%, + var(--ae-panel-bg-color) 55%, + rgba(0, 0, 0, 0) 60%); +} + +* .gutter.gutter-horizontal:hover { + background: linear-gradient(90deg, + rgba(0, 0, 0, 0) 40%, + var(--ae-primary-color) 45%, + var(--ae-primary-color) 55%, + rgba(0, 0, 0, 0) 60%); + cursor: col-resize; +} + +* .gutter.gutter-vertical { + background: linear-gradient(0deg, + rgba(0, 0, 0, 0) 40%, + var(--ae-panel-bg-color) 45%, + var(--ae-panel-bg-color) 55%, + rgba(0, 0, 0, 0) 60%); +} + +* .gutter.gutter-vertical:hover { + background: linear-gradient(0deg, + rgba(0, 0, 0, 0) 40%, + var(--ae-primary-color) 45%, + var(--ae-primary-color) 55%, + rgba(0, 0, 0, 0) 60%); + cursor: row-resize; +} + +.gutter:has(+ .split-container .accordion-vertical:not(.expand)) { + display: none; +} + +.accordion-title { + font-family: "IBM Plex Mono", monospace; + /* text-shadow: 0px 2px 2px #000000; */ +} + +.accordion { + display: flex; + flex-direction: column; + border-radius: var(--ae-border-radius); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + background-color: var(--ae-panel-bg-color); +} + +.accordion-container { + display: none; + flex-direction: column; + min-height: 16px; + margin-top: var(--ae-border-size); + gap: var(--ae-gap-size); + padding: var(--ae-panel-padding); +} + +.accordion.expand .accordion-container { + display: flex; +} + +.accordion-bar { + display: flex; + align-items: center; + background-color: var(--ae-panel-bg-color); + justify-content: space-between; + cursor: pointer; + border-radius: var(--ae-border-radius); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-panel-padding) calc(var(--ae-panel-padding) + 4px); + color: var(--ae-input-text-color); + margin: 0px; + min-height: var(--ae-input-height); + gap: var(--ae-gap-size); +} + +.accordion-bar .portal { + padding: 0; +} + +.accordion-bar .flexbox { + gap: var(--ae-gap-size); + align-items: center; +} + +.accordion.expand .accordion-bar { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.accordion-icon { + transform: rotate(90deg); +} + +.accordion.expand .accordion-icon { + transform: rotate(0deg); +} + +.accordion-vertical.expand .accordion-icon { + transform: rotate(-90deg); +} + +.accordion-vertical { + margin: calc(var(--ae-panel-padding) * 1); + height: calc(100% - var(--ae-panel-padding) * 2); + position: relative; + flex-direction: row; +} + +.accordion-vertical .accordion-bar { + border-radius: var(--ae-border-radius) !important; + flex-direction: column-reverse; + min-height: 100%; + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; + flex-grow: 0; + padding: var(--ae-panel-padding); + padding-left: var(--ae-panel-padding); +} + +.accordion-vertical .accordion-container { + margin: 0; + overflow-x: hidden; + position: relative; + height: 100%; + flex-direction: row; + min-height: 100%; + overflow-y: auto; + flex-grow: 1; + margin-left: var(--ae-border-size); +} + +.accordion-vertical .accordion-title { + transform: rotate(-90deg) translateX(50%); + white-space: nowrap; + width: 0; +} + +/* .accordion-bar .xtabs-tab { + justify-content: flex-start; +} */ + +.split-container.v-expand { + flex-basis: 0% !important; + min-width: fit-content; +} + +.split-container.v-expand .accordion-vertical .accordion-bar { + border-radius: var(--ae-border-radius) !important; +} + +.portal.auto-scroll { + flex: 2 2 auto; + overflow-x: hidden; + overflow-y: auto; + min-height: 0px; +} + +.layout { + display: flex; + flex-direction: column; + position: absolute; + inset: 0; + padding: var(--ae-panel-padding); + gap: var(--ae-gap-size); +} + +.layout-header { + flex-direction: column; + gap: var(--ae-gap-size); + display: flex; + padding: 0; +} + +.layout-footer { + flex-direction: column; + gap: var(--ae-gap-size); + display: flex; + padding: 0; +} + +.layout-content { + flex-direction: column; + gap: var(--ae-gap-size); + flex-grow: 1; + display: flex; + min-height: 16px; + overflow-y: auto; + padding: var(--ae-border-size); + margin: calc(var(--ae-border-size) * -1); + height: 100%; +} + +.mask-icon { + display: inline-block; + background: var(--ae-input-text-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + color: var(--ae-input-text-color); + margin: 0; + height: calc(var(--ae-input-height) - var(--ae-input-border-size) * 2); + width: calc(var(--ae-input-height) - var(--ae-input-border-size) * 2); + cursor: pointer; + -webkit-mask-size: contain; + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center center; + max-width: 24px; + max-height: 24px; + border: 0; +} + +/* .mask-icon:hover { + background-color: var(--ae-primary-color); +} */ + +*.invisible { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + background-color: transparent; + outline: none; +} + +*.invisible .tool { + background: transparent; +} + +*.invisible label { + display: none; +} + +*.invisible:has(.gradio-checkbox) { + pointer-events: none; +} + +.invisible *.gradio-button { + min-width: var(--ae-input-height); + min-height: var(--ae-input-height); + font-size: 0; + line-height: 0; +} + +/* button .mask-icon:hover { + background-color: var(--ae-input-hover-text-color); +} */ + +.icons-bar { + padding-top: 0; + padding-bottom: 0; + justify-content: center; +} + +.accordion-vertical .icons-bar { + padding-left: 0; + padding-right: 0; + padding-top: var(--ae-panel-padding); + padding-bottom: var(--ae-panel-padding); +} + +.icons-bar .flexbox>.mask-icon { + min-width: calc(var(--ae-input-height) + var(--ae-input-border-size) * 2); +} + +/* .icons-bar .mask-icon:hover { + background-color: var(--ae-input-hover-text-color); +} */ + +.xtabs { + position: relative; + display: flex; + flex-direction: column; + border-radius: var(--ae-border-radius); + outline: var(--ae-border-size) solid var(--ae-panel-border-color); + background-color: var(--ae-panel-bg-color); +} + +.xtabs-item { + flex-direction: column; + min-height: 16px; + gap: var(--ae-gap-size); + padding: var(--ae-panel-padding); +} + +.xtabs-item.active { + display: flex; +} + +.xtabs-tab.active { + background-color: var(--ae-primary-color); +} + +.xtabs-tabs { + display: flex; + flex-wrap: wrap; +} + +.xtabs-tab { + display: flex; + gap: 5px; + align-items: center; + background: var(--ae-input-bg-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + border-radius: var(--ae-border-radius); + line-height: var(--ae-input-line-height); + font-size: var(--ae-input-font-size); + padding: var(--ae-input-padding); + color: var(--ae-input-text-color); + margin: 0; + min-height: var(--ae-input-height); + min-width: var(--ae-input-height); + cursor: pointer; + justify-content: center; +} + +.xtabs-tab:hover { + background-color: var(--ae-primary-color); + color: var(--ae-input-text-color); +} + +/* .xtabs-tab:hover .mask-icon { + background-color: var(--ae-input-hover-text-color); +} */ + +/* .active .mask-icon { + background-color: var(--ae-input-hover-text-color); +} */ + +.accordion-bar .xtabs-tab { + width: 100%; +} + +* .gradio-video video, +* [data-testid="image"] img { + object-fit: contain; + width: 100%; + height: 100%; +} + +* .gradio-video .wrap, +* [data-testid="image"] .wrap { + display: flex; + flex-direction: column; +} + +.gr-group { + width: 100%; + position: relative; +} + +.border-padding { + padding: var(--ae-panel-padding); +} + +.full-height>textarea, +.full-height { + height: 100% !important; + resize: none; +} + +h1 { + line-height: 1em; + margin: 0; +} + +.no-padding-one, +.no-padding { + padding: 0; +} + +.no-padding>* { + padding: 0; +} + +*.extra-network-cards { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(calc(var(--ae-uiux_exnet_fit_size) * 1px), 1fr)); + gap: var(--ae-gap-size); + /* content-visibility: auto; */ +} + +*.extra-network-cards .card { + display: block; +} + +*.extra-network-cards .card img { + object-fit: cover; + width: 100%; + height: 100%; + border-radius: var(--ae-border-radius); + transform: scale(1.1); + pointer-events: none; + object-position: center; +} + +*.extra-network-cards .card:hover .button-row { + display: flex; +} + +*.extra-network-cards .card:hover { + cursor: pointer; +} + +*.extra-network-cards .card .button-row { + position: absolute; + display: none; + z-index: 1; + top: 0px; + right: 0; + background-color: var(--ae-input-bg-color); + padding: 2px; +} + +*.extra-network-cards .card .card-button:hover { + background-color: var(--ae-primary-color); +} + +*.extra-network-cards .card .card-button { + background-color: var(--ae-label-color); + width: 24px; + height: 24px; +} + +*.extra-network-cards .card { + position: relative; + overflow: hidden; + background-color: var(--ae-input-bg-color); + border-radius: var(--ae-border-radius); + border: var(--ae-border-size) solid var(--ae-input-bg-color); + aspect-ratio: var(--ae-uiux_exnet_aspect_ratio_x) / var(--ae-uiux_exnet_aspect_ratio_y); +} + +*.extra-network-settings .gradio-slider .head { + display: flex; + flex-direction: column; +} + + + +*.actions { + position: absolute; + bottom: 0; + padding: 10px; + background-color: var(--ae-main-bg-color); + font-size: 16px; + font-weight: 600; + left: 0; + right: 0; + display: flex; + flex-direction: column; + gap: 5px; + max-height: 100%; +} + +span.name { + overflow-wrap: anywhere; + /* text-shadow: 0 0px 3px #000; */ + text-transform: uppercase; + display: block; + color: var(--ae-label-color); + text-align: center; +} + +span.description { + font-size: 11px; + line-height: 14px; + display: block; + max-height: 80px; + overflow: hidden; + opacity: 0.6; +} + +div#flexbox-10 { + justify-content: center; +} + +div#flexbox-10>* { + flex-grow: 0; +} + +div#iobp { + position: relative; + height: 90vh; +} + +[id$="2img_neg_prompt"] textarea, +[id$="2img_prompt"] textarea { + position: absolute; + inset: 0; + resize: none !important; + font-size: 16px; + line-height: 24px; + width: 100%; + min-height: 100%; + overflow-y: auto !important; + height: auto !important; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; +} + +.token_counter { + border-top-left-radius: 0; + border-top-right-radius: 0; +} + +div#layout-3 { + position: relative; + height: 90vh; +} + + + +.gradio-button:has([class*="icon-2"])::before, +.gradio-button:has([class*="icon-2"])::after { + content: ""; + width: 11px; + height: 11px; + position: absolute; +} + + +.gradio-button:has([class*="icon-2"])::before { + right: -1px; + top: -1px; + background-color: var(--ae-primary-color); + padding: 1px; + border-radius: 50%; + z-index: 1; +} + +#contributors_grid { + gap: 5px; + align-items: flex-start; + display: grid; + grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); + white-space: nowrap; + overflow: auto; + margin: var(--ae-panel-padding); + padding-right: var(--ae-panel-padding); +} + +#contributors_grid a { + align-items: center; + padding: 10px; +} + +#contributors_grid figure { + margin: 0; +} + +#contributors_grid img { + width: 60px; + border-radius: 50%; +} + +#flexbox-9 { + justify-content: flex-end; +} + +#flexbox-8 { + min-width: 0px; + justify-content: flex-end; +} + +#split-2 { + height: 100%; +} + +#portal-49 { + min-height: 100%; +} + +#portal-50 { + min-height: 100%; +} + + + + + + + + +.icons-bar>* { + flex-grow: 0; +} + +.accordion-bar .xtabs-tab span { + display: none; +} + + + +.xtabs-tab svg { + fill: var(--ae-input-text-color); + position: relative; + top: -2px; +} + +/* #main-nav .xtabs-tab { + background-color: transparent; +} + +#main-nav .xtabs-tab.hover, +#main-nav .xtabs-tab.active { + background-color: var(--ae-input-bg-color); +} +*/ + +div#main-nav { + padding: 0px; + margin: calc(var(--ae-panel-padding) * 2); + margin-right: calc(var(--ae-panel-padding) * -1); + margin-left: calc(var(--ae-panel-padding) * 2); + padding: var(--ae-panel-padding); +} + +.no-br { + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; +} + +.no-tr { + border-top-right-radius: 0; + border-top-left-radius: 0; +} + +.no-rr { + border-top-right-radius: 0 !important; + border-bottom-right-radius: 0 !important; +} + +.no-lr { + border-top-left-radius: 0 !important; + border-bottom-left-radius: 0 !important; +} + + + +.extra-network-subdirs>button, +.settings-tabs button { + text-align: left; + font-size: 98%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} + +.extra-network-subdirs, +.settings-tabs .tab-nav { + gap: 1px; + display: flex; + flex-direction: column; +} + +.split-container[data-initsize="25"] { + min-width: 135px !important; +} + +.gradio-row:empty, +.hide-empty:has(.form.hidden), +.hide-empty:has(.gradio-html:first-child:empty) { + display: none; +} + +.gradio-checkbox>div, +.gradio-checkbox+div, +.has-info+div, +* .settings-comment { + font-size: 10px; + border: var(--ae-input-border-size) solid transparent; + margin-bottom: 5px; + vertical-align: middle; + margin-top: 0; + color: var(--ae-label-color); + font-family: inherit; + line-height: 14px; + white-space: normal; +} + +.no-extra-info label>span+div:not(.wrap), +.no-extra-info .gradio-checkbox>div:not(.mask-icon), +.no-extra-info .has-info+div { + display: none; +} + +.prose { + white-space: normal; +} + +.prose p { + line-height: var(--ae-input-line-height); +} + +* .settings-comment:has(a) { + font-size: 0; +} + +* .settings-comment a { + font-size: 10px; +} + +* a:not(:has(button)) { + color: var(--ae-input-text-color); + background-color: var(--ae-input-bg-color); + border-radius: 3px; + padding: 2px 10px; + text-decoration: none; +} + +* a:not(:has(button)):hover { + color: var(--ae-input-hover-text-color); + background-color: var(--ae-primary-color); +} + +.spacer-v { + max-height: var(--ae-input-border-size); + min-height: var(--ae-input-border-size); + background-color: var(--ae-input-border-color); +} + +* button[aria-label] { + width: var(--ae-input-height); + height: var(--ae-input-height); +} + +* button[aria-label="Edit"] { + display: none; +} + + +* .center.boundedheight { + background-color: var(--ae-input-bg-color); +} + +.ae-button { + display: flex; + align-items: center; + justify-content: center; + gap: var(--ae-gap-size); + border-radius: var(--ae-border-radius); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + background-color: var(--ae-input-bg-color); + /* padding: var(--ae-panel-padding); */ + cursor: pointer; +} + + +/* .ae-button .mask-icon:hover, +.ae-button.active .mask-icon:hover { + background-color: var(--ae-input-hover-text-color); +} */ + +.ae-button.active { + color: var(--ae-input-hover-text-color); + background-color: var(--ae-primary-color); +} + +.ae-button:hover, +.ae-button.active:hover { + color: var(--ae-input-hover-text-color); + background-color: var(--ae-primary-color); +} + +button:hover .icon-letters, +button.active .icon-letters { + color: var(--ae-input-hover-text-color); +} + +button.active svg, +button:hover svg { + fill: var(--ae-input-hover-text-color); +} + +/* .ae-button:hover .mask-icon { + background-color: var(--ae-input-hover-text-color); +} + +.ae-button:hover span{ + color: var(--ae-input-hover-text-color); +} */ + +.portal:has(.gradio-accordion) { + padding: 0; +} + +.icons-bar .portal { + border: 0; + outline: 0; + background: transparent; +} + +.icons-bar .portal button { + padding: 0; + border: 0; + outline: 0; + background: transparent; +} + +.ae-button .gradio-button { + border: 0; + padding: 0; + min-width: unset; + min-height: unset; + align-items: center; + display: flex; +} + +.ae-button .gradio-button span { + padding: 5px; + font-size: var(--ae-input-font-size); +} + +.padding { + padding: var(--ae-panel-padding); +} + +.ae-button .portal { + padding: 0; + outline: 0; + background: transparent; +} + +.ae-button .portal button { + background-color: transparent !important; +} + +.center { + justify-content: center !important; +} + +#portal-16>div>div:first-child { + display: none; +} + +.toggle-seed { + padding: var(--ae-panel-padding) !important; + min-width: var(--ae-input-height); + height: var(--ae-input-height); +} + +.gradio-group:has(> .styler:empty), +.portal:has(> .hide), +.gradio-column:has(> .form:empty), +.gradio-row:has(> .form:empty) { + display: none; +} + +.ae-button .gradio-button span { + padding: 5px; + font-size: var(--ae-input-font-size); +} + + + + +*.disable { + opacity: 0.5; + pointer-events: none; +} + +*.disable>button { + display: flex !important; +} + +.generate { + overflow: hidden; +} + +.generate.active>.portal::before { + content: ""; + position: absolute; + height: 200px; + width: 200px; + background-image: linear-gradient(90deg, + rgba(0, 0, 0, 0.1) 0%, + rgba(0, 0, 0, 0.1) 50%, + rgba(255, 255, 255, 0) 51%, + rgba(255, 255, 255, 0) 100%); + background-repeat: repeat; + background-size: 20px; + transform: rotate(30deg); + z-index: 1; + -webkit-animation-name: bg-slide; + -webkit-animation-duration: 3s; + -webkit-animation-iteration-count: infinite; + -webkit-animation-timing-function: linear; +} + +.generate.active>.portal>button { + position: relative; + -webkit-filter: drop-shadow(0px 0px 1px var(--ae-primary-color)) drop-shadow(0px 0px 1px var(--ae-primary-color)) drop-shadow(0px 0px 1px var(--ae-primary-color)) drop-shadow(0px 0px 1px var(--ae-primary-color)); + z-index: 1; +} + +/* .generate.active > span{ + display:none !important; +} */ + +* #extensions_installed_top { + display: flex !important; +} + +*.notransition .fade-in, +*.notransition .fade-out { + transition: none !important; + animation: none !important; +} + +/* +*.notransition div { + transition: none !important; + animation: none !important; +} +*/ + +*.fade-in, +*.fade-out { + position: absolute; + inset: 0; + justify-content: flex-start !important; + overflow: auto; + z-index: 999; +} + +*.fade-in { + display: flex !important; + animation: fade-in 0.25s; + animation-fill-mode: forwards; +} + +*.notransition .fade-in { + display: flex !important; + /* position: initial !important; */ +} + +*.notransition .fade-out { + display: none !important; + position: initial !important; +} + +*.fade-in>div:not(.layout-content) { + flex-grow: 0; +} + +*.fade-out { + animation: fade-out 0.25s; + animation-fill-mode: forwards; +} + +*.template { + position: absolute; + inset: 0; +} + +.initial { + position: initial; +} + +.app { + min-height: 100vh; + width: 100%; + gap: 0; +} + +.app_footer { + flex-grow: 0; + margin: 0; + align-items: center; + gap: 0; +} + +.app_footer br { + display: none; +} + +.grow { + flex-grow: 1; +} + +.flex-start { + justify-content: flex-start; +} + +/* #main-nav .xtabs-tab { + justify-content: flex-start; +} */ + +#main-nav .xtabs-tab span { + display: none; +} + +#split-left>.xtabs-item { + padding: 0; +} + +.auto { + overflow: auto; +} + +.center.flexbox { + justify-content: center; +} + +.center>.portal>button { + align-self: center; +} + +.ae-button.tool { + width: var(--ae-input-height); + height: var(--ae-input-height); + min-width: var(--ae-input-height); + min-height: var(--ae-input-height); +} + +.xtabs-tab, +.portal>button { + align-items: center; + justify-content: center; +} + +#sp-ac1>.xtabs-item { + padding: 0; +} + +#template-right-sidebar, +#split-right { + min-width: calc(var(--ae-input-height) + var(--ae-border-size) + ((var(--ae-panel-padding) + var(--ae-input-padding)) * 2) + 1px); + +} + +.flex-start { + justify-content: flex-start !important; +} + +.flex-end { + justify-content: flex-end; +} + +#txt2img_header span { + display: none; +} + +.scroll-hide { + overflow-y: hidden !important; + resize: none; +} + +textarea.scroll-hide { + overflow-y: auto !important; + resize: vertical; +} + +.no-labels span { + display: none; +} + + +[id$='2img_script_container']>div>.form~div { + padding: var(--ae-panel-padding); + outline: var(--ae-input-border-size) solid var(--ae-panel-border-color); + background-color: var(--ae-input-bg-color); + border-radius: var(--ae-border-radius); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); +} + +.portal .gradio-accordion div:has([id^='setting_']) { + display: flex; + flex-direction: row; + flex-wrap: wrap; + flex: 1 1 0%; + min-width: min(160px, 100%); +} + +.portal .gradio-accordion .gradio-row:has([id^='setting_']) { + padding: 0; + background-color: transparent; + outline: none; +} + +#imageARPreview { + position: absolute; + top: 0; + left: 0; + outline: 2px solid var(--ae-primary-color); + background: radial-gradient(circle, rgba(0, 0, 0, 0.2) 0%, var(--ae-primary-color) 200%); + z-index: 9000; + pointer-events: none; + display: block; +} + + +.tab-nav button { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#resize_mode>span, +.accordion:has(#inpaint_controls.hide) { + display: none; +} + +.accordion:has(#resize_mode) .accordion-bar, +.accordion:has(#inpaint_controls) .accordion-bar { + background-color: var(--ae-input-bg-color); +} + +.icon-left button { + display: flex; + flex-direction: row-reverse; + gap: 5px; +} + +.thumbnails.scroll-hide { + display: none; +} + +.thumbnails.scroll-hide:has(.thumbnail-item:nth-child(2)) { + display: flex; +} + +.gradio-gallery .preview>img { + height: 100% !important; +} + +.gradio-gallery:has(.thumbnail-item:nth-child(2)) .preview>img { + height: calc(100% - 60px) !important; +} + +.tabulator { + border: 1px solid var(--ae-panel-border-color); + background-color: var(--ae-panel-bg-color); +} + +.tabulator .tabulator-header { + border-bottom: 1px solid var(--ae-panel-border-color); + background-color: var(--ae-panel-bg-color); + color: var(--ae-label-color); +} + +.tabulator .tabulator-tableholder .tabulator-table { + background-color: var(--ae-panel-bg-color); + color: var(--ae-label-color); +} + +.tabulator-row { + background-color: var(--ae-panel-bg-color); +} + +.tabulator-row.tabulator-row-even { + background-color: var(--ae-panel-bg-color); +} + +.tabulator-row.tabulator-selectable:hover { + background-color: var(--ae-input-bg-color); +} + +.tabulator-row .tabulator-cell { + border-right: 1px solid var(--ae-panel-border-color); +} + +.rgRow { + transition: none !important; +} + +button.gridjs-sort-neutral { + width: 13px !important; + height: 13px !important; + min-width: unset; + min-height: unset; +} + +.gridjs-td a { + display: block; + +} + +.gridjs-tbody, +td.gridjs-td { + background-color: var(--ae-panel-bg-color); +} + +td.gridjs-td { + border: var(--ae-border-size) solid var(--ae-panel-border-color); + padding: var(--ae-panel-padding); + +} + +.gridjs-container { + color: var(--ae-label-color); + font-size: 14px; + font-family: inherit; +} + +th.gridjs-th { + background-color: var(--ae-input-bg-color); + ; + border: var(--ae-border-size) solid var(--ae-input-border-color); + color: var(--ae-label-color); + padding: var(--ae-panel-padding); + +} + +th.gridjs-th-sort:focus, +th.gridjs-th-sort:hover { + background-color: var(--ae-panel-bg-color); +} + +td.gridjs-td[data-column-id="description"] { + flex-grow: 1; +} + +.gridjs-tr { + border: none; + display: flex; + flex-direction: column; + gap: 1px; +} + +.gridjs-tbody, +td.gridjs-td { + background-color: var(--ae-panel-bg-color); + display: grid; + grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); + gap: var(--ae-gap-size); + overflow-wrap: anywhere; +} + + +.additional, +.additional ul { + display: none !important; +} + +.additional, +.additional ul { + margin: auto; + padding: 0; + gap: 5px; + margin-bottom: 2px; +} + +.card:hover .additional, +.card:hover .additional ul { + display: flex; +} + +.additional ul a { + width: 24px; + height: 24px; + font-size: 125% !important; + align-items: center; + display: flex; + justify-content: center; + margin: 0 !important; +} + +.params { + min-width: 370px; + +} + +#template-settings .split-container:first-child, +.layout-extra-networks .split-container:first-child { + min-width: 135px; +} + +#split-right:not(.v-expand) { + min-width: 512px; +} + +.layout-extra-networks:has(.show-dirs) .gutter, +.layout-extra-networks:has(.show-dirs) .split-container:first-child { + display: none; +} + +.layout-extra-networks:has(.show-dirs:not(.active)) .split-container { + flex-basis: 100% !important; +} + +.layout-extra-networks:has(.show-dirs.active) .gutter, +.layout-extra-networks:has(.show-dirs.active) .split-container:first-child { + display: flex; +} + +.layout-extra-networks { + gap: 2px; + +} + +.layout-extra-networks>div:first-child { + padding-bottom: 0 !important; + +} + +/* tab extensions */ +.tabs_extensions table { + width: 100%; +} + +.tabs_extensions thead { + display: none; +} + +.tabs_extensions tbody { + display: grid; + grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); + gap: var(--ae-gap-size); + content-visibility: auto; +} + +.tabs_extensions tr { + flex-direction: column; + display: flex; + padding: var(--ae-panel-padding); + background-color: var(--ae-panel-bg-color); + gap: 5px; + border: var(--ae-border-size) solid var(--ae-panel-border-color); + border-radius: var(--ae-border-radius); + position: relative; +} + +.tabs_extensions td { + display: flex; + text-wrap: wrap; + flex-direction: row; + overflow-wrap: anywhere; + flex-wrap: wrap; + gap: 5px; +} + +.tabs_extensions td:has(p.info) { + flex-direction: column; + flex-grow: 1; + justify-content: space-between; + gap: 10px; +} + +.tabs_extensions td p.info:has(span) { + flex-direction: row; + display: flex; + flex-wrap: wrap; + gap: 7px; + flex-grow: 0; + justify-content: space-between; + align-items: flex-end; +} + +.tabs_extensions span.date_added { + max-width: 130px; + text-align: justify; + text-align-last: justify; + color: var(--ae-secondary-label-color); + background-color: var(--ae-input-bg-color); + padding: var(--ae-panel-padding); + border-radius: var(--ae-border-radius); + font-size: 11px; +} + +span.star_count { + background-color: var(--ae-input-bg-color); + padding: 5px 10px 5px 5px; + display: flex; + flex-direction: row; + justify-content: center; + border-radius: 5px; + font-size: 0; + line-height: 0; + justify-items: end; + gap: 2px; + align-items: center; +} + +span.star_count b { + font-size: 12px; +} + +.tabs_extensions td br { + flex-basis: 100%; + content: ""; +} + +.tabs_extensions td a { + font-size: 14px; + padding: 5px; + display: block; +} + +.tabs_extensions td button { + display: flex; + flex-grow: 1; + justify-content: center; + align-items: center; +} + +.tabs_extensions td label:has(input) { + display: flex; + gap: 5px; + font-size: 14px; + border-radius: 5px; + align-items: center; +} + +.tabs_extensions td label>input { + align-self: flex-start; +} + + + +/* .tabs_extensions .wrap { + display: flex; + flex-direction: column; + position: relative; + z-index: 1; + background-color: black; + padding: 10px; + gap: 5px; +} +*/ +.tabs_extensions tr:has(a[href=""]) { + background-color: var(--ae-input-bg-color); + border-color: var(--ae-input-border-color); +} + +.tabs_extensions td:empty, +.tabs_extensions td:has(a:empty) { + display: none !important; +} + +.tabs_extensions td:nth-child(1) a, +.tabs_extensions td:nth-child(2) a { + background-color: transparent; + color: var(--ae-primary-color); + padding: 0; + font-size: 12px; +} + +.tabs_extensions td:nth-child(1) a:hover, +.tabs_extensions td:nth-child(2) a:hover { + color: var(--ae-label-color); +} + +.tabs_extensions td:nth-child(1) a { + font-size: 14px; +} + +.gradio-video, +.gradio-image { + height: 100%; + width: 100%; + object-fit: contain; +} + +#pnginfo_image [data-testid="image"] img { + max-height: unset; + min-height: 100%; +} + +.full-height>textarea { + overflow-y: auto !important; +} + +.gradio-video video { + height: auto; + width: 100%; + object-fit: contain; +} + +.ae-popup { + /* position: fixed; + width: 100vw; + height: 100vh; + z-index: 9999; + */ + align-items: center; + background-color: var(--ae-input-bg-color); + justify-content: center !important; +} + +.ae-popup-inner { + /* width:50vw; + height:50vh; */ + width: 100%; + height: 100%; + background-color: var(--ae-main-bg-color); + position: relative; +} + +.ae-popup .standalone-card-preview img { + height: 100%; + width: 100%; + object-fit: contain; + max-height: 45vh; +} + +.ae-popup .edit-user-metadata-buttons button:first-child { + display: none; +} + +.global-popup-inner { + flex-grow: 0; + position: relative; +} + +.relative-height { + flex-grow: 0; + position: relative +} + +#popup_close { + position: absolute; + right: calc(var(--ae-panel-padding) * 2); + bottom: calc(var(--ae-panel-padding) * 3); + height: 24px; + padding-right: calc(var(--ae-panel-padding) * 3); +} + + +.wrap .svelte-zyxd38 svg { + display: none !important; +} + +.wrap .progress-text { + background-color: var(--ae-main-bg-color); + color: var(--ae-label-color); + font-size: 10px; + display: flex; + flex-grow: 0; +} + +#popup_trigger { + display: none; +} + + +@-webkit-keyframes bg-slide { + from { + background-position: 0%; + } + + to { + background-position: -100%; + } +} + +@-webkit-keyframes fade-in { + 0% { + opacity: 0; + /* transform: scale(0.5); */ + } + + 100% { + opacity: 1; + /* transform: scale(1.0); */ + } +} + +.icon-letters { + justify-content: center; + text-transform: uppercase; + font-size: 14px; + font-weight: 600; + width: 24px; + line-height: 24px; +} + + +.center.boundedheight.flex { + width: 100% !important; + height: auto !important; + /* max-height: 50vh;*/ +} + + + +.image-container img.absolute-img { + position: relative !important; + /* position: absolute !important; */ +} + +/* .image-container img { + max-height: 50vh !important; + } */ + +.image-container { + min-height: 15vh !important; + /* height: auto !important; */ + display: flex; + position: relative; +} + +/* .image-container:has(canvas) { + min-height: 50vh !important; + } */ + +.absolute-img { + position: relative; + opacity: 0; +} + +.block.gradio-image { + /* height: auto !important; */ +} + +div[data-testid="image"] canvas { + width: 100% !important; + height: auto !important; + position: absolute !important; + border: 0 !important; + inset: 0; +} + + + +#tab_img2img div.center.boundedheight.flex { + display: block !important; +} + +* .center.boundedheight>div:has(.brush), +* .center.boundedheight>div:has([aria-label="Clear"]) { + position: absolute; + padding: var(--ae-panel-padding); + top: 0; + right: 0; + z-index: 999; +} + +* .center.boundedheight>div:has(.brush) { + top: 70px; + min-height: unset; + width: auto; + height: auto; + gap: var(--ae-gap-size); +} + + + +[id*="label_copy_to"] { + /* flex-basis: 100%; */ + font-size: 12px; + flex-grow: 0; + min-width: 65px; + justify-content: center; + line-height: 12px; +} + +[id*="_copy_to_"].gradio-row { + justify-items: center; + background-color: transparent; + padding: 0; + outline: 0; +} + +[id*="_copy_to_"].gradio-row button { + flex-grow: 1; +} + +.group-row { + gap: 1px !important; +} + +.group-row>* button, +.group-row>* { + border-radius: 0 !important; +} + +.group-row>*:last-child button, +.group-row>*:last-child { + border-top-right-radius: var(--ae-border-radius) !important; + border-bottom-right-radius: var(--ae-border-radius) !important; +} + +.group-row>*:first-child button, +.group-row>*:first-child { + border-top-left-radius: var(--ae-border-radius) !important; + border-bottom-left-radius: var(--ae-border-radius) !important; +} + +.progress-flex { + position: absolute; + padding: calc(var(--ae-panel-padding) * 1); + bottom: 0; + left: 0; + right: 0; + display: none; +} + +.progress-flex>div { + position: relative; + z-index: 123; + white-space: nowrap; + padding: 0; + border-radius: 0; +} + +.progress-flex:has(.progress) { + display: flex; +} + +.progress { + background-color: var(--ae-primary-color); + padding: 2px; + border-radius: 0; + transition: width 1.0s linear; +} + +iframe { + border: 0; +} + +.other>div { + background: transparent; + outline: 0; +} + +.other .gradio-column:first-child { + flex-grow: 1; + padding: 0; + gap: 0; +} + +.other iframe:first-child { + max-height: calc(100vh - var(--ae-panel-padding) * 6); +} + +.ae-button>a:hover, +.ae-button>a { + padding: 0; + background-color: transparent; + line-height: 0; + display: flex; + align-items: center; + gap: 5px; +} + +div#workspaces_tabitem>div { + padding: 0; +} + +/*infinite-image-browsing*/ +#tab_infinite-image-browsing_tabitem { + overflow: hidden; + padding: 0; +} + +/*a1111-sd-webui-tagcomplete*/ +ul { + padding: 0; + margin: 0; +} + +.autocompleteResults { + background-color: var(--ae-main-bg-color) !important; + border: var(--ae-border-size) solid var(--ae-input-border-color) !important; + border-radius: var(--ae-border-radius) !important; +} + +.autocompleteResultsList>li:nth-child(odd) { + background-color: var(--ae-panel-bg-color) !important; +} + +.autocompleteResultsList>li.selected { + background-color: var(--ae-primary-color) !important; +} + +.log-row { + display: table; + overflow-wrap: anywhere; +} + +.log-row a { + padding: 0 5px; +} + +.log-date { + color: #cacaca; + display: table-cell; + white-space: nowrap; + padding: 0px 10px; + font-size: 9px; +} + +.log-boolean, +.log-undefined { + color: magenta; +} + +.log-object { + color: #cfb0ff; +} + +.log-string { + color: #ffca68; +} + +.log-number { + color: cyan; +} + +.log-info { + color: yellow; +} + +.log-string.log-remove { + color: #ff4f4f; +} + +.log-string.log-load { + color: #74ff80; +} + +.log-string.log-url { + color: #8fc9ff; +} + +.log-string.log-object { + color: #8fc9ff; +} + + +.card.selected { + border: var(--ae-border-size) solid var(--ae-primary-color); +} + +.card.selected .actions { + background-color: var(--ae-primary-color); +} + +.column-1 { + column-count: 1; + gap: 32px; +} + +.column-2 { + columns: 320px 2; + gap: 32px; +} + +.column-3 { + column-count: 3; + gap: 32px; +} + +.lcol { + gap: 32px; + align-items: flex-start; + display: grid; + /* grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); */ +} + +.lcol>.col { + min-width: min(480px, 100%); +} + +#about_tabitem { + font-size: 14px; + line-height: 20px; + font-family: monospace; + /* text-align: justify; */ +} + +#about_tabitem img { + display: flex; + width: 100%; + height: auto; +} + +#about_tabitem a { + background-color: transparent; + color: var(--ae-primary-color); + padding: 0; +} + +#about_tabitem a:hover { + color: var(--ae-label-color); +} + +#about_tabitem p, +h1, +h2 { + margin: 0; + margin-bottom: calc(var(--ae-panel-padding) * 1); +} + +#about_tabitem p, +#about_tabitem ul, +#about_tabitem img { + margin-bottom: 24px; +} + +#about_tabitem h1, +h2 { + /* margin-top: calc(var(--ae-panel-padding) * 3 ); */ + font-size: 20px; + color: var(--ae-primary-color); +} + +#about_tabitem ul { + padding-inline-start: calc(var(--ae-panel-padding) * 4); +} + +#about_tabitem li::marker { + color: var(--ae-primary-color); +} + +.lrp-32 { + gap: 32px; + padding-top: 20px; + padding-left: 32px; + padding-right: 32px; + max-width: 960px; +} + +.gradio-audio>.wrap, +.gradio-video>.wrap, +.gradio-file>.wrap, +.gradio-image>.wrap, +.wrap.center.full.translucent { + min-height: unset; + position: absolute; + z-index: 100; + height: auto; + width: auto; +} + +div#quicksettings { + flex-direction: row; + display: inline-flex; + gap: var(--ae-gap-size); + flex-wrap: wrap; +} + +div#quicksettings>div { + flex: 1 0 calc(100% - var(--ae-input-height) * 2); +} + +div#quicksettings div+button { + flex: 0 1 0%; + margin-bottom: var(--ae-panel-padding); +} + +.relative { + position: relative; +} + +.accordion-vertical.expand { + flex-grow: 1 !important; +} + +.no-grow { + flex-grow: 0; +} + +#sidebar_secondary_tabs { + justify-content: flex-end; +} + +#pnginfo_image .center.boundedheight.flex { + display: flex; + align-items: center; + text-align: center; +} + +.gradio-colorpicker label { + flex-direction: row; + align-items: center; + pointer-events: none; +} + +.gradio-colorpicker input { + pointer-events: all; +} + +input[type="radio"], +input[type="checkbox"] { + accent-color: var(--ae-primary-color); + cursor: pointer; +} + +.selected span.name { + color: var(--ae-input-hover-text-color); +} + +#txt2img_edit_style_close, +#lightboxModal, +.gradio-container.app { + display: none !important; +} + +#train_tabitem .tabs { + width: 100%; +} + +#setting_uiux_ignore_overrides { + min-width: 100%; +} + +#img2img_override_settings, +#txt2img_override_settings { + display: flex !important; +} + +input[type="radio"], +input[type="checkbox"] { + accent-color: var(--ae-input-bg-color); + cursor: pointer; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + border: none; + outline: none; + padding: 0px; + min-width: 20px; + min-height: 20px; + line-height: 20px; + text-align: center; + display: inline-block; + transform: scale(0.8); + transform-origin: left; + background-color: var(--ae-input-bg-color); + /*outline: var(--ae-input-border-size) solid var(--ae-input-border-color);*/ + border-radius: var(--ae-border-radius); +} + +.gradio-accordion>.label-wrap input[type=checkbox], +.wrap>label>input[type=checkbox], +.wrap>label>input[type="radio"] { + background-color: var(--ae-panel-bg-color); +} + +input[type=radio]:checked, +input[type=checkbox]:checked { + background-color: var(--ae-primary-color) !important; +} + +input[type="radio"]:after, +input[type=checkbox]:after { + content: " "; + color: var(--ae-input-bg-color); + visibility: visible; + border-radius: var(--ae-input-border-radius); +} + +input[type=radio]:checked:after, +input[type=checkbox]:checked:after { + content: "❖"; + position: absolute; + inset: 0; + transform: scale(1.5); +} + +.gradio-accordion .label-wrap>span { + display: flex; + align-items: center; +} + +.gradio-accordion .label-wrap:not(.open)>span.icon { + transform: rotate(90deg); +} + +.gradio-checkbox>div.mask-icon { + margin: 0; +} + +:not(.tool)>.gradio-checkbox label { + display: flex; + white-space: normal; + align-items: flex-start; + gap: var(--ae-gap-size); +} + +#interrogate, +#deepbooru { + font-size: 0px; +} + +#interrogate>div, +#deepbooru>div { + position: absolute; +} + +/* +input[type=checkbox]+span { + margin-left: -8px; +} +#setting_uiux_ignore_overrides input[type=checkbox]+span { + margin-left: 0px; +} +*/ + +span.settings-category { + padding: 0 var(--ae-input-padding); + font-weight: bold; + line-height: var(--ae-input-height); + color: var(--ae-primary-color); +} + +.extra-network-tree.hidden { + display: flex !important; + cursor: pointer; +} + +.extra-network-tree .tree-list-content { + position: relative; + display: grid; + width: 100%; + user-select: none; + background-color: transparent; + border: none; + grid-template-rows: min-content; + grid-template-areas: "leading-action leading-visual label trailing-visual trailing-action"; + grid-template-columns: min-content min-content minmax(0, auto) min-content min-content; + grid-gap: 10px; + /* align-items: start; */ + flex-grow: 1; +} + +.extra-network-tree .tree-list-content>span { + pointer-events: none; +} + +.extra-network-tree .tree-list-content+.tree-list--subgroup { + height: 0; + visibility: hidden; + opacity: 0; +} + +.extra-network-tree .tree-list-content[data-expanded]+.tree-list--subgroup { + height: auto; + visibility: visible; + opacity: 1; +} + +.extra-network-tree .tree-list-item-label--truncate { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.extra-network-tree .tree-list--subgroup>.tree-list-item { + margin-left: 5px !important; + padding-left: 5px !important; + list-style: none; + line-height: calc(var(--ae-input-font-size) + 2px); +} + +.tree-list-item-action-chevron { + display: inline-flex; + padding: 0.25rem; + box-shadow: 0.1rem 0.1rem 0 0 var(--ae-primary-color) inset; + transform: rotate(135deg); +} + +.extra-network-tree .tree-list-content-dir .tree-list-item-action-chevron { + -ms-transform: rotate(135deg); + -webkit-transform: rotate(135deg); + transform: rotate(135deg); + transition: transform 0.2s; +} + +.extra-network-tree .tree-list-content-dir[data-expanded] .tree-list-item-action-chevron { + -ms-transform: rotate(225deg); + -webkit-transform: rotate(225deg); + transform: rotate(225deg); + transition: transform 0.2s; +} + +.extra-network-tree .tree-list-content-file .tree-list-item-action--leading { + visibility: hidden; +} + +.extra-network-tree .tree-list-content .button-row { + display: none; + pointer-events: all; +} + +.extra-network-tree .tree-list-content:hover .button-row { + display: inline-flex; +} + +.extra-network-tree .tree-list-content .button-row>div { + width: calc(var(--ae-input-font-size) + 2px); + height: calc(var(--ae-input-font-size) + 2px); + background-color: var(--ae-label-color); +} + +.extra-network-tree .tree-list-content .button-row>div:hover { + background-color: var(--ae-primary-color); +} + +.extra-network-tree .tree-list-item-action--trailing { + grid-area: trailing-action; + display: inline-flex; +} + +.extra-network-tree div.tree-list-content:hover { + color: var(--ae-primary-color); + transition: none; +} + +.token_counter * { + display: block !important; +} + +#accordions-extras>div>div { + padding: 0; + outline: 0; +} + +#accordions-extras>div>div:first-child { + display: none; +} + +.hide-empty:not(:has(>*)) { + display: none !important; +} + + +@-webkit-keyframes fade-out { + 0% { + opacity: 1; + /* transform: scale(1.0); */ + } + + 100% { + opacity: 0; + /* transform: scale(0.5); */ + } +} + +@media screen and (-webkit-min-device-pixel-ratio: 0) { + input[type="range"] { + overflow: hidden; + width: 100%; + -webkit-appearance: none; + background-color: var(--ae-input-bg-color); + border: var(--ae-input-border-size) solid var(--ae-input-border-color); + position: relative; + border-radius: var(--ae-border-radius); + } + + input[type="range"]::after { + content: ""; + position: absolute; + height: 100%; + background-image: var(--ae-slider-bg-overlay); + width: 100%; + left: 1px; + } + + input[type="range"]::-webkit-slider-runnable-track { + height: 14px; + -webkit-appearance: none; + color: var(--ae-primary-color); + margin-top: -1px; + } + + input[type="range"]::-webkit-slider-thumb { + width: 0px; + -webkit-appearance: none; + height: 14px; + cursor: ew-resize; + background-color: var(--ae-primary-color); + box-shadow: -1024px 0 0 1024px var(--ae-primary-color); + } +} + +#sidebar_secondary_tabs a span, +.default-desktop .mobile, +.default-auto .mobile { + display: none; +} + +.default-mobile .mobile { + display: flex; +} + +.default-mobile .split-container.params { + min-width: 100% !important; +} + +.default-mobile .split-container.params~div { + display: none; +} + +#txt2img_results_generate_tabitem .generate, +#img2img_results_generate_tabitem .generate { + flex-grow: 1; +} + +.aside-labels #sidebar_secondary_tabs a span, +.main-labels #main-nav .xtabs-tab span, +.tab-labels [id$="2img_header"] span, +.aside-labels #accordion-aside .xtabs-tab span { + display: flex !important; + text-transform: capitalize; +} + +.main-labels #main-nav .xtabs-tab, +.tab-labels [id$="2img_header"] .xtabs-tab, +.aside-labels #accordion-aside .xtabs-tab { + justify-content: flex-start; +} + +#acc-arrow-button, +.aside-labels .accordion-bar>div { + width: 100%; +} + +.aside-labels div#sidebar_secondary_tabs button { + width: 100%; + justify-content: flex-start; +} + +.info-results-container { + overflow-y: auto; + max-height: 33vh; +} + +#layout_main_wrapper { + padding-left: 0; +} + +.template>.layout { + padding-right: var(--ae-border-size); +} + +.template>.full-height { + padding-left: var(--ae-border-size); + padding-right: var(--ae-border-size); +} + +#split-right.v-expand { + margin-left: calc(var(--ae-border-size) * -1); +} + +#split-right:not(.v-expand) #accordion-aside { + margin-left: var(--ae-border-size); +} + +[toggle] .wrap { + display: none; +} + +.default-mobile #split-right:not(.v-expand) { + position: fixed; + inset: var(--ae-panel-padding); + z-index: 999; + background-color: var(--ae-main-bg-color); + outline: var(--ae-border-size) solid var(--ae-main-bg-color); +} + +.default-mobile #split-right:not(.v-expand) #accordion-aside { + margin-left: var(--ae-panel-padding); +} + +.default-mobile .template>.full-height { + padding: var(--ae-panel-padding); +} + +/* +.tabitem > .gap{ + overflow:hidden; +} +*/ + +.pointer-events-none { + pointer-events: none; +} + +.pointer-events-none button { + pointer-events: all; +} + +@media (max-width: 768px) { + .xtabs-tab span { + display: none; + } + + .default-auto .mobile { + display: flex; + } + + .default-auto .split-container.params { + min-width: 100% !important; + } + + .default-auto .split-container.params~div { + display: none; + } +} + +/* Firefox */ +* { + scrollbar-color: var(--ae-panel-border-color) var(--ae-main-bg-color) !important; + scrollbar-width: thin !important; +} + +input[type="range"]::-moz-range-progress { + background-color: var(--ae-primary-color); + height: 100%; + background-image: var(--ae-slider-bg-overlay); +} + +input[type="range"]::-moz-range-track { + width: 100%; + height: 100%; + background-color: var(--ae-input-bg-color); + border: none; + border-radius: 0px; + position: relative; + background-image: var(--ae-slider-bg-overlay); + opacity: 1; +} + +input[type="range"]::-moz-range-thumb { + border: 0px solid var(--ae-primary-color); + width: 0px; + border-radius: 0%; + background-color: var(--ae-primary-color); +} + +/*hide the outline behind the border*/ +input[type="range"]:-moz-focusring { + outline: 1px solid var(--ae-primary-color); + outline-offset: -1px; +} + +input[type="range"]:focus::-moz-range-track { + background-color: var(--ae-input-bg-color); +} + +input[type="number"] { + -moz-appearance: textfield; +} + +input[type="number"]:hover, +input[type="number"]:focus { + -moz-appearance: initial; +} + +/* IE maybe later */ + +input[type="range"]::-ms-fill-lower { + background-color: var(--ae-primary-color); +} + +input[type="range"]::-ms-fill-upper { + background-color: var(--ae-input-bg-color); +} + +.tabs>.tab-nav { + display: flex; + position: relative; + flex-wrap: wrap; +} + +table { + border-collapse: collapse; +} + +table.popup-table { + width: 98%; +} + +.popup-table td, +.popup-table th { + border: var(--ae-border-size) solid var(--ae-panel-border-color); + padding: var(--ae-panel-padding); + box-sizing: border-box; + text-align: left; + white-space: normal; +} + +.popup-table td { + line-break: anywhere; +} + +.popup-table thead th { + position: sticky; + top: 0; + z-index: 2; + background: var(--ae-panel-bg-color); +} + +.popup-table thead th:first-child { + left: 0; + z-index: 3; +} + +.popup-table tr> :first-child { + position: sticky; + background: var(--ae-group-bg-color); + left: 0; +} + + +.popup-table td.muted { + width: 5%; + overflow: hidden; + font-size: 0; + border: 0; + background: var(--ae-group-bg-color); +} + +.popup-table td.muted+td:not(.muted) { + width: 60%; +} + +.popup-table td.link { + color: var(--ae-primary-color); +} + +.popup-table tr>td:last-child { + width: 35%; + position: relative; + z-index: 1; +} + +.popup-table tr>td:last-child:before { + content: ""; + position: absolute; + inset: 0; + width: 0%; + background-color: var(--ae-primary-color); + z-index: -1; + opacity: 0.5; + margin: 1px; +} + +.search_extra_networks { + min-width: 100px; + flex: 1 1 0; +} + +.prose p, +.gradio-checkbox label>span { + margin-bottom: 0 !important; +} + +#extensions_installed_top>button:nth-child(1), +#extensions_installed_top>button:nth-child(2) { + width: max(140px, 40%); + flex-grow: 1; +} + +* #extensions_installed_top { + align-items: flex-end; + display: flex !important; +} + +#extensions_disable_all { + min-width: 170px; +} + +#anapnoe_app:not(.default-mobile) .group-row>*:has(+button.mobile) { + border-top-right-radius: var(--ae-border-radius) !important; + border-bottom-right-radius: var(--ae-border-radius) !important; +} \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/css/uiux-icons.css b/extensions-builtin/sd-webui-ux/assets/css/uiux-icons.css index 443cbb5a..b3840b07 100644 --- a/extensions-builtin/sd-webui-ux/assets/css/uiux-icons.css +++ b/extensions-builtin/sd-webui-ux/assets/css/uiux-icons.css @@ -302,4 +302,118 @@ button.active .icon-sort { .icon-gallery { -webkit-mask-image: url(../svg/gallery-line.svg); -} \ No newline at end of file +} + +.icon-stylez { + -webkit-mask-image: url(../svg/quill-pen-ai-line.svg); +} + +.icon-rebuild-thumbs { + -webkit-mask-image: url(../svg/image-circle-ai-line.svg); +} + +.icon-civitai-images { + -webkit-mask-image: url(../svg/image-ai-line.svg); +} + +.icon-civitai-models { + -webkit-mask-image: url(../svg/planet-line.svg); +} + +.icon-create-new { + -webkit-mask-image: url(../svg/add-circle-line.svg); +} + +.icon-full-screen{ + -webkit-mask-image: url(../svg/fullscreen-line.svg); +} +.ae-virtual.fullscreen .icon-full-screen{ + -webkit-mask-image: url(../svg/fullscreen-exit-line.svg); +} + +.icon-grid-size{ + -webkit-mask-image: url(../svg/focus-mode.svg); +} + +.ae-virtual.full .icon-grid-size{ + -webkit-mask-image: url(../svg/focus-mode.svg); + background-color: var(--ae-primary-color); +} + +.icon-shut-down { + -webkit-mask-image: url(../svg/shut-down-line.svg); +} +.icon-refresh { + -webkit-mask-image: url(../svg/refresh-line.svg); +} + +.icon-tile{ + display: none; +} +.ae-virtual.full .icon-tile{ + -webkit-mask-image: url(../svg/grid-line.svg); + display: block; +} +.ae-virtual.full.tileable .icon-tile{ + -webkit-mask-image: url(../svg/grid-fill.svg); +} + +.ae-virtual .icon-info{ + display: none; +} +.ae-virtual.full .icon-info{ + -webkit-mask-image: url(../svg/file-info-fill.svg); + display: block; +} +.ae-virtual.full.info .icon-info{ + background-color: var(--ae-primary-color); +} + +.ae-virtual .icon-delete{ + -webkit-mask-image: url(../svg/delete-bin-2-fill.svg); + background-color: var(--ae-primary-color); +} + +.ae-virtual .icon-send-params{ + -webkit-mask-image: url(../svg/arrow-left-up-box-line.svg); +} + +.ae-virtual .icon-link{ + -webkit-mask-image: url(../svg/link.svg); +} + +.send-button:has([class*="icon-2"])::before { + right: -1px; + top: -1px; + background-color: var(--ae-primary-color); + padding: 1px; + border-radius: 50%; + z-index: 1; +} +.send-button:has([class*="icon-2"])::before, .send-button:has([class*="icon-2"])::after { + content: ""; + width: 11px; + height: 11px; + position: absolute; +} +.send-button:has([class*="icon-2"])::after { + right: 0px; + top: 0px; + background-color: var(--ae-input-hover-text-color); + -webkit-mask-image: url(../svg/arrow-up-line.svg); + z-index: 2; +} +.send-button{ + position: relative; + padding: 0; + background-color: transparent; + border: 0; + line-height: 0; +} + +button[class^="icon-"] { + mask-repeat: no-repeat; + mask-size: contain; + -webkit-mask-repeat: no-repeat; + -webkit-mask-size: contain; +} diff --git a/extensions-builtin/sd-webui-ux/assets/css/uiux-tree.css b/extensions-builtin/sd-webui-ux/assets/css/uiux-tree.css new file mode 100644 index 00000000..05dbf4df --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/css/uiux-tree.css @@ -0,0 +1,149 @@ +.tree-view .nested { + display: none; +} + +.tree-view .active { + display: block; +} + +.tree-view { + --spacing_x: 10px; + --spacing_y: 20px; + --radius: 8px; + --lw: 1px; + line-height: 20px; + font-size: 14px; + margin-left: 0px; +} + +.tree-view li { + display: block; + position: relative; + padding-left: calc(2 * var(--spacing_x) - var(--radius) - var(--lw)); +} + +.tree-view ul { + margin-left: calc(var(--radius) - var(--spacing_x)); + padding-left: 0; +} + +.tree-view ul li { + border-left: var(--lw) solid var(--ae-main-bg-color); +} + +.tree-view ul li.active { + background-color: var(--ae-main-bg-color); +} + +.tree-view li.active summary.tree-file::before { + background-color: var(--ae-primary-color); +} + +.tree-view ul li:last-child { + border-color: transparent; +} + +.tree-view ul li::before { + content: ''; + display: block; + position: absolute; + top: calc(var(--spacing_y) / -2 + var(--radius)); + left: calc(var(--lw) * -1); + width: calc(var(--spacing_x) - var(--radius)); + height: calc(var(--spacing_y) - var(--radius)); + border: solid var(--ae-main-bg-color); + border-width: 0 0 var(--lw) var(--lw); +} + +.tree-view summary{ + padding-right: 70px; + display: block; + cursor: pointer; + margin-left: calc(var(--radius)); + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; +} + +.tree-view summary::marker, +.tree-view summary::-webkit-details-marker { + display: none; +} + +.tree-view summary:focus { + outline: none; +} + +.tree-view summary:focus-visible { + outline: var(--lw) dotted var(--ae-primary-color); +} + +.tree-view summary.tree-file::before, +.tree-view summary::before { + content: ''; + display: block; + position: absolute; + top: calc(var(--spacing_y) / 2 - var(--radius)); + left: calc(var(--spacing_x) - var(--radius) - var(--lw)); + width: calc(2 * var(--radius)); + height: calc(2 * var(--radius)); + border-radius: 50%; + background-color: var(--ae-primary-color); +} + +/* +.tree-view summary.tree-file { + + margin-left: calc(var(--spacing_x)* -1 + var(--radius)* 2); + +} +*/ + +.tree-view summary.tree-folder { + color: var(--ae-primary-color); +} + +.tree-view summary.tree-file::before { + + top: calc(var(--spacing_y) / 2 - var(--radius) * 0.5); + left: calc(var(--spacing_x) - var(--radius) * 0.5 - var(--lw)); + width: calc(2 * var(--radius) * 0.5); + height: calc(2 * var(--radius) *0.5); + background-color: var(--ae-main-bg-color); + /* + -webkit-mask-image: url(../svg/file-info-line.svg); + */ +} + +.tree-view ul li.li-file::before { + width: calc(var(--spacing_x) - var(--radius)* 0.5); +} + +.tree-view .caret.tree-folder::before { + -webkit-mask-image: url(../svg/add-circle-fill.svg); +} + +.tree-view .caret-down.tree-folder::before { + -webkit-mask-image: url(../svg/indeterminate-circle-fill.svg); +} + +.tree-view li > .item-actions { + position: absolute; + right: 0; + top: 0; + transform-origin: top right; + transform: scale(0.8); + padding: 0; +} + +.tree-view ul > li:hover > .item-actions { + display: flex; +} + +.tree-view ul > li:hover > summary { + width: calc(100% - 60px); +} + +.tree-view ul:hover > li[data-name]:hover { + background-color: var(--ae-main-bg-color); +} \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/css/uiux-virtual.css b/extensions-builtin/sd-webui-ux/assets/css/uiux-virtual.css new file mode 100644 index 00000000..ee498607 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/css/uiux-virtual.css @@ -0,0 +1,644 @@ +.ae-virtual { + position: relative; + overflow: hidden; + width: 100%; + height: 100%; + overflow : auto; + /*touch-action: none;*/ + contain: strict; +} + +.ae-virtual-detail .item, +.ae-virtual .item { + position: relative; + overflow: hidden; + background-color: var(--ae-input-bg-color); + border-radius: var(--ae-border-radius); + /*border: var(--ae-border-size) solid var(--ae-input-bg-color);*/ + aspect-ratio: var(--ae-uiux_exnet_aspect_ratio_x) / var(--ae-uiux_exnet_aspect_ratio_y); + background-position: center; + background-repeat: no-repeat; + background-size: cover; + user-select:none; + justify-content: flex-end; + /*isolation: isolate;*/ +} + +.ae-virtual.vertical .item { + height: auto; + width: 100%; +} + +.ae-virtual.horizontal .item { + height: 100%; + width: auto; + /*min-width: calc(var(--ae-uiux_exnet_fit_size) * var(--ae-uiux_exnet_aspect_ratio) * 1px);*/ +} + +.overflow-hidden { + overflow: hidden; +} + +.ae-virtual .sentinel { + position: absolute; + /*background-color: #ff4f4f;*/ + top: 0px; + left: 0px; + will-change: transform; + transform-style: preserve-3d; /* Better GPU utilization */ + backface-visibility: hidden; /* Prevents invisible redraws */ +} + +.ae-virtual.vertical .sentinel { + height: 1px; + width: 100%; +} + +.ae-virtual.horizontal .sentinel { + width: 1px; + height: 100%; +} + +.ae-virtual > .ae-virtual-wrapper{ + position: relative; + display: grid; + gap: var(--ae-gap-size); + /*touch-action: none;*/ + will-change: transform; + transform-style: preserve-3d; /* Better GPU utilization */ + backface-visibility: hidden; /* Prevents invisible redraws */ +} + +.ae-virtual.vertical > .ae-virtual-wrapper { + grid-auto-flow: row; + width: 100%; + grid-auto-rows: minmax(calc(var(--ae-uiux_exnet_fit_size) * 1px), auto); + grid-template-columns: repeat(auto-fit, minmax(calc(var(--ae-uiux_exnet_fit_size) * 1px), 1fr)); + + /*grid-template-columns: repeat(auto-fill, minmax(0, 1fr));*/ + /*grid-template-rows: repeat(auto-fill, minmax(0, 1fr));*/ +} + +.ae-virtual.horizontal > .ae-virtual-wrapper { + grid-auto-flow: column; + height: 100%; + /* width: fit-content; */ + /*grid-auto-columns: minmax(calc(var(--ae-uiux_exnet_fit_size) * 1px), auto);*/ + grid-auto-columns: min-content; + grid-template-rows: repeat(auto-fill, minmax(calc(var(--ae-uiux_exnet_fit_size) * 1px), 1fr)); +} + +.ae-virtual.full { + width: 100%; + height: 100%; + display: flex; + flex-wrap: wrap; + overflow: hidden; + +} + +.ae-virtual.full > .ae-virtual-wrapper { + display: flex; + flex-wrap: wrap; + width: 100%; + height: 100%; + gap: 0; +} +.ae-virtual.full .item { + height: 100%; + width: 100%; + background-size: contain; +} + +.ae-virtual.horizontal.full > .ae-virtual-wrapper { + flex-direction: column; +} + +.item-img { + width: 100%; + height: 100%; +} + +.item-img { + position: absolute; + top: 0; + width: 100%; + height: calc(100% - 5px); + + transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1); + contain: layout size; + will-change: transform; + touch-action: pan-x pan-y; + + background-repeat: no-repeat; + background-size: cover; + background-position: center; +} + +.ae-virtual.full .item-img { + background-size: contain; + touch-action: none; +} + +.ae-virtual.full.tileable .item-img { + background-repeat: repeat; + background-size: 33vh; +} + +.ae-virtual-detail, +.loading-indicator { + position: absolute; + text-align: center; + background: rgba(0, 0, 0, 0.75); + display: flex; + flex-direction: column; + line-height: 20px; + justify-content: center; + inset: 0; +} + +.ae-virtual-detail { + background-color: var(--ae-main-bg-color); + justify-content: flex-start; +} + +.ae-virtual-detail-content>.ae-virtual-wrapper { + grid-auto-rows: minmax(250px, auto); + grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); +} + +.ae-virtual { + font-size: calc(var(--ae-uiux_exnet_header_size)* 1px); +} + +.ae-virtual-wrapper .title { + position: absolute; + bottom: 0; + padding: 5px; + background-color: var(--ae-main-bg-color); + font-weight: 600; + left: 0; + right: 0; + overflow-wrap: anywhere; + /* text-transform: uppercase; */ + display: block; + color: var(--ae-label-color); + text-align: center; +} + +.ae-virtual .item-info { + /* + position: absolute; + bottom: 0; + padding: 5px; + background-color: var(--ae-main-bg-color); + font-weight: 600; + left: 0; + right: 0; + overflow-wrap: anywhere; + display: block; + color: var(--ae-label-color); + text-align: center; + */ +} +.ae-virtual .item-info-description { + display: none;; +} + +.ae-virtual.full .item-info { + text-align: left; + display: none;; + overflow: hidden; +} +.ae-virtual.full.info .item-info-description, +.ae-virtual.full.info .item-info { + display: flex; + font-weight: normal; + flex-direction: column; +} + +.ae-virtual-wrapper .active .title { + background-color: var(--ae-primary-color); +} +.ae-virtual-wrapper .item.active { + border: 2px solid var(--ae-primary-color); +} + +option { + background-color: var(--ae-main-bg-color); +} + +select:focus option:hover, +option:checked { + background-color: var(--ae-primary-color); + color: var(--ae-main-bg-color); +} + + +.additional, +.additional ul { + position: relative; + z-index: 99; +} + +.card:hover .additional, +.card:hover .additional ul { + display: flex !important; +} + +*.extra-network-cards .card ul { + gap: 2px; +} + +*.extra-network-cards .card ul .card-button { + width: 20px; + height: 20px; + font-size: 15px !important; + background: transparent; +} + + +.ae-virtual-detail-content { + display: flex; + flex-direction: column; + height: 100%; + overflow: hidden; + position: absolute; + overflow-y: auto; + inset: 0; +} + +.ae-virtual-detail>.close { + position: absolute; + z-index: 999; + right: 15px; + top: 5px; +} + +.ae-virtual-detail:has(> .ae-virtual-detail-content > *) { + display: flex; +} + +.ae-virtual-detail:not(:has(> .ae-virtual-detail-content > *)) { + display: none; +} + + +.ae-virtual-detail-content>.ae-virtual-wrapper { + /* + display: flex; + flex-direction: column; + flex-grow: 1;*/ +} + +.ae-virtual-detail-content>.ae-virtual-wrapper>* { + /* + flex: 1 0 100%; + width: 100%; + height: 100%; + box-sizing: border-box; + */ +} + +span.extra-type { + background-color: var(--ae-main-bg-color); + padding: 3px; + margin: 2px; + position: absolute; + border-radius: var(--ae-border-radius); +} + +.item-actions, .item-actions-top { + display: none; + justify-content: flex-end; + padding: 5px; +} + +.item.card:hover .item-actions, +.item.card:hover .item-actions-top +{ + display: flex; +} + +.item-actions-top>*, +.item-actions>* { + width: 24px; + height: 24px; + min-width: unset; + min-height: unset; + background: var(--ae-input-text-color); +} + +.item-send-actions { + /* + position: absolute; + top: 40px; + background: transparent; + margin-top: -1px; + gap: 3px; + display: flex; + flex-wrap: wrap; + height: auto; + width: auto; + flex-direction: column; + */ +} + +.ae-virtual .item { + display: flex; + flex-direction: column; + +} + +.ae-virtual .item-info { + position: relative; + padding: 5px; + background-color: var(--ae-main-bg-color); + font-weight: 600; + overflow-wrap: anywhere; + display: block; + color: var(--ae-label-color); + text-align: center; +} + + +.item-actions, .item-actions-top { + background: transparent; + margin-top: -1px; + gap: 3px; + display: flex; + flex-direction: row; + /*justify-content: center;*/ +} + +.item-actions-row { + display: flex; + flex-direction: column; + flex-grow: 1; + justify-content: space-between; + z-index: 1; + background-color: transparent; +} + +.ae-virtual.full .item-actions-row { + flex-direction: row; +} + +.ae-virtual .item-spacer { + flex-grow: 1; + background-color: transparent; +} +.ae-virtual.full .item-spacer { + display:none; +} + +.ae-virtual.full .item-actions-top { + position: initial; + width: auto; + flex-direction: row; + flex-grow: 1; + padding-right: 0; +} + +.ae-virtual:not(.full) .item.card:hover .item-img{ + filter: brightness(0.5); +} + +.ae-virtual:not(.full) .item.card .item-actions-row{ + display: none; +} +.ae-virtual:not(.full) .item.card:hover .item-actions-row{ + display: flex; +} + +/* metadata preview */ +.card.standalone-card-preview img { + width: 100%; +} + +[id$="edit_user_metadata"] { + gap: var(--ae-gap-size); + text-align: left; + padding: 5px; +} + +.ae-virtual { + opacity: 0; + transition: opacity 0s; + /*transition: opacity 1.0s ease-in; */ +} + +.ae-virtual.visible { + opacity: 1; +} + +.item-info > button { + background-color: transparent; + border: 0; + padding: 0; + min-height: unset; + font-size: calc(var(--ae-uiux_exnet_header_size)* 1px); +} + +.item-info > button:hover { + color:var(--ae-primary-color) +} + +.ae-virtual span.extra-type { + background-color: var(--ae-main-bg-color); + padding: 3px; + margin: 2px; + position: absolute; + border-radius: var(--ae-border-radius); + z-index: 1; + top: 0; + font-size: 85%; +} + +.ae-virtual.full .item-info { + max-height: 50%; + overflow: hidden; +} +.ae-virtual.full .item-info-description { + height: 100%; + overflow-y: auto; +} + +.ae-virtual.full .item-info > * , +.ae-virtual.full .item-info-description > * { + margin: 0; + margin-bottom: 10px; + font-size: 14px; + line-height: 16px; + display: block; + white-space: pre-wrap; + word-wrap: break-word; +} + +.ae-virtual.full .item-info-description a { + margin: 0; + font-size: 12px; + line-height: 19px; +} + +.ae-virtual.full .item-info-description img { + width: 100%; +} + +.ae-virtual.full .item-info-title { + font-size: 16px; + line-height: 22px; + font-weight: 600; + display: block; + width: fit-content; +} + +#civitai_models_tabitem .ae-virtual-detail>.close { + display: none; +} + +#civitai_models_tabitem .item-actions-row { + justify-content: flex-end; +} + +.ae-virtual.full .item-img { + position: relative; +} + +.model-sdownload{ + display: inline-block !important; + line-height: var(--ae-input-height) !important; +} + + +.ae-virtual .item { + background-color : rgb(255 255 255 / 0%); +} + +.ae-virtual:not(.full) .card:before { + content: ""; + position: absolute; + inset: 0; + background: var(--ae-secondary-color); +} + +/* Hover effects */ +/* +.layout-extra-networks .ae-virtual:not(.full) .item-img { + animation: addEffect 0.3s forwards; +} +.layout-extra-networks .ae-virtual:not(.full) .card:before { + animation: addBgEffect 0.3s forwards; +} + +.layout-extra-networks:hover .ae-virtual:not(.full) .item-img { + animation: removeEffect 0.3s forwards; +} +.layout-extra-networks:hover .ae-virtual:not(.full) .card:before { + animation: removeBgEffect 0.3s forwards; +} + +.layout-extra-networks.mouseenter:hover .ae-virtual:not(.full) .item-img, +.layout-extra-networks.mouseenter .ae-virtual:not(.full) .item-img { + filter: none !important; + mix-blend-mode: normal !important; + animation: none !important; +} +.layout-extra-networks.mouseenter:hover .ae-virtual:not(.full) .card:before, +.layout-extra-networks.mouseenter .ae-virtual:not(.full) .card:before { + opacity: 0 !important; +} + +.layout-extra-networks.init-view .ae-virtual:not(.full) .item-img { + filter: grayscale(calc(var(--ae-uiux_exnet_image_tint) * 10)) !important; + mix-blend-mode: multiply !important; + animation: none !important; +} +.layout-extra-networks.init-view .ae-virtual:not(.full) .card:before { + opacity: var(--ae-uiux_exnet_image_tint) !important; + animation: none !important; +} + +.default-mobile .layout-extra-networks .ae-virtual:not(.full) .item-img, +.default-mobile .layout-extra-networks.init-view .ae-virtual:not(.full) .item-img { + filter: none !important; + mix-blend-mode: normal !important; + animation: none !important; +} +.default-mobile .layout-extra-networks .ae-virtual:not(.full) .card:before, +.default-mobile .layout-extra-networks.init-view .ae-virtual:not(.full) .card:before { + opacity: 0 !important; +} +*/ + +.layout-extra-networks .ae-virtual:not(.full) .item-img { + filter: grayscale(calc(var(--ae-uiux_exnet_image_tint) * 10)) !important; + mix-blend-mode: multiply !important; + animation: none !important; +} +.layout-extra-networks .ae-virtual:not(.full) .card:before { + opacity: var(--ae-uiux_exnet_image_tint) !important; + animation: none !important; +} +.layout-extra-networks:hover .ae-virtual:not(.full) .item-img { + filter: none !important; + mix-blend-mode: normal !important; + animation: none !important; +} +.layout-extra-networks:hover .ae-virtual:not(.full) .card:before { + opacity: 0 !important; + animation: none !important; +} + +.layout-extra-networks:hover .ae-virtual:not(.full) .item:hover .item-img{ + filter: brightness(0.25) !important; +} + + +@keyframes removeEffect { + 0% { + filter: grayscale(calc(var(--ae-uiux_exnet_image_tint) * 10)); + mix-blend-mode: multiply; + } + 99% { + filter: grayscale(0); + mix-blend-mode: multiply; + } + 100% { + filter: none; + mix-blend-mode: normal; + } +} + +@keyframes addEffect { + 0% { + filter: none; + mix-blend-mode: normal; + } + 1% { + filter: grayscale(0); + mix-blend-mode: multiply; + } + 100% { + filter: grayscale(calc(var(--ae-uiux_exnet_image_tint) * 10)); + mix-blend-mode: multiply; + } +} + +@keyframes removeBgEffect{ + 0% { + opacity: var(--ae-uiux_exnet_image_tint); + } + 100% { + opacity: 0; + } +} + +@keyframes addBgEffect{ + 0% { + opacity: 0; + } + 100% { + opacity: var(--ae-uiux_exnet_image_tint); + } +} diff --git a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-flux.png b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-flux.png new file mode 100644 index 00000000..22707046 Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-flux.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-new-03.png b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-new-03.png new file mode 100644 index 00000000..064207c6 Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-new-03.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-2.png b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-2.png deleted file mode 100644 index 1d4c1ac0..00000000 Binary files a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-2.png and /dev/null differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-a.png b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-a.png new file mode 100644 index 00000000..9d0077c0 Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-a.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-forge.png b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-forge.png new file mode 100644 index 00000000..be34bb91 Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-forge.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-hover-m.png b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-hover-m.png new file mode 100644 index 00000000..4d2e64ba Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-hover-m.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-hover.png b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-hover.png index 28dbcc28..cc67245b 100644 Binary files a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-hover.png and b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-hover.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-v.0.01-hover.png b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-v.0.01-hover.png new file mode 100644 index 00000000..28dbcc28 Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-v.0.01-hover.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-v.0.01.png b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-v.0.01.png new file mode 100644 index 00000000..4a27e43e Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces-v.0.01.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces.png b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces.png index 4a27e43e..868c0bff 100644 Binary files a/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces.png and b/extensions-builtin/sd-webui-ux/assets/images/anapnoe-ui-ux-workspaces.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-forge-insights.png b/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-forge-insights.png new file mode 100644 index 00000000..7b26e1d7 Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-forge-insights.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-insights.png b/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-insights.png new file mode 100644 index 00000000..cedf4f57 Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-insights.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-ux-forge-insights.png b/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-ux-forge-insights.png new file mode 100644 index 00000000..82c30687 Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-ux-forge-insights.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-ux-insights.png b/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-ux-insights.png new file mode 100644 index 00000000..57803aec Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/images/stable-diffusion-webui-ux-insights.png differ diff --git a/extensions-builtin/sd-webui-ux/assets/img/arrow.svg b/extensions-builtin/sd-webui-ux/assets/img/arrow.svg new file mode 100644 index 00000000..126ab268 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/arrow.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/autofit.svg b/extensions-builtin/sd-webui-ux/assets/img/autofit.svg new file mode 100644 index 00000000..f12f7a77 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/autofit.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/close.svg b/extensions-builtin/sd-webui-ux/assets/img/close.svg new file mode 100644 index 00000000..179a24dd --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/download.svg b/extensions-builtin/sd-webui-ux/assets/img/download.svg new file mode 100644 index 00000000..52db45bc --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/download.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/error.svg b/extensions-builtin/sd-webui-ux/assets/img/error.svg new file mode 100644 index 00000000..4c9ac41a --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/error.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/heart-outline.svg b/extensions-builtin/sd-webui-ux/assets/img/heart-outline.svg new file mode 100644 index 00000000..2a89f672 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/heart-outline.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/heart.svg b/extensions-builtin/sd-webui-ux/assets/img/heart.svg new file mode 100644 index 00000000..81e49db2 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/heart.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/info.svg b/extensions-builtin/sd-webui-ux/assets/img/info.svg new file mode 100644 index 00000000..dead630b --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/info.svg @@ -0,0 +1,8 @@ + + + diff --git a/extensions-builtin/sd-webui-ux/assets/img/maximize.svg b/extensions-builtin/sd-webui-ux/assets/img/maximize.svg new file mode 100644 index 00000000..e768cabb --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/maximize.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/minimize.svg b/extensions-builtin/sd-webui-ux/assets/img/minimize.svg new file mode 100644 index 00000000..7ff3ce3f --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/minimize.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/pause.svg b/extensions-builtin/sd-webui-ux/assets/img/pause.svg new file mode 100644 index 00000000..14448b41 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/pause.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/pixel.gif b/extensions-builtin/sd-webui-ux/assets/img/pixel.gif new file mode 100644 index 00000000..5bfd67a2 Binary files /dev/null and b/extensions-builtin/sd-webui-ux/assets/img/pixel.gif differ diff --git a/extensions-builtin/sd-webui-ux/assets/img/play.svg b/extensions-builtin/sd-webui-ux/assets/img/play.svg new file mode 100644 index 00000000..e8e2bc22 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/preloader.svg b/extensions-builtin/sd-webui-ux/assets/img/preloader.svg new file mode 100644 index 00000000..1c6ef35e --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/preloader.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/theme.svg b/extensions-builtin/sd-webui-ux/assets/img/theme.svg new file mode 100644 index 00000000..f6fb4aa7 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/theme.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/zoom-in.svg b/extensions-builtin/sd-webui-ux/assets/img/zoom-in.svg new file mode 100644 index 00000000..8964085a --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/zoom-in.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/img/zoom-out.svg b/extensions-builtin/sd-webui-ux/assets/img/zoom-out.svg new file mode 100644 index 00000000..38e30be0 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/img/zoom-out.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/add-circle-fill.svg b/extensions-builtin/sd-webui-ux/assets/svg/add-circle-fill.svg new file mode 100644 index 00000000..0827f914 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/add-circle-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/add-circle-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/add-circle-line.svg new file mode 100644 index 00000000..d5520b53 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/add-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/add-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/add-line.svg new file mode 100644 index 00000000..5b518ce0 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/add-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/arrow-left-up-box-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/arrow-left-up-box-line.svg new file mode 100644 index 00000000..bfd5e0a0 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/arrow-left-up-box-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/arrow-right-up-box-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/arrow-right-up-box-line.svg new file mode 100644 index 00000000..8bf261bb --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/arrow-right-up-box-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/book-shelf-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/book-shelf-line.svg new file mode 100644 index 00000000..2f93921d --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/book-shelf-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/checkbox-indeterminate-fill.svg b/extensions-builtin/sd-webui-ux/assets/svg/checkbox-indeterminate-fill.svg new file mode 100644 index 00000000..dca9ee6f --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/checkbox-indeterminate-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/checkbox-indeterminate-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/checkbox-indeterminate-line.svg index b4c69c05..d8bd5068 100644 --- a/extensions-builtin/sd-webui-ux/assets/svg/checkbox-indeterminate-line.svg +++ b/extensions-builtin/sd-webui-ux/assets/svg/checkbox-indeterminate-line.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/delete-bin-2-fill.svg b/extensions-builtin/sd-webui-ux/assets/svg/delete-bin-2-fill.svg new file mode 100644 index 00000000..9532589c --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/delete-bin-2-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/expand-collapse.svg b/extensions-builtin/sd-webui-ux/assets/svg/expand-collapse.svg new file mode 100644 index 00000000..f34809c9 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/expand-collapse.svg @@ -0,0 +1,7 @@ + + diff --git a/extensions-builtin/sd-webui-ux/assets/svg/file-fill.svg b/extensions-builtin/sd-webui-ux/assets/svg/file-fill.svg new file mode 100644 index 00000000..be6f512a --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/file-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/file-search-fill.svg b/extensions-builtin/sd-webui-ux/assets/svg/file-search-fill.svg new file mode 100644 index 00000000..94f0c22e --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/file-search-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/focus-mode.svg b/extensions-builtin/sd-webui-ux/assets/svg/focus-mode.svg new file mode 100644 index 00000000..e07a433b --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/focus-mode.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/folder-add-fill.svg b/extensions-builtin/sd-webui-ux/assets/svg/folder-add-fill.svg new file mode 100644 index 00000000..a0cec382 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/folder-add-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/folder-add-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/folder-add-line.svg new file mode 100644 index 00000000..12394e64 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/folder-add-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/folder-reduce-fill.svg b/extensions-builtin/sd-webui-ux/assets/svg/folder-reduce-fill.svg new file mode 100644 index 00000000..480384a8 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/folder-reduce-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/folder-reduce-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/folder-reduce-line.svg new file mode 100644 index 00000000..83cfd57f --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/folder-reduce-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/gallery-fill.svg b/extensions-builtin/sd-webui-ux/assets/svg/gallery-fill.svg new file mode 100644 index 00000000..efc74913 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/gallery-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/gallery-view-2.svg b/extensions-builtin/sd-webui-ux/assets/svg/gallery-view-2.svg new file mode 100644 index 00000000..4d8dfdf7 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/gallery-view-2.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/gallery-view.svg b/extensions-builtin/sd-webui-ux/assets/svg/gallery-view.svg new file mode 100644 index 00000000..34ce43ce --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/gallery-view.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/image-ai-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/image-ai-line.svg new file mode 100644 index 00000000..3443f87f --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/image-ai-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/image-circle-ai-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/image-circle-ai-line.svg new file mode 100644 index 00000000..eba9f7fd --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/image-circle-ai-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/indeterminate-circle-fill.svg b/extensions-builtin/sd-webui-ux/assets/svg/indeterminate-circle-fill.svg new file mode 100644 index 00000000..4b625f70 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/indeterminate-circle-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/indeterminate-circle-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/indeterminate-circle-line.svg new file mode 100644 index 00000000..3bb56f5d --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/indeterminate-circle-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/link.svg b/extensions-builtin/sd-webui-ux/assets/svg/link.svg new file mode 100644 index 00000000..2a5a962a --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/link.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/markup-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/markup-line.svg index 49b7ab78..e193c734 100644 --- a/extensions-builtin/sd-webui-ux/assets/svg/markup-line.svg +++ b/extensions-builtin/sd-webui-ux/assets/svg/markup-line.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/planet-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/planet-line.svg index 3bb04682..ad71cf8a 100644 --- a/extensions-builtin/sd-webui-ux/assets/svg/planet-line.svg +++ b/extensions-builtin/sd-webui-ux/assets/svg/planet-line.svg @@ -1 +1 @@ - \ No newline at end of file + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/quill-pen-ai-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/quill-pen-ai-line.svg new file mode 100644 index 00000000..3b15cfc2 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/quill-pen-ai-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/restart-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/restart-line.svg new file mode 100644 index 00000000..63c519ec --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/restart-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/square-fill.svg b/extensions-builtin/sd-webui-ux/assets/svg/square-fill.svg new file mode 100644 index 00000000..19dc4279 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/square-fill.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/square-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/square-line.svg new file mode 100644 index 00000000..8af42339 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/square-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/svg/subtract-line.svg b/extensions-builtin/sd-webui-ux/assets/svg/subtract-line.svg new file mode 100644 index 00000000..55b92728 --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/svg/subtract-line.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-about-extension.html b/extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-about-extension.html new file mode 100644 index 00000000..6198c0ba --- /dev/null +++ b/extensions-builtin/sd-webui-ux/assets/templates/forge-gradio-4/template-about-extension.html @@ -0,0 +1,89 @@ +
+ A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, engineered for unmatched user experience and performance. +
++ Compatible with both Stable Diffusion web UI + and Stable Diffusion web UI Forge backends. +
++ This extension performs frontend optimizations post-DOM load (modifying elements after they're created), meaning developer tools may show initial resource allocation before optimizations apply. In contrast Stable Diffusion web UI UX & Stable Diffusion web UI UX Forge implement upstream backend optimizations that prevent unnecessary element creation entirely, enabling faster performance from initialization. +
+ ++ Open source projects play a crucial role in protecting user privacy and security, + advocating for unhindered access to source code, and nurturing a more transparent technology + ecosystem. + By supporting this project through your donation, you'll contribute to its ongoing development + without any compromise + from advertisements or corporate agendas, and ensure that it stays freely accessible, current, and + open to all. +
💖 Your Support Makes a Difference! 💖 ++ With workspaces extension, you can craft personalized views and arrange them in any way that + suits your preferences, + allowing you to tailor-make workflows that cater to your specific needs. +
++ 🌟 Get early access to Workspaces for UI-UX. 🌟 +
++ A sophisticated theme editor allowing you to personalize any aspect of the UI-UX. + Tailor the visual experience of the user interface with the Advanced Theme Style configurator. +
++ 🌟 Get early access to Advanced Theme Style configurator for UI-UX. 🌟 +
++ Introducing a low-code visual editor builder for Gradio Apps. + Create templates and customize Gradio apps without extensive programming knowledge. Drag, drop, + design, and deploy - all within a user-friendly interface. + Build anything from simple AI applications to complex enterprise solutions. +
++ A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, engineered for unmatched user experience and performance. +
++ Open source projects play a crucial role in protecting user privacy and security, + advocating for unhindered access to source code, and nurturing a more transparent technology + ecosystem. + By supporting this project through your donation, you'll contribute to its ongoing development + without any compromise + from advertisements or corporate agendas, and ensure that it stays freely accessible, current, and + open to all. +
💖 Your Support Makes a Difference! 💖 ++ With workspaces extension, you can craft personalized views and arrange them in any way that + suits your preferences, + allowing you to tailor-make workflows that cater to your specific needs. +
++ 🌟 Get early access to Workspaces for UI-UX. 🌟 +
++ A sophisticated theme editor allowing you to personalize any aspect of the UI-UX. + Tailor the visual experience of the user interface with the Advanced Theme Style configurator. +
++ 🌟 Get early access to Advanced Theme Style configurator for UI-UX. 🌟 +
++ Introducing a low-code visual editor builder for Gradio Apps. + Create templates and customize Gradio apps without extensive programming knowledge. Drag, drop, + design, and deploy - all within a user-friendly interface. + Build anything from simple AI applications to complex enterprise solutions. +
+- A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, utilizing the powerful - Gradio - library. This cutting-edge browser interface offers an unparalleled level of customization and optimization for users, setting it apart from other web interfaces. + A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, engineered for unmatched user experience and performance.
- This extension is compatible with both backends: - Stable Diffusion web UI - and - Stable Diffusion web UI Forge - . + Compatible with both Stable Diffusion web UI + and Stable Diffusion web UI Forge backends.
- Please note that this extension focuses solely on frontend optimizations to significantly reduce DOM memory usage and improve loading speed. In contrast, the - Stable Diffusion web UI UX - and its variant, - Stable Diffusion web UI UX Forge - , incorporate backend optimizations for an even better and faster user experience. Together, these changes ensure a more effective and enjoyable interaction with the application. -
-- 🌟 Your Support Makes a Difference! 🌟 + This extension performs frontend optimizations post-DOM load (modifying elements after they're created), meaning developer tools may show initial resource allocation before optimizations apply. In contrast Stable Diffusion web UI UX & Stable Diffusion web UI UX Forge implement upstream backend optimizations that prevent unnecessary element creation entirely, enabling faster performance from initialization.
- There is only so much time in a day that a person can otherwise give (Dave Glick). -- - - -
- Our sponsors and supporters will be prominently featured on a dedicated tab and on the GitHub page, - highlighting their commitment to advancing innovation in development. - As a heartfelt thank you, they'll get early access to all new features and premium add-ons. -
- - Donate now, and join forces to - create a sustainable realm of open source software that benefits everyone. - -- + 💖 Your Support Makes a Difference! 💖
- Get early access to Workspaces for UI-UX. + 🌟 Get early access to Workspaces for UI-UX. 🌟
- Get early access to Advanced Theme Style configurator for UI-UX. + 🌟 Get early access to Advanced Theme Style configurator for UI-UX. 🌟
- Anapnoe UI-UX Core framework leverages a custom-made visual editor and a cutting-edge component - library - to facilitate the rapid development of sophisticated Gradio applications. - In addition to its visually appealing design and well-planned layout, this extension - offers several performance enhancements to both the - - Stable Diffusion - web UI - - and the - Gradio - framework. These optimizations include: + A bespoke, highly adaptable, blazing fast user interface for Stable Diffusion, engineered for unmatched user experience and performance.
-- The current optimizations significantly reduce DOM memory usage and improve loading speed. - - Nevertheless, there is still potential for further enhancements, which will be explored in - upcoming releases of the - - Stable Diffusion Web - UI-UX - . -
-- There is only so much time in a day that a person can otherwise give (Dave Glick). -- -
- Our sponsors and supporters will be prominently featured on a dedicated tab and on the GitHub page, - highlighting their commitment to advancing innovation in development. - As a heartfelt thank you, they'll get early access to all new features and premium add-ons. -
- - Donate now, and join forces to - create a sustainable realm of open source software that benefits everyone. - -- + 💖 Your Support Makes a Difference! 💖
- Get early access to Workspaces for UI-UX. + 🌟 Get early access to Workspaces for UI-UX. 🌟
- Get early access to Advanced Theme Style configurator for UI-UX. + 🌟 Get early access to Advanced Theme Style configurator for UI-UX. 🌟
+
+
+
+