Input by Darlley
#e8e8e8
1.audio.green-audio-player { 2 width: 400px; 3 min-width: 300px; 4 height: 56px; 5 box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.07); 6 display: flex; 7 justify-content: space-between; 8 align-items: center; 9 padding-left: 24px; 10 padding-right: 24px; 11 border-radius: 4px; 12 user-select: none; 13 -webkit-user-select: none; 14 background-color: #fff; 15} 16 17.audio.green-audio-player .play-pause-btn { 18 cursor: pointer; 19} 20 21.audio.green-audio-player .slider { 22 flex-grow: 1; 23 background-color: #d8d8d8; 24 cursor: pointer; 25 position: relative; 26} 27 28.audio.green-audio-player .slider .progress { 29 background-color: #44bfa3; 30 border-radius: inherit; 31 position: absolute; 32 pointer-events: none; 33} 34 35.audio.green-audio-player .slider .progress .pin { 36 height: 16px; 37 width: 16px; 38 border-radius: 8px; 39 background-color: #44bfa3; 40 position: absolute; 41 pointer-events: all; 42 box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.32); 43} 44 45.audio.green-audio-player .controls { 46 font-family: "Roboto", sans-serif; 47 font-size: 16px; 48 line-height: 18px; 49 color: #55606e; 50 display: flex; 51 flex-grow: 1; 52 justify-content: space-between; 53 align-items: center; 54 margin-left: 24px; 55 margin-right: 24px; 56} 57 58.audio.green-audio-player .controls .slider { 59 margin-left: 16px; 60 margin-right: 16px; 61 border-radius: 2px; 62 height: 4px; 63} 64 65.audio.green-audio-player .controls .slider .progress { 66 width: 0; 67 height: 100%; 68} 69 70.audio.green-audio-player .controls .slider .pin { 71 right: -8px; 72 top: -6px; 73} 74 75.audio.green-audio-player .controls span { 76 cursor: default; 77} 78 79.audio.green-audio-player .volume { 80 position: relative; 81} 82 83.audio.green-audio-player .volume .volume-btn { 84 cursor: pointer; 85} 86 87.audio.green-audio-player .volume .volume-btn .open path { 88 fill: #44bfa3; 89} 90 91.audio.green-audio-player .volume .volume-controls { 92 width: 30px; 93 height: 135px; 94 background-color: rgba(0, 0, 0, 0.62); 95 border-radius: 7px; 96 position: absolute; 97 left: -3px; 98 bottom: 52px; 99 flex-direction: column; 100 align-items: center; 101 display: flex; 102} 103 104.audio.green-audio-player .volume .volume-controls.hidden { 105 display: none; 106} 107 108.audio.green-audio-player .volume .volume-controls .slider { 109 margin-top: 12px; 110 margin-bottom: 12px; 111 width: 6px; 112 border-radius: 3px; 113} 114 115.audio.green-audio-player .volume .volume-controls .slider .progress { 116 bottom: 0; 117 height: 100%; 118 width: 6px; 119} 120 121.audio.green-audio-player .volume .volume-controls .slider .progress .pin { 122 left: -5px; 123 top: -8px; 124} 125
933 views
933 views
MIT License