.wppk-player{
max-width: 900px;
}
.wppk-player__cover{
width: 100%;
height: auto;
flex: 0 0 84px;
}
.wppk-player__title{
line-height: 1.2;
}
.wppk-player__desc{
line-height: 1.35;
}
.wppk-player__controls{
grid-template-columns: auto auto auto auto;
grid-template-areas: "back play fwd speed"
"timeline timeline timeline timeline";
}
.wppk-player__controls img {
margin-top: 4px;
}
.wppk-player__controls > .js-podcast-back10 {
grid-area: back;
}
.wppk-player__controls > .js-podcast-play {
grid-area: play;
}
.wppk-player__controls > .js-podcast-fwd10 {
grid-area: fwd;
}
.wppk-player__controls > .js-podcast-speed {
grid-area: speed;
}
.wppk-player__controls > .wppk-player__timeline {
grid-area: timeline;
}
.wppk-player__timeline{
grid-template-columns: 44px 1fr 44px;
}
.wppk-player__timeline span{
font-variant-numeric: tabular-nums;
}
.wppk-player__timeline input[type="range"]{
width: 100%;
}
.wppk-player__actions a{
font-size: 13px;
text-decoration: none;
border-radius: 10px;
padding: 8px 10px;
border: 1px solid rgba(0,0,0,.12);
background: #fff;
cursor: pointer;
}
.wppk-player__actions a:hover{
background: #f7f7f7;
}
.wppk-player__actions a::before {
display: none!important;
}
@media (max-width: 640px){
.wppk-player__controls{
grid-template-columns: auto auto auto;
grid-auto-rows: auto;
}
.wppk-player__timeline{
grid-column: 1 / -1;
}
.js-podcast-speed{
grid-column: 1 / -1;
width: 100%;
}
}
.wppk-player__status{
min-height: 18px;
}
.wppk-player__spinner{
width: 14px;
height: 14px;
border: 2px solid rgba(0,0,0,.25);
border-top-color: rgba(0,0,0,.6);
border-radius: 999px;
animation: wppk-spin .8s linear infinite;
}
@keyframes wppk-spin{
to{ transform: rotate(360deg); }
}
@media (min-width: 991px) {
.wppk-player__cover {
width: 140px;
height: 140px;
margin-bottom: 0;
}
}
@media (min-width: 1200px) {
.wppk-player__cover {
width: 240px;
height: 240px;
}
.wppk-player__controls {
grid-template-columns: auto auto auto 1fr auto;
grid-template-areas: "back play fwd timeline speed";
}
}