mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
f73d5a647d
- squashed commit of 52 commits from PR #1327 don't log base64 progress images Fresh Build For WebUI [WebUI] Loopback Default False Fixes bugs/styling - Fixes missing web app state on new version: Adds stateReconciler to redux-persist. When we add more values to the state and then release the update app, they will be automatically merged in. Reseting web UI will be needed far less. 7159ec - Fixes console z-index - Moves reset web UI button to visible area Decreases gallery width on inpainting Increases workarea split padding to 1rem Adds missing tooltips to site header Changes inpainting controls settings to hover Fixes hotkeys and settings buttons not working Improves bounding box interactions - Bounding box can now be moved by dragging any of its edges - Bounding box does not affect drawing if already drawing a stroke - Can lock bounding box to draw directly on the bounding box edges - Removes spacebar-hold behaviour due to technical issues Fixes silent crash when init image too large To send the mask to the server, the UI rendered the mask onto the init image and sent the whole image. The mask was then cropped by the server. If the image was too large, the app silently failed. Maybe it exceeds the websocket size limit. Fixed by cropping the mask in the UI layer, sending only bounding-box-sized mask image data. Disabled bounding box settings when locked Styles image uploader Builds fresh bundle Improves bounding box interaction Added spacebar-hold-to-transform back. Address bounding box feedback - Adds back toggle to hide bounding box - Box quick toggle = q, normal toggle = shift + q - Styles canvas alert icons Adds hints when unable to invoke - Popover on Invoke button indicates why exactly it is disabled, e.g. prompt is empty, something else is processing, etc. - There may be more than one reason; all are displayed. Fix Inpainting Alerts Styling Preventing unnecessary re-renders across the app Code Split Inpaint Options Isolate features to their own components so they dont re-render the other stuff each time. [TESTING] Remove global isReady checking I dont believe this is need at all because the isready state is constantly updated when needed and tracked real time in the Redux store. This causes massive re-renders. @psychedelicious If this is absolutely essential for a reason that I do not see, please hit me up on Discord. Fresh Bundle Fix Bounding Box Settings re-rendering on brush stroke [Code Splitting] Bounding Box Options Isolated all bounding box components to trigger unnecessary re-renders. Still need to fix bounding box triggering re-renders on the control panel inside the canvas itself. But the options panel should be a good to go with this change. Inpainting Controls Code Spitting and Performance Codesplit the entirety of the inpainting controls. Created new selectors for each and every component to ensure there are no unnecessary re-renders. App feels a lot smoother. Fixes rerenders on ClearBrushHistory Fixes crash when requesting post-generation upscale/face restoration - Moves the inpainting paste to before the postprocessing. Removes unused isReady state Changes Report Bug icon to a bug Restores shift+q bounding box shortcut Adds alert for bounding box size to status icons Adds asCheckbox to IAIIconButton Rough draft of this. Not happy with the styling but it's clearer than having them look just like buttons. Fixes crash related to old value of progress_latents in state Styling changes and settings modal minor refactor Fixes: uploaded JPG images not loading Reworks CurrentImageButtons.tsx - Change all icons to FA iconset for consistency - Refactors IAIIconButton, IAIButton, IAIPopover to handle ref forwarding - Redesigns buttons into group Only generate 1 iteration when seed fixed & variations disabled Fixes progress images select Fixes edge case: upload over gets stuck while alt tabbing - Press esc to close it now Fixes display progress images select typing Fixes current image button rerenders Adds min width to ImageUploader Makes fast-latents in progress default Update Icon Button Checkbox Style Styling Fixes next/prev image buttons Refactor canvas buttons + more Add Save Intermediates Step Count For accurate mode only. Co-Authored-By: Richard Macarthy <richardmacarthy@protonmail.com> Restores "initial image" text Address feedback - moves mask clear button - fixes intermediates - shrinks inpainting icons by 10% Fix Loopback Styling Adds escape hotkey to close floating panels Readd Hotkey for Dual Display Updated Current Image Button Styling
2 lines
40 KiB
CSS
2 lines
40 KiB
CSS
[data-theme=dark]{--white: rgb(255, 255, 255);--root-bg-color: rgb(10, 10, 10);--background-color: rgb(20, 20, 26);--background-color-secondary: rgb(16, 16, 22);--text-color: rgb(255, 255, 255);--text-color-secondary: rgb(160, 162, 188);--subtext-color: rgb(24, 24, 34);--subtext-color-bright: rgb(48, 48, 64);--border-color: rgb(30, 30, 46);--border-color-light: rgb(60, 60, 76);--invalid: rgb(255, 75, 75);--invalid-secondary: rgb(120, 5, 5);--accent-color-dim: rgb(57, 25, 153);--accent-color: rgb(80, 40, 200);--accent-color-hover: rgb(104, 60, 230);--destructive-color: rgb(185, 55, 55);--destructive-color-hover: rgb(255, 75, 75);--warning-color: rgb(200, 88, 40);--warning-color-hover: rgb(230, 117, 60);--border-color-invalid: rgb(255, 80, 50);--box-shadow-color-invalid: rgb(210, 30, 10);--svg-color: rgb(24, 24, 34);--progress-bar-color: rgb(100, 50, 245);--prompt-bg-color: rgb(10, 10, 10);--btn-svg-color: rgb(255, 255, 255);--btn-grey: rgb(30, 32, 42);--btn-grey-hover: rgb(46, 48, 68);--btn-load-more: rgb(30, 32, 42);--btn-load-more-hover: rgb(54, 56, 66);--btn-checkbox-border-hover: rgb(46, 48, 68);--switch-bg-color: rgb(100, 102, 110);--switch-bg-active-color: rgb(80, 40, 200);--resizeable-handle-border-color: rgb(80, 82, 112);--tab-color: rgb(30, 32, 42);--tab-hover-color: rgb(36, 38, 48);--tab-list-bg: var(--accent-color);--tab-list-text: rgb(202, 204, 216);--tab-list-text-inactive: rgb(92, 94, 114);--tab-panel-bg: rgb(20, 22, 28);--metadata-bg-color: rgba(0, 0, 0, .7);--metadata-json-bg-color: rgba(255, 255, 255, .1);--status-good-color: rgb(125, 255, 100);--status-good-glow: rgb(40, 215, 40);--status-working-color: rgb(255, 175, 55);--status-working-glow: rgb(255, 160, 55);--status-bad-color: rgb(255, 90, 90);--status-bad-glow: rgb(255, 40, 40);--settings-modal-bg: rgb(30, 32, 42);--input-checkbox-bg: rgb(90, 90, 120);--input-checkbox-checked-bg: rgb(80, 40, 200);--input-checkbox-checked-tick: rgb(0, 0, 0);--input-border-color: rgb(140, 110, 255);--input-box-shadow-color: rgb(80, 30, 210);--error-level-info: rgb(200, 202, 224);--error-level-warning: rgb(255, 225, 105);--error-level-error: rgb(255, 81, 46);--console-bg-color: rgb(30, 30, 36);--console-icon-button-bg-color: rgb(50, 53, 64);--console-icon-button-bg-color-hover: rgb(70, 73, 84);--img2img-img-bg-color: rgb(30, 32, 42);--context-menu-bg-color: rgb(46, 48, 58);--context-menu-box-shadow: none;--context-menu-bg-color-hover: rgb(30, 32, 42);--floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(140, 101, 255, .5));--inpainting-alerts-bg: rgba(20, 20, 26, .75);--inpainting-alerts-icon-color: rgb(255, 255, 255);--inpainting-alerts-bg-active: rgb(80, 40, 200);--inpainting-alerts-icon-active: rgb(255, 255, 255);--inpainting-alerts-bg-alert: var(--invalid);--inpainting-alerts-icon-alert: rgb(255, 255, 255)}[data-theme=light]{--white: rgb(255, 255, 255);--root-bg-color: rgb(255, 255, 255);--background-color: rgb(220, 222, 224);--background-color-secondary: rgb(204, 206, 208);--text-color: rgb(0, 0, 0);--text-color-secondary: rgb(40, 40, 40);--subtext-color: rgb(24, 24, 34);--subtext-color-bright: rgb(142, 144, 146);--border-color: rgb(200, 200, 200);--border-color-light: rgb(147, 147, 147);--invalid: rgb(255, 75, 75);--invalid-secondary: rgb(120, 5, 5);--accent-color-dim: rgb(186, 146, 0);--accent-color: rgb(235, 185, 5);--accent-color-hover: rgb(255, 200, 0);--destructive-color: rgb(237, 51, 51);--destructive-color-hover: rgb(255, 55, 55);--warning-color: rgb(224, 142, 42);--warning-color-hover: rgb(255, 167, 60);--border-color-invalid: rgb(255, 80, 50);--box-shadow-color-invalid: none;--svg-color: rgb(186, 188, 190);--progress-bar-color: rgb(235, 185, 5);--prompt-bg-color: rgb(225, 227, 229);--btn-svg-color: rgb(0, 0, 0);--btn-grey: rgb(220, 222, 224);--btn-grey-hover: rgb(230, 232, 234);--btn-load-more: rgb(202, 204, 206);--btn-load-more-hover: rgb(178, 180, 182);--btn-checkbox-border-hover: rgb(176, 178, 182);--switch-bg-color: rgb(178, 180, 182);--switch-bg-active-color: rgb(235, 185, 5);--resizeable-handle-border-color: rgb(160, 162, 164);--tab-color: rgb(202, 204, 206);--tab-hover-color: rgb(206, 208, 210);--tab-list-bg: rgb(235, 185, 5);--tab-list-text: rgb(0, 0, 0);--tab-list-text-inactive: rgb(106, 108, 110);--tab-panel-bg: rgb(214, 216, 218);--metadata-bg-color: rgba(230, 230, 230, .9);--metadata-json-bg-color: rgba(0, 0, 0, .1);--status-good-color: rgb(21, 126, 0);--status-good-glow: var(--background-color);--status-working-color: rgb(235, 141, 0);--status-working-glow: var(--background-color);--status-bad-color: rgb(202, 0, 0);--status-bad-glow: var(--background-color);--settings-modal-bg: rgb(202, 204, 206);--input-checkbox-bg: rgb(90, 90, 120);--input-checkbox-checked-bg: rgb(235, 185, 5);--input-checkbox-checked-tick: rgb(0, 0, 0);--input-border-color: rgb(0, 0, 0);--input-box-shadow-color: none;--error-level-info: rgb(42, 42, 42);--error-level-warning: rgb(173, 121, 0);--error-level-error: rgb(145, 14, 0);--console-bg-color: rgb(220, 224, 230);--console-icon-button-bg-color: var(--switch-bg-color);--console-icon-button-bg-color-hover: var(--resizeable-handle-border-color);--img2img-img-bg-color: rgb(180, 182, 184);--context-menu-bg-color: var(--background-color);--context-menu-box-shadow: 0px 10px 38px -10px rgba(22, 23, 24, .35), 0px 10px 20px -15px rgba(22, 23, 24, .2);--context-menu-bg-color-hover: var(--background-color-secondary);--floating-button-drop-shadow: drop-shadow(0 0 1rem rgba(0, 0, 0, .3));--inpainting-alerts-bg: rgba(220, 222, 224, .75);--inpainting-alerts-icon-color: rgb(0, 0, 0);--inpainting-alerts-bg-active: rgb(255, 200, 0);--inpainting-alerts-icon-active: rgb(0, 0, 0);--inpainting-alerts-bg-alert: var(--invalid);--inpainting-alerts-icon-alert: rgb(0, 0, 0)}@font-face{font-family:Inter;src:url(./Inter.b9a8e5e2.ttf);font-display:swap;font-weight:400;font-style:normal}@font-face{font-family:Inter;src:url(./Inter-Bold.790c108b.ttf);font-display:swap;font-weight:600;font-style:normal}@keyframes slideOut{0%{transform:translate(10rem)}to{transform:translate(0)}}@keyframes pulse{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}.checkerboard{background-position:0px 0px,10px 10px;background-size:20px 20px;background-image:linear-gradient(45deg,#eee 25%,transparent 25%,transparent 75%,#eee 75%,#eee 100%),linear-gradient(45deg,#eee 25%,white 25%,white 75%,#eee 75%,#eee 100%)}.App{display:grid;width:100vw;height:100vh;background-color:var(--background-color)}.app-content{display:grid;row-gap:1rem;padding:1rem;grid-auto-rows:min-content auto;width:calc(100vw + -0px);height:calc(100vh - .3rem)}.site-header{display:grid;grid-template-columns:auto max-content}.site-header-left-side{display:flex;align-items:center;column-gap:.7rem;padding-left:.5rem}.site-header-left-side img{width:32px;height:32px}.site-header-left-side h1{font-size:1.4rem}.site-header-right-side{display:flex;align-items:center;column-gap:.5rem}.status{font-size:.8rem;font-weight:700}.status-good{color:var(--status-good-color);text-shadow:0 0 10px var(--status-good-glow)}.status-bad{color:var(--status-bad-color);text-shadow:0 0 10px var(--status-bad-glow)}.status-working{color:var(--status-working-color);text-shadow:0 0 10px var(--status-working-glow)}.settings-modal{background-color:var(--settings-modal-bg)!important;max-height:36rem;font-family:Inter}.settings-modal .settings-modal-content{display:grid;row-gap:2rem;overflow-y:scroll}.settings-modal .settings-modal-header{font-weight:700}.settings-modal .settings-modal-items{display:grid;row-gap:.5rem}.settings-modal .settings-modal-items .settings-modal-item{display:grid;grid-auto-flow:column;background-color:var(--background-color);padding:.4rem 1rem;border-radius:.5rem;align-items:center;width:100%}.settings-modal .settings-modal-reset{display:grid;row-gap:1rem}.settings-modal .settings-modal-reset button{min-width:100%;min-height:100%;background-color:var(--destructive-color)!important}.settings-modal .settings-modal-reset button:hover{background-color:var(--destructive-color-hover)!important}.settings-modal .settings-modal-reset button:disabled{background-color:#2d2d37!important}.settings-modal .settings-modal-reset button:disabled:hover{background-color:#2d2d37!important}.settings-modal .settings-modal-reset button svg{width:20px;height:20px;color:var(--btn-svg-color)}.model-list-accordion{outline:none;padding:.25rem}.model-list-accordion button{padding:0;margin:0}.model-list-accordion button:hover{background-color:unset}.model-list-accordion div{border:none!important}.model-list-accordion .model-list-button{display:flex;flex-direction:row;row-gap:.5rem;justify-content:space-between;align-items:center;width:100%}.model-list-accordion .model-list-header-hint{color:var(--text-color-secondary);font-weight:400}.model-list-accordion .model-list-list{display:flex;flex-direction:column;row-gap:.5rem}.model-list-accordion .model-list-list .model-list-item{display:flex;column-gap:.5rem;width:100%;justify-content:space-between;align-items:center}.model-list-accordion .model-list-list .model-list-item .model-list-item-description{font-size:.9rem}.model-list-accordion .model-list-list .model-list-item .model-list-item-status.active{color:var(--status-good-color)}.model-list-accordion .model-list-list .model-list-item .model-list-item-status.cached{color:var(--status-working-color)}.model-list-accordion .model-list-list .model-list-item .model-list-item-status.not-loaded{color:var(--text-color-secondary)}.model-list-accordion .model-list-list .model-list-item .model-list-item-load-btn button{padding:.5rem}.hotkeys-modal{width:36rem!important;max-width:36rem!important;display:grid;padding:1rem;background-color:var(--settings-modal-bg)!important;row-gap:1rem;font-family:Inter}.hotkeys-modal h1{font-size:1.2rem;font-weight:700}.hotkeys-modal h2{font-weight:700}.hotkeys-modal-button{display:flex;align-items:center;justify-content:space-between}.hotkeys-modal-items{max-height:36rem;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.hotkeys-modal-items::-webkit-scrollbar{display:none}.hotkeys-modal-items .chakra-accordion{display:grid;row-gap:.5rem}.hotkeys-modal-items .chakra-accordion__item{border:none;border-radius:.3rem;background-color:var(--tab-hover-color)}.hotkeys-modal-items button{border-radius:.3rem!important}.hotkeys-modal-items button[aria-expanded=true]{background-color:var(--tab-hover-color);border-radius:.3rem}.hotkey-modal-category{display:grid;row-gap:.5rem}.hotkey-modal-item{display:grid;grid-template-columns:auto max-content;justify-content:space-between;align-items:center;background-color:var(--background-color);padding:.5rem 1rem;border-radius:.3rem}.hotkey-modal-item .hotkey-info{display:grid}.hotkey-modal-item .hotkey-info .hotkey-title{font-weight:700}.hotkey-modal-item .hotkey-info .hotkey-description{font-size:.9rem;color:var(--text-color-secondary)}.hotkey-modal-item .hotkey-key{font-size:.8rem;font-weight:700;border:2px solid var(--settings-modal-bg);padding:.2rem .5rem;border-radius:.3rem}.console{width:100vw;display:flex;flex-direction:column;background:var(--console-bg-color);overflow:auto;direction:column;font-family:monospace;padding:0 1rem 1rem 3rem;border-top-width:.3rem;border-color:var(--resizeable-handle-border-color)}.console .console-info-color{color:var(--error-level-info)}.console .console-warning-color{color:var(--error-level-warning)}.console .console-error-color{color:var(--status-bad-color)}.console .console-entry{display:flex;column-gap:.5rem}.console .console-entry .console-timestamp{font-weight:semibold}.console .console-entry .console-message{word-break:break-all}.console-toggle-icon-button{background:var(--console-icon-button-bg-color)!important;position:fixed!important;left:.5rem;bottom:.5rem;z-index:10000}.console-toggle-icon-button:hover{background:var(--console-icon-button-bg-color-hover)!important}.console-toggle-icon-button[data-error-seen=true],.console-toggle-icon-button[data-error-seen=true]:hover{background:var(--status-bad-color)!important}.console-autoscroll-icon-button{background:var(--console-icon-button-bg-color)!important;position:fixed!important;left:.5rem;bottom:3rem;z-index:10000}.console-autoscroll-icon-button:hover{background:var(--console-icon-button-bg-color-hover)!important}.console-autoscroll-icon-button[data-autoscroll-enabled=true]{background:var(--accent-color)!important}.console-autoscroll-icon-button[data-autoscroll-enabled=true]:hover{background:var(--accent-color-hover)!important}.prompt-bar{display:grid;row-gap:1rem}.prompt-bar input,.prompt-bar textarea{background-color:var(--prompt-bg-color);font-size:1rem;border:2px solid var(--border-color)}.prompt-bar input:hover,.prompt-bar textarea:hover{border:2px solid var(--border-color-light)}.prompt-bar input:focus-visible,.prompt-bar textarea:focus-visible{border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.prompt-bar input[aria-invalid=true],.prompt-bar textarea[aria-invalid=true]{border:2px solid var(--border-color-invalid);box-shadow:0 0 10px 0 var(--box-shadow-color-invalid)}.prompt-bar input:disabled,.prompt-bar textarea:disabled{border:2px solid var(--border-color);box-shadow:none}.prompt-bar textarea{min-height:10rem}.process-buttons{display:flex;column-gap:.5rem}.invoke-btn{flex-grow:1;width:100%;min-width:100%;min-height:100%;background-color:var(--accent-color)!important}.invoke-btn svg{width:18px!important;height:18px!important}.invoke-btn:hover{background-color:var(--accent-color-hover)!important}.invoke-btn:disabled{background-color:#2d2d37!important}.invoke-btn:disabled:hover{background-color:#2d2d37!important}.invoke-btn svg{width:20px;height:20px;color:var(--btn-svg-color)}.cancel-btn{min-width:100%;min-height:100%;background-color:var(--destructive-color)!important}.cancel-btn:hover{background-color:var(--destructive-color-hover)!important}.cancel-btn:disabled{background-color:#2d2d37!important}.cancel-btn:disabled:hover{background-color:#2d2d37!important}.cancel-btn svg{width:20px;height:20px;color:var(--btn-svg-color)}.main-options,.main-options-list{display:grid;row-gap:1rem}.main-options-row{display:grid;grid-template-columns:repeat(3,auto);column-gap:1rem;max-width:22.5rem}.main-option-block{border-radius:.5rem;display:grid!important;grid-template-columns:auto!important;row-gap:.4rem}.main-option-block .invokeai__number-input-form-label,.main-option-block .invokeai__select-label{width:100%;font-size:.9rem!important;font-weight:700}.main-option-block .number-input-entry{padding:0;height:2.4rem}.main-option-block .iai-select-picker{height:2.4rem;border-radius:.3rem}.advanced-options-checkbox{padding:1rem;font-weight:700}.advanced-settings{display:grid;row-gap:.5rem}.advanced-settings-item{display:grid;max-width:22.5rem;border:none;border-top:0px;border-radius:.4rem}.advanced-settings-item[aria-expanded=true]{background-color:var(--tab-hover-color);border-radius:0 0 .4rem .4rem}.advanced-settings-panel{background-color:var(--tab-panel-bg);border-radius:0 0 .4rem .4rem;border:2px solid var(--tab-hover-color)}.advanced-settings-header{border-radius:.4rem}.advanced-settings-header[aria-expanded=true]{background-color:var(--tab-color);border-radius:.4rem .4rem 0 0}.advanced-settings-header:hover{background-color:var(--tab-hover-color)!important}.upscale-options{display:grid;grid-template-columns:auto 1fr;column-gap:1rem}.inpainting-bounding-box-settings{display:flex;flex-direction:column;border-radius:.4rem;border:2px solid var(--tab-color)}.inpainting-bounding-box-header{background-color:var(--tab-color);display:flex;flex-direction:row;justify-content:space-between;padding:.5rem 1rem;border-radius:.4rem .4rem 0 0;align-items:center}.inpainting-bounding-box-header button{width:.5rem!important;height:1.2rem!important;background:none!important}.inpainting-bounding-box-header button:hover{background:none!important}.inpainting-bounding-box-header p{font-weight:700}.inpainting-bounding-box-settings-items{padding:1rem;display:flex;flex-direction:column;row-gap:1rem}.inpainting-bounding-box-settings-items .inpainting-bounding-box-reset-icon-btn{background-color:var(--btn-load-more)!important}.inpainting-bounding-box-settings-items .inpainting-bounding-box-reset-icon-btn:hover{background-color:var(--btn-load-more-hover)!important}.inpainting-bounding-box-dimensions-slider-numberinput{display:grid;grid-template-columns:repeat(3,auto);column-gap:1rem}.inpainting-bounding-box-darken{width:max-content}.progress-bar{background-color:var(--root-bg-color);height:.3rem!important;z-index:99}.progress-bar div{background-color:var(--progress-bar-color)}.progress-bar div[data-indeterminate]{background-color:unset;background-image:linear-gradient(to right,transparent 0%,var(--progress-bar-color) 50%,transparent 100%)}.current-image-area{display:flex;flex-direction:column;height:100%;row-gap:1rem;background-color:var(--background-color-secondary);border-radius:.5rem}.current-image-preview{position:relative;justify-content:center;align-items:center;display:flex;width:100%;height:100%}.current-image-preview img{background-color:var(--img2img-img-bg-color);border-radius:.5rem;object-fit:contain;max-width:100%;max-height:100%;height:auto;position:absolute}.current-image-metadata{grid-area:current-image-preview}.current-image-next-prev-buttons{grid-area:current-image-content;display:flex;justify-content:space-between;z-index:1;height:100%;width:100%;pointer-events:none}.next-prev-button-trigger-area{width:7rem;height:100%;width:15%;display:grid;align-items:center;pointer-events:auto}.next-prev-button-trigger-area.prev-button-trigger-area{justify-content:flex-start}.next-prev-button-trigger-area.next-button-trigger-area{justify-content:flex-end}.next-prev-button{font-size:4rem;fill:var(--white);filter:drop-shadow(0 0 1rem var(--text-color-secondary));opacity:70%}.current-image-display-placeholder{background-color:var(--background-color-secondary);display:grid;display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:.5rem}.current-image-display-placeholder svg{width:10rem;height:10rem;color:var(--svg-color)}.current-image-options{width:100%;display:flex;justify-content:center;align-items:center;column-gap:.5rem}.current-image-options .current-image-send-to-popover,.current-image-options .current-image-postprocessing-popover{display:flex;flex-direction:column;row-gap:.5rem;max-width:25rem}.current-image-options .chakra-popover__popper{z-index:11}.image-gallery-wrapper-enter{transform:translate(150%)}.image-gallery-wrapper-enter-active{transform:translate(0);transition:all .12s ease-out}.image-gallery-wrapper-exit{transform:translate(0)}.image-gallery-wrapper-exit-active{transform:translate(150%);transition:all .12s ease-out}.image-gallery-wrapper[data-pinned=false]{position:fixed;height:100vh;top:0;right:0}.image-gallery-wrapper[data-pinned=false] .image-gallery-popup{border-radius:0;box-shadow:0 0 1rem var(--text-color-a3)}.image-gallery-wrapper[data-pinned=false] .image-gallery-popup .image-gallery-container{max-height:calc(100vh + 4.7rem)}.image-gallery-wrapper .image-gallery-popup{background-color:var(--tab-color);padding:1rem;display:flex;flex-direction:column;row-gap:1rem;border-radius:.5rem;border-left-width:.3rem;border-color:var(--resizeable-handle-border-color)}.image-gallery-wrapper .image-gallery-popup[data-resize-alert=true]{border-color:var(--status-bad-color)}.image-gallery-wrapper .image-gallery-popup .image-gallery-header{display:flex;align-items:center;column-gap:.5rem;justify-content:space-between}.image-gallery-wrapper .image-gallery-popup .image-gallery-header div{display:flex;column-gap:.5rem}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-icon-btn{background-color:var(--btn-load-more)!important}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-icon-btn:hover{background-color:var(--btn-load-more-hover)!important}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-settings-popover{display:flex;flex-direction:column;row-gap:.5rem}.image-gallery-wrapper .image-gallery-popup .image-gallery-header .image-gallery-settings-popover div{display:flex;column-gap:.5rem;align-items:center;justify-content:space-between}.image-gallery-wrapper .image-gallery-popup .image-gallery-header h1{font-weight:700}.image-gallery-wrapper .image-gallery-popup .image-gallery-container{display:flex;flex-direction:column;max-height:calc(100vh - (70px + 7rem));overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.image-gallery-wrapper .image-gallery-popup .image-gallery-container::-webkit-scrollbar{display:none}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder{display:flex;flex-direction:column;background-color:var(--background-color-secondary);border-radius:.5rem;place-items:center;padding:2rem;text-align:center}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder p{color:var(--subtext-color-bright);font-family:Inter}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder svg{width:5rem;height:5rem;color:var(--svg-color)}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-load-more-btn{background-color:var(--btn-load-more)!important;font-size:.85rem!important;padding:.5rem;margin-top:1rem}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-load-more-btn:disabled:hover{background-color:var(--btn-load-more)!important}.image-gallery-wrapper .image-gallery-popup .image-gallery-container .image-gallery-load-more-btn:hover{background-color:var(--btn-load-more-hover)!important}.image-gallery-category-btn-group{width:100%!important;column-gap:0!important;justify-content:stretch!important}.image-gallery-category-btn-group button{flex-grow:1}.image-gallery-category-btn-group button[data-selected=true]{background-color:var(--accent-color)}.image-gallery-category-btn-group button[data-selected=true]:hover{background-color:var(--accent-color-hover)}.image-gallery{display:grid;grid-gap:.5rem}.image-gallery .hoverable-image{padding:.5rem;position:relative}.image-gallery .hoverable-image:before{content:"";display:block;padding-bottom:100%}.image-gallery .hoverable-image .hoverable-image-image{position:absolute;max-width:100%;top:50%;left:50%;transform:translate(-50%,-50%)}.hoverable-image{display:flex;justify-content:center;transition:transform .2s ease-out}.hoverable-image:hover{cursor:pointer;border-radius:.5rem;z-index:2}.hoverable-image .hoverable-image-image{width:100%;height:100%;max-width:100%;max-height:100%}.hoverable-image .hoverable-image-delete-button{position:absolute;top:.25rem;right:.25rem}.hoverable-image .hoverable-image-content{display:flex;position:absolute;top:0;left:0;width:100%;height:100%;align-items:center;justify-content:center}.hoverable-image .hoverable-image-content .hoverable-image-check{fill:var(--status-good-color)}.hoverable-image .hoverable-image-icons{position:absolute;bottom:-2rem;display:grid;width:min-content;grid-template-columns:repeat(2,max-content);border-radius:.4rem;background-color:var(--background-color-secondary);padding:.2rem;gap:.2rem;grid-auto-rows:max-content}.hoverable-image .hoverable-image-icons button{width:12px;height:12px;border-radius:.2rem;padding:10px 0;flex-shrink:2}.hoverable-image .hoverable-image-icons button svg{width:12px;height:12px}.hoverable-image-context-menu{z-index:15;padding:.4rem;border-radius:.25rem;background-color:var(--context-menu-bg-color);box-shadow:var(--context-menu-box-shadow)}.hoverable-image-context-menu [role=menuitem]{font-size:.8rem;line-height:1rem;border-radius:3px;display:flex;align-items:center;height:1.75rem;padding:0 .5rem;position:relative;user-select:none;cursor:pointer;outline:none}.hoverable-image-context-menu [role=menuitem][data-disabled]{color:gray;pointer-events:none;cursor:not-allowed}.hoverable-image-context-menu [role=menuitem][data-warning]{color:var(--status-bad-color)}.hoverable-image-context-menu [role=menuitem][data-highlighted]{background-color:var(--context-menu-bg-color-hover)}.image-metadata-viewer{position:absolute;top:0;width:100%;border-radius:.5rem;padding:1rem;background-color:var(--metadata-bg-color);overflow:scroll;max-height:calc(100vh - (70px + 5.4rem));height:100%;z-index:10}.image-json-viewer{border-radius:.5rem;margin:0 .5rem 1rem;padding:1rem;overflow-x:scroll;word-break:break-all;background-color:var(--metadata-json-bg-color)}.app-tabs{display:grid!important;grid-template-columns:min-content auto;column-gap:1rem;height:calc(100vh - (70px + 1rem))}.app-tabs-list{display:grid;row-gap:.3rem;grid-auto-rows:min-content;color:var(--tab-list-text-inactive)}.app-tabs-list button{font-size:.85rem;padding:.5rem}.app-tabs-list button:hover{background-color:var(--tab-hover-color);border-radius:.3rem}.app-tabs-list button svg{width:26px;height:26px}.app-tabs-list button[aria-selected=true]{background-color:var(--tab-list-bg);color:var(--tab-list-text);font-weight:700;border-radius:.3rem;border:none}.app-tabs-panels .app-tabs-panel{padding:0;height:100%}.workarea-wrapper{position:relative;width:100%;height:100%}.workarea-wrapper .workarea-main{display:flex;column-gap:1rem;height:100%}.workarea-wrapper .workarea-main .workarea-children-wrapper{position:relative;width:100%;height:100%}.workarea-wrapper .workarea-main .workarea-split-view{width:100%;height:100%;display:grid;grid-template-columns:1fr 1fr;background-color:var(--background-color-secondary);border-radius:.5rem}.workarea-wrapper .workarea-main .workarea-single-view{width:100%;height:100%;background-color:var(--background-color-secondary);border-radius:.5rem}.workarea-wrapper .workarea-main .workarea-split-view-left,.workarea-wrapper .workarea-main .workarea-split-view-right{display:flex;flex-direction:column;height:100%;width:100%;row-gap:1rem;background-color:var(--background-color-secondary);border-radius:.5rem;padding:1rem}.workarea-wrapper .workarea-main .workarea-split-view-left{padding-right:.5rem}.workarea-wrapper .workarea-main .workarea-split-view-right{padding-left:.5rem}.workarea-split-button{position:absolute;cursor:pointer;padding:.5rem;top:0;right:0;z-index:20}.workarea-split-button[data-selected=true]{top:0;right:0}.workarea-split-button[data-selected=true] svg{opacity:1}.workarea-split-button svg{opacity:.5}.options-panel-wrapper-enter{transform:translate(-150%)}.options-panel-wrapper-enter-active{transform:translate(0);transition:all .12s ease-out}.options-panel-wrapper-exit{transform:translate(0)}.options-panel-wrapper-exit-active{transform:translate(-150%);transition:all .12s ease-out}.options-panel-wrapper{background-color:var(--background-color);height:calc(100vh - (70px + 1rem));width:22.5rem;max-width:22.5rem;flex-shrink:0;position:relative;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.options-panel-wrapper::-webkit-scrollbar{display:none}.options-panel-wrapper .options-panel{display:flex;flex-direction:column;row-gap:1rem;height:100%;-ms-overflow-style:none;scrollbar-width:none;background-color:var(--background-color)!important}.options-panel-wrapper .options-panel::-webkit-scrollbar{display:none}.options-panel-wrapper[data-pinned=false]{z-index:20;position:fixed;top:0;left:0;filter:var(--floating-panel-drop-shadow);width:24.5rem;max-width:24.5rem;height:100%}.options-panel-wrapper[data-pinned=false] .options-panel-margin{margin:1rem}.options-panel-wrapper .options-panel-pin-button{position:absolute;cursor:pointer;padding:.5rem;top:1rem;right:1rem;z-index:20}.options-panel-wrapper .options-panel-pin-button[data-selected=true]{top:0;right:0}.options-panel-wrapper .options-panel-pin-button svg{opacity:.5}.invoke-ai-logo-wrapper{display:flex;align-items:center;column-gap:.7rem;padding-left:.5rem;padding-top:.3rem}.invoke-ai-logo-wrapper img{width:32px;height:32px}.invoke-ai-logo-wrapper h1{font-size:1.4rem}.text-to-image-area{padding:1rem;height:100%}.image-to-image-area{display:flex;flex-direction:column;row-gap:1rem;width:100%;height:100%}.image-to-image-strength-main-option{display:grid;grid-template-columns:none!important}.image-to-image-strength-main-option .number-input-entry{padding:0 1rem}.init-image-preview-header{display:flex;align-items:center;justify-content:center;width:100%}.init-image-preview-header h2{font-weight:700;font-size:.9rem}.init-image-preview{position:relative;height:100%;width:100%;display:flex;align-items:center;justify-content:center}.init-image-preview img{border-radius:.5rem;object-fit:contain;position:absolute}.image-to-image-current-image-display{position:relative}.floating-show-hide-button{position:absolute!important;top:50%;transform:translateY(-50%);z-index:20;padding:0;min-width:1rem;min-height:12rem;background-color:var(--btn-grey)!important}.floating-show-hide-button.left{left:0;border-radius:0 .5rem .5rem 0!important}.floating-show-hide-button.right{right:0;border-radius:.5rem 0 0 .5rem!important}.floating-show-hide-button:hover{background-color:var(--btn-grey-hover)!important}.floating-show-hide-button:disabled{background-color:#2d2d37!important}.floating-show-hide-button:disabled:hover{background-color:#2d2d37!important}.floating-show-hide-button svg{width:20px;height:20px;color:var(--btn-svg-color)}.show-hide-button-options{position:absolute!important;transform:translateY(-50%);z-index:20;min-width:2rem!important;top:50%;left:calc(42px + 2rem);border-radius:0 .5rem .5rem 0!important;display:flex;flex-direction:column;row-gap:.5rem}.show-hide-button-options button{border-radius:0 .3rem .3rem 0;background-color:var(--btn-grey)}.show-hide-button-options button svg{width:18px}.inpainting-main-area{display:flex;flex-direction:column;align-items:center;row-gap:1rem;width:100%;height:100%}.inpainting-main-area .inpainting-settings,.inpainting-main-area .inpainting-settings .inpainting-buttons-group{display:flex;align-items:center;column-gap:.5rem}.inpainting-main-area .inpainting-settings .inpainting-button-dropdown{display:flex;flex-direction:column;row-gap:.5rem}.inpainting-main-area .inpainting-settings .inpainting-color-picker{margin-left:1rem!important}.inpainting-main-area .inpainting-settings .inpainting-brush-options{display:flex;align-items:center;column-gap:1rem}.inpainting-main-area .inpainting-canvas-area{display:flex;flex-direction:column;align-items:center;row-gap:1rem;width:100%;height:100%}.inpainting-main-area .inpainting-canvas-spiner{display:flex;align-items:center;width:100%;height:100%}.inpainting-main-area .inpainting-canvas-container{display:flex;align-items:center;justify-content:center;height:100%;width:100%;border-radius:.5rem}.inpainting-main-area .inpainting-canvas-container .inpainting-canvas-wrapper{position:relative}.inpainting-main-area .inpainting-canvas-container .inpainting-canvas-stage{border-radius:.5rem}.inpainting-main-area .inpainting-canvas-container .inpainting-canvas-stage canvas{border-radius:.5rem}.inpainting-options-btn{min-height:2rem}.inpainting-alerts{position:absolute;top:0;left:0;z-index:2;margin:.5rem}.inpainting-alerts button{background-color:var(--inpainting-alerts-bg)}.inpainting-alerts button svg{fill:var(--inpainting-alerts-icon-color)}.inpainting-alerts button[data-selected=true]{background-color:var(--inpainting-alerts-bg-active)}.inpainting-alerts button[data-selected=true] svg{fill:var(--inpainting-alerts-icon-active)}.inpainting-alerts button[data-alert=true]{background-color:var(--inpainting-alerts-bg-alert)}.inpainting-alerts button[data-alert=true] svg{fill:var(--inpainting-alerts-icon-alert)}.invokeai__number-input-form-control{display:grid;grid-template-columns:max-content auto;align-items:center}.invokeai__number-input-form-control .invokeai__number-input-form-label{color:var(--text-color-secondary);margin-right:0;font-size:1rem;margin-bottom:0;flex-grow:2;white-space:nowrap;padding-right:1rem}.invokeai__number-input-form-control .invokeai__number-input-form-label[data-focus]+.invokeai__number-input-root{outline:none;border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.invokeai__number-input-form-control .invokeai__number-input-form-label[aria-invalid=true]+.invokeai__number-input-root{outline:none;border:2px solid var(--border-color-invalid);box-shadow:0 0 10px 0 var(--box-shadow-color-invalid)}.invokeai__number-input-form-control .invokeai__number-input-root{height:2rem;display:grid;grid-template-columns:auto max-content;column-gap:.5rem;align-items:center;background-color:var(--background-color-secondary);border:2px solid var(--border-color);border-radius:.2rem}.invokeai__number-input-form-control .invokeai__number-input-field{border:none;font-weight:700;width:100%;height:auto;padding:0;font-size:.9rem;padding-left:.5rem;padding-right:.5rem}.invokeai__number-input-form-control .invokeai__number-input-field:focus{outline:none;box-shadow:none}.invokeai__number-input-form-control .invokeai__number-input-field:disabled{opacity:.2}.invokeai__number-input-form-control .invokeai__number-input-stepper{display:grid;padding-right:.5rem}.invokeai__number-input-form-control .invokeai__number-input-stepper .invokeai__number-input-stepper-button{border:none;padding:0 .5rem;margin:0 -.5rem}.invokeai__number-input-form-control .invokeai__number-input-stepper .invokeai__number-input-stepper-button svg{width:10px;height:10px}.input{display:grid;grid-template-columns:max-content auto;column-gap:1rem;align-items:center}.input .input-label{color:var(--text-color-secondary);margin-right:0}.input .input-entry{background-color:var(--background-color-secondary);border:2px solid var(--border-color);border-radius:.2rem;font-weight:700}.input .input-entry:focus{outline:none;border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.input .input-entry:disabled{opacity:.2}.input .input-entry[aria-invalid=true]{outline:none;border:2px solid var(--border-color-invalid);box-shadow:0 0 10px 0 var(--box-shadow-color-invalid)}.invokeai__icon-button{background-color:var(--btn-grey);cursor:pointer}.invokeai__icon-button:hover{background-color:var(--btn-grey-hover)}.invokeai__icon-button[data-selected=true]{background-color:var(--accent-color)}.invokeai__icon-button[data-selected=true]:hover{background-color:var(--accent-color-hover)}.invokeai__icon-button[disabled]{cursor:not-allowed}.invokeai__icon-button[data-variant=link],.invokeai__icon-button[data-variant=link]:hover{background:none!important}.invokeai__icon-button[data-selected=true]{border-color:var(--accent-color)}.invokeai__icon-button[data-selected=true]:hover{border-color:var(--accent-color-hover)}.invokeai__icon-button[data-alert=true]{animation-name:pulseColor;animation-duration:1s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}.invokeai__icon-button[data-alert=true]:hover{animation:none;background-color:var(--accent-color-hover)}.invokeai__icon-button[data-as-checkbox=true]{background-color:var(--btn-grey);border:3px solid var(--btn-grey)}.invokeai__icon-button[data-as-checkbox=true] svg{fill:var(--text-color)}.invokeai__icon-button[data-as-checkbox=true]:hover{background-color:var(--btn-grey);border-color:var(--btn-checkbox-border-hover)}.invokeai__icon-button[data-as-checkbox=true]:hover svg{fill:var(--text-color)}@keyframes pulseColor{0%{background-color:var(--accent-color)}50%{background-color:var(--accent-color-dim)}to{background-color:var(--accent-color)}}.invokeai__button{justify-content:space-between}.invokeai__switch-form-control .invokeai__switch-form-label{display:flex;column-gap:1rem;justify-content:space-between;align-items:center;color:var(--text-color-secondary);font-size:1rem;margin-right:0;margin-bottom:.1rem;white-space:nowrap;width:auto}.invokeai__switch-form-control .invokeai__switch-form-label .invokeai__switch-root span{background-color:var(--switch-bg-color)}.invokeai__switch-form-control .invokeai__switch-form-label .invokeai__switch-root span span{background-color:var(--white)}.invokeai__switch-form-control .invokeai__switch-form-label .invokeai__switch-root[data-checked] span{background:var(--switch-bg-active-color)}.invokeai__switch-form-control .invokeai__switch-form-label .invokeai__switch-root[data-checked] span span{background-color:var(--white)}.invokeai__select{display:flex;column-gap:1rem;align-items:center;width:max-content}.invokeai__select .invokeai__select-label{color:var(--text-color-secondary);margin-right:0}.invokeai__select .invokeai__select-picker{border:2px solid var(--border-color);background-color:var(--background-color-secondary);font-weight:700;height:2rem;border-radius:.2rem}.invokeai__select .invokeai__select-picker:focus{outline:none;border:2px solid var(--input-border-color);box-shadow:0 0 10px 0 var(--input-box-shadow-color)}.invokeai__select .invokeai__select-option{background-color:var(--background-color-secondary)}.invokeai__slider-form-control{display:flex;column-gap:1rem;justify-content:space-between;align-items:center;width:max-content;padding-right:.25rem}.invokeai__slider-form-control .invokeai__slider-inner-container{display:flex;column-gap:.5rem}.invokeai__slider-form-control .invokeai__slider-inner-container .invokeai__slider-form-label{color:var(--text-color-secondary);margin:0;margin-right:.5rem;margin-bottom:.1rem}.invokeai__slider-form-control .invokeai__slider-inner-container .invokeai__slider-root .invokeai__slider-filled-track{background-color:var(--accent-color-hover)}.invokeai__slider-form-control .invokeai__slider-inner-container .invokeai__slider-root .invokeai__slider-track{background-color:var(--text-color-secondary);height:5px;border-radius:9999px}.invokeai__checkbox .chakra-checkbox__label{margin-top:1px;color:var(--text-color-secondary);font-size:.9rem}.invokeai__checkbox .chakra-checkbox__control{width:1rem;height:1rem;border:none;border-radius:.2rem;background-color:var(--input-checkbox-bg)}.invokeai__checkbox .chakra-checkbox__control svg{width:.6rem;height:.6rem;stroke-width:3px!important}.invokeai__checkbox .chakra-checkbox__control[data-checked]{color:var(--text-color);background-color:var(--input-checkbox-checked-bg)}.invokeai__popover-content{min-width:unset;width:unset!important;padding:1rem;border-radius:.5rem!important;background-color:var(--background-color)!important;border:2px solid var(--border-color)!important}.invokeai__popover-content .invokeai__popover-arrow{background-color:var(--background-color)!important}.invokeai__color-picker .react-colorful__hue-pointer,.invokeai__color-picker .react-colorful__saturation-pointer{width:1.5rem;height:1.5rem;border-color:var(--white)}.dropzone-container{position:absolute;top:0;left:0;width:100vw;height:100vh;z-index:999;backdrop-filter:blur(20px)}.dropzone-container .dropzone-overlay{opacity:.5;width:100%;height:100%;display:flex;flex-direction:column;row-gap:1rem;align-items:center;justify-content:center;background-color:var(--background-color)}.dropzone-container .dropzone-overlay.is-drag-accept{box-shadow:inset 0 0 20rem 1rem var(--accent-color)}.dropzone-container .dropzone-overlay.is-drag-reject{box-shadow:inset 0 0 20rem 1rem var(--status-bad-color)}.dropzone-container .dropzone-overlay.is-handling-upload{box-shadow:inset 0 0 20rem 1rem var(--status-working-color)}.image-uploader-button-outer{min-width:20rem;width:100%;height:100%;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:.5rem;color:var(--tab-list-text-inactive);background-color:var(--btn-grey)}.image-uploader-button-outer:hover{background-color:var(--btn-grey-hover)}.image-upload-button-inner{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.image-upload-button{display:flex;flex-direction:column;row-gap:2rem;align-items:center;justify-content:center;text-align:center}.image-upload-button svg{width:4rem!important;height:4rem!important}.image-upload-button h2{font-size:1.2rem!important}.work-in-progress{display:grid;width:100%;height:calc(100vh - (70px + 1rem));grid-auto-rows:max-content;background-color:var(--background-color-secondary);border-radius:.4rem;place-content:center;place-items:center;row-gap:1rem}.work-in-progress h1{font-size:2rem;font-weight:700}.work-in-progress p{text-align:center;max-width:50rem;color:var(--subtext-color-bright)}.guide-popover-arrow{background-color:var(--tab-panel-bg)!important;box-shadow:none!important}.guide-popover-content{background-color:var(--background-color-secondary)!important;border:none!important}.guide-popover-guide-content{background:var(--tab-panel-bg);border:2px solid var(--tab-hover-color);border-radius:.4rem;padding:.75rem 1rem;display:grid;grid-template-rows:repeat(auto-fill,1fr);grid-row-gap:.5rem;justify-content:space-between}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{-ms-overflow-style:none;scrollbar-width:none;background-color:var(--root-bg-color);overflow:hidden}html::-webkit-scrollbar,body::-webkit-scrollbar{display:none}#root{background-color:var(--root-bg-color);color:var(--text-color);font-family:Inter,Arial,Helvetica,sans-serif}
|