body.dd-cassette-context{
background:#ffffff;
padding-bottom:90px;
} body.dd-cassette-context .cassette-grid{
display:grid;
grid-template-columns:repeat(5,1fr);
gap:10px;
}
@media (max-width:1024px){
body.dd-cassette-context .cassette-grid{
grid-template-columns:repeat(3,1fr);
}
}
@media (max-width:767px){
body.dd-cassette-context .cassette-grid{
grid-template-columns:repeat(2,1fr);
}
} body.dd-cassette-context .cassette-item{
position:relative;
cursor:pointer;
transition:
transform .18s ease,
filter .18s ease,
opacity .18s ease,
box-shadow .18s ease;
transform-origin:center center;
}
body.dd-cassette-context .cassette-item img{
width:100%;
height:auto;
display:block;
} body.dd-cassette-context .cassette-overlay{
position:absolute;
inset:0;
opacity:0;
transition:opacity .2s ease;
}
body.dd-cassette-context .cassette-item:hover .cassette-overlay{
opacity:1;
}
body.dd-cassette-context .cassette-play-circle{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
width:56px;
height:56px;
border-radius:50%;
border:2px solid #ffffff;
background:rgba(0,0,0,.45);
display:flex;
align-items:center;
justify-content:center;
}
body.dd-cassette-context .cassette-play-triangle{
width:0;
height:0;
border-left:18px solid #ffffff;
border-top:13px solid transparent;
border-bottom:13px solid transparent;
margin-left:4px;
} body.dd-cassette-context .cassette-info{
position:absolute;
bottom:8px;
right:10px;
width:15px;
height:15px;
background:#ffffff;
border:1px solid #000000;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:10px;
font-weight:700;
color:#000000;
text-decoration:none;
z-index:5;
} body.dd-cassette-context .cassette-share{
position:absolute;
bottom:8px;
left:10px;
width:15px;
height:15px;
background:#ffffff;
border:1px solid #000000;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
font-size:12px;
line-height:1;
color:#000000;
font-family:Arial,sans-serif;
padding-top:2px;
z-index:5;
opacity:0;
pointer-events:none;
transition:
opacity .18s ease,
background .18s ease,
color .18s ease;
} body.dd-cassette-context
.cassette-item.is-active
.cassette-share{
opacity:1;
pointer-events:auto;
} body.dd-cassette-context
.cassette-item.is-active
.cassette-share.is-shared{
background:#000000;
color:#ffffff;
} body.dd-cassette-context .cassette-item.is-active{
transform:scale(.945);
filter:
brightness(.90)
contrast(1.02)
saturate(.90);
opacity:1;
} .cassette-filter-bar{
display:flex;
gap:20px;
align-items:center;
flex-wrap:wrap;
margin-bottom:30px;
}
#cassette-search{
width:100%;
max-width:640px;
padding:10px 14px;
font-size:16px;
}
.cassette-filter-check{
display:flex;
align-items:center;
gap:6px;
font-size:15px;
} body.dd-cassette-context #jukebox-player{
position:fixed;
left:0;
right:0;
bottom:0;
height:44px;
background:#111111;
display:flex;
align-items:center;
gap:14px;
padding:0 20px;
box-sizing:border-box;
z-index:99999;
overflow:hidden;
} body.dd-cassette-context #jukebox-play{
width:28px;
height:28px;
background:#ff5a00;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
flex-shrink:0;
border:none;
outline:none;
box-shadow:none;
appearance:none;
-webkit-appearance:none;
}
body.dd-cassette-context #jukebox-play::before{
content:"";
width:0;
height:0;
border-left:14px solid #ffffff;
border-top:9px solid transparent;
border-bottom:9px solid transparent;
}
body.dd-cassette-context #jukebox-play.is-playing::before{
width:14px;
height:18px;
border:none;
background:
linear-gradient(
to right,
#ffffff 0,
#ffffff 4px,
transparent 4px,
transparent 10px,
#ffffff 10px,
#ffffff 14px
);
} body.dd-cassette-context #jukebox-content{
flex:1;
min-width:0;
display:flex;
align-items:center;
   gap:14px;
} body.dd-cassette-context #jukebox-artist{
max-width:75%;
min-width:0;
margin-right:14px;
color:#ffffff;
font-size:12px;
line-height:1.3;
white-space:nowrap;
overflow-x:auto;
overflow-y:hidden;
text-overflow:ellipsis;
scrollbar-width:none;
-ms-overflow-style:none;
cursor:grab;
user-select:none;
-webkit-overflow-scrolling:touch;
}
body.dd-cassette-context
#jukebox-artist::-webkit-scrollbar{
display:none;
}
body.dd-cassette-context
#jukebox-artist.is-dragging{
cursor:grabbing;
} body.dd-cassette-context #jukebox-artist-text{
display:inline-block;
will-change:transform;
} @media (hover:none){
body.dd-cassette-context
#jukebox-artist.is-ticker-active{
overflow:hidden;
text-overflow:clip;
}
body.dd-cassette-context
#jukebox-artist.is-ticker-active
#jukebox-artist-text{
animation:dd-soft-ticker 12s linear 1;
animation-delay:5s;
animation-fill-mode:none;
}
} @keyframes dd-soft-ticker{
0%{
transform:translateX(0);
}
85%{
transform:translateX(
calc(-1 * var(--dd-overflow))
);
}
100%{
transform:translateX(0);
}
} body.dd-cassette-context #jukebox-bar{
flex:1;
min-width:25%;
height:6px;
background:#333333;
cursor:pointer;
} body.dd-cassette-context #jukebox-progress{
width:0%;
height:100%;
background:#ff5a00;
} body.dd-cassette-context #jukebox-time{
color:#ffffff;
font-size:12px;
line-height:1.3;
white-space:nowrap;
flex-shrink:0;
} @media (max-width:600px) and (orientation:portrait){
body.dd-cassette-context #jukebox-artist{
max-width:50%;
}
body.dd-cassette-context #jukebox-bar{
flex:1 1 auto;
min-width:0;
}
} @media (hover:none){
body.dd-cassette-context
.cassette-item:hover
.cassette-overlay{
opacity:0;
}
body.dd-cassette-context
.cassette-item.is-active
.cassette-overlay{
opacity:1;
animation:dd-mobile-overlay-fade 2s forwards;
}
}
@keyframes dd-mobile-overlay-fade{
0%{
opacity:1;
}
85%{
opacity:1;
}
100%{
opacity:0;
}
}.rpwwt-widget ul { list-style: outside none none; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
.rpwwt-widget ul li { overflow: hidden; margin: 0 0 1.5em; }
.rpwwt-widget ul li:last-child { margin: 0; }
.rpwwt-widget .screen-reader-text {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 !important; width: 1px; word-wrap: normal !important; word-break: normal; }
.rpwwt-widget .screen-reader-text:focus {background-color: #f1f1f1; border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; font-size: 0.875rem; font-weight: 700; height: auto; right: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; }
.rpwwt-widget ul li img { display: inline; float: left; margin: .3em .75em .75em 0; }
#rpwwt-recent-posts-widget-with-thumbnails-2 img { width: 75px; height: 75px; }