mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-02-18 11:20:05 +00:00
120 lines
1.9 KiB
CSS
120 lines
1.9 KiB
CSS
:root {
|
|
--red: #B66467;
|
|
--green: #8C977D;
|
|
--black: #151515;
|
|
--gray: #15151555;
|
|
--dark-gray: #151515cc;
|
|
--white: #E8E3E3;
|
|
|
|
--rad: 5px;
|
|
}
|
|
|
|
* {
|
|
font-family: "Rubik", sans-serif;
|
|
font-weight: 621;
|
|
font-size: 15px;
|
|
}
|
|
|
|
html {
|
|
margin: 0; padding: 0;
|
|
}
|
|
body {
|
|
margin: 0 auto; padding: 1rem;
|
|
max-width: 1000px;
|
|
background-color: #15151522;
|
|
}
|
|
h1 {
|
|
font-size: 40px;
|
|
}
|
|
|
|
form {
|
|
margin: 1rem auto; padding: 0;
|
|
/*max-width: 621px;*/
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.item {
|
|
margin: 0.25rem 0; padding: 0;
|
|
height: 300px; width: calc(33.33% - 0.5rem);
|
|
|
|
display: block;
|
|
position: relative;
|
|
|
|
border-radius: var(--rad);
|
|
|
|
background-color: var(--gray);
|
|
|
|
overflow: hidden;
|
|
}
|
|
img {
|
|
width: 100%; height: 100%;
|
|
object-fit: contain;
|
|
position: absolute;
|
|
background-size: cover;
|
|
}
|
|
.delete_button {
|
|
height: 3rem; width: calc(100% - 1rem);
|
|
padding: 0;
|
|
position: absolute;
|
|
bottom: -3rem; left: 0.5rem;
|
|
border-radius: var(--rad);
|
|
transition: bottom 0.2s cubic-bezier(0,.76,0,1);
|
|
}
|
|
.identity {
|
|
width: calc(100% - 1rem);
|
|
padding: 0.7rem 0;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: -3.6rem; left: 50%;
|
|
transform: translate(-50%, 0%);
|
|
color: #fff;
|
|
border-radius: var(--rad);
|
|
transition: top 0.2s cubic-bezier(0,.76,0,1);
|
|
}
|
|
|
|
.item:hover .delete_button {
|
|
bottom: 0.5rem;
|
|
background-color: var(--red);
|
|
}
|
|
.item:hover .identity {
|
|
top: -0.5rem;
|
|
}
|
|
|
|
.gallery {
|
|
margin: 0; padding: 0;
|
|
display: flex; flex-direction: row;
|
|
flex-wrap: wrap; justify-content: space-between;
|
|
}
|
|
|
|
.alert {
|
|
margin: 1rem 0; padding: 0.7rem;
|
|
text-align: center;
|
|
border-radius: var(--rad);
|
|
}
|
|
|
|
|
|
.btn {
|
|
padding: 0.7rem;
|
|
background-color: var(--gray);
|
|
border: none;
|
|
border-radius: var(--rad);
|
|
}
|
|
.btn:hover {
|
|
color: #fff;
|
|
background-color: var(--dark-gray);
|
|
}
|
|
.b-colour {
|
|
color: #fff;
|
|
}
|
|
|
|
.fail {
|
|
background-color: var(--red);
|
|
}
|
|
.success {
|
|
background-color: var(--green);
|
|
}
|
|
.default {
|
|
background-color: var(--gray);
|
|
}
|