153 lines
2.9 KiB
CSS
153 lines
2.9 KiB
CSS
/* ================= Player · DPlayer Base ================= */
|
||
|
||
.__PFX__-player.__PFX__-player-dp{
|
||
margin:14px 0;
|
||
padding:10px;
|
||
border:1px solid var(--border-color);
|
||
background:var(--bg-color);
|
||
border-radius:10px;
|
||
}
|
||
|
||
.__PFX__-player-head{
|
||
margin-bottom:10px;
|
||
}
|
||
|
||
.__PFX__-player-title{
|
||
margin:0;
|
||
font-size:16px;
|
||
line-height:1.35;
|
||
color:var(--text-color);
|
||
}
|
||
|
||
.__PFX__-player-tip,
|
||
.__PFX__-player-note,
|
||
.__PFX__-player-sidehint{
|
||
color:var(--text-muted-color);
|
||
font-size:12px;
|
||
line-height:1.6;
|
||
}
|
||
|
||
.__PFX__-player-foot{
|
||
margin-top:10px;
|
||
}
|
||
|
||
.__PFX__-player-info{
|
||
margin-bottom:8px;
|
||
}
|
||
|
||
.__PFX__-player-badge{
|
||
display:inline-block;
|
||
padding:3px 8px;
|
||
border-radius:999px;
|
||
background:var(--bg-soft-color);
|
||
color:var(--text-color);
|
||
font-size:12px;
|
||
}
|
||
|
||
.__PFX__-player-status{
|
||
margin-bottom:8px;
|
||
padding:8px 10px;
|
||
border-radius:8px;
|
||
background:var(--bg-soft-color);
|
||
color:var(--text-muted-color);
|
||
font-size:12px;
|
||
}
|
||
|
||
/* ====== Core box (DPlayer mount point) ====== */
|
||
.__PFX__-player-core{
|
||
width:100%;
|
||
overflow:hidden;
|
||
border-radius:10px;
|
||
background:var(--bg-soft-color);
|
||
border:1px solid var(--border-color);
|
||
position:relative;
|
||
}
|
||
|
||
/* 默认比例：16:9 */
|
||
.__PFX__-player[data-ratio="16x9"] .__PFX__-player-core{
|
||
aspect-ratio:16 / 9;
|
||
}
|
||
.__PFX__-player[data-ratio="4x3"] .__PFX__-player-core{
|
||
aspect-ratio:4 / 3;
|
||
}
|
||
.__PFX__-player[data-ratio="21x9"] .__PFX__-player-core{
|
||
aspect-ratio:21 / 9;
|
||
}
|
||
.__PFX__-player[data-ratio="auto"] .__PFX__-player-core{
|
||
aspect-ratio:auto;
|
||
min-height:220px;
|
||
}
|
||
|
||
/* ====== Variant-specific structural helpers (still generic) ====== */
|
||
.__PFX__-player-wrap,
|
||
.__PFX__-player-wrapA,
|
||
.__PFX__-player-wrapB{
|
||
width:100%;
|
||
}
|
||
|
||
.__PFX__-player-figure{
|
||
margin:0;
|
||
}
|
||
|
||
.__PFX__-player-caption{
|
||
margin-top:8px;
|
||
font-size:13px;
|
||
color:var(--text-muted-color);
|
||
}
|
||
|
||
.__PFX__-player-aside{
|
||
margin-top:10px;
|
||
padding-top:8px;
|
||
border-top:1px dashed var(--border-color);
|
||
}
|
||
|
||
.__PFX__-player-dialog{
|
||
width:100%;
|
||
padding:0;
|
||
border:0;
|
||
background:transparent;
|
||
}
|
||
|
||
.__PFX__-player-dialog::backdrop{
|
||
background:transparent;
|
||
}
|
||
|
||
.__PFX__-player-footerOnly{
|
||
padding:0;
|
||
border:0;
|
||
background:transparent;
|
||
}
|
||
|
||
/* ====== Layout for variant 10 (side area) ====== */
|
||
.__PFX__-player-layout{
|
||
display:flex;
|
||
flex-direction:column;
|
||
gap:10px;
|
||
}
|
||
|
||
.__PFX__-player-side{
|
||
padding:10px;
|
||
border-radius:10px;
|
||
background:var(--bg-soft-color);
|
||
border:1px solid var(--border-color);
|
||
}
|
||
|
||
@media (min-width: 1024px){
|
||
.__PFX__-player-layout{
|
||
flex-direction:row;
|
||
align-items:flex-start;
|
||
}
|
||
.__PFX__-player-layout .__PFX__-player-core{
|
||
flex:1;
|
||
}
|
||
.__PFX__-player-side{
|
||
width:260px;
|
||
}
|
||
}
|
||
|
||
/* ====== Compact behavior ====== */
|
||
.__PFX__-player.compact{
|
||
padding:8px;
|
||
border-radius:8px;
|
||
}
|