mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-05-29 06:43:11 +00:00
Added grabbing average image colour function
This commit is contained in:
parent
7abf0c47ce
commit
33927c63ef
9 changed files with 196 additions and 40 deletions
36
css/main.css
36
css/main.css
|
|
@ -251,7 +251,7 @@ nav .btn {
|
|||
max-width: calc(20% - 0.5rem);
|
||||
min-width: calc(20% - 0.5rem);
|
||||
background-color: #151515;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1 0 150px;
|
||||
|
|
@ -294,7 +294,7 @@ nav .btn {
|
|||
object-fit: cover;
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.nsfw-blur {
|
||||
|
|
@ -393,8 +393,8 @@ nav .btn {
|
|||
|
||||
.image-container {
|
||||
margin: 1rem 0 2rem 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
padding: 0.5rem;
|
||||
width: calc(100% - 1rem);
|
||||
max-height: 50vh;
|
||||
height: auto;
|
||||
min-height: 30vh;
|
||||
|
|
@ -417,7 +417,7 @@ nav .btn {
|
|||
width: auto;
|
||||
max-height: inherit;
|
||||
height: auto;
|
||||
border-radius: 0.4rem;
|
||||
border-radius: 3px;
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
||||
|
|
@ -431,7 +431,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: rgba(21, 21, 21, 0.7333333333);
|
||||
z-index: 2;
|
||||
|
|
@ -483,7 +483,7 @@ nav .btn {
|
|||
padding: 0.5rem;
|
||||
display: block;
|
||||
background-color: #8C977D;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
font-family: "Secular One", sans-serif;
|
||||
}
|
||||
.tag::before {
|
||||
|
|
@ -603,7 +603,7 @@ nav .btn {
|
|||
height: auto;
|
||||
max-width: calc(20% - 0.5rem);
|
||||
min-width: calc(20% - 0.5rem);
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
flex: 1 0 150px;
|
||||
|
|
@ -626,7 +626,7 @@ nav .btn {
|
|||
height: 100%;
|
||||
padding: 0;
|
||||
background-color: #121212;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
border: none;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
|
@ -734,7 +734,7 @@ nav .btn {
|
|||
margin: 0 auto;
|
||||
max-width: 100%;
|
||||
max-height: 15rem;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
|
@ -754,7 +754,7 @@ nav .btn {
|
|||
height: 7.813rem;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
background-color: #121212;
|
||||
}
|
||||
.pfp-upload form > * {
|
||||
|
|
@ -799,7 +799,7 @@ nav .btn {
|
|||
display: none;
|
||||
flex-direction: column;
|
||||
background-color: #151515;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.log {
|
||||
|
|
@ -846,7 +846,7 @@ nav .btn {
|
|||
display: none;
|
||||
flex-direction: column;
|
||||
background-color: #151515;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.ban {
|
||||
|
|
@ -900,7 +900,7 @@ nav .btn {
|
|||
display: none;
|
||||
flex-direction: column;
|
||||
background-color: #151515;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.user {
|
||||
|
|
@ -1029,7 +1029,7 @@ body * {
|
|||
font-family: "Secular One", sans-serif;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
transition: outline 0.1s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
.btn:hover {
|
||||
|
|
@ -1045,7 +1045,7 @@ body * {
|
|||
text-decoration: none;
|
||||
background-color: #E8E3E3;
|
||||
border: none;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
.btn:where(input[type=file])::file-selector-button {
|
||||
margin: -0.25rem 0.5rem -0.25rem -0.25rem;
|
||||
|
|
@ -1055,7 +1055,7 @@ body * {
|
|||
text-decoration: none;
|
||||
background-color: #E8E3E3;
|
||||
border: none;
|
||||
border-radius: -0.1rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
a.btn {
|
||||
|
|
@ -1152,7 +1152,7 @@ a.link:hover {
|
|||
background-color: rgba(21, 21, 21, 0.7333333333);
|
||||
-webkit-backdrop-filter: blur(8px);
|
||||
backdrop-filter: blur(8px);
|
||||
border-radius: 50%;
|
||||
border-radius: 3px;
|
||||
box-shadow: 6px 6px 2px rgba(21, 21, 21, 0.4);
|
||||
transition: right 0.15s cubic-bezier(0.19, 1, 0.22, 1);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -78,7 +78,11 @@ body {
|
|||
text-decoration: none;
|
||||
|
||||
border: none;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@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);
|
||||
|
||||
|
|
@ -102,7 +106,11 @@ body {
|
|||
background-color: $white;
|
||||
|
||||
border: none;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -205,7 +213,12 @@ a.link {
|
|||
background-color: $bg-alt;
|
||||
backdrop-filter: blur(8px);
|
||||
|
||||
border-radius: 50%;
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
box-shadow: $shadow;
|
||||
|
||||
transition: right 0.15s cubic-bezier(.19, 1, .22, 1);
|
||||
|
|
|
|||
|
|
@ -72,7 +72,11 @@
|
|||
min-width: calc(20% - 0.5rem);
|
||||
|
||||
background-color: $bg;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
|
|
@ -126,7 +130,11 @@
|
|||
object-fit: cover;
|
||||
object-position: center;
|
||||
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.nsfw-blur {
|
||||
|
|
@ -253,9 +261,9 @@
|
|||
|
||||
.image-container {
|
||||
margin: 1rem 0 2rem 0;
|
||||
padding: 0;
|
||||
padding: 0.5rem;
|
||||
|
||||
width: 100%;
|
||||
width: calc(100% - 1rem);
|
||||
max-height: 50vh;
|
||||
height: auto;
|
||||
min-height: 30vh;
|
||||
|
|
@ -284,7 +292,11 @@
|
|||
max-height: inherit;
|
||||
height: auto;
|
||||
|
||||
border-radius: $rad;
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
transition: opacity 0.5s;
|
||||
}
|
||||
|
|
@ -302,7 +314,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);
|
||||
|
||||
|
|
@ -370,7 +386,11 @@
|
|||
|
||||
background-color: $page-accent;
|
||||
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
font-family: $font-body;
|
||||
|
||||
|
|
@ -526,7 +546,11 @@
|
|||
max-width: calc(20% - 0.5rem);
|
||||
min-width: calc(20% - 0.5rem);
|
||||
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
position: relative;
|
||||
|
||||
|
|
@ -556,7 +580,11 @@
|
|||
padding: 0;
|
||||
|
||||
background-color: $black;
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
border: none;
|
||||
|
||||
top: 0;
|
||||
|
|
@ -684,7 +712,11 @@
|
|||
max-width: 100%;
|
||||
max-height: 15rem;
|
||||
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -707,7 +739,11 @@
|
|||
|
||||
object-fit: cover;
|
||||
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
background-color: $black;
|
||||
}
|
||||
|
|
@ -759,7 +795,11 @@
|
|||
display: none; flex-direction: column;
|
||||
|
||||
background-color: $bg;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.log {
|
||||
min-width: 850px;
|
||||
|
|
@ -811,7 +851,11 @@
|
|||
display: none; flex-direction: column;
|
||||
|
||||
background-color: $bg;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.ban {
|
||||
min-width: 900px;
|
||||
|
|
@ -869,7 +913,11 @@
|
|||
display: none; flex-direction: column;
|
||||
|
||||
background-color: $bg;
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
@if calc($rad - 0.5rem) > 0 {
|
||||
border-radius: calc($rad - 0.5rem);
|
||||
} @else {
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
.user {
|
||||
min-width: 950px;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue