php-gallery/css/sussy.css
2022-07-21 15:53:04 +01:00

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);
}