diff --git a/style.css b/style.css index a44ab4c..f7a09b7 100644 --- a/style.css +++ b/style.css @@ -1,67 +1,64 @@ -@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); - -*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;} -input,button{outline:none;} -a,a:hover,a:visited{color:#ddd;text-decoration:none;} -.flex{display:-webkit-flex;display:flex;} -.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;} -.flex-align{-webkit-align-items:center;align-items:center;} -.w-full{width:100%;} - -/* HTML5 Audio Player with Playlist, source: https://codepen.io/sekedus/pen/ExxjZEz */ -#simp button,#simp input,#simp img{border:0;} -#simp{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;} -#simp .simp-album{padding:20px 25px 5px;} -#simp .simp-album .simp-cover{margin-right:20px;} -#simp .simp-album .simp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;} -#simp .simp-album .simp-title{font-size:120%;font-weight:bold;} -#simp .simp-album .simp-artist{font-size:90%;color:#6c7883;} -#simp .simp-controls{padding:15px;} -#simp .simp-controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;} -#simp .simp-controls button[disabled]{color:#636469;cursor:initial;} -#simp .simp-controls button:not([disabled]):hover{background:#4082bc;color:#fff;} -#simp .simp-controls .simp-prev,#simp .simp-controls .simp-next{font-size:100%;} -#simp .simp-controls .simp-tracker,#simp .simp-controls .simp-volume{flex:1;margin-left:10px;position:relative;} -#simp .simp-controls .simp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;} -#simp .simp-controls .simp-loading .simp-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;} -#simp .simp-controls .simp-time,#simp .simp-controls .simp-others{margin-left:10px;} -#simp .simp-controls .simp-volume{max-width:110px;} -#simp .simp-controls .simp-volume .simp-mute{margin-right:5px;} -#simp .simp-controls .simp-others .simp-active{background:#242f3d;} -#simp .simp-controls .simp-others .simp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;} -#simp .simp-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;} -#simp .simp-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;} -#simp .simp-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;} -#simp .simp-controls .simp-load .simp-progress::-webkit-slider-runnable-track{background:#2f3841;} -#simp .simp-controls .simp-load .simp-progress::-moz-range-track{background:#2f3841;} -#simp .simp-controls .simp-loading .simp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);} -#simp .simp-controls .simp-loading .simp-progress::-moz-range-track{background:rgba(255,255,255,.25);} -#simp .simp-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);} -#simp .simp-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);} -#simp .simp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;} -#simp .simp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;} -#simp .simp-hide{max-height:0;} -/* playlist */ -#simp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;} -#simp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;} -#simp ul li:last-child{padding-bottom:13px;} -#simp ul li:nth-child(odd){background:#0e1621;} -#simp ul li:hover{background:#242f3d;} -#simp ul li.simp-active{background:#4082bc;color:#fff;} -#simp ul li .simp-desc{font-size:90%;opacity:.5;margin-left:5px;} -/* playlist scrollbar */ -#simp ul{overflow-y:auto;overflow-x:hidden;scrollbar-color:#73797f #2f3841;} -#simp ul::-webkit-scrollbar-track{background-color:#2f3841;} -#simp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;} -#simp ul::-webkit-scrollbar-thumb{background-color:#73797f;} -/* progress animation */ -@-webkit-keyframes audio-progress{to{background-position:25px 0;}} -@keyframes audio-progress{to{background-position:25px 0;}} -/* mobile */ -@media screen and (max-width:480px) { -#simp .simp-controls .simp-volume,#simp .simp-controls .simp-others{display:none;} -#simp .simp-controls .simp-time{margin-right:10px;} -} -@media screen and (max-width:370px) { -#simp .simp-time .simp-slash,#simp .simp-time .end-time{display:none;} -} \ No newline at end of file +@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); + +*,*:before,*:after{outline:0;-webkit-box-sizing:border-box;box-sizing:border-box;} +input,button{outline:none;} +a,a:hover,a:visited{color:#ddd;text-decoration:none;} +.flex{display:-webkit-flex;display:flex;} +.flex-wrap{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;} +.flex-align{-webkit-align-items:center;align-items:center;} +.w-full{width:100%;} + +#apwp button,#apwp input,#apwp img{border:0;} +#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;} +#apwp .apwp-album{padding:20px 25px 5px;} +#apwp .apwp-album .apwp-cover{margin-right:20px;} +#apwp .apwp-album .apwp-cover img{max-width:80px;width:100%;margin:0;padding:0;display:block;} +#apwp .apwp-album .apwp-title{font-size:120%;font-weight:bold;} +#apwp .apwp-album .apwp-artist{font-size:90%;color:#6c7883;} +#apwp .apwp-controls{padding:15px;} +#apwp .apwp-controls button{font-size:130%;width:32px;height:32px;background:none;color:#ddd;padding:7px;cursor:pointer;border:0;border-radius:3px;} +#apwp .apwp-controls button[disabled]{color:#636469;cursor:initial;} +#apwp .apwp-controls button:not([disabled]):hover{background:#4082bc;color:#fff;} +#apwp .apwp-controls .apwp-prev,#apwp .apwp-controls .apwp-next{font-size:100%;} +#apwp .apwp-controls .apwp-tracker,#apwp .apwp-controls .apwp-volume{flex:1;margin-left:10px;position:relative;} +#apwp .apwp-controls .apwp-buffer {position:absolute;top:50%;right:0;left:0;height:5px;margin-top:-2.5px;border-radius:100px;} +#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;} +#apwp .apwp-controls .apwp-time,#apwp .apwp-controls .apwp-others{margin-left:10px;} +#apwp .apwp-controls .apwp-volume{max-width:110px;} +#apwp .apwp-controls .apwp-volume .apwp-mute{margin-right:5px;} +#apwp .apwp-controls .apwp-others .apwp-active{background:#242f3d;} +#apwp .apwp-controls .apwp-others .apwp-shide button{font-size:100%;padding:0;width:24px;height:14px;display:block;} +#apwp .apwp-controls input[type=range]{-webkit-appearance:none;background:transparent;height:19px;margin:0;width:100%;display:block;position:relative;z-index:2;} +#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;} +#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;} +#apwp .apwp-controls .apwp-load .apwp-progress::-webkit-slider-runnable-track{background:#2f3841;} +#apwp .apwp-controls .apwp-load .apwp-progress::-moz-range-track{background:#2f3841;} +#apwp .apwp-controls .apwp-loading .apwp-progress::-webkit-slider-runnable-track{background:rgba(255,255,255,.25);} +#apwp .apwp-controls .apwp-loading .apwp-progress::-moz-range-track{background:rgba(255,255,255,.25);} +#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);} +#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);} +#apwp .apwp-footer{padding:10px 10px 12px;font-size:90%;text-align:center;opacity:.7;} +#apwp .apwp-display{overflow:hidden;max-height:650px;transition:max-height .5s ease-in-out;} +#apwp .apwp-hide{max-height:0;} + +/* Playlist */ +#apwp ul{margin:5px 0 0;padding:0;list-style:none;max-height:245px;} +#apwp ul li{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block;margin:0;padding:8px 20px;cursor:pointer;} +#apwp ul li:last-child{padding-bottom:13px;} +#apwp ul li:nth-child(odd){background:#0e1621;} +#apwp ul li:hover{background:#242f3d;} +#apwp ul li.apwp-active{background:#4082bc;color:#fff;} +#apwp ul li .apwp-desc{font-size:90%;opacity:.5;margin-left:5px;} + +/* Playlist scrollbar */ +#apwp ul{overflow-y:auto;overflow-x:hidden;scrollbar-color:#73797f #2f3841;} +#apwp ul::-webkit-scrollbar-track{background-color:#2f3841;} +#apwp ul::-webkit-scrollbar{width:6px;background-color:#2f3841;} +#apwp ul::-webkit-scrollbar-thumb{background-color:#73797f;} + +/* Progress animation */ +@-webkit-keyframes audio-progress{to{background-position:25px 0;}} +@keyframes audio-progress{to{background-position:25px 0;}} +/* Mobile */ +@media screen and (max-width:480px) {#apwp .apwp-controls .apwp-time{margin-right:10px;}} +@media screen and (max-width:370px) {#apwp .apwp-time .apwp-slash,#apwp .apwp-time .end-time{display:none;}}