90
edits
mNo edit summary |
No edit summary |
||
Line 1: | Line 1: | ||
/* CSS placed here will affect users of the mobile site */ | /* CSS placed here will affect users of the mobile site */ | ||
/* MP3 Player */ | |||
.green-audio-player{ | |||
width:320px; | |||
min-width:300px; | |||
height:36px; | |||
-webkit-box-shadow:0 4px 16px 0 rgba(0,0,0,.07); | |||
box-shadow:0 4px 16px 0 rgba(0,0,0,.07); | |||
display:-webkit-box!important; | |||
display:-ms-flexbox!important; | |||
display:fålex!important; | |||
-webkit-box-pack:justify; | |||
-ms-flex-pack:justify; | |||
justify-content:space-between; | |||
-webkit-box-align:center; | |||
-ms-flex-align:center; | |||
align-items:center; | |||
padding-left:24px; | |||
padding-right:24px; | |||
border-radius:4px; | |||
-webkit-user-select:none; | |||
-moz-user-select:none; | |||
-ms-user-select:none; | |||
user-select:none; | |||
background-color:#fff; | |||
-webkit-box-sizing:border-box; | |||
box-sizing:border-box; | |||
outline:none | |||
} | |||
.green-audio-player.player-accessible .controls:hover,.green-audio-player.player-accessible .download:hover,.green-audio-player.player-accessible .play-pause-btn:hover,.green-audio-player.player-accessible .volume__button:hover,.green-audio-player.player-accessible .volume__controls:hover{ | |||
outline:1px dotted #999 | |||
} | |||
.green-audio-player img,.green-audio-player svg{ | |||
display:block | |||
} | |||
.green-audio-player .holder{ | |||
position:relative | |||
} | |||
.green-audio-player .holder .loading .loading__spinner{ | |||
position:absolute; | |||
left:-3px; | |||
bottom:2px; | |||
width:16px; | |||
height:16px; | |||
border:2px solid #b0b0b0; | |||
border-right-color:transparent; | |||
border-radius:50%; | |||
-webkit-animation:spin .4s linear infinite; | |||
animation:spin .4s linear infinite | |||
} | |||
.green-audio-player .holder .play-pause-btn{ | |||
visibility:hidden; | |||
cursor:pointer; | |||
outline:none | |||
} | |||
.green-audio-player .holder .play-pause-btn:focus{ | |||
outline:none | |||
} | |||
.green-audio-player .slider{ | |||
-webkit-box-flex:1; | |||
-ms-flex-positive:1; | |||
flex-grow:1; | |||
background-color:#d8d8d8; | |||
cursor:pointer; | |||
position:relative | |||
} | |||
.green-audio-player .slider .gap-progress{ | |||
background-color:#44bfa3; | |||
border-radius:inherit; | |||
position:absolute; | |||
pointer-events:none | |||
} | |||
.green-audio-player .slider .gap-progress .pin{ | |||
height:16px; | |||
width:16px; | |||
border-radius:8px; | |||
background-color:#44bfa3; | |||
position:absolute; | |||
pointer-events:all; | |||
-webkit-box-shadow:0 1px 1px 0 rgba(0,0,0,.32); | |||
box-shadow:0 1px 1px 0 rgba(0,0,0,.32) | |||
} | |||
.green-audio-player .slider .gap-progress .pin:after{ | |||
content:""; | |||
display:block; | |||
background:transparent; | |||
width:200%; | |||
height:200%; | |||
margin-left:-50%; | |||
margin-top:-50%; | |||
border-radius:50% | |||
} | |||
.green-audio-player .controls{ | |||
font-family:Roboto,sans-serif; | |||
font-size:16px; | |||
line-height:18px; | |||
color:#55606e; | |||
display:-webkit-box; | |||
display:-ms-flexbox; | |||
display:flex; | |||
-webkit-box-flex:1; | |||
-ms-flex-positive:1; | |||
flex-grow:1; | |||
-webkit-box-pack:justify; | |||
-ms-flex-pack:justify; | |||
justify-content:space-between; | |||
-webkit-box-align:center; | |||
-ms-flex-align:center; | |||
align-items:center; | |||
margin-left:15px; | |||
margin-right:15px; | |||
outline:none | |||
} | |||
.green-audio-player .controls .controls__slider{ | |||
margin-left:16px; | |||
margin-right:16px; | |||
border-radius:2px; | |||
height:4px | |||
} | |||
.green-audio-player .controls .controls__slider .controls__progress{ | |||
width:0; | |||
height:100% | |||
} | |||
.green-audio-player .controls .controls__slider .controls__progress .progress__pin{ | |||
right:-8px; | |||
top:-6px | |||
} | |||
.green-audio-player .controls span{ | |||
cursor:default | |||
} | |||
.green-audio-player .controls:focus{ | |||
outline:none | |||
} | |||
.green-audio-player .volume{ | |||
position:relative | |||
} | |||
.green-audio-player .volume .volume__button{ | |||
cursor:pointer; | |||
outline:none | |||
} | |||
.green-audio-player .volume .volume__button:focus{ | |||
outline:none | |||
} | |||
.green-audio-player .volume .volume__button.open path{ | |||
fill:#44bfa3 | |||
} | |||
.green-audio-player .volume .volume__controls{ | |||
width:30px; | |||
height:135px; | |||
background-color:rgba(0,0,0,.62); | |||
border-radius:7px; | |||
position:absolute; | |||
left:-3px; | |||
bottom:52px; | |||
-webkit-box-orient:vertical; | |||
-webkit-box-direction:normal; | |||
-ms-flex-direction:column; | |||
flex-direction:column; | |||
-webkit-box-align:center; | |||
-ms-flex-align:center; | |||
align-items:center; | |||
display:-webkit-box; | |||
display:-ms-flexbox; | |||
display:flex; | |||
z-index:2; | |||
outline:none | |||
} | |||
.green-audio-player .volume .volume__controls .volume__slider{ | |||
margin-top:12px; | |||
margin-bottom:12px; | |||
width:6px; | |||
border-radius:3px | |||
} | |||
.green-audio-player .volume .volume__controls .volume__slider .volume__progress{ | |||
bottom:0; | |||
height:100%; | |||
width:6px | |||
} | |||
.green-audio-player .volume .volume__controls .volume__slider .volume__progress .volume__pin{ | |||
left:-5px; | |||
top:-8px | |||
} | |||
.green-audio-player .volume .volume__controls:focus{ | |||
outline:none | |||
} | |||
.green-audio-player .volume .volume__controls.hidden{ | |||
display:none | |||
} | |||
.green-audio-player .volume .volume__controls.top{ | |||
bottom:52px; | |||
left:-3px | |||
} | |||
.green-audio-player .volume .volume__controls.middle{ | |||
bottom:-54px; | |||
left:54px | |||
} | |||
.green-audio-player .volume .volume__controls.bottom{ | |||
bottom:-164px; | |||
left:-3px | |||
} | |||
.green-audio-player .download{ | |||
display:none; | |||
margin-left:16px; | |||
cursor:pointer; | |||
outline:none | |||
} | |||
.green-audio-player .download:focus,.green-audio-player:focus{ | |||
outline:none | |||
} | |||
.message__offscreen{ | |||
border:0; | |||
clip:rect(1px,1px,1px,1px); | |||
-webkit-clip-path:inset(50%); | |||
clip-path:inset(50%); | |||
height:1px; | |||
margin:-1px; | |||
overflow:hidden; | |||
padding:0; | |||
position:absolute; | |||
width:1px; | |||
word-wrap:normal | |||
} |