diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 199 |
1 files changed, 159 insertions, 40 deletions
@@ -2,6 +2,14 @@ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');
+
+/* temporary fix to hide gradio crop tool until it's fixed https://github.com/gradio-app/gradio/issues/3810 */
+
+div.gradio-image button[aria-label="Edit"] {
+ display: none;
+}
+
+
/* general gradio fixes */
:root, .dark{
@@ -75,8 +83,10 @@ div.compact{ white-space: nowrap;
}
-.gradio-dropdown ul.options li.item {
- padding: 0.05em 0;
+@media (pointer:fine) {
+ .gradio-dropdown ul.options li.item {
+ padding: 0.05em 0;
+ }
}
.gradio-dropdown ul.options li.item.selected {
@@ -137,11 +147,16 @@ a{ cursor: pointer;
}
-/* gradio 3.39 puts a lot of overflow: hidden all over the place for an unknown reqasaon. */
-.block.gradio-textbox, div.gradio-group, div.gradio-group div, div.gradio-dropdown{
+/* 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 */
@@ -166,16 +181,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 !important;
-}
-
button.custom-button{
border-radius: var(--button-large-radius);
padding: var(--button-large-padding);
@@ -192,13 +197,18 @@ button.custom-button{ text-align: center;
}
-div.gradio-accordion {
+div.block.gradio-accordion {
border: 1px solid var(--block-border-color) !important;
border-radius: 8px !important;
margin: 2px 0;
padding: 8px 8px;
}
+input[type="checkbox"].input-accordion-checkbox{
+ vertical-align: sub;
+ margin-right: 0.5em;
+}
+
/* txt2img/img2img specific */
@@ -239,10 +249,14 @@ div.gradio-accordion { }
[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;
}
@@ -282,14 +296,21 @@ div.gradio-accordion { min-height: 4.5em;
}
+#txt2img_generate, #img2img_generate {
+ min-height: 4.5em;
+}
+.generate-box-compact #txt2img_generate, .generate-box-compact #img2img_generate {
+ min-height: 3em;
+}
+
@media screen and (min-width: 2500px) {
#txt2img_gallery, #img2img_gallery {
min-height: 768px;
}
}
-#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;
@@ -352,7 +373,7 @@ div.gradio-accordion { }
div.dimensions-tools{
- min-width: 0 !important;
+ min-width: 1.6em !important;
max-width: fit-content;
flex-direction: column;
place-content: center;
@@ -369,8 +390,8 @@ div#extras_scale_to_tab div.form{ z-index: 5;
}
-.image-buttons button{
- min-width: auto;
+.image-buttons > .form{
+ justify-content: center;
}
.infotext {
@@ -389,21 +410,32 @@ div#extras_scale_to_tab div.form{ min-width: 0.5em;
}
+div.toprow-compact-stylerow{
+ margin: 0.5em 0;
+}
+
+div.toprow-compact-tools{
+ min-width: fit-content !important;
+ max-width: fit-content;
+}
+
/* settings */
#quicksettings {
- width: fit-content;
align-items: end;
}
#quicksettings > div, #quicksettings > fieldset{
- max-width: 24em;
- min-width: 24em;
- 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;
@@ -412,6 +444,7 @@ div#extras_scale_to_tab div.form{ #settings > div{
border: none;
margin-left: 10em;
+ padding: 0 var(--spacing-xl);
}
#settings > div.tab-nav{
@@ -426,6 +459,7 @@ div#extras_scale_to_tab div.form{ border: none;
text-align: left;
white-space: initial;
+ padding: 4px;
}
#settings_result{
@@ -503,11 +537,21 @@ table.popup-table .link{ /* live preview */
.progressDiv{
- position: relative;
+ position: absolute;
height: 20px;
background: #b4c0cc;
border-radius: 3px !important;
- margin-bottom: -3px;
+ top: -14px;
+ left: 0px;
+ width: 100%;
+}
+
+.progress-container{
+ position: relative;
+}
+
+[id$=_results].mobile{
+ margin-top: 28px;
}
.dark .progressDiv{
@@ -532,19 +576,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) */
@@ -566,7 +607,6 @@ table.popup-table .link{ width: 100%;
height: 100%;
overflow: auto;
- background-color: rgba(20, 20, 20, 0.95);
}
.global-popup *{
@@ -575,9 +615,6 @@ table.popup-table .link{ .global-popup-close:before {
content: "×";
-}
-
-.global-popup-close{
position: fixed;
right: 0.25em;
top: 0;
@@ -586,10 +623,20 @@ table.popup-table .link{ font-size: 32pt;
}
+.global-popup-close{
+ position: fixed;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(20, 20, 20, 0.95);
+}
+
.global-popup-inner{
display: inline-block;
margin: auto;
padding: 2em;
+ z-index: 1001;
}
/* fullpage image viewer */
@@ -611,15 +658,24 @@ table.popup-table .link{ .modalControls {
display: flex;
+ position: absolute;
+ right: 0px;
+ left: 0px;
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;
@@ -784,6 +840,10 @@ footer { /* extra networks UI */
+.extra-page .prompt{
+ margin: 0 0 0.5em 0;
+}
+
.extra-network-cards{
height: calc(100vh - 24rem);
overflow: clip scroll;
@@ -848,6 +908,7 @@ footer { position: absolute;
color: white;
right: 0;
+ z-index: 1
}
.extra-network-cards .card:hover .button-row{
display: flex;
@@ -985,6 +1046,8 @@ div.block.gradio-box.edit-user-metadata { .edit-user-metadata .file-metadata th, .edit-user-metadata .file-metadata td{
padding: 0.3em 1em;
+ overflow-wrap: anywhere;
+ word-break: break-word;
}
.edit-user-metadata .wrap.translucent{
@@ -1012,10 +1075,66 @@ div.block.gradio-box.popup-dialog > div:last-child, .popup-dialog > div:last-chi }
div.block.input-accordion{
- margin-bottom: 0.4em;
+
}
.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);
+}
|