fix clipping in lightbox image viewer

This commit is contained in:
AUTOMATIC 2023-03-25 08:28:21 +03:00
parent 4697def235
commit 889f5e38a1

View File

@ -429,7 +429,6 @@ div.dimensions-tools{
display: none; display: none;
position: fixed; position: fixed;
z-index: 1001; z-index: 1001;
padding-top: 100px;
left: 0; left: 0;
top: 0; top: 0;
width: 100%; width: 100%;
@ -438,74 +437,40 @@ div.dimensions-tools{
background-color: rgba(20, 20, 20, 0.95); background-color: rgba(20, 20, 20, 0.95);
user-select: none; user-select: none;
-webkit-user-select: none; -webkit-user-select: none;
flex-direction: column;
} }
.modalControls { .modalControls {
display: grid; display: flex;
grid-template-columns: 32px 32px 32px 1fr 32px; gap: 1em;
grid-template-areas: "zoom tile save space close"; padding: 1em;
position: absolute;
top: 0;
left: 0;
right: 0;
padding: 16px;
gap: 16px;
background-color: rgba(0,0,0,0.2); background-color: rgba(0,0,0,0.2);
} }
.modalClose { .modalClose {
grid-area: close; margin-left: auto;
} }
.modalControls span{
.modalZoom {
grid-area: zoom;
}
.modalSave {
grid-area: save;
}
.modalTileImage {
grid-area: tile;
}
.modalClose,
.modalZoom,
.modalTileImage {
color: white; color: white;
font-size: 35px; font-size: 35px;
font-weight: bold; font-weight: bold;
cursor: pointer; cursor: pointer;
width: 1em;
} }
.modalSave { .modalControls span:hover, .modalControls span:focus{
color: white;
font-size: 28px;
margin-top: 8px;
font-weight: bold;
cursor: pointer;
}
.modalClose:hover,
.modalClose:focus,
.modalSave:hover,
.modalSave:focus,
.modalZoom:hover,
.modalZoom:focus {
color: #999; color: #999;
text-decoration: none; text-decoration: none;
cursor: pointer;
} }
#modalImage { #lightboxModal > img {
display: block; display: block;
margin: auto; margin: auto;
width: auto; width: auto;
} }
.modalImageFullscreen { #lightboxModal > img.modalImageFullscreen{
object-fit: contain; object-fit: contain;
height: 90%; height: 100%;
} }
.modalPrev, .modalPrev,