mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
2 lines
35 KiB
CSS
2 lines
35 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: rgb(80, 40, 200);--accent-color-hover: rgb(104, 60, 230);--destructive-color: rgb(185, 55, 55);--destructive-color-hover: rgb(255, 75, 75);--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);--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: rgb(100, 50, 255);--tab-list-text: rgb(20, 20, 20);--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);--inpaint-bg-color: rgb(30, 32, 42)}[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: rgb(235, 185, 5);--accent-color-hover: rgb(255, 200, 0);--destructive-color: rgb(237, 51, 51);--destructive-color-hover: rgb(255, 55, 55);--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);--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);--inpaint-bg-color: rgb(180, 182, 184)}@font-face{font-family:Inter;src:url(/assets/Inter.b9a8e5e2.ttf);font-display:swap;font-weight:400;font-style:normal}@font-face{font-family:Inter;src:url(/assets/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:max-content}.app-content{display:grid;row-gap:1rem;margin:.6rem;padding:1rem;border-radius:.5rem;background-color:var(--background-color);grid-auto-rows:max-content;width:calc(100vw - 1.6rem);height:calc(100vh - 1.6rem);min-width:min-content}.app-console{z-index:9999}.site-header{display:grid;grid-template-columns:auto max-content}.site-header-left-side{display:grid;grid-template-columns:repeat(2,max-content);column-gap:.6rem;align-items:center}.site-header-left-side img{width:32px;height:32px}.site-header-left-side h1{font-size:1.4rem}.site-header-right-side{display:grid;grid-template-columns:repeat(7,max-content);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;font-family:Inter}.settings-modal .settings-modal-content{display:grid;row-gap:2rem}.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;justify-content:space-between;align-items:center}.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)}.hotkeys-modal{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-items{display:grid;row-gap:.5rem;max-height:32rem;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.hotkeys-modal-items::-webkit-scrollbar{display:none}.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{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}.console-toggle-icon-button:hover{background:var(--console-icon-button-bg-color-hover)!important}.console-toggle-icon-button.error-seen,.console-toggle-icon-button.error-seen: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}.console-autoscroll-icon-button:hover{background:var(--console-icon-button-bg-color-hover)!important}.console-autoscroll-icon-button.autoscroll-enabled{background:var(--accent-color)!important}.console-autoscroll-icon-button.autoscroll-enabled: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:grid;grid-template-columns:auto max-content;column-gap:.5rem}.process-buttons .invoke-btn{min-width:5rem;min-height:100%;background-color:var(--accent-color)!important}.process-buttons .invoke-btn:hover{background-color:var(--accent-color-hover)!important}.process-buttons .invoke-btn:disabled{background-color:#2d2d37!important}.process-buttons .invoke-btn:disabled:hover{background-color:#2d2d37!important}.process-buttons .invoke-btn svg{width:20px;height:20px;color:var(--btn-svg-color)}.process-buttons .cancel-btn{min-width:3rem;min-height:100%;background-color:var(--destructive-color)!important}.process-buttons .cancel-btn:hover{background-color:var(--destructive-color-hover)!important}.process-buttons .cancel-btn:disabled{background-color:#2d2d37!important}.process-buttons .cancel-btn:disabled:hover{background-color:#2d2d37!important}.process-buttons .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;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-dimensions{display:flex;flex-direction:column;row-gap:1rem;max-width:100%}.inpainting-bounding-box-dimensions-slider-numberinput{display:flex;flex-direction:row;column-gap:.5rem;width:100%}.progress-bar{background-color:var(--root-bg-color)}.progress-bar div{background-color:var(--progress-bar-color)}.current-image-display{display:flex;flex-direction:column;height:100%;background-color:var(--background-color-secondary);border-radius:.5rem}.current-image-options{width:100%;display:flex;justify-content:center;column-gap:.5rem;padding:1rem}.current-image-options button{min-width:3rem;min-height:100%;background-color:var(--btn-grey)!important}.current-image-options button:hover{background-color:var(--btn-grey-hover)!important}.current-image-options button:disabled{background-color:#2d2d37!important}.current-image-options button:disabled:hover{background-color:#2d2d37!important}.current-image-options button svg{width:22px;height:22px;color:var(--btn-svg-color)}.current-image-viewer{position:relative;width:100%;height:100%}.current-image-preview{position:absolute;top:0;grid-area:current-image-preview;position:relative;justify-content:center;align-items:center;display:grid;width:100%;height:100%;grid-template-areas:"current-image-content"}.current-image-preview img{grid-area:current-image-content;background-color:var(--img2img-img-bg-color);border-radius:.5rem;object-fit:contain;max-height:calc(100vh - 13rem)}.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%;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)}.image-gallery-area-enter{transform:translate(150%)}.image-gallery-area-enter-active{transform:translate(0);transition:all .12s ease-out}.image-gallery-area-exit{transform:translate(0)}.image-gallery-area-exit-active{transform:translate(150%);transition:all .12s ease-out}.image-gallery-area{z-index:10}.image-gallery-area[data-pinned=false]{position:fixed;height:100vh;top:0;right:0}.image-gallery-area[data-pinned=false] .image-gallery-popup{border-radius:0}.image-gallery-area[data-pinned=false] .image-gallery-popup .image-gallery-container{max-height:calc(100vh + 3.4rem)}.image-gallery-area .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-area .image-gallery-popup[data-resize-alert=true]{border-color:var(--status-bad-color)}.image-gallery-area .image-gallery-popup .image-gallery-header{display:flex;justify-content:end;align-items:center;column-gap:.5rem}.image-gallery-area .image-gallery-popup .image-gallery-header .image-gallery-icon-btn{background-color:var(--btn-load-more)!important}.image-gallery-area .image-gallery-popup .image-gallery-header .image-gallery-icon-btn:hover{background-color:var(--btn-load-more-hover)!important}.image-gallery-area .image-gallery-popup .image-gallery-header .image-gallery-size-popover{display:grid;grid-template-columns:repeat(2,max-content);column-gap:.5rem}.image-gallery-area .image-gallery-popup .image-gallery-header h1{font-weight:700}.image-gallery-area .image-gallery-popup .image-gallery-container{display:flex;flex-direction:column;max-height:calc(100vh - 13rem);overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.image-gallery-area .image-gallery-popup .image-gallery-container::-webkit-scrollbar{display:none}.image-gallery-area .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder{display:flex;background-color:var(--background-color-secondary);border-radius:.5rem;place-items:center;padding:2rem 0}.image-gallery-area .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder p{color:var(--subtext-color-bright);font-family:Inter}.image-gallery-area .image-gallery-popup .image-gallery-container .image-gallery-container-placeholder svg{width:5rem;height:5rem;color:var(--svg-color)}.image-gallery-area .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-area .image-gallery-popup .image-gallery-container .image-gallery-load-more-btn:disabled:hover{background-color:var(--btn-load-more)!important}.image-gallery-area .image-gallery-popup .image-gallery-container .image-gallery-load-more-btn:hover{background-color:var(--btn-load-more-hover)!important}.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%;object-fit:cover;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:999;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)}.popover-content{background-color:var(--background-color-secondary)!important;border:none!important;border-top:0px;background-color:var(--tab-hover-color);border-radius:0 0 .4rem .4rem}.popover-arrow{background:var(--tab-hover-color)!important;box-shadow:none}.popover-options{background:var(--tab-panel-bg);border-radius:0 0 .4rem .4rem;border:2px solid var(--tab-hover-color);padding:.75rem 1rem;display:grid;grid-auto-rows:max-content;grid-row-gap:.5rem;justify-content:space-between}.popover-header{background:var(--tab-hover-color);border-radius:.4rem .4rem 0 0;font-weight:700;border:none;padding-left:1rem!important}.upscale-popover{width:23rem!important}.show-hide-gallery-button{position:absolute!important;top:50%;right:-1rem;transform:translateY(-50%);z-index:10;border-radius:.5rem 0 0 .5rem!important;padding:0 .5rem;min-width:1rem;min-height:12rem;background-color:var(--btn-grey)!important}.show-hide-gallery-button:hover{background-color:var(--btn-grey-hover)!important}.show-hide-gallery-button:disabled{background-color:#2d2d37!important}.show-hide-gallery-button:disabled:hover{background-color:#2d2d37!important}.show-hide-gallery-button svg{width:20px;height:20px;color:var(--btn-svg-color)}.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 - 11.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}.app-tabs-list{display:grid;row-gap:.3rem;grid-auto-rows:max-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}.workarea-container{position:relative;width:100%;height:100%}.workarea-container .workarea{display:flex;column-gap:1rem}.workarea-container .workarea .workarea-options-panel{width:22.5rem;max-width:22.5rem;flex-shrink:0}.workarea-container .workarea .workarea-content{width:100%}.text-to-image-workarea{display:grid;grid-template-columns:max-content auto;column-gap:1rem}.text-to-image-panel{display:grid;row-gap:1rem;grid-auto-rows:max-content;height:calc(100vh - 7rem);overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.text-to-image-panel::-webkit-scrollbar{display:none}.text-to-image-display{display:grid;grid-template-areas:"text-to-image-display";column-gap:.5rem}.text-to-image-display .current-image-display,.text-to-image-display .current-image-display-placeholder{grid-area:text-to-image-display}.text-to-image-display .image-gallery-area{height:100%;z-index:2;place-self:end}.txt-to-image-workarea-container .current-image-preview{padding:0 1rem 1rem}.image-to-image-workarea{display:grid;grid-template-columns:max-content auto;column-gap:1rem}.image-to-image-panel{display:grid;row-gap:1rem;grid-auto-rows:max-content;height:calc(100vh - 7rem);overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.image-to-image-panel::-webkit-scrollbar{display:none}.image-to-image-display-area{display:grid;column-gap:.5rem}.image-to-image-display-area .image-gallery-area{z-index:2;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}.image-to-image-display{border-radius:.5rem;background-color:var(--background-color-secondary);display:grid;height:calc(100vh - 7rem)}.image-to-image-display .current-image-options{grid-auto-columns:max-content;justify-self:center;align-self:start}.image-to-image-single-preview{display:grid;column-gap:.5rem;padding:0 1rem;place-content:center}.image-to-image-dual-preview-container{display:grid;grid-template-areas:"img2img-preview"}.image-to-image-dual-preview{grid-area:img2img-preview;display:grid;grid-template-columns:1fr 1fr;column-gap:.5rem;padding:0 1rem;place-content:center}.image-to-image-dual-preview .current-image-preview img{height:calc(100vh - 15rem);max-height:calc(100vh - 15rem)}.img2img-metadata{grid-area:img2img-preview;z-index:3}.init-image-preview{display:grid;grid-template-areas:"init-image-content";justify-content:center;align-items:center;border-radius:.5rem}.init-image-preview .init-image-preview-header{grid-area:init-image-content;z-index:2;display:grid;grid-template-columns:auto max-content;height:max-content;align-items:center;align-self:start;padding:1rem;border-radius:.5rem}.init-image-preview .init-image-preview-header h1{padding:.2rem .6rem;border-radius:.4rem;background-color:var(--tab-hover-color);width:max-content;font-weight:700;font-size:.85rem}.init-image-preview .init-image-image{grid-area:init-image-content}.init-image-preview .init-image-image img{border-radius:.5rem;object-fit:contain;background-color:var(--img2img-img-bg-color);width:auto;height:calc(100vh - 15rem);max-height:calc(100vh - 15rem)}.image-to-image-upload-btn{display:grid;width:100%;height:calc(100vh - 7rem)}.image-to-image-upload-btn button{overflow:hidden;width:100%;height:100%;font-size:1.5rem;color:var(--text-color-secondary);background-color:var(--background-color-secondary)}.image-to-image-upload-btn button:hover{background-color:var(--img2img-img-bg-color)}.image-to-image-current-image-display{position:relative}.brush-preview-wrapper{display:flex;align-items:center;justify-content:center;position:absolute;top:0;left:0}.brush-preview{border-radius:50%;border:1px black solid}.inpainting-workarea{display:grid;grid-template-columns:max-content auto;column-gap:1rem}.inpainting-display-area{display:grid;column-gap:.5rem}.inpainting-display{border-radius:.5rem;background-color:var(--background-color-secondary);display:grid;grid-template-columns:1fr 1fr;height:calc(100vh - 7rem)}.inpainting-toolkit{display:flex;flex-direction:column;background-color:var(--inpaint-bg-color);border-radius:.5rem}.inpainting-canvas-container{width:100%;height:100%;padding-left:1rem;padding-right:1rem;padding-bottom:1rem;display:flex;align-items:center;justify-content:center}.inpainting-canvas-container .inpainting-canvas-wrapper{position:relative;width:min-content;height:min-content;border-radius:.5rem}.inpainting-canvas-container .inpainting-canvas-wrapper .inpainting-alerts{position:absolute;top:0;left:0;display:flex;column-gap:.5rem;z-index:2;padding:.5rem;pointer-events:none;font-size:.9rem;font-weight:700}.inpainting-canvas-container .inpainting-canvas-wrapper .inpainting-alerts div{background-color:var(--accent-color);color:var(--text-color);padding:.2rem .6rem;border-radius:.25rem}.inpainting-canvas-container .inpainting-canvas-wrapper .inpainting-canvas-stage canvas{border-radius:.5rem}.inpainting-canvas-scale-wrapper{width:calc(100% - 1rem);height:calc(100% - 1rem);display:flex;justify-content:center;align-items:center}.inpainting-settings{display:flex;flex-direction:column;justify-content:center;align-items:center;row-gap:1rem;padding:1rem}.inpainting-settings .inpainting-buttons{display:flex;align-items:center;column-gap:.8rem}.inpainting-settings .inpainting-buttons button{height:2.4rem}.inpainting-settings .inpainting-buttons button svg{width:15px;height:15px}.inpainting-settings .inpainting-buttons .inpainting-buttons-group{display:flex;align-items:center;column-gap:.5rem}.inpainting-settings .inpainting-slider-numberinput{display:flex;column-gap:1rem;align-items:center}.inpainting-workarea-container .image-gallery-area .chakra-popover__popper{inset:0 auto auto -75px!important}.inpainting-workarea-container .current-image-options button{min-width:2.5rem;min-height:100%;background-color:var(--btn-grey)!important}.inpainting-workarea-container .current-image-options button:hover{background-color:var(--btn-grey-hover)!important}.inpainting-workarea-container .current-image-options button:disabled{background-color:#2d2d37!important}.inpainting-workarea-container .current-image-options button:disabled:hover{background-color:#2d2d37!important}.inpainting-workarea-container .current-image-options button svg{width:18px;height:18px;color:var(--btn-svg-color)}.inpainting-workarea-container .current-image-options .chakra-popover__popper{z-index:11}.inpainting-workarea-container .current-image-preview{padding:0 1rem 1rem}.invokeai__number-input-form-control{display:grid;grid-template-columns:max-content auto;column-gap:1rem;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}.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)}.icon-button{background-color:var(--btn-grey);cursor:pointer}.icon-button:hover{background-color:var(--btn-grey-hover)}.icon-button[data-selected=true]{background-color:var(--accent-color)}.icon-button[data-selected=true]:hover{background-color:var(--accent-color-hover)}.icon-button[disabled]{cursor:not-allowed}.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}.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:grid;grid-template-columns:repeat(2,max-content);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}.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)}.work-in-progress{display:grid;width:100%;height:calc(100vh - 7rem);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)}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}
|