Refactoring Css mobile fixes
This commit is contained in:
anapnoe
parent
b91ca44d7c
commit
627937f56f
|
|
@ -286,16 +286,74 @@ onUiUpdate(function(){
|
|||
* matches any position
|
||||
$ matches the end
|
||||
|
||||
*/
|
||||
*/
|
||||
|
||||
gradioApp().querySelectorAll('[id *= "sub-group"]').forEach(function(elem){
|
||||
elem.classList.add("sub-group");
|
||||
console.log(elem.id);
|
||||
//console.log(elem.id);
|
||||
})
|
||||
|
||||
|
||||
gradioApp().querySelectorAll('textarea').forEach(function(elem){
|
||||
elem.classList.add("input-text");
|
||||
elem.classList.remove("gr-text-input", "gr-box");
|
||||
})
|
||||
|
||||
|
||||
/* coming soon split view resize
|
||||
|
||||
const resizer = gradioApp().getElementById('handler');
|
||||
const leftSide = resizer.previousElementSibling;
|
||||
const rightSide = resizer.nextElementSibling;
|
||||
const container = gradioApp().getElementById('tab_txt2img');
|
||||
|
||||
var x = 0;
|
||||
var y = 0;
|
||||
var leftWidth = 0;
|
||||
|
||||
|
||||
|
||||
function mouseMoveHandler(e) {
|
||||
resizer.style.cursor = 'col-resize';
|
||||
container.style.cursor = 'col-resize';
|
||||
|
||||
const dx = e.clientX - x;
|
||||
const dy = e.clientY - y;
|
||||
|
||||
const newLeftWidth = ((leftWidth + dx) * 100) / resizer.parentNode.getBoundingClientRect().width;
|
||||
leftSide.style.flexBasis = `${newLeftWidth}%`;
|
||||
leftSide.style.userSelect = 'none';
|
||||
leftSide.style.pointerEvents = 'none';
|
||||
rightSide.style.userSelect = 'none';
|
||||
rightSide.style.pointerEvents = 'none';
|
||||
console.log("Move");
|
||||
|
||||
};
|
||||
|
||||
function mouseUpHandler() {
|
||||
resizer.style.removeProperty('cursor');
|
||||
container.style.removeProperty('cursor');
|
||||
leftSide.style.removeProperty('user-select');
|
||||
leftSide.style.removeProperty('pointer-events');
|
||||
rightSide.style.removeProperty('user-select');
|
||||
rightSide.style.removeProperty('pointer-events');
|
||||
container.removeEventListener('mousemove', mouseMoveHandler);
|
||||
container.removeEventListener('mouseup', mouseUpHandler);
|
||||
console.log("Up");
|
||||
};
|
||||
|
||||
function mouseDownHandler(e) {
|
||||
x = e.clientX;
|
||||
y = e.clientY;
|
||||
leftWidth = leftSide.getBoundingClientRect().width;
|
||||
container.addEventListener('mousemove', mouseMoveHandler);
|
||||
container.addEventListener('mouseup', mouseUpHandler);
|
||||
console.log("Down");
|
||||
};
|
||||
|
||||
// Attach the handler
|
||||
resizer.addEventListener('mousedown', mouseDownHandler);
|
||||
*/
|
||||
|
||||
|
||||
})
|
||||
|
||||
|
|
@ -357,3 +415,5 @@ function selectCheckpoint(name){
|
|||
desiredCheckpointName = name;
|
||||
gradioApp().getElementById('change_checkpoint').click()
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -332,14 +332,14 @@ def create_toprow(is_img2img):
|
|||
prompt_styles = gr.Dropdown(label="Styles", elem_id=f"{id_part}_styles", choices=[k for k, v in shared.prompt_styles.styles.items()], value=[], multiselect=True)
|
||||
create_refresh_button(prompt_styles, shared.prompt_styles.reload, lambda: {"choices": [k for k, v in shared.prompt_styles.styles.items()]}, f"refresh_{id_part}_style_index")
|
||||
with gr.Row():
|
||||
prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=True, lines=7,
|
||||
prompt = gr.Textbox(label="Prompt", elem_id=f"{id_part}_prompt", show_label=True, lines=5,
|
||||
placeholder="Prompt (press Ctrl+Enter or Alt+Enter to generate)"
|
||||
)
|
||||
|
||||
with gr.Row():
|
||||
with gr.Column(scale=80):
|
||||
with gr.Row():
|
||||
negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=True, lines=7,
|
||||
negative_prompt = gr.Textbox(label="Negative prompt", elem_id=f"{id_part}_neg_prompt", show_label=True, lines=5,
|
||||
placeholder="Negative prompt (press Ctrl+Enter or Alt+Enter to generate)"
|
||||
)
|
||||
|
||||
|
|
@ -498,6 +498,7 @@ 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="handler")
|
||||
|
||||
with gr.Column(variant='panel', elem_id="txt2img_settings"):
|
||||
|
||||
|
|
@ -516,7 +517,7 @@ def create_ui():
|
|||
steps, sampler_index = create_sampler_and_steps_selection(samplers, "txt2img")
|
||||
|
||||
elif category == "dimensions":
|
||||
with FormRow():
|
||||
with gr.Row():
|
||||
width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="txt2img_width")
|
||||
res_switch_btn = ToolButton(value=switch_values_symbol, elem_id="txt2img_res_switch_btn")
|
||||
height = gr.Slider(minimum=64, maximum=2048, step=8, label="Height", value=512, elem_id="txt2img_height")
|
||||
|
|
@ -848,7 +849,7 @@ def create_ui():
|
|||
steps, sampler_index = create_sampler_and_steps_selection(samplers_for_img2img, "img2img")
|
||||
|
||||
elif category == "dimensions":
|
||||
with FormRow():
|
||||
with gr.Row():
|
||||
|
||||
#with gr.Column(elem_id="img2img_column_size", scale=4):
|
||||
width = gr.Slider(minimum=64, maximum=2048, step=8, label="Width", value=512, elem_id="img2img_width")
|
||||
|
|
|
|||
196
style.css
196
style.css
|
|
@ -1,3 +1,27 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
:root {
|
||||
--main-bg-color: #1a1a1a;
|
||||
|
||||
}
|
||||
|
||||
|
||||
.livePreview > img,
|
||||
#img2img_gallery .overflow-y-auto,
|
||||
#txt2img_gallery .overflow-y-auto
|
||||
{
|
||||
background: var(--main-bg-color);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.container {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
|
@ -1331,11 +1355,11 @@ label.bg-white {
|
|||
gap: .5em;
|
||||
}
|
||||
|
||||
.dark .gr-box-unrounded {
|
||||
.gr-box-unrounded {
|
||||
background: 0 0;
|
||||
}
|
||||
|
||||
.dark .gr-text-input {
|
||||
.gr-text-input {
|
||||
height: 32px !important;
|
||||
}
|
||||
|
||||
|
|
@ -1450,9 +1474,6 @@ div#script_list {
|
|||
margin-top: 1px;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #1a1a1a !important;
|
||||
}
|
||||
|
||||
.dark {
|
||||
background-color: #1a1a1a;
|
||||
|
|
@ -1595,6 +1616,29 @@ body {
|
|||
background-color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
|
||||
.dark .dark\:hover\:border-gray-600:hover {
|
||||
border: 1px solid #03d0a8;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.dark .dark\:hover\:border-gray-600>div.cursor-pointer {
|
||||
padding: 12px !important;
|
||||
margin: -12px !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.dark .dark\:hover\:border-gray-600:hover>div.cursor-pointer {
|
||||
background: #03d0a8 !important;
|
||||
color: #1a1a1a !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.dark .dark\:hover\:border-gray-600>div.cursor-pointer+div {
|
||||
margin-top: .8em !important;
|
||||
}
|
||||
|
||||
|
||||
.tabs>div>button {
|
||||
border-bottom: 2px solid #494c50;
|
||||
}
|
||||
|
|
@ -1702,9 +1746,7 @@ body {
|
|||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.livePreview > img{
|
||||
background-color: #1a1a1a !important;
|
||||
}
|
||||
|
||||
|
||||
#img2img_gallery div>div,
|
||||
#txt2img_gallery div>div {
|
||||
|
|
@ -1713,8 +1755,7 @@ body {
|
|||
|
||||
#img2img_gallery .overflow-y-auto,
|
||||
#txt2img_gallery .overflow-y-auto {
|
||||
min-height: calc(100vh - 220px) !important;
|
||||
background: #1a1a1a !important;
|
||||
min-height: calc(100vh - 220px) !important;
|
||||
}
|
||||
|
||||
#quicksettings {
|
||||
|
|
@ -1745,6 +1786,7 @@ body {
|
|||
#img2img_settings,
|
||||
#txt2img_settings {
|
||||
min-width: min(680px, 100%) !important;
|
||||
flex: 1 1 0%;
|
||||
}
|
||||
|
||||
#img2img_settings_scroll,
|
||||
|
|
@ -1758,7 +1800,7 @@ body {
|
|||
#img2img_results,
|
||||
#txt2img_results {
|
||||
overflow-x: hidden !important;
|
||||
flex-grow: 2 !important;
|
||||
/*flex-grow: 2 !important;*/
|
||||
max-height: calc(100vh - 200px);
|
||||
overflow-y: auto !important;
|
||||
}
|
||||
|
|
@ -1773,53 +1815,19 @@ input:focus {
|
|||
border-color: #03d0a8 !important;
|
||||
}
|
||||
|
||||
#img2img_settings::before,
|
||||
#txt2img_settings::before {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
height: calc(100vh - 288px);
|
||||
top: 88px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg, rgb(26 26 26), transparent 2%, transparent 98%, rgb(26 26 26) 100%);
|
||||
}
|
||||
|
||||
.dark .dark\:hover\:border-gray-600:hover {
|
||||
border: 1px solid #03d0a8;
|
||||
background-color: #1a1a1a;
|
||||
}
|
||||
|
||||
.dark .dark\:hover\:border-gray-600>div.cursor-pointer {
|
||||
padding: 12px !important;
|
||||
margin: -12px !important;
|
||||
width: auto !important;
|
||||
}
|
||||
|
||||
.dark .dark\:hover\:border-gray-600:hover>div.cursor-pointer {
|
||||
background: #03d0a8 !important;
|
||||
color: #1a1a1a !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.dark .dark\:hover\:border-gray-600>div.cursor-pointer+div {
|
||||
margin-top: .8em !important;
|
||||
}
|
||||
|
||||
.dark .gr-button {
|
||||
.gr-button {
|
||||
border-radius: 0 !important;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
#img2img_neg_prompt label, #img2img_prompt label, #txt2img_neg_prompt label, #txt2img_prompt label {
|
||||
border: 0;
|
||||
}
|
||||
#img2img_neg_prompt span, #img2img_prompt span, #txt2img_neg_prompt span, #txt2img_prompt span {
|
||||
border-bottom: 0 !important;
|
||||
}
|
||||
|
||||
#img2img_settings_scroll::-webkit-scrollbar,
|
||||
#txt2img_settings_scroll::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 1024px) {
|
||||
/* For tablets: */
|
||||
|
|
@ -1854,7 +1862,7 @@ input:focus {
|
|||
}
|
||||
|
||||
.gap-4 {
|
||||
gap: 2px;
|
||||
gap: 2px !important;
|
||||
}
|
||||
|
||||
.gr-box>div>div>input.gr-text-input {
|
||||
|
|
@ -1875,12 +1883,94 @@ input:focus {
|
|||
border:none;
|
||||
|
||||
}
|
||||
|
||||
div.sub-group {
|
||||
padding: 4px 3px 0;
|
||||
margin-top: -3px;
|
||||
}
|
||||
|
||||
div.sub-group > div {
|
||||
margin-bottom: 3px !important;
|
||||
}
|
||||
|
||||
/* accordion */
|
||||
.p-3 {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
.dark .dark\:hover\:border-gray-600>div.cursor-pointer {
|
||||
padding: 8px !important;
|
||||
margin: -8px !important;
|
||||
}
|
||||
|
||||
#img2img_settings_scroll,
|
||||
#txt2img_settings_scroll {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.dark .gr-block,
|
||||
.gr-form,
|
||||
#txt2img_seed,
|
||||
#img2img_seed,
|
||||
#txt2img_subseed,
|
||||
#img2img_subseed,
|
||||
#txt2img_seed_row > div,
|
||||
#img2img_seed_row > div,
|
||||
#txt2img_subseed_row > div,
|
||||
#img2img_subseed_row > div {
|
||||
min-width:90px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
#img2img_gallery, #txt2img_gallery {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
div.svelte-10ogue4>:not(.absolute) {
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
|
||||
#img2img_tools, #txt2img_tools {
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.dark .dark\:hover\:border-gray-600>div.cursor-pointer+div {
|
||||
margin-top: 4px !important;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Sliders Scrollbar */
|
||||
/* Scroll mask fader*/
|
||||
|
||||
#img2img_settings::before,
|
||||
#txt2img_settings::before {
|
||||
pointer-events: none;
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
height: calc(100vh - 288px);
|
||||
top: 88px;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: linear-gradient(0deg, rgb(26 26 26), transparent 2%, transparent 98%, rgb(26 26 26) 100%);
|
||||
}
|
||||
|
||||
/* Sliders Scrollbars */
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
#img2img_settings_scroll::-webkit-scrollbar,
|
||||
#txt2img_settings_scroll::-webkit-scrollbar {
|
||||
width: 12px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
box-shadow: inset 0 0 10px 10px #1a1a1a;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user