diff options
Diffstat (limited to 'style.css')
| -rw-r--r-- | style.css | 203 |
1 files changed, 137 insertions, 66 deletions
@@ -20,7 +20,7 @@ padding-right: 0.25em;
margin: 0.1em 0;
opacity: 0%;
- cursor: default;
+ cursor: default;
}
.output-html p {margin: 0 0.5em;}
@@ -114,6 +114,7 @@ min-width: unset !important;
flex-grow: 0 !important;
padding: 0.4em 0;
+ gap: 0;
}
#roll_col > button {
@@ -141,10 +142,15 @@ min-width: 8em !important;
}
-#txt2img_style_index, #txt2img_style2_index, #img2img_style_index, #img2img_style2_index{
+#txt2img_styles, #img2img_styles{
margin-top: 1em;
}
+#txt2img_styles ul, #img2img_styles ul{
+ max-height: 35em;
+ z-index: 2000;
+}
+
.gr-form{
background: transparent;
}
@@ -154,10 +160,14 @@ margin-bottom: 0;
}
-#toprow div{
+#toprow div.gr-box, #toprow div.gr-form{
border: none;
gap: 0;
background: transparent;
+ box-shadow: none;
+}
+#toprow div{
+ gap: 0;
}
#resize_mode{
@@ -221,7 +231,10 @@ fieldset span.text-gray-500, .gr-block.gr-box span.text-gray-500, label.block s .dark fieldset span.text-gray-500, .dark .gr-block.gr-box span.text-gray-500, .dark label.block span{
background-color: rgb(31, 41, 55);
- box-shadow: 6px 0 6px 0px rgb(31, 41, 55), -6px 0 6px 0px rgb(31, 41, 55);
+ box-shadow: none;
+ border: 1px solid rgba(128, 128, 128, 0.1);
+ border-radius: 6px;
+ padding: 0.1em 0.5em;
}
#txt2img_column_batch, #img2img_column_batch{
@@ -286,45 +299,52 @@ input[type="range"]{ }
/* more gradio's garbage cleanup */
-.min-h-\[4rem\] {
- min-height: unset !important;
+.min-h-\[4rem\] { min-height: unset !important; }
+.min-h-\[6rem\] { min-height: unset !important; }
+
+.progressDiv{
+ position: absolute;
+ height: 20px;
+ top: -20px;
+ background: #b4c0cc;
+ border-radius: 3px !important;
}
-#txt2img_progressbar, #img2img_progressbar, #ti_progressbar{
- position: absolute;
- z-index: 1000;
- right: 0;
- padding-left: 5px;
- padding-right: 5px;
- display: block;
+.dark .progressDiv{
+ background: #424c5b;
}
-#txt2img_progress_row, #img2img_progress_row{
- margin-bottom: 10px;
- margin-top: -18px;
+.progressDiv .progress{
+ width: 0%;
+ height: 20px;
+ background: #0060df;
+ color: white;
+ font-weight: bold;
+ line-height: 20px;
+ padding: 0 8px 0 0;
+ text-align: right;
+ border-radius: 3px;
+ overflow: visible;
+ white-space: nowrap;
+ padding: 0 0.5em;
}
-.progressDiv{
- width: 100%;
- height: 20px;
- background: #b4c0cc;
- border-radius: 8px;
+.livePreview{
+ position: absolute;
+ z-index: 300;
+ background-color: white;
+ margin: -4px;
}
-.dark .progressDiv{
- background: #424c5b;
+.dark .livePreview{
+ background-color: rgb(17 24 39 / var(--tw-bg-opacity));
}
-.progressDiv .progress{
- width: 0%;
- height: 20px;
- background: #0060df;
- color: white;
- font-weight: bold;
- line-height: 20px;
- padding: 0 8px 0 0;
- text-align: right;
- border-radius: 8px;
+.livePreview img{
+ position: absolute;
+ object-fit: contain;
+ width: 100%;
+ height: 100%;
}
#lightboxModal{
@@ -371,7 +391,7 @@ input[type="range"]{ grid-area: tile;
}
-.modalClose,
+.modalClose,
.modalZoom,
.modalTileImage {
color: white;
@@ -450,23 +470,25 @@ input[type="range"]{ display:none
}
-#txt2img_interrupt, #img2img_interrupt{
- position: absolute;
- width: 50%;
- height: 72px;
- background: #b4c0cc;
- border-radius: 0px;
- display: none;
+#txt2img_generate_box, #img2img_generate_box{
+ position: relative;
}
+#txt2img_interrupt, #img2img_interrupt, #txt2img_skip, #img2img_skip{
+ position: absolute;
+ width: 50%;
+ height: 100%;
+ background: #b4c0cc;
+ display: none;
+}
+
+#txt2img_interrupt, #img2img_interrupt{
+ left: 0;
+ border-radius: 0.5rem 0 0 0.5rem;
+}
#txt2img_skip, #img2img_skip{
- position: absolute;
- width: 50%;
- right: 0px;
- height: 72px;
- background: #b4c0cc;
- border-radius: 0px;
- display: none;
+ right: 0;
+ border-radius: 0 0.5rem 0.5rem 0;
}
.red {
@@ -508,30 +530,21 @@ input[type="range"]{ gap: 0.4em;
}
-#quicksettings > div{
- border: none;
- background: none;
- flex: unset;
- gap: 1em;
-}
-
-#quicksettings > div > div{
- max-width: 32em;
+#quicksettings > div, #quicksettings > fieldset{
+ max-width: 24em;
min-width: 24em;
padding: 0;
+ border: none;
+ box-shadow: none;
+ background: none;
}
-#quicksettings > div > div > div > div > label > span {
+#quicksettings > div > div > div > label > span {
position: relative;
margin-right: 9em;
margin-bottom: -1em;
}
-#quicksettings > div > div > label > span {
- position: relative;
- margin-bottom: -1em;
-}
-
canvas[key="mask"] {
z-index: 12 !important;
filter: invert();
@@ -621,9 +634,23 @@ canvas[key="mask"] { max-width: 2.5em;
min-width: 2.5em !important;
height: 2.4em;
- margin: 0.55em 0;
+ margin: 1.6em 0.7em 0.55em 0;
+}
+
+#tab_modelmerger .gr-button-tool{
+ margin: 0.6em 0em 0.55em 0;
}
+#modelmerger_results_container{
+ margin-top: 1em;
+ overflow: visible;
+}
+
+#modelmerger_models{
+ gap: 0;
+}
+
+
#quicksettings .gr-button-tool{
margin: 0;
}
@@ -666,7 +693,10 @@ footer { font-weight: bold;
}
-#txt2img_checkboxes > div > div{
+#txt2img_checkboxes, #img2img_checkboxes{
+ margin-bottom: 0.5em;
+}
+#txt2img_checkboxes > div, #img2img_checkboxes > div{
flex: 0;
white-space: nowrap;
min-width: auto;
@@ -676,6 +706,47 @@ footer { opacity: 0.5;
}
+.gr-compact {
+ border: none;
+}
+
+.dark .gr-compact{
+ background-color: rgb(31 41 55 / var(--tw-bg-opacity));
+ margin-left: 0.8em;
+}
+
+.gr-compact > *{
+ margin-top: 0.5em !important;
+}
+
+.gr-compact .gr-block, .gr-compact .gr-form{
+ border: none;
+ box-shadow: none;
+}
+
+.gr-compact .gr-box{
+ border-radius: .5rem !important;
+ border-width: 1px !important;
+}
+
+#mode_img2img > div > div{
+ gap: 0 !important;
+}
+
+[id*='img2img_copy_to_'] {
+ border: none;
+}
+
+[id*='img2img_copy_to_'] > button {
+}
+
+[id*='img2img_label_copy_to_'] {
+ font-size: 1.0em;
+ font-weight: bold;
+ text-align: center;
+ line-height: 2.4em;
+}
+
/* The following handles localization for right-to-left (RTL) languages like Arabic.
The rtl media type will only be activated by the logic in javascript/localization.js.
If you change anything above, you need to make sure it is RTL compliant by just running
@@ -753,4 +824,4 @@ Then, you will need to add the RTL counterpart only if needed in the rtl section right: unset;
left: 0.5em;
}
-}
\ No newline at end of file +}
|