*{

box-sizing:border-box;

}


html,
body{

margin:0;

padding:0;

width:100%;

height:100%;

overflow:hidden;

font-family:
-apple-system,
BlinkMacSystemFont,
"PingFang SC",
sans-serif;

background:#000;

color:#fff;

}


.video-page{

width:100%;

height:100%;

display:flex;

flex-direction:column;

background:#000;

}


/****************
顶部控制栏
*****************/

.video-header{

position:absolute;

top:0;

left:0;

right:0;

z-index:20;

height:
calc(
    62px +
    env(safe-area-inset-top)
);

display:grid;

grid-template-columns:
64px
1fr
64px;

align-items:end;

padding:
env(safe-area-inset-top)
12px
10px;

background:
linear-gradient(
to bottom,
rgba(0,0,0,.78),
rgba(0,0,0,0)
);

pointer-events:none;

}


.video-header h1{

margin:0;

padding-bottom:7px;

font-size:17px;

font-weight:600;

text-align:center;

white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis;

}


.close-button,
.fullscreen-header-button{

pointer-events:auto;

height:40px;

padding:0;

border:0;

border-radius:20px;

background:rgba(255,255,255,.16);

color:#fff;

font-family:inherit;

cursor:pointer;

}


.close-button{

width:40px;

font-size:30px;

line-height:1;

}


.fullscreen-header-button{

width:58px;

font-size:14px;

}


/****************
视频舞台
*****************/

.video-stage{

position:relative;

flex:1;

display:flex;

align-items:center;

justify-content:center;

width:100%;

height:100%;

background:#000;

}


.video-stage video{

display:block;

width:100%;

height:100%;

object-fit:contain;

background:#000;

}


/****************
中央播放按钮
*****************/

.center-play-button{

position:absolute;

left:50%;

top:50%;

z-index:10;

width:72px;

height:72px;

display:flex;

align-items:center;

justify-content:center;

padding-left:5px;

border:0;

border-radius:50%;

background:rgba(0,0,0,.58);

color:#fff;

font-size:30px;

transform:translate(-50%, -50%);

cursor:pointer;

}


.video-stage.is-playing
.center-play-button{

display:none;

}


/****************
全屏按钮
*****************/

.fullscreen-button{

position:absolute;

left:50%;

bottom:
calc(
    38px +
    env(safe-area-inset-bottom)
);

z-index:10;

height:46px;

padding:0 22px;

border:1px solid rgba(255,255,255,.45);

border-radius:24px;

background:rgba(0,0,0,.55);

color:#fff;

font-family:inherit;

font-size:15px;

transform:translateX(-50%);

cursor:pointer;

backdrop-filter:blur(10px);

-webkit-backdrop-filter:blur(10px);

}


.video-stage.is-playing
.fullscreen-button{

opacity:.35;

}


/****************
全屏模式
*****************/

.video-stage:fullscreen{

width:100vw;

height:100vh;

background:#000;

}


.video-stage:-webkit-full-screen{

width:100vw;

height:100vh;

background:#000;

}