More wore on components

This commit is contained in:
Pax1601
2024-04-11 08:10:34 +02:00
parent 45e290d656
commit f18212dac4
21 changed files with 333 additions and 138 deletions

View File

@@ -26,4 +26,71 @@
/* IE and Edge */
scrollbar-width: none;
/* Firefox */
}
}
input[type="range"] {
/* removing default appearance */
-webkit-appearance: none;
appearance: none;
/* creating a custom design */
width: 100%;
cursor: pointer;
outline: none;
border-radius: 15px;
/* overflow: hidden; remove this line*/
/* New additions */
height: 6px;
background: #4B5563;
}
/* Thumb: webkit */
input[type="range"]::-webkit-slider-thumb {
/* removing default appearance */
-webkit-appearance: none;
appearance: none;
/* creating a custom design */
height: 22px;
width: 22px;
background-color: #4B5563;
border-radius: 50%;
border: 1px solid #6B7280;
/* box-shadow: -407px 0 0 400px #4B5563; emove this line */
transition: .2s ease-in-out;
}
/* Thumb: Firefox */
input[type="range"]::-moz-range-thumb {
height: 15px;
width: 15px;
background-color: #4B5563;
border-radius: 50%;
border: none;
border: 1px solid #6B7280;
/* box-shadow: -407px 0 0 400px #4B5563; emove this line */
transition: .2s ease-in-out;
}
/* Hover, active & focus Thumb: Webkit */
input[type="range"]::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 5px #3F83F822
}
input[type="range"]:active::-webkit-slider-thumb {
box-shadow: 0 0 0 7px #3F83F855
}
input[type="range"]:focus::-webkit-slider-thumb {
box-shadow: 0 0 0 7px #3F83F855
}
/* Hover, active & focus Thumb: Firefox */
input[type="range"]::-moz-range-thumb:hover {
box-shadow: 0 0 0 10px #3F83F822
}
input[type="range"]:active::-moz-range-thumb {
box-shadow: 0 0 0 13px #3F83F855
}
input[type="range"]:focus::-moz-range-thumb {
box-shadow: 0 0 0 13px #3F83F855
}