No edit summary Tag: Manual revert |
No edit summary |
||
| Line 9: | Line 9: | ||
<style> | <style> | ||
.player { | .player { | ||
background-color: # | background-color: #f81472; | ||
width: 330px; | width: 330px; | ||
height: 190px; | height: 190px; | ||
position: relative; | position: relative; | ||
border-radius: 8px; | border-radius: 8px; | ||
box-shadow: 0 8px 0 0 # | box-shadow: 0 8px 0 0 #95003d; | ||
z-index: 1; | |||
} | } | ||
.record { | .record { | ||
| Line 49: | Line 50: | ||
height: 15px; | height: 15px; | ||
width: 15px; | width: 15px; | ||
border: 20px solid | border: 20px solid hsl(205,100%,41%); | ||
border-radius: 50%; | border-radius: 50%; | ||
} | } | ||
.tone-arm { | .tone-arm { | ||
height: 90px; | height: 90px; | ||
| Line 97: | Line 99: | ||
height: 28px; | height: 28px; | ||
width: 28px; | width: 28px; | ||
background-color: | background-color: hsl(194,100%,50%); | ||
border-radius: 50%; | border-radius: 50%; | ||
position: absolute; | position: absolute; | ||
bottom: 20px; | bottom: 20px; | ||
right: 30px; | right: 30px; | ||
border: 3.5px solid hsl(205,100%,41%); | |||
border: 3.5px solid | |||
outline: none; | outline: none; | ||
padding: 0 !important; | |||
cursor: pointer; | cursor: pointer; | ||
} | } | ||
| Line 116: | Line 118: | ||
left: 233px; | left: 233px; | ||
top: 60px; | top: 60px; | ||
background-color: | background-color: hsl(194,100%,50%); | ||
outline: none; | outline: none; | ||
border-radius: 3px; | border-radius: 3px; | ||
border: 6px solid | border: 6px solid hsl(205,100%,41%); | ||
} | } | ||
.slider::-webkit-slider-thumb { | .slider::-webkit-slider-thumb { | ||
Revision as of 21:16, 13 June 2023
Sample result
Press the button to play/pause
Adjust volume with slider