93 lines
2.4 KiB
SCSS
93 lines
2.4 KiB
SCSS
$font-stack: Helvetica, sans-serif;
|
|
$primary_color: #006d18;
|
|
$secondary_color: #239c78;
|
|
$bg_grad_color_1: #58f5c6;
|
|
$bg_grad_color_2: #01278d;
|
|
$bg_grad_color_3: #fac95f;
|
|
$bg_grad_color_4: #a30ddf;
|
|
$short-fade: 0.4s;
|
|
$long-fade: 1.2s;
|
|
|
|
* {
|
|
font: $font-stack;
|
|
}
|
|
|
|
body {
|
|
padding: 10%;
|
|
background-color: $primary_color;
|
|
background: linear-gradient(-45deg, $bg_grad_color_1, $bg_grad_color_2, $bg_grad_color_3, $bg_grad_color_4);
|
|
background-size: 400% 400%;
|
|
animation: gradient 12s ease infinite;
|
|
height: 100vh;
|
|
}
|
|
|
|
@keyframes gradient {
|
|
0% {
|
|
background-position: 0% 50%;
|
|
}
|
|
50% {
|
|
background-position: 100% 50%;
|
|
}
|
|
100% {
|
|
background-position: 0% 50%;
|
|
}
|
|
}
|
|
|
|
h1 {
|
|
text-align: center;
|
|
}
|
|
input {
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: auto;
|
|
padding: 1em;
|
|
padding-left: 4em;
|
|
box-sizing: border-box;
|
|
border: 0.2em solid $secondary_color;
|
|
border-radius: 1em;
|
|
background-size: 2em;
|
|
background-position: 1em;
|
|
background-repeat: no-repeat;
|
|
background-color: rgba(255,255,255,0.2);
|
|
backdrop-filter: blur(5px);
|
|
background-image: url('../images/youtube_bw.png');
|
|
}
|
|
input:focus {
|
|
transition: width $short-fade ease-in-out, border-radius $long-fade ease-in-out, background-color $long-fade ease-in-out, background-image $long-fade ease-in-out;
|
|
width: 70%;
|
|
color: $primary_color;
|
|
border-radius: 0.1em;
|
|
background-color: rgba(0,0,0,0.7);
|
|
backdrop-filter: blur(5px);
|
|
background-image: url('../images/youtube_wb.png');
|
|
}
|
|
input:not(:placeholder-shown){
|
|
width: auto;
|
|
}
|
|
button {
|
|
text-align: center;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
width: 30%;
|
|
padding: 1em;
|
|
padding-left: 4em;
|
|
box-sizing: border-box;
|
|
border: 0.2em solid $secondary_color;
|
|
border-radius: 1em;
|
|
background-size: 2em;
|
|
background-position: 1em;
|
|
background-repeat: no-repeat;
|
|
background-color: rgba(255,255,255,0.2);
|
|
backdrop-filter: blur(5px);
|
|
background-image: url('../images/download_bw.png');
|
|
}
|
|
button:focus {
|
|
transition: width $short-fade ease-in-out, border-radius $long-fade ease-in-out, background-color $long-fade ease-in-out, background-image $long-fade ease-in-out;
|
|
width: 30%;
|
|
color: $primary_color;
|
|
border-radius: 0.1em;
|
|
background-color: rgba(0,0,0,0.7);
|
|
backdrop-filter: blur(5px);
|
|
background-image: url('../images/download_wb.png');
|
|
} |