bilibili 宽屏改进版 by YolandaMorgan

/* ==UserStyle==
@name         现行-网课用-显示字幕-bilibili 宽屏改进版
@version      0.4.1
@description  (0.4.1-20240419)移除两侧空白，最大宽度播放视频，并自动移动缩放区域到上方，增加视频高度填充空白，下方元素根据视频播放器高度自动调整位置
@author       YolandaMorgan
@license      MIT
@namespace    bilibili.com
==/UserStyle== */

@-moz-document url-prefix("https://www.bilibili.com/video/") {
/* 20240402美化播放器的原理
www.bilibili.com##.bpx-player-control-bottom 里面有播放按钮等一栏
    .bpx-player-ctrl-pip.bpx-player-ctrl-btn,里面是画中画
    .bpx-player-ctrl-playbackrate.bpx-player-ctrl-btn,倍速按钮
    .bpx-player-ctrl-volume.bpx-player-ctrl-btn,音量按钮
www.bilibili.com##.bpx-player-shadow-progress-schedule-wrap 里面是正常播放下方的进度条
www.bilibili.com##.bpx-player-control-mask 是是播放器虚影
www.bilibili.com##.bpx-player-control-top 里面是点击鼠标后浮现的可以点击的进度条
*/
    
.bpx-player-control-top { /*设置鼠标在播放器内时的进度条,因此不是.bpx-player-shadow-progress-area*/
    margin-bottom: -3.2%; /*20240419  绝对下-49px 或者-3.2% 删除相对定位*/; /*用bottom会导致全屏时候进度条在文字的上方*/


}   

.bpx-player-subtitle-panel-position  { /*20240419 控制字幕位置,避免鼠标在播放器内外时的位置不一样*/
   bottom: 1% !important;

}    
  
    #biliMainHeader, .video-info-detail, .bpx-player-control-bottom-left,
    #canSet,/*20240419 xws修改处 屏蔽仰晨-B站改造计划（为了学习版）中的二维码 */
    .bpx-player-top-left, /*20240419 xws修改处 隐藏播放器左上方的关注按钮 */
    .bpx-player-ctrl-playbackrate.bpx-player-ctrl-btn, /*20240419 xws修改处 隐藏倍速按钮 */
    .bpx-player-ctrl-volume.bpx-player-ctrl-btn,/*20240419 xws修改处 音量按钮 */
/*    .bpx-player-ctrl-wide.bpx-player-ctrl-btn,/*20240419 xws修改处 隐藏全屏1按钮 */
/*    .bpx-player-ctrl-web.bpx-player-ctrl-btn,/*20240419 xws修改处 隐藏全屏2按钮 */
/*    .bpx-player-ctrl-full.bpx-player-ctrl-btn,/*20240419 xws修改处 隐藏全屏3按钮 */
    .bpx-player-control-mask{
        display: none !important;  /* 隐藏导航栏,视频标题下面的信息栏, 不隐藏播放器的控制栏.bpx-player-control-wrap */
    }

 /*20240419 xws修改处 显示字幕等按钮为屏幕的右上方 */     
    .bpx-player-control-bottom{ /*此处是播放器按钮栏,移动到播放器外非全屏就看不见了全屏还是看得见,原因是背景色的问题,但是*/
      /*   transform: scale(0.6);  /**/
        margin-top: -40% !important; /* 不要调整2个0.5,否则,点击按钮困难,58.5为视频的上边缘 */
         transform-origin: top left; /* 确保缩放后的内容向上对齐 */
          position: relative ; /* 只有fixed,移动到播放器外非全屏才看得见,但是全屏也看得见 */
      /*    background-color: black   !important; /**/
      /*  width: calc(100vw - 490px) !important; */
       /*  bottom: -100%;  */
}

/*    20240419 无法通过.bpx-player-control-bottom来设置 
    .bpx-player-control-bottom-right{ 
        display: flex;
        flex-direction: column !important;
} 
*/

/* 停用 /*20240419 无法通过.bpx-player-control-bottom来设置, transform: rotate(90deg)是整个工具栏旋转可以利用背景颜色,flex-direction: column只是按钮旋转不能利用背景颜色 */
    .bpx-player-control-bottom-right{ 
transform: rotate(-90deg);
display: flex;        
background-color: black   !important;
transform-origin: top right; /*确保旋转后在右下角*/
right:10px;
position:relative;/*确保在右侧边缘位置处*/
top:25vh;/*避开全屏下状态栏的时间显示,避开非全屏下的水平按钮*/
} 

    .bpx-player-ctrl-btn.bpx-player-ctrl-eplist /* 右侧边栏上其他按钮不适合隐藏 */
    { transform: rotate(90deg);}

/*设置全屏下的合集列表的列表宽度*/
.bpx-player-ctrl-eplist-menu-wrap,.bilibili-player-video-btn-menu-wrap { width: 700px;}
    
    .video-info-meta {
            display: none !important;  /* 隐藏标题下方的已经播放的人数 */
    }
    .left-container {
        width: calc(100vw - 350px) !important; /*350px是右侧栏宽度,与下面关于右侧栏的宽度相同*/
    }
.report-scroll-module.report-wrap-module.video-info-container {
     /* transform: scale(0.7); */
        transform-origin: top left;  /*确保"视频标题"缩放后的内容向上对齐 */
        margin-right: -600px; /*20240402将向右移500px*/
        margin-top: -15px; 
    
        
    }

.video-info-container .video-info-title-inner .video-title[data-v-a17d480e] {
    font-size: 27px;  /* 确保"视频标题"的文字大小为30px */
}

.video-info-title {   /* 确保"视频标题"的文字 居中*/ /*20240402将.video-info-title-inner改为video-info-title,改了对齐方式,向下移10px*/
     display: flex; 
     /*justify-content: flex-end;*/

     justify-content: center; 
    transform-origin: top left;
     margin-top: 10px;
    
}    

    #playerWrap {
        height: initial !important;
        margin-top: -5.3% !important; /* 根据实际情况调整，使得视频区域向上移动 20240402调值 */
    }
    #bilibili-player {
        width:auto; 
