sd-webui-lobe-theme/src/theme/components/extra-network.less

155 lines
2.6 KiB
Plaintext

.extra-network-thumbs {
.name {
overflow: hidden;
display: block;
font-size: 12px !important;
text-overflow: ellipsis;
white-space: nowrap;
background: transparent;
}
}
.extra-networks {
.tab-nav {
align-items: center;
> * {
height: 40px !important;
margin: 0 !important;
font-size: 14px !important;
}
}
.extra-network-subdirs {
display: flex;
flex-wrap: wrap;
gap: 4px;
align-items: center;
margin-bottom: 12px;
padding: 0 !important;
> button {
cursor: pointer;
zoom: 0.8;
flex: 1;
min-width: 100px;
margin: 0;
}
}
.actions {
.name {
overflow: hidden;
display: block;
font-weight: bold;
text-overflow: ellipsis;
text-shadow: 0 1px 1px rgb(0 0 0 / 90%);
white-space: nowrap;
background: linear-gradient(0deg, rgb(0 0 0 / 80%), transparent);
}
.additional {
display: none;
> ul {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: 0;
a {
margin: 0 !important;
padding: 0 !important;
font-size: 15px !important;
color: #fff;
text-overflow: ellipsis;
text-shadow: 1px 1px black;
white-space: nowrap;
}
}
}
}
.card {
overflow: hidden;
background-size: cover;
border-radius: var(--border-radius-xs);
outline: 1px solid rgb(0 0 0 / 50%);
box-shadow: var(--box-shadow);
transition: all 0.2s ease-in-out;
.name {
font-size: 12px !important;
}
&:hover {
outline: 2px solid var(--color-primary);
.additional {
display: block;
}
.name {
white-space: unset;
}
}
}
.metadata-button {
top: 50% !important;
transform: translateY(-50%);
display: flex !important;
align-items: center;
justify-content: center;
padding: 0 !important;
font-size: 20px !important;
text-shadow: none !important;
opacity: 0;
background: rgba(0, 0, 0, 70%);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
&:hover {
color: #fff !important;
opacity: 1;
}
}
}
#txt2img_extra_networks,
#img2img_extra_networks {
.tabitem.gradio-tabitem.svelte-19hvt5v {
padding: 0;
background: transparent;
}
.search {
box-sizing: border-box;
width: var(--fill-available);
max-width: var(--fill-available);
max-height: 36px !important;
padding: 8px;
}
button {
height: 32px !important;
}
}