20240204-第2版-百度网盘自用-大屏播放视频 by YolandaMorgan

/* ==UserStyle==
@name       百度网盘自用-大屏播放视频
@version    20240505.11.37
@namespace  ?
==/UserStyle== */

/* ==UserStyle==
@name         20240505-第4版-百度网盘自用-大屏播放视频
@version      0.4.0
@description  20240423设置时间进度条两侧的时间颜色 20240505自定义视频的时间格式为HH:MM
@author       YolandaMorgan
@license      MIT
@namespace    https://pan.baidu.com/pfile/video
==/UserStyle== */


@-moz-document url-prefix("https://pan.baidu.com/pfile/video") {
.vp-personal-layout.vp-layout{
        transform: scale(0.6);/*此处是导航栏的左侧*/
        margin-top: -0.7% !important; /* 不要调整2个0.5,否则,点击按钮困难 */
         transform-origin: top left; /* 确保缩放后的内容向上对齐 */
}
.vp-personal-home-layout__video{
/* 无关项        height: initial !important; */
        margin-top: -3.5% !important; /* 根据实际情况调整，使得视频区域向上移动,如果想视频左右拖动时,视频区域不会向上移动遮盖标题可以注销此项*/
}
.vp-personal-home-layout > .vp-layout > .vp-aside{
/* 无关项        height: initial !important; */
        margin-top: -4.5% !important; /* 根据实际情况调整，使得侧边栏区域向上移动,必须比vp-personal-home-layout__video的百分比低1%,否则,点击课件按钮困难 */
}
.vp-video .vp-video__player {
    position: relative; /*  */
    width: 100%;
/* 参考项    height: calc(100vh - 50px) !important; /* 调整视频高度以填充空白区域，50px根据页面其他元素的实际占用高度进行调整 */
    height: 115%;
}
/*被替 .vp-toolsbar{position: absolute; top: -1.5%;margin-top: -0.75%;left: 65%; transform: translate(-50%, -20%);justify-content: center; font-size: 14px;} /* 调整视频标题 */
.vp-video__control-bar--play, .vp-toolsbar__tools-block, .vp-personal-aside.vp-aside{display: none !important;} /* 屏蔽播放三按钮,分享下载按钮,导航栏右侧 */
.vp-video__control-bar--setup > div.vp-video__control-bar--button-group > .is-icon.vp-video__control-bar--button{display: none !important;} /* 屏蔽分享下载按钮,导航栏右侧 */
#toolBox{ transform: scale(0.8);transform-origin: bottom left} 
.vp-video .vp-video__control-bar--play-time {color: #f30808;} /*20240423设置时间进度条两侧的时间颜色*/
.vp-video__control-bar{transform-origin: bottom left;top: 101%;margin-left: 80%} /* 调整 字幕,倍速,清晰度三个按钮的位置 */
/*被替 #vjs_video_596 > section > div.vp-video__control-bar--setup > div:nth-child(3) > div > div.vp-popover-reference > div{color: blue; }*/
.vp-video .vp-video__control-bar--button {color: blue;} /* 调整 字幕,倍速,清晰度三个按钮的颜色 */
/*高度为top115%很合适两个屏幕,但是top4%会导致切换屏幕时候可能上下遮挡*/

/*
#app > div > div.vp-personal-video-main > section > section > section > main > section > div.vp-toolsbar{position: relative; top: 115%;  transform: translate(80%, -20%);justify-content: center; font-size: 14px;}
*/
/*
#app > div > div.vp-personal-video-main > section > section > section > main > section > div.vp-toolsbar{color:#000; font-size: 14px;position:absolute;top:-10px  ;left:calc(20vw)}
#app > div > div.vp-personal-video-main > section > section > section > main > section > div.vp-toolsbar > section.vp-toolsbar__title{font-size: 2px;transform: scale(0.8);}
*/
/*; width: calc(50vw );可以解决遮挡了同行的按钮,导致不能点击按钮的问题*/
#app > div > div.vp-personal-video-main > section > section > section > main > section > div.vp-toolsbar{color:#f6f5f5; font-size: 14px;position:relative;top:10px  ;left:calc(12vw); width: calc(50vw ); background-color: #000;}
#app > div > div.vp-personal-video-main > section > section > section > main > section > div.vp-toolsbar > section.vp-toolsbar__title{font-size: 14px;}
span.bdh-button::before { /*此处是左上角处的历史按钮,设置了位置和大小,最小尺寸为15px*/
    z-index: 10000; /*(将10000改为1399,目的是不要让他显示完整的文字,只显示一个字)*/
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    color: #f5f5f5;
    border-radius: 50%;
    position: fixed; /*left和top更好取值*/
    left: calc(0vw - 0px);
    top: -0px; /*按钮有颜色,所以在视频区域还是标题栏都能看见,为了保证切换屏幕时按钮位置不变,就放在标题栏*/
    animation: auto;
    background-color: #c93f17;
    font-size:14px;
    transform: scale(0.8);
    justify-content: center; /**/
    display: flex;

}
/* 自定义"历史按钮"的显示文本 */
span.bdh-button {
    visibility: hidden; /* 隐藏原始文本 */
}

span.bdh-button::before {
    content: "史"; /* 替换成新的内容 */
    visibility: visible; /* 显示新内容 */
}


/*屏蔽不了右边的历史按钮*/
/*屏蔽广告class用小数点,div id用#,屏蔽如下1.有全屏下右上角的ai提示,2.全屏下的右中间的按钮*/
.vp-toolsbar__chat-block,
.vp-personal-aside-guide__operate-block,
.wp-ai-not-block__title,
.dialog-container,
.ai-course__feedback-container-new{ /*屏蔽正常屏幕中的反馈按钮*/
   display: none !important;    
  }

/*解决字幕双行显示在底边
方法1:vp-video__subtitle-text-first{width: max-content;}
方法2:.show.vp-video__subtitle-text{top: 93% !important;}
*/
.show.vp-video__subtitle-text{top: 93% !important;}  /**/

/*(颜色设置见后面)设置当前时间的在屏幕中的上下位置.vp-video__control-bar--play-time-current(不能设置; display: block)（若设置left:-1.5%，会导致全屏的时间看不清）
       //parentElement5.style = 'position: relative;color: yellowgreen; top: 97%; opacity: 1'; //显示在视频中
      parentElement5.style = 'position: absolute; right: 50%;top: 100.4%; opacity: 1'; //显示在屏幕下方
设置视频总时间的在屏幕中的上下位置.vp-video__control-bar--play-time-all(不能设置; display: block)
       //parentElement6.style = 'position: relative; left:93%;color: yellowgreen; top: 94.5%; opacity: 1';//显示在视频中
        parentElement6.style = 'position: relative; left:93%;color: yellowgreen; top: 100.4%; opacity: 1';//显示在屏幕下方
*/
/* .vp-video__control-bar--play-time-current{top: 97% !important;} 注释此处的原因是,视频截图不能截图字幕和时间,时间戳体现在文件名中*/
/* .vp-video__control-bar--play-time-all{top: 97% !important;} */

/*🔥自定义视频的时间格式为HH:MM
原理:
1.请用css代码实现"时间显示格式为时:分,此处为01:11,原理是只显示前面指定数目的字符
方法:使用CSS的 text-overflow 属性结合 white-space 和 overflow 来实现这个效果
2.怎么用空白代替星号
方法:使用 ::after 伪元素来截取显示的内容,这段代码将在原始时间字符串后面创建一个与父元素等高的白色区域，覆盖超出的部分，从而实现末尾被截断而不显示的效果。你可以根据需要调整 width 属性来控制截断的位置。
*/
.vp-video__control-bar--play-time {
    width: 58px !important; /* 设置显示的宽度 */
    white-space: nowrap; /* 防止换行 */
    overflow: hidden; /* 隐藏超出部分 */
    /* text-overflow: ellipsis;  显示省略号 */
    position: relative; /* 相对定位 */
}

.vp-video__control-bar--play-time::after {
    content: ''; /* 设置内容为空 */
    position: absolute; /* 绝对定位 */
    top: 0;
    right: 0;
    width: 20px; /* 设置截断的宽度 */
    height: 100%; /* 设置与父元素相同的高度 */
    background-color: #fff; /* 设置与背景相同的颜色 */
}

}