mirror of
https://github.com/vladmandic/automatic
synced 2026-09-06 21:10:45 +02:00
new extra networks
This commit is contained in:
Vladimir Mandic
+31
-122
@@ -1,6 +1,7 @@
|
||||
:root, .dark{ --checkbox-label-gap: 0.25em 0.1em; --section-header-text-size: 12pt; --block-background-fill: transparent;}
|
||||
a { font-weight: bold; cursor: pointer; }
|
||||
div.gradio-container{ max-width: unset !important; }
|
||||
div.gradio-container{ max-width: unset !important; padding: 8px !important; }
|
||||
div.tabitem { padding: 0 !important; }
|
||||
div.form{ border-width: 0; box-shadow: none; background: transparent; overflow: visible; gap: 0.5em; }
|
||||
div.compact{ gap: 1em; }
|
||||
div.gradio-html.min{ min-height: 0; }
|
||||
@@ -33,6 +34,7 @@ div.gradio-html.min{ min-height: 0; }
|
||||
.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; }
|
||||
.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);
|
||||
@@ -141,30 +143,22 @@ div#extras_scale_to_tab div.form{
|
||||
margin-bottom: 0.9em;
|
||||
}
|
||||
|
||||
#img2img_unused_scale_by_slider{
|
||||
#img2img_unused_scale_by_slider {
|
||||
visibility: hidden;
|
||||
width: 0.5em;
|
||||
max-width: 0.5em;
|
||||
min-width: 0.5em;
|
||||
}
|
||||
|
||||
.extra-network-cards{
|
||||
height: fit-content;
|
||||
max-height: 50vh;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.inactive{
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
[id$=_column_batch]{
|
||||
[id$=_column_batch] {
|
||||
min-width: min(13.5em, 100%) !important;
|
||||
}
|
||||
|
||||
div.dimensions-tools{
|
||||
div.dimensions-tools {
|
||||
min-width: 0 !important;
|
||||
max-width: fit-content;
|
||||
flex-direction: row;
|
||||
@@ -344,38 +338,15 @@ div#extras_scale_to_tab div.form{
|
||||
padding: 0 0.5em;
|
||||
}
|
||||
|
||||
.livePreview{
|
||||
position: absolute;
|
||||
z-index: 300;
|
||||
background-color: transparent;
|
||||
width: -webkit-fill-available;
|
||||
}
|
||||
|
||||
.dark .livePreview{
|
||||
background-color: rgb(17 24 39 / var(--tw-bg-opacity));
|
||||
}
|
||||
|
||||
.livePreview img{
|
||||
position: absolute;
|
||||
object-fit: contain;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
/* fullscreen popup (ie in Lora's (i) button) */
|
||||
|
||||
.popup-metadata{
|
||||
color: black;
|
||||
background: white;
|
||||
display: inline-block;
|
||||
padding: 1em;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
.livePreview { position: absolute; z-index: 300; background-color: transparent; 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: black; background: white; display: inline-block; padding: 1em; white-space: pre-wrap; font-size: 0.8em; opacity: 80%; }
|
||||
|
||||
.global-popup{
|
||||
display: flex;
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
z-index: 10001;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
@@ -548,7 +519,6 @@ table.settings-value-table td{
|
||||
|
||||
|
||||
/* extensions */
|
||||
|
||||
#tab_extensions table{ border-collapse: collapse; }
|
||||
#tab_extensions table td, #tab_extensions table th { border: 1px solid #ccc; padding: 0.25em 0.5em; }
|
||||
#tab_extensions table input[type="checkbox"] { margin-right: 0.5em; appearance: checkbox; }
|
||||
@@ -563,87 +533,26 @@ table.settings-value-table td{
|
||||
.extension-button { font-size: 95% !important; width: 6em; }
|
||||
|
||||
/* extra networks */
|
||||
.extra-networks > div > [id *= '_extra_']{ margin: 0.3em; }
|
||||
.extra-network-subdirs { padding: 0.2em 0.35em; }
|
||||
.extra-network-subdirs button { margin: 0 0.15em; box-shadow: none; }
|
||||
.extra-networks .tab-nav .search { display: inline-block; max-width: 16em; margin: 0.3em; align-self: center; width: 16em; }
|
||||
#txt2img_extra_view, #img2img_extra_view { width: auto; }
|
||||
.extra-network-cards .nocards, .extra-network-thumbs .nocards{ margin: 1.25em 0.5em 0.5em 0.5em; }
|
||||
.extra-network-cards .nocards h1, .extra-network-thumbs .nocards h1{ font-size: 1.5em; margin-bottom: 1em; }
|
||||
.extra-network-cards .nocards li, .extra-network-thumbs .nocards li{ margin-left: 0.5em; }
|
||||
.extra-network-cards .card .metadata-button, .extra-network-thumbs .card .metadata-button{
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
color: white;
|
||||
text-shadow: 2px 2px 3px black;
|
||||
padding: 0.25em;
|
||||
font-size: 22pt;
|
||||
width: 1.5em;
|
||||
}
|
||||
.extra-network-cards .card:hover .metadata-button, .extra-network-thumbs .card:hover .metadata-button{ display: inline-block; }
|
||||
.extra-network-thumbs { display: flex; flex-flow: row wrap; gap: 10px; }
|
||||
.extra-network-cards .card .additional a:hover, .extra-network-thumbs .card .additional a:hover { color: darkorange }
|
||||
.extra-network-thumbs .card {
|
||||
display: inline-block;
|
||||
height: 9em;
|
||||
width: 9em;
|
||||
cursor: pointer;
|
||||
background-image: url('../html/card-no-preview.png');
|
||||
background-size: cover;
|
||||
background-position: center center;
|
||||
position: relative;
|
||||
}
|
||||
.extra-network-cards .card .additional, .extra-network-thumbs .card .additional { white-space: nowrap; overflow: hidden; }
|
||||
.extra-network-thumbs .card:hover .additional a { display: inline-block; }
|
||||
.extra-network-thumbs .actions .name {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 10px;
|
||||
padding: 3px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
background: rgba(0,0,0,.5);
|
||||
color: white;
|
||||
}
|
||||
.extra-network-thumbs .card:hover .actions .name { white-space: normal; word-break: break-all; }
|
||||
.extra-network-cards .card{
|
||||
display: inline-block;
|
||||
margin: 0.5em;
|
||||
width: 16em;
|
||||
height: 24em;
|
||||
box-shadow: 0 0 5px rgba(128, 128, 128, 0.5);
|
||||
border-radius: 0.2em;
|
||||
position: relative;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
background-image: url('../html/card-no-preview.png')
|
||||
}
|
||||
.extra-network-cards .card:hover { box-shadow: 0 0 2px 0.3em rgba(0, 128, 255, 0.35); }
|
||||
.extra-network-cards .card .actions .additional, .extra-network-thumbs .card .actions .additional{ display: none; }
|
||||
.extra-network-cards .card .actions{
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 0.5em;
|
||||
background: rgba(0,0,0,0.5);
|
||||
box-shadow: 0 0 0.25em 0.25em rgba(0,0,0,0.5);
|
||||
text-shadow: 0 0 0.2em black;
|
||||
}
|
||||
.extra-network-cards .card .actions *{ color: white; }
|
||||
.extra-network-cards .card .actions:hover { box-shadow: 0 0 0.75em 0.75em rgba(0,0,0,0.5) !important; }
|
||||
.extra-network-cards .card .actions .name { font-size: 1.7em; font-weight: bold; line-break: anywhere; }
|
||||
.extra-network-cards .card .actions .description { display: block; max-height: 3em; white-space: pre-wrap; line-height: 1.1; }
|
||||
.extra-network-cards .card .actions .description:hover { max-height: none; }
|
||||
.extra-network-cards .card .actions:hover .additional, .extra-network-thumbs .card:hover .additional{ display: block; }
|
||||
.extra-network-cards .card ul{ margin: 0.25em 0 0.75em 0.25em; cursor: unset; }
|
||||
.extra-network-cards .card ul a{ cursor: pointer; }
|
||||
.extra-network-cards .card ul a:hover{ color: red; }
|
||||
.extra-networks > div { margin: 0; border-bottom: none !important; }
|
||||
.extra-networks .search { width: 150px; position: absolute; right: 0; height: unset !important; }
|
||||
.extra-networks .description { margin-top: 8px; }
|
||||
.extra-networks .tab-nav > button { margin-right: 0; height: auto; padding: 2px 4px 2px 4px; }
|
||||
.extra-networks-tab { padding: 0 !important; }
|
||||
.extra-network-subdirs { background: var(--input-background-fill); }
|
||||
.extra-networks-page { display: flex }
|
||||
.extra-networks .custom-button { min-width: 60px; width: 100%; background: none; justify-content: left; padding: 2px 8px 2px 8px; box-shadow: none; }
|
||||
.extra-networks .custom-button:hover { background: var(--button-primary-background-fill) }
|
||||
.extra-network-cards { display: flex; flex-wrap: wrap; height: 50vh; overflow-y: scroll; overflow-x: hidden; scroll-snap-type: y mandatory; }
|
||||
.extra-network-cards .card { height: fit-content; margin: 0.5em; position: relative; scroll-snap-align: start; scroll-margin-top: 0; }
|
||||
.extra-network-cards .card .overlay { position: absolute; bottom: 0; padding: 0.2em; z-index: 10; width: 100%; background: none; }
|
||||
.extra-network-cards .card:hover .overlay { background: rgba(0, 0, 0, 0.40); }
|
||||
.extra-network-cards .card .overlay .name { font-size: 1.2em; font-weight: bold; line-break: anywhere; text-shadow: 1px 1px black; }
|
||||
.extra-network-cards .card .overlay .actions { font-size: 1.8em; display: none; text-align-last: justify; cursor: pointer; word-spacing: -6px; }
|
||||
.extra-network-cards .card:hover .overlay .actions { display: block; }
|
||||
.extra-network-cards .card .overlay .description { line-break: anywhere; display: none; }
|
||||
.extra-network-cards .card:hover .overlay .description { display: block; }
|
||||
.extra-network-cards .card .preview { box-shadow: var(--button-shadow); min-height: 30px; }
|
||||
.extra-network-cards .card:hover .preview { box-shadow: none; }
|
||||
|
||||
/* controlnet */
|
||||
.controlnet_control_type .controlnet_control_type_filter_group .wrap:last-of-type { display: grid; grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
|
||||
|
||||
Reference in New Issue
Block a user