fluxdev/stable-diffusion-webui-forge
1
1/* temporary fix to load default gradio font in frontend instead of backend */2 3@import url('webui-assets/css/sourcesanspro.css');4 5 6/* temporary fix to hide gradio crop tool until it's fixed https://github.com/gradio-app/gradio/issues/3810 */7 8div.gradio-image button[aria-label="Edit"] {9 display: none;10}11 12 13/* general gradio fixes */14 15:root, .dark{16 --checkbox-label-gap: 0.25em 0.1em;17 --section-header-text-size: 12pt;18 --block-background-fill: transparent;19 20}21 22.block.padded:not(.gradio-accordion) {23 padding: 0 !important;24}25 26div.gradio-container{27 max-width: unset !important;28}29 30.hidden{31 display: none !important;32}33 34.compact{35 background: transparent !important;36 padding: 0 !important;37}38 39div.form{40 border-width: 0;41 box-shadow: none;42 background: transparent;43 overflow: visible;44 gap: 0.5em;45}46 47.block.gradio-dropdown,48.block.gradio-slider,49.block.gradio-checkbox,50.block.gradio-textbox,51.block.gradio-radio,52.block.gradio-checkboxgroup,53.block.gradio-number,54.block.gradio-colorpicker {55 border-width: 0 !important;56 box-shadow: none !important;57}58 59div.gradio-group, div.styler{60 border-width: 0 !important;61 background: none;62}63.gap.compact{64 padding: 0;65 gap: 0.2em 0;66}67 68div.compact{69 gap: 1em;70}71 72.gradio-dropdown label span:not(.has-info),73.gradio-textbox label span:not(.has-info),74.gradio-number label span:not(.has-info)75{76 margin-bottom: 0;77}78 79.gradio-dropdown ul.options{80 z-index: 3000;81 min-width: fit-content;82 max-width: inherit;83 white-space: nowrap;84}85 86@media (pointer:fine) {87 .gradio-dropdown ul.options li.item {88 padding: 0.05em 0;89 }90}91 92.gradio-dropdown ul.options li.item.selected {93 background-color: var(--neutral-100);94}95 96.dark .gradio-dropdown ul.options li.item.selected {97 background-color: var(--neutral-900);98}99 100.gradio-dropdown div.wrap.wrap.wrap.wrap{101 box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);102}103 104.gradio-dropdown:not(.multiselect) .wrap-inner.wrap-inner.wrap-inner{105 flex-wrap: unset;106}107 108.gradio-dropdown .single-select{109 white-space: nowrap;110 overflow: hidden;111}112 113.gradio-dropdown .token-remove.remove-all.remove-all{114 display: none;115}116 117.gradio-dropdown.multiselect .token-remove.remove-all.remove-all{118 display: flex;119}120 121.gradio-slider input[type="number"]{122 width: 6em;123}124 125.block.gradio-checkbox {126 margin: 0.75em 1.5em 0 0;127}128 129.gradio-html div.wrap{130 height: 100%;131}132div.gradio-html.min{133 min-height: 0;134}135 136.block.gradio-gallery{137 background: var(--input-background-fill);138}139 140.gradio-container .prose a, .gradio-container .prose a:visited{141 color: unset;142 text-decoration: none;143}144 145a{146 font-weight: bold;147 cursor: pointer;148}149 150/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reason. */151div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdown{152 overflow: visible !important;153}154 155/* align-items isn't enough and elements may overflow in Safari. */156.unequal-height {157 align-content: flex-start;158}159 160 161/* general styled components */162 163.gradio-button.tool{164 max-width: 2.2em;165 min-width: 2.2em !important;166 height: 2.4em;167 align-self: end;168 line-height: 1em;169 border-radius: 0.5em;170}171 172.gradio-button.secondary-down{173 background: var(--button-secondary-background-fill);174 color: var(--button-secondary-text-color);175}176.gradio-button.secondary-down, .gradio-button.secondary-down:hover{177 box-shadow: 1px 1px 1px rgba(0,0,0,0.25) inset, 0px 0px 3px rgba(0,0,0,0.15) inset;178}179.gradio-button.secondary-down:hover{180 background: var(--button-secondary-background-fill-hover);181 color: var(--button-secondary-text-color-hover);182}183 184button.custom-button{185 border-radius: var(--button-large-radius);186 padding: var(--button-large-padding);187 font-weight: var(--button-large-text-weight);188 border: var(--button-border-width) solid var(--button-secondary-border-color);189 background: var(--button-secondary-background-fill);190 color: var(--button-secondary-text-color);191 font-size: var(--button-large-text-size);192 display: inline-flex;193 justify-content: center;194 align-items: center;195 transition: var(--button-transition);196 box-shadow: var(--button-shadow);197 text-align: center;198}199 200div.block.gradio-accordion {201 border: 1px solid var(--block-border-color) !important;202 border-radius: 8px !important;203 margin: 2px 0;204 padding: 8px 8px;205}206 207input[type="checkbox"].input-accordion-checkbox{208 vertical-align: sub;209 margin-right: 0.5em;210}211 212 213/* txt2img/img2img specific */214 215.block.token-counter{216 position: absolute;217 display: inline-block;218 right: 1em;219 min-width: 0 !important;220 width: auto;221 z-index: 100;222 top: -0.75em;223}224 225.block.token-counter-visible{226 display: block !important;227}228 229.block.token-counter span{230 background: var(--input-background-fill) !important;231 box-shadow: 0 0 0.0 0.3em rgba(192,192,192,0.15), inset 0 0 0.6em rgba(192,192,192,0.075);232 border: 2px solid rgba(192,192,192,0.4) !important;233 border-radius: 0.4em;234}235 236.block.token-counter.error span{237 box-shadow: 0 0 0.0 0.3em rgba(255,0,0,0.15), inset 0 0 0.6em rgba(255,0,0,0.075);238 border: 2px solid rgba(255,0,0,0.4) !important;239}240 241.block.token-counter div{242 display: inline;243}244 245.block.token-counter span{246 padding: 0.1em 0.75em;247}248 249[id$=_subseed_show]{250 min-width: auto !important;251 flex-grow: 0 !important;252 display: flex;253}254 255[id$=_subseed_show] label{256 margin-bottom: 0.65em;257 align-self: end;258}259 260[id$=_seed_extras] > div{261 gap: 0.5em;262}263 264.html-log .comments{265 padding-top: 0.5em;266}267 268.html-log .comments:empty{269 padding-top: 0;270}271 272.html-log .performance {273 font-size: 0.85em;274 color: #444;275 display: flex;276}277 278.html-log .performance p{279 display: inline-block;280}281 282.html-log .performance p.time, .performance p.vram, .performance p.time abbr, .performance p.vram abbr {283 margin-bottom: 0;284 color: var(--block-title-text-color);285}286 287.html-log .performance p.time {288}289 290.html-log .performance p.vram {291 margin-left: auto;292}293 294.html-log .performance .measurement{295 color: var(--body-text-color);296 font-weight: bold;297}298 299#txt2img_generate, #img2img_generate {300 min-height: 4.5em;301}302 303#txt2img_generate, #img2img_generate {304 min-height: 4.5em;305}306.generate-box-compact #txt2img_generate, .generate-box-compact #img2img_generate {307 min-height: 3em;308}309 310@media screen and (min-width: 2500px) {311 #txt2img_gallery, #img2img_gallery {312 min-height: 768px;313 }314}315 316.gradio-gallery .thumbnails img {317 object-fit: scale-down !important;318}319#txt2img_actions_column, #img2img_actions_column {320 gap: 0.5em;321}322#txt2img_tools, #img2img_tools{323 gap: 0.4em;324}325 326.interrogate-col{327 min-width: 0 !important;328 max-width: fit-content;329 gap: 0.5em;330}331.interrogate-col > button{332 flex: 1;333}334 335.generate-box{336 position: relative;337}338.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt, .gradio-button.generate-box-interrupting{339 position: absolute;340 width: 50%;341 height: 100%;342 display: none;343 background: #b4c0cc;344}345.gradio-button.generate-box-skip:hover, .gradio-button.generate-box-interrupt:hover, .gradio-button.generate-box-interrupting:hover{346 background: #c2cfdb;347}348.gradio-button.generate-box-interrupt, .gradio-button.generate-box-interrupting{349 left: 0;350 border-radius: 0.5rem 0 0 0.5rem;351}352.gradio-button.generate-box-skip{353 right: 0;354 border-radius: 0 0.5rem 0.5rem 0;355}356 357#img2img_scale_resolution_preview.block{358 display: flex;359 align-items: end;360}361 362#txtimg_hr_finalres .resolution, #img2img_scale_resolution_preview .resolution{363 font-weight: bold;364}365 366#txtimg_hr_finalres div.pending, #img2img_scale_resolution_preview div.pending {367 opacity: 1;368 transition: opacity 0s;369}370 371.inactive{372 opacity: 0.5;373}374 375[id$=_column_batch]{376 min-width: min(13.5em, 100%) !important;377}378 379div.dimensions-tools{380 min-width: 1.6em !important;381 max-width: fit-content;382 flex-direction: column;383 place-content: center;384}385 386div#extras_scale_to_tab div.form{387 flex-direction: row;388}389 390#img2img_sketch, #img2maskimg, #inpaint_sketch {391 overflow: overlay !important;392 resize: auto;393 background: var(--panel-background-fill);394 z-index: 5;395}396 397.image-buttons > .form{398 justify-content: center;399}400 401.infotext {402 overflow-wrap: break-word;403}404 405#img2img_column_batch{406 align-self: end;407 margin-bottom: 0.9em;408}409 410#img2img_unused_scale_by_slider{411 visibility: hidden;412 width: 0.5em;413 max-width: 0.5em;414 min-width: 0.5em;415}416 417div.toprow-compact-stylerow{418 margin: 0.5em 0;419}420 421div.toprow-compact-tools{422 min-width: fit-content !important;423 max-width: fit-content;424}425 426/* settings */427#quicksettings {428 align-items: end;429}430 431#quicksettings > div, #quicksettings > fieldset{432 max-width: 36em;433 width: fit-content;434 flex: 0 1 fit-content;435 padding: 0;436 border: none;437 box-shadow: none;438 background: none;439}440#quicksettings > div.gradio-dropdown{441 min-width: 24em !important;442}443 444#settings{445 display: block;446}447 448#settings > div{449 border: none;450 margin-left: 10em;451 padding: 0 var(--spacing-xl);452}453 454#settings > div.tab-nav{455 float: left;456 display: block;457 margin-left: 0;458 width: 10em;459}460 461#settings > div.tab-nav button{462 display: block;463 border: none;464 text-align: left;465 white-space: initial;466 padding: 4px;467}468 469#settings > div.tab-nav .settings-category{470 display: block;471 margin: 1em 0 0.25em 0;472 font-weight: bold;473 text-decoration: underline;474 cursor: default;475 user-select: none;476}477 478#settings_result{479 height: 1.4em;480 margin: 0 1.2em;481}482 483table.popup-table{484 background: var(--body-background-fill);485 color: var(--body-text-color);486 border-collapse: collapse;487 margin: 1em;488 border: 4px solid var(--body-background-fill);489}490 491table.popup-table td{492 padding: 0.4em;493 border: 1px solid rgba(128, 128, 128, 0.5);494 max-width: 36em;495}496 497table.popup-table .muted{498 color: #aaa;499}500 501table.popup-table .link{502 text-decoration: underline;503 cursor: pointer;504 font-weight: bold;505}506 507.ui-defaults-none{508 color: #aaa !important;509}510 511#settings span{512 color: var(--body-text-color);513}514 515#settings .gradio-textbox, #settings .gradio-slider, #settings .gradio-number, #settings .gradio-dropdown, #settings .gradio-checkboxgroup, #settings .gradio-radio{516 margin-top: 0.75em;517}518 519#settings span .settings-comment {520 display: inline521}522 523.settings-comment a{524 text-decoration: underline;525}526 527.settings-comment .info{528 opacity: 0.75;529}530 531#sysinfo_download a.sysinfo_big_link{532 font-size: 24pt;533}534 535#sysinfo_download a{536 text-decoration: underline;537}538 539#sysinfo_validity{540 font-size: 18pt;541}542 543#settings .settings-info{544 max-width: 48em;545 border: 1px dotted #777;546 margin: 0;547 padding: 1em;548}549 550 551/* live preview */552.progressDiv{553 position: absolute;554 height: 20px;555 background: #b4c0cc;556 border-radius: 3px !important;557 top: -14px;558 left: 0px;559 width: 100%;560}561 562.progress-container{563 position: relative;564}565 566[id$=_results].mobile{567 margin-top: 28px;568}569 570.dark .progressDiv{571 background: #424c5b;572}573 574.progressDiv .progress{575 width: 0%;576 height: 20px;577 background: #0060df;578 color: white;579 font-weight: bold;580 line-height: 20px;581 padding: 0 8px 0 0;582 text-align: right;583 border-radius: 3px;584 overflow: visible;585 white-space: nowrap;586 padding: 0 0.5em;587}588 589.livePreview{590 position: absolute;591 z-index: 300;592 background: var(--background-fill-primary);593 width: 100%;594 height: 100%;595}596 597.livePreview img{598 position: absolute;599 object-fit: contain;600 width: 100%;601 height: calc(100% - 60px); /* to match gradio's height */602}603 604/* fullscreen popup (ie in Lora's (i) button) */605 606.popup-metadata{607 color: black;608 background: white;609 display: inline-block;610 padding: 1em;611 white-space: pre-wrap;612}613 614.global-popup{615 display: flex;616 position: fixed;617 z-index: 1001;618 left: 0;619 top: 0;620 width: 100%;621 height: 100%;622 overflow: auto;623}624 625.global-popup *{626 box-sizing: border-box;627}628 629.global-popup-close:before {630 content: "×";631 position: fixed;632 right: 0.25em;633 top: 0;634 cursor: pointer;635 color: white;636 font-size: 32pt;637}638 639.global-popup-close{640 position: fixed;641 left: 0;642 top: 0;643 width: 100%;644 height: 100%;645 background-color: rgba(20, 20, 20, 0.95);646}647 648.global-popup-inner{649 display: inline-block;650 margin: auto;651 padding: 2em;652 z-index: 1001;653 max-height: 90%;654 max-width: 90%;655}656 657/* fullpage image viewer */658 659#lightboxModal{660 display: none;661 position: fixed;662 z-index: 1001;663 left: 0;664 top: 0;665 width: 100%;666 height: 100%;667 overflow: auto;668 background-color: rgba(20, 20, 20, 0.95);669 user-select: none;670 -webkit-user-select: none;671 flex-direction: column;672}673 674.modalControls {675 display: flex;676 position: absolute;677 right: 0px;678 left: 0px;679 gap: 1em;680 padding: 1em;681 background-color:rgba(0,0,0,0);682 z-index: 1;683 transition: 0.2s ease background-color;684}685.modalControls:hover {686 background-color:rgba(0,0,0, var(--sd-webui-modal-lightbox-toolbar-opacity));687}688.modalClose {689 margin-left: auto;690}691.modalControls span{692 color: white;693 text-shadow: 0px 0px 0.25em black;694 font-size: 35px;695 font-weight: bold;696 cursor: pointer;697 width: 1em;698}699 700.modalControls span:hover, .modalControls span:focus{701 color: #999;702 text-decoration: none;703}704 705#lightboxModal > img {706 display: block;707 margin: auto;708 width: auto;709}710 711#lightboxModal > img.modalImageFullscreen{712 object-fit: contain;713 height: 100%;714 width: 100%;715 min-height: 0;716}717 718.modalPrev,719.modalNext {720 cursor: pointer;721 position: absolute;722 top: 50%;723 width: auto;724 padding: 16px;725 margin-top: -50px;726 color: white;727 font-weight: bold;728 font-size: 20px;729 transition: 0.6s ease;730 border-radius: 0 3px 3px 0;731 user-select: none;732 -webkit-user-select: none;733}734 735.modalNext {736 right: 0;737 border-radius: 3px 0 0 3px;738}739 740.modalPrev:hover,741.modalNext:hover {742 background-color: rgba(0, 0, 0, 0.8);743}744 745#imageARPreview {746 position: absolute;747 top: 0px;748 left: 0px;749 border: 2px solid red;750 background: rgba(255, 0, 0, 0.3);751 z-index: 900;752 pointer-events: none;753 display: none;754}755 756@media (pointer: fine) {757 .modalPrev:hover,758 .modalNext:hover,759 .modalControls:hover ~ .modalPrev,760 .modalControls:hover ~ .modalNext,761 .modalControls:hover .cursor {762 opacity: 1;763 }764 765 .modalPrev,766 .modalNext,767 .modalControls .cursor {768 opacity: var(--sd-webui-modal-lightbox-icon-opacity);769 }770}771 772/* context menu (ie for the generate button) */773 774#context-menu{775 z-index:9999;776 position:absolute;777 display:block;778 padding:0px 0;779 border:2px solid #a55000;780 border-radius:8px;781 box-shadow:1px 1px 2px #CE6400;782 width: 200px;783}784 785.context-menu-items{786 list-style: none;787 margin: 0;788 padding: 0;789}790 791.context-menu-items a{792 display:block;793 padding:5px;794 cursor:pointer;795}796 797.context-menu-items a:hover{798 background: #a55000;799}800 801 802/* extensions */803 804#tab_extensions table{805 border-collapse: collapse;806}807 808#tab_extensions table td, #tab_extensions table th{809 border: 1px solid #ccc;810 padding: 0.25em 0.5em;811}812 813#tab_extensions table input[type="checkbox"]{814 margin-right: 0.5em;815 appearance: checkbox;816}817 818#tab_extensions button{819 max-width: 16em;820}821 822#tab_extensions input[disabled="disabled"]{823 opacity: 0.5;824}825 826.extension-tag{827 font-weight: bold;828 font-size: 95%;829}830 831#available_extensions .info{832 margin: 0;833}834 835#available_extensions .info{836 margin: 0.5em 0;837 display: flex;838 margin-top: auto;839 opacity: 0.80;840 font-size: 90%;841}842 843#available_extensions .date_added{844 margin-right: auto;845 display: inline-block;846}847 848#available_extensions .star_count{849 margin-left: auto;850 display: inline-block;851}852 853/* extensions tab table row hover highlight */854 855#extensions tr:hover td,856#config_state_extensions tr:hover td,857#available_extensions tr:hover td {858 background: rgba(0, 0, 0, 0.15);859}860 861.dark #extensions tr:hover td ,862.dark #config_state_extensions tr:hover td ,863.dark #available_extensions tr:hover td {864 background: rgba(255, 255, 255, 0.15);865}866 867/* replace original footer with ours */868 869footer {870 display: none !important;871}872 873#footer{874 text-align: center;875}876 877#footer div{878 display: inline-block;879}880 881#footer .versions{882 font-size: 85%;883 opacity: 0.85;884}885 886/* extra networks UI */887 888.extra-page > div.gap{889 gap: 0;890}891 892.extra-page-prompts{893 margin-bottom: 0;894}895 896.extra-page-prompts.extra-page-prompts-active{897 margin-bottom: 1em;898}899 900.extra-networks > div.tab-nav{901 min-height: 2.7rem;902}903 904.extra-networks-controls-div{905 align-self: center;906 margin-left: auto;907}908 909.extra-networks > div > [id *= '_extra_']{910 margin: 0.3em;911}912 913.extra-networks .tab-nav .search,914.extra-networks .tab-nav .sort915{916 margin: 0.3em;917 align-self: center;918 width: auto;919}920 921.extra-networks .tab-nav .search {922 width: 16em;923 max-width: 16em;924}925 926.extra-networks .tab-nav .sort {927 width: 12em;928 max-width: 12em;929}930 931#txt2img_extra_view, #img2img_extra_view {932 width: auto;933}934 935.extra-network-pane .nocards{936 margin: 1.25em 0.5em 0.5em 0.5em;937}938 939.extra-network-pane .nocards h1{940 font-size: 1.5em;941 margin-bottom: 1em;942}943 944.extra-network-pane .nocards li{945 margin-left: 0.5em;946}947 948.extra-network-pane .card .button-row{949 display: inline-flex;950 visibility: hidden;951 color: white;952}953 954.extra-network-pane .card .button-row {955 position: absolute;956 right: 0;957 z-index: 1;958}959 960.extra-network-pane .card:hover .button-row{961 visibility: visible;962}963 964.extra-network-pane .card-button{965 color: white;966}967 968.extra-network-pane .copy-path-button::before {969 content: "⎘";970}971 972.extra-network-pane .metadata-button::before{973 content: "🛈";974}975 976.extra-network-pane .edit-button::before{977 content: "🛠";978}979 980.extra-network-pane .card-button {981 width: 1.5em;982 text-shadow: 2px 2px 3px black;983 color: white;984 padding: 0.25em 0.1em;985}986 987.extra-network-pane .card-button:hover{988 color: red;989}990 991.extra-network-pane .card .card-button {992 font-size: 2rem;993}994 995.extra-network-pane .card-minimal .card-button {996 font-size: 1rem;997}998 999.standalone-card-preview.card .preview{1000 position: absolute;1001 object-fit: cover;1002 width: 100%;1003 height:100%;1004}1005 1006.extra-network-pane .card, .standalone-card-preview.card{1007 display: inline-block;1008 margin: 0.5rem;1009 width: 16rem;1010 height: 24rem;1011 box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);1012 border-radius: 0.2rem;1013 position: relative;1014 1015 background-size: auto 100%;1016 background-position: center;1017 overflow: hidden;1018 cursor: pointer;1019 1020 background-image: url('./file=html/card-no-preview.png')1021}1022 1023.extra-network-pane .card:hover{1024 box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35);1025}1026 1027.extra-network-pane .card .actions .additional{1028 display: none;1029}1030 1031.extra-network-pane .card .actions{1032 position: absolute;1033 bottom: 0;1034 left: 0;1035 right: 0;1036 padding: 0.5em;1037 background: rgba(0,0,0,0.5);1038 box-shadow: 0 0 0.25em 0.25em rgba(0,0,0,0.5);1039 text-shadow: 0 0 0.2em black;1040}1041 1042.extra-network-pane .card .actions *{1043 color: white;1044}1045 1046.extra-network-pane .card .actions .name{1047 font-size: 1.7em;1048 font-weight: bold;1049 line-break: anywhere;1050}1051 1052.extra-network-pane .card .actions .description {1053 display: block;1054 max-height: 3em;1055 white-space: pre-wrap;1056 line-height: 1.1;1057}1058 1059.extra-network-pane .card .actions .description:hover {1060 max-height: none;1061}1062 1063.extra-network-pane .card .actions:hover .additional{1064 display: block;1065}1066 1067.extra-network-pane .card ul{1068 margin: 0.25em 0 0.75em 0.25em;1069 cursor: unset;1070}1071 1072.extra-network-pane .card ul a{1073 cursor: pointer;1074}1075 1076.extra-network-pane .card ul a:hover{1077 color: red;1078}1079 1080.extra-network-pane .card .preview{1081 position: absolute;1082 object-fit: cover;1083 width: 100%;1084 height:100%;1085}1086 1087div.block.gradio-box.edit-user-metadata {1088 width: 56em;1089 background: var(--body-background-fill);1090 padding: 2em !important;1091}1092 1093.edit-user-metadata .extra-network-name{1094 font-size: 18pt;1095 color: var(--body-text-color);1096}1097 1098.edit-user-metadata .file-metadata{1099 color: var(--body-text-color);1100}1101 1102.edit-user-metadata .file-metadata th{1103 text-align: left;1104}1105 1106.edit-user-metadata .file-metadata th, .edit-user-metadata .file-metadata td{1107 padding: 0.3em 1em;1108 overflow-wrap: anywhere;1109 word-break: break-word;1110}1111 1112.edit-user-metadata .wrap.translucent{1113 background: var(--body-background-fill);1114}1115.edit-user-metadata .gradio-highlightedtext span{1116 word-break: break-word;1117}1118 1119.edit-user-metadata-buttons{1120 margin-top: 1.5em;1121}1122 1123div.block.gradio-box.popup-dialog, .popup-dialog {1124 width: 56em;1125 background: var(--body-background-fill);1126 padding: 2em !important;1127}1128 1129div.block.gradio-box.popup-dialog > div:last-child, .popup-dialog > div:last-child{1130 margin-top: 1em;1131}1132 1133div.block.input-accordion{1134 1135}1136 1137.input-accordion-extra{1138 flex: 0 0 auto !important;1139 margin: 0 0.5em 0 auto;1140}1141 1142div.accordions > div.input-accordion{1143 min-width: fit-content !important;1144}1145 1146div.accordions > div.gradio-accordion .label-wrap span{1147 white-space: nowrap;1148 margin-right: 0.25em;1149}1150 1151div.accordions{1152 gap: 0.5em;1153}1154 1155div.accordions > div.input-accordion.input-accordion-open{1156 flex: 1 auto;1157 flex-flow: column;1158}1159 1160 1161/* sticky right hand columns */1162 1163#img2img_results, #txt2img_results, #extras_results {1164 position: sticky;1165 top: 0.5em;1166}1167 1168body.resizing {1169 cursor: col-resize !important;1170}1171 1172body.resizing * {1173 pointer-events: none !important;1174}1175 1176body.resizing .resize-handle {1177 pointer-events: initial !important;1178}1179 1180.resize-handle {1181 position: relative;1182 cursor: col-resize;1183 grid-column: 2 / 3;1184 min-width: 16px !important;1185 max-width: 16px !important;1186 height: 100%;1187}1188 1189.resize-handle::after {1190 content: '';1191 position: absolute;1192 top: 0;1193 bottom: 0;1194 left: 7.5px;1195 border-left: 1px dashed var(--border-color-primary);1196}1197 1198/* ========================= */1199.extra-network-pane {1200 display: flex;