/*        width:calc(100vw - 50px) !important; /* 调整视频高度以填充空白区域，50px根据页面其他元素的实际占用高度进行调整 */
        height: calc(100vh - 90px) !important; /* 调整视频高度以填充空白区域，50px根据页面其他元素的实际占用高度进行调整 20240402 */
        transform-origin: top center;
         margin-top: 15px; /*20240402*/
    }
    #bilibili-player-placeholder {
    width: auto;/* 确保前景修改后,背景自动变化 */
    height: auto;
    }
    /* 下方内容自动向下移动，确保不会被新的视频播放器高度遮挡 ##.video-toolbar-container##.report-scroll-module.report-wrap-module.video-toolbar
    .video-info-container, .comment-container {
        margin-top: calc(50vh - 25px) !important; /* 根据视频播放器的新高度调整，50vh和25px是示例值，需要根据实际情况调整 
    }*/
    /*.danmaku-box{display: none !important;} /* 隐藏右侧的弹窗栏 */
    .up-panel-container, .report-scroll-module.report-wrap-module.video-info-container {
        transform: scale(0.6);
        transform-origin: top left; /* 确保视频播放者相关信息,缩放后的内容向上中心对齐 */
        opacity : 0.7;
    }
   .danmaku-box, .recommend-list-v1, .bpx-player-sending-area {display: none !important;} /*屏蔽"右侧字幕栏,右侧推荐列表,发送弹幕区*/
    .transcript-box{
     font-size: 16px;  /* xws修改处 设置了字幕栏文字大小 */
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    padding: 0px 0px;
    max-height: calc(87vh - 160px) !important; /* xws修改处 设置了字幕栏高度80vh 20240402目的是显示时长 */
    overflow: scroll;
    margin-bottom: 10px;
    pointer-events: initial;
        width: auto; /* xws修改处 确保字幕栏宽度比右侧栏宽度小 */
}

/* */
.video-container-v1 .right-container[data-v-0ce47348]{
    width: 350px; /* xws修改处 确保字幕栏宽度比右侧栏宽度小 */
    flex: none;
    margin-left: 0px;
    position: relative;
    pointer-events: none;
}   

.video-player-container {
    position: relative;
}

.video-container-v1[data-v-0ce47348] {
    max-width: fit-content;
    display: flex;
    justify-content: space-between;
}  
    
 
.bpx-player-subtitle-panel-text {
    font-size: 30px; /* xws修改处 设置视频播放器中的字幕文字大小 */
}    
.button {
    top: 10px;
    right: 0px; /* xws修改处 设置视频播放器中的字幕文字大小 */
}   

.ZulNs-dialog{
    font-size: 18px; /* xws修改处 设置cc字幕栏中的字幕文字大小 */

}
    
/* "Show transcript of Bilibili video on the side"中的下载字幕按钮只能通过"修改油猴脚本"来做,   理由:不支持.download.style ,不支持等号等号
    "bilibili-subtitle-to-text"通过stylus设置不了位置,test:通过油猴脚本设置
*/ 
  
    
}