diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 201 |
1 files changed, 160 insertions, 41 deletions
@@ -8,6 +8,7 @@ --checkbox-label-gap: 0.25em 0.1em;
--section-header-text-size: 12pt;
--block-background-fill: transparent;
+
}
.block.padded:not(.gradio-accordion) {
@@ -42,12 +43,15 @@ div.form{ .block.gradio-radio,
.block.gradio-checkboxgroup,
.block.gradio-number,
-.block.gradio-colorpicker
-{
+.block.gradio-colorpicker {
border-width: 0 !important;
box-shadow: none !important;
}
+div.gradio-group, div.styler{
+ border-width: 0 !important;
+ background: none;
+}
.gap.compact{
padding: 0;
gap: 0.2em 0;
@@ -133,6 +137,16 @@ a{ cursor: pointer;
}
+/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reason. */
+div.gradio-container, .block.gradio-textbox, div.gradio-group, div.gradio-dropdown{
+ overflow: visible !important;
+}
+
+/* align-items isn't enough and elements may overflow in Safari. */
+.unequal-height {
+ align-content: flex-start;
+}
+
/* general styled components */
@@ -157,16 +171,6 @@ a{ color: var(--button-secondary-text-color-hover);
}
-.checkboxes-row{
- margin-bottom: 0.5em;
- margin-left: 0em;
-}
-.checkboxes-row > div{
- flex: 0;
- white-space: nowrap;
- min-width: auto;
-}
-
button.custom-button{
border-radius: var(--button-large-radius);
padding: var(--button-large-padding);
@@ -183,6 +187,13 @@ button.custom-button{ text-align: center;
}
+div.block.gradio-accordion {
+ border: 1px solid var(--block-border-color) !important;
+ border-radius: 8px !important;
+ margin: 2px 0;
+ padding: 8px 8px;
+}
+
/* txt2img/img2img specific */
@@ -223,10 +234,14 @@ button.custom-button{ }
[id$=_subseed_show] label{
- margin-bottom: 0.5em;
+ margin-bottom: 0.65em;
align-self: end;
}
+[id$=_seed_extras] > div{
+ gap: 0.5em;
+}
+
.html-log .comments{
padding-top: 0.5em;
}
@@ -272,8 +287,8 @@ button.custom-button{ }
}
-#txt2img_gallery img, #img2img_gallery img, #extras_gallery img{
- object-fit: scale-down;
+.gradio-gallery .thumbnails img {
+ object-fit: scale-down !important;
}
#txt2img_actions_column, #img2img_actions_column {
gap: 0.5em;
@@ -313,12 +328,6 @@ button.custom-button{ border-radius: 0 0.5rem 0.5rem 0;
}
-#txtimg_hr_finalres{
- min-height: 0 !important;
- padding: .625rem .75rem;
- margin-left: -0.75em
-}
-
#img2img_scale_resolution_preview.block{
display: flex;
align-items: end;
@@ -342,7 +351,7 @@ button.custom-button{ }
div.dimensions-tools{
- min-width: 0 !important;
+ min-width: 1.6em !important;
max-width: fit-content;
flex-direction: column;
place-content: center;
@@ -359,8 +368,8 @@ div#extras_scale_to_tab div.form{ z-index: 5;
}
-.image-buttons button{
- min-width: auto;
+.image-buttons > .form{
+ justify-content: center;
}
.infotext {
@@ -381,18 +390,21 @@ div#extras_scale_to_tab div.form{ /* settings */
#quicksettings {
- width: fit-content;
align-items: end;
}
#quicksettings > div, #quicksettings > fieldset{
- max-width: 24em;
- min-width: 24em;
+ max-width: 36em;
+ width: fit-content;
+ flex: 0 1 fit-content;
padding: 0;
border: none;
box-shadow: none;
background: none;
}
+#quicksettings > div.gradio-dropdown{
+ min-width: 24em !important;
+}
#settings{
display: block;
@@ -482,14 +494,25 @@ table.popup-table .link{ font-size: 18pt;
}
+#settings .settings-info{
+ max-width: 48em;
+ border: 1px dotted #777;
+ margin: 0;
+ padding: 1em;
+}
+
/* live preview */
.progressDiv{
- position: relative;
+ position: absolute;
height: 20px;
background: #b4c0cc;
border-radius: 3px !important;
- margin-bottom: -3px;
+ top: -20px;
+}
+
+[id$=_results].mobile{
+ margin-top: 28px;
}
.dark .progressDiv{
@@ -514,19 +537,16 @@ table.popup-table .link{ .livePreview{
position: absolute;
z-index: 300;
- background-color: white;
- margin: -4px;
-}
-
-.dark .livePreview{
- background-color: rgb(17 24 39 / var(--tw-bg-opacity));
+ background: var(--background-fill-primary);
+ width: 100%;
+ height: 100%;
}
.livePreview img{
position: absolute;
object-fit: contain;
width: 100%;
- height: 100%;
+ height: calc(100% - 60px); /* to match gradio's height */
}
/* fullscreen popup (ie in Lora's (i) button) */
@@ -595,13 +615,19 @@ table.popup-table .link{ display: flex;
gap: 1em;
padding: 1em;
- background-color: rgba(0,0,0,0.2);
+ background-color:rgba(0,0,0,0);
+ z-index: 1;
+ transition: 0.2s ease background-color;
+}
+.modalControls:hover {
+ background-color:rgba(0,0,0,0.9);
}
.modalClose {
margin-left: auto;
}
.modalControls span{
color: white;
+ text-shadow: 0px 0px 0.25em black;
font-size: 35px;
font-weight: bold;
cursor: pointer;
@@ -626,6 +652,13 @@ table.popup-table .link{ min-height: 0;
}
+#modalImage{
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translateX(-50%) translateY(-50%);
+}
+
.modalPrev,
.modalNext {
cursor: pointer;
@@ -767,9 +800,14 @@ footer { /* extra networks UI */
.extra-network-cards{
- height: 725px;
- overflow: scroll;
+ height: calc(100vh - 24rem);
+ overflow: clip scroll;
resize: vertical;
+ min-height: 52rem;
+}
+
+.extra-networks > div.tab-nav{
+ min-height: 3.4rem;
}
.extra-networks > div > [id *= '_extra_']{
@@ -784,10 +822,12 @@ footer { margin: 0 0.15em;
}
.extra-networks .tab-nav .search,
-.extra-networks .tab-nav .sort{
- display: inline-block;
+.extra-networks .tab-nav .sort,
+.extra-networks .tab-nav .show-dirs
+{
margin: 0.3em;
align-self: center;
+ width: auto;
}
.extra-networks .tab-nav .search {
@@ -823,6 +863,7 @@ footer { position: absolute;
color: white;
right: 0;
+ z-index: 1
}
.extra-network-cards .card:hover .button-row{
display: flex;
@@ -972,3 +1013,81 @@ div.block.gradio-box.edit-user-metadata { .edit-user-metadata-buttons{
margin-top: 1.5em;
}
+
+
+
+
+div.block.gradio-box.popup-dialog, .popup-dialog {
+ width: 56em;
+ background: var(--body-background-fill);
+ padding: 2em !important;
+}
+
+div.block.gradio-box.popup-dialog > div:last-child, .popup-dialog > div:last-child{
+ margin-top: 1em;
+}
+
+div.block.input-accordion{
+
+}
+
+.input-accordion-extra{
+ flex: 0 0 auto !important;
+ margin: 0 0.5em 0 auto;
+}
+
+div.accordions > div.input-accordion{
+ min-width: fit-content !important;
+}
+
+div.accordions > div.gradio-accordion .label-wrap span{
+ white-space: nowrap;
+ margin-right: 0.25em;
+}
+
+div.accordions{
+ gap: 0.5em;
+}
+
+div.accordions > div.input-accordion.input-accordion-open{
+ flex: 1 auto;
+ flex-flow: column;
+}
+
+
+/* sticky right hand columns */
+
+#img2img_results, #txt2img_results, #extras_results {
+ position: sticky;
+ top: 0.5em;
+}
+
+body.resizing {
+ cursor: col-resize !important;
+}
+
+body.resizing * {
+ pointer-events: none !important;
+}
+
+body.resizing .resize-handle {
+ pointer-events: initial !important;
+}
+
+.resize-handle {
+ position: relative;
+ cursor: col-resize;
+ grid-column: 2 / 3;
+ min-width: 16px !important;
+ max-width: 16px !important;
+ height: 100%;
+}
+
+.resize-handle::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 7.5px;
+ border-left: 1px dashed var(--border-color-primary);
+}
|