Form by ahmed150up
#212121
1.audio-player { 2 display: flex; 3 align-items: center; 4 justify-content: center; 5 width: 300px; 6 height: 80px; 7 background-color: #f3f3f3; 8 border-radius: 8px; 9 padding: 8px; 10 box-sizing: border-box; 11} 12 13.player-controls { 14 flex-grow: 1; 15 display: flex; 16 flex-direction: column; 17} 18 19.song-info { 20 margin-bottom: 4px; 21} 22 23.song-title { 24 font-size: 16px; 25 color: #333; 26 margin: 0; 27} 28 29.artist { 30 font-size: 12px; 31 color: #666; 32 margin: 0; 33} 34 35.progress-bar { 36 width: 100%; 37 height: 4px; 38 background-color: #ddd; 39 border-radius: 2px; 40 overflow: hidden; 41} 42 43.progress { 44 width: 0; 45 height: 100%; 46 background-color: #ff5500; 47 animation: progress-animation 10s linear infinite; 48} 49 50.buttons { 51 display: flex; 52 align-items: center; 53 margin-top: 4px; 54} 55 56button { 57 background: none; 58 border: none; 59 cursor: pointer; 60 outline: none; 61} 62 63.play-btn, 64.pause-btn, 65.skip-btn, 66.volume-btn { 67 font-size: 16px; 68 color: #666; 69 margin-right: 8px; 70 transition: transform 0.2s ease-in-out; 71} 72 73.play-btn:hover, 74.pause-btn:hover, 75.skip-btn:hover, 76.volume-btn:hover { 77 transform: scale(1.2); 78} 79 80.volume-slider { 81 width: 100px; 82 height: 5px; 83 background-color: #ccc; 84 position: relative; 85 margin-left: 10px; 86} 87 88.volume-slider-bar { 89 height: 100%; 90 background-color: #666; 91} 92 93.volume-slider-handle { 94 width: 16px; 95 height: 16px; 96 background-color: #666; 97 position: absolute; 98 top: 50%; 99 transform: translate(-50%, -50%); 100 border-radius: 50%; 101 cursor: pointer; 102} 103 104@keyframes progress-animation { 105 0% { 106 width: 0; 107 } 108 109 100% { 110 width: 100%; 111 } 112} 113
1.6K views
1.6K views
MIT License