Register-Page-Bank-Sampah/assets/css/custom.css

106 lines
1.7 KiB
CSS

/* :root {
--blue: #1e90ff;
--black: #121212;
} */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Poppins", sans-serif;
color: var(--black);
font-size: 13px;
}
.card {
width: 400px;
max-width: 90%;
background: rgba(255, 255, 255, 0.4);
}
.bg-image {
background: url("../img/bg-banksampah.png");
width: 100%;
min-height: 100vh;
background-repeat: no-repeat;
background-position: -80px;
background-size: cover;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="checkbox"]:focus,
select.form-select:focus,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="checkbox"],
select.form-select {
color: #272829;
font-weight: 600;
font-size: 0.9rem;
border: none;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
input[type="checkbox"]:checked {
background-color: #fd7402;
}
/* Utilities */
.underline-scribble {
text-decoration: underline wavy red;
}
.backdrop-blur {
backdrop-filter: blur(15px);
}
.bg-orange {
background: #fd7402;
}
.prevent-select {
-webkit-user-select: none; /* Safari */
-ms-user-select: none; /* IE 10 and IE 11 */
user-select: none; /* Standard syntax */
}
.fade-in {
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 300ms;
}
.fade-out {
opacity: 0;
animation-name: fadeOutOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-out;
animation-duration: 300ms;
}
@keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeOutOpacity {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}