Top List List

Music playlist codepen

tuanphan

Posted October 27, 2020

tuanphan

Circle Member
- 34.9k
- 1,152

- Share

Posted October 27, 2020

Add Code Block > Paste this code

Call of Duty: Black Ops 3 Jack Wall Broken Hearts in Stereo Starbelly Approach Nathan East Star Spangled Banner America Broken Hearts in Stereo Starbelly

.playlist--list { overflow-y: scroll; border: 1px solid #ccc; border-left: none; height: 340px; list-style: none; padding: 0; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; font-size: 14px; line-height: .95; color: #565D64; display: inline-block; float: right; margin: 0; width: calc[100% - 343px]; } @media [max-width: 600px] { .playlist--list { display: block; width: 340px; float: none; border: 1px solid #ccc; border-top: 0; } } .playlist--list li { margin: 0; font-size: 20px; font-weight: bold; color: #222; padding: 0; cursor: pointer; padding: 20px 10px; background: #ffffff; border-bottom: 1px solid #ccc; } .playlist--list li:last-child { border-bottom: 0; } .playlist--list li:hover { background-color: #3498db; color: #ffffff; } .playlist--list li.active { background-color: #CCDADE; color: #565D64; } .playlist--list li span { pointer-events: none; } .playlist--list li .artist { display: block; font-weight: normal; margin-top: 5px; color: #666; font-size: 18px; } .plyr { display: inline-block; } .plyr .plyr__controls { background-size: cover !important; height: 342px; width: 342px; background: rgba[0, 0, 255, 0.4]; display: inline-block; border: 1px solid #ccc; border-right: 0; } @media [max-width: 600px] { .plyr .plyr__controls { border: 1px solid #ccc; } } .plyr .plyr__controls .plyr__time--current { color: #999; } .plyr .plyr__controls [data-plyr="play"] { display: block; margin: 140px auto 0; } .plyr .plyr__controls [data-plyr="play"] svg { fill: white; } .plyr .plyr__controls [data-plyr="pause"] { margin: 140px auto 0; } .plyr .plyr__controls [data-plyr="pause"] svg { fill: #999; } .plyr .plyr__controls [data-plyr="pause"]:hover svg { fill: white; } .plyr .plyr__controls .plyr__progress { position: relative; bottom: -115px; margin: 0; } .plyr .plyr__controls .plyr__time { position: relative; bottom: -115px; } .plyr .plyr__controls [data-plyr="mute"] { position: relative; bottom: -115px; fill: #ccc; } .plyr .plyr__controls .plyr__volume { display: inline-block; position: relative; bottom: -115px; max-width: 55px; } .plyr--playing [data-plyr="play"] { display: none !important; } .plyr--playing [data-plyr="pause"] { display: block !important; } .plyr--stopped .plyr__progress, .plyr--stopped .plyr__time, .plyr--stopped [data-plyr="mute"], .plyr--stopped .plyr__volume { display: none !important; } .playlist { display: inline-block; vertical-align: middle; width: 100%; box-shadow: 0 2px 3px 2px rgba[0, 0, 0, 0.3]; } @media [max-width: 600px] { .playlist { width: auto; } } section { width: 100%; } @media [max-width: 600px] { section { width: 342px; margin: 0 auto; } } section:before { content: ''; display: inline-block; height: 100vh; vertical-align: middle; margin-right: -0.25em; /* Adjusts for spacing */ } main { width: 80%; margin: 0 auto; } body { margin: 0; background: #f94f4c; } //Using JS Audio Player Plyr plyr.setup[document.querySelector['.plyr']]; var radio = document.querySelector['.plyr'].plyr; var player = document.querySelector['.playlist']; var playerControls = document.querySelector['.plyr__controls']; var songs = player.querySelectorAll['.playlist--list li']; var i; var active = null; for[i = 0; i

tuanphan

tuanphan

Bài Viết Liên Quan

Toplist mới

Bài mới nhất

Chủ Đề