Public/automatic
1
0
Fork 0
mirror of https://github.com/vladmandic/automatic synced 2026-09-15 02:58:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

css typos

Browse Source
This commit is contained in:
Vladimir Mandic
2024-04-12 13:20:45 -04:00
parent 0840537b6c
commit bb0f2365f1
2 changed files with 45 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
javascript/sdnext.css
+24 -24
View File
@@ -65,7 +65,7 @@ input[type='color'] { width: 64px; height: 32px; }
.group-exetensions { max-width: 48vw; }
.group-scripts { max-width: 48vw; margin-top: 1em; padding-top: 0.5em; border-top: 2px solid var(--button-secondary-border-color) !important; }
.group-scripts > div { max-width: 48vw; }
button.custom-button{ border-radius: var(--button-large-radius); padding: var(--button-large-padding); font-weight: var(--button-large-text-weight); border: var(--button-border-width) solid var(--button-secondary-border-color);
button.custom-button { border-radius: var(--button-large-radius); padding: var(--button-large-padding); font-weight: var(--button-large-text-weight); border: var(--button-border-width) solid var(--button-secondary-border-color);
background: var(--button-secondary-background-fill); color: var(--button-secondary-text-color); font-size: var(--text-lg);
display: inline-flex; justify-content: center; align-items: center; transition: var(--button-transition); box-shadow: var(--button-shadow); text-align: center; }
@@ -106,16 +106,16 @@ button.custom-button{ border-radius: var(--button-large-radius); padding: var(--
.interrogate-col { min-width: 0 !important; max-width: fit-content; margin-right: var(--spacing-xxl); }
.interrogate-col>button { flex: 1; width: 7em; max-height: 84px; }
#sampler_selection_img2img { margin-top: 1em; }
#txtimg_hr_finalres{ min-height: 0 !important; }
#txtimg_hr_finalres { min-height: 0 !important; }
#img2img_scale_resolution_preview.block{ display: flex; align-items: end; }
#txtimg_hr_finalres .resolution, #img2img_scale_resolution_preview .resolution{ font-weight: bold; }
div#extras_scale_to_tab div.form{ flex-direction: row; }
div#extras_scale_to_tab div.form { flex-direction: row; }
#img2img_unused_scale_by_slider { visibility: hidden; width: 0.5em; max-width: 0.5em; min-width: 0.5em; }
.inactive{ opacity: 0.5; }
div#extras_scale_to_tab div.form{ flex-direction: row; }
div#extras_scale_to_tab div.form { flex-direction: row; }
#mode_img2img .gradio-image>div.fixed-height, #mode_img2img .gradio-image>div.fixed-height img{ height: 480px !important; max-height: 480px !important; min-height: 480px !important; }
#img2img_sketch, #img2maskimg, #inpaint_sketch { overflow: overlay !important; resize: auto; background: var(--panel-background-fill); z-index: 5; }
.image-buttons button{ min-width: auto; }
.image-buttons button { min-width: auto; }
.infotext { overflow-wrap: break-word; line-height: 1.5em; font-size: 0.95em !important; }
.infotext > p { padding-left: 1em; text-indent: -1em; white-space: pre-wrap; color: var(--block-info-text-color) !important; }
.tooltip { display: block; position: fixed; top: 1em; right: 1em; padding: 0.5em; background: var(--input-background-fill); color: var(--body-text-color); border: 1pt solid var(--button-primary-border-color);
@@ -148,16 +148,16 @@ div#extras_scale_to_tab div.form{ flex-direction: row; }
.licenses { display: block !important; }
/* live preview */
.progressDiv{ position: relative; height: 20px; background: #b4c0cc; margin-bottom: -3px; }
.dark .progressDiv{ background: #424c5b; }
.progressDiv .progress{ width: 0%; height: 20px; background: #0060df; color: white; font-weight: bold; line-height: 20px; padding: 0 8px 0 0; text-align: right; overflow: visible; white-space: nowrap; padding: 0 0.5em; }
.progressDiv { position: relative; height: 20px; background: #b4c0cc; margin-bottom: -3px; }
.dark .progressDiv { background: #424c5b; }
.progressDiv .progress { width: 0%; height: 20px; background: #0060df; color: white; font-weight: bold; line-height: 20px; padding: 0 8px 0 0; text-align: right; overflow: visible; white-space: nowrap; padding: 0 0.5em; }
.livePreview { position: absolute; z-index: 50; background-color: transparent; width: -moz-available; width: -webkit-fill-available; }
.livePreview img { position: absolute; object-fit: contain; width: 100%; height: 100%; }
.dark .livePreview { background-color: rgb(17 24 39 / var(--tw-bg-opacity)); }
.popup-metadata { color: white; background: #0000; display: inline-block; white-space: pre-wrap; font-size: var(--text-xxs); }
/* fullpage image viewer */
#lightboxModal{ display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(20, 20, 20, 0.75); backdrop-filter: blur(6px);
#lightboxModal { display: none; position: fixed; z-index: 1001; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(20, 20, 20, 0.75); backdrop-filter: blur(6px);
user-select: none; -webkit-user-select: none; flex-direction: row; font-family: 'NotoSans';}
.modalControls { display: flex; justify-content: space-evenly; background-color: transparent; position: absolute; width: 99%; z-index: 1; }
.modalControls:hover { background-color: #50505050; }
@@ -166,7 +166,7 @@ div#extras_scale_to_tab div.form{ flex-direction: row; }
.lightboxModalPreviewZone { display: flex; width: 100%; height: 100%; }
.lightboxModalPreviewZone:focus-visible { outline: none; }
.lightboxModalPreviewZone>img { display: block; margin: auto; width: auto; }
.lightboxModalPreviewZone>img.modalImageFullscreen{ object-fit: contain; height: 100%; width: 100%; min-height: 0; background: transparent; }
.lightboxModalPreviewZone>img.modalImageFullscreen { object-fit: contain; height: 100%; width: 100%; min-height: 0; background: transparent; }
table.settings-value-table { background: white; border-collapse: collapse; margin: 1em; border: var(--spacing-sm) solid white; }
table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-width: 36em; }
.modalPrev, .modalNext { cursor: pointer; position: relative; z-index: 1; top: 0; width: auto; height: 100vh; line-height: 100vh; text-align: center; padding: 16px;
@@ -182,19 +182,19 @@ table.settings-value-table td { padding: 0.4em; border: 1px solid #ccc; max-widt
.context-menu-items a:hover { background: var(--highlight-color) }
/* extensions */
#tab_extensions table, #tab_config table{ border-collapse: collapse; }
#tab_extensions table, #tab_config table { border-collapse: collapse; }
#tab_extensions table td, #tab_extensions table th, #tab_config table td, #tab_config table th { border: 1px solid #ccc; padding: 0.25em 0.5em; }
#tab_extensions table tr:hover, #tab_config table tr:hover { background-color: var(--neutral-500) !important; }
#tab_extensions table input[type="checkbox"] { margin-right: 0.5em; appearance: checkbox; }
#tab_extensions button{ max-width: 16em; }
#tab_extensions input[disabled="disabled"]{ opacity: 0.5; }
.extension-tag{ font-weight: bold; font-size: var(--text-sm); }
#tab_extensions input[disabled="disabled"] { opacity: 0.5; }
.extension-tag { font-weight: bold; font-size: var(--text-sm); }
.extension-button { font-size: var(--text-sm) !important; width: 6em; }
#extensions .name{ font-size: var(--text-lg) }
#extensions .type{ opacity: 0.5; font-size: var(--text-sm); text-align: center; }
#extensions .version{ opacity: 0.7; }
#extensions .info{ margin: 0; }
#extensions .date{ opacity: 0.85; font-size: var(--text-sm); }
#extensions .name { font-size: var(--text-lg) }
#extensions .type { opacity: 0.5; font-size: var(--text-sm); text-align: center; }
#extensions .version { opacity: 0.7; }
#extensions .info { margin: 0; }
#extensions .date { opacity: 0.85; font-size: var(--text-sm); }
/* extra networks */
#txt2img_extra_networks, #img2img_extra_networks, #control_extra_networks { width: 0; }
@@ -347,20 +347,20 @@ div:has(>#tab-gallery-folders) { flex-grow: 0 !important; background-color: var(
}
@media (min-width: 400px) { /* Screens larger than 400px wide */
:root, .light, .dark {--left-column: 50%;}
#txt2img_results, #extras_results, #txt2im g_footer p {text-wrap: wrap; max-width: 100% !important; } /* maintain side by side split on larger mobile displays for from text */
#txt2img_results, #extras_results, #txt2im g_footer p { text-wrap: wrap; max-width: 100% !important; } /* maintain side by side split on larger mobile displays for from text */
}
#scripts_alwayson_txt2img div, #scripts_alwayson_img2img div { max-width: 100%; }
#txt2img_prompt_container, #img2img_prompt_container, #control_prompt_container { resize: vertical !important; }
#txt2img_generate_box, #txt2img_enqueue_wrapper { min-width: 100% !important;} /* make generate and enqueue buttons take up the entire width of their rows. */
#img2img_toprow>div.gradio-column {flex-grow: 1 !important;} /*make interrogate buttons take up appropriate space. */
#img2img_actions_column {display: flex; min-width: fit-content !important; flex-direction: row;justify-content: space-evenly; align-items: center;}
#img2img_toprow>div.gradio-column { flex-grow: 1 !important;} /*make interrogate buttons take up appropriate space. */
#img2img_actions_column { display: flex; min-width: fit-content !important; flex-direction: row;justify-content: space-evenly; align-items: center;}
#txt2img_generate_box, #img2img_generate_box, #txt2img_enqueue_wrapper,#img2img_enqueue_wrapper {display: flex;flex-direction: column;height: 4em !important;align-items: stretch;justify-content: space-evenly;}
#img2img_interface, #img2img_results, #img2img_footer p {text-wrap: wrap; min-width: 100% !important; max-width: 100% !important;} /* maintain single column for from image operations on larger mobile devices */
#img2img_interface, #img2img_results, #img2img_footer p { text-wrap: wrap; min-width: 100% !important; max-width: 100% !important;} /* maintain single column for from image operations on larger mobile devices */
#img2img_sketch, #img2maskimg, #inpaint_sketch {display: flex; overflow: auto !important; resize: none !important; } /* fix inpaint image display being too large for mobile displays */
#img2maskimg canvas { width: auto !important; max-height: 100% !important; height: auto !important; }
#txt2img_sampler, #txt2img_batch, #txt2img_seed_group, #txt2img_advanced, #txt2img_second_pass, #img2img_sampling_group, #img2img_resize_group, #img2img_batch_group, #img2img_seed_group, #img2img_denoise_group, #img2img_advanced_group { width: 100% !important; } /* fix from text/image UI elements to prevent them from moving around within the UI */
#img2img_resize_group .gradio-radio>div { display: flex; flex-direction: column; width: unset !important; }
#inpaint_controls div {display:flex;flex-direction: row;}
#inpaint_controls div { display:flex;flex-direction: row;}
#inpaint_controls .gradio-radio>div { display: flex; flex-direction: column !important; }
#models_tab { flex-direction: column-reverse !important; } /* move image preview/output on models page to bottom of page */
#enqueue_keyboard_shortcut_modifiers, #enqueue_keyboard_shortcut_key div { max-width: 40% !important;} /* fix settings for agent scheduler */
@@ -372,7 +372,7 @@ div:has(>#tab-gallery-folders) { flex-grow: 0 !important; background-color: var(
.gradio-dropdown ul.options {max-height: 41vh !important; } /* adjust dropdown size to make them easier to select individual items on mobile. */
.gradio-dropdown ul.options li.item {height: 40px !important; display: flex; align-items: center;}
.gradio-slider input[type="number"] { width: 4em; font-size: var(--text-xs); height: 16px; text-align: center; } /* adjust slider input fields as they were too large for mobile devices. */
#txt2img_settings .block .padded:not(.gradio-accordion) {padding: 0 !important;margin-right: 0; min-width: 100% !important; width:100% !important;}
#txt2img_settings .block .padded:not(.gradio-accordion) { padding: 0 !important;margin-right: 0; min-width: 100% !important; width:100% !important;}
#script_txt2img_prompts_from_file_prompt_txt, #script_img2img_prompts_from_file_prompt_txt, #script_control2img_prompts_from_file_prompt_txt { resize: vertical !important; }
}
}