Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 8th, 2012  |  syntax: CSS  |  size: 14.00 KB  |  hits: 17  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. body {font-family:Verdana, helvetica, sans-serif; font-size:12px; padding:0; margin:0; background:transparent; padding: 20px;}
  2. div.uwhisp-player {width:370px;height:50px;position: relative;}
  3. div.uwhisp-player div.jp-interface {
  4. width: 370px;
  5. position: absolute;
  6. bottom:0;
  7. background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #5878B5), color-stop(100%, #86CEE0));
  8. background-image: -webkit-linear-gradient(#5878B5, #86CEE0);
  9. background-image: -moz-linear-gradient(#5878B5, #86CEE0);
  10. background-image: -o-linear-gradient(#5878B5, #86CEE0);
  11. background-image: linear-gradient(#5878B5, #86CEE0);
  12. -pie-background: linear-gradient(#5878b5, #86cee0);
  13. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5878b5', endColorstr='#86cee0');
  14. border: 0 solid #DBDBDB;
  15. -moz-border-radius: 3px;
  16. -webkit-border-radius: 3px;
  17. -o-border-radius: 3px;
  18. -ms-border-radius: 3px;
  19. -khtml-border-radius: 3px;
  20. border-radius: 5px;
  21.  
  22.   -webkit-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px;
  23.   -moz-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px;
  24.   -o-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px;
  25.   box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px;
  26.  
  27.   -webkit-transition: -webkit-transform .3s cubic-bezier(0,.5,.5,1), -webkit-border-radius .2s cubic-bezier(0,.5,0,1);  
  28.   -moz-transition:    -moz-transform .3s cubic-bezier(0,.5,.5,1),    -moz-border-radius .2s cubic-bezier(0,.5,0,1);  
  29.   -o-transition:    -o-transform .3s cubic-bezier(0,.5,.5,1),    -o-border-radius .2s cubic-bezier(0,.5,0,1);  
  30.   transition:     transform .3s cubic-bezier(0,.5,.5,1),       border-radius .2s cubic-bezier(0,.5,0,1);
  31.  
  32.   height: 40px;
  33. color: #333;
  34. text-shadow: 0 20px 0 white;
  35. }
  36. div.uwhisp-player div.jp-interface:hover {
  37.   height: 33px;
  38.   -webkit-transition:  height .3s;
  39.   -moz-transition:    height .3s;
  40.   -o-transition:     height .3s;
  41.   transition:     height .3s;
  42. }
  43.  
  44. div.uwhisp-player div.jp-interface ul.jp-controls {
  45.   list-style-type:none;padding:0;margin: 0;position: absolute;
  46.   top:-15px; left: 20px;
  47.  
  48.   -webkit-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 1px 4px -1px;
  49.   -moz-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 1px 4px -1px;
  50.   -o-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 1px 4px -1px;
  51.   box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 1px 4px -1px;
  52.  
  53.   -webkit-transition: -webkit-transform .3s cubic-bezier(0,.5,.5,1), -webkit-border-radius .2s cubic-bezier(0,.5,0,1);  
  54.   -moz-transition:    -moz-transform .3s cubic-bezier(0,.5,.5,1),    -moz-border-radius .2s cubic-bezier(0,.5,0,1);  
  55.   -o-transition:    -o-transform .3s cubic-bezier(0,.5,.5,1),    -o-border-radius .2s cubic-bezier(0,.5,0,1);  
  56.   transition:     transform .3s cubic-bezier(0,.5,.5,1),       border-radius .2s cubic-bezier(0,.5,0,1);
  57.  
  58.   border-radius: 40px;
  59. width: 34px;
  60. height: 34px;
  61. }
  62. div.uwhisp-player div.jp-interface ul.jp-controls:hover {
  63.  -webkit-transform:  scale(1.2);  
  64.      -moz-transform:  scale(1.2);  
  65.      -o-transform:  scale(1.2);  
  66.       transform:  scale(1.2);    
  67.       border-radius: 20px;
  68. }
  69. div.uwhisp-player div.jp-interface ul.jp-controls li {display:inline;}
  70. div.uwhisp-player div.jp-interface ul.jp-controls a {position: absolute;overflow:hidden;text-indent:-9999px;}
  71. div.uwhisp-player a.jp-play,div.uwhisp-player a.jp-pause {
  72.   position: absolute;
  73.   display: inline-block;
  74.   border: none;
  75.   border-radius: 30px;
  76.   width: 20px;
  77.   height: 20px;
  78.   left:7px;
  79.   top: 7px;
  80.  
  81.   cursor: pointer;
  82.  
  83. background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #D64C00), color-stop(100%, #FE1200));
  84. background-image: -webkit-linear-gradient(#D64C00, #FE1200);
  85. background-image: -moz-linear-gradient(#D64C00, #FE1200);
  86. background-image: -o-linear-gradient(#D64C00, #FE1200);
  87. background-image: linear-gradient(#D64C00, #FE1200);
  88. -pie-background: linear-gradient(#D64C00, #FE1200);
  89.  
  90.   -webkit-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 1px 4px -1px;
  91.   -moz-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 1px 4px -1px;
  92.   -o-box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 1px 4px -1px;
  93.   box-shadow: inset rgba(0,0,0,0.2) 0 -3px 4px 1px, inset rgba(252,255,255,0.4) 0 2px 8px 0px, rgba(0,0,0,.8) 0 1px 4px -1px;
  94.  
  95.   -webkit-transition: -webkit-transform .3s cubic-bezier(0,.5,.5,1), -webkit-border-radius .2s cubic-bezier(0,.5,0,1);  
  96.   -moz-transition:    -moz-transform .3s cubic-bezier(0,.5,.5,1),    -moz-border-radius .2s cubic-bezier(0,.5,0,1);  
  97.   -o-transition:    -o-transform .3s cubic-bezier(0,.5,.5,1),    -o-border-radius .2s cubic-bezier(0,.5,0,1);  
  98.   transition:     transform .3s cubic-bezier(0,.5,.5,1),       border-radius .2s cubic-bezier(0,.5,0,1);
  99.  
  100. }
  101. div.uwhisp-player a.jp-play {
  102. }
  103.  
  104. div.uwhisp-player a.jp-play:hover {
  105.  -webkit-transform:  scale(1.2);  
  106.      -moz-transform:  scale(1.2);  
  107.      -o-transform:  scale(1.2);  
  108.       transform:  scale(1.2);    
  109.       border-radius: 20px;
  110.   -webkit-transition: -webkit-transform .3s cubic-bezier(0,.5,.5,1), -webkit-border-radius .2s cubic-bezier(0,.5,0,1);  
  111.   -moz-transition:    -moz-transform .3s cubic-bezier(0,.5,.5,1),    -moz-border-radius .2s cubic-bezier(0,.5,0,1);  
  112.   -o-transition:    -o-transform .3s cubic-bezier(0,.5,.5,1),    -o-border-radius .2s cubic-bezier(0,.5,0,1);  
  113.   transition:     transform .3s cubic-bezier(0,.5,.5,1),       border-radius .2s cubic-bezier(0,.5,0,1);
  114. }
  115. div.uwhisp-player a.jp-play:active {
  116.  -webkit-transform:  scale(.5);  
  117.      -moz-transform:  scale(.5);  
  118.      -o-transform:  scale(.5);  
  119.       transform:  scale(.5);    
  120.       border-radius: 20px;
  121.       border:0;outline: 0;
  122.   -webkit-transition: -webkit-transform .3s cubic-bezier(0,.5,.5,1), -webkit-border-radius .2s cubic-bezier(0,.5,0,1);  
  123.   -moz-transition:    -moz-transform .3s cubic-bezier(0,.5,.5,1),    -moz-border-radius .2s cubic-bezier(0,.5,0,1);  
  124.   -o-transition:    -o-transform .3s cubic-bezier(0,.5,.5,1),    -o-border-radius .2s cubic-bezier(0,.5,0,1);  
  125.   transition:     transform .3s cubic-bezier(0,.5,.5,1),       border-radius .2s cubic-bezier(0,.5,0,1);
  126. }
  127. div.uwhisp-player a.jp-pause {
  128. }
  129. div.uwhisp-player a.jp-pause:hover {
  130. }
  131. div.uwhisp-player a.jp-pause:active {
  132.  -webkit-transform:  scale(.5);  
  133.      -moz-transform:  scale(.5);  
  134.      -o-transform:  scale(.5);  
  135.       transform:  scale(.5);    
  136.       border-radius: 30px;
  137.       border:0;outline: 0;
  138.   -webkit-transition: -webkit-transform .3s cubic-bezier(0,.5,.5,1), -webkit-border-radius .2s cubic-bezier(0,.5,0,1);  
  139.   -moz-transition:    -moz-transform .3s cubic-bezier(0,.5,.5,1),    -moz-border-radius .2s cubic-bezier(0,.5,0,1);  
  140.   -o-transition:    -o-transform .3s cubic-bezier(0,.5,.5,1),    -o-border-radius .2s cubic-bezier(0,.5,0,1);  
  141.   transition:     transform .3s cubic-bezier(0,.5,.5,1),       border-radius .2s cubic-bezier(0,.5,0,1);
  142. }
  143. div.uwhisp-player a.jp-stop {display:none;}
  144. div.uwhisp-player a.jp-stop:hover {display:none;}
  145. div.uwhisp-player div.jp-progress {
  146. background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, white), color-stop(100%, #E3E3E3));
  147. background-image: -webkit-linear-gradient(white, #E3E3E3);
  148. background-image: -moz-linear-gradient(white, #E3E3E3);
  149. background-image: -o-linear-gradient(white, #E3E3E3);
  150. background-image: linear-gradient(white, #E3E3E3);
  151. -pie-background: linear-gradient(#ffffff, #e3e3e3);
  152. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e3e3e3');
  153. -moz-border-radius: 5px;
  154. -webkit-border-radius: 5px;
  155. -o-border-radius: 5px;
  156. -ms-border-radius: 5px;
  157. -khtml-border-radius: 5px;
  158. border-radius: 0 0 5px 5px;
  159. -moz-box-shadow: inset 0 1px 0 0 white;
  160. -webkit-box-shadow: inset 0 1px 0 0 white;
  161. -o-box-shadow: inset 0 1px 0 0 white;
  162. box-shadow: inset 0 1px 0 0 white;
  163. color: #333;
  164. text-shadow: 0 1px 0 white;
  165. bottom: 0;
  166. position: absolute;
  167. width: 370px;
  168. height: 10px;
  169. z-index: 2;
  170. }
  171. div.uwhisp-player div.jp-seek-bar {width:0px;height:100%;cursor:pointer; background: transparent;}
  172. div.uwhisp-player div.jp-play-bar {
  173.  
  174.             display: inline-block;
  175.             height: 100%;
  176.       background-color: #ea661e;
  177.             -moz-border-radius: 3px;
  178.       -webkit-border-radius: 3px;
  179.       border-radius: 0 0 5px 5px;
  180.             -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  181.       -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  182.       box-shadow: 0 1px 0 rgba(255, 255, 255, .5) inset;
  183.       -webkit-transition: width .4s ease-in-out;
  184.       -moz-transition: width .4s ease-in-out;
  185.       -ms-transition: width .4s ease-in-out;
  186.       -o-transition: width .4s ease-in-out;
  187.       transition: width .4s ease-in-out;
  188.       -webkit-background-size: 30px 30px;
  189.             -moz-background-size: 30px 30px;
  190.             background-size: 30px 30px;    
  191.       background-image: -webkit-gradient(linear, left top, right bottom,
  192.                 color-stop(.25, rgba(255, 255, 255, .15)), color-stop(.25, transparent),
  193.                 color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .15)),
  194.                 color-stop(.75, rgba(255, 255, 255, .15)), color-stop(.75, transparent),
  195.                 to(transparent));
  196.             background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  197.                                 transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  198.                                 transparent 75%, transparent);
  199.             background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  200.                                 transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  201.                                 transparent 75%, transparent);
  202.             background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  203.                                 transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  204.                                 transparent 75%, transparent);
  205.             background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  206.                                 transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  207.                                 transparent 75%, transparent);
  208.             background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%,
  209.                                 transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%,
  210.                                 transparent 75%, transparent);            
  211.            
  212.             -webkit-animation: animate-stripes 3s linear infinite;
  213.             -moz-animation: animate-stripes 3s linear infinite;          
  214. /*
  215.  
  216. background-color: #74d04c;
  217.   background: -webkit-gradient(linear, 0 0, 44 44,
  218.     color-stop(0.00, rgba(255,255,255,0.17)),
  219.     color-stop(0.25, rgba(255,255,255,0.17)),
  220.     color-stop(0.26, rgba(255,255,255,0)),
  221.     color-stop(0.50, rgba(255,255,255,0)),
  222.     color-stop(0.51, rgba(255,255,255,0.17)),
  223.     color-stop(0.75, rgba(255,255,255,0.17)),
  224.     color-stop(0.76, rgba(255,255,255,0)),
  225.     color-stop(1.00, rgba(255,255,255,0))
  226.   ), -webkit-gradient(linear, left bottom, left top, color-stop(0, #74d04c), color-stop(1, #9bdd62));
  227.   background: -moz-repeating-linear-gradient(top left -30deg,
  228.     rgba(255,255,255,0.17),
  229.     rgba(255,255,255,0.17) 15px,
  230.     rgba(255,255,255,0) 15px,
  231.     rgba(255,255,255,0) 30px
  232.   ), -moz-linear-gradient(#9bdd62 0%, #74d04c 100%);
  233.   -webkit-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  234.   -moz-box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  235.   box-shadow: inset 0px 1px 0px 0px #dbf383, inset 0px -1px 1px #58c43a;
  236.   border: 1px solid #4c8932;
  237.   -webkit-animation: animate-stripes 2s linear infinite;
  238.  
  239. /*
  240.  
  241. background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ea661e), color-stop(100%, #e42322));
  242. background-image: -webkit-linear-gradient(#ea661e, #e42322);
  243. background-image: -moz-linear-gradient(#ea661e, #e42322);
  244. background-image: -o-linear-gradient(#ea661e, #e42322);
  245. background-image: linear-gradient(#ea661e, #e42322);
  246. -pie-background: linear-gradient(#ea661e, #e42322);
  247. filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ea661e', endColorstr='#e42322');*/
  248. -moz-border-radius: 3px;
  249. -webkit-border-radius: 3px;
  250. -o-border-radius: 3px;
  251. -ms-border-radius: 3px;
  252. -khtml-border-radius: 3px;
  253. border-radius: 0 0 2px 3px;
  254. width: 0px;
  255. height: 10px;
  256. position: relative;
  257. }
  258.        
  259.         @-webkit-keyframes animate-stripes {
  260.       0% {background-position: 0 0;} 100% {background-position: 60px 0;}
  261.         }
  262.        
  263.        
  264.         @-moz-keyframes animate-stripes {
  265.       0% {background-position: 0 0;} 100% {background-position: 60px 0;}
  266.         }
  267.    
  268. div.uwhisp-player .uw-bola {display: none;
  269. }
  270. div.uwhisp-player div.jp-current-time,div.uwhisp-player div.jp-duration{display:none
  271. }
  272. div.uwhisp-player div.jp-duration {text-align: right;}
  273. div.jp-duration-pre {display:none}
  274. div.uwhisp-player div.jp-type-single div.jp-current-time{display:none}
  275. div.uwhisp-player div.jp-type-single div.jp-duration {display:none}
  276. div.uwhisp-player #uwhisp-logo {
  277. background: url(player.png) -40px -9px no-repeat;
  278. height: 50px;
  279. right: 34px;
  280. list-style-type: none;
  281. margin: 0;
  282. padding: 0;
  283. position: absolute;
  284. top: -20px;
  285. width: 235px;
  286. z-index: 1;
  287. }
  288. div.uwhisp-player #uwhisp-go-share{
  289. height: 9px;
  290. cursor: pointer;
  291. right: 48px;
  292. margin: 0;
  293. position: absolute;
  294. width: 40px;
  295. background: transparent;
  296. top: 29px;
  297. z-index: 99;
  298. }
create a new version of this paste RAW Paste Data