From 1c1e128e08a4659f0ad659fb8a5af90636df4ce2 Mon Sep 17 00:00:00 2001 From: pinokio Date: Sat, 24 Jan 2026 17:30:26 -0600 Subject: [PATCH] Replace `style.css` with an empty `style.csv`. --- style.css | 1705 ----------------------------------------------------- style.csv | 262 ++++++++ 2 files changed, 262 insertions(+), 1705 deletions(-) delete mode 100644 style.css create mode 100644 style.csv diff --git a/style.css b/style.css deleted file mode 100644 index 4bcaa110..00000000 --- a/style.css +++ /dev/null @@ -1,1705 +0,0 @@ -/* temporary fix to load default gradio font in frontend instead of backend */ - -@import url('webui-assets/css/sourcesanspro.css'); - -/* general gradio fixes */ - -:root, .dark{ - --checkbox-label-gap: 0.25em 0.1em; - --section-header-text-size: 12pt; - --block-background-fill: transparent; -} - -.block.padded:not(.gradio-accordion) { - padding: 0 !important; -} - -div.gradio-container{ - max-width: unset !important; -} - -.hidden{ - display: none !important; -} - -.compact{ - background: transparent !important; - padding: 0 !important; -} - -div.form{ - border-width: 0; - box-shadow: none; - background: transparent; - overflow: visible; - gap: 0.5em; -} - -.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 !important; - box-shadow: none !important; -} - -div.gradio-group, div.styler{ - border-width: 0 !important; - background: none; -} -.gap.compact{ - padding: 0; - gap: 0.2em 0; -} - -div.compact{ - gap: 1em; -} - -.gradio-dropdown label span:not(.has-info), -.gradio-textbox label span:not(.has-info), -.gradio-number label span:not(.has-info) -{ - margin-bottom: 0; -} - -.gradio-dropdown ul.options{ - z-index: 3000; - min-width: fit-content; - max-width: inherit; - white-space: nowrap; -} - -@media (pointer:fine) { - .gradio-dropdown ul.options li.item { - padding: 0.05em 0; - } -} - -.gradio-dropdown ul.options li.item.selected { - background-color: var(--neutral-100); -} - -.dark .gradio-dropdown ul.options li.item.selected { - background-color: var(--neutral-900); -} - -.gradio-dropdown div.wrap.wrap.wrap.wrap{ - box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); -} - -.gradio-dropdown:not(.multiselect) .wrap-inner.wrap-inner.wrap-inner{ - flex-wrap: unset; -} - -.gradio-dropdown .single-select{ - white-space: nowrap; - overflow: hidden; -} - -.gradio-dropdown .token-remove.remove-all.remove-all{ - display: none; -} - -.gradio-dropdown.multiselect .token-remove.remove-all.remove-all{ - display: flex; -} - -.gradio-slider input[type="number"]{ - width: 6em; -} - -.block.gradio-checkbox { - margin: 0.75em 1.5em 0 0; -} - -.gradio-html div.wrap{ - height: 100%; -} -div.gradio-html.min{ - min-height: 0; -} - -.block.gradio-gallery{ - background: var(--input-background-fill); -} - -.gradio-gallery > button.preview{ - width: 100%; -} - -.gradio-container .prose a, .gradio-container .prose a:visited{ - color: unset; - text-decoration: none; -} - -a{ - font-weight: bold; - cursor: pointer; -} - -.upload-container { - width: 100%; - max-width: 100%; -} - -.layer-wrap > ul { - background: var(--background-fill-primary) !important; -} - -/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reason. */ -div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdown{ - overflow: visible !important; -} - -/* align-items isn't enough and elements may overflow in Safari. */ -.unequal-height { - align-content: flex-start; -} - - -/* general styled components */ - -.gradio-button.tool{ - max-width: 2.2em; - min-width: 2.2em !important; - height: 2.4em; - align-self: end; - line-height: 1em; - border-radius: 0.5em; -} - -.gradio-button.secondary-down{ - background: var(--button-secondary-background-fill); - color: var(--button-secondary-text-color); -} -.gradio-button.secondary-down, .gradio-button.secondary-down:hover{ - box-shadow: 1px 1px 1px rgba(0,0,0,0.25) inset, 0px 0px 3px rgba(0,0,0,0.15) inset; -} -.gradio-button.secondary-down:hover{ - background: var(--button-secondary-background-fill-hover); - color: var(--button-secondary-text-color-hover); -} - -button.custom-button{ - border-radius: var(--button-large-radius); - padding: var(--button-large-padding); - font-weight: var(--button-large-text-weight); - border: var(--button-border-width) solid var(--button-secondary-border-color); - background: var(--button-secondary-background-fill); - color: var(--button-secondary-text-color); - font-size: var(--button-large-text-size); - display: inline-flex; - justify-content: center; - align-items: center; - transition: var(--button-transition); - box-shadow: var(--button-shadow); - text-align: center; -} - -div.block.gradio-accordion { - border: 1px solid var(--block-border-color) !important; - border-radius: 8px !important; - margin: 2px 0; - padding: 8px 8px; -} - -input[type="checkbox"].input-accordion-checkbox{ - vertical-align: sub; - margin-right: 0.5em; -} - - -/* txt2img/img2img specific */ - -.block.token-counter{ - position: absolute; - display: inline-block; - right: 1em; - min-width: 0 !important; - width: auto; - z-index: 100; - top: -0.75em; -} - -.block.token-counter-visible{ - display: block !important; -} - -.block.token-counter span{ - background: var(--input-background-fill) !important; - 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); - border: 2px solid rgba(192,192,192,0.4) !important; - border-radius: 0.4em; -} - -.block.token-counter.error span{ - 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); - border: 2px solid rgba(255,0,0,0.4) !important; -} - -.block.token-counter div{ - display: inline; -} - -.block.token-counter span{ - padding: 0.1em 0.75em; -} - -[id$=_subseed_show]{ - min-width: auto !important; - flex-grow: 0 !important; - display: flex; -} - -[id$=_subseed_show] label{ - margin-bottom: 0.65em; - align-self: end; -} - -[id$=_seed_extras] > div{ - gap: 0.5em; -} - -.html-log .comments{ - padding-top: 0.5em; -} - -.html-log .comments:empty{ - padding-top: 0; -} - -.html-log .performance { - font-size: 0.85em; - color: #444; - display: flex; -} - -.html-log .performance p{ - display: inline-block; -} - -.html-log .performance p.time, .performance p.vram, .performance p.profile, .performance p.time abbr, .performance p.vram abbr { - margin-bottom: 0; - color: var(--block-title-text-color); -} - -.html-log .performance p.time { -} - -.html-log .performance p.vram { - margin-left: auto; -} - -.html-log .performance p.profile { - margin-left: 0.5em; -} - -.html-log .performance .measurement{ - color: var(--body-text-color); - font-weight: bold; -} - -#txt2img_generate, #img2img_generate { - min-height: 4.5em; -} - -#txt2img_generate, #img2img_generate { - min-height: 4.5em; -} -.generate-box-compact #txt2img_generate, .generate-box-compact #img2img_generate { - min-height: 3em; -} - -@media screen and (min-width: 2500px) { - #txt2img_gallery, #img2img_gallery { - min-height: 768px; - } -} - -.gradio-gallery .thumbnails img { - object-fit: scale-down !important; -} -#txt2img_actions_column, #img2img_actions_column { - gap: 0.5em; -} -#txt2img_tools, #img2img_tools{ - gap: 0.4em; -} - -.interrogate-col{ - min-width: 0 !important; - max-width: fit-content; - gap: 0.5em; -} -.interrogate-col > button{ - flex: 1; -} - -.generate-box{ - position: relative; -} -.gradio-button.generate-box-skip, .gradio-button.generate-box-interrupt, .gradio-button.generate-box-interrupting{ - position: absolute; - width: 50%; - height: 100%; - display: none; - background: #b4c0cc; -} -.gradio-button.generate-box-skip:hover, .gradio-button.generate-box-interrupt:hover, .gradio-button.generate-box-interrupting:hover{ - background: #c2cfdb; -} -.gradio-button.generate-box-interrupt, .gradio-button.generate-box-interrupting{ - left: 0; - border-radius: 0.5rem 0 0 0.5rem; -} -.gradio-button.generate-box-skip{ - right: 0; - border-radius: 0 0.5rem 0.5rem 0; -} - -#img2img_scale_resolution_preview.block{ - display: flex; - align-items: end; -} - -#txtimg_hr_finalres .resolution, #img2img_scale_resolution_preview .resolution{ - font-weight: bold; -} - -#txtimg_hr_finalres div.pending, #img2img_scale_resolution_preview div.pending { - opacity: 1; - transition: opacity 0s; -} - -.inactive{ - opacity: 0.5; -} - -[id$=_column_batch]{ - min-width: min(13.5em, 100%) !important; -} - -div.dimensions-tools{ - min-width: 1.6em !important; - max-width: fit-content; - flex-direction: column; - place-content: center; -} - -div#extras_scale_to_tab div.form{ - flex-direction: row; -} - -.image-buttons{ - justify-content: center; -} - -.infotext { - overflow-wrap: break-word; -} - -#img2img_column_batch{ - align-self: end; - margin-bottom: 0.9em; -} - -#img2img_unused_scale_by_slider{ - visibility: hidden; - width: 0.5em; - max-width: 0.5em; - min-width: 0.5em; -} - -div.toprow-compact-stylerow{ - margin: 0.5em 0; -} - -div.toprow-compact-tools{ - min-width: fit-content !important; - max-width: fit-content; -} - -/* settings */ -#quicksettings { - --checkbox-label-padding: 6px 6px; - align-items: end; -} - -#quicksettings > div, #quicksettings > fieldset{ - width: fit-content; - flex: 0 1 fit-content; - padding: 0; - border: none; - box-shadow: none; - background: none; -} - -#quicksettings > div.model_selection{ - min-width: 20em !important; -} - -#quicksettings > div.model_selection input{ - margin-left: 2% !important; /* override the margin set for subdued */ - width: 100%; -} - -#quicksettings .icon-wrap { - margin-right: -4% !important; - background-color: var(--background-fill-secondary); -} - -#quicksettings > div.model_selection li{ - overflow-x: visible !important; - width: 100% !important; /* Set size to max element */ -} - -#quicksettings .subdued{ - display: block; - margin-left: auto; - width: 30px; -} - -#settings{ - display: block; -} - -#settings > div{ - border: none; - margin-left: 10em; - padding: 0 var(--spacing-xl); -} - -#settings > div.tab-nav{ - float: left; - display: block; - margin-left: 0; - width: 10em; -} - -#settings > div.tab-nav button{ - display: block; - border: none; - text-align: left; - white-space: initial; - padding: 4px; -} - -#settings > div.tab-nav .settings-category{ - display: block; - margin: 1em 0 0.25em 0; - font-weight: bold; - text-decoration: underline; - cursor: default; - user-select: none; -} - -#settings_result{ - height: 1.4em; - margin: 0 1.2em; -} - -table.popup-table{ - background: var(--body-background-fill); - color: var(--body-text-color); - border-collapse: collapse; - margin: 1em; - border: 4px solid var(--body-background-fill); -} - -table.popup-table td{ - padding: 0.4em; - border: 1px solid rgba(128, 128, 128, 0.5); - max-width: 36em; -} - -table.popup-table .muted{ - color: #aaa; -} - -table.popup-table .link{ - text-decoration: underline; - cursor: pointer; - font-weight: bold; -} - -.ui-defaults-none{ - color: #aaa !important; -} - -#settings span{ - color: var(--body-text-color); -} - -#settings .gradio-textbox, #settings .gradio-slider, #settings .gradio-number, #settings .gradio-dropdown, #settings .gradio-checkboxgroup, #settings .gradio-radio{ - margin-top: 0.75em; -} - -#settings span .settings-comment { - display: inline -} - -.settings-comment a{ - text-decoration: underline; -} - -.settings-comment .info{ - opacity: 0.75; -} - -.settings-comment .info ol{ - margin: 0.4em 0 0.8em 1em; -} - -#sysinfo_download a.sysinfo_big_link{ - font-size: 24pt; -} - -#sysinfo_download a{ - text-decoration: underline; -} - -#sysinfo_validity{ - font-size: 18pt; -} - -#settings .settings-info{ - max-width: 48em; - border: 1px dotted #777; - margin: 0; - padding: 1em; -} - - -/* live preview */ -.progressDiv{ - position: absolute; - height: 20px; - background: #b4c0cc; - border-radius: 3px !important; - top: -14px; - left: 0px; - width: 100%; -} - -.progress-container{ - position: relative; -} - -[id$=_results].mobile{ - margin-top: 28px; -} - -.dark .progressDiv{ - background: #424c5b; -} - -.progressDiv .progress{ - width: 0%; - height: 20px; - background: #0060df; - color: white; - font-weight: bold; - line-height: 20px; - padding: 0 8px 0 0; - text-align: right; - border-radius: 3px; - overflow: visible; - white-space: nowrap; - padding: 0 0.5em; -} - -.livePreview{ - position: absolute; - z-index: 300; - background: var(--background-fill-primary); - width: 100%; - height: 100%; -} - -.livePreview img{ - position: absolute; - object-fit: contain; - width: 100%; - height: calc(100% - 60px); /* to match gradio's height */ -} - -/* fullscreen popup (ie in Lora's (i) button) */ - -.popup-metadata{ - color: black; - background: white; - display: inline-block; - padding: 1em; - white-space: pre-wrap; -} - -.global-popup{ - display: flex; - position: fixed; - z-index: 1001; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; -} - -.global-popup *{ - box-sizing: border-box; -} - -.global-popup-close:before { - content: "×"; - position: fixed; - right: 0.25em; - top: 0; - cursor: pointer; - color: white; - font-size: 32pt; -} - -.global-popup-close{ - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - background-color: rgba(20, 20, 20, 0.95); -} - -.global-popup-inner{ - display: inline-block; - margin: auto; - padding: 2em; - z-index: 1001; - max-height: 90%; - max-width: 90%; -} - -/* fullpage image viewer */ - -#lightboxModal{ - display: none; - position: fixed; - z-index: 1001; - left: 0; - top: 0; - width: 100%; - height: 100%; - overflow: auto; - background-color: rgba(20, 20, 20, 0.95); - user-select: none; - -webkit-user-select: none; - flex-direction: column; -} - -.modalControls { - display: flex; - position: absolute; - right: 0px; - left: 0px; - gap: 1em; - padding: 1em; - background-color:rgba(0,0,0,0); - z-index: 1; - transition: 0.2s ease background-color; -} -.modalControls:hover { - background-color:rgba(0,0,0, var(--sd-webui-modal-lightbox-toolbar-opacity)); -} -.modalClose { - margin-left: auto; -} -.modalControls span{ - color: white; - text-shadow: 0px 0px 0.25em black; - font-size: 35px; - font-weight: bold; - cursor: pointer; - width: 1em; -} - -.modalControls span:hover, .modalControls span:focus{ - color: #999; - text-decoration: none; -} - -#lightboxModal > img { - display: block; - margin: auto; - width: auto; -} - -#lightboxModal > img.modalImageFullscreen{ - object-fit: contain; - height: 100%; - width: 100%; - min-height: 0; -} - -.modalPrev, -.modalNext { - cursor: pointer; - position: absolute; - top: 50%; - width: auto; - padding: 16px; - margin-top: -50px; - color: white; - font-weight: bold; - font-size: 20px; - transition: 0.6s ease; - border-radius: 0 3px 3px 0; - user-select: none; - -webkit-user-select: none; -} - -.modalNext { - right: 0; - border-radius: 3px 0 0 3px; -} - -.modalPrev:hover, -.modalNext:hover { - background-color: rgba(0, 0, 0, 0.8); -} - -#imageARPreview { - position: absolute; - top: 0px; - left: 0px; - border: 2px solid red; - margin: -2px; - background: rgba(255, 0, 0, 0.3); - z-index: 900; - pointer-events: none; - display: none; -} - -@media (pointer: fine) { - .modalPrev:hover, - .modalNext:hover, - .modalControls:hover ~ .modalPrev, - .modalControls:hover ~ .modalNext, - .modalControls:hover .cursor { - opacity: 1; - } - - .modalPrev, - .modalNext, - .modalControls .cursor { - opacity: var(--sd-webui-modal-lightbox-icon-opacity); - } -} - -/* context menu (ie for the generate button) */ - -#context-menu{ - z-index:9999; - position:absolute; - display:block; - padding:0px 0; - border:2px solid var(--primary-800); - border-radius:8px; - box-shadow:1px 1px 2px var(--primary-500); - width: 200px; -} - -.context-menu-items{ - list-style: none; - margin: 0; - padding: 0; -} - -.context-menu-items a{ - display:block; - padding:5px; - cursor:pointer; -} - -.context-menu-items a:hover{ - background: var(--primary-700); -} - - -/* extensions */ - -#tab_extensions table{ - border-collapse: collapse; - overflow-x: auto; - display: block; -} - -#tab_extensions table td, #tab_extensions table th{ - border: 1px solid #ccc; - padding: 0.25em 0.5em; -} - -#tab_extensions table input[type="checkbox"]{ - margin-right: 0.5em; - appearance: checkbox; -} - -#tab_extensions button{ - max-width: 16em; -} - -#tab_extensions input[disabled="disabled"]{ - opacity: 0.5; -} - -.extension-tag{ - font-weight: bold; - font-size: 95%; -} - -#available_extensions .info{ - margin: 0; -} - -#available_extensions .info{ - margin: 0.5em 0; - display: flex; - margin-top: auto; - opacity: 0.80; - font-size: 90%; -} - -#available_extensions .date_added{ - margin-right: auto; - display: inline-block; -} - -#available_extensions .star_count{ - margin-left: auto; - display: inline-block; -} - -.compact-checkbox-group div label { - padding: 0.1em 0.3em !important; -} - -/* extensions tab table row hover highlight */ - -#extensions tr:hover td, -#config_state_extensions tr:hover td, -#available_extensions tr:hover td { - background: rgba(0, 0, 0, 0.15); -} - -.dark #extensions tr:hover td , -.dark #config_state_extensions tr:hover td , -.dark #available_extensions tr:hover td { - background: rgba(255, 255, 255, 0.15); -} - -/* replace original footer with ours */ - -footer { - display: none !important; -} - -#footer{ - text-align: center; -} - -#footer div{ - display: inline-block; -} - -#footer .versions{ - font-size: 85%; - opacity: 0.85; -} - -/* extra networks UI */ - -.extra-page > div.gap{ - gap: 0; -} - -.extra-page-prompts{ - margin-bottom: 0; -} - -.extra-page-prompts.extra-page-prompts-active{ - margin-bottom: 1em; -} - -.extra-networks > div.tab-nav{ - min-height: 2.7rem; -} - -.extra-networks-controls-div{ - align-self: center; - margin-left: auto; -} - -.extra-networks > div > [id *= '_extra_']{ - margin: 0.3em; -} - -.extra-networks .tab-nav .search, -.extra-networks .tab-nav .sort -{ - margin: 0.3em; - align-self: center; - width: auto; -} - -.extra-networks .tab-nav .search { - width: 16em; - max-width: 16em; -} - -.extra-networks .tab-nav .sort { - width: 12em; - max-width: 12em; -} - -#txt2img_extra_view, #img2img_extra_view { - width: auto; -} - -.extra-network-pane .nocards{ - margin: 1.25em 0.5em 0.5em 0.5em; -} - -.extra-network-pane .nocards h1{ - font-size: 1.5em; - margin-bottom: 1em; -} - -.extra-network-pane .nocards li{ - margin-left: 0.5em; -} - -.extra-network-pane .card .button-row{ - display: inline-flex; - visibility: hidden; - color: white; -} - -.extra-network-pane .card .button-row { - position: absolute; - right: 0; - z-index: 1; -} - -.extra-network-pane .card:hover .button-row{ - visibility: visible; -} - -.extra-network-pane .card-button{ - color: white; -} - -.extra-network-pane .copy-path-button::before { - content: "⎘"; -} - -.extra-network-pane .metadata-button::before{ - content: "🛈"; -} - -.extra-network-pane .edit-button::before{ - content: "🛠"; -} - -.extra-network-pane .card-button { - width: 1.5em; - text-shadow: 2px 2px 3px black; - color: white; - padding: 0.25em 0.1em; -} - -.extra-network-pane .card-button:hover{ - color: red; -} - -.extra-network-pane .card .card-button { - font-size: 2rem; -} - -.extra-network-pane .card-minimal .card-button { - font-size: 1rem; -} - -.standalone-card-preview.card .preview{ - position: absolute; - object-fit: cover; - width: 100%; - height:100%; -} - -.extra-network-pane .card, .standalone-card-preview.card{ - display: inline-block; - margin: 0.5rem; - width: 16rem; - height: 24rem; - box-shadow: 0 0 5px rgba(128, 128, 128, 0.5); - border-radius: 0.2rem; - position: relative; - - background-size: auto 100%; - background-position: center; - overflow: hidden; - cursor: pointer; - - background-image: url('./file=html/card-no-preview.png') -} - -.extra-network-pane .card:hover{ - box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35); -} - -.extra-network-pane .card .actions .additional{ - display: none; -} - -.extra-network-pane .card .actions{ - position: absolute; - bottom: 0; - left: 0; - right: 0; - padding: 0.5em; - background: rgba(0,0,0,0.5); - box-shadow: 0 0 0.25em 0.25em rgba(0,0,0,0.5); - text-shadow: 0 0 0.2em black; -} - -.extra-network-pane .card .actions *{ - color: white; -} - -.extra-network-pane .card .actions .name{ - font-size: 1.7em; - font-weight: bold; - line-break: anywhere; -} - -.extra-network-pane .card .actions .description { - display: block; - max-height: 3em; - white-space: pre-wrap; - line-height: 1.1; -} - -.extra-network-pane .card .actions .description:hover { - max-height: none; -} - -.extra-network-pane .card .actions:hover .additional{ - display: block; -} - -.extra-network-pane .card ul{ - margin: 0.25em 0 0.75em 0.25em; - cursor: unset; -} - -.extra-network-pane .card ul a{ - cursor: pointer; -} - -.extra-network-pane .card ul a:hover{ - color: red; -} - -.extra-network-pane .card .preview{ - position: absolute; - object-fit: cover; - width: 100%; - height:100%; -} - -.edit-user-metadata { - width: 56em; - background: var(--body-background-fill) !important; - padding: 2em !important; -} - -.edit-user-metadata .extra-network-name{ - font-size: 18pt; - color: var(--body-text-color); -} - -.edit-user-metadata .file-metadata{ - color: var(--body-text-color); -} - -.edit-user-metadata .file-metadata th{ - text-align: left; -} - -.edit-user-metadata .file-metadata th, .edit-user-metadata .file-metadata td{ - padding: 0.3em 1em; - overflow-wrap: anywhere; - word-break: break-word; -} - -.edit-user-metadata .wrap.translucent{ - background: var(--body-background-fill); -} -.edit-user-metadata .gradio-highlightedtext span{ - word-break: break-word; -} - -.edit-user-metadata-buttons{ - margin-top: 1.5em; -} - -.popup-dialog { - width: 56em; - background: var(--body-background-fill) !important; - padding: 2em !important; -} - -div.block.input-accordion{ - -} - -.input-accordion-extra{ - flex: 0 0 auto !important; - margin: 0 0.5em 0 auto; -} - -div.accordions > div.input-accordion{ - min-width: fit-content !important; -} - -div.accordions > div.gradio-accordion .label-wrap span{ - white-space: nowrap; - margin-right: 0.25em; -} - -div.accordions{ - gap: 0.5em; -} - -div.accordions > div.input-accordion.input-accordion-open{ - flex: 1 auto; - flex-flow: column; -} - - -/* sticky right hand columns */ - -#img2img_results, #txt2img_results, #extras_results { - position: sticky; - top: 0.5em; -} - -body.resizing { - cursor: col-resize !important; -} - -body.resizing * { - pointer-events: none !important; -} - -body.resizing .resize-handle { - pointer-events: initial !important; -} - -.resize-handle { - position: relative; - cursor: col-resize; - grid-column: 2 / 3; - min-width: 16px !important; - max-width: 16px !important; - height: 100%; -} - -.resize-handle::after { - content: ''; - position: absolute; - top: 0; - bottom: 0; - left: 7.5px; - border-left: 1px dashed var(--border-color-primary); -} - -/* ========================= */ -.extra-network-pane { - display: flex; - height: calc(100vh - 24rem); - resize: vertical; - min-height: 52rem; - flex-direction: column; - overflow: hidden; -} - -.extra-network-pane .extra-network-pane-content-dirs { - display: flex; - flex: 1; - flex-direction: column; - overflow: hidden; -} - -.extra-network-pane .extra-network-pane-content-tree { - display: flex; - flex: 1; - overflow: hidden; -} - -.extra-network-dirs-hidden .extra-network-dirs{ display: none; } -.extra-network-dirs-hidden .extra-network-tree{ display: none; } -.extra-network-dirs-hidden .resize-handle { display: none; } -.extra-network-dirs-hidden .resize-handle-row { display: flex !important; } - -.extra-network-pane .extra-network-tree { - flex: 1; - font-size: 1rem; - border: 1px solid var(--block-border-color); - overflow: clip auto !important; -} - -.extra-network-pane .extra-network-cards { - flex: 3; - overflow: clip auto !important; - border: 1px solid var(--block-border-color); -} - -.extra-network-pane .extra-network-tree .tree-list { - flex: 1; - display: flex; - flex-direction: column; - padding: 0; - width: 100%; - overflow: hidden; -} - - -.extra-network-pane .extra-network-cards::-webkit-scrollbar, -.extra-network-pane .extra-network-tree::-webkit-scrollbar { - background-color: transparent; - width: 16px; -} - -.extra-network-pane .extra-network-cards::-webkit-scrollbar-track, -.extra-network-pane .extra-network-tree::-webkit-scrollbar-track { - background-color: transparent; - background-clip: content-box; -} - -.extra-network-pane .extra-network-cards::-webkit-scrollbar-thumb, -.extra-network-pane .extra-network-tree::-webkit-scrollbar-thumb { - background-color: var(--border-color-primary); - border-radius: 16px; - border: 4px solid var(--background-fill-primary); -} - -.extra-network-pane .extra-network-cards::-webkit-scrollbar-button, -.extra-network-pane .extra-network-tree::-webkit-scrollbar-button { - display: none; -} - -.extra-network-control { - position: relative; - display: flex; - width: 100%; - padding: 0 !important; - margin-top: 0 !important; - margin-bottom: 0 !important; - font-size: 1rem; - text-align: left; - user-select: none; - background-color: transparent; - border: none; - transition: background 33.333ms linear; - grid-template-rows: min-content; - grid-template-columns: minmax(0, auto) repeat(4, min-content); - grid-gap: 0.1rem; - align-items: start; -} - -.extra-network-control small{ - color: var(--input-placeholder-color); - line-height: 2.2rem; - margin: 0 0.5rem 0 0.75rem; -} - -.extra-network-tree .tree-list--tree {} - -/* Remove auto indentation from tree. Will be overridden later. */ -.extra-network-tree .tree-list--subgroup { - margin: 0 !important; - padding: 0 !important; - box-shadow: 0.5rem 0 0 var(--body-background-fill) inset, - 0.7rem 0 0 var(--neutral-800) inset; -} - -/* Set indentation for each depth of tree. */ -.extra-network-tree .tree-list--subgroup > .tree-list-item { - margin-left: 0.4rem !important; - padding-left: 0.4rem !important; -} - -/* Styles for tree
  • elements. */ -.extra-network-tree .tree-list-item { - list-style: none; - position: relative; - background-color: transparent; -} - -/* Directory