| :root { |
| --ae-main-bg-color: hsl(0deg 0% 10%); |
| --ae-primary-color: hsl(168deg 97% 41%); |
| --ae-input-bg-color: hsl(225deg 6% 13%); |
| --ae-input-border-color: hsl(214deg 5% 30%); |
| --ae-panel-bg-color: hsl(225deg 5% 17%); |
| --ae-panel-border-color: hsl(214deg 5% 30%); |
| --ae-panel-border-radius: 0px; |
| --ae-subgroup-bg-color: hsl(0deg 0% 10%); |
| --ae-subgroup-input-bg-color: hsl(225deg 6% 13%); |
| --ae-subgroup-input-border-color: hsl(214deg 5% 30%); |
| --ae-subpanel-bg-color: hsl(220deg 4% 14%); |
| --ae-subpanel-border-color: hsl(214deg 5% 30%); |
| --ae-subpanel-border-radius: 8px; |
| --ae-textarea-focus-color: hsl(210deg 3% 36%); |
| --ae-input-focus-color: hsl(168deg 97% 41%); |
| --ae-outside-gap-size: 8px; |
| --ae-inside-padding-size: 8px; |
| --ae-tool-button-size: 34px; |
| --ae-tool-button-radius: 16px; |
| --ae-generate-button-height: 70px; |
| --ae-cancel-color: hsl(0deg 84% 60%); |
| --ae-max-padding: max( |
| var(--ae-outside-gap-size), |
| var(--ae-inside-padding-size) |
| ); |
| --ae-icon-color: hsl(168deg 97% 41%); |
| --ae-icon-hover-color: hsl(0deg 0% 10%); |
| --ae-icon-size: 22px; |
| --ae-nav-bg-color: hsl(0deg 0% 4%); |
| --ae-nav-color: hsl(210deg 4% 80%); |
| --ae-nav-hover-color: hsl(0deg 0% 4%); |
| --ae-input-color: hsl(210deg 4% 80%); |
| --ae-label-color: hsl(210deg 4% 80%); |
| --ae-subgroup-input-color: hsl(210deg 4% 80%); |
| --ae-placeholder-color: hsl(214deg 5% 30%); |
| --ae-text-color: hsl(210deg 4% 80%); |
| --ae-mobile-outside-gap-size: 2px; |
| --ae-mobile-inside-padding-size: 2px; |
| --ae-frame-bg-color: hsl(225deg 6% 13%); |
| --ae-modal-bg-color: hsl(0deg 0% 10%); |
| --ae-modal-icon-color: hsl(168deg 97% 41%); |
| } |
|
|
| |
| |
| |
| |
| |
| |
| |
| :root { |
| --ae-extra-networks-card-size: 1; |
| --ae-extra-networks-card-real-size: calc( |
| var(--ae-extra-networks-card-size) * 14vh |
| ); |
| --ae-extra-networks-visible-rows: 2; |
| --ae-extra-networks-height: calc( |
| ( |
| var(--ae-extra-networks-card-real-size) * |
| var(--ae-extra-networks-visible-rows) |
| ) + (var(--ae-inside-padding-size) * 2) |
| ); |
| --ae-extra-networks-name-size: calc(var(--ae-extra-networks-card-size) * 1em); |
|
|
| --ae-top-header-padding-top: 16px; |
| --ae-top-header-padding-bottom: 16px; |
| --ae-top-header-inner-height: 38px; |
| --ae-top-header-height: calc( |
| var(--ae-top-header-padding-top) + var(--ae-top-header-inner-height) + |
| var(--ae-top-header-padding-bottom) |
| ); |
|
|
| --ae-container-padding: 16px; |
| --ae-footer-height: calc(32px + (var(--ae-container-padding) * 2)); |
| --ae-gallery-bottom-height: calc( |
| 24px + (var(--ae-max-padding) * 2) + 16px + |
| (var(--ae-inside-padding-size) * 2) + (var(--ae-outside-gap-size) * 3) |
| ); |
|
|
| --ae-subtract-total: calc( |
| var(--ae-top-header-height) + var(--ae-footer-height) |
| ); |
| --ae-container-height: calc(100vh - var(--ae-subtract-total)); |
| --ae-container-total-height: calc( |
| var(--ae-container-height) - (var(--ae-outside-gap-size) * 2) - |
| (var(--ae-inside-padding-size) * 2) |
| ); |
| --ae-container-height-gap: calc( |
| var(--ae-container-height) - (var(--ae-outside-gap-size) * 2) |
| ); |
| --ae-container-height-pad: calc( |
| var(--ae-container-height) - (var(--ae-inside-padding-size) * 2) |
| ); |
|
|
| --ae-processing-border: 2px; |
| --ae-processing-border-double: var(--ae-processing-border) * 2; |
|
|
| --ae-slider-bg-overlay: transparent; |
|
|
| --ae-border-width: 1px; |
| --ae-accordion-vertical-padding: max(8px, var(--ae-inside-padding-size)); |
| --ae-accordion-horizontal-padding: max(4px, var(--ae-inside-padding-size)); |
| --ae-accordion-line-height: 24px; |
| --ae-accordion-header-height: calc( |
| var(--ae-accordion-line-height) + var(--ae-accordion-vertical-padding) * 2 |
| ); |
|
|
| --ae-results-height: calc( |
| 100vh - |
| ( |
| var(--ae-top-header-height) + var(--ae-footer-height) + |
| var(--ae-accordion-header-height) + var(--ae-outside-gap-size) * 4 + |
| 36px |
| ) |
| ); |
| } |
|
|
| @media only screen and (max-width: 860px) { |
| :root { |
| --ae-outside-gap-size: var(--ae-mobile-outside-gap-size); |
| --ae-inside-padding-size: var(--ae-mobile-inside-padding-size); |
| } |
| } |
|
|
| body { |
| background-color: var(--ae-main-bg-color) !important; |
| } |
|
|
| .hidden { |
| display: none !important; |
| } |
|
|
| .app.svelte-1mya07g.svelte-1mya07g { |
| position: relative; |
| margin: auto; |
| padding: var(--size-4); |
| padding-top: 0; |
| width: 100%; |
| min-height: 100vh !important; |
| min-width: unset !important; |
| max-width: unset !important; |
| background-color: var(--ae-main-bg-color); |
| } |
|
|
| .block.svelte-mppz8v { |
| line-height: 16px !important; |
| } |
|
|
| |
| |
| |
| [id*="2img_generate_forever"], |
| [id^="refresh_"], |
| [id$="_refresh"], |
| [id$="_clear_prompt"], |
| [id$="2img_style_create"], |
| [id$="2img_style_apply"], |
| [id$="2img_extra_networks"], |
| [id$="paste"], |
| #img2img_actions_column [id$="interrogate"], |
| #img2img_actions_column [id$="deepbooru"], |
| [id^="open_folder"], |
| [id*="2img_random"], |
| [id*="2img_reuse"], |
| [id^="save_"], |
| [id^="save_zip_"], |
| [id="extras_tab"], |
| [id="img2img_tab"], |
| [id="inpaint_tab"], |
| [id="txt2img_tab"] { |
| |
| position: relative; |
| font-size: 0 !important; |
| } |
| [id*="2img_generate_forever"]::before, |
| [id$="_refresh"]::before, |
| [id^="refresh_"]::before, |
| [id$="_clear_prompt"]::before, |
| [id$="2img_style_create"]::before, |
| [id$="2img_style_apply"]::before, |
| [id$="2img_extra_networks"]::before, |
| [id$="paste"]::before, |
| #img2img_actions_column [id$="interrogate"]::before, |
| #img2img_actions_column [id$="deepbooru"]::before, |
| [id^="open_folder"]::before, |
| [id*="2img_random"]::before, |
| [id*="2img_reuse"]::before, |
| [id^="save_"]::before, |
| [id^="save_zip_"]::before, |
| [id="extras_tab"]::before, |
| [id="img2img_tab"]::before, |
| [id="inpaint_tab"]::before, |
| [id="txt2img_tab"]::before { |
| content: " "; |
| display: inline-block; |
| -webkit-mask-size: cover; |
| mask-size: cover; |
| background-color: var(--ae-icon-color); |
| width: var(--ae-icon-size); |
| height: var(--ae-icon-size); |
| position: absolute; |
| } |
|
|
| [id*="2img_random"]::before, |
| [id*="2img_reuse"]::before { |
| background-color: var(--ae-icon-color); |
| border-radius: var(--ae-panel-border-radius); |
| } |
| [id*="2img_generate_forever"]:hover::before, |
| [id$="_refresh"]:hover::before, |
| [id^="refresh_"]:hover::before, |
| [id$="_clear_prompt"]:hover::before, |
| [id$="2img_style_create"]:hover::before, |
| [id$="2img_style_apply"]:hover::before, |
| [id$="2img_extra_networks"]:hover::before, |
| [id$="paste"]:hover::before, |
| #img2img_actions_column [id$="interrogate"]:hover::before, |
| #img2img_actions_column [id$="deepbooru"]:hover::before, |
| [id^="open_folder"]:hover::before, |
| [id*="2img_random"]:hover::before, |
| [id*="2img_reuse"]:hover::before, |
| [id^="save_"]:hover::before, |
| [id^="save_zip_"]:hover::before, |
| [id="extras_tab"]:hover::before, |
| [id="img2img_tab"]:hover::before, |
| [id="inpaint_tab"]:hover::before, |
| [id="txt2img_tab"]:hover::before { |
| background-color: var(--ae-icon-hover-color); |
| } |
|
|
| [id$="2img_extra_networks"] { |
| border: 1px solid var(--ae-input-border-color) !important; |
| border-radius: var(--ae-panel-border-radius) !important; |
| background: var(--ae-input-bg-color) !important; |
| } |
|
|
| [id$="2img_extra_networks"]:hover { |
| background-color: var(--ae-icon-color) !important; |
| } |
|
|
| [id$="_refresh"]::before, |
| [id^="refresh_"]::before { |
| -webkit-mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/refresh-line.svg) no-repeat 50% 50%; |
| } |
| [id$="2img_generate_forever"]::before { |
| -webkit-mask: url(./file=html/svg/infinity-fill.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/infinity-fill.svg) no-repeat 50% 50%; |
| width: 90%; |
| height: 90%; |
| } |
| [id$="_clear_prompt"]::before { |
| -webkit-mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/delete-bin-5-line.svg) no-repeat 50% 50%; |
| } |
|
|
| [id$="2img_style_create"]::before { |
| -webkit-mask: url(./file=html/svg/save-3-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/save-3-line.svg) no-repeat 50% 50%; |
| } |
|
|
| [id$="2img_style_apply"]::before { |
| -webkit-mask: url(./file=html/svg/clipboard-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/clipboard-line.svg) no-repeat 50% 50%; |
| } |
|
|
| [id$="paste"]::before { |
| -webkit-mask: url(./file=html/svg/magic-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/magic-line.svg) no-repeat 50% 50%; |
| } |
|
|
| [id$="2img_extra_networks"]::before { |
| -webkit-mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; |
| } |
|
|
| #img2img_actions_column [id$="interrogate"]::before { |
| -webkit-mask: url(./file=html/svg/question-answer-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/question-answer-line.svg) no-repeat 50% 50%; |
| } |
|
|
| #img2img_actions_column [id$="deepbooru"]::before { |
| -webkit-mask: url(./file=html/svg/question-answer-fill.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/question-answer-fill.svg) no-repeat 50% 50%; |
| } |
|
|
| [id^="open_folder"]::before { |
| -webkit-mask: url(./file=html/svg/folder-open-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/folder-open-line.svg) no-repeat 50% 50%; |
| } |
|
|
| [id*="2img_random"]::before { |
| -webkit-mask: url(./file=html/svg/dice-1.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/dice-1.svg) no-repeat 50% 50%; |
| } |
|
|
| [id*="2img_reuse"]::before { |
| -webkit-mask: url(./file=html/svg/recycle-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/recycle-line.svg) no-repeat 50% 50%; |
| } |
|
|
| [id^="save_"]::before { |
| -webkit-mask: url(./file=html/svg/save-2-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/save-2-line.svg) no-repeat 50% 50%; |
| } |
|
|
| [id^="save_zip_"]::before { |
| -webkit-mask: url(./file=html/svg/file-zip-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/file-zip-line.svg) no-repeat 50% 50%; |
| } |
|
|
| [id="extras_tab"]::before { |
| -webkit-mask: url(./file=html/svg/picture-in-picture-exit-line.svg) no-repeat |
| 50% 50%; |
| mask: url(./file=html/svg/picture-in-picture-exit-line.svg) no-repeat 50% 50%; |
| } |
|
|
| [id="img2img_tab"]::before { |
| -webkit-mask: url(./file=html/svg/landscape-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/landscape-line.svg) no-repeat 50% 50%; |
| } |
|
|
| [id="inpaint_tab"]::before { |
| -webkit-mask: url(./file=html/svg/paint-brush-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/paint-brush-line.svg) no-repeat 50% 50%; |
| } |
|
|
| [id="txt2img_tab"]::before { |
| -webkit-mask: url(./file=html/svg/t-box-fill.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/t-box-fill.svg) no-repeat 50% 50%; |
| } |
|
|
| |
| |
| |
|
|
| #tabs { |
| margin-top: calc(var(--ae-top-header-height)); |
| min-height: var(--ae-container-height); |
| } |
|
|
| #header-top { |
| position: fixed; |
| top: 0px; |
| left: 0; |
| right: 0; |
| z-index: 10000; |
| min-height: var(--ae-top-header-inner-height); |
| background-color: var(--ae-main-bg-color); |
| padding-left: 1rem; |
| padding-right: 1rem; |
| padding-top: var(--ae-top-header-padding-top); |
| padding-bottom: var(--ae-top-header-padding-bottom); |
| } |
|
|
| #nav_menu_header_tabs { |
| position: relative; |
| height: 34px; |
| align-self: center; |
| flex-grow: 2; |
| line-height: 14px; |
| } |
|
|
| #nav_menu_header_tabs button { |
| font-size: 14px; |
| flex: 1 1 auto; |
| flex-grow: 0; |
| min-width: unset; |
| padding-bottom: 0; |
| padding-right: 0; |
| padding-top: 0; |
| border: 0; |
| color: var(--ae-nav-color); |
| background: 0 !important; |
| padding-left: 10px; |
| opacity: 0.75; |
| } |
|
|
| #nav_menu_header_tabs button.selected { |
| color: var(--ae-primary-color); |
| opacity: 1; |
| } |
|
|
| #nav_menu_header_tabs button:hover { |
| opacity: 1; |
| } |
|
|
| .container { |
| padding: var(--ae-container-padding); |
| color: var(--ae-input-color); |
| } |
|
|
| #quicksettings { |
| align-items: center; |
| width: auto; |
| background: 0; |
| padding: 0; |
| position: relative; |
| max-height: 34px; |
| align-self: center; |
| min-width: min(60px, 100%); |
| } |
|
|
| #extra_networks_menu, |
| #quick_menu { |
| z-index: 9999; |
| background-color: var(--ae-input-bg-color); |
| position: relative; |
| width: 38px; |
| height: 38px; |
| border-radius: 100%; |
| cursor: pointer; |
| min-width: unset; |
| max-width: 38px; |
| align-self: center; |
| } |
|
|
| #extra_networks_menu::before, |
| #quick_menu::before { |
| content: " "; |
| display: inline-block; |
| -webkit-mask-size: cover; |
| mask-size: cover; |
| background-color: var(--ae-icon-color); |
| width: var(--ae-icon-size); |
| height: var(--ae-icon-size); |
| -webkit-mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/more-2-fill.svg) no-repeat 50% 50%; |
| cursor: pointer; |
| position: relative; |
| left: 50%; |
| top: 50%; |
| transform: translate(-50%, -50%) scale(1); |
| } |
|
|
| #extra_networks_menu::before { |
| -webkit-mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/stack-line.svg) no-repeat 50% 50%; |
| } |
|
|
| #extra_networks_menu.fixed, |
| #extra_networks_menu:hover, |
| #quick_menu:hover { |
| background-color: var(--ae-icon-color); |
| } |
|
|
| #extra_networks_menu.fixed::before, |
| #extra_networks_menu:hover::before, |
| #quick_menu:hover::before { |
| background-color: var(--ae-icon-hover-color); |
| } |
|
|
| [id$="nav_menu"] { |
| z-index: 9999; |
| background-color: var(--ae-input-bg-color); |
| position: relative; |
| width: 38px; |
| height: 38px; |
| border-radius: 100%; |
| cursor: pointer; |
| max-width: 38px; |
| min-width: unset !important; |
| align-self: center; |
| } |
|
|
| [id$="nav_menu"]::before { |
| content: " "; |
| display: inline-block; |
| -webkit-mask-size: cover; |
| mask-size: cover; |
| background-color: var(--ae-icon-color); |
| width: var(--ae-icon-size); |
| height: var(--ae-icon-size); |
| -webkit-mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/menu-line.svg) no-repeat 50% 50%; |
| cursor: pointer; |
| position: relative; |
| left: 50%; |
| top: 50%; |
| transform: translate(-50%, -50%) scale(1); |
| } |
|
|
| [id$="nav_menu"]:hover { |
| background-color: var(--ae-icon-color); |
| } |
|
|
| [id$="nav_menu"]:hover::before { |
| background-color: var(--ae-icon-hover-color); |
| } |
|
|
| #clone_nav_menu { |
| position: fixed; |
| z-index: 10000; |
| left: 1rem; |
| top: var(--ae-top-header-padding-top); |
| } |
|
|
| |
| |
| |
|
|
| .progressDiv { |
| background-color: var(--ae-main-bg-color) !important; |
| border-radius: 0 !important; |
| height: 16px; |
| position: fixed; |
| z-index: 10000; |
| top: 0px; |
| |
| left: 0; |
| width: 100% !important; |
| |
| } |
|
|
| .progressDiv .progress { |
| width: 0%; |
| height: 3px; |
| background-color: var(--ae-primary-color); |
| color: var(--ae-input-color); |
| line-height: 20px; |
| text-align: right; |
| border-radius: 0; |
| padding: 0 2px; |
| font-size: 12px; |
| white-space: nowrap; |
| font-weight: 600; |
| } |
|
|
| |
| |
| |
|
|
| .livePreview { |
| position: absolute !important; |
| width: calc(100% - (var(--ae-outside-gap-size) * 2)) !important; |
| max-height: calc(var(--ae-container-height-gap)) !important; |
| top: var(--ae-outside-gap-size); |
| left: var(--ae-outside-gap-size); |
| right: 0; |
| bottom: 0; |
| pointer-events: all; |
| overflow: hidden !important; |
| background-color: var(--ae-main-bg-color); |
| z-index: 300; |
| box-sizing: border-box; |
| padding: var(--ae-processing-border); |
| border: 1px solid var(--ae-panel-border-color); |
| height: calc(var(--ae-container-height-gap)) !important; |
| } |
|
|
| .livePreview img { |
| background-color: var(--ae-main-bg-color) !important; |
| border-radius: 0 !important; |
| box-sizing: border-box; |
| position: absolute; |
| width: calc(100% - var(--ae-processing-border-double)); |
| height: calc(100% - var(--ae-processing-border-double)); |
| object-fit: scale-down; |
| margin: auto; |
| } |
|
|
| div.svelte-10ogue4 > *:first-child.livePreview { |
| border-radius: 0 !important; |
| } |
|
|
| @keyframes rotate { |
| 100% { |
| transform: scale(2) rotate(1turn); |
| } |
| } |
|
|
| .livePreview:not(.dropPreview)::before { |
| content: ""; |
| position: absolute; |
| z-index: -2; |
| left: -50%; |
| top: -50%; |
| width: 200%; |
| height: 200%; |
| background-color: var(--ae-main-bg-color); |
| background-repeat: no-repeat; |
| background-position: 0 0; |
| background-image: conic-gradient( |
| transparent, |
| var(--ae-primary-color), |
| transparent 30% |
| ); |
| animation: rotate 4s linear infinite; |
| } |
|
|
| .livePreview::after { |
| content: ""; |
| position: absolute; |
| z-index: -1; |
| left: var(--ae-processing-border); |
| top: var(--ae-processing-border); |
| width: calc(100% - var(--ae-processing-border-double)); |
| height: calc(100% - var(--ae-processing-border-double)); |
| background: var(--ae-main-bg-color); |
| border-radius: 0; |
| } |
|
|
| .livePreview::before { |
| content: ""; |
| position: absolute; |
| z-index: -2; |
| left: -50%; |
| top: -50%; |
| width: 200%; |
| height: 200%; |
| background-color: var(--ae-main-bg-color); |
| background-repeat: no-repeat; |
| background-position: 0 0; |
| background-image: conic-gradient( |
| transparent, |
| var(--ae-primary-color), |
| transparent 30% |
| ); |
| animation: rotate 4s linear infinite; |
| } |
|
|
| .livePreview.dropPreview::before, |
| .livePreview.dropPreview::after { |
| display: none; |
| } |
|
|
| .livePreview img { |
| object-position: center !important; |
| border-radius: 0 !important; |
| position: relative; |
| top: 0 !important; |
| left: 0 !important; |
| width: calc(100%) !important; |
| height: calc(100%) !important; |
| } |
|
|
| .livePreview img:nth-child(2) { |
| position: absolute !important; |
| top: 50% !important; |
| left: 50% !important; |
| transform: translateX(-50%) translateY(-50%) !important; |
| width: calc(100% - var(--ae-processing-border-double)) !important; |
| height: calc(100% - var(--ae-processing-border-double)) !important; |
| } |
|
|
| .livePreview.init, |
| .livePreview:not(.init) + div { |
| display: none; |
| } |
|
|
| .livePreview { |
| max-height: unset !important; |
| position: relative !important; |
| left: 0; |
| top: 0; |
| width: auto !important; |
| } |
|
|
| [id^="download_files_"] div.float:not(.float) { |
| position: absolute !important; |
| } |
|
|
| #image_buttons_txt2img + div, |
| #image_buttons_img2img + div, |
| #image_buttons_extras_2img + div { |
| margin-top: calc(var(--ae-outside-gap-size) * -0.5); |
| margin-bottom: calc(var(--ae-outside-gap-size) * -0.5); |
| } |
|
|
| button.svelte-1p4r00v { |
| background-color: var(--ae-input-bg-color); |
| color: var(--ae-icon-color); |
| border-radius: var(--ae-panel-border-radius); |
| } |
|
|
| button.svelte-1p4r00v:hover { |
| background-color: var(--ae-primary-color); |
| color: var(--ae-icon-hover-color); |
| } |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| [id^="img2img_copy_to_"] { |
| padding: 0 !important; |
| margin-bottom: var(--ae-outside-gap-size) !important; |
| background: transparent !important; |
| } |
|
|
| [id^="img2img_label_copy_to_"] { |
| min-width: unset !important; |
| } |
|
|
| [id^="img2img_copy_to_"] > * { |
| font-size: 100% !important; |
| white-space: nowrap; |
| align-self: center; |
| } |
|
|
| .image-container { |
| min-height: 25vh; |
| } |
|
|
| .spl-pane div.svelte-s6ybro, |
| .spl-pane .wrap.svelte-p4aq0j.svelte-p4aq0j { |
| display: none; |
| } |
|
|
| .spl-pane .wrap.svelte-yigbas { |
| position: unset; |
| } |
|
|
| .center.boundedheight.flex { |
| width: 100% !important; |
| height: 100% !important; |
| } |
|
|
| div.svelte-1oo81b7 > *:first-child, |
| div.svelte-1oo81b7 > *:last-child { |
| border-radius: 0 !important; |
| } |
|
|
| |
| div.float { |
| background: var(--ae-main-bg-color) !important; |
| border: 0 !important; |
| color: var(--ae-primary-color) !important; |
| } |
|
|
| #img2img_inpaint_upload_tab > div:first-child { |
| flex-direction: row; |
| } |
|
|
| |
| |
| |
| .main > .wrap > .contain > div { |
| gap: 0px !important; |
| } |
|
|
| [id$="2img_results"] { |
| |
| overflow-x: hidden !important; |
| max-height: calc(var(--ae-container-height)); |
| overflow-y: auto !important; |
| height: 100%; |
| flex-direction: column !important; |
| flex-wrap: nowrap !important; |
| } |
|
|
| [id$="2img_gallery"] { |
| display: flex; |
| flex-direction: row; |
| overflow: hidden !important; |
| margin-bottom: 0 !important; |
| } |
|
|
| [id$="2img_gallery"] .grid-wrap, |
| [id$="2img_gallery"] .empty { |
| width: 100%; |
| |
| |
| max-height: var(--ae-results-height) !important; |
| min-height: var(--ae-results-height) !important; |
| overflow-x: hidden !important; |
| } |
|
|
| [id$="2img_gallery"] .preview.fixed-height { |
| max-height: unset; |
| background-color: var(--ae-main-bg-color) !important; |
| } |
|
|
| [id$="2img_gallery"] .thumbnails { |
| background-color: var(--ae-panel-bg-color); |
| height: 60px !important; |
| } |
|
|
| .thumbnails button { |
| margin: auto; |
| } |
|
|
| .thumbnails { |
| justify-content: unset !important; |
| } |
|
|
| [id$="2img_gallery"] .thumbnail-small { |
| height: auto !important; |
| } |
|
|
| [id$="2img_gallery"] .thumbnail-small.selected { |
| --ring-color: var(--ae-primary-color) !important; |
| border-color: var(--ae-primary-color) !important; |
| } |
|
|
| [id$="2img_results"] .preview + img { |
| cursor: pointer; |
| } |
|
|
| [id$="2img_gallery"] .preview.fixed-height { |
| height: auto; |
| min-height: auto; |
| width: 100%; |
| min-width: 100%; |
| max-height: calc(var(--ae-container-height) - 4px); |
| } |
|
|
| [id$="2img_override_settings_row"] > div.form.show, |
| [id$="2img_override_settings_row"] |
| > div.form.show |
| > [id$="2img_override_settings"] { |
| display: block !important; |
| } |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
| .gradio-dropdown:not(.multiselect) .token-remove { |
| display: none !important; |
| } |
|
|
| #top_row_sd_model_checkpoint div { |
| max-height: unset; |
| min-width: min(20px, 100%); |
| } |
|
|
| #top_row_sd_model_checkpoint { |
| position: absolute; |
| z-index: 9999; |
| max-width: 290px; |
| right: 0; |
| max-height: 34px; |
| } |
|
|
| #top_row_sd_model_checkpoint > div, |
| #row_setting_sd_model_checkpoint > div, |
| #setting_sd_model_checkpoint > div, |
| #setting_sd_model_checkpoint { |
| border: 0; |
| padding: 0 !important; |
| } |
|
|
| #setting_sd_model_checkpoint > label > span, |
| #row_setting_sd_model_checkpoint > div:nth-child(2) { |
| display: none; |
| } |
|
|
| #setting_sd_model_checkpoint > label > .wrap > .wrap-inner:first-child { |
| flex-wrap: nowrap; |
| padding: 0; |
| height: 32px; |
| } |
|
|
| #setting_sd_model_checkpoint > label > .wrap > .wrap-inner:first-child > span { |
| white-space: nowrap; |
| overflow: hidden; |
| } |
|
|
| #top_row_sd_model_checkpoint button { |
| min-width: unset; |
| height: 34px; |
| max-width: 34px; |
| } |
|
|
| #top_row_sd_model_checkpoint > div.form { |
| overflow: visible; |
| } |
|
|
| #top_row_sd_model_checkpoint div { |
| border-radius: var(--ae-panel-border-radius) !important; |
| } |
|
|
| div.svelte-b6y5bg, |
| div.gradio-row > .form { |
| overflow: visible !important; |
| } |
|
|
| .dropdown-arrow { |
| min-width: var(--size-5); |
| } |
|
|
| |
| |
| |
|
|
| .gradio-dropdown input { |
| color: var(--ae-input-color) !important; |
| } |
|
|
| ul.options { |
| width: auto; |
| background: var(--ae-input-bg-color) !important; |
| border-radius: var(--ae-panel-border-radius) !important; |
| border-color: var(--ae-input-border-color); |
| border-width: var(--ae-border-width); |
| max-height: 25vh !important; |
| padding: 1px; |
| z-index: 9999 !important; |
| } |
|
|
| ul.options li { |
| width: 100% !important; |
| display: inline-block !important; |
| overflow-wrap: break-word !important; |
| color: var(--ae-label-color) !important; |
| } |
|
|
| ul { |
| margin: 0 !important; |
| list-style: none !important; |
| } |
|
|
| ul.options li:hover { |
| background: var(--ae-input-color) !important; |
| color: var(--ae-input-bg-color) !important; |
| } |
|
|
| ul.options li.selected { |
| background: var(--ae-panel-bg-color) !important; |
| color: var(--ae-label-color) !important; |
| pointer-events: none; |
| } |
|
|
| ul.options li span { |
| display: none !important; |
| } |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| div.token { |
| border-radius: var(--ae-panel-border-radius) !important; |
| background: var(--ae-input-bg-color) !important; |
| border: 1px solid var(--ae-input-border-color) !important; |
| padding: 3px !important; |
| margin: 1px; |
| padding-top: 4px !important; |
| color: var(--ae-input-color) !important; |
| } |
|
|
| div.token-remove { |
| fill: var(--ae-label-color) !important; |
| border-radius: var(--radius-full) !important; |
| background: var(--ae-input-border-color) !important; |
| border: 1px solid var(--ae-input-border-color) !important; |
| |
| } |
|
|
| .block.gradio-accordion { |
| background-color: var(--ae-main-bg-color) !important; |
| |
| } |
|
|
| .block.gradio-accordion:hover { |
| border-color: var(--ae-primary-color) !important; |
| } |
|
|
| .block.gradio-accordion .label-wrap { |
| margin: calc(-1px + var(--ae-inside-padding-size) * -1); |
| width: auto; |
| padding: var(--ae-accordion-vertical-padding) |
| var(--ae-accordion-horizontal-padding); |
| border-radius: var(--ae-panel-border-radius); |
| line-height: var(--ae-accordion-line-height); |
| color: var(--ae-label-color); |
| padding-left: max(8px, var(--ae-accordion-horizontal-padding)); |
| padding-right: max(8px, var(--ae-accordion-horizontal-padding)); |
| |
| } |
|
|
| .tab-nav { |
| padding: 4px 4px 0; |
| } |
| #extras_params, |
| #extras_metadata { |
| padding: 0px 4px 4px !important; |
| } |
|
|
| #pnginfo_html2_info > div > b { |
| color: var(--ae-primary-color); |
| text-transform: capitalize; |
| } |
|
|
| .block.gradio-accordion .hide + .open.label-wrap { |
| border-bottom-left-radius: 0; |
| border-bottom-right-radius: 0; |
| } |
|
|
| .block.gradio-accordion .label-wrap.open { |
| margin-bottom: var(--ae-inside-padding-size); |
| |
| } |
|
|
| .block.gradio-accordion > .gap.svelte-vt1mxs > div:first-child { |
| margin-top: calc(var(--ae-inside-padding-size) * 2) !important; |
| } |
|
|
| [id$="2img_extra_networks_row"].aside .gap.svelte-vt1mxs > div:first-child { |
| margin-top: 0 !important; |
| } |
|
|
| #extras_resize_mode { |
| flex-wrap: nowrap; |
| } |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| .block.gradio-accordion:hover .label-wrap { |
| color: var(--ae-main-bg-color) !important; |
| background-color: var(--ae-primary-color) !important; |
| } |
|
|
| .block.gradio-accordion > div.wrap { |
| pointer-events: none !important; |
| cursor: pointer; |
| width: auto !important; |
| height: var(--ae-accordion-header-height) !important; |
| z-index: 1; |
| left: 0 !important; |
| top: 0 !important; |
| opacity: 0 !important; |
| } |
|
|
| .form > .gradio-row > .form { |
| border: 0 !important; |
| } |
|
|
| .padded { |
| padding: var(--ae-inside-padding-size) !important; |
| } |
|
|
| .gradio-row, |
| .gap { |
| gap: var(--ae-outside-gap-size) !important; |
| } |
|
|
| button.tool { |
| max-width: 34px; |
| min-height: 34px; |
| min-width: 34px !important; |
| } |
|
|
| div.block.padded { |
| |
| border-width: var(--ae-border-width); |
| border-color: var(--ae-panel-border-color); |
| border-radius: var(--ae-panel-border-radius) !important; |
| background: var(--ae-panel-bg-color); |
| |
| |
| } |
|
|
| fieldset.block.padded { |
| background-color: var(--ae-panel-bg-color) !important; |
| |
| |
| border-radius: var(--ae-panel-border-radius) !important; |
| } |
|
|
| div.svelte-b6y5bg, |
| div.gradio-row > .form { |
| |
| border-width: var(--ae-border-width) !important; |
| border-color: var(--ae-panel-border-color) !important; |
| border-radius: var(--ae-panel-border-radius) !important; |
| background: var(--ae-panel-border-color) !important; |
| box-shadow: none !important; |
| |
| |
| } |
|
|
| .block.gradio-dropdown, |
| .block.gradio-slider, |
| .block.gradio-checkbox, |
| .block.gradio-textbox, |
| .block.gradio-radio, |
| .block.gradio-checkboxgroup, |
| .block.gradio-number, |
| .block.gradio-colorpicker { |
| border-width: 0; |
| box-shadow: none !important; |
| } |
|
|
| .gradio-dropdown input { |
| margin: 0 !important; |
| } |
|
|
| .block.gradio-dropdown span.single-select { |
| color: var(--ae-input-color) !important; |
| } |
|
|
| .dropdown-arrow.svelte-p5edak { |
| fill: var(--ae-input-color) !important; |
| } |
|
|
| .wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label, |
| .wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label, |
| button.tool.secondary, |
| button.secondary, |
| .gradio-dropdown label .wrap, |
| input[type="text"], |
| input[type="password"], |
| input[type="email"], |
| textarea, |
| input[type="number"] { |
| outline: none !important; |
| box-shadow: none !important; |
| border: 1px solid var(--ae-input-border-color) !important; |
| border-radius: var(--ae-panel-border-radius) !important; |
| background: var(--ae-input-bg-color) !important; |
| color: var(--ae-input-color) !important; |
| text-align: left !important; |
| min-width: unset; |
| } |
|
|
| button.tool.secondary, |
| button.secondary { |
| text-align: center !important; |
| } |
|
|
| .gradio-container-3-31-0 .prose * { |
| color: var(--ae-label-color); |
| } |
|
|
| .gradio-container-3-23-0 .prose code { |
| background-color: var(--ae-panel-bg-color); |
| border-radius: var(--ae-panel-bg-color); |
| border: 1px solid var(--ae-panel-border-color); |
| padding: 0 !important; |
| margin: 0 !important; |
| white-space: break-spaces !important; |
| } |
|
|
| .wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label, |
| .wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label, |
| .gradio-container-3-31-0 [type="text"], |
| .gradio-container-3-31-0 [type="email"], |
| .gradio-container-3-31-0 [type="url"], |
| .gradio-container-3-31-0 [type="password"], |
| .gradio-container-3-31-0 [type="number"], |
| .gradio-container-3-31-0 [type="date"], |
| .gradio-container-3-31-0 [type="datetime-local"], |
| .gradio-container-3-31-0 [type="month"], |
| .gradio-container-3-31-0 [type="search"], |
| .gradio-container-3-31-0 [type="tel"], |
| .gradio-container-3-31-0 [type="time"], |
| .gradio-container-3-31-0 [type="week"], |
| .gradio-container-3-31-0 [multiple], |
| .gradio-container-3-31-0 textarea, |
| .gradio-container-3-31-0 select { |
| line-height: 1.5rem; |
| padding: 4px 8px; |
| } |
|
|
| .gradio-container-3-31-0 [type="checkbox"], |
| .gradio-container-3-31-0 [type="radio"] { |
| background-color: var(--ae-input-bg-color); |
| border: 1px solid var(--ae-input-border-color); |
| border-radius: var(--ae-panel-border-radius); |
| } |
|
|
| .gradio-container-3-31-0 [type="checkbox"]:checked, |
| .gradio-container-3-31-0 [type="radio"]:checked { |
| background-color: var(--ae-primary-color); |
| } |
|
|
| .gradio-slider input[type="number"] { |
| padding-right: 2px !important; |
| max-height: 24px !important; |
| width: 64px !important; |
| margin-bottom: var(--ae-inside-padding-size); |
| } |
|
|
| .no-slider-layout .gradio-slider input[type="range"] { |
| display: none; |
| } |
| .no-slider-layout .gradio-slider input[type="number"] { |
| width: 100% !important; |
| margin-bottom: 0; |
| min-height: 34px; |
| padding-right: 8px !important; |
| } |
| .no-slider-layout .head.svelte-1cl284s { |
| flex-direction: column; |
| } |
| [id*="2img_toprow"] > div:first-child { |
| min-width: unset !important; |
| } |
| .no-slider-layout [id$="2img_settings"] { |
| min-width: min(420px, 100%) !important; |
| } |
|
|
| .no-slider-layout div.block.padded.gradio-slider { |
| align-content: stretch; |
| } |
| [id*="2img_checkboxes"] > .form > div { |
| min-width: unset !important; |
| white-space: nowrap; |
| } |
| input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70 { |
| align-self: flex-start; |
| margin-top: 2px; |
| } |
| .thumbnail-small.svelte-g4rw9 > img.svelte-g4rw9 { |
| object-fit: contain; |
| max-height: 54px !important; |
| } |
| .thumbnail-small.svelte-g4rw9.svelte-g4rw9 { |
| width: auto; |
| max-height: 56px; |
| max-width: 180px; |
| } |
| .no-slider-layout [id$="2img_res_switch_btn"] { |
| height: 34px; |
| align-self: flex-end; |
| margin-bottom: var(--ae-inside-padding-size) !important; |
| } |
| .no-slider-layout [id$="2img_dimensions_row"] > .form { |
| background-color: var(--ae-panel-bg-color) !important; |
| } |
|
|
| .gradio-dropdown:not(.multiselect) .wrap-inner { |
| padding: 0px 5px !important; |
| height: 32px !important; |
| } |
|
|
| fieldset span, |
| label > span { |
| color: var(--ae-label-color) !important; |
| } |
|
|
| .gradio-radio label > span { |
| color: var(--ae-input-color) !important; |
| } |
|
|
| input[type="number"], |
| input[type="text"], |
| input[type="password"], |
| input[type="email"], |
| textarea { |
| height: 34px !important; |
| } |
|
|
| .gradio-slider input[type="range"] { |
| align-self: flex-start; |
| } |
|
|
| span.svelte-1gfkn6j:not(.has-info) { |
| margin-top: 1px; |
| margin-left: 1px; |
| margin-bottom: var(--ae-inside-padding-size); |
| } |
|
|
| |
| label.block { |
| display: flex; |
| justify-content: space-between; |
| flex-direction: column; |
| min-height: 100%; |
| } |
|
|
| div.block.padded.gradio-slider { |
| display: flex; |
| flex-wrap: wrap; |
| align-content: space-between; |
| } |
|
|
| |
| .wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, |
| .wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { |
| gap: var(--ae-inside-padding-size); |
| } |
|
|
| input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked, |
| input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked:hover, |
| input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:checked:focus { |
| border-color: var(--ae-input-focus-color); |
| background-image: var(--radio-circle); |
| background-color: var(--ae-primary-color); |
| } |
|
|
| input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked, |
| input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked:hover, |
| input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:checked:focus, |
| input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked, |
| input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked:hover, |
| input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:checked:focus { |
| border-color: var(--ae-input-focus-color); |
| background-image: var(--checkbox-check); |
| background-color: var(--ae-primary-color); |
| } |
|
|
| input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70, |
| input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, |
| input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { |
| box-shadow: none; |
| border: 1px solid var(--ae-input-border-color); |
| border-radius: var(--ae-panel-border-radius); |
| background-color: var(--ae-input-bg-color); |
| line-height: var(--line-sm); |
| } |
|
|
| input.svelte-1ojmf70.svelte-1ojmf70.svelte-1ojmf70:hover, |
| input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt:hover, |
| input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04:hover { |
| border-color: var(--ae-input-focus-color); |
| background-color: var(--ae-input-bg-color); |
| } |
|
|
| label.svelte-1p9xokt > .svelte-1p9xokt + .svelte-1p9xokt, |
| label.svelte-1qxcj04 > .svelte-1qxcj04 + .svelte-1qxcj04 { |
| margin-right: var(--size-1); |
| } |
|
|
| input.svelte-56zyyb { |
| background: none; |
| } |
|
|
| .gradio-colorpicker label.block { |
| flex-direction: row; |
| } |
|
|
| |
| |
| |
| |
| |
| .gradio-dropdown.multiselect .wrap-inner { |
| padding: 0 !important; |
| margin: 0 !important; |
| gap: 0 !important; |
| min-height: 32px; |
| } |
|
|
| [id$="2img_styles_row"].gradio-column > .form { |
| flex-wrap: nowrap; |
| flex-direction: row; |
| border: 0; |
| } |
|
|
| [id$="2img_styles"] { |
| padding: 0 !important; |
| } |
|
|
| [id$="2img_styles"] label { |
| flex-direction: row; |
| display: flex; |
| flex-grow: 1; |
| background-color: var(--ae-main-bg-color) !important; |
| } |
|
|
| [id$="2img_styles"] label .wrap { |
| flex-grow: 1; |
| border-top-right-radius: 0 !important; |
| border-bottom-right-radius: 0 !important; |
| margin-right: -2px; |
| } |
|
|
| [id$="2img_styles"] label > span { |
| padding-right: 5px; |
| margin-bottom: 0 !important; |
| } |
|
|
| [id$="2img_token_counter"].block, |
| [id$="2img_negative_token_counter"].block { |
| position: absolute !important; |
| text-align: right; |
| z-index: 99; |
| } |
|
|
| [id$="2img_actions_column"] { |
| flex-grow: 0 !important; |
| flex-direction: column !important; |
| min-width: unset !important; |
| } |
|
|
| [id$="2img_tools"] > .form.svelte-b6y5bg { |
| background: 0 !important; |
| border: 0 !important; |
| } |
|
|
| [id$="2img_prompt"], |
| [id$="2img_neg_prompt"] { |
| padding: 0 !important; |
| border: 0 !important; |
| background: 0; |
| } |
|
|
| [id$="2img_token_counter"].block, |
| [id$="2img_negative_token_counter"].block, |
| [id$="2img_prompt"] label span, |
| [id$="2img_neg_prompt"] label span { |
| padding: 4px !important; |
| margin: 0 !important; |
| } |
|
|
| [id$="2img_prompt"] textarea, |
| [id$="2img_neg_prompt"] textarea { |
| margin: -1px; |
| width: calc(100% + 2px); |
| } |
|
|
| |
| .compact.svelte-vt1mxs, |
| .panel.svelte-vt1mxs { |
| border: solid var(--ae-panel-border-width) var(--ae-panel-border-color); |
| border-radius: var(--ae-panel-border-radius); |
| background: var(--ae-panel-bg-color); |
| padding: var(--ae-outside-gap-size); |
| background: var(--ae-frame-bg-color); |
| } |
|
|
| .compact.svelte-15lo0d8 { |
| border-radius: var(--ae-panel-border-radius); |
| background: var(--ae-panel-border-color); |
| padding: 0; |
| gap: 1px !important; |
| } |
|
|
| [id$="-collapse"], |
| [id$="-collapse-one"] > div { |
| border: 0 !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| border-radius: 0 !important; |
| background-color: transparent !important; |
| overflow: visible !important; |
| outline: 0 !important; |
| } |
|
|
| [id$="-collapse-one"] > div.form { |
| background: 0 !important; |
| } |
|
|
| [id$="-collapse-one"] > div.form > div { |
| padding: 0 !important; |
| } |
|
|
| [id^="row_setting_"] { |
| gap: 0px !important; |
| } |
|
|
| [id^="row_setting_"] > div + div.form { |
| flex-grow: 0; |
| min-width: unset; |
| } |
|
|
| [id*="2img_seed_row"] label { |
| flex-direction: row; |
| } |
|
|
| [id$="2img_seed"] label span { |
| margin-bottom: 0 !important; |
| margin-right: 8px !important; |
| align-self: center; |
| } |
|
|
| [id$="2img_group_seed"] { |
| gap: 0 !important; |
| } |
|
|
| [id$="2img_subseed_show"] label { |
| margin-top: 6px; |
| } |
|
|
| #subseed_show_box-collapse-all { |
| margin-left: -1px; |
| min-width: unset; |
| flex-grow: 0; |
| } |
|
|
| div.svelte-15lo0d8 > .form > * { |
| min-width: min(100px, 100%); |
| } |
|
|
| label { |
| pointer-events: none !important; |
| } |
|
|
| label > * { |
| pointer-events: all; |
| } |
|
|
| span.ml-2 { |
| margin-left: 0 !important; |
| padding-left: var(--size-2); |
| } |
|
|
| |
| .svelte-j1gjts { |
| pointer-events: none !important; |
| width: 5px !important; |
| height: 5px !important; |
| background-color: var(--ae-primary-color) !important; |
| top: 2px !important; |
| left: 2px !important; |
| } |
|
|
| .svelte-j1gjts > * { |
| display: none !important; |
| } |
|
|
| |
| |
| |
| |
| |
| |
| |
| |
| |
|
|
| #txtimg_hr_finalres { |
| min-height: 0 !important; |
| outline: 0; |
| position: absolute; |
| margin-top: 2px; |
| margin-left: 60px; |
| } |
|
|
| #txtimg_hr_finalres .resolution { |
| font-weight: bold; |
| } |
|
|
| #txt2img_hr_upscaler { |
| max-width: 100%; |
| } |
|
|
| #txtimg_hr_finalres .prose.gradio-html { |
| padding: var(--ae-inside-padding-size) !important; |
| } |
|
|
| .gradio-container-3-31-0 .prose { |
| min-height: unset !important; |
| } |
|
|
| #header-top > .gradio-row:not(#nav_menu, #nav_menu_header_tabs) { |
| margin-left: max(4px, var(--ae-outside-gap-size)); |
| } |
|
|
| #header-top { |
| gap: 1px !important; |
| } |
|
|
| [id$="_prompt_image"] + div { |
| gap: 1px !important; |
| } |
|
|
| [id*="2img_toprow"], |
| [id*="2img_toprow"] .gap { |
| gap: 1px !important; |
| } |
|
|
| .script-group, |
| [id*="_sub-group"] { |
| padding: var(--ae-inside-padding-size) !important; |
| background-color: var(--ae-subgroup-bg-color) !important; |
| border-radius: var(--ae-panel-border-radius); |
| border: 1px solid var(--ae-subpanel-border-color) !important; |
| margin-top: calc(-1px + var(--ae-outside-gap-size) * -1); |
| padding-bottom: calc(var(--ae-inside-padding-size) + 2px) !important; |
| } |
|
|
| .script-group > div, |
| [id*="_sub-group"] > div { |
| border-radius: var(--ae-subpanel-border-radius); |
| } |
|
|
| .script-group div.block, |
| [id*="_sub-group"] div.block { |
| background-color: var(--ae-subpanel-bg-color) !important; |
| border: 0px solid var(--ae-subpanel-border-color) !important; |
| border-radius: var(--ae-subpanel-border-radius) !important; |
| margin: 0px; |
| } |
|
|
| .script-group fieldset.block.padded, |
| .script-group div.gradio-row > .form, |
| [id*="_sub-group"] div.gradio-row > .form { |
| background-color: var(--ae-subpanel-bg-color) !important; |
| border-radius: var(--ae-subpanel-border-radius) !important; |
| } |
|
|
| .script-group div.svelte-b6y5bg, |
| .script-group div.gradio-row > .form, |
| [id*="_sub-group"] div.gradio-row > .form { |
| border: 0; |
| padding: 1px; |
| background: var(--ae-subpanel-border-color) !important; |
| gap: 1px !important; |
| margin: 0px; |
| border-radius: var(--ae-subpanel-border-radius) !important; |
| } |
|
|
| [id*="_sub-group"] div.gradio-row > .form { |
| border: 0; |
| padding: 0px; |
| } |
|
|
| .compact.svelte-15lo0d8, |
| .panel.svelte-15lo0d8 { |
| border-radius: var(--ae-panel-border-radius); |
| background: var(--ae-panel-bg-color); |
| padding: 0; |
| gap: 1px !important; |
| } |
|
|
| .script-group .compact, |
| .script-group .gradio-column { |
| gap: 1px !important; |
| padding: 0; |
| } |
|
|
| .script-group button.secondary, |
| .script-group .wrap.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 label, |
| .script-group .wrap.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt label, |
| .script-group input[type="checkbox"], |
| .script-group input[type="radio"] { |
| border-radius: var(--ae-subpanel-border-radius) !important; |
| } |
|
|
| .script-group div.block.gradio-html { |
| background: transparent !important; |
| } |
|
|
| .script-group input[type="number"], |
| .script-group input[type="range"], |
| .script-group textarea, |
| .script-group button.tool.secondary, |
| [id*="_sub-group"] button.tool.secondary, |
| [id*="_sub-group"] input:not(.border-none) { |
| border-radius: var(--ae-subpanel-border-radius) !important; |
| border: 1px solid var(--ae-subgroup-input-border-color) !important; |
| background: var(--ae-subgroup-input-bg-color) !important; |
| color: var(--ae-subgroup-input-color) !important; |
| } |
|
|
| .script-group button.tool.secondary:hover, |
| button.tool.secondary:hover, |
| [id*="_sub-group"] button.tool.secondary:hover { |
| background: var(--ae-icon-color) !important; |
| |
| } |
|
|
| #png_2img_results button.secondary:hover, |
| [id^="image_buttons_"] button.secondary:hover { |
| background: var(--ae-icon-color) !important; |
| color: var(--ae-icon-hover-color) !important; |
| } |
|
|
| .script-group > div.gradio-row, |
| [id*="_sub-group"] > div.gradio-row { |
| gap: 1px !important; |
| border: 1px solid var(--ae-subpanel-border-color) !important; |
| margin: -1px; |
| background: var(--ae-subpanel-border-color) !important; |
| border-radius: var(--ae-subpanel-border-radius) !important; |
| |
| position: relative; |
| left: 1px; |
| top: 1px; |
| } |
|
|
| [id*="_sub-group"] div.gradio-row:not(:last-child) > .form { |
| |
| } |
|
|
| .script-group + div.form, |
| [id*="_group_"] + div.form { |
| margin-top: calc(-1px + var(--ae-outside-gap-size) * -1); |
| } |
|
|
| [id$="-collapse-all"] div:not([class*="wrap"]) { |
| border: none !important; |
| margin: 0 !important; |
| padding: 0 !important; |
| border-radius: 0 !important; |
| background-color: transparent !important; |
| outline: 0 !important; |
| } |
|
|
| [id*="_sub-group"] [id$="-collapse-all"] > div.form { |
| background-color: transparent !important; |
| } |
|
|
| .script-group .gradio-dropdown label .wrap, |
| [id*="_sub-group"] .gradio-dropdown label .wrap { |
| border-radius: var(--ae-subpanel-border-radius) !important; |
| background: var(--ae-subgroup-input-bg-color) !important; |
| border-color: var(--ae-subgroup-input-border-color) !important; |
| } |
|
|
| .script-group .gradio-dropdown label .wrap span, |
| [id*="_sub-group"] .gradio-dropdown label .wrap span { |
| color: var(--ae-subgroup-input-color) !important; |
| } |
|
|
| .script-group .dropdown-arrow, |
| [id*="_sub-group"] .dropdown-arrow { |
| fill: var(--ae-subgroup-input-color) !important; |
| } |
|
|
| [id*="_controls_sub-group"] { |
| border: 0 !important; |
| padding-left: 0 !important; |
| padding-right: 0 !important; |
| padding-bottom: 2px !important; |
| } |
|
|
| .script-alwayson-group .gradio-html + .form { |
| padding-top: 1px; |
| } |
|
|
| #mode_img2img > .form { |
| border: 0 !important; |
| } |
|
|
| [id$="-collapse"] button, |
| [id$="-collapse-one"] button, |
| [id$="-collapse-all"] button { |
| align-self: flex-end; |
| } |
|
|
| [id$="-collapse"] fieldset, |
| [id$="-collapse-one"] fieldset, |
| [id$="-collapse-all"] fieldset { |
| padding: 0; |
| } |
|
|
| .block.gradio-file, |
| .block.gradio-image { |
| border-radius: 0; |
| background: var(--ae-input-bg-color); |
| border-color: var(--ae-input-border-color); |
| } |
|
|
| .gradio-tabs { |
| background-color: var(--ae-main-bg-color); |
| padding: var(--ae-inside-padding-size); |
| border-radius: var(--ae-panel-border-radius); |
| } |
|
|
| .gradio-accordion .gradio-tabs { |
| padding: 0; |
| } |
|
|
| #img2img_dimensions_row{ |
| min-width:unset !important; |
| max-width:34px; |
| } |
|
|
| [id$="2img_detect_image_size_btn"], |
| [id$="2img_res_switch_btn"] { |
| margin: -1px !important; |
| } |
|
|
| #dim_controls > div:nth-child(2) { |
| margin-top: -1px !important; |
| margin-bottom: -1px !important; |
| } |
|
|
| |
| |
| |
| .gradio-button.generate-box-skip, |
| .gradio-button.generate-box-interrupt { |
| display: none; |
| } |
|
|
| button.secondary, |
| button.primary { |
| border: 1px solid var(--ae-input-border-color) !important; |
| border-radius: var(--ae-panel-border-radius) !important; |
| background: var(--ae-input-bg-color) !important; |
| color: var(--ae-input-color) !important; |
| } |
|
|
| button.secondary:hover, |
| button.primary:hover { |
| background: var(--ae-primary-color) !important; |
| color: var(--ae-input-bg-color) !important; |
| } |
|
|
| [id$="_generate"], |
| [id$="2img_settings"] > button:first-child { |
| min-height: var(--ae-generate-button-height); |
| } |
|
|
| button[id$="_generate_forever"] { |
| flex-grow: 0; |
| min-width: unset; |
| } |
|
|
| button[id$="_generate_forever"].active { |
| background: var(--ae-primary-color) !important; |
| color: var(--ae-input-bg-color) !important; |
| } |
|
|
| button[id$="_generate_forever"].active:before { |
| background: var(--ae-icon-hover-color) !important; |
| } |
|
|
| [id$="_interrupt"].secondary, |
| [id$="_skip"].secondary { |
| min-height: var(--ae-generate-button-height); |
| background-color: var(--ae-input-bg-color); |
| |
| |
| |
| |
| |
| display: none; |
| } |
|
|
| [id$="_interrupt"].secondary:hover, |
| [id$="_skip"].secondary:hover { |
| background-color: var(--ae-cancel-color) !important; |
| } |
|
|
| [id$="2img_generate_box"] { |
| position: relative; |
| } |
|
|
| [id$="_interrupt"] { |
| left: 0; |
| } |
|
|
| [id$="_skip"] { |
| right: 0; |
| } |
|
|
| [id$="2img_generate_box"] button { |
| display: flex; |
| } |
|
|
| .inactive { |
| opacity: 0.5; |
| } |
|
|
| .performance { |
| font-size: 0.85em; |
| color: var(--ae-primary-color) !important; |
| } |
|
|
| .performance p { |
| display: inline-block; |
| } |
|
|
| .performance .time { |
| margin-right: 0; |
| } |
|
|
| |
| |
| |
|
|
| .image-buttons button { |
| min-width: auto; |
| } |
|
|
| .infotext { |
| overflow-wrap: break-word; |
| } |
|
|
| #img2img_unused_scale_by_slider { |
| visibility: hidden; |
| width: 0.5em; |
| max-width: 0.5em; |
| min-width: 0.5em; |
| } |
|
|
| |
|
|
| .context-menu-items a:hover { |
| color: var(--ae-nav-bg-color); |
| background-color: var(--ae-primary-color); |
| } |
|
|
| .context-menu-items { |
| list-style: none; |
| margin: 0; |
| padding: 0; |
| } |
|
|
| .context-menu-items a { |
| display: block; |
| padding: 5px; |
| cursor: pointer; |
| } |
|
|
| |
| |
| |
|
|
| [id$="2img_settings"]::before { |
| pointer-events: none; |
| content: ""; |
| position: absolute; |
| z-index: 999; |
| height: calc( |
| var(--ae-container-height-gap) - var(--ae-generate-button-height) |
| ); |
| top: calc( |
| var(--ae-generate-button-height) + (var(--ae-outside-gap-size) * 2) |
| ); |
| left: 0; |
| bottom: 0; |
| width: 100%; |
| background: linear-gradient( |
| 0deg, |
| var(--ae-main-bg-color), |
| transparent 0%, |
| transparent 99%, |
| var(--ae-main-bg-color) 100% |
| ); |
| } |
|
|
| [id$="2img_settings"] { |
| min-width: min(490px, 100%) !important; |
| flex: 1 1 0%; |
| |
| } |
|
|
| [id$="2img_settings_scroll"] { |
| |
| height: calc( |
| var(--ae-container-height-gap) - var(--ae-generate-button-height) - |
| (var(--ae-outside-gap-size)) |
| ); |
| overflow-y: auto !important; |
| overflow-x: hidden; |
| |
| |
| |
| margin: 0; |
| padding-top: var(--ae-outside-gap-size) !important; |
| } |
|
|
| [id$="_prompt_image"] + div { |
| flex-wrap: nowrap; |
| } |
|
|
| [id$="2img_settings"] { |
| flex-grow: 1; |
| flex-shrink: 0; |
| |
| flex-basis: 50%; |
| } |
|
|
| [id$="2img_results"] { |
| flex-grow: 0 !important; |
| flex-shrink: 1 !important; |
| flex-basis: 50%; |
| } |
|
|
| [id$="_splitter"] { |
| flex-grow: 0 !important; |
| flex-shrink: 0 !important; |
| |
| cursor: col-resize; |
| margin: 0 0 0 auto; |
| min-width: 1px !important; |
| max-width: 1px !important; |
| align-self: stretch; |
| |
| padding: 0px 2px !important; |
| background-image: linear-gradient( |
| 0deg, |
| var(--ae-input-bg-color), |
| var(--ae-input-bg-color) 60%, |
| transparent 60%, |
| transparent 100% |
| ); |
| background-size: 1px 5px; |
| background-repeat-x: no-repeat; |
| background-position: 2px; |
| border: none; |
| } |
|
|
| #tabs [id$="2img_results"] { |
| flex: 1 1 50%; |
| } |
|
|
| |
| |
| |
|
|
| [id$="png_2img_settings"]::before { |
| display: none; |
| } |
|
|
| [id$="png_2img_settings_scroll"] { |
| padding: 0 !important; |
| height: calc(100vh - 170px); |
| } |
|
|
| [id$="png_2img_settings_scroll"] div[data-testid="image"] img { |
| max-height: unset !important; |
| } |
|
|
| #pnginfo_image div[data-testid="image"] > div { |
| max-height: calc(100vh - 175px) !important; |
| height: 100% !important; |
| } |
|
|
| #pnginfo_image { |
| height: 100% !important; |
| } |
|
|
| #pnginfo_image div[data-testid="image"] { |
| max-height: unset; |
| height: 100% !important; |
| } |
|
|
| [id$="png_2img_results"] > div:nth-child(3) { |
| display: none; |
| } |
|
|
| button.secondary { |
| min-height: 34px; |
| padding: 4px !important; |
| } |
|
|
| .thumbnail-item { |
| box-shadow: none !important; |
| border: 1px solid var(--ae-panel-border-color) !important; |
| border-radius: 0 !important; |
| background: var(--ae-main-bg-color) !important; |
| aspect-ratio: unset !important; |
| overflow: visible !important; |
| object-fit: contain !important; |
| } |
|
|
| .block.gradio-gallery.svelte-mppz8v { |
| background: var(--ae-main-bg-color); |
| border-color: var(--ae-panel-border-color); |
| } |
|
|
| |
| |
| |
| [id$="png_2img_results"] > div:nth-child(3) { |
| display: none; |
| } |
|
|
| [id$="train_tabs_2img_settings"]::before { |
| display: none; |
| } |
|
|
| [id$="train_tabs_2img_settings"] .tabitem { |
| background-color: var(--ae-input-bg-color) !important; |
| border-radius: var(--ae-panel-border-radius) !important; |
| padding: var(--ae-outside-gap-size) !important; |
| max-width: 100%; |
| } |
|
|
| [id$="train_tabs_2img_settings"] > div:first-child { |
| margin: 0; |
| padding: 0; |
| width: calc(100vw - (var(--ae-container-padding) * 2) - 4px); |
| } |
|
|
| [id$="train_tabs_2img_settings"] [id$="_2img_settings_scroll"] { |
| padding-top: 0 !important; |
| height: calc( |
| var(--ae-container-height-gap) - var(--ae-generate-button-height) - |
| (var(--ae-outside-gap-size)) + 50px |
| ); |
| } |
|
|
| #ti_2img_splitter, |
| #ti_2img_results { |
| margin-top: 28px; |
| max-height: calc(var(--ae-container-height) - 28px); |
| } |
|
|
| #ti_output { |
| padding: 0 !important; |
| border: 0; |
| background: 0; |
| } |
|
|
| #ti_output label span { |
| display: none; |
| } |
|
|
| #ti_error + div *:not(.progressDiv, .progress), |
| #ti_error + div { |
| background: transparent !important; |
| border: 0 !important; |
| padding: 4px 0; |
| } |
|
|
| #ti_error, |
| #ti_output, |
| #ti_progress { |
| padding: 0 8px !important; |
| } |
|
|
| #ti_gallery_container .livePreview { |
| height: calc(var(--ae-container-height-gap) - 150px) !important; |
| } |
|
|
| #tabs, |
| #tabs_extensions, |
| #tab_settings, |
| #tab_settings .tabs, |
| [id$="train_tabs_2img_settings"] { |
| padding: 0 !important; |
| } |
|
|
| #train_tabs_2img_settings .primary.gradio-button { |
| min-height: var(--ae-generate-button-height); |
| } |
|
|
| #train_2img_settings_scroll .gradio-row.svelte-15lo0d8:not(:last-child) { |
| gap: 1px !important; |
| } |
|
|
| [id^="train_process_"] { |
| min-width: 180px !important; |
| } |
|
|
| .gradio-html, |
| #settings_result { |
| height: auto !important; |
| width: 100%; |
| color: var(--ae-primary-color); |
| padding: 0 !important; |
| } |
|
|
| .block.svelte-mppz8v { |
| box-shadow: none; |
| border-color: var(--ae-panel-border-color); |
| border-radius: 0; |
| background: var(--ae-input-bg-color); |
| } |
|
|
| #tabs { |
| flex-grow: 1; |
| } |
|
|
| |
| |
| |
|
|
| [id$="2img_extra_networks_row"].aside { |
| position: fixed; |
| top: var(--ae-top-header-height); |
| width: 90%; |
| right: 0; |
| height: calc(100% - var(--ae-top-header-height)); |
| max-width: 50%; |
| min-width: 320px; |
| z-index: 9999; |
| transform: translateX(100%); |
| transition: all 0.25s ease 0s; |
| box-shadow: rgba(0, 0, 0, 0) -30px 0 30px -30px; |
| padding: calc(1rem - var(--ae-outside-gap-size)); |
| background-color: var(--ae-main-bg-color) !important; |
| display: block !important; |
| } |
|
|
| [id$="2img_extra_networks_row"].aside.open { |
| transform: translateX(0); |
| box-shadow: rgba(0, 0, 0, 0.4) -30px 0 30px -30px; |
| } |
|
|
| [id$="2img_extra_networks_row"].aside > div:first-child { |
| border: 0 !important; |
| padding-top: 0 !important; |
| } |
|
|
| [id$="2img_extra_networks_row"].aside > div:first-child > div:first-child { |
| display: none; |
| border: 0; |
| } |
|
|
| [id$="2img_extra_networks_row"].aside.\!hidden, |
| [id$="2img_extra_networks_row"].aside > div:first-child > div:last-child { |
| display: block !important; |
| padding-top: 0; |
| } |
|
|
| [id$="2img_extra_close"] { |
| display: none; |
| } |
|
|
| [id$="_subdirs"] button { |
| max-height: 34px; |
| margin-bottom: var(--ae-inside-padding-size) !important; |
| } |
|
|
| [id$="2img_extra_networks_row"].aside .gradio-accordion > .label-wrap { |
| display: none !important; |
| } |
|
|
| |
| |
| |
| .extra-network-cards .nocards, |
| .extra-network-thumbs .nocards { |
| margin: 1.25em 0.5em 0.5em; |
| } |
|
|
| .extra-network-cards .nocards h1, |
| .extra-network-thumbs .nocards h1 { |
| font-size: 1.5em; |
| margin-bottom: 1em; |
| } |
|
|
| .extra-network-cards .nocards li, |
| .extra-network-thumbs .nocards li { |
| margin-left: 0.5em; |
| } |
|
|
| .extra-networks div { |
| margin: 0; |
| padding: 0; |
| border: 0; |
| } |
|
|
| .extra-networks > div:first-child > * { |
| margin-bottom: 0; |
| } |
|
|
| .extra-networks .tabitem .block.gradio-html { |
| padding: 0 !important; |
| } |
|
|
| .extra-networks .search, |
| [id$="2img_extra_refresh"], |
| [id$="2img_extra_close"] { |
| max-height: 32px; |
| margin-right: 4px; |
| border: 0; |
| flex-grow: 1; |
| padding-bottom: 0px !important; |
| min-height: 34px !important; |
| } |
|
|
| .extra-networks .search { |
| width: 60%; |
| } |
|
|
| .extra-networks [id$="2img_extra_clear"] { |
| position: relative; |
| border-radius: 50% !important; |
| margin-left: -25px !important; |
| margin-top: 8px; |
| right: 8px; |
| height: fit-content; |
| } |
|
|
| .extra-networks + * { |
| display: none !important; |
| } |
|
|
| .extra-network-cards { |
| display: grid; |
| |
| |
| |
| |
| grid-gap: var(--ae-inside-padding-size); |
|
|
| max-height: calc(var(--ae-extra-networks-height) * 1.33); |
|
|
| grid-template-rows: repeat( |
| var(--ae-extra-networks-visible-rows), |
| calc(var(--ae-extra-networks-card-real-size) * 1.33) |
| ); |
| grid-auto-columns: var(--ae-extra-networks-card-real-size); |
| grid-auto-flow: column; |
| overflow-x: auto; |
| overflow-y: hidden; |
| scroll-snap-type: x mandatory; |
| } |
|
|
| [id$="2img_extra_networks_row"].aside .extra-network-cards { |
| |
| |
| grid-template-columns: repeat( |
| auto-fit, |
| minmax(calc(var(--ae-extra-networks-card-size) * 25%), 1fr) |
| ); |
| |
| |
| overflow-x: hidden; |
| grid-template-rows: auto; |
| grid-auto-flow: row; |
| max-height: unset; |
| |
| } |
|
|
| [id$="2img_extra_networks_row"].aside .tabitem { |
| overflow-y: auto; |
| overflow-x: hidden; |
| max-height: calc(100vh - 160px); |
| border-radius: 0; |
| } |
|
|
| .extra-networks .tab-nav { |
| padding-bottom: var(--ae-inside-padding-size); |
| } |
|
|
| .extra-network-cards .card { |
| position: relative; |
| background-size: cover; |
| background-repeat: no-repeat; |
| background-position: center; |
| z-index: 1; |
| cursor: pointer; |
| border: 1px dashed var(--ae-panel-bg-color); |
| display: block !important; |
| } |
|
|
| .extra-network-cards .card::after { |
| display: block; |
| content: ""; |
| padding-bottom: 133%; |
| } |
|
|
| .extra-network-cards .card-container { |
| position: relative; |
| } |
|
|
| .extra-network-cards .image-icon { |
| background-color: var(--ae-panel-border-color); |
| -webkit-mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/image-icon.svg) no-repeat 50% 50%; |
| position: absolute; |
| width: 24px; |
| height: 24px; |
| top: 50%; |
| left: 50%; |
| z-index: 0; |
| transform: translateX(-50%) translateY(-50%); |
| } |
|
|
| .card-container .description { |
| display: none !important; |
| } |
|
|
| .extra-network-cards .card .actions { |
| position: absolute; |
| bottom: 0; |
| left: 0; |
| right: 0; |
| padding: 0.5em; |
|
|
| background: rgba(0, 0, 0, 0.5); |
| |
| |
| text-shadow: none; |
| box-shadow: none; |
| } |
|
|
| .extra-network-cards .card .actions:hover { |
| background-color: rgba(0, 0, 0, 0.5); |
| } |
|
|
| .extra-network-cards .card .actions .name { |
| font-size: var(--ae-extra-networks-name-size); |
| font-weight: 700; |
| line-break: anywhere; |
| color: var(--ae-text-color); |
| } |
|
|
| .extra-network-cards .card .actions:hover .additional { |
| display: block; |
| } |
|
|
| .extra-network-cards .card ul { |
| margin: 0.25em 0 0.75em 0.25em; |
| cursor: unset; |
| } |
|
|
| .extra-network-cards .card ul a { |
| cursor: pointer; |
| } |
|
|
| .extra-network-cards .card .metadata-button:before, |
| .extra-network-thumbs .card .metadata-button:before { |
| content: "🛈"; |
| } |
|
|
| .extra-network-cards .card .metadata-button, |
| .extra-network-thumbs .card .metadata-button { |
| display: none; |
| position: absolute; |
| right: 8px; |
| top: 8px; |
| color: white; |
| text-shadow: 2px 2px 3px black; |
| font-size: 22pt; |
| } |
|
|
| .extra-network-cards .card:hover .metadata-button, |
| .extra-network-thumbs .card:hover .metadata-button { |
| display: inline-block; |
| } |
|
|
| .extra-network-cards .card .metadata-button:hover, |
| .extra-network-thumbs .card .metadata-button:hover { |
| color: var(--ae-primary-color); |
| } |
|
|
| .extra-network-cards .card { |
| overflow: hidden; |
| } |
|
|
| .extra-network-cards .card img { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| object-fit: cover; |
| width: 100%; |
| height: 100%; |
| } |
|
|
| |
| |
| |
| .tabitem { |
| background-color: var(--ae-main-bg-color) !important; |
| padding: 0 !important; |
| border: 0 !important; |
| } |
|
|
| .tabs .border-b-2 { |
| border-color: var(--ae-input-bg-color); |
| } |
|
|
| .tabs > div > button { |
| padding: 8px; |
| padding-top: 0; |
| padding-right: 10px; |
| padding-left: 0; |
| color: var(--ae-label-color); |
| border: 0; |
| opacity: 0.75; |
| } |
|
|
| .tabs > div > button:hover { |
| color: var(--ae-label-color); |
| opacity: 1; |
| } |
|
|
| .tabs > div > .selected { |
| background: transparent; |
| border: 0; |
| color: var(--ae-primary-color); |
| } |
|
|
| #tabs > div:first-child > button.selected { |
| color: var(--ae-primary-color); |
| } |
|
|
| |
| #tabs > div:first-child { |
| position: fixed; |
| z-index: 10000; |
| display: block; |
| width: 90%; |
| height: 100%; |
| background-color: var(--ae-nav-bg-color) !important; |
| top: 0; |
| padding-top: var(--ae-top-header-height); |
| left: 0; |
| max-width: 320px; |
| transform: translateX(-100%); |
| transition: all 0.25s ease 0s; |
| box-shadow: rgba(0, 0, 0, 0)-30px 0 30px 30px; |
| overflow-y: auto; |
| overflow-x: hidden; |
| } |
|
|
| #tabs > div:first-child.open { |
| transform: translateX(0); |
| box-shadow: rgba(0, 0, 0, 0.4)-30px 0 30px 30px; |
| } |
|
|
| #tabs > div:first-child > button { |
| display: block; |
| width: 320px; |
| text-align: left; |
| background-color: transparent !important; |
| border-top: 2px !important; |
| border-bottom: 2px !important; |
| border-left: 0; |
| border-right: 0; |
| border-radius: 0 !important; |
| padding: 0px; |
| padding-left: 20px; |
| min-height: 37px; |
| color: var(--ae-nav-color); |
| } |
|
|
| #tabs > div:first-child > button:hover { |
| background-color: var(--ae-primary-color) !important; |
| color: var(--ae-main-bg-color) !important; |
| } |
|
|
| #tabs > div { |
| padding: 0; |
| border: 0; |
| } |
|
|
| .tab-nav.svelte-1g805jl { |
| border: 0; |
| |
| } |
|
|
| #dim_controls > div:first-child { |
| margin-bottom: max(7px, var(--ae-outside-gap-size)) !important; |
| } |
|
|
| input.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, |
| input.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { |
| background-color: var(--ae-panel-bg-color); |
| } |
|
|
| label.svelte-1p9xokt.svelte-1p9xokt.svelte-1p9xokt, |
| label.svelte-1qxcj04.svelte-1qxcj04.svelte-1qxcj04 { |
| pointer-events: all !important; |
| } |
|
|
| |
| |
| |
|
|
| |
| #quicksettings_overflow { |
| position: fixed; |
| z-index: 9999; |
| display: block; |
| width: 90%; |
| background-color: var(--ae-main-bg-color) !important; |
| top: var(--ae-top-header-height); |
| bottom: 0px; |
| padding: 16px; |
| |
| right: 0; |
| max-width: 480px; |
| transform: translateX(100%); |
| transition: all 0.25s ease 0s; |
| box-shadow: rgba(0, 0, 0, 0) -30px 0 30px -30px; |
| overflow: hidden; |
| padding-top: 0; |
| } |
|
|
| #quicksettings_overflow_container { |
| overflow-y: auto; |
| height: calc(100% - 45px); |
| } |
|
|
| #quicksettings_overflow.open { |
| transform: translateX(0); |
| box-shadow: rgba(0, 0, 0, 0.4) -30px 0 30px -30px; |
| } |
|
|
| #quicksettings_overflow > div { |
| margin-bottom: var(--ae-outside-gap-size); |
| } |
|
|
| #quicksettings_actions > div { |
| background-color: transparent !important; |
| border: 0; |
| } |
|
|
| #quicksettings_actions > div > div, |
| [id*="add2quick_"] { |
| min-width: unset !important; |
| flex-grow: 0 !important; |
| padding: 4px !important; |
| border: 1px solid var(--ae-panel-border-color) !important; |
| } |
|
|
| #quicksettings_actions > div label, |
| [id*="add2quick_"] label { |
| display: block; |
| position: relative; |
| cursor: pointer; |
| line-height: 25px; |
| -webkit-user-select: none; |
| -moz-user-select: none; |
| -ms-user-select: none; |
| user-select: none; |
| margin: auto !important; |
| padding: 0 !important; |
| min-width: 25px; |
| min-height: 25px; |
| } |
|
|
| |
| #quicksettings_actions > div input, |
| [id*="add2quick_"] input { |
| position: absolute; |
| opacity: 0; |
| cursor: pointer; |
| height: 0; |
| width: 0; |
| } |
|
|
| |
| #quicksettings_actions > div span, |
| [id*="add2quick_"] span { |
| position: absolute; |
| top: 0; |
| left: 0; |
| height: 25px; |
| width: 25px; |
| background-color: var(--ae-input-color); |
| padding: 0; |
| margin: 0 !important; |
| opacity: 0.5; |
| } |
|
|
| [id*="add2quick_"] span { |
| -webkit-mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/menu-add-fill.svg) no-repeat 50% 50%; |
| } |
|
|
| |
| #quicksettings_draggable label input:checked ~ span, |
| #quicksettings_actions > div label:hover input ~ span, |
| [id*="add2quick_"] label:hover input ~ span { |
| background-color: var(--ae-icon-color); |
| opacity: 1; |
| } |
|
|
| |
|
|
| [id*="add2quick_"] label input:checked ~ span { |
| -webkit-mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/close-line.svg) no-repeat 50% 50%; |
| background-color: var(--ae-input-color); |
| opacity: 0.5; |
| } |
|
|
| #quicksettings_draggable span { |
| -webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; |
| } |
|
|
| #quicksettings_sort_asc span { |
| -webkit-mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/sort-asc.svg) no-repeat 50% 50%; |
| } |
|
|
| #quicksettings_sort_desc span { |
| -webkit-mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/sort-desc.svg) no-repeat 50% 50%; |
| } |
|
|
| #quicksettings_overflow_container > div.marker-bottom:after, |
| #quicksettings_overflow_container > div.marker-top:before { |
| content: " "; |
| display: inline-block; |
| background-color: var(--ae-primary-color); |
| width: 100%; |
| height: 2px; |
| position: relative; |
| margin-top: calc((1px + (var(--ae-outside-gap-size) / 2)) * -1); |
| } |
|
|
| #quicksettings_overflow_container > div.marker-bottom:after { |
| top: calc((var(--ae-outside-gap-size) / 2) - 1px); |
| } |
|
|
| #quicksettings_overflow_container > div > div:nth-child(2), |
| [id$="settings_2img_settings"] > div > div:nth-child(2) { |
| flex-shrink: 1 !important; |
| flex-grow: 0 !important; |
| flex-basis: 0% !important; |
| min-width: unset; |
| position: relative; |
| margin-left: -1px; |
| } |
|
|
| |
| |
| |
| |
| |
|
|
| #quicksettings_overflow_container.no-scroll { |
| |
| |
| } |
|
|
| |
| |
| |
|
|
| #quicksettings_overflow_container > div.dragging { |
| opacity: 0.4 !important; |
| } |
|
|
| [draggable="true"] [id*="add2quick_"] { |
| pointer-events: none; |
| } |
|
|
| [draggable="true"] [id*="add2quick_"] label input:checked ~ span { |
| -webkit-mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; |
| mask: url(./file=html/svg/drag-drop-line.svg) no-repeat 50% 50%; |
| background-color: var(--ae-input-color); |
| opacity: 0.5; |
| } |
|
|
| #quicksettings_actions > div label input:checked ~ span:after, |
| #quicksettings_actions > div label:hover input:checked ~ span, |
| [id*="add2quick_"] label:hover input:checked ~ span { |
| background-color: var(--ae-icon-color); |
| opacity: 1; |
| } |
|
|
| |
| #quicksettings_actions > div label span:after, |
| [id*="add2quick_"] label span:after { |
| content: ""; |
| position: absolute; |
| display: none; |
| } |
|
|
| |
| #quicksettings_actions > div label input:checked ~ span:after, |
| [id*="add2quick_"] label input:checked ~ span:after { |
| display: block; |
| } |
|
|
| #ui_add2quick_setting_hidden_tabs, |
| [id*="add2quick_setting_quicksettings"] { |
| display: none; |
| } |
|
|
| |
| |
| |
| #modelmerger_models { |
| gap: 1px !important; |
| } |
|
|
| #modelmerger_config_method { |
| margin: -1px; |
| width: auto; |
| margin-bottom: calc(var(--ae-outside-gap-size) * -1); |
| } |
|
|
| |
| |
| |
| #tabs_extensions .block { |
| padding: 0 !important; |
| } |
|
|
| #tab_extensions table { |
| border-collapse: collapse; |
| width: 100%; |
| } |
|
|
| #tab_extensions table td, |
| #tab_extensions table th { |
| padding: 0.25em 0.5em; |
| border: 1px solid var(--ae-panel-border-color); |
| overflow-wrap: anywhere; |
| min-width: 75px; |
| } |
| #tab_extensions table tr { |
| background-color: var(--ae-main-bg-color); |
| } |
| #tab_extensions table tr:nth-child(even) { |
| background-color: var(--ae-frame-bg-color); |
| } |
|
|
| #tab_extensions table input[type="checkbox"] { |
| margin-right: 0.5em; |
| top: -3px; |
| } |
|
|
| #tab_extensions table button { |
| max-width: 5em; |
| min-width: 5em; |
| } |
|
|
| #extensions_installed_top div { |
| |
| } |
|
|
| #tab_extensions input[disabled="disabled"] { |
| opacity: 0.5; |
| } |
|
|
| .extension-tag { |
| font-weight: 700; |
| font-size: 95%; |
| } |
|
|
| #available_extensions .info { |
| margin: 0; |
| } |
|
|
| #available_extensions .date_added { |
| opacity: 0.85; |
| font-size: 90%; |
| } |
|
|
| |
| |
| |
| #row_setting_quicksettings_list, |
| #row_setting_gradio_theme, |
| #row_setting_hidden_tabs |
| { |
| display:none !important; |
| } |
| pre { |
| white-space: pre-wrap; |
| |
| white-space: -moz-pre-wrap; |
| |
| white-space: -pre-wrap; |
| |
| white-space: -o-pre-wrap; |
| |
| word-wrap: break-word; |
| |
| } |
|
|
| [id$="settings_2img_settings"] { |
| max-height: calc(100vh - 245px); |
| overflow-y: auto; |
| } |
|
|
| [id$="settings_2img_settings"]::before { |
| display: none; |
| } |
|
|
| #settings_result { |
| height: auto !important; |
| width: 100%; |
| text-align: center; |
| color: var(--ae-primary-color); |
| min-height: unset; |
| } |
|
|
| #settings_sd #row_setting_sd_model_checkpoint { |
| display: none; |
| } |
|
|
| #settings { |
| display: block; |
| } |
|
|
| #settings > div { |
| border: none; |
| margin-left: 10em; |
| } |
|
|
| #settings > div.tab-nav { |
| float: left; |
| display: block; |
| margin-left: 0; |
| width: 12em; |
| } |
|
|
| #settings > div.tab-nav button { |
| display: block; |
| border: none; |
| text-align: left; |
| white-space: initial; |
| height: 27px; |
| padding: 0px; |
| padding-right: 10px; |
| |
| |
| |
| |
| |
| |
| |
| |
| } |
|
|
| #settings > div.tab-nav button.selected { |
| |
| border-left: 2px solid; |
| border-radius: 0; |
| padding-left: 5px; |
| } |
|
|
| .global-popup-inner { |
| top: 50px; |
| position: relative; |
| overflow-y: auto; |
| height: calc(100% - 50px); |
| width: 100%; |
| } |
|
|
| .global-popup-close { |
| position: absolute; |
| right: 16px; |
| top: 16px; |
| width: 25px; |
| height: 25px; |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; |
| } |
|
|
| .global-popup { |
| position: fixed; |
| z-index: 99999; |
| top: 0px; |
| left: 0px; |
| background: var(--ae-main-bg-color); |
| color: var(--ae-primary-color); |
| line-break: anywhere; |
| height: 100%; |
| width: 100%; |
| opacity: 0.98; |
| } |
|
|
| @media only screen and (max-width: 860px) { |
| |
| [id$="_splitter"] { |
| display: none !important; |
| } |
|
|
| [id$="2img_settings_scroll"] { |
| height: auto !important; |
| } |
|
|
| [id$="2img_results"] { |
| max-height: unset !important; |
| } |
|
|
| [id$="2img_settings"]::before { |
| display: none; |
| } |
|
|
| [id$="2img_actions_column"] { |
| flex-basis: 100% !important; |
| max-width: 100% !important; |
| } |
|
|
| [id$="2img_settings_scroll"] { |
| padding-top: 0; |
| } |
|
|
| .gr-block, |
| .dark .gr-block, |
| .gr-form, |
| #txt2img_seed, |
| #img2img_seed, |
| #txt2img_subseed, |
| #img2img_subseed, |
| #txt2img_seed_row > div, |
| #img2img_seed_row > div, |
| #txt2img_subseed_row > div, |
| #img2img_subseed_row > div { |
| min-width: 70px; |
| } |
|
|
| [id$="2img_gallery"] { |
| margin-bottom: 0px; |
| } |
|
|
| [id$="2img_tools"] { |
| gap: 2px; |
| } |
|
|
| [id$="2img_results"] { |
| flex-grow: 1 !important; |
| flex-shrink: 1 !important; |
| overflow-x: hidden; |
| } |
|
|
| #splitter { |
| display: none; |
| } |
|
|
| [id$="2img_prompt_image"] + div { |
| flex-wrap: wrap; |
| } |
|
|
| [id$="2img_results"] { |
| flex-grow: 1 !important; |
| } |
|
|
| .token-counter span { |
| position: relative; |
| top: 3px; |
| right: 3px; |
| } |
|
|
| #settings > div { |
| margin-left: 0; |
| } |
|
|
| #settings > div.tab-nav { |
| float: none; |
| display: flex !important; |
| margin-left: 0; |
| width: auto; |
| margin-bottom: 8px; |
| } |
|
|
| [id$="2img_hr_scale"] { |
| flex-basis: 100% !important; |
| } |
|
|
| |
| |
| |
| |
| |
|
|
| [id$="2img_gallery"], |
| [id$="2img_gallery"] div.preview.fixed-height > img, |
| [id$="2img_gallery"] .preview.fixed-height, |
| [id$="2img_gallery"] img + div.thumbnails { |
| position: relative !important; |
| height: auto !important; |
| min-height: auto; |
| border-radius: 0 !important; |
| } |
|
|
| [id$="2img_gallery"], |
| [id$="2img_gallery"] div.preview.fixed-height > img, |
| [id$="2img_gallery"] .preview.fixed-height { |
| max-height: unset !important; |
| } |
|
|
| [id$="2img_gallery"] div > img { |
| object-fit: contain; |
| } |
|
|
| [id$="2img_gallery"] .preview.fixed-height, |
| [id$="2img_gallery"] .grid-wrap, |
| [id$="2img_gallery"] .empty { |
| min-height: auto !important; |
| } |
|
|
| [id$="2img_gallery"] img + div.thumbnails { |
| height: 60px !important; |
| } |
|
|
| .livePreview img { |
| object-position: top; |
| border-radius: 0 !important; |
| position: relative; |
| width: 100%; |
| } |
|
|
| .livePreview.init, |
| .livePreview:not(.init) + div { |
| display: none; |
| } |
|
|
| .livePreview { |
| |
| max-height: unset !important; |
| |
| position: relative !important; |
| left: 0; |
| top: 0; |
| width: auto !important; |
| height: auto !important; |
| } |
|
|
| div.svelte-10ogue4 > *:first-child.livePreview { |
| |
| |
| } |
|
|
| div.svelte-10ogue4 > *:first-child.livePreview > img { |
| |
| } |
|
|
| [id$="png_2img_results"] { |
| order: 1; |
| } |
|
|
| [id$="settings_2img_settings"] { |
| max-height: none; |
| } |
|
|
| #nav_menu_header_tabs, |
| #tab_extensions td, |
| #tab_extensions th { |
| display: none !important; |
| } |
|
|
| #tab_extensions td:nth-child(2), |
| #tab_extensions td:nth-child(2), |
| #tab_extensions th:nth-child(2), |
| #tab_extensions th:nth-child(2), |
| #tab_extensions td:nth-child(5), |
| #tab_extensions td:nth-child(5), |
| #tab_extensions th:nth-child(5), |
| #tab_extensions th:nth-child(5), |
| #tab_extensions td:first-child, |
| #tab_extensions td:last-child, |
| #tab_extensions th:first-child, |
| #tab_extensions th:last-child { |
| display: table-cell !important; |
| } |
|
|
| #ti_2img_splitter, |
| #ti_2img_results { |
| margin-top: 0; |
| } |
|
|
| #train_tabs_2img_settings > div:first-child { |
| width: 100%; |
| } |
|
|
| #tab_ti .livePreview, |
| #tab_ti .livePreview.init { |
| min-height: unset !important; |
| } |
|
|
| #ti_gallery_container { |
| max-height: unset !important; |
| } |
|
|
| #ti_error, |
| #ti_output, |
| #ti_progress { |
| padding: 0 !important; |
| } |
| } |
|
|
| |
| |
| |
| .gradio-container.app { |
| min-height: 100vh !important; |
| } |
|
|
| .main > .wrap > .contain { |
| flex-grow: 1; |
| display: flex; |
| flex-direction: column; |
| } |
|
|
| footer { |
| display: none !important; |
| } |
|
|
| #tabs + div { |
| position: relative; |
| z-index: 999; |
| padding: 0px !important; |
| } |
|
|
| .footer-wrapper { |
| display: flex; |
| } |
|
|
| .footer-links { |
| position: relative; |
| width: 100%; |
| margin: 0; |
| padding: 0; |
| list-style-type: none; |
| display: flex; |
| flex-direction: row; |
| justify-content: center; |
| align-items: center; |
| } |
|
|
| .footer-links > li { |
| display: inline-block; |
| width: 32px; |
| height: 32px; |
| text-align: center; |
| float: left; |
| border-radius: 100%; |
| position: relative; |
| display: flex; |
| margin: 0 !important; |
| } |
|
|
| .footer-links > li > div, |
| .footer-links > li > a { |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| font-size: 24px; |
| fill: var(--ae-primary-color); |
| } |
|
|
| .footer-links > li:last-child { |
| position: absolute; |
| top: 0; |
| right: 0; |
| } |
|
|
| a:hover, |
| a:visited, |
| a { |
| color: var(--ae-primary-color) !important; |
| text-decoration: none !important; |
| } |
|
|
| a:hover { |
| color: var(--ae-primary-color) !important; |
| text-decoration: underline !important; |
| } |
|
|
| |
| |
| |
|
|
| a[data-tooltip].top:before, |
| a[data-tooltip].top:after { |
| transform: translateY(10px); |
| } |
|
|
| a[data-tooltip].top:hover:after, |
| a[data-tooltip].top:hover:before { |
| transform: translateY(0px); |
| } |
|
|
| a[data-tooltip].right:before, |
| a[data-tooltip].right:after { |
| transform: translateX(0px); |
| } |
|
|
| a[data-tooltip].right:hover:after, |
| a[data-tooltip].right:hover:before { |
| transform: translateX(10px); |
| } |
|
|
| a[data-tooltip].bottom:before, |
| a[data-tooltip].bottom:after { |
| transform: translateY(-10px); |
| } |
|
|
| a[data-tooltip].bottom:hover:after, |
| a[data-tooltip].bottom:hover:before { |
| transform: translateY(0px); |
| } |
|
|
| a[data-tooltip].left:before, |
| a[data-tooltip].left:after { |
| transform: translateX(0px); |
| } |
|
|
| a[data-tooltip].left:hover:after, |
| a[data-tooltip].left:hover:before { |
| transform: translateX(-10px); |
| } |
|
|
| a[data-tooltip] { |
| position: relative; |
| max-width: 320px; |
| } |
|
|
| a[data-tooltip]:after, |
| a[data-tooltip]:before { |
| position: absolute; |
| visibility: hidden; |
| opacity: 0; |
| transition: transform 200ms ease, opacity 200ms; |
| box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); |
| z-index: 99; |
| } |
|
|
| a[data-tooltip]:before { |
| content: attr(data-tooltip); |
| background-color: var(--ae-main-bg-color); |
| |
| font-size: 10px; |
| font-weight: bold; |
| padding: 10px 15px; |
| border-radius: 5px; |
| white-space: nowrap; |
| text-decoration: none; |
| text-transform: uppercase; |
| letter-spacing: 1px; |
| } |
|
|
| a[data-tooltip]:after { |
| width: 0; |
| height: 0; |
| border: 6px solid transparent; |
| content: ""; |
| } |
|
|
| a[data-tooltip]:hover:after, |
| a[data-tooltip]:hover:before { |
| visibility: visible; |
| opacity: 1; |
| transform: translateY(0px); |
| } |
|
|
| a[data-tooltip][data-position="top"]:before { |
| bottom: 100%; |
| left: -130%; |
| margin-bottom: 10px; |
| } |
|
|
| a[data-tooltip][data-position="top"]:after { |
| border-top-color: var(--ae-main-bg-color); |
| border-bottom: none; |
| bottom: 101%; |
| left: calc(50% - 6px); |
| margin-bottom: 4px; |
| } |
|
|
| a[data-tooltip][data-position="left"]:before { |
| top: -12%; |
| right: 100%; |
| margin-right: 10px; |
| } |
|
|
| a[data-tooltip][data-position="left"]:after { |
| border-left-color: var(--ae-main-bg-color); |
| border-right: none; |
| top: calc(50% - 3px); |
| right: 100%; |
| margin-top: -6px; |
| margin-right: 4px; |
| } |
|
|
| a[data-tooltip][data-position="right"]:before { |
| top: -5%; |
| left: 100%; |
| margin-left: 10px; |
| } |
|
|
| a[data-tooltip][data-position="right"]:after { |
| border-right-color: var(--ae-main-bg-color); |
| border-left: none; |
| top: calc(50% - 6px); |
| left: calc(100% + 4px); |
| } |
|
|
| a[data-tooltip][data-position="bottom"]:before { |
| top: 100%; |
| left: -130%; |
| margin-top: 10px; |
| } |
|
|
| a[data-tooltip][data-position="bottom"]:after { |
| border-bottom-color: var(--ae-main-bg-color); |
| border-top: none; |
| top: 100%; |
| left: 5px; |
| margin-top: 4px; |
| } |
|
|
| .tooltip-html { |
| text-align: left; |
| position: absolute; |
| top: 50%; |
| left: 50%; |
| transform: translate(-50%, -50%); |
| transform-origin: 0 0; |
| } |
|
|
| .tooltip-html i { |
| position: relative; |
| display: block; |
| } |
|
|
| .tooltip-html .icon-info { |
| fill: var(--ae-primary-color); |
| scale: 0.9; |
| } |
|
|
| li.coffee-circle { |
| |
| margin-left: 5px; |
| margin-right: 5px; |
| } |
|
|
| .coffee-circle .tooltip-html .top { |
| width: 220px; |
| max-width: 220px; |
| text-align: left; |
| padding: 16px; |
| } |
|
|
| li.coffee-circle p { |
| color: var(--ae-text-color); |
| float: inherit; |
| padding: 0; |
| font-size: 14px; |
| line-height: 16px !important; |
| |
| padding-bottom: 4px; |
| } |
| li.coffee-circle p b { |
| color: var(--ae-primary-color) !important; |
| font-weight: normal; |
| } |
| .coffee-circle .tooltip-html .top > svg, |
| .coffee-circle .tooltip-html .top > img { |
| |
| |
| margin: auto; |
| margin-bottom: 8px; |
| |
| } |
| .coffee-circle .tooltip-html .top blockquote { |
| background: var(--ae-frame-bg-color); |
| padding: 10px; |
| quotes: "\201C""\201D""\2018""\2019"; |
| border: 0; |
| margin: 8px 0 !important; |
| } |
| .coffee-circle .tooltip-html .top blockquote:before { |
| opacity: 0.5; |
| content: open-quote; |
| font-size: 3em; |
| line-height: 0.1em; |
| margin-right: 0.15em; |
| vertical-align: -0.4em; |
| } |
| .coffee-circle .tooltip-html .top blockquote p { |
| display: inline; |
| } |
|
|
| .coffee svg path { |
| fill: var(--ae-primary-color) !important; |
| } |
|
|
| .tooltip-html .coffee { |
| fill: var(--ae-main-bg-color); |
| } |
|
|
| .tooltip-html .top { |
| min-width: 200px; |
| max-width: 400px; |
| top: -20px; |
| left: 50%; |
| transform: translate(-90%, -100%); |
| padding: 10px 20px; |
| background-color: var(--ae-main-bg-color); |
| font-weight: normal; |
| font-size: 14px; |
| border-radius: var(--ae-panel-border-radius); |
| position: absolute; |
| z-index: 99; |
| box-sizing: border-box; |
| box-shadow: 0 1px 8px rgb(0 0 0 / 50%); |
| display: none; |
| } |
|
|
| .tooltip-html .top.center { |
| transform: translate(-50%, -100%); |
| } |
|
|
| .tooltip-html:hover .top { |
| display: block; |
| } |
|
|
| .tooltip-html .top i { |
| position: absolute; |
| top: 100%; |
| left: 90%; |
| margin-left: -15px; |
| width: 30px; |
| height: 15px; |
| overflow: hidden; |
| } |
|
|
| .tooltip-html .top.center i { |
| left: 50%; |
| } |
|
|
| .tooltip-html .top i::after { |
| content: ""; |
| position: absolute; |
| width: 15px; |
| height: 15px; |
| left: 50%; |
| transform: translate(-50%, -50%) rotate(45deg); |
| background-color: var(--ae-main-bg-color); |
| box-shadow: 0 1px 8px rgba(0, 0, 0, 0.5); |
| } |
|
|
| .tooltip-html span { |
| opacity: 0.5; |
| } |
|
|
| .tooltip-html a { |
| color: var(--ae-primary-color); |
| } |
|
|
| |
| |
| |
|
|
| ::-webkit-scrollbar { |
| width: 10px; |
| } |
|
|
| [id$="2img_settings_scroll"]::-webkit-scrollbar { |
| width: 12px; |
| } |
|
|
| ::-webkit-scrollbar-track { |
| box-shadow: inset 0 0 10px 10px var(--ae-main-bg-color); |
| } |
|
|
| ::-webkit-scrollbar-thumb { |
| box-shadow: inset 0 0 10px 10px var(--ae-panel-bg-color); |
| } |
|
|
| ::-webkit-scrollbar-button { |
| display: none; |
| } |
|
|
| ::-webkit-scrollbar-thumb, |
| ::-webkit-scrollbar-track { |
| border-left: solid 6px var(--ae-main-bg-color); |
| border-radius: 0; |
| } |
|
|
| [id$="2img_settings_scroll"]::-webkit-scrollbar-thumb, |
| [id$="2img_settings_scroll"]::-webkit-scrollbar-track { |
| border-left: solid 8px transparent; |
| } |
|
|
| @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: 1px solid var(--ae-input-border-color); |
| position: relative; |
| border-radius: var(--ae-panel-border-radius); |
| } |
|
|
| input[type="range"]::after { |
| content: ""; |
| position: absolute; |
| height: 13px; |
| background-image: var(--ae-slider-bg-overlay); |
| opacity: 0.15; |
| width: 100%; |
| } |
|
|
| 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); |
| } |
|
|
| [id$="_sub-group"] input[type="range"] { |
| background-color: var(--ae-subgroup-input-bg-color); |
| border: 1px solid var(--ae-subgroup-input-border-color); |
| } |
| } |
|
|
| |
|
|
| input[type="range"]::-moz-range-progress { |
| background-color: var(--ae-primary-color); |
| height: 14px; |
| border: 1px solid var(--ae-primary-color); |
| } |
|
|
| input[type="range"]::-moz-range-track { |
| background-color: var(--ae-input-bg-color); |
| } |
|
|
| input[type=range]::after { |
| content: ""; |
| position: absolute; |
| height: 13px; |
| background-image: var(--ae-slider-bg-overlay); |
| opacity: 0.15; |
| width: 100%; |
| } |
|
|
| #quicksettings_overflow_container, |
| #theme_overflow_container, |
| [id$="2img_checkpoints_cards"], |
| [id$="2img_results"], |
| [id$="2img_settings_scroll"] { |
| scrollbar-color: var(--ae-panel-bg-color) var(--ae-main-bg-color) !important; |
| scrollbar-width: thin !important; |
| |
| } |
|
|
| input[type="range"] { |
| width: 100%; |
| } |
|
|
| input[type="range"]::-moz-range-track { |
| width: 100%; |
| background-color: var(--ae-input-bg-color); |
| border: none; |
| border-radius: 0px; |
|
|
| position: relative; |
| height: 100%; |
| background-image: var(--ae-slider-bg-overlay); |
| opacity: 0.15; |
| width: 100%; |
| } |
|
|
| input[type="range"]::-moz-range-thumb { |
| border: 0px solid var(--ae-primary-color); |
| width: 0px; |
| border-radius: 0%; |
| background-color: var(--ae-primary-color); |
| } |
|
|
| |
| 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; |
| } |
|
|
| |
|
|
| 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); |
| } |
|
|
| |
| |
| |
| #img2img_scale_resolution_row .form { |
| background: transparent !important; |
| border: 0 !important; |
| } |
|
|
| #img2img_unused_scale_by_slider { |
| display: none !important; |
| } |
|
|
| .center.boundedheight.flex { |
| width: 100% !important; |
| height: auto !important; |
| max-height: 50vh; |
| } |
|
|
| .image-container img.absolute-img { |
| position: relative !important; |
| } |
|
|
| .image-container img { |
| max-height: 50vh !important; |
| } |
|
|
| .image-container { |
| min-height: 25vh !important; |
| height: auto !important; |
| display: flex; |
| } |
|
|
| .absolute-img.svelte-rlgzoo { |
| position: relative; |
| opacity: 0; |
| } |
|
|
| .block.gradio-image { |
| height: auto !important; |
| } |
|
|
| div[data-testid="image"] canvas { |
| width: auto !important; |
| height: 100% !important; |
| position: absolute !important; |
| top: 0 !important; |
| left: 0 !important; |
| border: 0 !important; |
| } |
|
|
| #imageARPreview { |
| position: absolute; |
| top: 0; |
| left: 0; |
| outline: 2px solid red; |
| background: rgba(255, 0, 0, 0.3); |
| z-index: 900; |
| pointer-events: none; |
| display: none; |
| } |
|
|
| #tab_img2img div.center.boundedheight.flex { |
| display: block !important; |
| } |
|
|
| |
| |
| |
|
|
| [id^="spotlight"] .no-point-events { |
| pointer-events: none; |
| } |
|
|
| [id^="spotlight"] .move { |
| cursor: move; |
| } |
|
|
| [id^="spotlight"] .z-50, |
| [id^="spotlight"] .block-hidden { |
| display: none; |
| } |
|
|
| [id^="spotlight"] div { |
| border: 0; |
| } |
|
|
| [id^="spotlight"] { |
| position: fixed; |
| top: 0px; |
| left: 0px; |
| bottom: 0px; |
| width: 100%; |
| z-index: 99999; |
| color: #fff; |
| background-color: var(--ae-modal-bg-color); |
| opacity: 0; |
| overflow: hidden; |
| user-select: none; |
| transition: opacity 0.2s ease-out; |
| font-family: Arial, sans-serif; |
| font-size: 16px; |
| font-weight: 400; |
| contain: strict; |
| touch-action: none; |
| pointer-events: none; |
| } |
|
|
| [id^="spotlight"].show { |
| opacity: 1; |
| transition: none; |
| pointer-events: auto; |
| } |
|
|
| [id^="spotlight"].relative { |
| position: relative !important; |
| width: auto; |
| height: calc(50vh + 40px); |
| z-index: 99; |
| margin-bottom: 1px; |
| padding-top: 40px; |
| } |
|
|
| [id^="spotlight"].relative .spl-pane { |
| top: -20px; |
| } |
|
|
| [id^="spotlight"].relative .spl-pane > * { |
| position: relative; |
| } |
|
|
| [id^="spotlight"].relative .spl-close { |
| display: none; |
| } |
|
|
| [id^="spotlight"].relative .spl-page { |
| display: none; |
| } |
|
|
| [id^="spotlight"].white { |
| color: #212529; |
| background-color: #fff; |
| } |
|
|
| [id^="spotlight"].white .spl-spinner, |
| [id^="spotlight"].white .spl-prev, |
| [id^="spotlight"].white .spl-next, |
| [id^="spotlight"].white .spl-page ~ * { |
| filter: invert(1); |
| } |
|
|
| [id^="spotlight"].white .spl-progress { |
| background-color: rgba(0, 0, 0, 0.35); |
| } |
|
|
| [id^="spotlight"].white .spl-header, |
| [id^="spotlight"].white .spl-footer { |
| background-color: rgba(255, 255, 255, 0.65); |
| } |
|
|
| [id^="spotlight"].white .spl-button { |
| background: #212529; |
| color: #fff; |
| } |
|
|
| [id^="spotlight"] .cover { |
| object-fit: cover; |
| height: 100%; |
| width: 100%; |
| } |
|
|
| [id^="spotlight"] .contain { |
| object-fit: contain; |
| height: 100%; |
| width: 100%; |
| } |
|
|
|
|
| [id^="spotlight"] .autofit { |
| object-fit: none; |
| width: auto; |
| height: auto; |
| max-height: none; |
| max-width: none; |
| transition: none; |
| } |
|
|
| .spl-track { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| contain: strict; |
| } |
|
|
| .spl-spinner { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: 42px; |
| opacity: 0; |
| } |
|
|
| .spl-spinner.spin { |
| background-image: url("./file=html/svg/spotlight/preloader.svg"); |
| transition: opacity 0.2s linear 0.25s; |
| opacity: 1; |
| } |
|
|
| .spl-spinner.error { |
| background-image: url("./file=html/svg/spotlight/error.svg"); |
| background-size: 128px; |
| transition: none; |
| opacity: 0.5; |
| } |
|
|
| .spl-scene { |
| position: absolute; |
| width: 100%; |
| height: 100%; |
| transition: transform 0.65s cubic-bezier(0.1, 1, 0.1, 1); |
| contain: layout size; |
| will-change: transform; |
| } |
|
|
| .spl-pane > * { |
| position: absolute; |
| width: auto; |
| height: auto; |
| max-width: 100%; |
| max-height: 100%; |
| left: 50%; |
| top: 50%; |
| margin: 0; |
| padding: 0; |
| border: 0; |
| transform: translate(-50%, -50%) scale(1); |
| transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1), opacity 0.65s ease; |
| contain: layout style; |
| will-change: transform, opacity; |
| visibility: hidden; |
| } |
|
|
| .spl-pane { |
| position: absolute; |
| top: 0; |
| width: 100%; |
| height: 100%; |
| transition: transform 0.65s cubic-bezier(0.3, 1, 0.3, 1); |
| contain: layout size; |
| will-change: transform, contents; |
| } |
|
|
| .spl-pane.hide img { |
| display: none !important; |
| } |
|
|
| .spl-pane.hide { |
| background-size: 100%; |
| transition: background-size 0.65s cubic-bezier(0.3, 1, 0.3, 1) !important; |
| will-change: background-size !important; |
| transform: translate(0, 0) !important; |
| } |
|
|
| .spl-header { |
| position: absolute; |
| top: 0; |
| width: 100%; |
| height: 40px; |
| text-align: right; |
| background-color: rgba(0, 0, 0, 0.85); |
| transform: translateY(-100px); |
| transition: transform 0.35s ease; |
| overflow: hidden; |
| will-change: transform; |
| } |
|
|
| [id^="spotlight"].menu .spl-header, |
| .spl-header:hover { |
| transform: translateY(0); |
| } |
|
|
| .spl-header div { |
| display: inline-block; |
| vertical-align: middle; |
| white-space: nowrap; |
| width: 40px; |
| height: 40px; |
| opacity: 0.5; |
| display: flex; |
| align-items: center; |
| } |
|
|
| .spl-progress { |
| position: absolute; |
| top: 0; |
| left: -1px; |
| width: 100%; |
| height: 3px; |
| background-color: var(--ae-modal-icon-color); |
| transform: translateX(-100%); |
| transition: transform linear; |
| } |
|
|
| .spl-footer { |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| background-color: rgba(0, 0, 0, 0.45); |
| line-height: 20px; |
| padding: 20px 20px 0 20px; |
| padding-bottom: env(safe-area-inset-bottom, 0); |
| text-align: left; |
| font-size: 15px; |
| font-weight: 400; |
| transform: translateY(100%); |
| transition: transform 0.35s ease; |
| will-change: transform; |
| } |
|
|
| [id^="spotlight"].menu .spl-footer, |
| .spl-footer:hover { |
| transform: translateY(0); |
| } |
|
|
| .spl-title { |
| font-size: 22px; |
| margin-bottom: 20px; |
| } |
|
|
| .spl-description { |
| margin-bottom: 20px; |
| } |
|
|
| .spl-button { |
| display: inline-block; |
| background: #fff; |
| color: #000; |
| border-radius: 5px; |
| padding: 10px 20px; |
| margin-bottom: 20px; |
| cursor: pointer; |
| } |
|
|
| .spl-page { |
| float: left; |
| width: auto; |
| line-height: 40px; |
| } |
|
|
| .spl-page ~ * { |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: 21px; |
| float: right; |
| } |
|
|
| .spl-fullscreen { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/fullscreen-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/fullscreen-line.svg") no-repeat 50% 50%; |
| } |
|
|
| .spl-fullscreen.on { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/fullscreen-exit-line.svg") no-repeat 50% |
| 50%; |
| mask: url("./file=html/svg/fullscreen-exit-line.svg") no-repeat 50% 50%; |
| } |
|
|
| .spl-autofit { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/aspect-ratio-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/aspect-ratio-line.svg") no-repeat 50% 50%; |
| } |
|
|
| .spl-zoom-out { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/zoom-out-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/zoom-out-line.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| } |
|
|
| .spl-zoom-in { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/zoom-in-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/zoom-in-line.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| } |
|
|
| .spl-download { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/file-download-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/file-download-line.svg") no-repeat 50% 50%; |
| background-size: 20px; |
| } |
|
|
| .spl-theme { |
| background-image: url("./file=html/svg/spotlight/theme.svg"); |
| } |
|
|
| .spl-play { |
| background-image: url("./file=html/svg/spotlight/play.svg"); |
| } |
|
|
| .spl-play.on { |
| background-image: url("./file=html/svg/spotlight/pause.svg"); |
| animation: pulsate 1s ease infinite; |
| } |
|
|
| .spl-close { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/close-line.svg") no-repeat 50% 50%; |
| } |
|
|
| .spl-like { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/heart-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/heart-line.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| } |
|
|
| .spl-like.on { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/heart-fill.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/heart-fill.svg") no-repeat 50% 50%; |
| } |
|
|
| .spl-tile { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/grid-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/grid-line.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| } |
|
|
| .spl-tile.on { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/grid-fill.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/grid-fill.svg") no-repeat 50% 50%; |
| } |
|
|
| .spl-undo { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/arrow-go-back-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/arrow-go-back-line.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| } |
|
|
| .spl-clear { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/delete-bin-2-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/delete-bin-2-line.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| position: absolute; |
| left: 0; |
| } |
|
|
| .spl-pan { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/drag-move-2-fill.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/drag-move-2-fill.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| } |
|
|
| .spl-pan.on { |
| opacity: 1; |
| } |
|
|
| .spl-draw { |
| background-color: var(--ae-modal-icon-color); |
| -webkit-mask: url("./file=html/svg/ball-pen-line.svg") no-repeat 50% 50%; |
| mask: url("./file=html/svg/ball-pen-line.svg") no-repeat 50% 50%; |
| background-size: 22px; |
| } |
|
|
| .spl-color input { |
| width: 42px; |
| height: 42px; |
| padding: 5px 6px; |
| background: transparent; |
| margin-top: -1px; |
| } |
|
|
| .spl-brush { |
| width: 100px !important; |
| margin-top: 0px; |
| } |
|
|
| .spl-prev, |
| .spl-next { |
| position: absolute; |
| top: 50%; |
| left: 20px; |
| width: 50px; |
| height: 50px; |
| opacity: 0.65; |
| background-color: rgba(0, 0, 0, 0.45); |
| border-radius: 100%; |
| cursor: pointer; |
| margin-top: -25px; |
| transform: translateX(-100px); |
| transition: transform 0.35s ease; |
| background-image: url("./file=html/svg/spotlight/arrow.svg"); |
| background-position: center; |
| background-repeat: no-repeat; |
| background-size: 30px; |
| will-change: transform; |
| } |
|
|
| .spl-next { |
| left: auto; |
| right: 20px; |
| transform: translateX(100px) scaleX(-1); |
| } |
|
|
| [id^="spotlight"].menu .spl-prev { |
| transform: translateX(0); |
| } |
|
|
| [id^="spotlight"].menu .spl-next { |
| transform: translateX(0) scaleX(-1); |
| } |
|
|
| @media (hover: hover) { |
| .spl-page ~ div { |
| cursor: pointer; |
| transition: opacity 0.2s ease; |
| } |
|
|
| .spl-page ~ div:hover, |
| .spl-prev:hover, |
| .spl-next:hover { |
| opacity: 1; |
| } |
| } |
|
|
| @media (max-width: 500px) { |
| .spl-header div { |
| width: 32px; |
| } |
|
|
| .spl-footer .spl-title { |
| font-size: 20px; |
| } |
|
|
| .spl-footer { |
| font-size: 14px; |
| } |
|
|
| .spl-prev, |
| .spl-next { |
| width: 35px; |
| height: 35px; |
| margin-top: -17.5px; |
| background-size: 15px 15px; |
| } |
|
|
| .spl-spinner { |
| background-size: 30px 30px; |
| } |
|
|
| .spl-brush { |
| width: 60px !important; |
| padding-left: 10px; |
| } |
|
|
| .spl-fullscreen { |
| display: inline-block !important; |
| } |
| } |
|
|
| .hide-scrollbars { |
| overflow: hidden !important; |
| } |
|
|
| @keyframes pulsate { |
| 0% { |
| opacity: 1; |
| } |
|
|
| 50% { |
| opacity: 0.2; |
| } |
|
|
| 100% { |
| opacity: 1; |
| } |
| } |
|
|
| |
|
|
