mirror of
https://github.com/anapnoe/stable-diffusion-webui-ux.git
synced 2026-09-20 01:31:44 +02:00
Re-layout Theme Configurator
This commit is contained in:
anapnoe
@@ -22,82 +22,85 @@ def on_ui_tabs():
|
||||
with gr.Blocks(analytics_enabled=False) as ui_theme:
|
||||
|
||||
with gr.Row():
|
||||
|
||||
themes_dropdown = gr.Dropdown(label="Themes", interactive=True, choices=get_files(themes_folder,[".css, .txt"]), type="value")
|
||||
save_as_filename = gr.Text(label="Save as Name")
|
||||
apply_button = gr.Button(elem_id="theme_apply_btn", value="Apply", variant="primary")
|
||||
reset_button = gr.Button(elem_id="theme_reset_btn", value="Reset", variant="primary")
|
||||
save_button = gr.Button(value="Save", variant="primary")
|
||||
#delete_button = gr.Button(value="Delete", variant="primary")
|
||||
with gr.Column():
|
||||
with gr.Row():
|
||||
themes_dropdown = gr.Dropdown(label="Themes", interactive=True, choices=get_files(themes_folder,[".css, .txt"]), type="value")
|
||||
save_as_filename = gr.Text(label="Save as Name")
|
||||
with gr.Row():
|
||||
reset_button = gr.Button(elem_id="theme_reset_btn", value="Reset", variant="primary")
|
||||
apply_button = gr.Button(elem_id="theme_apply_btn", value="Apply", variant="primary")
|
||||
save_button = gr.Button(value="Save", variant="primary")
|
||||
#delete_button = gr.Button(value="Delete", variant="primary")
|
||||
|
||||
#with gr.Accordion(label="Debug View", open=True):
|
||||
with gr.Row():
|
||||
vars_text = gr.Textbox(label="Vars", elem_id="theme_vars", show_label=True, lines=7, interactive=False, visible=False)
|
||||
css_text = gr.Textbox(label="Css", elem_id="theme_css", show_label=True, lines=7, interactive=False, visible=False)
|
||||
#result_text = gr.Text(elem_id="theme_result", interactive=False, visible=False)
|
||||
|
||||
with gr.Row():
|
||||
gr.Slider(elem_id="theme_hue", label='Hue', minimum=0, maximum=360, step=1)
|
||||
gr.Slider(elem_id="theme_sat", label='Saturation', minimum=-100, maximum=100, step=1, value=0, interactive=True)
|
||||
gr.Slider(elem_id="theme_brt", label='Lightness', minimum=-50, maximum=50, step=1, value=0, interactive=True)
|
||||
with gr.Row():
|
||||
gr.Button(elem_id="theme_invert_btn", value="Invert", variant="primary")
|
||||
with gr.Accordion(label="Theme Color adjustments", open=True):
|
||||
with gr.Row():
|
||||
with gr.Column(scale=6):
|
||||
gr.Slider(elem_id="theme_hue", label='Hue', minimum=0, maximum=360, step=1)
|
||||
gr.Slider(elem_id="theme_sat", label='Saturation', minimum=-100, maximum=100, step=1, value=0, interactive=True)
|
||||
gr.Slider(elem_id="theme_brt", label='Lightness', minimum=-50, maximum=50, step=1, value=0, interactive=True)
|
||||
|
||||
gr.Button(elem_id="theme_invert_btn", value="Invert", variant="primary")
|
||||
|
||||
|
||||
with gr.Row(elem_id="ui_theme_settings"):
|
||||
|
||||
with gr.Column():
|
||||
with gr.Accordion(label="Main colors", open=True):
|
||||
gr.ColorPicker(elem_id="--main-bg-color", interactive=True, label="Background color")
|
||||
gr.ColorPicker(elem_id="--primary-color", label="Primary color")
|
||||
|
||||
with gr.Accordion(label="Focus", open=True):
|
||||
gr.ColorPicker(elem_id="--textarea-focus-color", label="Textarea color")
|
||||
gr.ColorPicker(elem_id="--input-focus-color", label="Input color")
|
||||
with gr.Column():
|
||||
with gr.Accordion(label="Main colors", open=True):
|
||||
gr.ColorPicker(elem_id="--main-bg-color", interactive=True, label="Background color")
|
||||
gr.ColorPicker(elem_id="--primary-color", label="Primary color")
|
||||
|
||||
with gr.Accordion(label="Focus", open=True):
|
||||
gr.ColorPicker(elem_id="--textarea-focus-color", label="Textarea color")
|
||||
gr.ColorPicker(elem_id="--input-focus-color", label="Input color")
|
||||
|
||||
with gr.Accordion(label="Spacing", open=True):
|
||||
gr.Slider(elem_id="--outside-gap-size", label='Gap size', minimum=0, maximum=16, step=1)
|
||||
gr.Slider(elem_id="--inside-padding-size", label='Padding size', minimum=0, maximum=16, step=1)
|
||||
|
||||
#with gr.Column():
|
||||
with gr.Accordion(label="Panel colors", open=True):
|
||||
gr.ColorPicker(elem_id="--label-color", label="Label color")
|
||||
gr.ColorPicker(elem_id="--panel-bg-color", label="Background color")
|
||||
gr.ColorPicker(elem_id="--panel-border-color", label="Border color")
|
||||
gr.Slider(elem_id="--panel-border-radius", label='Border radius', minimum=0, maximum=16, step=1)
|
||||
|
||||
gr.ColorPicker(elem_id="--input-color", label="Input text color")
|
||||
gr.ColorPicker(elem_id="--input-bg-color", label="Input background color")
|
||||
gr.ColorPicker(elem_id="--input-border-color", label="Input border color")
|
||||
|
||||
with gr.Column(elem_id="theme_sub-group-collapse"):
|
||||
#with gr.row(elem_id="theme_sub-group-collapse"):
|
||||
with gr.Accordion(label="Subgroup / Panel colors", open=True):
|
||||
gr.ColorPicker(elem_id="--subgroup-bg-color", label="Subgoup background color")
|
||||
|
||||
#gr.ColorPicker(elem_id="--subgroup-label-color", label="Label color", value="#000000")
|
||||
gr.ColorPicker(elem_id="--subpanel-bg-color", label="Background color")
|
||||
gr.ColorPicker(elem_id="--subpanel-border-color", label="Border color")
|
||||
gr.Slider(elem_id="--subpanel-border-radius", label='Border radius', minimum=0, maximum=16, step=1)
|
||||
|
||||
gr.ColorPicker(elem_id="--subgroup-input-color", label="Input text color")
|
||||
gr.ColorPicker(elem_id="--subgroup-input-bg-color", label="Input background color")
|
||||
gr.ColorPicker(elem_id="--subgroup-input-border-color", label="Input border color")
|
||||
|
||||
#with gr.Column():
|
||||
with gr.Accordion(label="Navigation menu colors", open=True):
|
||||
gr.ColorPicker(elem_id="--nav-bg-color", label="Background color")
|
||||
gr.ColorPicker(elem_id="--nav-color", label="Text color")
|
||||
gr.ColorPicker(elem_id="--nav-hover-color", label="Hover color")
|
||||
|
||||
with gr.Accordion(label="Icon colors", open=True):
|
||||
gr.ColorPicker(elem_id="--icon-color", label="Text color")
|
||||
gr.ColorPicker(elem_id="--icon-hover-color", label="Hover color")
|
||||
|
||||
with gr.Accordion(label="Other colors", open=True):
|
||||
gr.ColorPicker(elem_id="--text-color", label="Text color")
|
||||
gr.ColorPicker(elem_id="--placeholder-color", label="Placeholder color")
|
||||
gr.ColorPicker(elem_id="--cancel-color", label="Cancel/Interrupt color")
|
||||
with gr.Accordion(label="Spacing", open=True):
|
||||
gr.Slider(elem_id="--outside-gap-size", label='Gap size', minimum=0, maximum=16, step=1)
|
||||
gr.Slider(elem_id="--inside-padding-size", label='Padding size', minimum=0, maximum=16, step=1)
|
||||
|
||||
with gr.Accordion(label="Panel colors", open=True):
|
||||
gr.ColorPicker(elem_id="--label-color", label="Label color")
|
||||
gr.ColorPicker(elem_id="--panel-bg-color", label="Background color")
|
||||
gr.ColorPicker(elem_id="--panel-border-color", label="Border color")
|
||||
gr.Slider(elem_id="--panel-border-radius", label='Border radius', minimum=0, maximum=16, step=1)
|
||||
|
||||
gr.ColorPicker(elem_id="--input-color", label="Input text color")
|
||||
gr.ColorPicker(elem_id="--input-bg-color", label="Input background color")
|
||||
gr.ColorPicker(elem_id="--input-border-color", label="Input border color")
|
||||
with gr.Column():
|
||||
with gr.Row(elem_id="theme_sub-group-collapse"):
|
||||
|
||||
with gr.Accordion(label="Subgroup / Panel colors", open=True):
|
||||
gr.ColorPicker(elem_id="--subgroup-bg-color", label="Subgoup background color")
|
||||
#gr.ColorPicker(elem_id="--subgroup-label-color", label="Label color", value="#000000")
|
||||
gr.ColorPicker(elem_id="--subpanel-bg-color", label="Background color")
|
||||
gr.ColorPicker(elem_id="--subpanel-border-color", label="Border color")
|
||||
gr.Slider(elem_id="--subpanel-border-radius", label='Border radius', minimum=0, maximum=16, step=1)
|
||||
|
||||
gr.ColorPicker(elem_id="--subgroup-input-color", label="Input text color")
|
||||
gr.ColorPicker(elem_id="--subgroup-input-bg-color", label="Input background color")
|
||||
gr.ColorPicker(elem_id="--subgroup-input-border-color", label="Input border color")
|
||||
|
||||
with gr.Row():
|
||||
with gr.Column():
|
||||
with gr.Accordion(label="Navigation menu colors", open=True):
|
||||
gr.ColorPicker(elem_id="--nav-bg-color", label="Background color")
|
||||
gr.ColorPicker(elem_id="--nav-color", label="Text color")
|
||||
gr.ColorPicker(elem_id="--nav-hover-color", label="Hover color")
|
||||
|
||||
with gr.Accordion(label="Icon colors", open=True):
|
||||
gr.ColorPicker(elem_id="--icon-color", label="Text color")
|
||||
gr.ColorPicker(elem_id="--icon-hover-color", label="Hover color")
|
||||
|
||||
with gr.Accordion(label="Other colors", open=True):
|
||||
gr.ColorPicker(elem_id="--text-color", label="Text color")
|
||||
gr.ColorPicker(elem_id="--placeholder-color", label="Placeholder color")
|
||||
gr.ColorPicker(elem_id="--cancel-color", label="Cancel/Interrupt color")
|
||||
|
||||
|
||||
|
||||
def save_theme( vars_text, css_text, filename):
|
||||
|
||||
Reference in New Issue
Block a user