API tools faq
paste
Advertisement
Guest User

Player Css

a guest
Mar 6th, 2013
236
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.39 KB | None | 0 0
raw download clone embed print report
  1. .audioplayer
  2. {
  3.     height: 2.5em; /* 40 */
  4.     color: #fff;
  5.     text-shadow: 1px 1px 0 #000;
  6.     border: 1px solid #222;
  7.     position: relative;
  8.     z-index: 1;
  9.     background: #333;
  10.     background: -webkit-gradient( linear, left top, left bottom, from( #444 ), to( #222 ) );
  11.     background: -webkit-linear-gradient( top, #444, #222 );
  12.     background: -moz-linear-gradient( top, #444, #222 );
  13.     background: -ms-radial-gradient( top, #444, #222 );
  14.     background: -o-linear-gradient( top, #444, #222 );
  15.     background: linear-gradient( top, #444, #222 );
  16.     -webkit-box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 ); /* 20 */
  17.     -moz-box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 ); /* 20 */
  18.     box-shadow: inset 0 1px 0 rgba( 255, 255, 255, .15 ), 0 0 1.25em rgba( 0, 0, 0, .5 ); /* 20 */
  19.     -webkit-border-radius: 2px;
  20.     -moz-border-radius: 2px;
  21.     border-radius: 2px;
  22. }
  23.     .audioplayer-mini
  24.     {
  25.         width: 2.5em; /* 40 */
  26.         margin: 0 auto;
  27.     }
  28.     .audioplayer > div
  29.     {
  30.         position: absolute;
  31.     }
  32.     .audioplayer-playpause
  33.     {
  34.         width: 2.5em; /* 40 */
  35.         height: 100%;
  36.         text-align: left;
  37.         text-indent: -9999px;
  38.         cursor: pointer;
  39.         z-index: 2;
  40.         top: 0;
  41.         left: 0;
  42.     }
  43.         .audioplayer:not(.audioplayer-mini) .audioplayer-playpause
  44.         {
  45.             border-right: 1px solid #555;
  46.             border-right-color: rgba( 255, 255, 255, .1 );
  47.         }
  48.         .audioplayer-mini .audioplayer-playpause
  49.         {
  50.             width: 100%;
  51.         }
  52.         .audioplayer-playpause:hover,
  53.         .audioplayer-playpause:focus
  54.         {
  55.             background-color: #222;
  56.         }
  57.         .audioplayer-playpause a
  58.         {
  59.             display: block;
  60.         }
  61.         .audioplayer:not(.audioplayer-playing) .audioplayer-playpause a
  62.         {
  63.             width: 0;
  64.             height: 0;
  65.             border: 0.5em solid transparent; /* 8 */
  66.             border-right: none;
  67.             border-left-color: #fff;
  68.             content: '';
  69.             position: absolute;
  70.             top: 50%;
  71.             left: 50%;
  72.             margin: -0.5em 0 0 -0.25em; /* 8 4 */
  73.         }
  74.         .audioplayer-playing .audioplayer-playpause a
  75.         {
  76.             width: 0.75em; /* 12 */
  77.             height: 0.75em; /* 12 */
  78.             position: absolute;
  79.             top: 50%;
  80.             left: 50%;
  81.             margin: -0.375em 0 0 -0.375em; /* 6 */
  82.         }
  83.             .audioplayer-playing .audioplayer-playpause a:before,
  84.             .audioplayer-playing .audioplayer-playpause a:after
  85.             {
  86.                 width: 40%;
  87.                 height: 100%;
  88.                 background-color: #fff;
  89.                 content: '';
  90.                 position: absolute;
  91.                 top: 0;
  92.             }
  93.             .audioplayer-playing .audioplayer-playpause a:before
  94.             {
  95.                 left: 0;
  96.             }
  97.             .audioplayer-playing .audioplayer-playpause a:after
  98.             {
  99.                 right: 0;
  100.             }
  101.     .audioplayer-time
  102.     {
  103.         width: 4.375em; /* 70 */
  104.         height: 100%;
  105.         line-height: 2.375em; /* 38 */
  106.         text-align: center;
  107.         z-index: 2;
  108.         top: 0;
  109.     }
  110.         .audioplayer-time-current
  111.         {
  112.             border-left: 1px solid #111;
  113.             border-left-color: rgba( 0, 0, 0, .25 );
  114.             left: 2.5em; /* 40 */
  115.         }
  116.         .audioplayer-time-duration
  117.         {
  118.             border-right: 1px solid #555;
  119.             border-right-color: rgba( 255, 255, 255, .1 );
  120.             right: 2.5em; /* 40 */
  121.         }
  122.             .audioplayer-novolume .audioplayer-time-duration
  123.             {
  124.                 border-right: 0;
  125.                 right: 0;
  126.             }
  127.     .audioplayer-bar
  128.     {
  129.         height: 0.875em; /* 14 */
  130.         background-color: #222;
  131.         cursor: pointer;
  132.         z-index: 1;
  133.         top: 50%;
  134.         right: 6.875em; /* 110 */
  135.         left: 6.875em; /* 110 */
  136.         margin-top: -0.438em; /* 7 */
  137.     }
  138.         .audioplayer-novolume .audioplayer-bar
  139.         {
  140.             right: 4.375em; /* 70 */
  141.         }
  142.         .audioplayer-bar div
  143.         {
  144.             width: 0;
  145.             height: 100%;
  146.             position: absolute;
  147.             left: 0;
  148.             top: 0;
  149.         }
  150.         .audioplayer-bar-loaded
  151.         {
  152.             background-color: #333;
  153.             z-index: 1;
  154.         }
  155.         .audioplayer-bar-played
  156.         {
  157.             background: #007fd1;
  158.             background: -webkit-gradient( linear, left top, right top, from( #007fd1 ), to( #c600ff ) );
  159.             background: -webkit-linear-gradient( left, #007fd1, #c600ff );
  160.             background: -moz-linear-gradient( left, #007fd1, #c600ff );
  161.             background: -ms-radial-gradient( left, #007fd1, #c600ff );
  162.             background: -o-linear-gradient( left, #007fd1, #c600ff );
  163.             background: linear-gradient( left, #007fd1, #c600ff );
  164.             z-index: 2;
  165.         }
  166.     .audioplayer-volume
  167.     {
  168.         width: 2.5em; /* 40 */
  169.         height: 100%;
  170.         border-left: 1px solid #111;
  171.         border-left-color: rgba( 0, 0, 0, .25 );
  172.         text-align: left;
  173.         text-indent: -9999px;
  174.         cursor: pointer;
  175.         z-index: 2;
  176.         top: 0;
  177.         right: 0;
  178.     }
  179.         .audioplayer-volume:hover,
  180.         .audioplayer-volume:focus
  181.         {
  182.             background-color: #222;
  183.         }
  184.         .audioplayer-volume-button
  185.         {
  186.             width: 100%;
  187.             height: 100%;
  188.         }
  189.             .audioplayer-volume-button a
  190.             {
  191.                 width: 0.313em; /* 5 */
  192.                 height: 0.375em; /* 6 */
  193.                 background-color: #fff;
  194.                 display: block;
  195.                 position: relative;
  196.                 z-index: 1;
  197.                 top: 40%;
  198.                 left: 35%;
  199.             }
  200.                 .audioplayer-volume-button a:before,
  201.                 .audioplayer-volume-button a:after
  202.                 {
  203.                     content: '';
  204.                     position: absolute;
  205.                 }
  206.                 .audioplayer-volume-button a:before
  207.                 {
  208.                     width: 0;
  209.                     height: 0;
  210.                     border: 0.5em solid transparent; /* 8 */
  211.                     border-left: none;
  212.                     border-right-color: #fff;
  213.                     z-index: 2;
  214.                     top: 50%;
  215.                     right: -0.25em;
  216.                     margin-top: -0.5em; /* 8 */
  217.                 }
  218.                 .audioplayer:not(.audioplayer-mute) .audioplayer-volume-button a:after
  219.                 {
  220.                     /* "volume" icon by Nicolas Gallagher, http://nicolasgallagher.com/pure-css-gui-icons */
  221.                     width: 0.313em; /* 5 */
  222.                     height: 0.313em; /* 5 */
  223.                     border: 0.25em double #fff; /* 4 */
  224.                     border-width: 0.25em 0.25em 0 0; /* 4 */
  225.                     left: 0.563em; /* 9 */
  226.                     top: -0.063em; /* 1 */
  227.                     -webkit-border-radius: 0 0.938em 0 0; /* 15 */
  228.                     -moz-border-radius: 0 0.938em 0 0; /* 15 */
  229.                     border-radius: 0 0.938em 0 0; /* 15 */
  230.                     -webkit-transform: rotate( 45deg );
  231.                     -moz-transform: rotate( 45deg );
  232.                     -ms-transform: rotate( 45deg );
  233.                     -o-transform: rotate( 45deg );
  234.                     transform: rotate( 45deg );
  235.                 }
  236.         .audioplayer-volume-adjust
  237.         {
  238.             height: 6.25em; /* 100 */
  239.             cursor: default;
  240.             position: absolute;
  241.             left: 0;
  242.             right: -1px;
  243.             top: -9999px;
  244.             background: #222;
  245.             background: -webkit-gradient( linear, left top, left bottom, from( #444 ), to( #222 ) );
  246.             background: -webkit-linear-gradient( top, #444, #222 );
  247.             background: -moz-linear-gradient( top, #444, #222 );
  248.             background: -ms-radial-gradient( top, #444, #222 );
  249.             background: -o-linear-gradient( top, #444, #222 );
  250.             background: linear-gradient( top, #444, #222 );
  251.             -webkit-border-top-left-radius: 2px;
  252.             -webkit-border-top-right-radius: 2px;
  253.             -moz-border-radius-topleft: 2px;
  254.             -moz-border-radius-topright: 2px;
  255.             border-top-left-radius: 2px;
  256.             border-top-right-radius: 2px;
  257.         }
  258.             .audioplayer-volume:not(:hover) .audioplayer-volume-adjust
  259.             {
  260.                 opacity: 0;
  261.             }
  262.             .audioplayer-volume:hover .audioplayer-volume-adjust
  263.             {
  264.                 top: auto;
  265.                 bottom: 100%;
  266.             }
  267.             .audioplayer-volume-adjust > div
  268.             {
  269.                 width: 40%;
  270.                 height: 80%;
  271.                 background-color: #222;
  272.                 cursor: pointer;
  273.                 position: relative;
  274.                 z-index: 1;
  275.                 margin: 30% auto 0;
  276.             }
  277.                 .audioplayer-volume-adjust div div
  278.                 {
  279.                     width: 100%;
  280.                     height: 100%;
  281.                     position: absolute;
  282.                     bottom: 0;
  283.                     left: 0;
  284.                     background: #007fd1;
  285.                     background: -webkit-gradient( linear, left bottom, left top, from( #007fd1 ), to( #c600ff ) );
  286.                     background: -webkit-linear-gradient( bottom, #007fd1, #c600ff );
  287.                     background: -moz-linear-gradient( bottom, #007fd1, #c600ff );
  288.                     background: -ms-radial-gradient( bottom, #007fd1, #c600ff );
  289.                     background: -o-linear-gradient( bottom, #007fd1, #c600ff );
  290.                     background: linear-gradient( bottom, #007fd1, #c600ff );
  291.                 }
  292.         .audioplayer-novolume .audioplayer-volume
  293.         {
  294.             display: none;
  295.         }
  296.  
  297.     .audioplayer-play,
  298.     .audioplayer-pause,
  299.     .audioplayer-volume a
  300.     {
  301.         -webkit-filter: drop-shadow( 1px 1px 0 #000 );
  302.         -moz-filter: drop-shadow( 1px 1px 0 #000 );
  303.         -ms-filter: drop-shadow( 1px 1px 0 #000 );
  304.         -o-filter: drop-shadow( 1px 1px 0 #000 );
  305.         filter: drop-shadow( 1px 1px 0 #000 );
  306.     }
  307.     .audioplayer-bar,
  308.     .audioplayer-bar div,
  309.     .audioplayer-volume-adjust div
  310.     {
  311.         -webkit-border-radius: 4px;
  312.         -moz-border-radius: 4px;
  313.         border-radius: 4px;
  314.     }
  315.     .audioplayer-bar,
  316.     .audioplayer-volume-adjust > div
  317.     {
  318.         -webkit-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
  319.         -moz-box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
  320.         box-shadow: -1px -1px 0 rgba( 0, 0, 0, .5 ), 1px 1px 0 rgba( 255, 255, 255, .1 );
  321.     }
  322.     .audioplayer-volume-adjust div div,
  323.     .audioplayer-bar-played
  324.     {
  325.         -webkit-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
  326.         -moz-box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
  327.         box-shadow: inset 0 0 5px rgba( 255, 255, 255, .5 );
  328.     }
  329.     .audioplayer-volume-adjust
  330.     {
  331.         -webkit-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
  332.         -moz-box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
  333.         box-shadow: -2px -2px 2px rgba( 0, 0, 0, .15 ), 2px -2px 2px rgba( 0, 0, 0, .15 );
  334.     }
  335.     .audioplayer *,
  336.     .audioplayer *:before,
  337.     .audioplayer *:after
  338.     {
  339.         -webkit-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
  340.         -moz-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
  341.         -ms-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
  342.         -o-transition: color .25s ease, background-color .25s ease, opacity .5s ease;
  343.         transition: color .25s ease, background-color .25s ease, opacity .5s ease;
  344.     }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!