From 5eb9f388ef3e424c61ccc5eda0191ad59467e9e5 Mon Sep 17 00:00:00 2001 From: Vladimir Mandic Date: Thu, 13 Jul 2023 15:21:20 -0400 Subject: [PATCH] flatter look for default theme --- TODO.md | 1 - javascript/black-orange.css | 15 +++++++++------ modules/ui.py | 4 ++-- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/TODO.md b/TODO.md index bfa59d418..fb71c4f00 100644 --- a/TODO.md +++ b/TODO.md @@ -68,4 +68,3 @@ Tech that can be integrated as part of the core workflow... - Bunch of stuff: - - diff --git a/javascript/black-orange.css b/javascript/black-orange.css index 778e65af2..779922ef3 100644 --- a/javascript/black-orange.css +++ b/javascript/black-orange.css @@ -22,16 +22,18 @@ --input-padding: 4px; --radius-lg: 2px; --radius-sm: 1px; - --spacing-md: 5px; + --spacing-md: 4px; + --line-sm: 1.3em; } html { font-size: var(--font-size); } body, button, input, select, textarea { font-family: var(--font);} button { font-size: 1.2rem; } img { background-color: var(--background-color); } -input[type=range] { height: 18px; appearance: none; margin-top: 0; min-width: 160px; background-color: var(--background-color); width: 100%; background: transparent; } -input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 18px; cursor: pointer; box-shadow: 2px 2px 3px #111111; background: #50555C; border-radius: var(--radius-lg); border: 0px solid #222222; } -input[type=range]::-moz-range-track { width: 100%; height: 18px; cursor: pointer; box-shadow: 2px 2px 3px #111111; background: #50555C; border-radius: var(--radius-lg); border: 0px solid #222222; } +input[type=checkbox] { background-color: transparent !important; } +input[type=range] { height: var(--line-sm); appearance: none; margin-top: 0; min-width: 160px; background-color: var(--background-color); width: 100%; background: transparent; } +input[type=range]::-webkit-slider-runnable-track { width: 100%; height: 18px; cursor: pointer; box-shadow: 2px 2px 3px #111111; background: var(--input-background-fill); border-radius: var(--radius-lg); border: 0px solid #222222; } +input[type=range]::-moz-range-track { width: 100%; height: 18px; cursor: pointer; box-shadow: 2px 2px 3px #111111; background: var(--input-background-fill); border-radius: var(--radius-lg); border: 0px solid #222222; } input[type=range]::-webkit-slider-thumb { box-shadow: 2px 2px 3px #111111; border: 0px solid #000000; height: 18px; width: 40px; border-radius: var(--radius-lg); background: var(--highlight-color); cursor: pointer; appearance: none; margin-top: 0px; } input[type=range]::-moz-range-thumb { box-shadow: 2px 2px 3px #111111; border: 0px solid #000000; height: 18px; width: 40px; border-radius: var(--radius-lg); background: var(--highlight-color); cursor: pointer; appearance: none; margin-top: 0px; } ::-webkit-scrollbar { width: 12px; } @@ -68,7 +70,8 @@ svg.feather.feather-image, .feather .feather-image { display: none } .block.token-counter span { background-color: #222 !important; box-shadow: 2px 2px 2px #111; border: none !important; font-size: 0.8rem; } .tab-nav { zoom: 120%; margin-bottom: 10px; border-bottom: 2px solid var(--highlight-color) !important; padding-bottom: 2px; } .label-wrap { margin: 16px 0px 8px 0px; } -.gradio-slider input[type="number"] { width: 4.5em; font-size: 0.8rem; } +.gradio-slider input[type="number"] { width: 4.5em; font-size: 0.8rem; height: 20px; } +.gradio-button.tool { border: none; background: none; box-shadow: none; } #tab_extensions table td, #tab_extensions table th { border: none; padding: 0.5em; } #tab_extensions table { width: 96vw } #tab_extensions table thead { background-color: var(--neutral-700); } @@ -89,7 +92,7 @@ svg.feather.feather-image, .feather .feather-image { display: none } #img2img_settings { min-width: calc(2 * var(--left-column)); max-width: calc(2 * var(--left-column)); background-color: #111111; padding-top: 16px; } #interrogate, #deepbooru { margin: 0 0px 10px 0px; max-width: 80px; max-height: 80px; font-weight: normal; font-size: 0.95em; } #quicksettings .gr-button-tool { font-size: 1.6rem; box-shadow: none; margin-left: -20px; margin-top: -2px; height: 2.4em; } -#quicksettings > div, #quicksettings > fieldset { min-width: 24em; max-width: 26em; line-height: 2em; } +#quicksettings > div, #quicksettings > fieldset { min-width: 24em; max-width: 26em; line-height: 1.6em; margin-top: 0.4em; } #open_folder_extras, #footer, #style_pos_col, #style_neg_col, #roll_col, #extras_upscaler_2, #extras_upscaler_2_visibility, #txt2img_seed_resize_from_w, #txt2img_seed_resize_from_h { display: none; } #save-animation { border-radius: var(--radius-sm) !important; margin-bottom: 16px; background-color: #111111; } #script_list { padding: 4px; margin-top: 20px; margin-bottom: 20px; } diff --git a/modules/ui.py b/modules/ui.py index 1a1cec460..8eb2f2e70 100644 --- a/modules/ui.py +++ b/modules/ui.py @@ -622,7 +622,7 @@ def create_ui(startup_timer = None): with FormRow(): width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="img2img_width") height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="img2img_height") - with gr.Column(elem_id="img2img_dimensions_row", scale=1, elem_classes="dimensions-tools"): + with gr.Column(elem_id="img2img_column_dim", scale=1, elem_classes="dimensions-tools"): with FormRow(): res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="img2img_res_switch_btn") detect_image_size_btn = ToolButton(value=detect_image_size_symbol, elem_id="img2img_detect_image_size_btn") @@ -799,7 +799,7 @@ def create_ui(startup_timer = None): img2img_prompt.submit(**img2img_args) submit.click(**img2img_args) res_switch_btn.click(lambda w, h: (h, w), inputs=[width, height], outputs=[width, height], show_progress=False) - + detect_image_size_btn.click( fn=lambda w, h, _: (w or gr.update(), h or gr.update()), _js="currentImg2imgSourceResolution",