a5d4af332d
Redesign the media assets show page to: * Include sidebar with AI tags and image metadata. * Include next and previous image buttons. * Make the image use 100% of the available screen space and to scroll with the window.
42 lines
985 B
SCSS
42 lines
985 B
SCSS
.media-asset-component:not(:hover) .media-asset-zoom-level {
|
|
opacity: 0;
|
|
}
|
|
|
|
.media-asset-zoom-level {
|
|
color: var(--preview-icon-color);
|
|
background: var(--preview-icon-background);
|
|
}
|
|
|
|
.media-asset-container {
|
|
&:not(.media-asset-container-fit-height) .paginator {
|
|
position: sticky;
|
|
}
|
|
|
|
&:hover {
|
|
.paginator-prev, .paginator-next {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.paginator-prev, .paginator-next {
|
|
opacity: 0;
|
|
width: 48px;
|
|
height: 96px;
|
|
top: calc((100vh - var(--header-visible-height) - 96px) / 2);
|
|
transition: opacity 0.125s, background-color 0.125s;
|
|
|
|
color: var(--asset-paginator-link-color);
|
|
background-color: var(--asset-paginator-background-color);
|
|
|
|
&:hover {
|
|
color: var(--asset-paginator-link-hover-color);
|
|
background-color: var(--asset-paginator-background-hover-color);
|
|
}
|
|
}
|
|
|
|
&.media-asset-container-fit-height {
|
|
max-height: calc(100vh - var(--header-visible-height));
|
|
justify-content: center;
|
|
}
|
|
}
|