|
|
|
@ -426,86 +426,51 @@ div.dimensions-tools{
|
|
|
|
/* fullpage image viewer */
|
|
|
|
/* fullpage image viewer */
|
|
|
|
|
|
|
|
|
|
|
|
#lightboxModal{
|
|
|
|
#lightboxModal{
|
|
|
|
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%;
|
|
|
|
height: 100%;
|
|
|
|
height: 100%;
|
|
|
|
overflow: auto;
|
|
|
|
overflow: auto;
|
|
|
|
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;
|
|
|
|
|
|
|
|
font-size: 35px;
|
|
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.modalSave {
|
|
|
|
|
|
|
|
color: white;
|
|
|
|
color: white;
|
|
|
|
font-size: 28px;
|
|
|
|
font-size: 35px;
|
|
|
|
margin-top: 8px;
|
|
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
font-weight: bold;
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
width: 1em;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.modalClose:hover,
|
|
|
|
.modalControls span:hover, .modalControls span:focus{
|
|
|
|
.modalClose:focus,
|
|
|
|
color: #999;
|
|
|
|
.modalSave:hover,
|
|
|
|
text-decoration: none;
|
|
|
|
.modalSave:focus,
|
|
|
|
|
|
|
|
.modalZoom:hover,
|
|
|
|
|
|
|
|
.modalZoom:focus {
|
|
|
|
|
|
|
|
color: #999;
|
|
|
|
|
|
|
|
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,
|
|
|
|
|