<style> .my_volume {background: #000000 !important;} </style>
.my_player_adaptive {position:fixed; bottom:0; left:0; width:100%; height:55px; background:#fcfcfc; z-index:10000; border-top:1px solid #dddddd;} .my_player_adaptive .my_player_body { width: 100%; margin: 0 auto; max-width: 1000px; padding: 0 20px; position: relative; box-sizing: border-box;} .my_player_adaptive .my_cover {transition: all .4s; float:left; width:45px; height:45px; box-sizing:border-box; position:relative; margin: 5px 10px; background:#ddd; background-size:cover; border-radius:4px;} .my_player_adaptive .my_cover:hover {z-index:20000; width:200px; height:200px; margin-top:-150px; margin-right:-145px;} .my_player_adaptive .my_play {float:left; width:55px; height:55px; margin-right:10px; background:url(//myradio24.com/img/play.png) no-repeat center; background-size: 65%; background-position: 55% 50%; opacity:.3; cursor:pointer;} .my_player_adaptive .my_play:hover {opacity:.7;} .my_player_adaptive .my_playing { background-image:url(//myradio24.com/img/pause.png);} .my_player_adaptive .my_songinfo { float:left; position:relative; font:14px Open Sans; font-weight:400; color:#888; height: 55px; max-width: 50%;} .my_player_adaptive .my_songtitle { float:left; position:relative; margin-top:9px; color:#000; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden;} .my_player_adaptive .my_artist { float:left; position:relative; width: 100%; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; margin-top:3px;} .my_player_adaptive .my_volumeplayer { float:right; width:55px; height:55px; cursor:pointer; margin-left:10px; opacity:.3; position: relative; background:url(//myradio24.com/player/adaptive/volume.svg) no-repeat center; background-size: 40%;} .my_player_adaptive .my_volumeplayer:hover{ opacity:1;} .my_player_adaptive .my_volumediv { position:absolute; bottom: 45px; left:50%; margin-left:-15px; width:30px; height:120px; background:#fff; display:none; box-shadow: 0 2px 2px 0 rgba(0,0,0,.24), 0 0 2px 0 rgba(0,0,0,.12); border-radius: 2px; border: 1px solid #eee; z-index: 999; box-sizing:border-box; padding:10px;} .my_player_adaptive .my_volumeplayer:hover .my_volumediv { display:block;} .my_player_adaptive .my_volume { position:absolute; bottom: -10px; left: 0; width: 100%; height:100%; background: #A9A9A9; border-radius:5px;} .my_player_adaptive .my_volumebody { float:left; position:relative; width: 100%; height: 100%; background: #ddd; border-radius: 5px; overflow: hidden;} @media screen and (max-width:700px) { .my_player_adaptive .my_player_body {width: 100%; margin: 0 auto; max-width: 1200px; padding: 0; position: relative; box-sizing: border-box; } }
<div class="my_info" style="visibility:hidden;"> <table class="my_radio_width"> <tr><td colspan="2" align="center"> %htmlimg%<br> </td></tr> </div>
<div data-myinfo="img" style="width:45px; height:45px;"></div>