From ed6787ca2fe950f633a925ccb0467eafd4ec0f43 Mon Sep 17 00:00:00 2001 From: EyeDeck Date: Sat, 17 Sep 2022 00:49:31 -0400 Subject: Add VRAM monitoring --- style.css | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) (limited to 'style.css') diff --git a/style.css b/style.css index d41c098c..67ce8550 100644 --- a/style.css +++ b/style.css @@ -1,5 +1,21 @@ .output-html p {margin: 0 0.5em;} -.performance { font-size: 0.85em; color: #444; } + +.performance { + font-size: 0.85em; + color: #444; + display: flex; + justify-content: space-between; + white-space: nowrap; +} + +.performance .time { + margin-right: 0; +} + +.performance .vram { + margin-left: 0; + text-align: right; +} #generate{ min-height: 4.5em; -- cgit v1.2.3 From 99585b3514e2d7e987651d5c6a0806f933af012b Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Sat, 17 Sep 2022 12:38:15 +0300 Subject: moved progressbar to top by request --- modules/ui.py | 7 ++++--- style.css | 6 ++++++ 2 files changed, 10 insertions(+), 3 deletions(-) (limited to 'style.css') diff --git a/modules/ui.py b/modules/ui.py index 36e3c664..960f1e36 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -337,6 +337,8 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): custom_inputs = modules.scripts.scripts_txt2img.setup_ui(is_img2img=False) with gr.Column(variant='panel'): + progressbar = gr.HTML(elem_id="progressbar") + with gr.Group(): txt2img_preview = gr.Image(elem_id='txt2img_preview', visible=False) txt2img_gallery = gr.Gallery(label='Output', elem_id='txt2img_gallery').style(grid=4) @@ -349,8 +351,6 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): send_to_extras = gr.Button('Send to extras') interrupt = gr.Button('Interrupt') - progressbar = gr.HTML(elem_id="progressbar") - with gr.Group(): html_info = gr.HTML() generation_info = gr.Textbox(visible=False) @@ -474,6 +474,8 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): custom_inputs = modules.scripts.scripts_img2img.setup_ui(is_img2img=True) with gr.Column(variant='panel'): + progressbar = gr.HTML(elem_id="progressbar") + with gr.Group(): img2img_preview = gr.Image(elem_id='img2img_preview', visible=False) img2img_gallery = gr.Gallery(label='Output', elem_id='img2img_gallery').style(grid=4) @@ -487,7 +489,6 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): interrupt = gr.Button('Interrupt') img2img_save_style = gr.Button('Save prompt as style') - progressbar = gr.HTML(elem_id="progressbar") with gr.Group(): html_info = gr.HTML() diff --git a/style.css b/style.css index 67ce8550..752d2cf4 100644 --- a/style.css +++ b/style.css @@ -167,6 +167,12 @@ input[type="range"]{ #txt2img_negative_prompt, #img2img_negative_prompt{ } +#progressbar{ + position: absolute; + z-index: 1000; + right: 0; +} + .progressDiv{ width: 100%; height: 30px; -- cgit v1.2.3 From 65be5312dc2b73e659299ea052d5484e6ae6c0ea Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 01:00:45 +0100 Subject: Add modal css classes --- style.css | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index 752d2cf4..2de83a94 100644 --- a/style.css +++ b/style.css @@ -196,3 +196,40 @@ input[type="range"]{ border-radius: 8px; } +#lightboxModal{ + display: none; + position: fixed; + z-index: 900; + padding-top: 100px; + left: 0; + top: 0; + width: 100%; + height: 100%; + overflow: auto; + background-color: black; +} + +.modalClose { + color: white; + position: absolute; + top: 10px; + right: 25px; + font-size: 35px; + font-weight: bold; +} + +.modalClose:hover, +.modalClose:focus { + color: #999; + text-decoration: none; + cursor: pointer; +} + +#modalImage { + display: block; + margin-left: auto; + margin-right: auto; + margin-top: auto; + width: auto; +} + -- cgit v1.2.3 From a66d857345c090674430c21fba1256c76d769635 Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 01:13:28 +0100 Subject: make background semi-transparent not black; --- style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'style.css') diff --git a/style.css b/style.css index 2de83a94..2bdd1e0e 100644 --- a/style.css +++ b/style.css @@ -206,7 +206,7 @@ input[type="range"]{ width: 100%; height: 100%; overflow: auto; - background-color: black; + background-color: rgba(20, 20, 20, 0.95); } .modalClose { -- cgit v1.2.3 From 8d197b6a92fbcea8e3394159247c19cea080c975 Mon Sep 17 00:00:00 2001 From: AUTOMATIC <16777216c@gmail.com> Date: Sat, 17 Sep 2022 16:28:19 +0300 Subject: added user.css support --- .gitignore | 1 + modules/ui.py | 5 +++++ style.css | 3 --- 3 files changed, 6 insertions(+), 3 deletions(-) (limited to 'style.css') diff --git a/.gitignore b/.gitignore index 1dffb108..4f830e61 100644 --- a/.gitignore +++ b/.gitignore @@ -16,3 +16,4 @@ __pycache__ /webui-user.bat /webui-user.sh /interrogate +/user.css diff --git a/modules/ui.py b/modules/ui.py index 960f1e36..b97ffd07 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -801,6 +801,11 @@ def create_ui(txt2img, img2img, run_extras, run_pnginfo): with open(os.path.join(script_path, "style.css"), "r", encoding="utf8") as file: css = file.read() + if os.path.exists(os.path.join(script_path, "style.css")): + with open(os.path.join(script_path, "user.css"), "r", encoding="utf8") as file: + usercss = file.read() + css += usercss + if not cmd_opts.no_progressbar_hiding: css += css_hide_progressbar diff --git a/style.css b/style.css index 2bdd1e0e..36d073fa 100644 --- a/style.css +++ b/style.css @@ -21,9 +21,6 @@ min-height: 4.5em; } -#txt2img_gallery, #img2img_gallery{ - min-height: 768px; -} #txt2img_gallery img, #img2img_gallery img{ object-fit: scale-down; } -- cgit v1.2.3 From e24c3b79f6aaf9dece679bbef1f3567936a90511 Mon Sep 17 00:00:00 2001 From: EyeDeck Date: Sat, 17 Sep 2022 11:58:46 -0400 Subject: Fix gallery not scrolling left --- style.css | 12 ++++++++++++ 1 file changed, 12 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index 36d073fa..98aa0b32 100644 --- a/style.css +++ b/style.css @@ -25,6 +25,18 @@ object-fit: scale-down; } +.justify-center.overflow-x-scroll { + justify-content: left; +} + +.justify-center.overflow-x-scroll button:first-of-type { + margin-left: auto; +} + +.justify-center.overflow-x-scroll button:last-of-type { + margin-right: auto; +} + #subseed_show{ min-width: 6em; max-width: 6em; -- cgit v1.2.3 From 0469972e913de107bc84ac2d9b64652a9d3d0f09 Mon Sep 17 00:00:00 2001 From: safentisAuth Date: Sat, 17 Sep 2022 19:27:08 +0300 Subject: Make gallery bigger on 2k+ displays --- style.css | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index 36d073fa..956e629f 100644 --- a/style.css +++ b/style.css @@ -21,6 +21,12 @@ min-height: 4.5em; } +@media screen and (min-width: 2500px) { + #txt2img_gallery, #img2img_gallery { + min-height: 768px; + } +} + #txt2img_gallery img, #img2img_gallery img{ object-fit: scale-down; } -- cgit v1.2.3 From fb668c58ef9bfe7ab63af0a70c27c5ff8a70cf64 Mon Sep 17 00:00:00 2001 From: DepFA <35278260+dfaker@users.noreply.github.com> Date: Sat, 17 Sep 2022 17:56:53 +0100 Subject: add previous and next styles --- style.css | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) (limited to 'style.css') diff --git a/style.css b/style.css index 36d073fa..9a236185 100644 --- a/style.css +++ b/style.css @@ -230,3 +230,29 @@ input[type="range"]{ width: auto; } +.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); +} -- cgit v1.2.3