41 lines
814 B
CSS
41 lines
814 B
CSS
#volume {
|
|
width: 40%; /* Width of the outside container */
|
|
}
|
|
|
|
/* The slider itself */
|
|
.slider {
|
|
-webkit-appearance: none;
|
|
width: 50%;
|
|
height: 1.6em;
|
|
background: #d3d3d3;
|
|
outline: none;
|
|
opacity: 0.7;
|
|
-webkit-transition: .2s;
|
|
transition: opacity .2s;
|
|
font-size: 0.8vw;
|
|
}
|
|
|
|
/* Mouse-over effects */
|
|
.slider:hover {
|
|
opacity: 1; /* Fully shown on mouse-over */
|
|
}
|
|
|
|
/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */
|
|
.slider::-webkit-slider-thumb {
|
|
-webkit-appearance: none; /* Override default look */
|
|
appearance: none;
|
|
width: 2em;
|
|
height: 2em;
|
|
background: #000;
|
|
cursor: pointer;
|
|
font-size: 0.8vw;
|
|
}
|
|
|
|
.slider::-moz-range-thumb {
|
|
width: 2em;
|
|
height: 2em;
|
|
background: #000;
|
|
cursor: pointer;
|
|
font-size: 0.8vw;
|
|
}
|