70 lines
1.2 KiB
CSS
70 lines
1.2 KiB
CSS
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
.container.curtain-container {
|
|
position: relative;
|
|
margin-top: 10%;
|
|
width: 18rem;
|
|
height: 9rem;
|
|
background-color: #f7f7f7;
|
|
border-radius: 5px;
|
|
box-shadow: 10px 10px 30px 15px rgba(0, 0, 0, 0.247);
|
|
}
|
|
|
|
.open-container {
|
|
position: absolute;
|
|
width: 18rem;
|
|
background-color: #f79071;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.slider {
|
|
-webkit-appearance: none;
|
|
width: 9rem;
|
|
position: absolute;
|
|
left: 75%;
|
|
top: 50%;
|
|
transform: translateY(-50%) rotateZ(90deg);
|
|
background: transparent;
|
|
outline: none;
|
|
}
|
|
|
|
.slider::-webkit-slider-runnable-track {
|
|
-webkit-appearance: none;
|
|
height: 5px;
|
|
background-color: #1b1c1d;
|
|
border-radius: 50px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
width: 18px;
|
|
height: 18px;
|
|
border-radius: 50%;
|
|
background: #1b1c1d;
|
|
position: relative;
|
|
transition: all;
|
|
top: -5.5px;
|
|
}
|
|
|
|
.slider::-webkit-slider-thumb:hover {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.span-open {
|
|
-webkit-user-select: none;
|
|
font-family: "Lato", Sans-serif;
|
|
font-weight: bold;
|
|
font-size: 3rem;
|
|
text-emphasis: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|