Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-05-19 09:55:00 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fullscreen image view

Browse source
This commit is contained in:
Michał Gdula 2022-09-21 16:28:57 +00:00
parent e7f55dc062
commit 55c853e81c
4 changed files with 152 additions and 21 deletions
Download patch file Download diff file Expand all files Collapse all files

65
css/scss/_body.scss
View file

@ -182,6 +182,71 @@
| IMAGE
|-------------------------------------------------------------
*/
.fullscreen-image {
width: 100vw; height: 100vh;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-050%) translateY(-50%);
background-color: $bg-alt;
backdrop-filter: blur(15px);
z-index: 999;
transition: opacity 0.5s cubic-bezier(.19, 1, .22, 1);
display: none; // Hidden so to not disturb the user
opacity: 0; //
img {
max-width: 95%; max-height: 95%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-050%) translateY(-50%);
border-radius: $rad;
}
button {
width: 1.75rem; height: 1.75rem;
padding: 0;
position: absolute;
top: 0.5rem;
right: 0.5rem;
display: block;
box-sizing: border-box;
text-decoration: none;
border: none;
border-radius: calc($rad - (0.5rem + 3px));
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
background-color: $black;
box-shadow: $shadow;
img {
width: 1.5rem;
display: block;
}
&:hover {
outline: $white 0.2rem solid;
color: $fg;
}
}
}
.image-container {
margin: 1rem 0 2rem 0;
padding: 0;