@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
div.media_box {
min-width: 200px;
height: 360px;
}
#replace{
display: none;
}
.page_link_box{
max-height: calc(100vh - 360px);
overflow-y: scroll;
padding:10px;
box-sizing:border-box;
background: #FFF;
}
div#video.zoom {
position: fixed;
right: 10px;
top: 0;
width: calc(100vw - 470px);
padding-top: calc((100vw - 470px) * 0.5625);
}
#right canvas#the-canvas.zoom {
position: fixed;
top: 10px;
left: 225px;
transform: translate(-50%, 0);
width: auto;
height: 340px;
max-width: 430px;
object-fit: contain;
}
div.page_link_box > a.active {
background-color: #333!important;
color:#FFF!important;
text-decoration:none;
font-size:14px;
border-radius:5px;
position:relative;
display:flex;
margin:2px 0;
}
div.page_link_box > a.active:before{
content:">";
font-weight:bold;    
position:absolute;
top:8px;
bottom:0;
left:7px;
margin:auto;
display:block;
color:#3690ea;
}
body,head {
margin: 0;
padding: 0;
}
div#main {
background-color: #333;
display: flex;
flex-direction: row;
flex-grow: 1;
}
#left {
width: 450px;
min-width: 450px;
background-color: #a1acb2;
box-sizing: border-box;
height: 100vh;
}
#left > .page_link_box > a,
#left > a {
width: auto;
display: block;
text-align: left;
padding: 10px 20px;
margin:3px 0;
background-color: #ededed;
color:#333;
text-decoration:none;
font-size:14px;
position:relative;
border-radius:5px;
}
#right {
display: block;
margin-left: auto;
margin-right: auto;
text-align: center;
width: 100%;
}
#right #the-canvas{
max-width: 100%;
max-height: calc(100vh - 118px);
object-fit: contain;
}
.vjs-control-bar {
display: flex !important;
position: fixed !important;
bottom: 50px !important;
opacity: 1 !important;
width: calc((100% - 440px) / 2) !important;
transform-origin: left bottom;
scale: 2;
left: 450px!important;
}
div.preview_box {
display: flex !important;
position: fixed !important;
bottom: 0px !important;
justify-content: center;
align-items: center;
width: calc(100vw - 450px);
height: 50px;
right: 0;
}
div.preview_box > span{
position: absolute;
left: 10px;
}
#prev,#play_video,#next{
height: 30px;
font-size: 0;
border: 0;
border-radius: 2px;
}
#prev:before,#play_video:before,#next:before{
font-family: 'Material Symbols Rounded';
font-variation-settings: 'FILL' 1;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
#prev:before{
content: '\e045';
}
#play_video:before{
content: '\e037';
}
#play_video.pause:before{
content: '\e034';
}
#next:before{
content: '\e044';
}
#play_video{
margin: 0 10px;
}
.vjs-fade-in,.vjs-fade-out {
visibility: visible !important;
opacity: 1 !important;
transition-duration: 0s!important;
}
.vjs-marker
{
position:absolute;
background:#3690ea;
width:5px;
height:110%;
top:-5%;
z-index:30;
margin-left:-3px;
}
.vjs-marker:hover span 
{
opacity:1;
}
.vjs-marker span
{
position:absolute;
bottom:15px;
opacity:0;
margin-left:-20px;
z-index:90;
background:rgba(0,0,0,.8);
padding:8px;
font-size:10px;
}
.video-js .vjs-picture-in-picture-control,
.video-js .vjs-fullscreen-control {
display: none;
}
.vjs-play-control {
display: none !important;
}
.video-js .vjs-control-bar {
background:#000!important;
border-bottom: 1px solid #FFF;
}
div.preview_box {
background:#000!important;
}
@media only screen and (orientation:landscape) and (max-width : 813px),(orientation:portrait) and (max-width : 753px){
body{
background-color:#333;
}
div#main{
display: block;
background: none;
}
#left{
width: 100%;
height: calc(50vh - 46px);
min-width: auto;
display: flex;
}
div.media_box{
width: 50%;
min-width: auto;
height: auto;
display: flex;
align-items: center;
padding:10px;
box-sizing:border-box;
}
.page_link_box{
width: 50%;
max-height: none;
padding:6px 10px;
box-sizing:border-box;
border-left:1px solid #a4a4a4;
background:#FFF;
}
#right{
box-sizing: border-box;
height: calc(50vh - 56px);
padding: 10px 10px 0;
}
#right #the-canvas{
max-height: 100%;
}
.vjs-control-bar{
width:calc(100vw / 1.4)!important;
scale: 1.4;
left: 0!important;
}
div.preview_box{
width: 100vw;
}
div#video.zoom {
width: calc(100vw - 20px);
right: 10px;
top: calc(50vh - 36px);
padding-top: calc((100vw - 20px) * 0.5625);
}
#right canvas#the-canvas.zoom{
width: calc(50vw - 20px);
height: auto;
max-height: calc(50vh - 66px);
top: calc((50vh - 46px) / 2);
left: 25vw;
transform: translate(-50%, -50%);
}
#left > .page_link_box > a,
#left > a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}