diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 138 |
1 files changed, 124 insertions, 14 deletions
@@ -1,3 +1,6 @@ +/* temporary fix to load default gradio font in frontend instead of backend */
+
+@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
/* general gradio fixes */
@@ -7,7 +10,7 @@ --block-background-fill: transparent;
}
-.block.padded{
+.block.padded:not(.gradio-accordion) {
padding: 0 !important;
}
@@ -54,10 +57,6 @@ div.compact{ gap: 1em;
}
-.gradio-dropdown ul.options{
- z-index: 3000;
-}
-
.gradio-dropdown label span:not(.has-info),
.gradio-textbox label span:not(.has-info),
.gradio-number label span:not(.has-info)
@@ -65,11 +64,30 @@ div.compact{ margin-bottom: 0;
}
+.gradio-dropdown ul.options{
+ z-index: 3000;
+ min-width: fit-content;
+ max-width: inherit;
+ white-space: nowrap;
+}
+
+.gradio-dropdown ul.options li.item {
+ padding: 0.05em 0;
+}
+
+.gradio-dropdown ul.options li.item.selected {
+ background-color: var(--neutral-100);
+}
+
+.dark .gradio-dropdown ul.options li.item.selected {
+ background-color: var(--neutral-900);
+}
+
.gradio-dropdown div.wrap.wrap.wrap.wrap{
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
}
-.gradio-dropdown .wrap-inner.wrap-inner.wrap-inner{
+.gradio-dropdown:not(.multiselect) .wrap-inner.wrap-inner.wrap-inner{
flex-wrap: unset;
}
@@ -110,6 +128,10 @@ div.gradio-html.min{ text-decoration: none;
}
+a{
+ font-weight: bold;
+ cursor: pointer;
+}
/* general styled components */
@@ -123,6 +145,18 @@ div.gradio-html.min{ border-radius: 0.5em;
}
+.gradio-button.secondary-down{
+ background: var(--button-secondary-background-fill);
+ color: var(--button-secondary-text-color);
+}
+.gradio-button.secondary-down, .gradio-button.secondary-down:hover{
+ box-shadow: 1px 1px 1px rgba(0,0,0,0.25) inset, 0px 0px 3px rgba(0,0,0,0.15) inset;
+}
+.gradio-button.secondary-down:hover{
+ background: var(--button-secondary-background-fill-hover);
+ color: var(--button-secondary-text-color-hover);
+}
+
.checkboxes-row{
margin-bottom: 0.5em;
margin-left: 0em;
@@ -219,7 +253,7 @@ button.custom-button{ }
}
-#txt2img_gallery img, #img2img_gallery img{
+#txt2img_gallery img, #img2img_gallery img, #extras_gallery img{
object-fit: scale-down;
}
#txt2img_actions_column, #img2img_actions_column {
@@ -266,7 +300,12 @@ button.custom-button{ margin-left: -0.75em
}
-#txtimg_hr_finalres .resolution{
+#img2img_scale_resolution_preview.block{
+ display: flex;
+ align-items: end;
+}
+
+#txtimg_hr_finalres .resolution, #img2img_scale_resolution_preview .resolution{
font-weight: bold;
}
@@ -285,10 +324,15 @@ div.dimensions-tools{ align-content: center;
}
-#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;
+div#extras_scale_to_tab div.form{
+ flex-direction: row;
+}
+
+#img2img_sketch, #img2maskimg, #inpaint_sketch {
+ overflow: overlay !important;
+ resize: auto;
+ background: var(--panel-background-fill);
+ z-index: 5;
}
.image-buttons button{
@@ -299,13 +343,24 @@ div.dimensions-tools{ overflow-wrap: break-word;
}
+#img2img_column_batch{
+ align-self: end;
+ margin-bottom: 0.9em;
+}
+
+#img2img_unused_scale_by_slider{
+ visibility: hidden;
+ width: 0.5em;
+ max-width: 0.5em;
+ min-width: 0.5em;
+}
+
/* settings */
#quicksettings {
- width: fit-content;
+ align-items: end;
}
#quicksettings > div, #quicksettings > fieldset{
- max-width: 24em;
min-width: 24em;
padding: 0;
border: none;
@@ -341,6 +396,42 @@ div.dimensions-tools{ margin: 0 1.2em;
}
+table.settings-value-table{
+ background: white;
+ border-collapse: collapse;
+ margin: 1em;
+ border: 4px solid white;
+}
+
+table.settings-value-table td{
+ padding: 0.4em;
+ border: 1px solid #ccc;
+ max-width: 36em;
+}
+
+.ui-defaults-none{
+ color: #aaa !important;
+}
+
+#settings span{
+ color: var(--body-text-color);
+}
+
+#settings .gradio-textbox, #settings .gradio-slider, #settings .gradio-number, #settings .gradio-dropdown, #settings .gradio-checkboxgroup, #settings .gradio-radio{
+ margin-top: 0.75em;
+}
+
+#settings span .settings-comment {
+ display: inline
+}
+
+.settings-comment a{
+ text-decoration: underline;
+}
+
+.settings-comment .info{
+ opacity: 0.75;
+}
/* live preview */
.progressDiv{
@@ -478,6 +569,8 @@ div.dimensions-tools{ #lightboxModal > img.modalImageFullscreen{
object-fit: contain;
height: 100%;
+ width: 100%;
+ min-height: 0;
}
.modalPrev,
@@ -507,6 +600,17 @@ div.dimensions-tools{ background-color: rgba(0, 0, 0, 0.8);
}
+#imageARPreview {
+ position: absolute;
+ top: 0px;
+ left: 0px;
+ border: 2px solid red;
+ background: rgba(255, 0, 0, 0.3);
+ z-index: 900;
+ pointer-events: none;
+ display: none;
+}
+
/* context menu (ie for the generate button) */
#context-menu{
@@ -596,6 +700,12 @@ footer { /* extra networks UI */
+.extra-network-cards{
+ height: 725px;
+ overflow: scroll;
+ resize: vertical;
+}
+
.extra-networks > div > [id *= '_extra_']{
margin: 0.3em;
}
|