failed-galleries/php-gallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-01-16 03:25:13 +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;
z-index: 999;
position: relative;
background-color: #151515;
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);
}
@ -53,6 +53,27 @@
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

35
css/main.css
View file

@ -20,6 +20,7 @@
--black: #151515;
--white: #E8E3E3;
--accent: #8C977D;
--shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
--rad: 0.25rem;
}
@ -36,7 +37,7 @@ nav {
color: #E8E3E3;
border-radius: 0.25rem;
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;
flex-direction: row;
flex-wrap: wrap;
@ -209,7 +210,7 @@ nav .btn {
flex-wrap: wrap;
border: 0.2rem solid #8C977D;
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 {
@ -226,7 +227,7 @@ nav .btn {
}
.gallery-item:hover {
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;
}
.gallery-item:after {
@ -341,7 +342,7 @@ nav .btn {
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #151515;
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 {
outline: #E8E3E3 0.2rem solid;
@ -356,7 +357,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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 > * {
margin-top: 0;
@ -384,7 +385,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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 > * {
margin-top: 0;
@ -435,7 +436,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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 > * {
margin-top: 0;
@ -483,7 +484,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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 > * {
margin-top: 0;
@ -516,7 +517,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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 > * {
margin-top: 0;
@ -549,7 +550,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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 > * {
margin-top: 0;
@ -582,7 +583,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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 > * {
margin-top: 0;
@ -610,7 +611,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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 > * {
margin-top: 0;
@ -678,7 +679,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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;
}
.signup-root > * {
@ -707,7 +708,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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 > * {
margin-top: 0;
@ -740,7 +741,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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 > * {
margin-top: 0;
@ -773,7 +774,7 @@ nav .btn {
color: #E8E3E3;
border-radius: 0.25rem;
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 > * {
margin-top: 0;
@ -974,7 +975,7 @@ br {
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
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);
}
#back-to-top:hover {

4
css/scss/_variables.scss
View file

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

13
image.php
View file

@ -224,10 +224,15 @@
?>
</div>
</div>
<?php
// Image download
echo "<a class='btn btn-good' href='images/".$image['imagename']."' download='".$image['imagename']."'><img class='svg' src='assets/icons/download.svg'>Download image</a>";
?>
<!-- Download Image -->
<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>
<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>
<script>
function copyLink() {