Galleries/PHPGallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-05-19 01:44:58 +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

49
css/main.css
View file

@ -310,6 +310,55 @@ nav .btn {
| IMAGE
|-------------------------------------------------------------
*/
.fullscreen-image {
width: 100vw;
height: 100vh;
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: rgba(21, 21, 21, 0.7333333333);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
z-index: 999;
transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
display: none;
opacity: 0;
}
.fullscreen-image img {
max-width: 95%;
max-height: 95%;
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: 0.25rem;
}
.fullscreen-image 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(0.25rem - (0.5rem + 3px));
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #121212;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
}
.fullscreen-image button img {
width: 1.5rem;
display: block;
}
.fullscreen-image button:hover {
outline: #E8E3E3 0.2rem solid;
color: #E8E3E3;
}
.image-container {
margin: 1rem 0 2rem 0;
padding: 0;

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;