css refactoring
This commit is contained in:
anapnoe
parent
249928a6c4
commit
222fec1013
|
|
@ -278,6 +278,8 @@ onUiUpdate(function(){
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
hack until gradio allows to add custom classes to components
|
||||
add elem_id= your_elem_id + "sub-group"
|
||||
|
|
@ -292,7 +294,7 @@ onUiUpdate(function(){
|
|||
elem.classList.add("sub-group");
|
||||
})
|
||||
|
||||
/* resizable textarea */
|
||||
/* auto grow textarea */
|
||||
gradioApp().querySelectorAll('[id $= "_prompt"] textarea').forEach(function (elem) {
|
||||
elem.style.boxSizing = 'border-box';
|
||||
var offset = elem.offsetHeight - elem.clientHeight;
|
||||
|
|
@ -303,8 +305,7 @@ onUiUpdate(function(){
|
|||
});
|
||||
|
||||
|
||||
|
||||
/* split view resize */
|
||||
/* resizable split view */
|
||||
gradioApp().querySelectorAll('#txt2img_splitter, #img2img_splitter').forEach((elem) => {
|
||||
|
||||
elem.addEventListener("mousedown", function(e) {
|
||||
|
|
|
|||
|
|
@ -193,8 +193,8 @@ def create_seed_inputs(target_interface):
|
|||
random_seed = gr.Button(random_symbol, elem_id=target_interface + '_random_seed')
|
||||
reuse_seed = gr.Button(reuse_symbol, elem_id=target_interface + '_reuse_seed')
|
||||
|
||||
with gr.Box(elem_id='subseed_show_box'):
|
||||
seed_checkbox = gr.Checkbox(label='Extra', elem_id=target_interface + '_subseed_show', value=False)
|
||||
#with gr.Box(elem_id='subseed_show_box'):
|
||||
seed_checkbox = gr.Checkbox(label='Extra', elem_id=target_interface + '_subseed_show', value=False)
|
||||
|
||||
|
||||
# Components to show/hide based on the 'Extra' checkbox
|
||||
|
|
@ -496,10 +496,10 @@ def create_ui():
|
|||
|
||||
|
||||
with gr.Row().style(equal_height=False):
|
||||
|
||||
|
||||
txt2img_gallery, generation_info, html_info, html_log = create_output_panel("txt2img", opts.outdir_txt2img_samples)
|
||||
gr.Row(elem_id="txt2img_splitter")
|
||||
|
||||
|
||||
with gr.Column(variant='panel', elem_id="txt2img_settings"):
|
||||
|
||||
submit = create_generate(is_img2img=False)
|
||||
|
|
@ -796,22 +796,17 @@ def create_ui():
|
|||
for category in ordered_ui_categories():
|
||||
if category == "inpaint":
|
||||
with FormGroup(elem_id="inpaint_controls", visible=False) as inpaint_controls:
|
||||
with FormRow():
|
||||
with gr.Row():
|
||||
mask_blur = gr.Slider(label='Mask blur', minimum=0, maximum=64, step=1, value=4, elem_id="img2img_mask_blur")
|
||||
mask_alpha = gr.Slider(label="Mask transparency", visible=False, elem_id="img2img_mask_alpha")
|
||||
|
||||
with FormRow():
|
||||
inpainting_mask_invert = gr.Radio(label='Mask mode', choices=['Inpaint masked', 'Inpaint not masked'], value='Inpaint masked', type="index", elem_id="img2img_mask_mode")
|
||||
|
||||
with FormRow():
|
||||
inpainting_fill = gr.Radio(label='Masked content', choices=['fill', 'original', 'latent noise', 'latent nothing'], value='original', type="index", elem_id="img2img_inpainting_fill")
|
||||
|
||||
with FormRow():
|
||||
with gr.Column():
|
||||
inpaint_full_res = gr.Radio(label="Inpaint area", choices=["Whole picture", "Only masked"], type="index", value="Whole picture", elem_id="img2img_inpaint_full_res")
|
||||
|
||||
with gr.Column(scale=4):
|
||||
inpaint_full_res_padding = gr.Slider(label='Only masked padding, pixels', minimum=0, maximum=256, step=4, value=32, elem_id="img2img_inpaint_full_res_padding")
|
||||
with gr.Row():
|
||||
inpainting_mask_invert = gr.Dropdown(label='Mask mode', choices=['Inpaint masked', 'Inpaint not masked'], value='Inpaint masked', type="index", elem_id="img2img_mask_mode")
|
||||
inpainting_fill = gr.Dropdown(label='Masked content', choices=['fill', 'original', 'latent noise', 'latent nothing'], value='original', type="index", elem_id="img2img_inpainting_fill")
|
||||
|
||||
with gr.Row():
|
||||
inpaint_full_res = gr.Dropdown(label="Inpaint area", choices=["Whole picture", "Only masked"], type="index", value="Whole picture", elem_id="img2img_inpaint_full_res")
|
||||
inpaint_full_res_padding = gr.Slider(label='Only masked padding, pixels', minimum=0, maximum=256, step=4, value=32, elem_id="img2img_inpaint_full_res_padding")
|
||||
|
||||
def select_img2img_tab(tab):
|
||||
return gr.update(visible=tab in [2, 3, 4]), gr.update(visible=tab == 3),
|
||||
|
|
|
|||
95
style.css
95
style.css
|
|
@ -1003,29 +1003,7 @@ div#group-subseed>div>div>div>div {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
#seed_row,
|
||||
#subseed_row {
|
||||
gap: .5rem;
|
||||
}
|
||||
|
||||
#subseed_show,
|
||||
#subseed_show_box {
|
||||
min-width: auto;
|
||||
flex-grow: 0;
|
||||
}
|
||||
|
||||
#subseed_show_box>div {
|
||||
border: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#subseed_show {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#subseed_show label {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#img2img_seed_row,
|
||||
#txt2img_seed_row,
|
||||
|
|
@ -1035,7 +1013,7 @@ div#group-subseed>div>div>div>div>div {
|
|||
}
|
||||
|
||||
div.sub-group .gr-box {
|
||||
background: #222325;
|
||||
background-color: #222325;
|
||||
}
|
||||
|
||||
#img2img_seed_row button,
|
||||
|
|
@ -1211,7 +1189,7 @@ textarea {
|
|||
}
|
||||
|
||||
.dark .gr-block {
|
||||
min-width: 150px;
|
||||
/*min-width: 150px;*/
|
||||
}
|
||||
|
||||
#toprow div {
|
||||
|
|
@ -1320,7 +1298,7 @@ textarea {
|
|||
}
|
||||
|
||||
.gr-form {
|
||||
min-width: 150px;
|
||||
/*min-width: 150px;*/
|
||||
}
|
||||
|
||||
#img2img_toprow,
|
||||
|
|
@ -1812,7 +1790,9 @@ div#script_list {
|
|||
flex-basis: 10%;
|
||||
}
|
||||
|
||||
input:focus {
|
||||
/*textarea:focus,*/
|
||||
input:focus
|
||||
{
|
||||
border-color: #03d0a8 !important;
|
||||
}
|
||||
|
||||
|
|
@ -1845,30 +1825,6 @@ input:focus {
|
|||
/*overflow: hidden !important; */
|
||||
}
|
||||
|
||||
/*
|
||||
#txt2img_prompt label {
|
||||
display: grid;
|
||||
}
|
||||
#txt2img_prompt label::after {
|
||||
content: attr(data-replicated-value) " ";
|
||||
white-space: pre-wrap;
|
||||
visibility: hidden;
|
||||
}
|
||||
#txt2img_prompt label > textarea {
|
||||
resize: none;
|
||||
overflow: hidden;
|
||||
}
|
||||
#txt2img_prompt label > textarea,
|
||||
#txt2img_prompt label::after {
|
||||
|
||||
border: 1px solid black;
|
||||
padding: 0.5rem;
|
||||
font: inherit;
|
||||
grid-area: 1 / 1 / 2 / 2;
|
||||
}
|
||||
*/
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -1880,6 +1836,8 @@ pre {
|
|||
word-wrap: break-word; /* Internet Explorer 5.5+ */
|
||||
}
|
||||
|
||||
|
||||
|
||||
#settings .gr-button-tool {
|
||||
align-self: flex-end !important;
|
||||
margin-bottom: 10px;
|
||||
|
|
@ -1889,27 +1847,35 @@ pre {
|
|||
height: 34px;
|
||||
}
|
||||
|
||||
|
||||
#inpaint_controls > div:last-child
|
||||
{
|
||||
margin-bottom:0;
|
||||
}
|
||||
|
||||
/* splitter and views */
|
||||
|
||||
#img2img_prompt_image + div,
|
||||
#txt2img_prompt_image + div{
|
||||
#txt2img_prompt_image + div
|
||||
{
|
||||
flex-wrap:nowrap;
|
||||
}
|
||||
|
||||
#txt2img_settings,
|
||||
#img2img_settings {
|
||||
#img2img_settings
|
||||
{
|
||||
flex-grow: 1;
|
||||
flex-shrink: 0;
|
||||
/*flex-basis: 50%; initial status */
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
|
||||
#txt2img_results,
|
||||
#img2img_results {
|
||||
flex-grow: 0 !important;
|
||||
flex-shrink: 1 !important;
|
||||
overflow-x: auto;
|
||||
flex-basis: 50%;
|
||||
}
|
||||
|
||||
|
||||
#txt2img_splitter,
|
||||
#img2img_splitter
|
||||
{
|
||||
|
|
@ -1932,6 +1898,14 @@ pre {
|
|||
height:auto !important;
|
||||
}
|
||||
|
||||
/* extra */
|
||||
#img2img_subgroup_seed > div + div,
|
||||
#img2img_group_seed > div + div,
|
||||
#txt2img_subgroup_seed > div + div,
|
||||
#txt2img_group_seed > div + div {
|
||||
flex-grow:0;
|
||||
}
|
||||
|
||||
|
||||
@media only screen and (max-width: 860px) {
|
||||
/* For tablets: */
|
||||
|
|
@ -1959,6 +1933,7 @@ pre {
|
|||
|
||||
#txt2img_actions_column, #img2img_actions_column {
|
||||
flex-basis: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.dark .gr-block {
|
||||
|
|
@ -2025,8 +2000,6 @@ pre {
|
|||
min-width:90px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#img2img_gallery, #txt2img_gallery {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
|
@ -2035,7 +2008,6 @@ pre {
|
|||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
|
||||
#img2img_tools, #txt2img_tools {
|
||||
gap: 2px;
|
||||
}
|
||||
|
|
@ -2044,7 +2016,6 @@ pre {
|
|||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
|
||||
#txt2img_results {
|
||||
flex-grow: 1 !important;
|
||||
flex-shrink: 1 !important;
|
||||
|
|
@ -2060,6 +2031,10 @@ pre {
|
|||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#txt2img_results, #img2img_results {
|
||||
flex-grow: 1 !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user