134 lines
2.7 KiB
CSS
134 lines
2.7 KiB
CSS
{813b4966ff7d5bb9e3135bbe19f369581aae5f69 true 2730 style.css 0xc002e3b490}
*{
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Poppins', sans-serif;
|
|
}
|
|
body{
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-height: 100vh;
|
|
background: linear-gradient(#FD8D58, #DC611E);
|
|
padding: 20px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
body.angry{
|
|
background: linear-gradient(#FD8D58, #DC611E);
|
|
}
|
|
body.confuse{
|
|
background: linear-gradient(#FEA954, #DA7315);
|
|
}
|
|
body.like{
|
|
background: linear-gradient(#FED151, #DE981F);
|
|
}
|
|
.wrapper{
|
|
background: #f6f6f6;
|
|
padding: 30px 40px 40px;
|
|
border-radius: 10px;
|
|
max-width: 350px;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
box-shadow: 0px 10px 15px rgba(0,0,0,0.1);
|
|
}
|
|
.wrapper .section{
|
|
height: 140px;
|
|
width: 140px;
|
|
overflow: hidden;
|
|
}
|
|
.wrapper .section .emojis{
|
|
height: 500%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
.wrapper .section li{
|
|
height: 20%;
|
|
width: 100%;
|
|
list-style: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
.section li img{
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
.wrapper .slider{
|
|
margin-top: 40px;
|
|
height: 12px;
|
|
width: 100%;
|
|
position: relative;
|
|
background: #d9d9d9;
|
|
border-radius: 50px;
|
|
}
|
|
.slider input{
|
|
height: 100%;
|
|
width: 100%;
|
|
-webkit-appearance: none;
|
|
position: absolute;
|
|
background: none;
|
|
outline: none;
|
|
top: 0;
|
|
z-index: 2;
|
|
}
|
|
.slider input::-webkit-slider-thumb{
|
|
-webkit-appearance: none;
|
|
height: 20px;
|
|
width: 20px;
|
|
background: none;
|
|
cursor: pointer;
|
|
}
|
|
.slider .progress-bar{
|
|
height: 100%;
|
|
width: 0%;
|
|
background: linear-gradient(45deg,#FD8D58, #DC611E);
|
|
border-radius: 50px;
|
|
position: relative;
|
|
}
|
|
body.angry .progress-bar{
|
|
background: linear-gradient(45deg,#FD8D58, #DC611E);
|
|
}
|
|
body.confuse .progress-bar{
|
|
background: linear-gradient(45deg,#FEA954, #DA7315);
|
|
}
|
|
body.like .progress-bar{
|
|
background: linear-gradient(45deg,#FED151, #DE981F);
|
|
}
|
|
.slider .thumb{
|
|
height: 25px;
|
|
width: 25px;
|
|
background: #DC611E;
|
|
border-radius: 50%;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 1;
|
|
padding: 2px;
|
|
}
|
|
body.angry .thumb{
|
|
background: #DC611E;
|
|
}
|
|
body.confuse .thumb{
|
|
background: #DA7315;
|
|
}
|
|
body.like .thumb{
|
|
background: #DE981F;
|
|
}
|
|
.slider .thumb span{
|
|
height: 100%;
|
|
width: 100%;
|
|
border: 2px solid #f6f6f6;
|
|
border-radius: 50%;
|
|
background: linear-gradient(#FD8D58, #DC611E);
|
|
display: block;
|
|
}
|
|
body.angry .thumb span{
|
|
background: linear-gradient(#FD8D58, #DC611E);
|
|
}
|
|
body.confuse .thumb span{
|
|
background: linear-gradient(#FEA954, #DA7315);
|
|
}
|
|
body.like .thumb span{
|
|
background: linear-gradient(#FED151, #DE981F);
|
|
} |