Input by seyed-mohsen-mousavi
#212121
1/* level settings ๐ */ 2 3.slider { 4 /* slider */ 5 --slider-width: 100%; 6 --slider-height: 50px; 7 --slider-bg: rgb(82, 82, 82); 8 --slider-border-radius: 9px; 9 /* level */ 10 --level-color: #fff; 11 --level-transition-duration: 0.1s; 12 /* icon */ 13 --icon-margin: 15px; 14 --icon-color: var(--slider-bg); 15 --icon-size: 25px; 16} 17 18.slider { 19 position: relative; 20 cursor: pointer; 21 display: -webkit-inline-box; 22 display: -ms-inline-flexbox; 23 display: inline-flex; 24 -webkit-box-orient: horizontal; 25 -webkit-box-direction: reverse; 26 -ms-flex-direction: row-reverse; 27 flex-direction: row-reverse; 28 -webkit-box-align: center; 29 -ms-flex-align: center; 30 align-items: center; 31} 32 33.slider .volume { 34 display: inline-block; 35 vertical-align: top; 36 margin-right: var(--icon-margin); 37 color: var(--icon-color); 38 width: var(--icon-size); 39 height: auto; 40 position: absolute; 41 left: 0; 42 pointer-events: none; 43} 44 45.slider .level { 46 -webkit-appearance: none; 47 -moz-appearance: none; 48 appearance: none; 49 width: var(--slider-width); 50 height: var(--slider-height); 51 background: var(--slider-bg); 52 overflow: hidden; 53 border-radius: var(--slider-border-radius); 54 -webkit-transition: height var(--level-transition-duration); 55 -o-transition: height var(--level-transition-duration); 56 transition: height var(--level-transition-duration); 57 cursor: inherit; 58 transform: rotate(270deg); 59} 60 61.slider .level::-webkit-slider-thumb { 62 -webkit-appearance: none; 63 width: 0; 64 height: 0; 65 -webkit-box-shadow: -200px 0 0 200px var(--level-color); 66 box-shadow: -200px 0 0 200px var(--level-color); 67} 68
ย
132 views
132 views
MIT License