1
0
mirror of https://github.com/bpatrik/pigallery2.git synced 2024-12-16 11:37:13 +02:00
pigallery2/frontend/app/gallery/lightbox/lightbox.gallery.component.css

97 lines
1.7 KiB
CSS

.lightbox {
position: fixed; /* Stay in place */
z-index: 1100; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: hidden;
display: flex; /* add */
justify-content: center; /* add to align horizontal */
align-items: center; /* add to align vertical */
cursor: pointer;
transition: all 0.3s ease-in-out;
}
gallery-lightbox-photo {
transition: all 0.3s ease-in-out;
overflow: hidden;
}
.blackCanvas {
position: fixed; /* Stay in place */
z-index: 1099; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
background-color: black;
transition: all 0.3s ease-in-out;
}
.navigation-arrow {
width: 30%;
height: 100%;
position: static;
display: inline-block;
padding: 15px;
cursor: pointer;
font-size: x-large;
}
.navigation-arrow span {
top: 43%;
}
#controllers-container {
z-index: 1100;
width: 100%;
height: 100%;
left: 0;
top: 0;
position: fixed;
color: white;
transition: all 0.3s ease-in-out;
}
#rightArrow {
float: right;
text-align: right;
}
#controls {
top: 0;
height: initial;
text-align: right;
width: 100%;
padding: 5px;
font-size: large;
}
#controls span {
margin-left: 6px;
margin-right: 6px;
color: white;
cursor: pointer;
}
.highlight {
opacity: 0.4;
transition: opacity .2s ease-out;
-moz-transition: opacity .2s ease-out;
-webkit-transition: opacity .2s ease-out;
-o-transition: opacity .2s ease-out;
}
.highlight:hover {
opacity: 1.0;
}
info-panel {
z-index: 1100; /* Sit on top */
position: fixed;
height: 100vh;
right: 0;
transition: all 0.3s ease-in-out;
}