697691589e
Fix images on the upload page appearing stretched (having the incorrect aspect ratio) when the image is enlarged on Safari. The fix is to set `aspect-ratio` and `height: intrinsic` to ensure the image is the right size. I have no idea how this works or why it's necessary on Safari. Fixes https://danbooru.donmai.us/forum_posts/227099.
56 lines
1.3 KiB
SCSS
56 lines
1.3 KiB
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-image {
|
|
user-select: none;
|
|
width: auto;
|
|
height: auto;
|
|
max-width: 100%;
|
|
max-height: inherit;
|
|
}
|
|
|
|
&.media-asset-container-fit-height {
|
|
max-height: calc(100vh - var(--header-visible-height));
|
|
justify-content: center;
|
|
|
|
.media-asset-component {
|
|
aspect-ratio: var(--media-asset-width) / var(--media-asset-height);
|
|
height: max-content;
|
|
height: intrinsic; // XXX Safari-only hack to make images correct height on upload page. I have no idea how this works.
|
|
}
|
|
}
|
|
}
|