stable-diffusion-webui
stable-diffusion-webui copied to clipboard
AUTOMATIC1111
Added optional "Lock controls" button
Describe what this pull request is trying to achieve.
Solution based on request: https://github.com/AUTOMATIC1111/stable-diffusion-webui/issues/7835
Additional notes and description of your changes Added an optional UI settings checkbox: "Show a lock button that disables UI controls" When activated, an additional button is added to the toolbar When the "Lock" button is pressed, the main window changes the background. Buttons and Inputs are locked. Only text fields, primary and secondary buttons remain available.
With this button appears small problem which I can't solve.. After clicking console throws error: "TypeError: Cannot read properties of undefined (reading 'forEach')"
Environment this was tested in
- OS: Windows
- Browser: Chrome
- Graphics card: GTX1060 ..
Screenshots or videos of your changes
An interesting idea, but wouldn't it be easier to just make the "controls" area an accordion? Since this is for mobile, it would have the added bonus of require less scrolling back and forth between the generate button and the output
An interesting idea, but wouldn't it be easier to just make the "controls" area an accordion? Since this is for mobile, it would have the added bonus of require less scrolling back and forth between the generate button and the output
Its been mentioned several times, I would love to see the general sliders moved into an accordion. I use "ControlNet" and "Additional networks" as expandable /collapsible areas. Yet we can not collapse the main sliders. On mobile, this causes me to accidently make images 512x2048 as my finger bumps the settings trying to scroll up and down over and over again.
The first time this was proposed, @AUTOMATIC1111 said it would disrupt desktop use. But I really feel like it would be practically invisible. Just have the settings accordion expanded by default. And allow collapsing it when the use case arises.
The only impact to desktop users would be a tiny white arrow in the corner.
@VekkaAi Fantastic Friends/Family/Kids Mode! I have an extension that lets me collapse setting sliders into an accordion. It works well with your all settings go away button.
Settings expanded
Settings Collapsed
Settings GONE
Just a few lines in the User.css file.
/* Colors #################################################################### */
*/
/* Change the colors of the sliders */
input[type=range].svelte-jigama {
accent-color: var(--primary-500) !important;
}
/* Change the colors of the checkboxes */
#tab_extensions table input[type="checkbox"] {
accent-color: var(--primary-600) !important;
}
/* Change the space of the checkboxes */
div.svelte-1oo81b7>*:not(.absolute) {
border-radius: 8px !important;
}
/* New Colors */
.dark {
--button-primary-background-fill: linear-gradient(to bottom right, var(--primary-500), var(--primary-900)) !important;
--primary-50: #ebf2f3;
--primary-100: #c3d8db;
--primary-200: #9bbfc4;
--primary-300: #73a5ac;
--primary-400: #4b8b94;
--primary-500: #377F89;
--primary-600: #2c656d;
--primary-700: #214c52;
--primary-800: #163236;
--primary-900: #102629;
--primary-950: #0b191b;
--secondary-50: #eff6ff;
--secondary-100: #dbeafe;
--secondary-200: #bfdbfe;
--secondary-300: #93c5fd;
--secondary-400: #60a5fa;
--secondary-500: #3b82f6;
--secondary-600: #2563eb;
--secondary-700: #1d4ed8;
--secondary-800: #1e40af;
--secondary-900: #1e3a8a;
--secondary-950: #1d3660;
--neutral-50: #f9fafb;
--neutral-100: #f3f4f6;
--neutral-200: #e5e7eb;
--neutral-300: #d1d1d1;
--neutral-400: #898989;
--neutral-500: #646464;
--neutral-600: #505050;
--neutral-700: #2e2e2e;
--neutral-800: #262626;
--neutral-900: #1e1e1e;
--neutral-950: #141414;
}
Other useful CSS changes
/* Quick Settings #################################################################### */
/* Allow drop downs to get smaller to fit on phone screen without wrapping. */
#quicksettings > div, #quicksettings > fieldset {
max-width: 24em !important;
min-width: 14em !important;
}
/* LAYOUT ######################################################################### */
/* Image preview Wider */
#txt2img_results {
flex: 1.5 !important;
}
/* Move Networks below everything
This is useful because I have a lot of LoRA models and they can sit at the bottom of the screen*/
#tab_txt2img #txt2img_toprow ~ .form,
#tab_img2img #img2img_extra_networks {
order: 1 !important;
}
/* Make Impainting larger , (Crops i2i though)*/
#mode_img2img .gradio-image > div.fixed-height, #mode_img2img .gradio-image > div.fixed-height img {
height: 70vh !important;
max-height: 100vh !important;
min-height: 10vh !important;
}