.ytpp-main {
--ytpp-gap: 0.75rem;
--ytpp-radius: 6px;
--ytpp-accent: #f00;
display: grid;
gap: var(--ytpp-gap);
margin-block: 1rem;
&.ytpp-layout-side {
grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
.ytpp-list {
grid-template-columns: 1fr;
align-content: start; block-size: 0;
min-block-size: 100%;
overflow-y: auto;
}
}
@media (width < 640px) {
&.ytpp-layout-side {
grid-template-columns: 1fr;
.ytpp-list {
block-size: auto;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
}
}
}
}
.ytpp-stage {
aspect-ratio: 16 / 9;
background: #000;
border-radius: var(--ytpp-radius);
overflow: hidden;
iframe {
display: block;
inline-size: 100%;
block-size: 100%;
border: 0;
}
}
.ytpp-facade {
all: unset;
position: relative;
display: block;
inline-size: 100%;
block-size: 100%;
cursor: pointer;
img {
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}
.ytpp-play {
position: absolute;
inset: 50% auto auto 50%;
translate: -50% -50%;
inline-size: 68px;
aspect-ratio: 68 / 48;
border-radius: 14px;
background: rgb(0 0 0 / 0.75);
transition: background-color 0.15s;
&::after {
content: "";
position: absolute;
inset: 50% auto auto 54%;
translate: -50% -50%;
border-block: 10px solid transparent;
border-inline-start: 17px solid #fff;
}
}
&:is(:hover, :focus-visible) .ytpp-play {
background: var(--ytpp-accent);
}
&:focus-visible {
outline: 3px solid var(--ytpp-accent);
outline-offset: -3px;
}
}
.ytpp-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
gap: var(--ytpp-gap);
margin: 0;
padding: 0;
list-style: none;
.ytpp-layout-grid & {
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
}
.ytpp-item {
all: unset;
display: grid;
gap: 0.375rem;
inline-size: 100%;
cursor: pointer;
img {
inline-size: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
border-radius: var(--ytpp-radius);
opacity: 0.8;
transition: opacity 0.15s;
}
&:is(:hover, :focus-visible, [aria-current]) img {
opacity: 1;
}
&[aria-current] img {
box-shadow: 0 0 0 3px var(--ytpp-accent);
}
&:focus-visible {
outline: 3px solid var(--ytpp-accent);
outline-offset: 3px;
border-radius: var(--ytpp-radius);
}
}
.ytpp-item-title {
font-size: 0.875em;
line-height: 1.3;
}
.ytpp-notice {
margin: 0;
font-size: 0.8125em;
opacity: 0.8;
}
.ytpp-dialog {
inline-size: min(960px, 92vw);
padding: 0;
border: 0;
background: transparent;
overflow: visible;
&::backdrop {
background: rgb(0 0 0 / 0.85);
}
}
.ytpp-dialog-close {
position: absolute;
inset: -3rem 0 auto auto;
inline-size: 2.5rem;
aspect-ratio: 1;
border: 0;
border-radius: 50%;
background: #fff;
color: #000;
font-size: 1.75rem;
line-height: 1;
cursor: pointer;
&:focus-visible {
outline: 3px solid var(--ytpp-accent);
outline-offset: 2px;
}
}
@media (prefers-reduced-motion: reduce) {
.ytpp-main * {
transition: none !important;
}
}