From 5ef7590324891ec7263c767d178a51827a6f9b33 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 16 Jul 2023 11:38:59 +0300 Subject: always show extra networks tabs in the UI --- style.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 8a66c3d2..a7d79955 100644 --- a/style.css +++ b/style.css @@ -766,9 +766,10 @@ footer { /* extra networks UI */ .extra-network-cards{ - height: 725px; - overflow: scroll; - resize: vertical; +} + +.extra-networks > div.tab-nav{ + height: 3.4rem; } .extra-networks > div > [id *= '_extra_']{ @@ -784,7 +785,6 @@ footer { } .extra-networks .tab-nav .search, .extra-networks .tab-nav .sort{ - display: inline-block; margin: 0.3em; align-self: center; } -- cgit v1.2.3 From 24bad5dc7b4dd4dfdb47bc1202e4fe438b860e2e Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 16 Jul 2023 13:59:15 +0300 Subject: change extra networks list to have constant height and scrolling --- style.css | 3 +++ 1 file changed, 3 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index a7d79955..c605cce2 100644 --- a/style.css +++ b/style.css @@ -766,6 +766,9 @@ footer { /* extra networks UI */ .extra-network-cards{ + height: 100vh; + overflow: scroll; + resize: vertical; } .extra-networks > div.tab-nav{ -- cgit v1.2.3 From 643836007f6f47344767322223f96723511f58e0 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 16 Jul 2023 14:46:05 +0300 Subject: more tweaking for cards section height --- style.css | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index c605cce2..88d7135c 100644 --- a/style.css +++ b/style.css @@ -766,9 +766,10 @@ footer { /* extra networks UI */ .extra-network-cards{ - height: 100vh; - overflow: scroll; + height: calc(100vh - 24rem); + overflow: clip scroll; resize: vertical; + min-height: 52rem; } .extra-networks > div.tab-nav{ -- cgit v1.2.3 From 95c5c4d64ef7fb67725df7ce048f633a9dd4a9b6 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Mon, 17 Jul 2023 11:18:08 +0300 Subject: fix tabs height on small screens --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'style.css') diff --git a/style.css b/style.css index 88d7135c..7157ac0b 100644 --- a/style.css +++ b/style.css @@ -773,7 +773,7 @@ footer { } .extra-networks > div.tab-nav{ - height: 3.4rem; + min-height: 3.4rem; } .extra-networks > div > [id *= '_extra_']{ -- cgit v1.2.3 From ec83db897887b52fbf31b430cfc4386e3ad02424 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sat, 22 Jul 2023 17:14:33 +0300 Subject: restyle Startup profile for black users --- style.css | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index e249cfd3..6c92d6e7 100644 --- a/style.css +++ b/style.css @@ -423,15 +423,16 @@ div#extras_scale_to_tab div.form{ } table.popup-table{ - background: white; + background: var(--body-background-fill); + color: var(--body-text-color); border-collapse: collapse; margin: 1em; - border: 4px solid white; + border: 4px solid var(--body-background-fill); } table.popup-table td{ padding: 0.4em; - border: 1px solid #ccc; + border: 1px solid rgba(128, 128, 128, 0.5); max-width: 36em; } -- cgit v1.2.3 From 20549a50cb3c41868ce561c6658bfaa0d20ac7ba Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Thu, 3 Aug 2023 22:46:57 +0300 Subject: add style editor dialog rework toprow for img2img and txt2img to use a class with fields fix the console error when editing checkpoint user metadata --- style.css | 13 +++++++++++++ 1 file changed, 13 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index 6c92d6e7..cf8470e4 100644 --- a/style.css +++ b/style.css @@ -972,3 +972,16 @@ div.block.gradio-box.edit-user-metadata { .edit-user-metadata-buttons{ margin-top: 1.5em; } + + + + +div.block.gradio-box.popup-dialog, .popup-dialog { + width: 56em; + background: var(--body-background-fill); + padding: 2em !important; +} + +div.block.gradio-box.popup-dialog > div:last-child, .popup-dialog > div:last-child{ + margin-top: 1em; +} -- cgit v1.2.3 From 362789a3793025c698fa42372fd66c3c4f2d6413 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Fri, 4 Aug 2023 07:50:17 +0300 Subject: gradio 3.39 --- style.css | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index cf8470e4..86b4f61e 100644 --- a/style.css +++ b/style.css @@ -8,6 +8,7 @@ --checkbox-label-gap: 0.25em 0.1em; --section-header-text-size: 12pt; --block-background-fill: transparent; + } .block.padded:not(.gradio-accordion) { @@ -42,7 +43,8 @@ div.form{ .block.gradio-radio, .block.gradio-checkboxgroup, .block.gradio-number, -.block.gradio-colorpicker +.block.gradio-colorpicker, +div.gradio-group { border-width: 0 !important; box-shadow: none !important; @@ -133,6 +135,11 @@ a{ cursor: pointer; } +div.styler{ + border: none; + background: var(--background-fill-primary); +} + /* general styled components */ @@ -164,7 +171,7 @@ a{ .checkboxes-row > div{ flex: 0; white-space: nowrap; - min-width: auto; + min-width: auto !important; } button.custom-button{ @@ -388,6 +395,7 @@ div#extras_scale_to_tab div.form{ #quicksettings > div, #quicksettings > fieldset{ max-width: 24em; min-width: 24em; + width: 24em; padding: 0; border: none; box-shadow: none; -- cgit v1.2.3 From daee41e0d64e51adaebbd0d6ba4ba85e0b59d0ae Mon Sep 17 00:00:00 2001 From: catboxanon <122327233+catboxanon@users.noreply.github.com> Date: Fri, 4 Aug 2023 06:45:12 -0400 Subject: Fix Gradio 3.39.0 textbox overflow --- style.css | 4 ++++ 1 file changed, 4 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index 86b4f61e..14e6c011 100644 --- a/style.css +++ b/style.css @@ -140,6 +140,10 @@ div.styler{ background: var(--background-fill-primary); } +.block.gradio-textbox{ + overflow: visible !important; +} + /* general styled components */ -- cgit v1.2.3 From 3ca3c7f1c62f525539926fa883d8f5d54de85de6 Mon Sep 17 00:00:00 2001 From: catboxanon <122327233+catboxanon@users.noreply.github.com> Date: Fri, 4 Aug 2023 07:20:32 -0400 Subject: Add styling for script components --- style.css | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index 86b4f61e..d9699668 100644 --- a/style.css +++ b/style.css @@ -190,6 +190,13 @@ button.custom-button{ text-align: center; } +.gradio-group[id$="_script_container"] > div .gradio-group > div > div:is(.gradio-accordion, .form) { + border: 1px solid var(--block-border-color) !important; + border-radius: 8px !important; + margin: 2px 0; + padding: 8px 8px; +} + /* txt2img/img2img specific */ -- cgit v1.2.3 From c74c708ed8c422bf7ca1f388a3ee772c7d1e4ddd Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sat, 5 Aug 2023 09:15:18 +0300 Subject: add checkbox to show/hide dirs for extra networks --- style.css | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) (limited to 'style.css') diff --git a/style.css b/style.css index 52919f71..dc4d37b9 100644 --- a/style.css +++ b/style.css @@ -801,9 +801,12 @@ footer { margin: 0 0.15em; } .extra-networks .tab-nav .search, -.extra-networks .tab-nav .sort{ +.extra-networks .tab-nav .sort, +.extra-networks .tab-nav .show-dirs +{ margin: 0.3em; align-self: center; + width: auto; } .extra-networks .tab-nav .search { -- cgit v1.2.3 From 60183eebc37a69545e41cb6b00189609b85129b0 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sat, 5 Aug 2023 11:18:13 +0300 Subject: add description to VAE setting page --- style.css | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index dc4d37b9..8c1f273c 100644 --- a/style.css +++ b/style.css @@ -494,6 +494,13 @@ table.popup-table .link{ font-size: 18pt; } +#settings .settings-info{ + max-width: 48em; + border: 1px dotted #777; + margin: 0; + padding: 1em; +} + /* live preview */ .progressDiv{ -- cgit v1.2.3 From 2c5106ed06044ba4b67b1c856756e33a1ca5eeea Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Thu, 10 Aug 2023 07:57:52 +0300 Subject: additional work on gradio styles; make the accordion change affect all accordions, not just inside scripts div --- style.css | 18 ++++++++---------- 1 file changed, 8 insertions(+), 10 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index cda5f6a0..dfd5ca36 100644 --- a/style.css +++ b/style.css @@ -43,13 +43,15 @@ div.form{ .block.gradio-radio, .block.gradio-checkboxgroup, .block.gradio-number, -.block.gradio-colorpicker, -div.gradio-group -{ +.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; @@ -135,12 +137,8 @@ a{ cursor: pointer; } -div.styler{ - border: none; - background: var(--background-fill-primary); -} - -.block.gradio-textbox{ +/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reqasaon. */ +.block.gradio-textbox, div.gradio-group, div.gradio-group div, div.gradio-dropdown{ overflow: visible !important; } @@ -194,7 +192,7 @@ button.custom-button{ text-align: center; } -.gradio-group[id$="_script_container"] > div .gradio-group > div > div:is(.gradio-accordion, .form) { +div.gradio-accordion { border: 1px solid var(--block-border-color) !important; border-radius: 8px !important; margin: 2px 0; -- cgit v1.2.3 From 9199b6b7ebe96cdf09571ba874a103e8ed8c90ef Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Thu, 10 Aug 2023 11:20:46 +0300 Subject: add a custom UI element that combines accordion and checkbox rework hires fix UI to use accordion prevent bogus progress output in console when calculating hires fix dimensions --- style.css | 15 +++++++++------ 1 file changed, 9 insertions(+), 6 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index dfd5ca36..5163e53c 100644 --- a/style.css +++ b/style.css @@ -329,12 +329,6 @@ div.gradio-accordion { border-radius: 0 0.5rem 0.5rem 0; } -#txtimg_hr_finalres{ - min-height: 0 !important; - padding: .625rem .75rem; - margin-left: -0.75em -} - #img2img_scale_resolution_preview.block{ display: flex; align-items: end; @@ -1016,3 +1010,12 @@ div.block.gradio-box.popup-dialog, .popup-dialog { div.block.gradio-box.popup-dialog > div:last-child, .popup-dialog > div:last-child{ margin-top: 1em; } + +div.block.input-accordion{ + margin-bottom: 0.4em; +} + +.input-accordion-extra{ + flex: 0 0 auto !important; + margin: 0 0.5em 0 auto; +} -- cgit v1.2.3 From 77c52ea701bef8d436dd1f05253412807ddff42c Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Thu, 10 Aug 2023 18:43:27 +0300 Subject: fix accordion style on img2img --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'style.css') diff --git a/style.css b/style.css index 5163e53c..4cdce87c 100644 --- a/style.css +++ b/style.css @@ -192,7 +192,7 @@ button.custom-button{ text-align: center; } -div.gradio-accordion { +div.block.gradio-accordion { border: 1px solid var(--block-border-color) !important; border-radius: 8px !important; margin: 2px 0; -- cgit v1.2.3 From 64311faa6848d641cc452115e4e1eb47d2a7b519 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sat, 12 Aug 2023 12:39:59 +0300 Subject: put refiner into main UI, into the new accordions section add VAE from main model into infotext, not from refiner model option to make scripts UI without gr.Group fix inconsistencies with refiner when usings samplers that do more denoising than steps --- style.css | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 4cdce87c..260b1056 100644 --- a/style.css +++ b/style.css @@ -166,16 +166,6 @@ a{ color: var(--button-secondary-text-color-hover); } -.checkboxes-row{ - margin-bottom: 0.5em; - margin-left: 0em; -} -.checkboxes-row > div{ - flex: 0; - white-space: nowrap; - min-width: auto !important; -} - button.custom-button{ border-radius: var(--button-large-radius); padding: var(--button-large-padding); @@ -352,7 +342,7 @@ div.block.gradio-accordion { } div.dimensions-tools{ - min-width: 0 !important; + min-width: 1.6em !important; max-width: fit-content; flex-direction: column; place-content: center; @@ -1012,10 +1002,28 @@ div.block.gradio-box.popup-dialog > div:last-child, .popup-dialog > div:last-chi } div.block.input-accordion{ - margin-bottom: 0.4em; + } .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; +} + -- cgit v1.2.3 From 6aa26a26d5beb317d708c4fa85c38056347ea5d3 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sat, 12 Aug 2023 16:47:39 +0300 Subject: change quicksettings items to have variable width --- style.css | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 260b1056..f936e9a0 100644 --- a/style.css +++ b/style.css @@ -386,14 +386,17 @@ div#extras_scale_to_tab div.form{ } #quicksettings > div, #quicksettings > fieldset{ - max-width: 24em; - min-width: 24em; - width: 24em; + max-width: 36em; + width: fit-content; + flex: auto; padding: 0; border: none; box-shadow: none; background: none; } +#quicksettings > div.gradio-dropdown{ + min-width: 24em !important; +} #settings{ display: block; -- cgit v1.2.3 From f0b72b81211881e083c84cff585380bb70d17271 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sat, 12 Aug 2023 17:46:13 +0300 Subject: move seed, variation seed and variation seed strength to a single row, dump resize seed from UI add a way for scripts to register a callback for before/after just a single component's creation --- style.css | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index f936e9a0..92093b89 100644 --- a/style.css +++ b/style.css @@ -222,14 +222,18 @@ div.block.gradio-accordion { padding: 0.1em 0.75em; } +[id$=_seed], [id$=_subseed]{ + max-width: 10em; +} + [id$=_subseed_show]{ min-width: auto !important; flex-grow: 0 !important; display: flex; } -[id$=_subseed_show] label{ - margin-bottom: 0.5em; +[id$=_subseed_show] .label-wrap{ + margin: 0 0 0 0.5em; align-self: end; } @@ -1028,5 +1032,6 @@ div.accordions{ div.accordions > div.input-accordion.input-accordion-open{ flex: 1 auto; + flex-flow: column; } -- cgit v1.2.3 From 4e8690906c02f14a81974200775bfc81718a9250 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sat, 12 Aug 2023 18:00:30 +0300 Subject: update seed/subseed HTML widths --- style.css | 15 --------------- 1 file changed, 15 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 92093b89..dc44d2cc 100644 --- a/style.css +++ b/style.css @@ -222,21 +222,6 @@ div.block.gradio-accordion { padding: 0.1em 0.75em; } -[id$=_seed], [id$=_subseed]{ - max-width: 10em; -} - -[id$=_subseed_show]{ - min-width: auto !important; - flex-grow: 0 !important; - display: flex; -} - -[id$=_subseed_show] .label-wrap{ - margin: 0 0 0 0.5em; - align-self: end; -} - .html-log .comments{ padding-top: 0.5em; } -- cgit v1.2.3 From 9d0ec135968d80420b84ca83f7958f5fc8e534c2 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sat, 12 Aug 2023 18:42:59 +0300 Subject: fix quicksettings on Chrome --- style.css | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index dc44d2cc..716126ed 100644 --- a/style.css +++ b/style.css @@ -370,14 +370,13 @@ div#extras_scale_to_tab div.form{ /* settings */ #quicksettings { - width: fit-content; align-items: end; } #quicksettings > div, #quicksettings > fieldset{ max-width: 36em; width: fit-content; - flex: auto; + flex: 0 1 fit-content; padding: 0; border: none; box-shadow: none; -- cgit v1.2.3 From b2080756fcdc328292fc38998c06ccf23e53bd7e Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sat, 12 Aug 2023 19:03:33 +0300 Subject: make "send to" buttons into small tool buttons --- style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 716126ed..dc528422 100644 --- a/style.css +++ b/style.css @@ -348,8 +348,8 @@ div#extras_scale_to_tab div.form{ z-index: 5; } -.image-buttons button{ - min-width: auto; +.image-buttons > .form{ + justify-content: center; } .infotext { -- cgit v1.2.3 From f3b96d4998d8ca376d33efa7a4454e8c28e24255 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Mon, 14 Aug 2023 10:22:52 +0300 Subject: return seed controls UI to how it was before --- style.css | 15 +++++++++++++++ 1 file changed, 15 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index dc528422..bdf0635a 100644 --- a/style.css +++ b/style.css @@ -222,6 +222,21 @@ div.block.gradio-accordion { 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; } -- cgit v1.2.3 From 70833919314be39eede4dfa044b28484b12e8c86 Mon Sep 17 00:00:00 2001 From: catboxanon <122327233+catboxanon@users.noreply.github.com> Date: Tue, 15 Aug 2023 14:44:13 -0400 Subject: CSS: Remove forced visible overflow for Gradio group child divs --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'style.css') diff --git a/style.css b/style.css index bdf0635a..d7f87f81 100644 --- a/style.css +++ b/style.css @@ -138,7 +138,7 @@ a{ } /* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reqasaon. */ -.block.gradio-textbox, div.gradio-group, div.gradio-group div, div.gradio-dropdown{ +.block.gradio-textbox, div.gradio-group, div.gradio-dropdown{ overflow: visible !important; } -- cgit v1.2.3 From 13f1357b7f1e7721d73a56b20a9f5a61472eabba Mon Sep 17 00:00:00 2001 From: catboxanon <122327233+catboxanon@users.noreply.github.com> Date: Thu, 17 Aug 2023 20:21:46 -0400 Subject: Make image viewer actually fit the whole page --- style.css | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) (limited to 'style.css') diff --git a/style.css b/style.css index d7f87f81..44f970e8 100644 --- a/style.css +++ b/style.css @@ -609,13 +609,19 @@ table.popup-table .link{ display: flex; gap: 1em; padding: 1em; - background-color: rgba(0,0,0,0.2); + background-color:rgba(0,0,0,0); + z-index: 1; + transition: 0.2s ease background-color; +} +.modalControls:hover { + background-color:rgba(0,0,0,0.9); } .modalClose { margin-left: auto; } .modalControls span{ color: white; + text-shadow: 0px 0px 0.25em black; font-size: 35px; font-weight: bold; cursor: pointer; @@ -640,6 +646,13 @@ table.popup-table .link{ min-height: 0; } +#modalImage{ + position: absolute; + top: 50%; + left: 50%; + transform: translateX(-50%) translateY(-50%); +} + .modalPrev, .modalNext { cursor: pointer; -- cgit v1.2.3 From f89f01f9d854d0433a417d00a09032bfb77f5385 Mon Sep 17 00:00:00 2001 From: catboxanon <122327233+catboxanon@users.noreply.github.com> Date: Fri, 18 Aug 2023 04:18:22 -0400 Subject: Make results column sticky --- style.css | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index d7f87f81..c9b184c2 100644 --- a/style.css +++ b/style.css @@ -137,8 +137,8 @@ a{ cursor: pointer; } -/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reqasaon. */ -.block.gradio-textbox, div.gradio-group, div.gradio-dropdown{ +/* 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; } @@ -1034,3 +1034,10 @@ div.accordions > div.input-accordion.input-accordion-open{ flex-flow: column; } + +/* sticky right hand columns */ + +#img2img_results, #txt2img_results, #extras_results { + position: sticky; + top: 0.5em; +} -- cgit v1.2.3 From db5c304e2968b5c16810900b9a63cfcf7e205e20 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 20 Aug 2023 13:38:35 +0300 Subject: make live previews play nice with window/slider resizes --- style.css | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 38a01e72..5cd9f9c2 100644 --- a/style.css +++ b/style.css @@ -499,11 +499,15 @@ table.popup-table .link{ /* live preview */ .progressDiv{ - position: relative; + position: absolute; height: 20px; background: #b4c0cc; border-radius: 3px !important; - margin-bottom: -3px; + top: -20px; +} + +[id$=_results].mobile{ + margin-top: 28px; } .dark .progressDiv{ @@ -528,12 +532,9 @@ table.popup-table .link{ .livePreview{ position: absolute; z-index: 300; - background-color: white; - margin: -4px; -} - -.dark .livePreview{ - background-color: rgb(17 24 39 / var(--tw-bg-opacity)); + background: var(--background-fill-primary); + width: 100%; + height: 100%; } .livePreview img{ -- cgit v1.2.3 From 42b72fe2463bc06a97935bc7a7770a9d562269d8 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 20 Aug 2023 14:57:40 +0300 Subject: fix for small images in live previews not being scaled up --- style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 5cd9f9c2..46125864 100644 --- a/style.css +++ b/style.css @@ -282,8 +282,8 @@ div.block.gradio-accordion { } } -#txt2img_gallery img, #img2img_gallery img, #extras_gallery img{ - object-fit: scale-down; +.gradio-gallery .thumbnails img { + object-fit: scale-down !important; } #txt2img_actions_column, #img2img_actions_column { gap: 0.5em; -- cgit v1.2.3 From df595ae3135ef12c135f43ef2a0f792708aab4b3 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Mon, 21 Aug 2023 08:48:22 +0300 Subject: make resize handle available to extensions --- style.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index 46125864..4166a3df 100644 --- a/style.css +++ b/style.css @@ -1055,3 +1055,15 @@ div.accordions > div.input-accordion.input-accordion-open{ position: sticky; top: 0.5em; } + + +.resize-handle{ + cursor: col-resize; + grid-column: 2 / 3; + min-width: 8px !important; + max-width: 8px !important; + height: 100%; + border-left: 1px dashed var(--border-color-primary); + user-select: none; + margin-left: 8px; +} -- cgit v1.2.3 From e1b37a066d9b35ad7896e632c27ac979f795681e Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 16:35:49 +0900 Subject: Fix resize handle overflowing in Safari --- style.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index 4166a3df..4b85072f 100644 --- a/style.css +++ b/style.css @@ -142,6 +142,11 @@ div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdo overflow: visible !important; } +/* align-items isn't enough and elements may overflow in Safari. */ +.unequal-height { + align-content: flex-start; +} + /* general styled components */ -- cgit v1.2.3 From 70283a9f4aa457ea16db8947f60b0e4f8fb25608 Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 16:40:50 +0900 Subject: Expand the hit area of resize handle --- style.css | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 4b85072f..4e9cdc8f 100644 --- a/style.css +++ b/style.css @@ -1062,13 +1062,20 @@ div.accordions > div.input-accordion.input-accordion-open{ } -.resize-handle{ +.resize-handle { + position: relative; cursor: col-resize; grid-column: 2 / 3; - min-width: 8px !important; - max-width: 8px !important; + min-width: 16px !important; + max-width: 16px !important; height: 100%; - border-left: 1px dashed var(--border-color-primary); - user-select: none; - margin-left: 8px; +} + +.resize-handle::after { + content: ''; + position: absolute; + top: 0; + bottom: 0; + left: 7.5px; + border-left: 1px dashed var(--border-color-primary); } -- cgit v1.2.3 From 0998256fc5e040fa1c1d5826bd858ab3838a3f26 Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 16:45:34 +0900 Subject: Prevent text selection and cursor changes --- style.css | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index 4e9cdc8f..537bc2d2 100644 --- a/style.css +++ b/style.css @@ -1061,6 +1061,13 @@ div.accordions > div.input-accordion.input-accordion-open{ top: 0.5em; } +body.resizing { + cursor: col-resize !important; +} + +body.resizing :not(.resize-handle) { + pointer-events: none !important; +} .resize-handle { position: relative; -- cgit v1.2.3 From f6c52f4f41f4afe306b5adc90ba81feeca238e1a Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 22 Aug 2023 11:02:14 +0300 Subject: for live previews, only hide gallery after at least one live previews pic has been received fix blinking for live previews fix a clientside live previews exception that happens when you kill serverside during sampling match the size of live preview image to gallery image --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'style.css') diff --git a/style.css b/style.css index 4166a3df..cb12e036 100644 --- a/style.css +++ b/style.css @@ -541,7 +541,7 @@ table.popup-table .link{ position: absolute; object-fit: contain; width: 100%; - height: 100%; + height: calc(100% - 60px); /* to match gradio's height */ } /* fullscreen popup (ie in Lora's (i) button) */ -- cgit v1.2.3 From c4b11ec54e236cc42d43fe8282ef4e4f55ccd605 Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 18:48:17 +0900 Subject: Replace tabs with spaces --- style.css | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index 537bc2d2..3cce8212 100644 --- a/style.css +++ b/style.css @@ -1062,7 +1062,7 @@ div.accordions > div.input-accordion.input-accordion-open{ } body.resizing { - cursor: col-resize !important; + cursor: col-resize !important; } body.resizing :not(.resize-handle) { @@ -1071,11 +1071,11 @@ body.resizing :not(.resize-handle) { .resize-handle { position: relative; - cursor: col-resize; - grid-column: 2 / 3; - min-width: 16px !important; - max-width: 16px !important; - height: 100%; + cursor: col-resize; + grid-column: 2 / 3; + min-width: 16px !important; + max-width: 16px !important; + height: 100%; } .resize-handle::after { -- cgit v1.2.3 From ed49c7c246c320562df977865476a8c43e81f1b3 Mon Sep 17 00:00:00 2001 From: MMP0 <28616020+MMP0@users.noreply.github.com> Date: Tue, 22 Aug 2023 21:21:06 +0900 Subject: Fix double click event not firing --- style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) (limited to 'style.css') diff --git a/style.css b/style.css index 3cce8212..76c186a1 100644 --- a/style.css +++ b/style.css @@ -1065,10 +1065,14 @@ body.resizing { cursor: col-resize !important; } -body.resizing :not(.resize-handle) { +body.resizing * { pointer-events: none !important; } +body.resizing .resize-handle { + pointer-events: initial !important; +} + .resize-handle { position: relative; cursor: col-resize; -- cgit v1.2.3 From ddf3d1a7ac516c4d144453cb4797192e0dd3a80b Mon Sep 17 00:00:00 2001 From: w-e-w <40751091+w-e-w@users.noreply.github.com> Date: Thu, 24 Aug 2023 00:34:28 +0900 Subject: draw extra network buttons above description --- style.css | 1 + 1 file changed, 1 insertion(+) (limited to 'style.css') diff --git a/style.css b/style.css index 47876e92..d67b6336 100644 --- a/style.css +++ b/style.css @@ -863,6 +863,7 @@ footer { position: absolute; color: white; right: 0; + z-index: 1 } .extra-network-cards .card:hover .button-row{ display: flex; -- cgit v1.2.3 From 5359dc0a103171d830f5c8a3106ef2e6a0a41366 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Sun, 27 Aug 2023 09:26:50 +0300 Subject: Merge pull request #12792 from catboxanon/image-cropper-hide Hide broken image crop tool --- style.css | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index d67b6336..e336e79d 100644 --- a/style.css +++ b/style.css @@ -2,6 +2,14 @@ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap'); + +/* temporary fix to hide gradio crop tool until it's fixed https://github.com/gradio-app/gradio/issues/3810 */ + +div.gradio-image button[aria-label="Edit"] { + display: none; +} + + /* general gradio fixes */ :root, .dark{ -- cgit v1.2.3 From 6558716018c8e2ebe4cef5d4951d43f391151227 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Tue, 29 Aug 2023 08:52:58 +0300 Subject: Merge pull request #12837 from bluelovers/pr/file-metadata-break-001 style: file-metadata word-break --- style.css | 2 ++ 1 file changed, 2 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index e336e79d..bbfb7d39 100644 --- a/style.css +++ b/style.css @@ -1009,6 +1009,8 @@ div.block.gradio-box.edit-user-metadata { .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{ -- cgit v1.2.3 From 965c72891486107340d3ab4b000871b96775fb00 Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Wed, 30 Aug 2023 07:43:38 +0300 Subject: Merge pull request #12839 from ibrainventures/patch-1 [RC 1.6.0 - zoom is partly hidden] Update style.css --- style.css | 10 +++------- 1 file changed, 3 insertions(+), 7 deletions(-) (limited to 'style.css') diff --git a/style.css b/style.css index bbfb7d39..92d3030e 100644 --- a/style.css +++ b/style.css @@ -621,6 +621,9 @@ table.popup-table .link{ .modalControls { display: flex; + position: absolute; + right: 0px; + left: 0px; gap: 1em; padding: 1em; background-color:rgba(0,0,0,0); @@ -660,13 +663,6 @@ table.popup-table .link{ min-height: 0; } -#modalImage{ - position: absolute; - top: 50%; - left: 50%; - transform: translateX(-50%) translateY(-50%); -} - .modalPrev, .modalNext { cursor: pointer; -- cgit v1.2.3 From afea99a72b48fd88b101b1b2cea45fd527c3bc6f Mon Sep 17 00:00:00 2001 From: AUTOMATIC1111 <16777216c@gmail.com> Date: Wed, 30 Aug 2023 08:05:18 +0300 Subject: get progressbar to display correctly in extensions tab --- style.css | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index 92d3030e..fb4e2f1f 100644 --- a/style.css +++ b/style.css @@ -517,6 +517,11 @@ table.popup-table .link{ background: #b4c0cc; border-radius: 3px !important; top: -20px; + width: 100%; +} + +.progress-container{ + position: relative; } [id$=_results].mobile{ -- cgit v1.2.3