mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
86 lines
1.5 KiB
SCSS
86 lines
1.5 KiB
SCSS
@use '../../styles/Mixins/' as *;
|
|
|
|
.current-image-area {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
row-gap: 1rem;
|
|
background-color: var(--background-color-secondary);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
.current-image-preview {
|
|
position: relative;
|
|
justify-content: center;
|
|
align-items: center;
|
|
display: flex;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
img {
|
|
background-color: var(--img2img-img-bg-color);
|
|
border-radius: 0.5rem;
|
|
object-fit: contain;
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
height: auto;
|
|
position: absolute;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.current-image-metadata {
|
|
grid-area: current-image-preview;
|
|
}
|
|
|
|
.current-image-next-prev-buttons {
|
|
grid-area: current-image-content;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
z-index: 1;
|
|
height: 100%;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.next-prev-button-trigger-area {
|
|
width: 7rem;
|
|
height: 100%;
|
|
width: 15%;
|
|
display: grid;
|
|
align-items: center;
|
|
pointer-events: auto;
|
|
|
|
&.prev-button-trigger-area {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&.next-button-trigger-area {
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
|
|
.next-prev-button {
|
|
font-size: 4rem;
|
|
fill: var(--white);
|
|
filter: drop-shadow(0 0 1rem var(--text-color-secondary));
|
|
opacity: 70%;
|
|
}
|
|
|
|
.current-image-display-placeholder {
|
|
background-color: var(--background-color-secondary);
|
|
display: grid;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0.5rem;
|
|
|
|
svg {
|
|
width: 10rem;
|
|
height: 10rem;
|
|
color: var(--svg-color);
|
|
}
|
|
}
|