failed-galleries/php-gallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-01-29 01:18:23 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added notification stacking, fixed shadows

Browse source
This commit is contained in:
Michał 2022-09-15 11:21:21 +00:00
parent b4e388ebcb
commit 80bac9926f
4 changed files with 53 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
Sniffle/sniffle.css
View file

@ -37,13 +37,13 @@
display: flex; flex-direction: row; overflow-y: hidden; display: flex; flex-direction: row; overflow-y: hidden;
z-index: 999; position: relative;
background-color: #151515; background-color: #151515;
box-shadow: var(--shadow); box-shadow: var(--shadow);
transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.2s cubic-bezier(.19,1,.22,1); transition: transform 1s cubic-bezier(.19,1,.22,1), opacity 0.25s cubic-bezier(.19,1,.22,1);
border-radius: var(--rad); border-radius: var(--rad);
} }
@ -53,6 +53,27 @@
cursor: pointer; cursor: pointer;
} }
.sniffle-notification:not(:nth-of-type(1), :nth-of-type(2), :nth-of-type(3)) {
display: none;
opacity: 0;
}
.sniffle-notification:nth-of-type(1) {
z-index: 1;
transform: scale(1);
}
.sniffle-notification:nth-of-type(2) {
z-index: -1;
transform: scale(0.95);
transition: none;
margin-top: -4.8rem;
}
.sniffle-notification:nth-of-type(3) {
z-index: -2;
transform: scale(0.9);
transition: none;
margin-top: -4.8rem;
}
/* /*
Notification content Root Notification content Root

35
css/main.css
View file

@ -20,6 +20,7 @@
--black: #151515; --black: #151515;
--white: #E8E3E3; --white: #E8E3E3;
--accent: #8C977D; --accent: #8C977D;
--shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
--rad: 0.25rem; --rad: 0.25rem;
} }
@ -36,7 +37,7 @@ nav {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -209,7 +210,7 @@ nav .btn {
flex-wrap: wrap; flex-wrap: wrap;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
border-radius: 0.25rem; border-radius: 0.25rem;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.gallery-item { .gallery-item {
@ -226,7 +227,7 @@ nav .btn {
} }
.gallery-item:hover { .gallery-item:hover {
transform: scale(1.1) rotate(5deg); transform: scale(1.1) rotate(5deg);
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
z-index: 9; z-index: 9;
} }
.gallery-item:after { .gallery-item:after {
@ -341,7 +342,7 @@ nav .btn {
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1); transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #151515; background-color: #151515;
opacity: 0.8; opacity: 0.8;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.preview-button:hover { .preview-button:hover {
outline: #E8E3E3 0.2rem solid; outline: #E8E3E3 0.2rem solid;
@ -356,7 +357,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.image-description > * { .image-description > * {
margin-top: 0; margin-top: 0;
@ -384,7 +385,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.image-detail > * { .image-detail > * {
margin-top: 0; margin-top: 0;
@ -435,7 +436,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.tags-root > * { .tags-root > * {
margin-top: 0; margin-top: 0;
@ -483,7 +484,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #B66467; border: 0.2rem solid #B66467;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.danger-zone > * { .danger-zone > * {
margin-top: 0; margin-top: 0;
@ -516,7 +517,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.about-root > * { .about-root > * {
margin-top: 0; margin-top: 0;
@ -549,7 +550,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.upload-root > * { .upload-root > * {
margin-top: 0; margin-top: 0;
@ -582,7 +583,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.account-root > * { .account-root > * {
margin-top: 0; margin-top: 0;
@ -610,7 +611,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.admin-root > * { .admin-root > * {
margin-top: 0; margin-top: 0;
@ -678,7 +679,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
display: none; display: none;
} }
.signup-root > * { .signup-root > * {
@ -707,7 +708,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.login-root > * { .login-root > * {
margin-top: 0; margin-top: 0;
@ -740,7 +741,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #B66467; border: 0.2rem solid #B66467;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.password-reset-root > * { .password-reset-root > * {
margin-top: 0; margin-top: 0;
@ -773,7 +774,7 @@ nav .btn {
color: #E8E3E3; color: #E8E3E3;
border-radius: 0.25rem; border-radius: 0.25rem;
border: 0.2rem solid #8C977D; border: 0.2rem solid #8C977D;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
} }
.error-root > * { .error-root > * {
margin-top: 0; margin-top: 0;
@ -974,7 +975,7 @@ br {
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
border-radius: 50%; border-radius: 50%;
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.5333333333); box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1); transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
} }
#back-to-top:hover { #back-to-top:hover {

4
css/scss/_variables.scss
View file

@ -12,7 +12,7 @@ $white: #E8E3E3;
$page-accent: #8C977D; $page-accent: #8C977D;
$shadow: 6px 6px 2px #15151588; $shadow: 6px 6px 2px #15151566;
$rad: 0.25rem; $rad: 0.25rem;
$weight-bold: 621; $weight-bold: 621;
@ -41,5 +41,7 @@ sans-serif;
--accent: #{$page-accent}; --accent: #{$page-accent};
--shadow: #{$shadow};
--rad: #{$rad}; --rad: #{$rad};
} }

13
image.php
View file

@ -224,10 +224,15 @@
?> ?>
</div> </div>
</div> </div>
<?php <!-- Download Image -->
// Image download <a id='download' class='btn btn-good' href='<?php echo "images/".$image['imagename']; ?>' download='<?php echo $image['imagename']; ?>'><img class='svg' src='assets/icons/download.svg'>Download image</a>
echo "<a class='btn btn-good' href='images/".$image['imagename']."' download='".$image['imagename']."'><img class='svg' src='assets/icons/download.svg'>Download image</a>"; <script>
?> $("#download").click(function() {
sniffleAdd("Info", "Image download started!", "var(--green)", "assets/icons/download.svg");
});
</script>
<!-- Copy link -->
<button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button> <button class='btn btn-good' onclick='copyLink()'><img class='svg' src='assets/icons/clipboard-text.svg'>Copy image link</button>
<script> <script>
function copyLink() { function copyLink() {