Home Explore Help
Sign In
oversu
/
html5-css3-audio-player-with-playlist
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Tree: dd3b0a585c
Branches Tags
html5-css3-audi...
/
style.css

style.css 5.0 KB
History Raw

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364 
  1. @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css');
    2. 

  2. 

  3. *,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;}
    4. 

  4. input,button{outline:none;}
    5. 

  5. a,a:hover,a:visited{color:#ddd;text-decoration:none;}
    6. 

  6. .flex{display:-webkit-flex;display:flex;}
    7. 

  7. .flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
    8. 

  8. .flex-align{-webkit-align-items:center;align-items:center;}
    9. 

  9. .w-full{width:100%;}
    10. 

  10. 

  11. #apwp button,#apwp input,#apwp img{border:0;}
    12. 

  12. #apwp{max-width:600px;font-size:14px;font-family:"Segoe UI", Tahoma, sans-serif;text-align:initial;line-height:initial;background:#17212b;color:#ddd;margin:0 auto;border-radius:6px;overflow:hidden;}
    13. 

  13. #apwp .apwp-album{padding:20px 25px 5px;}
    14. 

  14. #apwp .apwp-album .apwp-cover{margin-right:20px;}
    15. 

  15. #apwp .apwp-album .apwp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;}
    16. 

  16. #apwp .apwp-album .apwp-title{font-size:120%;font-weight:bold;}
    17. 

  17. #apwp .apwp-album .apwp-artist{font-size:90%;color:#6c7883;}
    18. 

  18. #apwp .apwp-controls{padding:15px;}
    19. 

  19. #apwp .apwp-controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;}
    20. 

  20. #apwp .apwp-controls button[disabled]{color:#636469;cursor:initial;}
    21. 

  21. #apwp .apwp-controls button:not([disabled]):hover{background:#4082bc;color:#fff;}
    22. 

  22. #apwp .apwp-controls .apwp-prev,#apwp .apwp-controls .apwp-next{font-size:100%;}
    23. 

  23. #apwp .apwp-controls .apwp-tracker,#apwp .apwp-controls .apwp-volume{flex:1;margin-left:10px;position:relative;}
    24. 

  24. #apwp .apwp-controls .apwp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;}
    25. 

  25. #apwp .apwp-controls .apwp-loading .apwp-buffer {-webkit-animation:audio-progress 1s linear infinite;animation:audio-progress 1s linear infinite;background-image: linear-gradient(-45deg, #000 25%, transparent 25%, transparent 50%, #000 50%, #000 75%, transparent 75%, transparent);background-repeat:repeat-x;background-size:25px 25px;color:transparent;}
    26. 

  26. #apwp .apwp-controls .apwp-time,#apwp .apwp-controls .apwp-others{margin-left:10px;}
    27. 

  27. #apwp .apwp-controls .apwp-volume{max-width:110px;}
    28. 

  28. #apwp .apwp-controls .apwp-volume .apwp-mute{margin-right:5px;}
    29. 

  29. #apwp .apwp-controls .apwp-others .apwp-active{background:#242f3d;}
    30. 

  30. #apwp .apwp-controls .apwp-others .apwp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;}
    31. 

  31. #apwp .apwp-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;}
    32. 

  32. #apwp .apwp-controls input[type=range]::-webkit-slider-runnable-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
    33. 

  33. #apwp .apwp-controls input[type=range]::-moz-range-track{background:rgba(183,197,205,.66);height:5px;border-radius:2.5px;transition:box-shadow .3s ease;position:relative;}
    34. 

  34. #apwp .apwp-controls .apwp-load .apwp-progress::-webkit-slider-runnable-track{background:#2f3841;}
    35. 

  35. #apwp .apwp-controls .apwp-load .apwp-progress::-moz-range-track{background:#2f3841;}
    36. 

  36. #apwp .apwp-controls .apwp-loading .apwp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);}
    37. 

  37. #apwp .apwp-controls .apwp-loading .apwp-progress::-moz-range-track{background:rgba(255,255,255,.25);}
    38. 

  38. #apwp .apwp-controls input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;margin-top:-4px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
    39. 

  39. #apwp .apwp-controls input[type=range]::-moz-range-thumb{-webkit-appearance:none;background:#fff;height:13px;width:13px;cursor:pointer;border-radius:50%;box-shadow:0 1px 1px rgba(0,0,0,.15), 0 0 0 1px rgba(47,52,61,.2);}
    40. 

  40. #apwp .apwp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;}
    41. 

  41. #apwp .apwp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;}
    42. 

  42. #apwp .apwp-hide{max-height:0;}
    43. 

  43. 

  44. /* Playlist */
    45. 

  45. #apwp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;}
    46. 

  46. #apwp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;}
    47. 

  47. #apwp ul li:last-child{padding-bottom:13px;}
    48. 

  48. #apwp ul li:nth-child(odd){background:#0e1621;}
    49. 

  49. #apwp ul li:hover{background:#242f3d;}
    50. 

  50. #apwp ul li.apwp-active{background:#4082bc;color:#fff;}
    51. 

  51. #apwp ul li .apwp-desc{font-size:90%;opacity:.5;margin-left:5px;}
    52. 

  52. 

  53. /* Playlist scrollbar */
    54. 

  54. #apwp ul{overflow-y:auto;overflow-x:hidden;scrollbar-color:#73797f #2f3841;}
    55. 

  55. #apwp ul::-webkit-scrollbar-track{background-color:#2f3841;}
    56. 

  56. #apwp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;}
    57. 

  57. #apwp ul::-webkit-scrollbar-thumb{background-color:#73797f;}
    58. 

  58. 

  59. /* Progress animation */
    60. 

  60. @-webkit-keyframes audio-progress{to{background-position:25px 0;}}
    61. 

  61. @keyframes audio-progress{to{background-position:25px 0;}}
    62. 

  62. /* Mobile */
    63. 

  63. @media screen and (max-width:480px) {#apwp .apwp-controls .apwp-time{margin-right:10px;}}
    64. 

  64. @media screen and (max-width:370px) {#apwp .apwp-time .apwp-slash,#apwp .apwp-time .end-time{display:none;}}
    65.