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

Progress towards autofix working

Browse source
This commit is contained in:
Michał Gdula 2022-11-03 18:00:05 +00:00
parent 2ef5b6d54a
commit 86bba69f81
11 changed files with 438 additions and 174 deletions
Download patch file Download diff file Expand all files Collapse all files

59
css/main.css
View file

@ -284,7 +284,7 @@ nav .btn {
}
.nsfw-blur {
filter: blur(8px);
filter: blur(15px);
}
.nsfw-warning {
@ -335,8 +335,8 @@ nav .btn {
left: 50%;
transform: translateX(-50%) translateY(-50%);
background-color: rgba(21, 21, 21, 0.7333333333);
-webkit-backdrop-filter: blur(15px);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(20px);
backdrop-filter: blur(20px);
z-index: 999;
transition: opacity 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
display: none;
@ -362,7 +362,7 @@ nav .btn {
display: block;
box-sizing: border-box;
border: none;
border-radius: 0.4rem;
border-radius: 3px;
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: #121212;
z-index: 2;
@ -786,7 +786,7 @@ nav .btn {
flex-direction: column;
background-color: #151515;
border-radius: 3px;
transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1);
transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.log {
@ -835,7 +835,7 @@ nav .btn {
flex-direction: column;
background-color: #151515;
border-radius: 3px;
transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1);
transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.ban {
@ -891,7 +891,7 @@ nav .btn {
flex-direction: column;
background-color: #151515;
border-radius: 3px;
transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1);
transition: height 0.3s cubic-bezier(0.19, 1, 0.22, 1), transform 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}
.user {
@ -960,6 +960,51 @@ nav .btn {
content: "";
}
#autofix {
padding: 0;
display: none;
background-color: #121212;
position: relative;
border-radius: 3px;
}
#autofix button {
padding: 0.25rem;
width: 1.5rem;
height: 1.5rem;
position: absolute;
top: 0.25rem;
right: 0.25rem;
display: block;
box-sizing: border-box;
border: none;
border-radius: 3px;
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
background-color: rgba(21, 21, 21, 0.7333333333);
z-index: 2;
}
#autofix button img {
width: 1rem;
display: block;
}
#autofix button:hover {
outline: #E8E3E3 0.2rem solid;
color: #E8E3E3;
cursor: pointer;
}
#autofix-log {
padding: 0.5rem 0.5rem 0 0.5rem;
display: flex;
flex-direction: column;
border-radius: 3px;
}
#autofix-log > * {
font-family: "JetBrains Mono", monospace;
font-size: 0.9rem;
line-height: 1.1rem;
margin: 0 0 0.5rem 0;
}
/*
|-------------------------------------------------------------
| FOOTER

95
css/scss/_body.scss
View file

@ -121,7 +121,7 @@
}
.nsfw-blur {
filter: blur(8px);
filter: blur(15px);
}
.nsfw-warning {
@ -181,10 +181,10 @@
position: fixed;
top: 50%;
left: 50%;
transform: translateX(-050%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background-color: $bg-alt;
backdrop-filter: blur(15px);
backdrop-filter: blur(20px);
z-index: 999;
@ -219,7 +219,11 @@
box-sizing: border-box;
border: none;
border-radius: $rad;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
transition: outline 0.1s cubic-bezier(.19, 1, .22, 1);
@ -789,7 +793,7 @@
border-radius: 3px;
}
transition: height 0.3s cubic-bezier(.19, 1, .22, 1);
transition: height 0.3s cubic-bezier(.19, 1, .22, 1), transform 0.3s cubic-bezier(.19, 1, .22, 1);
}
.log {
min-width: 850px;
@ -849,7 +853,7 @@
border-radius: 3px;
}
transition: height 0.3s cubic-bezier(.19, 1, .22, 1);
transition: height 0.3s cubic-bezier(.19, 1, .22, 1), transform 0.3s cubic-bezier(.19, 1, .22, 1);
}
.ban {
min-width: 900px;
@ -915,7 +919,7 @@
border-radius: 3px;
}
transition: height 0.3s cubic-bezier(.19, 1, .22, 1);
transition: height 0.3s cubic-bezier(.19, 1, .22, 1), transform 0.3s cubic-bezier(.19, 1, .22, 1);
}
.user {
min-width: 950px;
@ -988,4 +992,81 @@
content: "";
}
}
}
#autofix {
padding: 0;
display: none;
//border-left: $border;
background-color: #121212;
position: relative;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
button {
padding: 0.25rem;
width: 1.5rem; height: 1.5rem;
position: absolute;
top: 0.25rem;
right: 0.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(.19, 1, .22, 1);
background-color: $bg-alt;
z-index: +2;
img {
width: 1rem;
display: block;
}
&:hover {
outline: $white 0.2rem solid;
color: $fg;
cursor: pointer;
}
}
}
#autofix-log {
padding: 0.5rem 0.5rem 0 0.5rem;
display: flex; flex-direction: column;
@if calc($rad - 0.5rem) > 0 {
border-radius: calc($rad - 0.5rem);
} @else {
border-radius: 3px;
}
> * {
font-family: $font-code;
font-size: 0.9rem;
line-height: 1.1rem;
margin: 0 0 0.5rem 0;
}
}

2
css/scss/_variables.scss
View file

@ -33,6 +33,8 @@ $font-header: 'Lexend Deca',
sans-serif;
$font-body: 'Secular One',
sans-serif;
$font-code: 'JetBrains Mono',
monospace;
// Fallback for items that do not yet support the new sass stylesheet system
:root {