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

Removed fullscreen close button

Browse source 
Fixed button colours
Added primary/good options for some assets
This commit is contained in:
Michał Gdula 2022-11-10 11:27:40 +00:00
parent bd7765b376
commit a6b9ab0e5a
10 changed files with 195 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

108
css/scss/_body.scss
View file

@ -176,8 +176,8 @@
|-------------------------------------------------------------
*/
.fullscreen-image {
width: 100vw;
height: 100vh;
width: 110vw;
height: 110vh;
position: fixed;
top: 50%;
@ -194,60 +194,22 @@
display: none; // Automatically hidden, revealed on fullscreen
opacity: 0; // expose
img {
max-width: 95%;
max-height: 95%;
max-width: calc(95% - 10rem);
max-height: calc(95% - 10rem);
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
border-radius: $rad;
box-shadow: $shadow;
z-index: +1;
}
button {
padding: 0.25rem;
width: 2rem;
height: 2rem;
position: absolute;
top: 1.25rem;
right: 1.25rem;
display: block;
box-sizing: border-box;
border: none;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: $black;
z-index: +2;
img {
width: 1.5rem;
display: block;
}
&:hover {
outline: $white 0.2rem solid;
color: $fg;
cursor: pointer;
}
}
}
.image-container {
@ -700,20 +662,48 @@
| UPLOAD
|-------------------------------------------------------------
*/
.upload-root > img {
margin: 0 auto;
max-width: 100%;
max-height: 15rem;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
.upload-root {
> img {
margin: 0 auto;
max-width: 100%;
height: 15rem;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
display: none;
flex-direction: column;
}
display: flex;
flex-direction: column;
> #imagePreviewBlock {
margin: 0 auto;
max-width: 100%;
height: 15rem;
animation: uploadGradient 10s ease infinite;
background: linear-gradient(-45rad, #000000, #EE7752, #E73C7E, #23A6D5, #23D5AB);
background-size: 200% 200%;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
display: flex;
flex-direction: column;
}
}
@keyframes uploadGradient {
0%{background-position:10% 0%}
50%{background-position:91% 100%}
100%{background-position:10% 0%}
}
/*

7
css/scss/_navigation.scss
View file

@ -101,11 +101,11 @@ nav {
@media (max-width: 550px) {
nav {
margin: 0;
padding-bottom: 1rem;
padding-bottom: 2rem;
position: fixed;
top: auto;
bottom: 0;
bottom: -1rem;
left: 0;
right: 0;
@ -113,11 +113,8 @@ nav {
border-top: $border;
border-radius: 0;
backdrop-filter: blur(16px);
.svg {
margin: 0;
display: block;
}
}

4
css/scss/_variables.scss
View file

@ -14,13 +14,13 @@ $purple: #a988b0;
$black: #121212;
$white: #e8e3e3;
$page-accent: #8c977d;
$page-accent: $green;
$warning: $red;
$alert: $orange;
$success: $green;
$neutral: $black;
$shadow: 6px 6px 2px #15151566;
$shadow: 6px 6px 10px #15151566;
$rad: 0.4rem;
$border-thickness: 0.2rem;