From f00271bf45700420b5b5a24a781829b9f227a150 Mon Sep 17 00:00:00 2001 From: Tom Hazledine Date: Fri, 16 Feb 2024 17:33:00 +0000 Subject: [PATCH] updating build files for v3.1.3 --- build/picobel-component-default.js | 2 +- build/picobel.3.1.3.js | 1 + build/picobel.all.css | 2 +- build/picobel.default.css | 2 +- build/picobel.main.css | 2 +- 5 files changed, 5 insertions(+), 4 deletions(-) create mode 100644 build/picobel.3.1.3.js diff --git a/build/picobel-component-default.js b/build/picobel-component-default.js index 6ae5146..7c5a604 100644 --- a/build/picobel-component-default.js +++ b/build/picobel-component-default.js @@ -1,2 +1,2 @@ -var X=Object.defineProperty;var Z=(e,t)=>{for(var r in t)X(e,r,{get:t[r],enumerable:!0})};var ee=(e="default")=>{switch(e){case"itunes":return["playPause",[["title","artist"],["timer","progress","duration"]]];case"default":default:return["playPause",["mute","volume"],["title","artist"],["timer","progress","duration"]]}},L=(e={})=>{let t={context:document,theme:"default",preload:!1},{components:r,...a}=e,o=ee(e.theme),i={...t,components:o,...a};return r&&Array.isArray(r)&&(i.components=r),i};var g=e=>{let t=Math.floor(e/3600),r=Math.floor(e%3600/60).toFixed(0).toString(),a=Math.floor(e%3600%60).toFixed(0).toString();a=a>=10?a:`0${a}`;let o=`${r}:${a}`;return t>0&&(r=r>=10?r:`0${r}`,o=`${t}:${r}:${a}`),o},$=e=>e.substr((~-e.lastIndexOf(".")>>>0)+2),T=e=>e.replace(/^.*[\\\/]/,"").split(".")[0];var f={};Z(f,{artist:()=>oe,duration:()=>se,mute:()=>le,playPause:()=>te,progress:()=>ie,timer:()=>ae,title:()=>re,volume:()=>ne});var b=({namespace:e="picobel",min:t=0,max:r=100,value:a=0,step:o=!1,index:i=0,label:l="slider"})=>{let n=s("div",e),u=s("div",`${e}-slider__wrapper`),d=s("div",`${e}-slider__replacement`),G=s("div",`${e}-slider__background`);d.appendChild(G);let K=s("div",`${e}-slider__indicator`);d.appendChild(K);let Q=s("div",`${e}-slider__playhead`);d.appendChild(Q),u.appendChild(d);let w=`${e}-slider__range--${i}`,p=s("input",`${e}-slider__range`);p.setAttribute("id",w),p.setAttribute("type","range"),p.setAttribute("min",t),p.setAttribute("max",r),p.setAttribute("value",a),o&&p.setAttribute("step",o),u.appendChild(p);let c=s("label",`${e}-label`);return typeof l=="string"?c.innerHTML=l:c.appendChild(l),c.setAttribute("for",w),n.appendChild(c),n.appendChild(u),n};var te=e=>{let t=s("button",`${e}__play-pause`);t.setAttribute("type","button");let r=s("span",`${e}__play-pause__text`);return r.innerHTML="Play",t.appendChild(r),t},re=(e,t)=>{let r=s("span",`${e}__title`);return r.innerHTML="File "+(t+1),r},oe=e=>s("span",`${e}__artist`),ae=e=>{let t=s("span",`${e}__timer`);return t.innerHTML="0:00",t},se=e=>{let t=s("span",`${e}__duration`);return t.innerHTML="-:--",t},ie=(e,t)=>{let r=s("span",`${e}__progress-label-inner`);return r.innerHTML="Progress",b({namespace:`${e}__progress`,min:0,max:100,value:0,index:t,label:r})},le=e=>{let t=s("button",`${e}__mute`);return t.setAttribute("type","button"),t.innerHTML="Mute",t},ne=(e,t)=>{let r=s("span",`${e}__volume-label-inner`),a=s("span",`${e}__volume-label-key`);a.innerHTML="Volume ",r.appendChild(a);let o=s("span",`${e}__volume-label-value`);return o.innerHTML="10",r.appendChild(o),b({namespace:`${e}__volume`,min:0,max:1,value:1,step:.1,index:t,label:r})};var s=(e="div",t="")=>{let r=document.createElement(e);return r.className=t,r},y=({key:e,container:t,components:r,namespace:a})=>(r.forEach(o=>{if(typeof o=="string"&&f[o]){let i=f[o](a,e);t.appendChild(i);return}if(Array.isArray(o)&&o.length){let i=o.flat().join("-"),l=s("div",`${a}__wrapper--${i}`),n=y({key:e,container:l,components:o,namespace:a});t.appendChild(n)}}),t);var P=e=>{let t=g(e.duration);return e.elements.durationDisplay&&(e.elements.durationDisplay.innerHTML=t),e},A=(e,t)=>(e.artist&&t.artistDisplay&&(t.artistDisplay.innerHTML=e.artist),t.titleDisplay&&(t.titleDisplay.innerHTML=e.title),t),E=(e=[],t,r)=>e.map(o=>{let i=s("div"),l=C(o.key,o.className,r);i.classList.add(...l),i.setAttribute("data-picobel-index",o.key);let n=s("div",`${r}__loader`);return i.appendChild(n),y({key:o.key,container:i,components:t,namespace:r})}),S=(e,t,r)=>e.map(a=>{let o=t.querySelector(`[data-picobel-index='${a.key}']`);return a.elements={wrapper:o,playPauseButton:o.querySelector(`.${r}__play-pause`),playPauseButtonText:o.querySelector(`.${r}__play-pause__text`),muteButton:o.querySelector(`.${r}__mute`),playTimer:o.querySelector(`.${r}__timer`),durationDisplay:o.querySelector(`.${r}__duration`),titleDisplay:o.querySelector(`.${r}__title`),artistDisplay:o.querySelector(`.${r}__artist`),progressWrapper:o.querySelector(`.${r}__progress-slider__replacement`),progressRange:o.querySelector(`.${r}__progress-slider__range`),progressPlayhead:o.querySelector(`.${r}__progress-slider__playhead`),progressBackground:o.querySelector(`.${r}__progress-slider__background`),progressIndicator:o.querySelector(`.${r}__progress-slider__indicator`),volumeWrapper:o.querySelector(`.${r}__volume-slider__replacement`),volumeControl:o.querySelector(`.${r}__volume-slider__range`),volumeDisplay:o.querySelector(`.${r}__volume-label-value`),volumeIndicator:o.querySelector(`.${r}__volume-slider__indicator`),volumePlayhead:o.querySelector(`.${r}__volume-slider__playhead`)},a});var ue=e=>e.forEach(t=>{N(t)}),M=(e,t)=>{e.paused||e.currentTime===0?(ue(t),pe(e)):N(e)},pe=e=>{e.play();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("paused"),r.innerHTML="Pause",t.classList.add("playing")},N=e=>{e.pause();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("playing"),r.innerHTML="Play",t.classList.add("paused")},de=e=>{e.pause();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("playing"),r.innerHTML="Play"},B=e=>H(e.srcElement),H=e=>{let t=e.currentTime,r=e.duration;if(e.elements.playTimer){let o=g(t);e.elements.playTimer.innerHTML=o}t>=r&&de(e);let a=(t/r*100).toFixed(2);e.elements.progressRange&&(e.elements.progressRange.value=a,e.elements.progressIndicator.style.width=a+"%",e.elements.progressPlayhead.style.left=a+"%")},F=e=>{P(e),m(e)},m=e=>{e.elements.wrapper.classList.remove("loading");let t=V(e);A(t,e.elements)},h=e=>{e.elements.wrapper.classList.add("error"),e.elements.wrapper.classList.remove("loading"),e.elements.wrapper.innerHTML='
Error loading audio file
'},q=(e,t)=>{let a=t.duration*(e.srcElement.value/100);a=a.toFixed(2),t.currentTime=a,H(t)},v=(e,t)=>e.elements.progressWrapper.classList.toggle("focus",t),z=(e,t)=>{let r=e.srcElement.value;t.tmpVolume=t.volume,t.mute=!1,I(t),_(t,r)},x=(e,t)=>e.elements.volumeWrapper.classList.toggle("focus",t),_=(e,t)=>{let r=t*10,a=(t*100).toFixed(2);e.volume=t,e.elements.volumeDisplay&&(e.elements.volumeDisplay.innerHTML=r),e.elements.volumeControl&&(e.elements.volumeControl.value=t),e.elements.volumeIndicator&&(e.elements.volumeIndicator.style.width=a+"%"),e.elements.volumePlayhead&&(e.elements.volumePlayhead.style.left=a+"%")},D=e=>{e.mute=!e.mute,I(e)},I=e=>{let t=e.elements.muteButton;e.mute?(e.tmpVolume=e.volume,_(e,0),t.classList.add("muted"),t.classList.remove("unmuted"),t.innerHTML="Unmute"):(typeof e.tmpVolume<"u"&&e.tmpVolume>0?_(e,e.tmpVolume):_(e,1),t.classList.remove("muted"),t.classList.add("unmuted"),t.innerHTML="Mute")},R=(e,t)=>{let r=e.duration,a=(t/r*100).toFixed(2);e.elements.progressBackground&&(e.elements.progressBackground.style.width=a+"%")};var U=e=>[...e.getElementsByTagName("audio")],C=(e,t,r)=>[...`picobel loading picobel--index-${e} ${t}`.trim().split(" "),r],O=e=>e.map((t,r)=>(t.key=r,t.mute=!1,t.tmpVolume=1,t)),V=e=>{let t={};return t.url=e.currentSrc,t.fileType=$(t.url),t.fileName=T(t.url),t.title=e.title&&e.title!==""?e.title:`${t.fileName}.${t.fileType}`,e.dataset?t.artist=e.dataset.artist?e.dataset.artist:!1:t.artist=!1,t};var W=async(e,t)=>{let a=!1,o=0,i=15,l=()=>{if(o++,e.buffered.length>0){let n=e.buffered.end(e.buffered.length-1),u=e.duration;R(e,n),n>=u&&(a=!0,clearInterval(t[e.currentSrc]))}o>=i&&(e.buffered.length<=0&&e.readyState<=0&&h(e),clearInterval(t[e.currentSrc]))};t[e.currentSrc]=setInterval(l,1e3),window.addEventListener("unload",()=>clearInterval(t[e.currentSrc]))};var j=e=>e.map(t=>(t.addEventListener("timeupdate",B,!1),t.addEventListener("canplaythrough",()=>F(t),!1),t.addEventListener("loadedmetadata",()=>m(t),!1),t.addEventListener("error",()=>h(t),!1),t.elements.playPauseButton&&t.elements.playPauseButton.addEventListener("click",()=>M(t,e),!1),t.elements.progressRange&&t.elements.progressRange.addEventListener("input",r=>q(r,t),!1),t.elements.progressRange&&t.elements.progressRange.addEventListener("focus",()=>v(t,!0),!1),t.elements.progressRange&&t.elements.progressRange.addEventListener("blur",()=>v(t,!1),!1),t.elements.volumeControl&&t.elements.volumeControl.addEventListener("input",r=>z(r,t),!1),t.elements.volumeControl&&t.elements.volumeControl.addEventListener("focus",()=>x(t,!0),!1),t.elements.volumeControl&&t.elements.volumeControl.addEventListener("blur",()=>x(t,!1),!1),t.elements.muteButton&&t.elements.muteButton.addEventListener("click",r=>D(t,r),!1),t));var Y=(e={})=>{let t=L(e),r={audioNodes:[],theme:t.theme,components:t.components},a=(l,n)=>{l.map((u,d)=>{u.parentNode.replaceChild(n[d],u)})};r.audioNodes=U(t.context),r.audioNodes=O(r.audioNodes);let o=E(r.audioNodes,r.components,r.theme);a(r.audioNodes,o),r.audioNodes=S(r.audioNodes,t.context,r.theme),r.audioNodes=j(r.audioNodes);let i={};return r.audioNodes.forEach(l=>{l.readyState>=1&&m(l),W(l,i)}),{state:r}};var J=`.default.picobel{--black: #555;--black--light: hsl(0, 0%, 43.3%);--black--opacity: rgba(0, 0, 0, .3);--white: #ffffff;--grey: #dad8d2;--greyDark: hsl(30, 10%, 65%);--primary: #ddd;--primary--opacity: rgba(221, 221, 221, .4);--highlight: #00b7c6;--background_grey_dark: #e6e6e6;--background_grey_light: #f1f1f1;--focus: #015ecc;--progress-bar-height: 2em}@keyframes default_background_slide{0%{background-position:0 0}to{background-position:2em 0}}.default.picobel{font-size:10px;position:relative;box-sizing:border-box;z-index:1;margin:1em 0;height:6em;border-radius:.3em;box-shadow:var(--black--opacity) 0 .1em .2em 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default.picobel *,.default.picobel *:before,.default.picobel *:after{box-sizing:inherit}.default.picobel *:focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__loader{position:absolute;z-index:2;bottom:0;left:5.6em;right:0;height:var(--progress-bar-height);opacity:0;transition:opacity .2s;pointer-events:none;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:var(--progress-bar-height) var(--progress-bar-height);background-repeat:repeat;background-position:0 0;animation:default_background_slide linear infinite .4s}.default.loading .default__loader{opacity:1}.default__play-pause{font-size:1em;border:none;appearance:none;width:4em;height:6em;color:var(--white);background:var(--black);background-image:linear-gradient(var(--black--light),var(--black));box-shadow:inset var(--black--light) -1px 0 0 0;position:absolute;top:0;left:0;cursor:pointer}.default__play-pause:focus{z-index:3}.default__play-pause__text{display:none}.default__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.8em;margin-left:-.4em;border-top:.8em solid transparent;border-left:1em solid var(--white);border-bottom:.8em solid transparent}.default__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1.4em;margin-top:-.7em;margin-right:-.7em;border-top:0;border-left:.5em solid var(--white);border-bottom:0;opacity:0}.default__play-pause.playing:before{height:1.4em;margin-top:-.7em;margin-left:-.7em;border-top:0;border-left:.5em solid var(--white);border-bottom:0}.default__play-pause.playing:after{opacity:1}.default__wrapper--title-artist{padding:1em 2em 1em 7em;height:4.4em;background:var(--primary);color:var(--black);text-shadow:var(--white) 0 .1em 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.default__artist{font-family:monospace;display:inline-block;line-height:1;margin-left:.5em}.default__artist:not(:empty):before{content:" \\2013 "}.default__wrapper--timer-progress-duration{position:absolute;bottom:0;left:5.6em;right:0;height:var(--progress-bar-height)}.default__timer,.default__duration{position:absolute;top:0;z-index:3;width:6em;text-align:left;background:transparent;color:var(--white);line-height:1em;height:var(--progress-bar-height);pointer-events:none;font-size:1em;padding:.5em .5em .5em 1em;font-family:monospace}.default__timer{left:0}.default__duration{right:0;text-align:right}.default.loading .default__timer,.default.loading .default__duration{display:none}.default__progress-slider__wrapper{height:var(--progress-bar-height);position:absolute;top:0;left:0;width:100%}.default__progress-slider__replacement{height:100%;position:absolute;top:0;left:0;width:100%;background:var(--black);border-bottom-right-radius:.2em;overflow:hidden}.default__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__progress-slider__indicator{height:var(--progress-bar-height);position:absolute;top:0;left:0;background:var(--primary--opacity);width:0%}.default__progress-slider__playhead{width:.5em;height:var(--progress-bar-height);position:absolute;top:0;left:0%;margin-left:-.2em;background:var(--highlight)}.default.loading .default__progress-slider__indicator,.default.loading .default__progress-slider__playhead{display:none}.default__progress-slider__range{width:100%;height:var(--progress-bar-height);font-size:inherit;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.default__progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:2em;cursor:pointer}.default__progress-slider__range::-moz-range-track{width:100%;height:2em;cursor:pointer}.default__progress-slider__range::-ms-track{width:100%;height:2em;cursor:pointer}.default__wrapper--mute-volume{position:absolute;top:0;left:4em;width:1.6em;height:6em;z-index:2}.default__mute{display:block;width:1.6em;height:1.6em;font-size:1em;color:transparent;border:0;appearance:none;background:var(--black);position:absolute;top:0;right:0;cursor:pointer;overflow:hidden}.default__mute:before{display:block;width:.4em;height:.3em;position:absolute;content:"";top:50%;right:50%;margin-right:-.1em;transform:translateY(-50%);background:var(--white)}.default__mute:after{display:block;width:.4em;max-width:100%;height:.4em;position:absolute;content:"";top:50%;margin-top:-.4em;right:50%;margin-right:-.2em;border-top:.4em solid transparent;border-right:.4em solid var(--white);border-bottom:.4em solid transparent}.default__mute.muted:before{background:var(--grey)}.default__mute.muted:after{border-right-color:var(--grey)}.default__volume-label{display:none}.default__volume-slider__wrapper{display:block;height:1.6em;position:absolute;top:1.6em;left:0;z-index:3;width:4.4em;transform:rotate(90deg) translateY(-100%);transform-origin:top left}.default__volume-slider__replacement{display:block;height:1.6em;position:absolute;top:0;left:0;background:var(--greyDark);width:4.4em}.default__volume-slider__replacement:after{content:"";display:block;width:100%;border-right:4.4em solid var(--black);border-bottom:1.6em solid transparent;position:absolute;bottom:0;left:0;pointer-events:none}.default__volume-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__volume-slider__indicator{height:1.6em;position:absolute;top:0;right:0;background:var(--highlight);width:100%;transform:rotate(180deg)}.default__volume-slider__playhead{display:none}.default__volume-slider__range{width:100%;padding:0;margin:0;height:1.6em;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.default__volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:1.5em;cursor:pointer}.default__volume-slider__range::-moz-range-track{width:100%;height:1.5em;cursor:pointer}.default__volume-slider__range::-ms-track{width:100%;height:1.5em;cursor:pointer} +var X=Object.defineProperty;var Z=(e,t)=>{for(var r in t)X(e,r,{get:t[r],enumerable:!0})};var ee=(e="default")=>{switch(e){case"itunes":return["playPause",[["title","artist"],["timer","progress","duration"]]];case"default":default:return["playPause",["mute","volume"],["title","artist"],["timer","progress","duration"]]}},L=(e={})=>{let t={context:document,theme:"default",preload:!1},{components:r,...a}=e,o=ee(e.theme),i={...t,components:o,...a};return r&&Array.isArray(r)&&(i.components=r),i};var g=e=>{let t=Math.floor(e/3600),r=Math.floor(e%3600/60).toFixed(0).toString(),a=Math.floor(e%3600%60).toFixed(0).toString();a=a>=10?a:`0${a}`;let o=`${r}:${a}`;return t>0&&(r=r>=10?r:`0${r}`,o=`${t}:${r}:${a}`),o},$=e=>e.substr((~-e.lastIndexOf(".")>>>0)+2),T=e=>e.replace(/^.*[\\\/]/,"").split(".")[0];var f={};Z(f,{artist:()=>oe,duration:()=>se,mute:()=>le,playPause:()=>te,progress:()=>ie,timer:()=>ae,title:()=>re,volume:()=>ne});var b=({namespace:e="picobel",min:t=0,max:r=100,value:a=0,step:o=!1,index:i=0,label:l="slider"})=>{let n=s("div",e),p=s("div",`${e}-slider__wrapper`),d=s("div",`${e}-slider__replacement`),G=s("div",`${e}-slider__background`);d.appendChild(G);let K=s("div",`${e}-slider__indicator`);d.appendChild(K);let Q=s("div",`${e}-slider__playhead`);d.appendChild(Q),p.appendChild(d);let w=`${e}-slider__range--${i}`,u=s("input",`${e}-slider__range`);u.setAttribute("id",w),u.setAttribute("type","range"),u.setAttribute("min",t),u.setAttribute("max",r),u.setAttribute("value",a),o&&u.setAttribute("step",o),p.appendChild(u);let m=s("label",`${e}-label`);return typeof l=="string"?m.innerHTML=l:m.appendChild(l),m.setAttribute("for",w),n.appendChild(m),n.appendChild(p),n};var te=e=>{let t=s("button",`${e}__play-pause`);t.setAttribute("type","button");let r=s("span",`${e}__play-pause__text`);return r.innerHTML="Play",t.appendChild(r),t},re=(e,t)=>{let r=s("span",`${e}__title`);return r.innerHTML="File "+(t+1),r},oe=e=>s("span",`${e}__artist`),ae=e=>{let t=s("span",`${e}__timer`);return t.innerHTML="0:00",t},se=e=>{let t=s("span",`${e}__duration`);return t.innerHTML="-:--",t},ie=(e,t)=>{let r=s("span",`${e}__progress-label-inner`);return r.innerHTML="Progress",b({namespace:`${e}__progress`,min:0,max:100,value:0,index:t,label:r})},le=e=>{let t=s("button",`${e}__mute`);return t.setAttribute("type","button"),t.innerHTML="Mute",t},ne=(e,t)=>{let r=s("span",`${e}__volume-label-inner`),a=s("span",`${e}__volume-label-key`);a.innerHTML="Volume ",r.appendChild(a);let o=s("span",`${e}__volume-label-value`);return o.innerHTML="10",r.appendChild(o),b({namespace:`${e}__volume`,min:0,max:1,value:1,step:.1,index:t,label:r})};var s=(e="div",t="")=>{let r=document.createElement(e);return r.className=t,r},y=({key:e,container:t,components:r,namespace:a})=>(r.forEach(o=>{if(typeof o=="string"&&f[o]){let i=f[o](a,e);t.appendChild(i);return}if(Array.isArray(o)&&o.length){let i=o.flat().join("-"),l=s("div",`${a}__wrapper--${i}`),n=y({key:e,container:l,components:o,namespace:a});t.appendChild(n)}}),t);var P=e=>{let t=g(e.duration);return e.elements.durationDisplay&&(e.elements.durationDisplay.innerHTML=t),e},A=(e,t)=>(e.artist&&t.artistDisplay&&(t.artistDisplay.innerHTML=e.artist),t.titleDisplay&&(t.titleDisplay.innerHTML=e.title),t),E=(e=[],t,r)=>e.map(o=>{let i=s("div"),l=C(o.key,o.className,r);i.classList.add(...l),i.setAttribute("data-picobel-index",o.key);let n=s("div",`${r}__loader`);return i.appendChild(n),y({key:o.key,container:i,components:t,namespace:r})}),S=(e,t,r)=>e.map(a=>{let o=t.querySelector(`[data-picobel-index='${a.key}']`);return a.elements={wrapper:o,playPauseButton:o.querySelector(`.${r}__play-pause`),playPauseButtonText:o.querySelector(`.${r}__play-pause__text`),muteButton:o.querySelector(`.${r}__mute`),playTimer:o.querySelector(`.${r}__timer`),durationDisplay:o.querySelector(`.${r}__duration`),titleDisplay:o.querySelector(`.${r}__title`),artistDisplay:o.querySelector(`.${r}__artist`),progressWrapper:o.querySelector(`.${r}__progress-slider__replacement`),progressRange:o.querySelector(`.${r}__progress-slider__range`),progressPlayhead:o.querySelector(`.${r}__progress-slider__playhead`),progressBackground:o.querySelector(`.${r}__progress-slider__background`),progressIndicator:o.querySelector(`.${r}__progress-slider__indicator`),volumeWrapper:o.querySelector(`.${r}__volume-slider__replacement`),volumeControl:o.querySelector(`.${r}__volume-slider__range`),volumeDisplay:o.querySelector(`.${r}__volume-label-value`),volumeIndicator:o.querySelector(`.${r}__volume-slider__indicator`),volumePlayhead:o.querySelector(`.${r}__volume-slider__playhead`)},a});var pe=e=>e.forEach(t=>{N(t)}),M=(e,t)=>{e.paused||e.currentTime===0?(pe(t),ue(e)):N(e)},ue=e=>{e.play();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("paused"),r.innerHTML="Pause",t.classList.add("playing")},N=e=>{e.pause();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("playing"),r.innerHTML="Play",t.classList.add("paused")},de=e=>{e.pause();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("playing"),r.innerHTML="Play"},B=e=>H(e.srcElement),H=e=>{let t=e.currentTime,r=e.duration;if(e.elements.playTimer){let o=g(t);e.elements.playTimer.innerHTML=o}t>=r&&de(e);let a=(t/r*100).toFixed(2);e.elements.progressRange&&(e.elements.progressRange.value=a,e.elements.progressIndicator.style.width=a+"%",e.elements.progressPlayhead.style.left=a+"%")},F=e=>{P(e),c(e)},c=e=>{e.elements.wrapper.classList.remove("loading");let t=V(e);A(t,e.elements)},h=e=>{e.elements.wrapper.classList.add("error"),e.elements.wrapper.classList.remove("loading"),e.elements.wrapper.innerHTML='
Error loading audio file
'},q=(e,t)=>{let a=t.duration*(e.srcElement.value/100);a=a.toFixed(2),t.currentTime=a,H(t)},x=(e,t)=>e.elements.progressWrapper.classList.toggle("focus",t),z=(e,t)=>{let r=e.srcElement.value;t.tmpVolume=t.volume,t.mute=!1,I(t),_(t,r)},v=(e,t)=>e.elements.volumeWrapper.classList.toggle("focus",t),_=(e,t)=>{let r=t*10,a=(t*100).toFixed(2);e.volume=t,e.elements.volumeDisplay&&(e.elements.volumeDisplay.innerHTML=r),e.elements.volumeControl&&(e.elements.volumeControl.value=t),e.elements.volumeIndicator&&(e.elements.volumeIndicator.style.width=a+"%"),e.elements.volumePlayhead&&(e.elements.volumePlayhead.style.left=a+"%")},D=e=>{e.mute=!e.mute,I(e)},I=e=>{let t=e.elements.muteButton;e.mute?(e.tmpVolume=e.volume,_(e,0),t.classList.add("muted"),t.classList.remove("unmuted"),t.innerHTML="Unmute"):(typeof e.tmpVolume<"u"&&e.tmpVolume>0?_(e,e.tmpVolume):_(e,1),t.classList.remove("muted"),t.classList.add("unmuted"),t.innerHTML="Mute")},R=(e,t)=>{let r=e.duration,a=(t/r*100).toFixed(2);e.elements.progressBackground&&(e.elements.progressBackground.style.width=a+"%")};var U=e=>[...e.getElementsByTagName("audio")],C=(e,t,r)=>[...`picobel loading picobel--index-${e} ${t}`.trim().split(" "),r],O=e=>e.map((t,r)=>(t.key=r,t.mute=!1,t.tmpVolume=1,t)),V=e=>{let t={};return t.url=e.currentSrc,t.fileType=$(t.url),t.fileName=T(t.url),t.title=e.title&&e.title!==""?e.title:`${t.fileName}.${t.fileType}`,e.dataset?t.artist=e.dataset.artist?e.dataset.artist:!1:t.artist=!1,t};var W=async(e,t)=>{let a=!1,o=0,i=15,l=()=>{if(o++,e.buffered.length>0){let n=e.buffered.end(e.buffered.length-1),p=e.duration;R(e,n),n>=p&&(a=!0,clearInterval(t[e.currentSrc]))}o>=i&&(e.buffered.length<=0&&e.readyState<=0&&h(e),clearInterval(t[e.currentSrc]))};t[e.currentSrc]=setInterval(l,1e3),window.addEventListener("unload",()=>clearInterval(t[e.currentSrc]))};var j=e=>e.map(t=>(t.addEventListener("timeupdate",B,!1),t.addEventListener("canplaythrough",()=>F(t),!1),t.addEventListener("loadedmetadata",()=>c(t),!1),t.addEventListener("error",()=>h(t),!1),t.elements.playPauseButton&&t.elements.playPauseButton.addEventListener("click",()=>M(t,e),!1),t.elements.progressRange&&t.elements.progressRange.addEventListener("input",r=>q(r,t),!1),t.elements.progressRange&&t.elements.progressRange.addEventListener("focus",()=>x(t,!0),!1),t.elements.progressRange&&t.elements.progressRange.addEventListener("blur",()=>x(t,!1),!1),t.elements.volumeControl&&t.elements.volumeControl.addEventListener("input",r=>z(r,t),!1),t.elements.volumeControl&&t.elements.volumeControl.addEventListener("focus",()=>v(t,!0),!1),t.elements.volumeControl&&t.elements.volumeControl.addEventListener("blur",()=>v(t,!1),!1),t.elements.muteButton&&t.elements.muteButton.addEventListener("click",r=>D(t,r),!1),t));var Y=(e={})=>{let t=L(e),r={audioNodes:[],theme:t.theme,components:t.components},a=(l,n)=>{l.map((p,d)=>{p.parentNode.replaceChild(n[d],p)})};r.audioNodes=U(t.context),r.audioNodes=O(r.audioNodes);let o=E(r.audioNodes,r.components,r.theme);a(r.audioNodes,o),r.audioNodes=S(r.audioNodes,t.context,r.theme),r.audioNodes=j(r.audioNodes);let i={};return r.audioNodes.forEach(l=>{l.readyState>=1&&c(l),W(l,i)}),{state:r}};var J=`.default.picobel{--black: #555;--black--light: hsl(0, 0%, 43.3%);--black--opacity: rgba(0, 0, 0, .3);--white: #ffffff;--grey: #dad8d2;--greyDark: hsl(30, 10%, 65%);--primary: #ddd;--primary--opacity: rgba(221, 221, 221, .4);--highlight: #00b7c6;--background_grey_dark: #e6e6e6;--background_grey_light: #f1f1f1;--focus: #015ecc;--progress-bar-height: 20px}@keyframes default_background_slide{0%{background-position:0 0}to{background-position:20px 0}}.default.picobel{font-size:10px;position:relative;box-sizing:border-box;z-index:1;margin:10px 0;height:60px;border-radius:3px;box-shadow:var(--black--opacity) 0 1px 2px 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default.picobel *,.default.picobel *:before,.default.picobel *:after{box-sizing:inherit}.default.picobel *:focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__loader{position:absolute;z-index:2;bottom:0;left:56px;right:0;height:var(--progress-bar-height);opacity:0;transition:opacity .2s;pointer-events:none;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:var(--progress-bar-height) var(--progress-bar-height);background-repeat:repeat;background-position:0 0;animation:default_background_slide linear infinite .4s}.default.loading .default__loader{opacity:1}.default__play-pause{font-size:10px;border:none;appearance:none;width:40px;height:60px;color:var(--white);background:var(--black);background-image:linear-gradient(var(--black--light),var(--black));box-shadow:inset var(--black--light) -1px 0 0 0;position:absolute;top:0;left:0;cursor:pointer}.default__play-pause:focus{z-index:3}.default__play-pause__text{display:none}.default__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-4px;border-top:8px solid transparent;border-left:10px solid var(--white);border-bottom:8px solid transparent}.default__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:14px;margin-top:-7px;margin-right:-7px;border-top:0;border-left:5px solid var(--white);border-bottom:0;opacity:0}.default__play-pause.playing:before{height:14px;margin-top:-7px;margin-left:-7px;border-top:0;border-left:5px solid var(--white);border-bottom:0}.default__play-pause.playing:after{opacity:1}.default__wrapper--title-artist{padding:10px 20px 10px 70px;height:44px;background:var(--primary);color:var(--black);text-shadow:var(--white) 0 1px 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.default__artist{font-family:monospace;display:inline-block;line-height:1;margin-left:5px}.default__artist:not(:empty):before{content:" \\2013 "}.default__wrapper--timer-progress-duration{position:absolute;bottom:0;left:56px;right:0;height:var(--progress-bar-height)}.default__timer,.default__duration{position:absolute;top:0;z-index:3;width:60px;text-align:left;background:transparent;color:var(--white);line-height:10px;height:var(--progress-bar-height);pointer-events:none;font-size:10px;padding:5px 5px 5px 10px;font-family:monospace}.default__timer{left:0}.default__duration{right:0;text-align:right}.default.loading .default__timer,.default.loading .default__duration{display:none}.default__progress-slider__wrapper{height:var(--progress-bar-height);position:absolute;top:0;left:0;width:100%}.default__progress-slider__replacement{height:100%;position:absolute;top:0;left:0;width:100%;background:var(--black);border-bottom-right-radius:2px;overflow:hidden}.default__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__progress-slider__indicator{height:var(--progress-bar-height);position:absolute;top:0;left:0;background:var(--primary--opacity);width:0%}.default__progress-slider__playhead{width:5px;height:var(--progress-bar-height);position:absolute;top:0;left:0%;margin-left:-2px;background:var(--highlight)}.default.loading .default__progress-slider__indicator,.default.loading .default__progress-slider__playhead{display:none}.default__progress-slider__range{width:100%;height:var(--progress-bar-height);font-size:inherit;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.default__progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:10px;height:20px;cursor:pointer}.default__progress-slider__range::-moz-range-track{width:100%;height:20px;cursor:pointer}.default__progress-slider__range::-ms-track{width:100%;height:20px;cursor:pointer}.default__wrapper--mute-volume{position:absolute;top:0;left:40px;width:16px;height:60px;z-index:2}.default__mute{display:block;width:16px;height:16px;font-size:0;color:transparent;border:0;appearance:none;background:var(--black);position:absolute;top:0;right:0;cursor:pointer;overflow:hidden}.default__mute:before{display:block;width:4px;height:3px;position:absolute;content:"";top:50%;right:50%;margin-right:-1px;transform:translateY(-50%);background:var(--white)}.default__mute:after{display:block;width:4px;max-width:100%;height:4px;position:absolute;content:"";top:50%;margin-top:-4px;right:50%;margin-right:-2px;border-top:4px solid transparent;border-right:4px solid var(--white);border-bottom:4px solid transparent}.default__mute.muted:before{background:var(--grey)}.default__mute.muted:after{border-right-color:var(--grey)}.default__volume-label{display:none}.default__volume-slider__wrapper{display:block;height:16px;position:absolute;top:16px;left:0;z-index:3;width:44px;transform:rotate(90deg) translateY(-100%);transform-origin:top left}.default__volume-slider__replacement{display:block;height:16px;position:absolute;top:0;left:0;background:var(--greyDark);width:44px}.default__volume-slider__replacement:after{content:"";display:block;width:100%;border-right:44px solid var(--black);border-bottom:16px solid transparent;position:absolute;bottom:0;left:0;pointer-events:none}.default__volume-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__volume-slider__indicator{height:16px;position:absolute;top:0;right:0;background:var(--highlight);width:100%;transform:rotate(180deg)}.default__volume-slider__playhead{display:none}.default__volume-slider__range{width:100%;padding:0;margin:0;height:16px;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.default__volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:10px;height:15px;cursor:pointer}.default__volume-slider__range::-moz-range-track{width:100%;height:15px;cursor:pointer}.default__volume-slider__range::-ms-track{width:100%;height:15px;cursor:pointer} `;var k=class extends HTMLElement{constructor(){super()}mountStyles(t="default"){let r=`picobel-styles-${t}`;if(!document.getElementById(r)){let a=document.createElement("style");a.id=r,a.textContent=J,document.head.appendChild(a)}}connectedCallback(){let t=this.getAttribute("data-theme")||"default",r={theme:t,context:this},a=this.getAttribute("data-components");a&&(r.components=JSON.parse(a)),Y(r),this.mountStyles(t)}};typeof window<"u"&&"customElements"in window&&window.customElements.define("picobel-player-default",k); diff --git a/build/picobel.3.1.3.js b/build/picobel.3.1.3.js new file mode 100644 index 0000000..0d9d222 --- /dev/null +++ b/build/picobel.3.1.3.js @@ -0,0 +1 @@ +(()=>{var Q=Object.defineProperty;var X=(e,t)=>{for(var r in t)Q(e,r,{get:t[r],enumerable:!0})};var Y=(e="default")=>{switch(e){case"itunes":return["playPause",[["title","artist"],["timer","progress","duration"]]];case"default":default:return["playPause",["mute","volume"],["title","artist"],["timer","progress","duration"]]}},$=(e={})=>{let t={context:document,theme:"default",preload:!1},{components:r,...l}=e,s=Y(e.theme),i={...t,components:s,...l};return r&&Array.isArray(r)&&(i.components=r),i};var f=e=>{let t=Math.floor(e/3600),r=Math.floor(e%3600/60).toFixed(0).toString(),l=Math.floor(e%3600%60).toFixed(0).toString();l=l>=10?l:`0${l}`;let s=`${r}:${l}`;return t>0&&(r=r>=10?r:`0${r}`,s=`${t}:${r}:${l}`),s},P=e=>e.substr((~-e.lastIndexOf(".")>>>0)+2),T=e=>e.replace(/^.*[\\\/]/,"").split(".")[0];var y={};X(y,{artist:()=>te,duration:()=>se,mute:()=>oe,playPause:()=>Z,progress:()=>le,timer:()=>re,title:()=>ee,volume:()=>ie});var v=({namespace:e="picobel",min:t=0,max:r=100,value:l=0,step:s=!1,index:i=0,label:a="slider"})=>{let n=o("div",e),u=o("div",`${e}-slider__wrapper`),c=o("div",`${e}-slider__replacement`),G=o("div",`${e}-slider__background`);c.appendChild(G);let J=o("div",`${e}-slider__indicator`);c.appendChild(J);let K=o("div",`${e}-slider__playhead`);c.appendChild(K),u.appendChild(c);let L=`${e}-slider__range--${i}`,p=o("input",`${e}-slider__range`);p.setAttribute("id",L),p.setAttribute("type","range"),p.setAttribute("min",t),p.setAttribute("max",r),p.setAttribute("value",l),s&&p.setAttribute("step",s),u.appendChild(p);let d=o("label",`${e}-label`);return typeof a=="string"?d.innerHTML=a:d.appendChild(a),d.setAttribute("for",L),n.appendChild(d),n.appendChild(u),n};var Z=e=>{let t=o("button",`${e}__play-pause`);t.setAttribute("type","button");let r=o("span",`${e}__play-pause__text`);return r.innerHTML="Play",t.appendChild(r),t},ee=(e,t)=>{let r=o("span",`${e}__title`);return r.innerHTML="File "+(t+1),r},te=e=>o("span",`${e}__artist`),re=e=>{let t=o("span",`${e}__timer`);return t.innerHTML="0:00",t},se=e=>{let t=o("span",`${e}__duration`);return t.innerHTML="-:--",t},le=(e,t)=>{let r=o("span",`${e}__progress-label-inner`);return r.innerHTML="Progress",v({namespace:`${e}__progress`,min:0,max:100,value:0,index:t,label:r})},oe=e=>{let t=o("button",`${e}__mute`);return t.setAttribute("type","button"),t.innerHTML="Mute",t},ie=(e,t)=>{let r=o("span",`${e}__volume-label-inner`),l=o("span",`${e}__volume-label-key`);l.innerHTML="Volume ",r.appendChild(l);let s=o("span",`${e}__volume-label-value`);return s.innerHTML="10",r.appendChild(s),v({namespace:`${e}__volume`,min:0,max:1,value:1,step:.1,index:t,label:r})};var o=(e="div",t="")=>{let r=document.createElement(e);return r.className=t,r},x=({key:e,container:t,components:r,namespace:l})=>(r.forEach(s=>{if(typeof s=="string"&&y[s]){let i=y[s](l,e);t.appendChild(i);return}if(Array.isArray(s)&&s.length){let i=s.flat().join("-"),a=o("div",`${l}__wrapper--${i}`),n=x({key:e,container:a,components:s,namespace:l});t.appendChild(n)}}),t);var A=e=>{let t=f(e.duration);return e.elements.durationDisplay&&(e.elements.durationDisplay.innerHTML=t),e},S=(e,t)=>(e.artist&&t.artistDisplay&&(t.artistDisplay.innerHTML=e.artist),t.titleDisplay&&(t.titleDisplay.innerHTML=e.title),t),C=(e=[],t,r)=>e.map(s=>{let i=o("div"),a=M(s.key,s.className,r);i.classList.add(...a),i.setAttribute("data-picobel-index",s.key);let n=o("div",`${r}__loader`);return i.appendChild(n),x({key:s.key,container:i,components:t,namespace:r})}),E=(e,t,r)=>e.map(l=>{let s=t.querySelector(`[data-picobel-index='${l.key}']`);return l.elements={wrapper:s,playPauseButton:s.querySelector(`.${r}__play-pause`),playPauseButtonText:s.querySelector(`.${r}__play-pause__text`),muteButton:s.querySelector(`.${r}__mute`),playTimer:s.querySelector(`.${r}__timer`),durationDisplay:s.querySelector(`.${r}__duration`),titleDisplay:s.querySelector(`.${r}__title`),artistDisplay:s.querySelector(`.${r}__artist`),progressWrapper:s.querySelector(`.${r}__progress-slider__replacement`),progressRange:s.querySelector(`.${r}__progress-slider__range`),progressPlayhead:s.querySelector(`.${r}__progress-slider__playhead`),progressBackground:s.querySelector(`.${r}__progress-slider__background`),progressIndicator:s.querySelector(`.${r}__progress-slider__indicator`),volumeWrapper:s.querySelector(`.${r}__volume-slider__replacement`),volumeControl:s.querySelector(`.${r}__volume-slider__range`),volumeDisplay:s.querySelector(`.${r}__volume-label-value`),volumeIndicator:s.querySelector(`.${r}__volume-slider__indicator`),volumePlayhead:s.querySelector(`.${r}__volume-slider__playhead`)},l});var ae=e=>e.forEach(t=>{w(t)}),k=(e,t)=>{e.paused||e.currentTime===0?(ae(t),ne(e)):w(e)},ne=e=>{e.play();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("paused"),r.innerHTML="Pause",t.classList.add("playing")},w=e=>{e.pause();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("playing"),r.innerHTML="Play",t.classList.add("paused")},ue=e=>{e.pause();let t=e.elements.playPauseButton,r=e.elements.playPauseButtonText;t.classList.remove("playing"),r.innerHTML="Play"},N=e=>B(e.srcElement),B=e=>{let t=e.currentTime,r=e.duration;if(e.elements.playTimer){let s=f(t);e.elements.playTimer.innerHTML=s}t>=r&&ue(e);let l=(t/r*100).toFixed(2);e.elements.progressRange&&(e.elements.progressRange.value=l,e.elements.progressIndicator.style.width=l+"%",e.elements.progressPlayhead.style.left=l+"%")},F=e=>{A(e),m(e)},m=e=>{e.elements.wrapper.classList.remove("loading");let t=V(e);S(t,e.elements)},g=e=>{e.elements.wrapper.classList.add("error"),e.elements.wrapper.classList.remove("loading"),e.elements.wrapper.innerHTML='
Error loading audio file
'},H=(e,t)=>{let l=t.duration*(e.srcElement.value/100);l=l.toFixed(2),t.currentTime=l,B(t)},b=(e,t)=>e.elements.progressWrapper.classList.toggle("focus",t),q=(e,t)=>{let r=e.srcElement.value;t.tmpVolume=t.volume,t.mute=!1,I(t),_(t,r)},h=(e,t)=>e.elements.volumeWrapper.classList.toggle("focus",t),_=(e,t)=>{let r=t*10,l=(t*100).toFixed(2);e.volume=t,e.elements.volumeDisplay&&(e.elements.volumeDisplay.innerHTML=r),e.elements.volumeControl&&(e.elements.volumeControl.value=t),e.elements.volumeIndicator&&(e.elements.volumeIndicator.style.width=l+"%"),e.elements.volumePlayhead&&(e.elements.volumePlayhead.style.left=l+"%")},D=e=>{e.mute=!e.mute,I(e)},I=e=>{let t=e.elements.muteButton;e.mute?(e.tmpVolume=e.volume,_(e,0),t.classList.add("muted"),t.classList.remove("unmuted"),t.innerHTML="Unmute"):(typeof e.tmpVolume<"u"&&e.tmpVolume>0?_(e,e.tmpVolume):_(e,1),t.classList.remove("muted"),t.classList.add("unmuted"),t.innerHTML="Mute")},R=(e,t)=>{let r=e.duration,l=(t/r*100).toFixed(2);e.elements.progressBackground&&(e.elements.progressBackground.style.width=l+"%")};var U=e=>[...e.getElementsByTagName("audio")],M=(e,t,r)=>[...`picobel loading picobel--index-${e} ${t}`.trim().split(" "),r],W=e=>e.map((t,r)=>(t.key=r,t.mute=!1,t.tmpVolume=1,t)),V=e=>{let t={};return t.url=e.currentSrc,t.fileType=P(t.url),t.fileName=T(t.url),t.title=e.title&&e.title!==""?e.title:`${t.fileName}.${t.fileType}`,e.dataset?t.artist=e.dataset.artist?e.dataset.artist:!1:t.artist=!1,t};var O=async(e,t)=>{let l=!1,s=0,i=15,a=()=>{if(s++,e.buffered.length>0){let n=e.buffered.end(e.buffered.length-1),u=e.duration;R(e,n),n>=u&&(l=!0,clearInterval(t[e.currentSrc]))}s>=i&&(e.buffered.length<=0&&e.readyState<=0&&g(e),clearInterval(t[e.currentSrc]))};t[e.currentSrc]=setInterval(a,1e3),window.addEventListener("unload",()=>clearInterval(t[e.currentSrc]))};var j=e=>e.map(t=>(t.addEventListener("timeupdate",N,!1),t.addEventListener("canplaythrough",()=>F(t),!1),t.addEventListener("loadedmetadata",()=>m(t),!1),t.addEventListener("error",()=>g(t),!1),t.elements.playPauseButton&&t.elements.playPauseButton.addEventListener("click",()=>k(t,e),!1),t.elements.progressRange&&t.elements.progressRange.addEventListener("input",r=>H(r,t),!1),t.elements.progressRange&&t.elements.progressRange.addEventListener("focus",()=>b(t,!0),!1),t.elements.progressRange&&t.elements.progressRange.addEventListener("blur",()=>b(t,!1),!1),t.elements.volumeControl&&t.elements.volumeControl.addEventListener("input",r=>q(r,t),!1),t.elements.volumeControl&&t.elements.volumeControl.addEventListener("focus",()=>h(t,!0),!1),t.elements.volumeControl&&t.elements.volumeControl.addEventListener("blur",()=>h(t,!1),!1),t.elements.muteButton&&t.elements.muteButton.addEventListener("click",r=>D(t,r),!1),t));var z=(e={})=>{let t=$(e),r={audioNodes:[],theme:t.theme,components:t.components},l=(a,n)=>{a.map((u,c)=>{u.parentNode.replaceChild(n[c],u)})};r.audioNodes=U(t.context),r.audioNodes=W(r.audioNodes);let s=C(r.audioNodes,r.components,r.theme);l(r.audioNodes,s),r.audioNodes=E(r.audioNodes,t.context,r.theme),r.audioNodes=j(r.audioNodes);let i={};return r.audioNodes.forEach(a=>{a.readyState>=1&&m(a),O(a,i)}),{state:r}};window.picobel=z;})(); diff --git a/build/picobel.all.css b/build/picobel.all.css index 387e5b7..abdda58 100644 --- a/build/picobel.all.css +++ b/build/picobel.all.css @@ -1 +1 @@ -.default.picobel{--black: #555;--black--light: hsl(0, 0%, 43.3%);--black--opacity: rgba(0, 0, 0, .3);--white: #ffffff;--grey: #dad8d2;--greyDark: hsl(30, 10%, 65%);--primary: #ddd;--primary--opacity: rgba(221, 221, 221, .4);--highlight: #00b7c6;--background_grey_dark: #e6e6e6;--background_grey_light: #f1f1f1;--focus: #015ecc;--progress-bar-height: 2em}@keyframes default_background_slide{0%{background-position:0 0}to{background-position:2em 0}}.default.picobel{font-size:10px;position:relative;box-sizing:border-box;z-index:1;margin:1em 0;height:6em;border-radius:.3em;box-shadow:var(--black--opacity) 0 .1em .2em 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default.picobel *,.default.picobel *:before,.default.picobel *:after{box-sizing:inherit}.default.picobel *:focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__loader{position:absolute;z-index:2;bottom:0;left:5.6em;right:0;height:var(--progress-bar-height);opacity:0;transition:opacity .2s;pointer-events:none;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:var(--progress-bar-height) var(--progress-bar-height);background-repeat:repeat;background-position:0 0;animation:default_background_slide linear infinite .4s}.default.loading .default__loader{opacity:1}.default__play-pause{font-size:1em;border:none;appearance:none;width:4em;height:6em;color:var(--white);background:var(--black);background-image:linear-gradient(var(--black--light),var(--black));box-shadow:inset var(--black--light) -1px 0 0 0;position:absolute;top:0;left:0;cursor:pointer}.default__play-pause:focus{z-index:3}.default__play-pause__text{display:none}.default__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.8em;margin-left:-.4em;border-top:.8em solid transparent;border-left:1em solid var(--white);border-bottom:.8em solid transparent}.default__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1.4em;margin-top:-.7em;margin-right:-.7em;border-top:0;border-left:.5em solid var(--white);border-bottom:0;opacity:0}.default__play-pause.playing:before{height:1.4em;margin-top:-.7em;margin-left:-.7em;border-top:0;border-left:.5em solid var(--white);border-bottom:0}.default__play-pause.playing:after{opacity:1}.default__wrapper--title-artist{padding:1em 2em 1em 7em;height:4.4em;background:var(--primary);color:var(--black);text-shadow:var(--white) 0 .1em 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.default__artist{font-family:monospace;display:inline-block;line-height:1;margin-left:.5em}.default__artist:not(:empty):before{content:" \2013 "}.default__wrapper--timer-progress-duration{position:absolute;bottom:0;left:5.6em;right:0;height:var(--progress-bar-height)}.default__timer,.default__duration{position:absolute;top:0;z-index:3;width:6em;text-align:left;background:transparent;color:var(--white);line-height:1em;height:var(--progress-bar-height);pointer-events:none;font-size:1em;padding:.5em .5em .5em 1em;font-family:monospace}.default__timer{left:0}.default__duration{right:0;text-align:right}.default.loading .default__timer,.default.loading .default__duration{display:none}.default__progress-slider__wrapper{height:var(--progress-bar-height);position:absolute;top:0;left:0;width:100%}.default__progress-slider__replacement{height:100%;position:absolute;top:0;left:0;width:100%;background:var(--black);border-bottom-right-radius:.2em;overflow:hidden}.default__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__progress-slider__indicator{height:var(--progress-bar-height);position:absolute;top:0;left:0;background:var(--primary--opacity);width:0%}.default__progress-slider__playhead{width:.5em;height:var(--progress-bar-height);position:absolute;top:0;left:0%;margin-left:-.2em;background:var(--highlight)}.default.loading .default__progress-slider__indicator,.default.loading .default__progress-slider__playhead{display:none}.default__progress-slider__range{width:100%;height:var(--progress-bar-height);font-size:inherit;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.default__progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:2em;cursor:pointer}.default__progress-slider__range::-moz-range-track{width:100%;height:2em;cursor:pointer}.default__progress-slider__range::-ms-track{width:100%;height:2em;cursor:pointer}.default__wrapper--mute-volume{position:absolute;top:0;left:4em;width:1.6em;height:6em;z-index:2}.default__mute{display:block;width:1.6em;height:1.6em;font-size:1em;color:transparent;border:0;appearance:none;background:var(--black);position:absolute;top:0;right:0;cursor:pointer;overflow:hidden}.default__mute:before{display:block;width:.4em;height:.3em;position:absolute;content:"";top:50%;right:50%;margin-right:-.1em;transform:translateY(-50%);background:var(--white)}.default__mute:after{display:block;width:.4em;max-width:100%;height:.4em;position:absolute;content:"";top:50%;margin-top:-.4em;right:50%;margin-right:-.2em;border-top:.4em solid transparent;border-right:.4em solid var(--white);border-bottom:.4em solid transparent}.default__mute.muted:before{background:var(--grey)}.default__mute.muted:after{border-right-color:var(--grey)}.default__volume-label{display:none}.default__volume-slider__wrapper{display:block;height:1.6em;position:absolute;top:1.6em;left:0;z-index:3;width:4.4em;transform:rotate(90deg) translateY(-100%);transform-origin:top left}.default__volume-slider__replacement{display:block;height:1.6em;position:absolute;top:0;left:0;background:var(--greyDark);width:4.4em}.default__volume-slider__replacement:after{content:"";display:block;width:100%;border-right:4.4em solid var(--black);border-bottom:1.6em solid transparent;position:absolute;bottom:0;left:0;pointer-events:none}.default__volume-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__volume-slider__indicator{height:1.6em;position:absolute;top:0;right:0;background:var(--highlight);width:100%;transform:rotate(180deg)}.default__volume-slider__playhead{display:none}.default__volume-slider__range{width:100%;padding:0;margin:0;height:1.6em;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.default__volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:1.5em;cursor:pointer}.default__volume-slider__range::-moz-range-track{width:100%;height:1.5em;cursor:pointer}.default__volume-slider__range::-ms-track{width:100%;height:1.5em;cursor:pointer}.skeleton.picobel{--black: #555;--white: #ffffff;--grey: #ccc;--grey--light: #eee;--chrome-focus-blue: #015ecc;--progress-height: 32px;--progress-inner-height: calc(var(--progress-height) - 2px);--skeleton-focus: var(--chrome-focus-blue);--skeleton-background: var(--white);--skeleton-text: var(--black);--skeleton-progress: var(--grey);--skeleton-buffered: var(--grey--light)}.skeleton.picobel *,.skeleton.picobel *:before,.skeleton.picobel *:after{box-sizing:inherit}.skeleton.picobel *:focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px}.skeleton.picobel{font-size:inherit;position:relative;box-sizing:border-box;z-index:1;margin:10px 0;height:64px;border:1px solid var(--skeleton-text)}@keyframes skeleton_background_slide{0%{background-position:0 0}to{background-position:20px 0}}.skeleton__loader{position:absolute;display:none;z-index:5;bottom:-1px;left:183px;right:0;height:var(--progress-height);border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);background:linear-gradient(to right,var(--skeleton-background) 50%,var(--skeleton-text) 50%);background-size:20px 20px;background-repeat:repeat;background-position:0 0;animation:skeleton_background_slide linear infinite .4s}.skeleton.loading .skeleton__loader{display:block}.skeleton__play-pause{font-size:10px;border:1px solid var(--skeleton-text);appearance:none;width:64px;height:64px;background:var(--skeleton-background);position:absolute;top:-1px;left:-1px;cursor:pointer}.skeleton__play-pause__text{display:none}.skeleton__play-pause:focus{z-index:3}.skeleton__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-top:10px solid transparent;border-left:12px solid var(--skeleton-text);border-bottom:10px solid transparent}.skeleton__play-pause.playing:before{height:18px;width:16px;transform:translate(-50%,-50%);border-top:0;border-left:6px solid var(--skeleton-text);border-right:6px solid var(--skeleton-text);border-bottom:0}.skeleton__wrapper--title-artist{padding:0 10px 0 74px;height:64px;background:var(--skeleton-background);color:var(--skeleton-text);line-height:1.6}.skeleton__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.skeleton__artist{font-family:monospace;display:inline-block;margin-left:5px;line-height:1}.skeleton__artist:not(:empty):before{content:" \2013 "}.skeleton__wrapper--timer-progress-duration{position:absolute;bottom:-1px;left:182px;right:0;height:32px;border-left:1px solid var(--skeleton-text)}.skeleton__timer,.skeleton__duration{position:absolute;bottom:0;z-index:4;text-align:left;background:transparent;color:var(--skeleton-text);line-height:1;pointer-events:none;font-size:14px;height:32px;padding:10px 5px 9px 10px;font-family:monospace}.skeleton__timer{left:0}.skeleton__duration{right:0;text-align:right}.skeleton.loading .skeleton__timer,.skeleton.loading .skeleton__duration{display:none}.skeleton__progress-slider__wrapper{height:var(--progress-height);font-size:10px;line-height:1;position:absolute;bottom:0;left:0;width:100%}.skeleton__progress-slider__replacement{position:relative;background:var(--skeleton-background);border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);height:var(--progress-height);overflow:hidden}.skeleton__progress-slider__replacement.focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px;z-index:3}.skeleton__progress-slider__background{transition:width .2s;height:var(--progress-inner-height);position:absolute;top:0;left:0;background:var(--skeleton-buffered);width:0%}.skeleton__progress-slider__indicator{height:var(--progress-inner-height);position:absolute;top:0;left:0;background:var(--skeleton-progress);width:0%}.skeleton__progress-slider__playhead{width:8px;height:var(--progress-inner-height);position:absolute;top:0;left:0%;margin-left:-4px;background:var(--skeleton-text)}.skeleton.loading .skeleton__progress-slider__indicator,.skeleton.loading .skeleton__progress-slider__playhead{display:none}.skeleton__progress-slider__range{width:100%;height:var(--progress-height);padding:0;margin:0;z-index:4;position:absolute;top:0;left:0;opacity:0}.skeleton__progress-slider__range::-webkit-slider-runnable-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__progress-slider__range::-moz-range-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__progress-slider__range::-ms-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__wrapper--mute-volume{position:absolute;bottom:-1px;left:62px;width:120px;height:32px;z-index:2;border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);background:var(--skeleton-background);display:flex;align-items:center}.skeleton__mute{display:block;z-index:2;float:left;width:32px;height:32px;font-size:10px;color:transparent;border:0;appearance:none;background:var(--skeleton-background);border:1px solid var(--skeleton-text);position:relative;cursor:pointer;overflow:hidden;flex-shrink:0}.skeleton__mute:before{display:block;width:6px;height:6px;position:absolute;content:"";top:50%;right:50%;margin-right:-1px;transform:translateY(-50%);background:var(--skeleton-text)}.skeleton__mute:after{display:block;width:5px;height:5px;position:absolute;content:"";top:50%;transform:translateY(-50%);right:50%;margin-right:-4px;border-top:8px solid transparent;border-right:8px solid var(--skeleton-text);border-bottom:8px solid transparent}.skeleton__mute.muted:before{background:var(--skeleton-progress)}.skeleton__mute.muted:after{border-right-color:var(--skeleton-progress)}.skeleton__volume{--volume-padding: 6px;--volume-height: 20px;--volume-width: 76px;width:var(--volume-width) + var(--volume-padding) * 2;height:var(--volume-height) + var(--volume-padding) * 2;padding:var(--volume-padding)}.skeleton__volume-label{display:none}.skeleton__volume-slider__wrapper{width:var(--volume-width);height:var(--volume-height);position:relative}.skeleton__volume-slider__replacement{display:block;height:var(--volume-height);width:var(--volume-width);position:relative;left:0;z-index:3;background:var(--skeleton-progress);flex-grow:1;float:left;transform:rotate(180deg)}.skeleton__volume-slider__replacement:after{content:"";display:block;border-right:var(--volume-width) solid var(--skeleton-background);border-top:var(--volume-height) solid transparent;position:absolute;top:0;left:0;pointer-events:none}.skeleton__volume-slider__replacement.focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px}.skeleton__volume-slider__indicator{height:100%;position:absolute;top:0;right:0;background:var(--skeleton-text);width:var(--volume-width)}.skeleton__volume-slider__playhead{display:none}.skeleton__volume-slider__range{width:100%;height:var(--volume-height);padding:0;margin:0;position:absolute;z-index:4;top:0;left:0;opacity:0}.skeleton__volume-slider__range::-webkit-slider-runnable-track{width:100%;height:var(--volume-height);cursor:pointer}.skeleton__volume-slider__range::-moz-range-track{width:100%;height:var(--volume-height);cursor:pointer}.skeleton__volume-slider__range::-ms-track{width:100%;height:var(--volume-height);cursor:pointer}.bbc.picobel{--white: #ffffff;--black: #000000;--highlight: #f54997;--border: #363733;--grey: #808080;--progressHeight: .6rem;--black--opacity: rgba(0, 0, 0, .5)}.bbc.picobel{margin:2em 0;padding:0 0 0 4em;position:relative;overflow:visible;box-sizing:border-box;background:var(--white);font-family:Arial,sans-serif;height:6em}.bbc.picobel *,.bbc.picobel *:before,.bbc.picobel *:after{box-sizing:inherit}.bbc.picobel .bbc__loader{position:absolute;top:0;left:0;width:100%;height:3em;background:var(--black);z-index:2;pointer-events:none;display:none;transition:opacity .2s;text-align:center;line-height:1;padding:1em;overflow:hidden;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:2em 2em;background-repeat:repeat;background-position:0 0;animation:bbc_background_slide linear infinite .4s}.bbc.picobel .bbc__loader:after{content:"Loading";display:block;width:6em;text-align:left;color:var(--white);animation:ellipsis linear infinite .8s;position:absolute;top:1em;padding-left:1em;left:50%;margin-left:-3em;z-index:2}.bbc.picobel.loading .bbc__loader{display:block}.bbc.picobel .bbc__play-pause{border:none;appearance:none;width:3em;height:3em;font-size:1em;background:var(--black);border-right:1px solid var(--border);position:absolute;bottom:0;margin-top:-1.3em;left:0;cursor:pointer;transition:background .2s}.bbc.picobel .bbc__play-pause .bbc__play-pause__text{display:none}.bbc.picobel .bbc__play-pause:focus{outline:none}.bbc.picobel .bbc__play-pause:hover{background:var(--highlight)}.bbc.picobel .bbc__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.6em;margin-left:-.25em;border-top:.6em solid transparent;border-left:.8em solid var(--white);border-bottom:.6em solid transparent}.bbc.picobel .bbc__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1em;margin-top:-.5em;margin-right:-.5em;border-top:0;border-left:.4em solid var(--white);border-bottom:0;opacity:0}.bbc.picobel .bbc__play-pause.playing:before{height:1em;margin-top:-.5em;margin-left:-.5em;border-top:0;border-left:.4em solid var(--white);border-bottom:0}.bbc.picobel .bbc__play-pause.playing:after{opacity:1}.bbc.picobel .bbc__wrapper--title-artist{color:var(--white);background:var(--black);padding:1em;margin-bottom:1em;position:absolute;top:3em;height:3em;left:12em;right:6em}.bbc.picobel .bbc__title{line-height:1;padding-bottom:.2em}.bbc.picobel .bbc__artist{color:var(--grey);margin-left:1em;line-height:1}.bbc.picobel .bbc__wrapper--timer-progress-duration{padding:1em;position:absolute;top:0;left:0;height:3em;font-size:1em;width:100%;float:left;background:var(--black--opacity)}.bbc.picobel .bbc__wrapper--timer-progress-duration .bbc__timer,.bbc.picobel .bbc__wrapper--timer-progress-duration .bbc__duration{position:absolute;display:block;top:3em;height:3em;width:4.5em;color:var(--white);background:var(--black);border:0;padding:1em 0;text-align:right;border-radius:0}.bbc.picobel .bbc__wrapper--timer-progress-duration .bbc__timer{right:4.5em;padding-right:.3em;display:inline-block;width:auto;padding-left:1em;border-left:1px solid var(--border)}.bbc.picobel .bbc__wrapper--timer-progress-duration .bbc__duration{text-align:left;right:0;color:var(--grey)}.bbc.picobel .bbc__wrapper--timer-progress-duration .bbc__duration:before{padding-right:.2em;content:"/"}.bbc.picobel .bbc__progress-slider__wrapper{height:1em;line-height:1;position:absolute;top:1em;left:1em;right:1em}.bbc.picobel .bbc__progress-label-inner{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.bbc.picobel .bbc__progress-slider__wrapper .bbc__progress-slider__range{width:100%;padding:0;height:1em;margin:0;position:absolute;top:0;left:0;opacity:0}.bbc.picobel .bbc__progress-slider__wrapper .bbc__progress-slider__background{height:.5em;position:absolute;top:.25em;left:0;background:var(--black);width:100%}.bbc.picobel .bbc__progress-slider__wrapper .bbc__progress-slider__indicator{height:.5em;position:absolute;top:.25em;left:0;background:var(--highlight);width:0%}.bbc.picobel .bbc__progress-slider__wrapper .bbc__progress-slider__playhead{background:var(--black);box-shadow:inset var(--white) 0 0 0 .2em;width:.5em;height:1em;position:absolute;top:0;left:0%;margin-left:-.25em}.bbc.picobel input[type=range].bbc__progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:var(--progressHeight);height:2em;cursor:pointer}.bbc.picobel input[type=range].bbc__progress-slider__range::-moz-range-track{width:100%;height:var(--progressHeight);cursor:pointer}.bbc.picobel input[type=range].bbc__progress-slider__range::-ms-track{width:100%;height:var(--progressHeight);cursor:pointer}.bbc.picobel .bbc__wrapper--mute-volume{width:9em;height:3em;position:absolute;bottom:0;left:3em;background:var(--black);border-right:1px solid var(--border)}.bbc.picobel .bbc__mute{width:3em;height:3em;font-size:1em;border:0;appearance:none;position:absolute;bottom:0;left:0;cursor:pointer;background:var(--black);color:transparent}.bbc.picobel .bbc__mute:before{display:block;width:.5em;height:.5em;position:absolute;content:"";top:50%;right:50%;margin-right:.1em;transform:translateY(-50%);background:var(--white)}.bbc.picobel .bbc__mute:after{display:block;width:.5em;height:.5em;position:absolute;content:"";top:50%;margin-top:-.5em;right:50%;border-top:.5em solid transparent;border-right:.5em solid var(--white);border-bottom:.5em solid transparent}.bbc.picobel .bbc__mute:focus{outline:none}.bbc.picobel .bbc__wrapper--mute-volume:hover .bbc__mute{background:var(--highlight)}.bbc.picobel .bbc__volume-label-key{display:block;position:absolute;top:50%;height:1rem;margin-top:-.5rem;width:1rem;font-size:0;left:50%;border-top:2px solid var(--white);border-right:2px solid var(--white);border-radius:0 .8rem 0 0;transform:rotate(45deg)}.bbc.picobel .bbc__volume-label-value{display:block;position:absolute;top:50%;height:.6rem;margin-top:-.3rem;width:.6rem;font-size:0;left:50%;border-top:2px solid var(--white);border-right:2px solid var(--white);border-radius:0 .5rem 0 0;transform:rotate(45deg)}.bbc.picobel .bbc__mute.muted+.bbc__volume .bbc__volume-label-key{border-right:0;border-radius:0;width:.6rem;transform-origin:center;transform:rotate(-45deg);height:0;margin-top:-.05rem;margin-left:.2rem}.bbc.picobel .bbc__mute.muted+.bbc__volume .bbc__volume-label-value{border-right:0;border-radius:0;height:0;width:.6rem;margin-top:-.05rem;transform-origin:center;margin-left:.2rem}.bbc.picobel .bbc__volume-label{position:absolute;height:3em;width:3em;top:0;left:0;pointer-events:none}.bbc.picobel .bbc__volume-slider__wrapper{transform-origin:0 0;position:absolute;top:0;left:3em;height:3em;position:relative;background:var(--black);border-left:1px solid var(--border);width:5.9em}.bbc.picobel .bbc__volume-slider__wrapper .bbc__volume-slider__range{width:100%;padding:0;margin:0;height:3em;left:0;opacity:0}.bbc.picobel .bbc__volume-slider__wrapper .bbc__volume-slider__background{height:1.5em;position:absolute;bottom:.5em;left:0;background:var(--grey);width:100%;background-image:linear-gradient(to right,var(--grey) 0em,var(--grey) .25em,var(--black) .25em,var(--black) .5em,var(--grey) .5em,var(--grey) .75em,var(--black) .75em,var(--black) 1em,var(--grey) 1em,var(--grey) 1.25em,var(--black) 1.25em,var(--black) 1.5em,var(--grey) 1.5em,var(--grey) 1.75em,var(--black) 1.75em,var(--black) 2em,var(--grey) 2em,var(--grey) 2.25em,var(--black) 2.25em,var(--black) 2.5em,var(--grey) 2.5em,var(--grey) 2.75em,var(--black) 2.75em,var(--black) 3em,var(--grey) 3em,var(--grey) 3.25em,var(--black) 3.25em,var(--black) 3.5em,var(--grey) 3.5em,var(--grey) 3.75em,var(--black) 3.75em,var(--black) 4em,var(--grey) 4em,var(--grey) 4.25em,var(--black) 4.25em,var(--black) 4.5em,var(--grey) 4.5em,var(--grey) 4.75em,var(--black) 4.75em,var(--black) 5em,var(--grey) 5em,var(--grey) 5.25em,var(--black) 5.25em,var(--black) 5.5em,var(--grey) 5.5em,var(--grey) 5.75em,var(--black) 5.75em,var(--black) 6em,var(--grey) 6em,var(--grey) 6.25em,var(--black) 6.25em,var(--black) 6.5em,var(--grey) 6.5em,var(--grey) 6.75em,var(--black) 6.75em,var(--black) 7em,var(--grey) 7em,var(--grey) 7.25em,var(--black) 7.25em,var(--black) 7.5em,var(--grey) 7.5em,var(--grey) 7.75em,var(--black) 7.75em,var(--black) 8em,var(--grey) 8em,var(--grey) 8.25em,var(--black) 8.25em,var(--black) 8.5em,var(--grey) 8.5em,var(--grey) 8.75em,var(--black) 8.75em,var(--black) 9em,var(--grey) 9em,var(--grey) 9.25em,var(--black) 9.25em,var(--black) 9.5em,var(--grey) 9.5em,var(--grey) 9.75em,var(--black) 9.75em,var(--black) 10em)}.bbc.picobel .bbc__volume-slider__wrapper .bbc__volume-slider__indicator{height:1.5em;position:absolute;bottom:.5em;left:0;background:var(--highlight);width:100%;background-image:linear-gradient(to right,var(--highlight) 0em,var(--highlight) .25em,var(--black) .25em,var(--black) .5em,var(--highlight) .5em,var(--highlight) .75em,var(--black) .75em,var(--black) 1em,var(--highlight) 1em,var(--highlight) 1.25em,var(--black) 1.25em,var(--black) 1.5em,var(--highlight) 1.5em,var(--highlight) 1.75em,var(--black) 1.75em,var(--black) 2em,var(--highlight) 2em,var(--highlight) 2.25em,var(--black) 2.25em,var(--black) 2.5em,var(--highlight) 2.5em,var(--highlight) 2.75em,var(--black) 2.75em,var(--black) 3em,var(--highlight) 3em,var(--highlight) 3.25em,var(--black) 3.25em,var(--black) 3.5em,var(--highlight) 3.5em,var(--highlight) 3.75em,var(--black) 3.75em,var(--black) 4em,var(--highlight) 4em,var(--highlight) 4.25em,var(--black) 4.25em,var(--black) 4.5em,var(--highlight) 4.5em,var(--highlight) 4.75em,var(--black) 4.75em,var(--black) 5em,var(--highlight) 5em,var(--highlight) 5.25em,var(--black) 5.25em,var(--black) 5.5em,var(--highlight) 5.5em,var(--highlight) 5.75em,var(--black) 5.75em,var(--black) 6em,var(--highlight) 6em,var(--highlight) 6.25em,var(--black) 6.25em,var(--black) 6.5em,var(--highlight) 6.5em,var(--highlight) 6.75em,var(--black) 6.75em,var(--black) 7em,var(--highlight) 7em,var(--highlight) 7.25em,var(--black) 7.25em,var(--black) 7.5em,var(--highlight) 7.5em,var(--highlight) 7.75em,var(--black) 7.75em,var(--black) 8em,var(--highlight) 8em,var(--highlight) 8.25em,var(--black) 8.25em,var(--black) 8.5em,var(--highlight) 8.5em,var(--highlight) 8.75em,var(--black) 8.75em,var(--black) 9em,var(--highlight) 9em,var(--highlight) 9.25em,var(--black) 9.25em,var(--black) 9.5em,var(--highlight) 9.5em,var(--highlight) 9.75em,var(--black) 9.75em,var(--black) 10em)}.bbc.picobel .bbc__volume-slider__wrapper .bbc__volume-slider__playhead{background:var(--white);width:.2em;height:2em;position:absolute;bottom:.5em;left:100%;margin-left:-.1em}.bbc.picobel input[type=range].bbc__volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:3em;cursor:pointer}.bbc.picobel input[type=range].bbc__volume-slider__range::-moz-range-track{width:100%;height:3em;cursor:pointer}.bbc.picobel input[type=range].bbc__volume-slider__range::-ms-track{width:100%;height:3em;cursor:pointer}@keyframes bbc_background_slide{0%{background-position:0 0}to{background-position:2em 0}}@keyframes ellipsis{0%{content:"Loading"}25%{content:"Loading."}50%{content:"Loading.."}75%{content:"Loading..."}to{content:"Loading"}}.eatenbymonsters.picobel{--black: #555;--white: #ffffff;--grey: #dad8d2;--primary: #00b7c6;--primary--opacity: rgba(0, 183, 198, .3);--primary--dark: hsl(184, 100%, 29%)}@keyframes ebm_background_slide{0%{background-position:0 0}to{background-position:2em 0}}.eatenbymonsters.picobel{margin:2em 0;position:relative;overflow:hidden;box-sizing:border-box;height:6em}.eatenbymonsters.picobel *,.eatenbymonsters.picobel *:before,.eatenbymonsters.picobel *:after{box-sizing:inherit}.eatenbymonsters.picobel .loader{width:100%;position:absolute;bottom:0;left:0;height:2em;overflow:hidden;display:none;z-index:2;transition:opacity .2s;background:linear-gradient(to right,var(--primary) 50%,var(--primary--dark) 50%);background-size:2em 2em;background-repeat:repeat;background-position:0 0;animation:ebm_background_slide linear infinite .4s}.eatenbymonsters.picobel.loading .loader{display:block}.eatenbymonsters.picobel .playerTrigger{border:none;appearance:none;width:3em;height:4em;font-size:1em;color:var(--white);background:var(--black);position:absolute;top:0;left:0;cursor:pointer}.eatenbymonsters.picobel .playerTrigger .buttonText{display:none}.eatenbymonsters.picobel .playerTrigger:focus{outline:none}.eatenbymonsters.picobel .playerTrigger:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.6em;margin-left:-.25em;border-top:.6em solid transparent;border-left:.8em solid var(--white);border-bottom:.6em solid transparent}.eatenbymonsters.picobel .playerTrigger:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1em;margin-top:-.5em;margin-right:-.5em;border-top:0;border-left:.4em solid var(--white);border-bottom:0;opacity:0}.eatenbymonsters.picobel .playerTrigger.songPlaying:before{height:1em;margin-top:-.5em;margin-left:-.5em;border-top:0;border-left:.4em solid var(--white);border-bottom:0}.eatenbymonsters.picobel .playerTrigger.songPlaying:after{opacity:1}.eatenbymonsters.picobel .metaWrapper{padding:.5em 1.5em .5em 3.5em;height:4em;overflow:auto;background:var(--primary);background:var(--primary--opacity)}.eatenbymonsters.picobel .metaWrapper .titleDisplay{display:block;line-height:1;font-weight:700}.eatenbymonsters.picobel .metaWrapper .artistDisplay{display:block;line-height:1}.eatenbymonsters.picobel .timingsWrapper{position:absolute;width:100%;bottom:0;left:0;height:2em;background:red}.eatenbymonsters.picobel .timingsWrapper .songPlayTimer,.eatenbymonsters.picobel .timingsWrapper .songDuration{position:absolute;top:0;z-index:3;width:4em;text-align:center;background:transparent;color:var(--white);line-height:2;height:2em;pointer-events:none}.eatenbymonsters.picobel .timingsWrapper .songPlayTimer{left:0}.eatenbymonsters.picobel .timingsWrapper .songDuration{right:0}.eatenbymonsters.picobel.loading .songPlayTimer,.eatenbymonsters.picobel.loading .songDuration{display:none}.eatenbymonsters.picobel .progress-slider__wrapper{height:2em;font-size:1em;line-height:1;position:absolute;top:0;left:0;width:100%;background:var(--black);overflow:hidden}.eatenbymonsters.picobel .progress-slider__wrapper .progress-slider__range{width:100%;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.eatenbymonsters.picobel .progress-slider__wrapper .progress-slider__progress-indicator{height:2em;position:absolute;top:0;left:0;background:var(--primary--opacity);width:0%}.eatenbymonsters.picobel .progress-slider__wrapper .progress-slider__playhead{width:1em;height:2em;position:absolute;top:50%;left:0%;margin-top:-1em;margin-left:-.5em;background:var(--primary)}.eatenbymonsters.picobel.loading .progress-slider__progress-indicator,.eatenbymonsters.picobel.loading .progress-slider__playhead{display:none}.eatenbymonsters.picobel input[type=range].progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:2.2em;cursor:pointer}.eatenbymonsters.picobel input[type=range].progress-slider__range::-moz-range-track{width:100%;height:2em;cursor:pointer}.eatenbymonsters.picobel input[type=range].progress-slider__range::-ms-track{width:100%;height:2em;cursor:pointer}.eatenbymonsters.picobel .songVolume{position:absolute;top:0;right:0;width:1.5em;height:4em;overflow:hidden;z-index:2}.eatenbymonsters.picobel .songVolume .songMuteButton{display:block;width:1.5rem;height:1.5rem;font-size:0;border:0;appearance:none;background:var(--black);position:absolute;top:0;right:0;cursor:pointer}.eatenbymonsters.picobel .songVolume .songMuteButton:before{display:block;width:.4rem;height:.3rem;position:absolute;content:"";top:50%;right:50%;margin-right:-.1rem;transform:translateY(-50%);background:var(--white)}.eatenbymonsters.picobel .songVolume .songMuteButton:after{display:block;width:.4rem;height:.4rem;position:absolute;content:"";top:50%;margin-top:-.4rem;right:50%;margin-right:-.2rem;border-top:.4rem solid transparent;border-right:.4rem solid var(--white);border-bottom:.4rem solid transparent}.eatenbymonsters.picobel .songVolume .songMuteButton.songMuted{&:before{background:var(--grey)}&:after{border-right-color:var(--grey)}}.eatenbymonsters.picobel .songVolumeValue{margin-left:.2em}.eatenbymonsters.picobel .songVolumeLabelWrapper{display:none}.eatenbymonsters.picobel .volume-slider__wrapper{display:block;height:1.5em;position:absolute;top:0;left:0;z-index:3;background:var(--black);width:2.5em;transform:rotate(90deg);transform-origin:bottom left}.eatenbymonsters.picobel .volume-slider__wrapper .volume-slider__range{width:100%;padding:0;margin:0;height:1.5em;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.eatenbymonsters.picobel .volume-slider__wrapper .volume-slider__progress-indicator{height:1.5em;position:absolute;top:0;right:0;background:var(--primary);width:100%;transform:rotate(180deg)}.eatenbymonsters.picobel .volume-slider__wrapper .volume-slider__playhead{display:none}.eatenbymonsters.picobel input[type=range].volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:1.5em;cursor:pointer}.eatenbymonsters.picobel input[type=range].volume-slider__range::-moz-range-track{width:100%;height:1.5em;cursor:pointer}.eatenbymonsters.picobel input[type=range].volume-slider__range::-ms-track{width:100%;height:1.5em;cursor:pointer}.itunes.picobel{--white: #ffffff;--black: #4d4d4d;--black--opacity: rgba(77, 77, 77, .6);--icon_grey: #7f7f7f;--background_grey_dark: #e6e6e6;--background_grey_light: #f1f1f1;--border: #c3c3c3;--played_grey: #707070;--unplayed_grey: #bcbcbc;--playhead: #000000;--text_dark: #3c3c3c;--text_light: #7a7a7a;--progress-height: 20px;--progress-track-height: 10px;--focus: #015ecc;margin:2em 0;position:relative;border:1px solid var(--border);box-shadow:inset var(--white) 0 1px 0 0,var(--black--opacity) 0 1px 2px 0;min-height:4em;box-sizing:border-box;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark));font-family:Arial,sans-serif;color:var(--text_light);text-shadow:var(--white) 0 1px 0;display:flex;justify-content:stretch;align-items:flex-end}.itunes.picobel *,.itunes.picobel *:before,.itunes.picobel *:after{box-sizing:inherit}.itunes.error{height:4em}.itunes .error{width:100%}.itunes__loader{position:absolute;top:50%;left:50%;width:2em;height:2em;margin-top:-1.25em;margin-left:1em;border:.2em solid var(--border);border-top-color:var(--black);z-index:2;pointer-events:none;opacity:0;transition:opacity .2s;text-align:center;line-height:1;overflow:hidden;border-radius:50%;animation:itunes_spin linear infinite 1s}.itunes.loading .itunes__loader{opacity:1}.itunes__play-pause{border:none;appearance:none;position:relative;width:4em;height:4em;font-size:1em;background:var(--white);color:var(--icon_grey);border-right:1px solid var(--border);cursor:pointer;flex-grow:0;flex-shrink:0}.itunes__play-pause__text{display:none}.itunes__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.8em;margin-left:-.4em;border-top:.8em solid transparent;border-bottom:.8em solid transparent;border-left:1em solid var(--icon_grey)}.itunes__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1.4em;margin-top:-.7em;margin-right:-.7em;border-top:0;border-bottom:0;border-left:.6em solid var(--icon_grey);display:none}.itunes__play-pause.playing:before{height:1.4em;margin-top:-.7em;margin-left:-.7em;border-top:0;border-bottom:0;border-left:.6em solid var(--icon_grey)}.itunes__play-pause.playing:after{display:block}.itunes__wrapper--title-artist{padding:.5em .5em .2em}.itunes.loading .itunes__wrapper--title-artist{display:none}.itunes__title{display:block;text-align:center;color:var(--text_dark);font-weight:500}.itunes__artist{font-size:.8em;display:block;text-align:center}.itunes__wrapper--title-artist-timer-progress-duration{width:100%;flex-shrink:1}.itunes__wrapper--timer-progress-duration{position:relative}.itunes__timer{position:absolute;top:0;left:1em;transform:translateY(-100%)}.itunes__duration{position:absolute;top:0;right:1em;transform:translateY(-100%)}.itunes__progress-label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.itunes__progress-slider__wrapper{position:relative;line-height:1;width:100%}.itunes__progress-slider__replacement{height:var(--progress-height);position:relative;display:flex;justify-content:stretch;align-items:stretch;overflow:hidden}.itunes__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.itunes__progress-slider__background{height:var(--progress-track-height);position:absolute;bottom:0;left:0;background:var(--unplayed_grey);width:100%}.itunes__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px;z-index:3}.itunes__progress-slider__indicator{height:var(--progress-track-height);position:absolute;bottom:0;left:0;background:var(--played_grey);width:0%}.itunes__progress-slider__playhead{width:.3em;height:15px;position:absolute;bottom:0;left:0%;border-top-left-radius:.2em;border-top-right-radius:.2em;margin-left:-.15em;background:var(--playhead);transition:height .2s}.itunes__progress-slider__wrapper:hover .itunes__progress-slider__playhead{height:var(--progress-height)}.itunes.loading .itunes__progress-slider__indicator,.itunes.loading .itunes__progress-slider__playhead{display:none}.itunes__progress-slider__range{width:100%;height:var(--progress-height);padding:0;margin:0;z-index:4;position:absolute;top:0;left:0;opacity:0}.itunes__progress-slider__range::-webkit-slider-runnable-track{width:100%;height:var(--progress-height);cursor:pointer}.itunes__progress-slider__range::-moz-range-track{width:100%;height:var(--progress-height);cursor:pointer}.itunes__progress-slider__range::-ms-track{width:100%;height:var(--progress-height);cursor:pointer}@keyframes itunes_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pitchfork.picobel{--grey: #dad8d2;--white: #ffffff;--black: #000;--border: #a2a2a2;--unplayed: #eeeeee;--played: #ff3530;--text_dark: var(--black);--icon_grey: #7f7f7f;--text_light: #969696;--progressHeight: .4rem}.pitchfork.picobel{margin:2em 0;padding:1em 1em 1em 4em;position:relative;border:2px solid var(--border);overflow:hidden;box-sizing:border-box;background:var(--white);font-family:Arial,sans-serif;color:var(--text_light)}.pitchfork.picobel *,.pitchfork.picobel *:before,.pitchfork.picobel *:after{box-sizing:inherit}.pitchfork.picobel .loader{position:absolute;top:3.1em;left:7.2em;right:4.2em;height:.4em;z-index:2;pointer-events:none;display:none;transition:opacity .2s;text-align:center;line-height:1;overflow:hidden;border-radius:.2em;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:2em 2em;background-repeat:repeat;background-position:0 0;animation:pitchfork_background_slide linear infinite .3s}.pitchfork.picobel.loading .loader{display:block}.pitchfork.picobel .playerTrigger{border:none;appearance:none;width:2.6em;height:2.6em;font-size:1em;color:var(--icon_grey);background:var(--white);position:absolute;top:50%;margin-top:-1.3em;left:1em;border:2px solid var(--black);border-radius:50%;cursor:pointer}.pitchfork.picobel .playerTrigger .buttonText{display:none}.pitchfork.picobel .playerTrigger:focus{outline:none}.pitchfork.picobel .playerTrigger:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.6em;margin-left:-.25em;border-top:.6em solid transparent;border-left:.8em solid var(--black);border-bottom:.6em solid transparent}.pitchfork.picobel .playerTrigger:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1em;margin-top:-.5em;margin-right:-.5em;border-top:0;border-left:.4em solid var(--black);border-bottom:0;opacity:0}.pitchfork.picobel .playerTrigger.songPlaying:before{height:1em;margin-top:-.5em;margin-left:-.5em;border-top:0;border-left:.4em solid var(--black);border-bottom:0}.pitchfork.picobel .playerTrigger.songPlaying:after{opacity:1}.pitchfork.picobel .metaWrapper{color:var(--black);padding:0 1em;margin-bottom:1em}.pitchfork.picobel .titleDisplay{font-weight:700}.pitchfork.picobel .titleDisplay:before{content:"\201c"}.pitchfork.picobel .titleDisplay:after{content:"\201d"}.pitchfork.picobel .artistDisplay:before{content:" \2013 "}.pitchfork.picobel .songPlayTimer{position:absolute;bottom:1em;left:5em}.pitchfork.picobel .songDuration{position:absolute;bottom:1em;right:1em}.pitchfork.picobel .timingsWrapper{padding:0 4em;position:relative;font-size:.8em;width:100%;float:left}.pitchfork.picobel .timingsWrapper .songPlayTimer,.pitchfork.picobel .timingsWrapper .songDuration{position:absolute;top:-.2em;width:4em;text-align:center;line-height:1}.pitchfork.picobel .timingsWrapper .songPlayTimer{left:0;border-radius:.5em 0 0 .5em}.pitchfork.picobel .timingsWrapper .songDuration{right:0;border-radius:0 .5em .5em 0}.pitchfork.picobel .progress-slider__wrapper{height:var(--progressHeight);line-height:1;position:relative;border-radius:.2rem;overflow:hidden}.pitchfork.picobel .progress-slider__wrapper .progress-slider__range{width:100%;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.pitchfork.picobel .progress-slider__wrapper .progress-slider__background{height:var(--progressHeight);position:absolute;bottom:0;left:0;background:var(--unplayed);width:100%}.pitchfork.picobel .progress-slider__wrapper .progress-slider__progress-indicator{height:var(--progressHeight);position:absolute;bottom:0;left:0;background:var(--played);width:0%}.pitchfork.picobel .progress-slider__wrapper .progress-slider__playhead{display:none}.pitchfork.picobel input[type=range].progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:var(--progressHeight);height:2.2em;cursor:pointer}.pitchfork.picobel input[type=range].progress-slider__range::-moz-range-track{width:100%;height:var(--progressHeight);cursor:pointer}.pitchfork.picobel input[type=range].progress-slider__range::-ms-track{width:100%;height:var(--progressHeight);cursor:pointer}.pitchfork.picobel .songVolume{display:none}@keyframes pitchfork_background_slide{0%{background-position:0 0}to{background-position:2em 0}}.soundcloud.picobel{--white: #ffffff;--black: #333333;--orange: #fa5300;--volume_bg: #f2f2f2;--border: #cecece;--unplayed: #c8c8c8;--text_dark: #666666;--icon_grey: #7f7f7f;--background_grey_dark: #dedede;--background_grey_light: #f2f2f2;--text_light: #969696;--progressHeight: .6rem}.soundcloud.picobel{margin:2em 0;padding:0 0 0 4em;position:relative;border:1px solid var(--border);overflow:visible;box-sizing:border-box;background:var(--white);font-family:Arial,sans-serif;color:var(--text_light);height:3em;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.soundcloud.picobel *,.soundcloud.picobel *:before,.soundcloud.picobel *:after{box-sizing:inherit}.soundcloud.picobel .loader{position:absolute;top:0;left:0;width:100%;height:3em;background:var(--black);z-index:2;pointer-events:none;opacity:0;transition:opacity .2s;text-align:center;line-height:1;padding:1em;overflow:hidden;background:linear-gradient(to right,var(--white) 50%,var(--orange) 50%);background-size:2em 2em;background-repeat:repeat;background-position:0 0;animation:soundcloud_background_slide linear infinite .4s}.soundcloud.picobel.loading .loader{opacity:.2}.soundcloud.picobel .playerTrigger{border:none;appearance:none;width:2.6em;height:2.6em;font-size:1em;color:var(--icon_grey);background:none;position:absolute;top:50%;margin-top:-1.3em;left:1em;border-radius:50%;cursor:pointer}.soundcloud.picobel .playerTrigger .buttonText{display:none}.soundcloud.picobel .playerTrigger:focus{outline:none}.soundcloud.picobel .playerTrigger:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.6em;margin-left:-.25em;border-top:.6em solid transparent;border-left:.8em solid var(--black);border-bottom:.6em solid transparent}.soundcloud.picobel .playerTrigger:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1em;margin-top:-.5em;margin-right:-.5em;border-top:0;border-left:.4em solid var(--black);border-bottom:0;opacity:0}.soundcloud.picobel .playerTrigger.songPlaying:before{height:1em;margin-top:-.5em;margin-left:-.5em;border-top:0;border-left:.4em solid var(--black);border-bottom:0}.soundcloud.picobel .playerTrigger.songPlaying:after{opacity:1}.soundcloud.picobel .metaWrapper{color:var(--black);padding:0 1em;margin-bottom:1em;float:right;width:25%;margin-top:.7em}.soundcloud.picobel .titleDisplay{display:block;font-size:.7em;line-height:1;padding-bottom:.2em;color:var(--text_light)}.soundcloud.picobel .artistDisplay{display:block;font-size:.7em;line-height:1;color:var(text_dark);font-weight:700}.soundcloud.picobel .songPlayTimer{position:absolute;bottom:1em;left:5em;color:var(--orange)}.soundcloud.picobel .songDuration{position:absolute;bottom:1em;right:1em}.soundcloud.picobel .timingsWrapper{padding:0 4em;position:relative;font-size:.8em;width:70%;float:left;margin-top:1.5em}.soundcloud.picobel .timingsWrapper .songPlayTimer,.soundcloud.picobel .timingsWrapper .songDuration{position:absolute;top:-.2em;width:4em;text-align:center;line-height:1}.soundcloud.picobel .timingsWrapper .songPlayTimer{left:0;border-radius:.5em 0 0 .5em}.soundcloud.picobel .timingsWrapper .songDuration{right:0;border-radius:0 .5em .5em 0}.soundcloud.picobel .progress-slider__wrapper{height:var(--progressHeight);line-height:1;position:relative;border-radius:.2rem}.soundcloud.picobel .progress-slider__wrapper .progress-slider__range{width:100%;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.soundcloud.picobel .progress-slider__wrapper .progress-slider__background{height:.1rem;position:absolute;bottom:50%;left:0;background:var(--unplayed);width:100%}.soundcloud.picobel .progress-slider__wrapper .progress-slider__progress-indicator{height:.1rem;position:absolute;bottom:50%;left:0;background:var(--orange);width:0%}.soundcloud.picobel .progress-slider__wrapper .progress-slider__playhead{background:var(--orange);width:.4rem;height:.4rem;position:absolute;bottom:50%;margin-bottom:-.2rem;left:0%;border-radius:50%;margin-left:calc(0 - (var(--progressHeight) / 2));opacity:0;transition:opacity .2s}.soundcloud.picobel .progress-slider__wrapper:hover .progress-slider__playhead{opacity:1}.soundcloud.picobel input[type=range].progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:var(--progressHeight);height:2.2em;cursor:pointer}.soundcloud.picobel input[type=range].progress-slider__range::-moz-range-track{width:100%;height:var(--progressHeight);cursor:pointer}.soundcloud.picobel input[type=range].progress-slider__range::-ms-track{width:100%;height:var(--progressHeight);cursor:pointer}.soundcloud.picobel .songMuteButton{display:none}.soundcloud.picobel .songVolume{width:5%;height:3em;float:left;position:relative;cursor:pointer}.soundcloud.picobel .songVolume:before{display:block;width:.5em;height:.4em;position:absolute;content:"";top:50%;right:50%;margin-right:.1em;margin-top:-.2em;background:var(--black)}.soundcloud.picobel .songVolume:after{display:block;width:.5em;position:absolute;content:"";top:50%;margin-top:-.5em;right:50%;border-top:.5em solid transparent;border-right:.5em solid var(--black);border-bottom:.5em solid transparent}.soundcloud.picobel .songVolumeValue,.soundcloud.picobel .songVolumeLabelWrapper{display:none}.soundcloud.picobel .volume-slider__wrapper{display:none;transform:rotate(-90deg);transform-origin:0 0;position:absolute;top:.5em;left:50%;margin-left:-1.5em;background:blue;height:1em;font-size:.8em;position:relative;background:var(--volume_bg);border:1px solid var(--border);width:10em;float:left;padding:1em;box-shadow:rgba(black,.3) -.2em 0 1em -.2em}.soundcloud.picobel .volume-slider__wrapper:before{content:"";display:block;position:absolute;top:50%;margin-top:-8px;left:-8px;border-top:8px solid transparent;border-right:8px solid var(--border);border-bottom:8px solid transparent}.soundcloud.picobel .volume-slider__wrapper:after{content:"";display:block;position:absolute;top:50%;margin-top:-8px;left:-7px;border-top:8px solid transparent;border-right:8px solid var(--volume_bg);border-bottom:8px solid transparent}.soundcloud.picobel .volume-slider__wrapper .volume-slider__range{width:100%;padding:0;margin:0;position:absolute;top:.5em;height:2em;left:0;opacity:0}.soundcloud.picobel .volume-slider__wrapper .volume-slider__background{height:1px;position:absolute;bottom:50%;left:0;background:var(--unplayed);width:100%}.soundcloud.picobel .volume-slider__wrapper .volume-slider__progress-indicator{height:1px;position:absolute;bottom:50%;left:0;background:var(--orange);width:0%}.soundcloud.picobel .volume-slider__wrapper .volume-slider__playhead{background:var(--orange);width:.4rem;height:.4rem;position:absolute;bottom:50%;margin-bottom:-.2rem;left:0%;border-radius:50%;margin-left:0 - (var(--progressHeight) / 2);opacity:0;transition:opacity .2s}.soundcloud.picobel .songVolume:hover .volume-slider__wrapper{display:block}.soundcloud.picobel input[type=range].volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:2em;cursor:pointer}.soundcloud.picobel input[type=range].volume-slider__range::-moz-range-track{width:100%;height:2em;cursor:pointer}.soundcloud.picobel input[type=range].volume-slider__range::-ms-track{width:100%;height:2em;cursor:pointer}@keyframes soundcloud_background_slide{0%{background-position:0 0}to{background-position:2em 0}} +.default.picobel{--black: #555;--black--light: hsl(0, 0%, 43.3%);--black--opacity: rgba(0, 0, 0, .3);--white: #ffffff;--grey: #dad8d2;--greyDark: hsl(30, 10%, 65%);--primary: #ddd;--primary--opacity: rgba(221, 221, 221, .4);--highlight: #00b7c6;--background_grey_dark: #e6e6e6;--background_grey_light: #f1f1f1;--focus: #015ecc;--progress-bar-height: 20px}@keyframes default_background_slide{0%{background-position:0 0}to{background-position:20px 0}}.default.picobel{font-size:10px;position:relative;box-sizing:border-box;z-index:1;margin:10px 0;height:60px;border-radius:3px;box-shadow:var(--black--opacity) 0 1px 2px 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default.picobel *,.default.picobel *:before,.default.picobel *:after{box-sizing:inherit}.default.picobel *:focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__loader{position:absolute;z-index:2;bottom:0;left:56px;right:0;height:var(--progress-bar-height);opacity:0;transition:opacity .2s;pointer-events:none;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:var(--progress-bar-height) var(--progress-bar-height);background-repeat:repeat;background-position:0 0;animation:default_background_slide linear infinite .4s}.default.loading .default__loader{opacity:1}.default__play-pause{font-size:10px;border:none;appearance:none;width:40px;height:60px;color:var(--white);background:var(--black);background-image:linear-gradient(var(--black--light),var(--black));box-shadow:inset var(--black--light) -1px 0 0 0;position:absolute;top:0;left:0;cursor:pointer}.default__play-pause:focus{z-index:3}.default__play-pause__text{display:none}.default__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-4px;border-top:8px solid transparent;border-left:10px solid var(--white);border-bottom:8px solid transparent}.default__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:14px;margin-top:-7px;margin-right:-7px;border-top:0;border-left:5px solid var(--white);border-bottom:0;opacity:0}.default__play-pause.playing:before{height:14px;margin-top:-7px;margin-left:-7px;border-top:0;border-left:5px solid var(--white);border-bottom:0}.default__play-pause.playing:after{opacity:1}.default__wrapper--title-artist{padding:10px 20px 10px 70px;height:44px;background:var(--primary);color:var(--black);text-shadow:var(--white) 0 1px 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.default__artist{font-family:monospace;display:inline-block;line-height:1;margin-left:5px}.default__artist:not(:empty):before{content:" \2013 "}.default__wrapper--timer-progress-duration{position:absolute;bottom:0;left:56px;right:0;height:var(--progress-bar-height)}.default__timer,.default__duration{position:absolute;top:0;z-index:3;width:60px;text-align:left;background:transparent;color:var(--white);line-height:10px;height:var(--progress-bar-height);pointer-events:none;font-size:10px;padding:5px 5px 5px 10px;font-family:monospace}.default__timer{left:0}.default__duration{right:0;text-align:right}.default.loading .default__timer,.default.loading .default__duration{display:none}.default__progress-slider__wrapper{height:var(--progress-bar-height);position:absolute;top:0;left:0;width:100%}.default__progress-slider__replacement{height:100%;position:absolute;top:0;left:0;width:100%;background:var(--black);border-bottom-right-radius:2px;overflow:hidden}.default__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__progress-slider__indicator{height:var(--progress-bar-height);position:absolute;top:0;left:0;background:var(--primary--opacity);width:0%}.default__progress-slider__playhead{width:5px;height:var(--progress-bar-height);position:absolute;top:0;left:0%;margin-left:-2px;background:var(--highlight)}.default.loading .default__progress-slider__indicator,.default.loading .default__progress-slider__playhead{display:none}.default__progress-slider__range{width:100%;height:var(--progress-bar-height);font-size:inherit;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.default__progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:10px;height:20px;cursor:pointer}.default__progress-slider__range::-moz-range-track{width:100%;height:20px;cursor:pointer}.default__progress-slider__range::-ms-track{width:100%;height:20px;cursor:pointer}.default__wrapper--mute-volume{position:absolute;top:0;left:40px;width:16px;height:60px;z-index:2}.default__mute{display:block;width:16px;height:16px;font-size:0;color:transparent;border:0;appearance:none;background:var(--black);position:absolute;top:0;right:0;cursor:pointer;overflow:hidden}.default__mute:before{display:block;width:4px;height:3px;position:absolute;content:"";top:50%;right:50%;margin-right:-1px;transform:translateY(-50%);background:var(--white)}.default__mute:after{display:block;width:4px;max-width:100%;height:4px;position:absolute;content:"";top:50%;margin-top:-4px;right:50%;margin-right:-2px;border-top:4px solid transparent;border-right:4px solid var(--white);border-bottom:4px solid transparent}.default__mute.muted:before{background:var(--grey)}.default__mute.muted:after{border-right-color:var(--grey)}.default__volume-label{display:none}.default__volume-slider__wrapper{display:block;height:16px;position:absolute;top:16px;left:0;z-index:3;width:44px;transform:rotate(90deg) translateY(-100%);transform-origin:top left}.default__volume-slider__replacement{display:block;height:16px;position:absolute;top:0;left:0;background:var(--greyDark);width:44px}.default__volume-slider__replacement:after{content:"";display:block;width:100%;border-right:44px solid var(--black);border-bottom:16px solid transparent;position:absolute;bottom:0;left:0;pointer-events:none}.default__volume-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__volume-slider__indicator{height:16px;position:absolute;top:0;right:0;background:var(--highlight);width:100%;transform:rotate(180deg)}.default__volume-slider__playhead{display:none}.default__volume-slider__range{width:100%;padding:0;margin:0;height:16px;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.default__volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:10px;height:15px;cursor:pointer}.default__volume-slider__range::-moz-range-track{width:100%;height:15px;cursor:pointer}.default__volume-slider__range::-ms-track{width:100%;height:15px;cursor:pointer}.skeleton.picobel{--black: #555;--white: #ffffff;--grey: #ccc;--grey--light: #eee;--chrome-focus-blue: #015ecc;--progress-height: 32px;--progress-inner-height: calc(var(--progress-height) - 2px);--skeleton-focus: var(--chrome-focus-blue);--skeleton-background: var(--white);--skeleton-text: var(--black);--skeleton-progress: var(--grey);--skeleton-buffered: var(--grey--light)}.skeleton.picobel *,.skeleton.picobel *:before,.skeleton.picobel *:after{box-sizing:inherit}.skeleton.picobel *:focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px}.skeleton.picobel{font-size:inherit;position:relative;box-sizing:border-box;z-index:1;margin:10px 0;height:64px;border:1px solid var(--skeleton-text)}@keyframes skeleton_background_slide{0%{background-position:0 0}to{background-position:20px 0}}.skeleton__loader{position:absolute;display:none;z-index:5;bottom:-1px;left:183px;right:0;height:var(--progress-height);border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);background:linear-gradient(to right,var(--skeleton-background) 50%,var(--skeleton-text) 50%);background-size:20px 20px;background-repeat:repeat;background-position:0 0;animation:skeleton_background_slide linear infinite .4s}.skeleton.loading .skeleton__loader{display:block}.skeleton__play-pause{font-size:10px;border:1px solid var(--skeleton-text);appearance:none;width:64px;height:64px;background:var(--skeleton-background);position:absolute;top:-1px;left:-1px;cursor:pointer}.skeleton__play-pause__text{display:none}.skeleton__play-pause:focus{z-index:3}.skeleton__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-top:10px solid transparent;border-left:12px solid var(--skeleton-text);border-bottom:10px solid transparent}.skeleton__play-pause.playing:before{height:18px;width:16px;transform:translate(-50%,-50%);border-top:0;border-left:6px solid var(--skeleton-text);border-right:6px solid var(--skeleton-text);border-bottom:0}.skeleton__wrapper--title-artist{padding:0 10px 0 74px;height:64px;background:var(--skeleton-background);color:var(--skeleton-text);line-height:1.6}.skeleton__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.skeleton__artist{font-family:monospace;display:inline-block;margin-left:5px;line-height:1}.skeleton__artist:not(:empty):before{content:" \2013 "}.skeleton__wrapper--timer-progress-duration{position:absolute;bottom:-1px;left:182px;right:0;height:32px;border-left:1px solid var(--skeleton-text)}.skeleton__timer,.skeleton__duration{position:absolute;bottom:0;z-index:4;text-align:left;background:transparent;color:var(--skeleton-text);line-height:1;pointer-events:none;font-size:14px;height:32px;padding:10px 5px 9px 10px;font-family:monospace}.skeleton__timer{left:0}.skeleton__duration{right:0;text-align:right}.skeleton.loading .skeleton__timer,.skeleton.loading .skeleton__duration{display:none}.skeleton__progress-slider__wrapper{height:var(--progress-height);font-size:10px;line-height:1;position:absolute;bottom:0;left:0;width:100%}.skeleton__progress-slider__replacement{position:relative;background:var(--skeleton-background);border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);height:var(--progress-height);overflow:hidden}.skeleton__progress-slider__replacement.focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px;z-index:3}.skeleton__progress-slider__background{transition:width .2s;height:var(--progress-inner-height);position:absolute;top:0;left:0;background:var(--skeleton-buffered);width:0%}.skeleton__progress-slider__indicator{height:var(--progress-inner-height);position:absolute;top:0;left:0;background:var(--skeleton-progress);width:0%}.skeleton__progress-slider__playhead{width:8px;height:var(--progress-inner-height);position:absolute;top:0;left:0%;margin-left:-4px;background:var(--skeleton-text)}.skeleton.loading .skeleton__progress-slider__indicator,.skeleton.loading .skeleton__progress-slider__playhead{display:none}.skeleton__progress-slider__range{width:100%;height:var(--progress-height);padding:0;margin:0;z-index:4;position:absolute;top:0;left:0;opacity:0}.skeleton__progress-slider__range::-webkit-slider-runnable-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__progress-slider__range::-moz-range-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__progress-slider__range::-ms-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__wrapper--mute-volume{position:absolute;bottom:-1px;left:62px;width:120px;height:32px;z-index:2;border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);background:var(--skeleton-background);display:flex;align-items:center}.skeleton__mute{display:block;z-index:2;float:left;width:32px;height:32px;font-size:10px;color:transparent;border:0;appearance:none;background:var(--skeleton-background);border:1px solid var(--skeleton-text);position:relative;cursor:pointer;overflow:hidden;flex-shrink:0}.skeleton__mute:before{display:block;width:6px;height:6px;position:absolute;content:"";top:50%;right:50%;margin-right:-1px;transform:translateY(-50%);background:var(--skeleton-text)}.skeleton__mute:after{display:block;width:5px;height:5px;position:absolute;content:"";top:50%;transform:translateY(-50%);right:50%;margin-right:-4px;border-top:8px solid transparent;border-right:8px solid var(--skeleton-text);border-bottom:8px solid transparent}.skeleton__mute.muted:before{background:var(--skeleton-progress)}.skeleton__mute.muted:after{border-right-color:var(--skeleton-progress)}.skeleton__volume{--volume-padding: 6px;--volume-height: 20px;--volume-width: 76px;width:var(--volume-width) + var(--volume-padding) * 2;height:var(--volume-height) + var(--volume-padding) * 2;padding:var(--volume-padding)}.skeleton__volume-label{display:none}.skeleton__volume-slider__wrapper{width:var(--volume-width);height:var(--volume-height);position:relative}.skeleton__volume-slider__replacement{display:block;height:var(--volume-height);width:var(--volume-width);position:relative;left:0;z-index:3;background:var(--skeleton-progress);flex-grow:1;float:left;transform:rotate(180deg)}.skeleton__volume-slider__replacement:after{content:"";display:block;border-right:var(--volume-width) solid var(--skeleton-background);border-top:var(--volume-height) solid transparent;position:absolute;top:0;left:0;pointer-events:none}.skeleton__volume-slider__replacement.focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px}.skeleton__volume-slider__indicator{height:100%;position:absolute;top:0;right:0;background:var(--skeleton-text);width:var(--volume-width)}.skeleton__volume-slider__playhead{display:none}.skeleton__volume-slider__range{width:100%;height:var(--volume-height);padding:0;margin:0;position:absolute;z-index:4;top:0;left:0;opacity:0}.skeleton__volume-slider__range::-webkit-slider-runnable-track{width:100%;height:var(--volume-height);cursor:pointer}.skeleton__volume-slider__range::-moz-range-track{width:100%;height:var(--volume-height);cursor:pointer}.skeleton__volume-slider__range::-ms-track{width:100%;height:var(--volume-height);cursor:pointer}.bbc.picobel{--white: #ffffff;--black: #000000;--highlight: #f54997;--border: #363733;--grey: #808080;--progressHeight: .6rem;--black--opacity: rgba(0, 0, 0, .5)}.bbc.picobel{margin:2em 0;padding:0 0 0 4em;position:relative;overflow:visible;box-sizing:border-box;background:var(--white);font-family:Arial,sans-serif;height:6em}.bbc.picobel *,.bbc.picobel *:before,.bbc.picobel *:after{box-sizing:inherit}.bbc.picobel .bbc__loader{position:absolute;top:0;left:0;width:100%;height:3em;background:var(--black);z-index:2;pointer-events:none;display:none;transition:opacity .2s;text-align:center;line-height:1;padding:1em;overflow:hidden;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:2em 2em;background-repeat:repeat;background-position:0 0;animation:bbc_background_slide linear infinite .4s}.bbc.picobel .bbc__loader:after{content:"Loading";display:block;width:6em;text-align:left;color:var(--white);animation:ellipsis linear infinite .8s;position:absolute;top:1em;padding-left:1em;left:50%;margin-left:-3em;z-index:2}.bbc.picobel.loading .bbc__loader{display:block}.bbc.picobel .bbc__play-pause{border:none;appearance:none;width:3em;height:3em;font-size:1em;background:var(--black);border-right:1px solid var(--border);position:absolute;bottom:0;margin-top:-1.3em;left:0;cursor:pointer;transition:background .2s}.bbc.picobel .bbc__play-pause .bbc__play-pause__text{display:none}.bbc.picobel .bbc__play-pause:focus{outline:none}.bbc.picobel .bbc__play-pause:hover{background:var(--highlight)}.bbc.picobel .bbc__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.6em;margin-left:-.25em;border-top:.6em solid transparent;border-left:.8em solid var(--white);border-bottom:.6em solid transparent}.bbc.picobel .bbc__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1em;margin-top:-.5em;margin-right:-.5em;border-top:0;border-left:.4em solid var(--white);border-bottom:0;opacity:0}.bbc.picobel .bbc__play-pause.playing:before{height:1em;margin-top:-.5em;margin-left:-.5em;border-top:0;border-left:.4em solid var(--white);border-bottom:0}.bbc.picobel .bbc__play-pause.playing:after{opacity:1}.bbc.picobel .bbc__wrapper--title-artist{color:var(--white);background:var(--black);padding:1em;margin-bottom:1em;position:absolute;top:3em;height:3em;left:12em;right:6em}.bbc.picobel .bbc__title{line-height:1;padding-bottom:.2em}.bbc.picobel .bbc__artist{color:var(--grey);margin-left:1em;line-height:1}.bbc.picobel .bbc__wrapper--timer-progress-duration{padding:1em;position:absolute;top:0;left:0;height:3em;font-size:1em;width:100%;float:left;background:var(--black--opacity)}.bbc.picobel .bbc__wrapper--timer-progress-duration .bbc__timer,.bbc.picobel .bbc__wrapper--timer-progress-duration .bbc__duration{position:absolute;display:block;top:3em;height:3em;width:4.5em;color:var(--white);background:var(--black);border:0;padding:1em 0;text-align:right;border-radius:0}.bbc.picobel .bbc__wrapper--timer-progress-duration .bbc__timer{right:4.5em;padding-right:.3em;display:inline-block;width:auto;padding-left:1em;border-left:1px solid var(--border)}.bbc.picobel .bbc__wrapper--timer-progress-duration .bbc__duration{text-align:left;right:0;color:var(--grey)}.bbc.picobel .bbc__wrapper--timer-progress-duration .bbc__duration:before{padding-right:.2em;content:"/"}.bbc.picobel .bbc__progress-slider__wrapper{height:1em;line-height:1;position:absolute;top:1em;left:1em;right:1em}.bbc.picobel .bbc__progress-label-inner{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.bbc.picobel .bbc__progress-slider__wrapper .bbc__progress-slider__range{width:100%;padding:0;height:1em;margin:0;position:absolute;top:0;left:0;opacity:0}.bbc.picobel .bbc__progress-slider__wrapper .bbc__progress-slider__background{height:.5em;position:absolute;top:.25em;left:0;background:var(--black);width:100%}.bbc.picobel .bbc__progress-slider__wrapper .bbc__progress-slider__indicator{height:.5em;position:absolute;top:.25em;left:0;background:var(--highlight);width:0%}.bbc.picobel .bbc__progress-slider__wrapper .bbc__progress-slider__playhead{background:var(--black);box-shadow:inset var(--white) 0 0 0 .2em;width:.5em;height:1em;position:absolute;top:0;left:0%;margin-left:-.25em}.bbc.picobel input[type=range].bbc__progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:var(--progressHeight);height:2em;cursor:pointer}.bbc.picobel input[type=range].bbc__progress-slider__range::-moz-range-track{width:100%;height:var(--progressHeight);cursor:pointer}.bbc.picobel input[type=range].bbc__progress-slider__range::-ms-track{width:100%;height:var(--progressHeight);cursor:pointer}.bbc.picobel .bbc__wrapper--mute-volume{width:9em;height:3em;position:absolute;bottom:0;left:3em;background:var(--black);border-right:1px solid var(--border)}.bbc.picobel .bbc__mute{width:3em;height:3em;font-size:1em;border:0;appearance:none;position:absolute;bottom:0;left:0;cursor:pointer;background:var(--black);color:transparent}.bbc.picobel .bbc__mute:before{display:block;width:.5em;height:.5em;position:absolute;content:"";top:50%;right:50%;margin-right:.1em;transform:translateY(-50%);background:var(--white)}.bbc.picobel .bbc__mute:after{display:block;width:.5em;height:.5em;position:absolute;content:"";top:50%;margin-top:-.5em;right:50%;border-top:.5em solid transparent;border-right:.5em solid var(--white);border-bottom:.5em solid transparent}.bbc.picobel .bbc__mute:focus{outline:none}.bbc.picobel .bbc__wrapper--mute-volume:hover .bbc__mute{background:var(--highlight)}.bbc.picobel .bbc__volume-label-key{display:block;position:absolute;top:50%;height:1rem;margin-top:-.5rem;width:1rem;font-size:0;left:50%;border-top:2px solid var(--white);border-right:2px solid var(--white);border-radius:0 .8rem 0 0;transform:rotate(45deg)}.bbc.picobel .bbc__volume-label-value{display:block;position:absolute;top:50%;height:.6rem;margin-top:-.3rem;width:.6rem;font-size:0;left:50%;border-top:2px solid var(--white);border-right:2px solid var(--white);border-radius:0 .5rem 0 0;transform:rotate(45deg)}.bbc.picobel .bbc__mute.muted+.bbc__volume .bbc__volume-label-key{border-right:0;border-radius:0;width:.6rem;transform-origin:center;transform:rotate(-45deg);height:0;margin-top:-.05rem;margin-left:.2rem}.bbc.picobel .bbc__mute.muted+.bbc__volume .bbc__volume-label-value{border-right:0;border-radius:0;height:0;width:.6rem;margin-top:-.05rem;transform-origin:center;margin-left:.2rem}.bbc.picobel .bbc__volume-label{position:absolute;height:3em;width:3em;top:0;left:0;pointer-events:none}.bbc.picobel .bbc__volume-slider__wrapper{transform-origin:0 0;position:absolute;top:0;left:3em;height:3em;position:relative;background:var(--black);border-left:1px solid var(--border);width:5.9em}.bbc.picobel .bbc__volume-slider__wrapper .bbc__volume-slider__range{width:100%;padding:0;margin:0;height:3em;left:0;opacity:0}.bbc.picobel .bbc__volume-slider__wrapper .bbc__volume-slider__background{height:1.5em;position:absolute;bottom:.5em;left:0;background:var(--grey);width:100%;background-image:linear-gradient(to right,var(--grey) 0em,var(--grey) .25em,var(--black) .25em,var(--black) .5em,var(--grey) .5em,var(--grey) .75em,var(--black) .75em,var(--black) 1em,var(--grey) 1em,var(--grey) 1.25em,var(--black) 1.25em,var(--black) 1.5em,var(--grey) 1.5em,var(--grey) 1.75em,var(--black) 1.75em,var(--black) 2em,var(--grey) 2em,var(--grey) 2.25em,var(--black) 2.25em,var(--black) 2.5em,var(--grey) 2.5em,var(--grey) 2.75em,var(--black) 2.75em,var(--black) 3em,var(--grey) 3em,var(--grey) 3.25em,var(--black) 3.25em,var(--black) 3.5em,var(--grey) 3.5em,var(--grey) 3.75em,var(--black) 3.75em,var(--black) 4em,var(--grey) 4em,var(--grey) 4.25em,var(--black) 4.25em,var(--black) 4.5em,var(--grey) 4.5em,var(--grey) 4.75em,var(--black) 4.75em,var(--black) 5em,var(--grey) 5em,var(--grey) 5.25em,var(--black) 5.25em,var(--black) 5.5em,var(--grey) 5.5em,var(--grey) 5.75em,var(--black) 5.75em,var(--black) 6em,var(--grey) 6em,var(--grey) 6.25em,var(--black) 6.25em,var(--black) 6.5em,var(--grey) 6.5em,var(--grey) 6.75em,var(--black) 6.75em,var(--black) 7em,var(--grey) 7em,var(--grey) 7.25em,var(--black) 7.25em,var(--black) 7.5em,var(--grey) 7.5em,var(--grey) 7.75em,var(--black) 7.75em,var(--black) 8em,var(--grey) 8em,var(--grey) 8.25em,var(--black) 8.25em,var(--black) 8.5em,var(--grey) 8.5em,var(--grey) 8.75em,var(--black) 8.75em,var(--black) 9em,var(--grey) 9em,var(--grey) 9.25em,var(--black) 9.25em,var(--black) 9.5em,var(--grey) 9.5em,var(--grey) 9.75em,var(--black) 9.75em,var(--black) 10em)}.bbc.picobel .bbc__volume-slider__wrapper .bbc__volume-slider__indicator{height:1.5em;position:absolute;bottom:.5em;left:0;background:var(--highlight);width:100%;background-image:linear-gradient(to right,var(--highlight) 0em,var(--highlight) .25em,var(--black) .25em,var(--black) .5em,var(--highlight) .5em,var(--highlight) .75em,var(--black) .75em,var(--black) 1em,var(--highlight) 1em,var(--highlight) 1.25em,var(--black) 1.25em,var(--black) 1.5em,var(--highlight) 1.5em,var(--highlight) 1.75em,var(--black) 1.75em,var(--black) 2em,var(--highlight) 2em,var(--highlight) 2.25em,var(--black) 2.25em,var(--black) 2.5em,var(--highlight) 2.5em,var(--highlight) 2.75em,var(--black) 2.75em,var(--black) 3em,var(--highlight) 3em,var(--highlight) 3.25em,var(--black) 3.25em,var(--black) 3.5em,var(--highlight) 3.5em,var(--highlight) 3.75em,var(--black) 3.75em,var(--black) 4em,var(--highlight) 4em,var(--highlight) 4.25em,var(--black) 4.25em,var(--black) 4.5em,var(--highlight) 4.5em,var(--highlight) 4.75em,var(--black) 4.75em,var(--black) 5em,var(--highlight) 5em,var(--highlight) 5.25em,var(--black) 5.25em,var(--black) 5.5em,var(--highlight) 5.5em,var(--highlight) 5.75em,var(--black) 5.75em,var(--black) 6em,var(--highlight) 6em,var(--highlight) 6.25em,var(--black) 6.25em,var(--black) 6.5em,var(--highlight) 6.5em,var(--highlight) 6.75em,var(--black) 6.75em,var(--black) 7em,var(--highlight) 7em,var(--highlight) 7.25em,var(--black) 7.25em,var(--black) 7.5em,var(--highlight) 7.5em,var(--highlight) 7.75em,var(--black) 7.75em,var(--black) 8em,var(--highlight) 8em,var(--highlight) 8.25em,var(--black) 8.25em,var(--black) 8.5em,var(--highlight) 8.5em,var(--highlight) 8.75em,var(--black) 8.75em,var(--black) 9em,var(--highlight) 9em,var(--highlight) 9.25em,var(--black) 9.25em,var(--black) 9.5em,var(--highlight) 9.5em,var(--highlight) 9.75em,var(--black) 9.75em,var(--black) 10em)}.bbc.picobel .bbc__volume-slider__wrapper .bbc__volume-slider__playhead{background:var(--white);width:.2em;height:2em;position:absolute;bottom:.5em;left:100%;margin-left:-.1em}.bbc.picobel input[type=range].bbc__volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:3em;cursor:pointer}.bbc.picobel input[type=range].bbc__volume-slider__range::-moz-range-track{width:100%;height:3em;cursor:pointer}.bbc.picobel input[type=range].bbc__volume-slider__range::-ms-track{width:100%;height:3em;cursor:pointer}@keyframes bbc_background_slide{0%{background-position:0 0}to{background-position:2em 0}}@keyframes ellipsis{0%{content:"Loading"}25%{content:"Loading."}50%{content:"Loading.."}75%{content:"Loading..."}to{content:"Loading"}}.eatenbymonsters.picobel{--black: #555;--white: #ffffff;--grey: #dad8d2;--primary: #00b7c6;--primary--opacity: rgba(0, 183, 198, .3);--primary--dark: hsl(184, 100%, 29%)}@keyframes ebm_background_slide{0%{background-position:0 0}to{background-position:2em 0}}.eatenbymonsters.picobel{margin:2em 0;position:relative;overflow:hidden;box-sizing:border-box;height:6em}.eatenbymonsters.picobel *,.eatenbymonsters.picobel *:before,.eatenbymonsters.picobel *:after{box-sizing:inherit}.eatenbymonsters.picobel .loader{width:100%;position:absolute;bottom:0;left:0;height:2em;overflow:hidden;display:none;z-index:2;transition:opacity .2s;background:linear-gradient(to right,var(--primary) 50%,var(--primary--dark) 50%);background-size:2em 2em;background-repeat:repeat;background-position:0 0;animation:ebm_background_slide linear infinite .4s}.eatenbymonsters.picobel.loading .loader{display:block}.eatenbymonsters.picobel .playerTrigger{border:none;appearance:none;width:3em;height:4em;font-size:1em;color:var(--white);background:var(--black);position:absolute;top:0;left:0;cursor:pointer}.eatenbymonsters.picobel .playerTrigger .buttonText{display:none}.eatenbymonsters.picobel .playerTrigger:focus{outline:none}.eatenbymonsters.picobel .playerTrigger:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.6em;margin-left:-.25em;border-top:.6em solid transparent;border-left:.8em solid var(--white);border-bottom:.6em solid transparent}.eatenbymonsters.picobel .playerTrigger:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1em;margin-top:-.5em;margin-right:-.5em;border-top:0;border-left:.4em solid var(--white);border-bottom:0;opacity:0}.eatenbymonsters.picobel .playerTrigger.songPlaying:before{height:1em;margin-top:-.5em;margin-left:-.5em;border-top:0;border-left:.4em solid var(--white);border-bottom:0}.eatenbymonsters.picobel .playerTrigger.songPlaying:after{opacity:1}.eatenbymonsters.picobel .metaWrapper{padding:.5em 1.5em .5em 3.5em;height:4em;overflow:auto;background:var(--primary);background:var(--primary--opacity)}.eatenbymonsters.picobel .metaWrapper .titleDisplay{display:block;line-height:1;font-weight:700}.eatenbymonsters.picobel .metaWrapper .artistDisplay{display:block;line-height:1}.eatenbymonsters.picobel .timingsWrapper{position:absolute;width:100%;bottom:0;left:0;height:2em;background:red}.eatenbymonsters.picobel .timingsWrapper .songPlayTimer,.eatenbymonsters.picobel .timingsWrapper .songDuration{position:absolute;top:0;z-index:3;width:4em;text-align:center;background:transparent;color:var(--white);line-height:2;height:2em;pointer-events:none}.eatenbymonsters.picobel .timingsWrapper .songPlayTimer{left:0}.eatenbymonsters.picobel .timingsWrapper .songDuration{right:0}.eatenbymonsters.picobel.loading .songPlayTimer,.eatenbymonsters.picobel.loading .songDuration{display:none}.eatenbymonsters.picobel .progress-slider__wrapper{height:2em;font-size:1em;line-height:1;position:absolute;top:0;left:0;width:100%;background:var(--black);overflow:hidden}.eatenbymonsters.picobel .progress-slider__wrapper .progress-slider__range{width:100%;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.eatenbymonsters.picobel .progress-slider__wrapper .progress-slider__progress-indicator{height:2em;position:absolute;top:0;left:0;background:var(--primary--opacity);width:0%}.eatenbymonsters.picobel .progress-slider__wrapper .progress-slider__playhead{width:1em;height:2em;position:absolute;top:50%;left:0%;margin-top:-1em;margin-left:-.5em;background:var(--primary)}.eatenbymonsters.picobel.loading .progress-slider__progress-indicator,.eatenbymonsters.picobel.loading .progress-slider__playhead{display:none}.eatenbymonsters.picobel input[type=range].progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:2.2em;cursor:pointer}.eatenbymonsters.picobel input[type=range].progress-slider__range::-moz-range-track{width:100%;height:2em;cursor:pointer}.eatenbymonsters.picobel input[type=range].progress-slider__range::-ms-track{width:100%;height:2em;cursor:pointer}.eatenbymonsters.picobel .songVolume{position:absolute;top:0;right:0;width:1.5em;height:4em;overflow:hidden;z-index:2}.eatenbymonsters.picobel .songVolume .songMuteButton{display:block;width:1.5rem;height:1.5rem;font-size:0;border:0;appearance:none;background:var(--black);position:absolute;top:0;right:0;cursor:pointer}.eatenbymonsters.picobel .songVolume .songMuteButton:before{display:block;width:.4rem;height:.3rem;position:absolute;content:"";top:50%;right:50%;margin-right:-.1rem;transform:translateY(-50%);background:var(--white)}.eatenbymonsters.picobel .songVolume .songMuteButton:after{display:block;width:.4rem;height:.4rem;position:absolute;content:"";top:50%;margin-top:-.4rem;right:50%;margin-right:-.2rem;border-top:.4rem solid transparent;border-right:.4rem solid var(--white);border-bottom:.4rem solid transparent}.eatenbymonsters.picobel .songVolume .songMuteButton.songMuted{&:before{background:var(--grey)}&:after{border-right-color:var(--grey)}}.eatenbymonsters.picobel .songVolumeValue{margin-left:.2em}.eatenbymonsters.picobel .songVolumeLabelWrapper{display:none}.eatenbymonsters.picobel .volume-slider__wrapper{display:block;height:1.5em;position:absolute;top:0;left:0;z-index:3;background:var(--black);width:2.5em;transform:rotate(90deg);transform-origin:bottom left}.eatenbymonsters.picobel .volume-slider__wrapper .volume-slider__range{width:100%;padding:0;margin:0;height:1.5em;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.eatenbymonsters.picobel .volume-slider__wrapper .volume-slider__progress-indicator{height:1.5em;position:absolute;top:0;right:0;background:var(--primary);width:100%;transform:rotate(180deg)}.eatenbymonsters.picobel .volume-slider__wrapper .volume-slider__playhead{display:none}.eatenbymonsters.picobel input[type=range].volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:1.5em;cursor:pointer}.eatenbymonsters.picobel input[type=range].volume-slider__range::-moz-range-track{width:100%;height:1.5em;cursor:pointer}.eatenbymonsters.picobel input[type=range].volume-slider__range::-ms-track{width:100%;height:1.5em;cursor:pointer}.itunes.picobel{--white: #ffffff;--black: #4d4d4d;--black--opacity: rgba(77, 77, 77, .6);--icon_grey: #7f7f7f;--background_grey_dark: #e6e6e6;--background_grey_light: #f1f1f1;--border: #c3c3c3;--played_grey: #707070;--unplayed_grey: #bcbcbc;--playhead: #000000;--text_dark: #3c3c3c;--text_light: #7a7a7a;--progress-height: 20px;--progress-track-height: 10px;--focus: #015ecc;margin:2em 0;position:relative;border:1px solid var(--border);box-shadow:inset var(--white) 0 1px 0 0,var(--black--opacity) 0 1px 2px 0;min-height:4em;box-sizing:border-box;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark));font-family:Arial,sans-serif;color:var(--text_light);text-shadow:var(--white) 0 1px 0;display:flex;justify-content:stretch;align-items:flex-end}.itunes.picobel *,.itunes.picobel *:before,.itunes.picobel *:after{box-sizing:inherit}.itunes.error{height:4em}.itunes .error{width:100%}.itunes__loader{position:absolute;top:50%;left:50%;width:2em;height:2em;margin-top:-1.25em;margin-left:1em;border:.2em solid var(--border);border-top-color:var(--black);z-index:2;pointer-events:none;opacity:0;transition:opacity .2s;text-align:center;line-height:1;overflow:hidden;border-radius:50%;animation:itunes_spin linear infinite 1s}.itunes.loading .itunes__loader{opacity:1}.itunes__play-pause{border:none;appearance:none;position:relative;width:4em;height:4em;font-size:1em;background:var(--white);color:var(--icon_grey);border-right:1px solid var(--border);cursor:pointer;flex-grow:0;flex-shrink:0}.itunes__play-pause__text{display:none}.itunes__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.8em;margin-left:-.4em;border-top:.8em solid transparent;border-bottom:.8em solid transparent;border-left:1em solid var(--icon_grey)}.itunes__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1.4em;margin-top:-.7em;margin-right:-.7em;border-top:0;border-bottom:0;border-left:.6em solid var(--icon_grey);display:none}.itunes__play-pause.playing:before{height:1.4em;margin-top:-.7em;margin-left:-.7em;border-top:0;border-bottom:0;border-left:.6em solid var(--icon_grey)}.itunes__play-pause.playing:after{display:block}.itunes__wrapper--title-artist{padding:.5em .5em .2em}.itunes.loading .itunes__wrapper--title-artist{display:none}.itunes__title{display:block;text-align:center;color:var(--text_dark);font-weight:500}.itunes__artist{font-size:.8em;display:block;text-align:center}.itunes__wrapper--title-artist-timer-progress-duration{width:100%;flex-shrink:1}.itunes__wrapper--timer-progress-duration{position:relative}.itunes__timer{position:absolute;top:0;left:1em;transform:translateY(-100%)}.itunes__duration{position:absolute;top:0;right:1em;transform:translateY(-100%)}.itunes__progress-label{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.itunes__progress-slider__wrapper{position:relative;line-height:1;width:100%}.itunes__progress-slider__replacement{height:var(--progress-height);position:relative;display:flex;justify-content:stretch;align-items:stretch;overflow:hidden}.itunes__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.itunes__progress-slider__background{height:var(--progress-track-height);position:absolute;bottom:0;left:0;background:var(--unplayed_grey);width:100%}.itunes__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px;z-index:3}.itunes__progress-slider__indicator{height:var(--progress-track-height);position:absolute;bottom:0;left:0;background:var(--played_grey);width:0%}.itunes__progress-slider__playhead{width:.3em;height:15px;position:absolute;bottom:0;left:0%;border-top-left-radius:.2em;border-top-right-radius:.2em;margin-left:-.15em;background:var(--playhead);transition:height .2s}.itunes__progress-slider__wrapper:hover .itunes__progress-slider__playhead{height:var(--progress-height)}.itunes.loading .itunes__progress-slider__indicator,.itunes.loading .itunes__progress-slider__playhead{display:none}.itunes__progress-slider__range{width:100%;height:var(--progress-height);padding:0;margin:0;z-index:4;position:absolute;top:0;left:0;opacity:0}.itunes__progress-slider__range::-webkit-slider-runnable-track{width:100%;height:var(--progress-height);cursor:pointer}.itunes__progress-slider__range::-moz-range-track{width:100%;height:var(--progress-height);cursor:pointer}.itunes__progress-slider__range::-ms-track{width:100%;height:var(--progress-height);cursor:pointer}@keyframes itunes_spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.pitchfork.picobel{--grey: #dad8d2;--white: #ffffff;--black: #000;--border: #a2a2a2;--unplayed: #eeeeee;--played: #ff3530;--text_dark: var(--black);--icon_grey: #7f7f7f;--text_light: #969696;--progressHeight: .4rem}.pitchfork.picobel{margin:2em 0;padding:1em 1em 1em 4em;position:relative;border:2px solid var(--border);overflow:hidden;box-sizing:border-box;background:var(--white);font-family:Arial,sans-serif;color:var(--text_light)}.pitchfork.picobel *,.pitchfork.picobel *:before,.pitchfork.picobel *:after{box-sizing:inherit}.pitchfork.picobel .loader{position:absolute;top:3.1em;left:7.2em;right:4.2em;height:.4em;z-index:2;pointer-events:none;display:none;transition:opacity .2s;text-align:center;line-height:1;overflow:hidden;border-radius:.2em;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:2em 2em;background-repeat:repeat;background-position:0 0;animation:pitchfork_background_slide linear infinite .3s}.pitchfork.picobel.loading .loader{display:block}.pitchfork.picobel .playerTrigger{border:none;appearance:none;width:2.6em;height:2.6em;font-size:1em;color:var(--icon_grey);background:var(--white);position:absolute;top:50%;margin-top:-1.3em;left:1em;border:2px solid var(--black);border-radius:50%;cursor:pointer}.pitchfork.picobel .playerTrigger .buttonText{display:none}.pitchfork.picobel .playerTrigger:focus{outline:none}.pitchfork.picobel .playerTrigger:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.6em;margin-left:-.25em;border-top:.6em solid transparent;border-left:.8em solid var(--black);border-bottom:.6em solid transparent}.pitchfork.picobel .playerTrigger:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1em;margin-top:-.5em;margin-right:-.5em;border-top:0;border-left:.4em solid var(--black);border-bottom:0;opacity:0}.pitchfork.picobel .playerTrigger.songPlaying:before{height:1em;margin-top:-.5em;margin-left:-.5em;border-top:0;border-left:.4em solid var(--black);border-bottom:0}.pitchfork.picobel .playerTrigger.songPlaying:after{opacity:1}.pitchfork.picobel .metaWrapper{color:var(--black);padding:0 1em;margin-bottom:1em}.pitchfork.picobel .titleDisplay{font-weight:700}.pitchfork.picobel .titleDisplay:before{content:"\201c"}.pitchfork.picobel .titleDisplay:after{content:"\201d"}.pitchfork.picobel .artistDisplay:before{content:" \2013 "}.pitchfork.picobel .songPlayTimer{position:absolute;bottom:1em;left:5em}.pitchfork.picobel .songDuration{position:absolute;bottom:1em;right:1em}.pitchfork.picobel .timingsWrapper{padding:0 4em;position:relative;font-size:.8em;width:100%;float:left}.pitchfork.picobel .timingsWrapper .songPlayTimer,.pitchfork.picobel .timingsWrapper .songDuration{position:absolute;top:-.2em;width:4em;text-align:center;line-height:1}.pitchfork.picobel .timingsWrapper .songPlayTimer{left:0;border-radius:.5em 0 0 .5em}.pitchfork.picobel .timingsWrapper .songDuration{right:0;border-radius:0 .5em .5em 0}.pitchfork.picobel .progress-slider__wrapper{height:var(--progressHeight);line-height:1;position:relative;border-radius:.2rem;overflow:hidden}.pitchfork.picobel .progress-slider__wrapper .progress-slider__range{width:100%;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.pitchfork.picobel .progress-slider__wrapper .progress-slider__background{height:var(--progressHeight);position:absolute;bottom:0;left:0;background:var(--unplayed);width:100%}.pitchfork.picobel .progress-slider__wrapper .progress-slider__progress-indicator{height:var(--progressHeight);position:absolute;bottom:0;left:0;background:var(--played);width:0%}.pitchfork.picobel .progress-slider__wrapper .progress-slider__playhead{display:none}.pitchfork.picobel input[type=range].progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:var(--progressHeight);height:2.2em;cursor:pointer}.pitchfork.picobel input[type=range].progress-slider__range::-moz-range-track{width:100%;height:var(--progressHeight);cursor:pointer}.pitchfork.picobel input[type=range].progress-slider__range::-ms-track{width:100%;height:var(--progressHeight);cursor:pointer}.pitchfork.picobel .songVolume{display:none}@keyframes pitchfork_background_slide{0%{background-position:0 0}to{background-position:2em 0}}.soundcloud.picobel{--white: #ffffff;--black: #333333;--orange: #fa5300;--volume_bg: #f2f2f2;--border: #cecece;--unplayed: #c8c8c8;--text_dark: #666666;--icon_grey: #7f7f7f;--background_grey_dark: #dedede;--background_grey_light: #f2f2f2;--text_light: #969696;--progressHeight: .6rem}.soundcloud.picobel{margin:2em 0;padding:0 0 0 4em;position:relative;border:1px solid var(--border);overflow:visible;box-sizing:border-box;background:var(--white);font-family:Arial,sans-serif;color:var(--text_light);height:3em;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.soundcloud.picobel *,.soundcloud.picobel *:before,.soundcloud.picobel *:after{box-sizing:inherit}.soundcloud.picobel .loader{position:absolute;top:0;left:0;width:100%;height:3em;background:var(--black);z-index:2;pointer-events:none;opacity:0;transition:opacity .2s;text-align:center;line-height:1;padding:1em;overflow:hidden;background:linear-gradient(to right,var(--white) 50%,var(--orange) 50%);background-size:2em 2em;background-repeat:repeat;background-position:0 0;animation:soundcloud_background_slide linear infinite .4s}.soundcloud.picobel.loading .loader{opacity:.2}.soundcloud.picobel .playerTrigger{border:none;appearance:none;width:2.6em;height:2.6em;font-size:1em;color:var(--icon_grey);background:none;position:absolute;top:50%;margin-top:-1.3em;left:1em;border-radius:50%;cursor:pointer}.soundcloud.picobel .playerTrigger .buttonText{display:none}.soundcloud.picobel .playerTrigger:focus{outline:none}.soundcloud.picobel .playerTrigger:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.6em;margin-left:-.25em;border-top:.6em solid transparent;border-left:.8em solid var(--black);border-bottom:.6em solid transparent}.soundcloud.picobel .playerTrigger:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1em;margin-top:-.5em;margin-right:-.5em;border-top:0;border-left:.4em solid var(--black);border-bottom:0;opacity:0}.soundcloud.picobel .playerTrigger.songPlaying:before{height:1em;margin-top:-.5em;margin-left:-.5em;border-top:0;border-left:.4em solid var(--black);border-bottom:0}.soundcloud.picobel .playerTrigger.songPlaying:after{opacity:1}.soundcloud.picobel .metaWrapper{color:var(--black);padding:0 1em;margin-bottom:1em;float:right;width:25%;margin-top:.7em}.soundcloud.picobel .titleDisplay{display:block;font-size:.7em;line-height:1;padding-bottom:.2em;color:var(--text_light)}.soundcloud.picobel .artistDisplay{display:block;font-size:.7em;line-height:1;color:var(text_dark);font-weight:700}.soundcloud.picobel .songPlayTimer{position:absolute;bottom:1em;left:5em;color:var(--orange)}.soundcloud.picobel .songDuration{position:absolute;bottom:1em;right:1em}.soundcloud.picobel .timingsWrapper{padding:0 4em;position:relative;font-size:.8em;width:70%;float:left;margin-top:1.5em}.soundcloud.picobel .timingsWrapper .songPlayTimer,.soundcloud.picobel .timingsWrapper .songDuration{position:absolute;top:-.2em;width:4em;text-align:center;line-height:1}.soundcloud.picobel .timingsWrapper .songPlayTimer{left:0;border-radius:.5em 0 0 .5em}.soundcloud.picobel .timingsWrapper .songDuration{right:0;border-radius:0 .5em .5em 0}.soundcloud.picobel .progress-slider__wrapper{height:var(--progressHeight);line-height:1;position:relative;border-radius:.2rem}.soundcloud.picobel .progress-slider__wrapper .progress-slider__range{width:100%;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.soundcloud.picobel .progress-slider__wrapper .progress-slider__background{height:.1rem;position:absolute;bottom:50%;left:0;background:var(--unplayed);width:100%}.soundcloud.picobel .progress-slider__wrapper .progress-slider__progress-indicator{height:.1rem;position:absolute;bottom:50%;left:0;background:var(--orange);width:0%}.soundcloud.picobel .progress-slider__wrapper .progress-slider__playhead{background:var(--orange);width:.4rem;height:.4rem;position:absolute;bottom:50%;margin-bottom:-.2rem;left:0%;border-radius:50%;margin-left:calc(0 - (var(--progressHeight) / 2));opacity:0;transition:opacity .2s}.soundcloud.picobel .progress-slider__wrapper:hover .progress-slider__playhead{opacity:1}.soundcloud.picobel input[type=range].progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:var(--progressHeight);height:2.2em;cursor:pointer}.soundcloud.picobel input[type=range].progress-slider__range::-moz-range-track{width:100%;height:var(--progressHeight);cursor:pointer}.soundcloud.picobel input[type=range].progress-slider__range::-ms-track{width:100%;height:var(--progressHeight);cursor:pointer}.soundcloud.picobel .songMuteButton{display:none}.soundcloud.picobel .songVolume{width:5%;height:3em;float:left;position:relative;cursor:pointer}.soundcloud.picobel .songVolume:before{display:block;width:.5em;height:.4em;position:absolute;content:"";top:50%;right:50%;margin-right:.1em;margin-top:-.2em;background:var(--black)}.soundcloud.picobel .songVolume:after{display:block;width:.5em;position:absolute;content:"";top:50%;margin-top:-.5em;right:50%;border-top:.5em solid transparent;border-right:.5em solid var(--black);border-bottom:.5em solid transparent}.soundcloud.picobel .songVolumeValue,.soundcloud.picobel .songVolumeLabelWrapper{display:none}.soundcloud.picobel .volume-slider__wrapper{display:none;transform:rotate(-90deg);transform-origin:0 0;position:absolute;top:.5em;left:50%;margin-left:-1.5em;background:blue;height:1em;font-size:.8em;position:relative;background:var(--volume_bg);border:1px solid var(--border);width:10em;float:left;padding:1em;box-shadow:rgba(black,.3) -.2em 0 1em -.2em}.soundcloud.picobel .volume-slider__wrapper:before{content:"";display:block;position:absolute;top:50%;margin-top:-8px;left:-8px;border-top:8px solid transparent;border-right:8px solid var(--border);border-bottom:8px solid transparent}.soundcloud.picobel .volume-slider__wrapper:after{content:"";display:block;position:absolute;top:50%;margin-top:-8px;left:-7px;border-top:8px solid transparent;border-right:8px solid var(--volume_bg);border-bottom:8px solid transparent}.soundcloud.picobel .volume-slider__wrapper .volume-slider__range{width:100%;padding:0;margin:0;position:absolute;top:.5em;height:2em;left:0;opacity:0}.soundcloud.picobel .volume-slider__wrapper .volume-slider__background{height:1px;position:absolute;bottom:50%;left:0;background:var(--unplayed);width:100%}.soundcloud.picobel .volume-slider__wrapper .volume-slider__progress-indicator{height:1px;position:absolute;bottom:50%;left:0;background:var(--orange);width:0%}.soundcloud.picobel .volume-slider__wrapper .volume-slider__playhead{background:var(--orange);width:.4rem;height:.4rem;position:absolute;bottom:50%;margin-bottom:-.2rem;left:0%;border-radius:50%;margin-left:0 - (var(--progressHeight) / 2);opacity:0;transition:opacity .2s}.soundcloud.picobel .songVolume:hover .volume-slider__wrapper{display:block}.soundcloud.picobel input[type=range].volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:2em;cursor:pointer}.soundcloud.picobel input[type=range].volume-slider__range::-moz-range-track{width:100%;height:2em;cursor:pointer}.soundcloud.picobel input[type=range].volume-slider__range::-ms-track{width:100%;height:2em;cursor:pointer}@keyframes soundcloud_background_slide{0%{background-position:0 0}to{background-position:2em 0}} diff --git a/build/picobel.default.css b/build/picobel.default.css index 55e3334..4ee9de3 100644 --- a/build/picobel.default.css +++ b/build/picobel.default.css @@ -1 +1 @@ -.default.picobel{--black: #555;--black--light: hsl(0, 0%, 43.3%);--black--opacity: rgba(0, 0, 0, .3);--white: #ffffff;--grey: #dad8d2;--greyDark: hsl(30, 10%, 65%);--primary: #ddd;--primary--opacity: rgba(221, 221, 221, .4);--highlight: #00b7c6;--background_grey_dark: #e6e6e6;--background_grey_light: #f1f1f1;--focus: #015ecc;--progress-bar-height: 2em}@keyframes default_background_slide{0%{background-position:0 0}to{background-position:2em 0}}.default.picobel{font-size:10px;position:relative;box-sizing:border-box;z-index:1;margin:1em 0;height:6em;border-radius:.3em;box-shadow:var(--black--opacity) 0 .1em .2em 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default.picobel *,.default.picobel *:before,.default.picobel *:after{box-sizing:inherit}.default.picobel *:focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__loader{position:absolute;z-index:2;bottom:0;left:5.6em;right:0;height:var(--progress-bar-height);opacity:0;transition:opacity .2s;pointer-events:none;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:var(--progress-bar-height) var(--progress-bar-height);background-repeat:repeat;background-position:0 0;animation:default_background_slide linear infinite .4s}.default.loading .default__loader{opacity:1}.default__play-pause{font-size:1em;border:none;appearance:none;width:4em;height:6em;color:var(--white);background:var(--black);background-image:linear-gradient(var(--black--light),var(--black));box-shadow:inset var(--black--light) -1px 0 0 0;position:absolute;top:0;left:0;cursor:pointer}.default__play-pause:focus{z-index:3}.default__play-pause__text{display:none}.default__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.8em;margin-left:-.4em;border-top:.8em solid transparent;border-left:1em solid var(--white);border-bottom:.8em solid transparent}.default__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1.4em;margin-top:-.7em;margin-right:-.7em;border-top:0;border-left:.5em solid var(--white);border-bottom:0;opacity:0}.default__play-pause.playing:before{height:1.4em;margin-top:-.7em;margin-left:-.7em;border-top:0;border-left:.5em solid var(--white);border-bottom:0}.default__play-pause.playing:after{opacity:1}.default__wrapper--title-artist{padding:1em 2em 1em 7em;height:4.4em;background:var(--primary);color:var(--black);text-shadow:var(--white) 0 .1em 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.default__artist{font-family:monospace;display:inline-block;line-height:1;margin-left:.5em}.default__artist:not(:empty):before{content:" \2013 "}.default__wrapper--timer-progress-duration{position:absolute;bottom:0;left:5.6em;right:0;height:var(--progress-bar-height)}.default__timer,.default__duration{position:absolute;top:0;z-index:3;width:6em;text-align:left;background:transparent;color:var(--white);line-height:1em;height:var(--progress-bar-height);pointer-events:none;font-size:1em;padding:.5em .5em .5em 1em;font-family:monospace}.default__timer{left:0}.default__duration{right:0;text-align:right}.default.loading .default__timer,.default.loading .default__duration{display:none}.default__progress-slider__wrapper{height:var(--progress-bar-height);position:absolute;top:0;left:0;width:100%}.default__progress-slider__replacement{height:100%;position:absolute;top:0;left:0;width:100%;background:var(--black);border-bottom-right-radius:.2em;overflow:hidden}.default__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__progress-slider__indicator{height:var(--progress-bar-height);position:absolute;top:0;left:0;background:var(--primary--opacity);width:0%}.default__progress-slider__playhead{width:.5em;height:var(--progress-bar-height);position:absolute;top:0;left:0%;margin-left:-.2em;background:var(--highlight)}.default.loading .default__progress-slider__indicator,.default.loading .default__progress-slider__playhead{display:none}.default__progress-slider__range{width:100%;height:var(--progress-bar-height);font-size:inherit;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.default__progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:2em;cursor:pointer}.default__progress-slider__range::-moz-range-track{width:100%;height:2em;cursor:pointer}.default__progress-slider__range::-ms-track{width:100%;height:2em;cursor:pointer}.default__wrapper--mute-volume{position:absolute;top:0;left:4em;width:1.6em;height:6em;z-index:2}.default__mute{display:block;width:1.6em;height:1.6em;font-size:1em;color:transparent;border:0;appearance:none;background:var(--black);position:absolute;top:0;right:0;cursor:pointer;overflow:hidden}.default__mute:before{display:block;width:.4em;height:.3em;position:absolute;content:"";top:50%;right:50%;margin-right:-.1em;transform:translateY(-50%);background:var(--white)}.default__mute:after{display:block;width:.4em;max-width:100%;height:.4em;position:absolute;content:"";top:50%;margin-top:-.4em;right:50%;margin-right:-.2em;border-top:.4em solid transparent;border-right:.4em solid var(--white);border-bottom:.4em solid transparent}.default__mute.muted:before{background:var(--grey)}.default__mute.muted:after{border-right-color:var(--grey)}.default__volume-label{display:none}.default__volume-slider__wrapper{display:block;height:1.6em;position:absolute;top:1.6em;left:0;z-index:3;width:4.4em;transform:rotate(90deg) translateY(-100%);transform-origin:top left}.default__volume-slider__replacement{display:block;height:1.6em;position:absolute;top:0;left:0;background:var(--greyDark);width:4.4em}.default__volume-slider__replacement:after{content:"";display:block;width:100%;border-right:4.4em solid var(--black);border-bottom:1.6em solid transparent;position:absolute;bottom:0;left:0;pointer-events:none}.default__volume-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__volume-slider__indicator{height:1.6em;position:absolute;top:0;right:0;background:var(--highlight);width:100%;transform:rotate(180deg)}.default__volume-slider__playhead{display:none}.default__volume-slider__range{width:100%;padding:0;margin:0;height:1.6em;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.default__volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:1.5em;cursor:pointer}.default__volume-slider__range::-moz-range-track{width:100%;height:1.5em;cursor:pointer}.default__volume-slider__range::-ms-track{width:100%;height:1.5em;cursor:pointer} +.default.picobel{--black: #555;--black--light: hsl(0, 0%, 43.3%);--black--opacity: rgba(0, 0, 0, .3);--white: #ffffff;--grey: #dad8d2;--greyDark: hsl(30, 10%, 65%);--primary: #ddd;--primary--opacity: rgba(221, 221, 221, .4);--highlight: #00b7c6;--background_grey_dark: #e6e6e6;--background_grey_light: #f1f1f1;--focus: #015ecc;--progress-bar-height: 20px}@keyframes default_background_slide{0%{background-position:0 0}to{background-position:20px 0}}.default.picobel{font-size:10px;position:relative;box-sizing:border-box;z-index:1;margin:10px 0;height:60px;border-radius:3px;box-shadow:var(--black--opacity) 0 1px 2px 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default.picobel *,.default.picobel *:before,.default.picobel *:after{box-sizing:inherit}.default.picobel *:focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__loader{position:absolute;z-index:2;bottom:0;left:56px;right:0;height:var(--progress-bar-height);opacity:0;transition:opacity .2s;pointer-events:none;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:var(--progress-bar-height) var(--progress-bar-height);background-repeat:repeat;background-position:0 0;animation:default_background_slide linear infinite .4s}.default.loading .default__loader{opacity:1}.default__play-pause{font-size:10px;border:none;appearance:none;width:40px;height:60px;color:var(--white);background:var(--black);background-image:linear-gradient(var(--black--light),var(--black));box-shadow:inset var(--black--light) -1px 0 0 0;position:absolute;top:0;left:0;cursor:pointer}.default__play-pause:focus{z-index:3}.default__play-pause__text{display:none}.default__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-4px;border-top:8px solid transparent;border-left:10px solid var(--white);border-bottom:8px solid transparent}.default__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:14px;margin-top:-7px;margin-right:-7px;border-top:0;border-left:5px solid var(--white);border-bottom:0;opacity:0}.default__play-pause.playing:before{height:14px;margin-top:-7px;margin-left:-7px;border-top:0;border-left:5px solid var(--white);border-bottom:0}.default__play-pause.playing:after{opacity:1}.default__wrapper--title-artist{padding:10px 20px 10px 70px;height:44px;background:var(--primary);color:var(--black);text-shadow:var(--white) 0 1px 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.default__artist{font-family:monospace;display:inline-block;line-height:1;margin-left:5px}.default__artist:not(:empty):before{content:" \2013 "}.default__wrapper--timer-progress-duration{position:absolute;bottom:0;left:56px;right:0;height:var(--progress-bar-height)}.default__timer,.default__duration{position:absolute;top:0;z-index:3;width:60px;text-align:left;background:transparent;color:var(--white);line-height:10px;height:var(--progress-bar-height);pointer-events:none;font-size:10px;padding:5px 5px 5px 10px;font-family:monospace}.default__timer{left:0}.default__duration{right:0;text-align:right}.default.loading .default__timer,.default.loading .default__duration{display:none}.default__progress-slider__wrapper{height:var(--progress-bar-height);position:absolute;top:0;left:0;width:100%}.default__progress-slider__replacement{height:100%;position:absolute;top:0;left:0;width:100%;background:var(--black);border-bottom-right-radius:2px;overflow:hidden}.default__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__progress-slider__indicator{height:var(--progress-bar-height);position:absolute;top:0;left:0;background:var(--primary--opacity);width:0%}.default__progress-slider__playhead{width:5px;height:var(--progress-bar-height);position:absolute;top:0;left:0%;margin-left:-2px;background:var(--highlight)}.default.loading .default__progress-slider__indicator,.default.loading .default__progress-slider__playhead{display:none}.default__progress-slider__range{width:100%;height:var(--progress-bar-height);font-size:inherit;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.default__progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:10px;height:20px;cursor:pointer}.default__progress-slider__range::-moz-range-track{width:100%;height:20px;cursor:pointer}.default__progress-slider__range::-ms-track{width:100%;height:20px;cursor:pointer}.default__wrapper--mute-volume{position:absolute;top:0;left:40px;width:16px;height:60px;z-index:2}.default__mute{display:block;width:16px;height:16px;font-size:0;color:transparent;border:0;appearance:none;background:var(--black);position:absolute;top:0;right:0;cursor:pointer;overflow:hidden}.default__mute:before{display:block;width:4px;height:3px;position:absolute;content:"";top:50%;right:50%;margin-right:-1px;transform:translateY(-50%);background:var(--white)}.default__mute:after{display:block;width:4px;max-width:100%;height:4px;position:absolute;content:"";top:50%;margin-top:-4px;right:50%;margin-right:-2px;border-top:4px solid transparent;border-right:4px solid var(--white);border-bottom:4px solid transparent}.default__mute.muted:before{background:var(--grey)}.default__mute.muted:after{border-right-color:var(--grey)}.default__volume-label{display:none}.default__volume-slider__wrapper{display:block;height:16px;position:absolute;top:16px;left:0;z-index:3;width:44px;transform:rotate(90deg) translateY(-100%);transform-origin:top left}.default__volume-slider__replacement{display:block;height:16px;position:absolute;top:0;left:0;background:var(--greyDark);width:44px}.default__volume-slider__replacement:after{content:"";display:block;width:100%;border-right:44px solid var(--black);border-bottom:16px solid transparent;position:absolute;bottom:0;left:0;pointer-events:none}.default__volume-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__volume-slider__indicator{height:16px;position:absolute;top:0;right:0;background:var(--highlight);width:100%;transform:rotate(180deg)}.default__volume-slider__playhead{display:none}.default__volume-slider__range{width:100%;padding:0;margin:0;height:16px;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.default__volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:10px;height:15px;cursor:pointer}.default__volume-slider__range::-moz-range-track{width:100%;height:15px;cursor:pointer}.default__volume-slider__range::-ms-track{width:100%;height:15px;cursor:pointer} diff --git a/build/picobel.main.css b/build/picobel.main.css index 5d0e118..8597715 100644 --- a/build/picobel.main.css +++ b/build/picobel.main.css @@ -1 +1 @@ -.default.picobel{--black: #555;--black--light: hsl(0, 0%, 43.3%);--black--opacity: rgba(0, 0, 0, .3);--white: #ffffff;--grey: #dad8d2;--greyDark: hsl(30, 10%, 65%);--primary: #ddd;--primary--opacity: rgba(221, 221, 221, .4);--highlight: #00b7c6;--background_grey_dark: #e6e6e6;--background_grey_light: #f1f1f1;--focus: #015ecc;--progress-bar-height: 2em}@keyframes default_background_slide{0%{background-position:0 0}to{background-position:2em 0}}.default.picobel{font-size:10px;position:relative;box-sizing:border-box;z-index:1;margin:1em 0;height:6em;border-radius:.3em;box-shadow:var(--black--opacity) 0 .1em .2em 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default.picobel *,.default.picobel *:before,.default.picobel *:after{box-sizing:inherit}.default.picobel *:focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__loader{position:absolute;z-index:2;bottom:0;left:5.6em;right:0;height:var(--progress-bar-height);opacity:0;transition:opacity .2s;pointer-events:none;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:var(--progress-bar-height) var(--progress-bar-height);background-repeat:repeat;background-position:0 0;animation:default_background_slide linear infinite .4s}.default.loading .default__loader{opacity:1}.default__play-pause{font-size:1em;border:none;appearance:none;width:4em;height:6em;color:var(--white);background:var(--black);background-image:linear-gradient(var(--black--light),var(--black));box-shadow:inset var(--black--light) -1px 0 0 0;position:absolute;top:0;left:0;cursor:pointer}.default__play-pause:focus{z-index:3}.default__play-pause__text{display:none}.default__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-.8em;margin-left:-.4em;border-top:.8em solid transparent;border-left:1em solid var(--white);border-bottom:.8em solid transparent}.default__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:1.4em;margin-top:-.7em;margin-right:-.7em;border-top:0;border-left:.5em solid var(--white);border-bottom:0;opacity:0}.default__play-pause.playing:before{height:1.4em;margin-top:-.7em;margin-left:-.7em;border-top:0;border-left:.5em solid var(--white);border-bottom:0}.default__play-pause.playing:after{opacity:1}.default__wrapper--title-artist{padding:1em 2em 1em 7em;height:4.4em;background:var(--primary);color:var(--black);text-shadow:var(--white) 0 .1em 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.default__artist{font-family:monospace;display:inline-block;line-height:1;margin-left:.5em}.default__artist:not(:empty):before{content:" \2013 "}.default__wrapper--timer-progress-duration{position:absolute;bottom:0;left:5.6em;right:0;height:var(--progress-bar-height)}.default__timer,.default__duration{position:absolute;top:0;z-index:3;width:6em;text-align:left;background:transparent;color:var(--white);line-height:1em;height:var(--progress-bar-height);pointer-events:none;font-size:1em;padding:.5em .5em .5em 1em;font-family:monospace}.default__timer{left:0}.default__duration{right:0;text-align:right}.default.loading .default__timer,.default.loading .default__duration{display:none}.default__progress-slider__wrapper{height:var(--progress-bar-height);position:absolute;top:0;left:0;width:100%}.default__progress-slider__replacement{height:100%;position:absolute;top:0;left:0;width:100%;background:var(--black);border-bottom-right-radius:.2em;overflow:hidden}.default__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__progress-slider__indicator{height:var(--progress-bar-height);position:absolute;top:0;left:0;background:var(--primary--opacity);width:0%}.default__progress-slider__playhead{width:.5em;height:var(--progress-bar-height);position:absolute;top:0;left:0%;margin-left:-.2em;background:var(--highlight)}.default.loading .default__progress-slider__indicator,.default.loading .default__progress-slider__playhead{display:none}.default__progress-slider__range{width:100%;height:var(--progress-bar-height);font-size:inherit;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.default__progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:2em;cursor:pointer}.default__progress-slider__range::-moz-range-track{width:100%;height:2em;cursor:pointer}.default__progress-slider__range::-ms-track{width:100%;height:2em;cursor:pointer}.default__wrapper--mute-volume{position:absolute;top:0;left:4em;width:1.6em;height:6em;z-index:2}.default__mute{display:block;width:1.6em;height:1.6em;font-size:1em;color:transparent;border:0;appearance:none;background:var(--black);position:absolute;top:0;right:0;cursor:pointer;overflow:hidden}.default__mute:before{display:block;width:.4em;height:.3em;position:absolute;content:"";top:50%;right:50%;margin-right:-.1em;transform:translateY(-50%);background:var(--white)}.default__mute:after{display:block;width:.4em;max-width:100%;height:.4em;position:absolute;content:"";top:50%;margin-top:-.4em;right:50%;margin-right:-.2em;border-top:.4em solid transparent;border-right:.4em solid var(--white);border-bottom:.4em solid transparent}.default__mute.muted:before{background:var(--grey)}.default__mute.muted:after{border-right-color:var(--grey)}.default__volume-label{display:none}.default__volume-slider__wrapper{display:block;height:1.6em;position:absolute;top:1.6em;left:0;z-index:3;width:4.4em;transform:rotate(90deg) translateY(-100%);transform-origin:top left}.default__volume-slider__replacement{display:block;height:1.6em;position:absolute;top:0;left:0;background:var(--greyDark);width:4.4em}.default__volume-slider__replacement:after{content:"";display:block;width:100%;border-right:4.4em solid var(--black);border-bottom:1.6em solid transparent;position:absolute;bottom:0;left:0;pointer-events:none}.default__volume-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__volume-slider__indicator{height:1.6em;position:absolute;top:0;right:0;background:var(--highlight);width:100%;transform:rotate(180deg)}.default__volume-slider__playhead{display:none}.default__volume-slider__range{width:100%;padding:0;margin:0;height:1.6em;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.default__volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:1em;height:1.5em;cursor:pointer}.default__volume-slider__range::-moz-range-track{width:100%;height:1.5em;cursor:pointer}.default__volume-slider__range::-ms-track{width:100%;height:1.5em;cursor:pointer}.skeleton.picobel{--black: #555;--white: #ffffff;--grey: #ccc;--grey--light: #eee;--chrome-focus-blue: #015ecc;--progress-height: 32px;--progress-inner-height: calc(var(--progress-height) - 2px);--skeleton-focus: var(--chrome-focus-blue);--skeleton-background: var(--white);--skeleton-text: var(--black);--skeleton-progress: var(--grey);--skeleton-buffered: var(--grey--light)}.skeleton.picobel *,.skeleton.picobel *:before,.skeleton.picobel *:after{box-sizing:inherit}.skeleton.picobel *:focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px}.skeleton.picobel{font-size:inherit;position:relative;box-sizing:border-box;z-index:1;margin:10px 0;height:64px;border:1px solid var(--skeleton-text)}@keyframes skeleton_background_slide{0%{background-position:0 0}to{background-position:20px 0}}.skeleton__loader{position:absolute;display:none;z-index:5;bottom:-1px;left:183px;right:0;height:var(--progress-height);border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);background:linear-gradient(to right,var(--skeleton-background) 50%,var(--skeleton-text) 50%);background-size:20px 20px;background-repeat:repeat;background-position:0 0;animation:skeleton_background_slide linear infinite .4s}.skeleton.loading .skeleton__loader{display:block}.skeleton__play-pause{font-size:10px;border:1px solid var(--skeleton-text);appearance:none;width:64px;height:64px;background:var(--skeleton-background);position:absolute;top:-1px;left:-1px;cursor:pointer}.skeleton__play-pause__text{display:none}.skeleton__play-pause:focus{z-index:3}.skeleton__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-top:10px solid transparent;border-left:12px solid var(--skeleton-text);border-bottom:10px solid transparent}.skeleton__play-pause.playing:before{height:18px;width:16px;transform:translate(-50%,-50%);border-top:0;border-left:6px solid var(--skeleton-text);border-right:6px solid var(--skeleton-text);border-bottom:0}.skeleton__wrapper--title-artist{padding:0 10px 0 74px;height:64px;background:var(--skeleton-background);color:var(--skeleton-text);line-height:1.6}.skeleton__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.skeleton__artist{font-family:monospace;display:inline-block;margin-left:5px;line-height:1}.skeleton__artist:not(:empty):before{content:" \2013 "}.skeleton__wrapper--timer-progress-duration{position:absolute;bottom:-1px;left:182px;right:0;height:32px;border-left:1px solid var(--skeleton-text)}.skeleton__timer,.skeleton__duration{position:absolute;bottom:0;z-index:4;text-align:left;background:transparent;color:var(--skeleton-text);line-height:1;pointer-events:none;font-size:14px;height:32px;padding:10px 5px 9px 10px;font-family:monospace}.skeleton__timer{left:0}.skeleton__duration{right:0;text-align:right}.skeleton.loading .skeleton__timer,.skeleton.loading .skeleton__duration{display:none}.skeleton__progress-slider__wrapper{height:var(--progress-height);font-size:10px;line-height:1;position:absolute;bottom:0;left:0;width:100%}.skeleton__progress-slider__replacement{position:relative;background:var(--skeleton-background);border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);height:var(--progress-height);overflow:hidden}.skeleton__progress-slider__replacement.focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px;z-index:3}.skeleton__progress-slider__background{transition:width .2s;height:var(--progress-inner-height);position:absolute;top:0;left:0;background:var(--skeleton-buffered);width:0%}.skeleton__progress-slider__indicator{height:var(--progress-inner-height);position:absolute;top:0;left:0;background:var(--skeleton-progress);width:0%}.skeleton__progress-slider__playhead{width:8px;height:var(--progress-inner-height);position:absolute;top:0;left:0%;margin-left:-4px;background:var(--skeleton-text)}.skeleton.loading .skeleton__progress-slider__indicator,.skeleton.loading .skeleton__progress-slider__playhead{display:none}.skeleton__progress-slider__range{width:100%;height:var(--progress-height);padding:0;margin:0;z-index:4;position:absolute;top:0;left:0;opacity:0}.skeleton__progress-slider__range::-webkit-slider-runnable-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__progress-slider__range::-moz-range-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__progress-slider__range::-ms-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__wrapper--mute-volume{position:absolute;bottom:-1px;left:62px;width:120px;height:32px;z-index:2;border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);background:var(--skeleton-background);display:flex;align-items:center}.skeleton__mute{display:block;z-index:2;float:left;width:32px;height:32px;font-size:10px;color:transparent;border:0;appearance:none;background:var(--skeleton-background);border:1px solid var(--skeleton-text);position:relative;cursor:pointer;overflow:hidden;flex-shrink:0}.skeleton__mute:before{display:block;width:6px;height:6px;position:absolute;content:"";top:50%;right:50%;margin-right:-1px;transform:translateY(-50%);background:var(--skeleton-text)}.skeleton__mute:after{display:block;width:5px;height:5px;position:absolute;content:"";top:50%;transform:translateY(-50%);right:50%;margin-right:-4px;border-top:8px solid transparent;border-right:8px solid var(--skeleton-text);border-bottom:8px solid transparent}.skeleton__mute.muted:before{background:var(--skeleton-progress)}.skeleton__mute.muted:after{border-right-color:var(--skeleton-progress)}.skeleton__volume{--volume-padding: 6px;--volume-height: 20px;--volume-width: 76px;width:var(--volume-width) + var(--volume-padding) * 2;height:var(--volume-height) + var(--volume-padding) * 2;padding:var(--volume-padding)}.skeleton__volume-label{display:none}.skeleton__volume-slider__wrapper{width:var(--volume-width);height:var(--volume-height);position:relative}.skeleton__volume-slider__replacement{display:block;height:var(--volume-height);width:var(--volume-width);position:relative;left:0;z-index:3;background:var(--skeleton-progress);flex-grow:1;float:left;transform:rotate(180deg)}.skeleton__volume-slider__replacement:after{content:"";display:block;border-right:var(--volume-width) solid var(--skeleton-background);border-top:var(--volume-height) solid transparent;position:absolute;top:0;left:0;pointer-events:none}.skeleton__volume-slider__replacement.focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px}.skeleton__volume-slider__indicator{height:100%;position:absolute;top:0;right:0;background:var(--skeleton-text);width:var(--volume-width)}.skeleton__volume-slider__playhead{display:none}.skeleton__volume-slider__range{width:100%;height:var(--volume-height);padding:0;margin:0;position:absolute;z-index:4;top:0;left:0;opacity:0}.skeleton__volume-slider__range::-webkit-slider-runnable-track{width:100%;height:var(--volume-height);cursor:pointer}.skeleton__volume-slider__range::-moz-range-track{width:100%;height:var(--volume-height);cursor:pointer}.skeleton__volume-slider__range::-ms-track{width:100%;height:var(--volume-height);cursor:pointer} +.default.picobel{--black: #555;--black--light: hsl(0, 0%, 43.3%);--black--opacity: rgba(0, 0, 0, .3);--white: #ffffff;--grey: #dad8d2;--greyDark: hsl(30, 10%, 65%);--primary: #ddd;--primary--opacity: rgba(221, 221, 221, .4);--highlight: #00b7c6;--background_grey_dark: #e6e6e6;--background_grey_light: #f1f1f1;--focus: #015ecc;--progress-bar-height: 20px}@keyframes default_background_slide{0%{background-position:0 0}to{background-position:20px 0}}.default.picobel{font-size:10px;position:relative;box-sizing:border-box;z-index:1;margin:10px 0;height:60px;border-radius:3px;box-shadow:var(--black--opacity) 0 1px 2px 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default.picobel *,.default.picobel *:before,.default.picobel *:after{box-sizing:inherit}.default.picobel *:focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__loader{position:absolute;z-index:2;bottom:0;left:56px;right:0;height:var(--progress-bar-height);opacity:0;transition:opacity .2s;pointer-events:none;background:linear-gradient(to right,var(--highlight) 50%,var(--black) 50%);background-size:var(--progress-bar-height) var(--progress-bar-height);background-repeat:repeat;background-position:0 0;animation:default_background_slide linear infinite .4s}.default.loading .default__loader{opacity:1}.default__play-pause{font-size:10px;border:none;appearance:none;width:40px;height:60px;color:var(--white);background:var(--black);background-image:linear-gradient(var(--black--light),var(--black));box-shadow:inset var(--black--light) -1px 0 0 0;position:absolute;top:0;left:0;cursor:pointer}.default__play-pause:focus{z-index:3}.default__play-pause__text{display:none}.default__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;margin-top:-8px;margin-left:-4px;border-top:8px solid transparent;border-left:10px solid var(--white);border-bottom:8px solid transparent}.default__play-pause:after{content:"";display:block;position:absolute;top:50%;right:50%;height:14px;margin-top:-7px;margin-right:-7px;border-top:0;border-left:5px solid var(--white);border-bottom:0;opacity:0}.default__play-pause.playing:before{height:14px;margin-top:-7px;margin-left:-7px;border-top:0;border-left:5px solid var(--white);border-bottom:0}.default__play-pause.playing:after{opacity:1}.default__wrapper--title-artist{padding:10px 20px 10px 70px;height:44px;background:var(--primary);color:var(--black);text-shadow:var(--white) 0 1px 0;background-image:linear-gradient(var(--background_grey_light),var(--background_grey_dark))}.default__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.default__artist{font-family:monospace;display:inline-block;line-height:1;margin-left:5px}.default__artist:not(:empty):before{content:" \2013 "}.default__wrapper--timer-progress-duration{position:absolute;bottom:0;left:56px;right:0;height:var(--progress-bar-height)}.default__timer,.default__duration{position:absolute;top:0;z-index:3;width:60px;text-align:left;background:transparent;color:var(--white);line-height:10px;height:var(--progress-bar-height);pointer-events:none;font-size:10px;padding:5px 5px 5px 10px;font-family:monospace}.default__timer{left:0}.default__duration{right:0;text-align:right}.default.loading .default__timer,.default.loading .default__duration{display:none}.default__progress-slider__wrapper{height:var(--progress-bar-height);position:absolute;top:0;left:0;width:100%}.default__progress-slider__replacement{height:100%;position:absolute;top:0;left:0;width:100%;background:var(--black);border-bottom-right-radius:2px;overflow:hidden}.default__progress-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__progress-slider__indicator{height:var(--progress-bar-height);position:absolute;top:0;left:0;background:var(--primary--opacity);width:0%}.default__progress-slider__playhead{width:5px;height:var(--progress-bar-height);position:absolute;top:0;left:0%;margin-left:-2px;background:var(--highlight)}.default.loading .default__progress-slider__indicator,.default.loading .default__progress-slider__playhead{display:none}.default__progress-slider__range{width:100%;height:var(--progress-bar-height);font-size:inherit;padding:0;margin:0;position:absolute;top:0;left:0;opacity:0}.default__progress-slider__range::-webkit-slider-runnable-track{width:100%;font-size:10px;height:20px;cursor:pointer}.default__progress-slider__range::-moz-range-track{width:100%;height:20px;cursor:pointer}.default__progress-slider__range::-ms-track{width:100%;height:20px;cursor:pointer}.default__wrapper--mute-volume{position:absolute;top:0;left:40px;width:16px;height:60px;z-index:2}.default__mute{display:block;width:16px;height:16px;font-size:0;color:transparent;border:0;appearance:none;background:var(--black);position:absolute;top:0;right:0;cursor:pointer;overflow:hidden}.default__mute:before{display:block;width:4px;height:3px;position:absolute;content:"";top:50%;right:50%;margin-right:-1px;transform:translateY(-50%);background:var(--white)}.default__mute:after{display:block;width:4px;max-width:100%;height:4px;position:absolute;content:"";top:50%;margin-top:-4px;right:50%;margin-right:-2px;border-top:4px solid transparent;border-right:4px solid var(--white);border-bottom:4px solid transparent}.default__mute.muted:before{background:var(--grey)}.default__mute.muted:after{border-right-color:var(--grey)}.default__volume-label{display:none}.default__volume-slider__wrapper{display:block;height:16px;position:absolute;top:16px;left:0;z-index:3;width:44px;transform:rotate(90deg) translateY(-100%);transform-origin:top left}.default__volume-slider__replacement{display:block;height:16px;position:absolute;top:0;left:0;background:var(--greyDark);width:44px}.default__volume-slider__replacement:after{content:"";display:block;width:100%;border-right:44px solid var(--black);border-bottom:16px solid transparent;position:absolute;bottom:0;left:0;pointer-events:none}.default__volume-slider__replacement.focus{outline:2px solid var(--focus);outline-offset:1px;border-radius:2px}.default__volume-slider__indicator{height:16px;position:absolute;top:0;right:0;background:var(--highlight);width:100%;transform:rotate(180deg)}.default__volume-slider__playhead{display:none}.default__volume-slider__range{width:100%;padding:0;margin:0;height:16px;position:absolute;top:0;left:0;opacity:0;transform:rotate(180deg)}.default__volume-slider__range::-webkit-slider-runnable-track{width:100%;font-size:10px;height:15px;cursor:pointer}.default__volume-slider__range::-moz-range-track{width:100%;height:15px;cursor:pointer}.default__volume-slider__range::-ms-track{width:100%;height:15px;cursor:pointer}.skeleton.picobel{--black: #555;--white: #ffffff;--grey: #ccc;--grey--light: #eee;--chrome-focus-blue: #015ecc;--progress-height: 32px;--progress-inner-height: calc(var(--progress-height) - 2px);--skeleton-focus: var(--chrome-focus-blue);--skeleton-background: var(--white);--skeleton-text: var(--black);--skeleton-progress: var(--grey);--skeleton-buffered: var(--grey--light)}.skeleton.picobel *,.skeleton.picobel *:before,.skeleton.picobel *:after{box-sizing:inherit}.skeleton.picobel *:focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px}.skeleton.picobel{font-size:inherit;position:relative;box-sizing:border-box;z-index:1;margin:10px 0;height:64px;border:1px solid var(--skeleton-text)}@keyframes skeleton_background_slide{0%{background-position:0 0}to{background-position:20px 0}}.skeleton__loader{position:absolute;display:none;z-index:5;bottom:-1px;left:183px;right:0;height:var(--progress-height);border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);background:linear-gradient(to right,var(--skeleton-background) 50%,var(--skeleton-text) 50%);background-size:20px 20px;background-repeat:repeat;background-position:0 0;animation:skeleton_background_slide linear infinite .4s}.skeleton.loading .skeleton__loader{display:block}.skeleton__play-pause{font-size:10px;border:1px solid var(--skeleton-text);appearance:none;width:64px;height:64px;background:var(--skeleton-background);position:absolute;top:-1px;left:-1px;cursor:pointer}.skeleton__play-pause__text{display:none}.skeleton__play-pause:focus{z-index:3}.skeleton__play-pause:before{content:"";display:block;position:absolute;top:50%;left:50%;transform:translate(-40%,-50%);border-top:10px solid transparent;border-left:12px solid var(--skeleton-text);border-bottom:10px solid transparent}.skeleton__play-pause.playing:before{height:18px;width:16px;transform:translate(-50%,-50%);border-top:0;border-left:6px solid var(--skeleton-text);border-right:6px solid var(--skeleton-text);border-bottom:0}.skeleton__wrapper--title-artist{padding:0 10px 0 74px;height:64px;background:var(--skeleton-background);color:var(--skeleton-text);line-height:1.6}.skeleton__title{display:inline-block;line-height:1;font-weight:700;font-family:monospace}.skeleton__artist{font-family:monospace;display:inline-block;margin-left:5px;line-height:1}.skeleton__artist:not(:empty):before{content:" \2013 "}.skeleton__wrapper--timer-progress-duration{position:absolute;bottom:-1px;left:182px;right:0;height:32px;border-left:1px solid var(--skeleton-text)}.skeleton__timer,.skeleton__duration{position:absolute;bottom:0;z-index:4;text-align:left;background:transparent;color:var(--skeleton-text);line-height:1;pointer-events:none;font-size:14px;height:32px;padding:10px 5px 9px 10px;font-family:monospace}.skeleton__timer{left:0}.skeleton__duration{right:0;text-align:right}.skeleton.loading .skeleton__timer,.skeleton.loading .skeleton__duration{display:none}.skeleton__progress-slider__wrapper{height:var(--progress-height);font-size:10px;line-height:1;position:absolute;bottom:0;left:0;width:100%}.skeleton__progress-slider__replacement{position:relative;background:var(--skeleton-background);border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);height:var(--progress-height);overflow:hidden}.skeleton__progress-slider__replacement.focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px;z-index:3}.skeleton__progress-slider__background{transition:width .2s;height:var(--progress-inner-height);position:absolute;top:0;left:0;background:var(--skeleton-buffered);width:0%}.skeleton__progress-slider__indicator{height:var(--progress-inner-height);position:absolute;top:0;left:0;background:var(--skeleton-progress);width:0%}.skeleton__progress-slider__playhead{width:8px;height:var(--progress-inner-height);position:absolute;top:0;left:0%;margin-left:-4px;background:var(--skeleton-text)}.skeleton.loading .skeleton__progress-slider__indicator,.skeleton.loading .skeleton__progress-slider__playhead{display:none}.skeleton__progress-slider__range{width:100%;height:var(--progress-height);padding:0;margin:0;z-index:4;position:absolute;top:0;left:0;opacity:0}.skeleton__progress-slider__range::-webkit-slider-runnable-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__progress-slider__range::-moz-range-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__progress-slider__range::-ms-track{width:100%;height:var(--progress-height);cursor:pointer}.skeleton__wrapper--mute-volume{position:absolute;bottom:-1px;left:62px;width:120px;height:32px;z-index:2;border-top:1px solid var(--skeleton-text);border-bottom:1px solid var(--skeleton-text);background:var(--skeleton-background);display:flex;align-items:center}.skeleton__mute{display:block;z-index:2;float:left;width:32px;height:32px;font-size:10px;color:transparent;border:0;appearance:none;background:var(--skeleton-background);border:1px solid var(--skeleton-text);position:relative;cursor:pointer;overflow:hidden;flex-shrink:0}.skeleton__mute:before{display:block;width:6px;height:6px;position:absolute;content:"";top:50%;right:50%;margin-right:-1px;transform:translateY(-50%);background:var(--skeleton-text)}.skeleton__mute:after{display:block;width:5px;height:5px;position:absolute;content:"";top:50%;transform:translateY(-50%);right:50%;margin-right:-4px;border-top:8px solid transparent;border-right:8px solid var(--skeleton-text);border-bottom:8px solid transparent}.skeleton__mute.muted:before{background:var(--skeleton-progress)}.skeleton__mute.muted:after{border-right-color:var(--skeleton-progress)}.skeleton__volume{--volume-padding: 6px;--volume-height: 20px;--volume-width: 76px;width:var(--volume-width) + var(--volume-padding) * 2;height:var(--volume-height) + var(--volume-padding) * 2;padding:var(--volume-padding)}.skeleton__volume-label{display:none}.skeleton__volume-slider__wrapper{width:var(--volume-width);height:var(--volume-height);position:relative}.skeleton__volume-slider__replacement{display:block;height:var(--volume-height);width:var(--volume-width);position:relative;left:0;z-index:3;background:var(--skeleton-progress);flex-grow:1;float:left;transform:rotate(180deg)}.skeleton__volume-slider__replacement:after{content:"";display:block;border-right:var(--volume-width) solid var(--skeleton-background);border-top:var(--volume-height) solid transparent;position:absolute;top:0;left:0;pointer-events:none}.skeleton__volume-slider__replacement.focus{outline:2px solid var(--skeleton-focus);outline-offset:1px;border-radius:2px}.skeleton__volume-slider__indicator{height:100%;position:absolute;top:0;right:0;background:var(--skeleton-text);width:var(--volume-width)}.skeleton__volume-slider__playhead{display:none}.skeleton__volume-slider__range{width:100%;height:var(--volume-height);padding:0;margin:0;position:absolute;z-index:4;top:0;left:0;opacity:0}.skeleton__volume-slider__range::-webkit-slider-runnable-track{width:100%;height:var(--volume-height);cursor:pointer}.skeleton__volume-slider__range::-moz-range-track{width:100%;height:var(--volume-height);cursor:pointer}.skeleton__volume-slider__range::-ms-track{width:100%;height:var(--volume-height);cursor:pointer}