Advertisement
yLii

Audio css and html

Jan 22nd, 2017
123
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1.             .playerbuttonbg {
  2.                 position: absolute;
  3.                 left: 20px;
  4.                 top: 20px;
  5.                 width: 19px;
  6.                 height: 19px;
  7.                 background-color: #ffffff;
  8.                 padding: 10px;
  9.                 -webkit-border-radius: 40px;
  10.                 -moz-border-radius: 40px;
  11.                 border-radius: 40px;
  12.                 opacity: .4;
  13.                 filter: alpha(opacity=40);
  14.                 -moz-opacity: 0.4;
  15.                 -khtml-opacity: 0.4;
  16.                 transition: opacity .7s ease-in-out;
  17.                 -moz-transition: opacity .7s ease-in-out;
  18.                 -webkit-transition: opacity .7s ease-in-out;
  19.             }
  20.            
  21.             .playerbuttonbg:hover {
  22.                 opacity: 1;
  23.                 filter: alpha(opacity=100);
  24.                 -moz-opacity: 1;
  25.                 -khtml-opacity: 1;
  26.             }
  27.        
  28.             .newplayerbutton {
  29.                 position: relative;
  30.                 width: 19px;
  31.                 height: 19px;
  32.                 overflow: hidden;
  33.             }
  34.            
  35.             .playerbuttonhug {
  36.                 position: absolute;
  37.                 top: -18px;
  38.                 left: -7px;
  39.             }
  40.        
  41.             .tumblr_audio_player {
  42.                 height: 90px;
  43.                 width: 270px;
  44.                 -moz-transform: scale(0.60, 0.60);
  45.                 -webkit-transform: scale(0.60, 0.60);
  46.                 -o-transform: scale(0.60, 0.60);
  47.                 -ms-transform: scale(0.60, 0.60);
  48.                 transform: scale(0.60, 0.60);
  49.                 -moz-transform-origin: top left;
  50.                 -webkit-transform-origin: top left;
  51.                 -o-transform-origin: top left;
  52.                 -ms-transform-origin: top left;
  53.                 transform-origin: top left;
  54.             }
  55.            
  56.             .audioimgwrapper {
  57.                 position: absolute;
  58.                 left: 0px;
  59.                 top: 0px;
  60.                 -webkit-border-radius: 40px;
  61.                 -moz-border-radius: 40px;
  62.                 border-radius: 40px;
  63.                 overflow: hidden;
  64.                 width: 79px;
  65.                 height: 79px;
  66.             }
  67.            
  68.             .audioimgwrapper img {
  69.                 width: 100%;
  70.                 height: auto;
  71.                 -webkit-border-radius: 40px;
  72.                 -moz-border-radius: 40px;
  73.                 border-radius: 40px;                
  74.             }
  75.            
  76.             .trackdetails {
  77.                 width: auto;
  78.                 border: 1px solid black;
  79.                 display:inline-block;
  80.                 margin-left: 90px;
  81.                 min-height: 85px;
  82.             }
  83.            
  84.             .audiowrapper {
  85.                 position: relative;
  86.                 display:inline-block;
  87.             }
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96.  
  97.  
  98. {block:AudioPlayer}
  99.         <div class="audiowrapper">
  100.         {block:AlbumArt}
  101.             <div class="audioimgwrapper"><img src="{AlbumArtURL}"></div>
  102.         {/block:AlbumArt}
  103.        
  104.         <div class="playerbuttonbg">
  105.             <div class="newplayerbutton">
  106.                 <div class="playerbuttonhug">
  107.            
  108.                     {AudioPlayerWhite}
  109.            
  110.                 </div>
  111.             </div>
  112.         </div>
  113.        
  114.         <div class="trackdetails">
  115.            
  116.                 {block:TrackName}{TrackName}{/block:TrackName}<br/>
  117.                 {block:Artist}Artist: {Artist}{/block:Artist}<br/>
  118.                 {block:Album}Album: {Album}{/block:Album}<br/>
  119.                 {PlayCountWithLabel}
  120.    
  121.         </div>
  122.         </div>
  123.         {/block:AudioPlayer}
  124.    
  125.         {block:Caption}{Caption}{/block:Caption}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement