diffusion / app.css
adamelliotfields's picture
Improve style templates
053b3a4 verified
raw
history blame
2.26 kB
.accordion {
--block-border-width: 0px;
background-color: transparent;
padding: 0px;
}
.accordion > button {
margin-bottom: 16px;
justify-content: flex-start;
color: var(--body-text-color-subdued);
}
.accordion > button:hover {
color: var(--body-text-color);
}
.accordion > button > span:first-child {
width: auto;
margin-right: 4px;
}
.accordion .tabitem > div {
--block-border-width: 1px;
}
.gallery {
background-color: var(--bg);
}
.gallery:is(.dark *) {
background-color: var(--bg-dark);
}
.gallery > .grid-wrap {
overflow-y: auto;
}
.gallery, .gallery > .grid-wrap {
height: 100%;
max-height: 574px;
}
@media (min-width: 640px) {
.gallery, .gallery > .grid-wrap {
height: 574px;
max-height: none;
}
}
.icon-button {
max-width: 42px;
}
.popover {
position: relative;
}
.popover:hover::after {
white-space: nowrap;
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
padding: 4px 8px;
border-radius: 4px;
border-width: 1px;
border-color: var(--button-secondary-border-color-hover);
background: var(--button-secondary-background-fill-hover);
color: var(--button-secondary-text-color-hover);
font-weight: var(--section-header-text-weight);
font-size: var(--section-header-text-size);
}
.popover#clear:hover::after {
content: 'Clear gallery';
}
.popover#random:hover::after {
/* see config.py for default seed */
content: var(--seed, "-1");
}
#intro {
margin-bottom: 8px !important;
}
#intro > div {
display: flex;
}
#intro > div > h1 > span {
font-style: italic;
color: #047857 !important;
}
#intro > div > h1 > span:is(.dark *) {
color: #10b981 !important;
}
#intro > div > svg {
width: 1.5rem;
height: 1.5rem;
margin-top: 0.25rem;
margin-left: 0.5rem;
align-self: center;
fill: #047857 !important;
animation: spin 3s linear infinite reverse;
}
#intro > div > svg:is(.dark *) {
fill: #10b981 !important;
}
@keyframes spin {
100% { transform: rotate(360deg); }
}
.tabs, .tabitem, .tab-nav, .tab-nav > .selected {
border-width: 0px;
}
.tabitem {
max-height: 516px;
overflow-x: hidden;
overflow-y: auto;
padding: 0 0 8px;
}
.tab-nav {
margin-bottom: 16px;
}
.tab-nav > button {
padding-bottom: 8px;
}