Skip to content

（已失效）bili 浅色宽屏模式/选集分P完整名称/裁剪左右黑边/隐藏登录弹窗 by c1ino

Screenshot of （已失效）bili 浅色宽屏模式/选集分P完整名称/裁剪左右黑边/隐藏登录弹窗
Write a review Install Get Stylus

Details

Authorc1ino

LicenseCC-BY-NC-SA

Categorybilibili

Created

Updated

Size7.9 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

（已失效）bilibili 亮瞎眼/日间/浅色模式加强版

  1. 浅色视频背景，包括宽屏/全屏模式。
  2. 选集/分P/分集名称完整显示（选集列表中当前分P以及鼠标悬停时）。
  3. 左右两侧有黑边的视频画面，可以裁剪或者反色遮罩，只能同时选其中一种。可自定义裁剪宽高比。
  4. 登录弹窗默认只在悬停时显示。
  • 不支持：番剧（/bangumi/play）、合集列表（collection）、直播（live）。
  • bilibili 如果界面改版，本样式很可能会失效、不适用、不兼容。
  • 本样式未经测试，出现bug很正常。
  • BUG: 遮罩模式下可能出现的黑边/白边/错位，可能是因为默认的“自动”的视频比例不是标准的16:9，可以试试用负小数的[外侧误差修正]来抵消。

Notes

更新日志/CHANGELOG
(2204xx)

  • 本样式已失效
    2.4.7 (220217)
  • 调整裁剪算法：增加内外侧偏移量（delta/offset）、适配不规则宽高比的两种全屏模式、修正裁剪宽高比模型。
  • 调整浅色背景开关。
    2.2.9 ~ 1.2.6 (220127)
  • 尝试支持 bwp-video 标签（HEVC模式）。
  • 调整遮罩模式的 z-index。

Source code

/* ==UserStyle==
@name           Bili Light Plus Plus
@namespace      github.com/openstyles/stylus
@version        2.4.7
@description    -dev-Beta-stylus
@author         c1ino
@license        CC-BY-NC-SA
@updated        220128

@_advanced dropdown hack "(安装来源/Which Site)" {
    ignore2 "userstyles.world" <<<EOT  EOT;
ignore1 "userstyle.org (default)*" <<<EOT /* EOT;

}

@advanced dropdown bl_normal_bg "浅色版视频背景？/video light background?" {
	bg_on "Yes (default)*" <<<EOT  EOT;
bg_off "No" <<<EOT /* EOT;

}

@advanced dropdown bl_mask "两侧黑边-遮罩模式/side-mask-mode" {
    mask_off "关闭/No (default)*" <<<EOT /* EOT;
mask_on "开启/Yes" <<<EOT  EOT;

}
@advanced dropdown bl_crop "两侧黑边-裁剪模式/side-crop-mode" {
    crop_off "关闭/No (default)*" <<<EOT /* EOT;
crop_on "开启/Yes" <<<EOT  EOT;

}

@advanced dropdown bl_sar "裁剪宽高比/MAR" {
    sar_11 "1*" <<<EOT 1 EOT;
sar_69 "16/9" <<<EOT 16/9 EOT;
sar_43 "4/3" <<<EOT 4/3 EOT;
sar_96 "9/16" <<<EOT 9/16  EOT;
sar_34 "3/4" <<<EOT 3/4 EOT;
sar_00 "自定义/custom" <<<EOT /*[[bl_sar_inp]]*\/ EOT;
}
@advanced dropdown bl_dar "视频宽高比/OAR" {
    dar_69 "16/9*" <<<EOT 16/9 EOT;
dar_43 "4/3" <<<EOT 4/3 EOT;
dar_11 "1" <<<EOT 1 EOT;
dar_96 "9/16" <<<EOT 9/16  EOT;
dar_34 "3/4" <<<EOT 3/4 EOT;
dar_00 "自定义/custom" <<<EOT /*[[bl_dar_inp]]*\/ EOT;
}

@var text bl_sar_inp "自定义裁剪宽高比/MAR" 1/9
@var text bl_dar_inp "自定义视频宽高比/OAR" 1/9
@var text bl_dt "内侧误差修正/delta" 0%
@var text bl_dm "[遮罩]外侧误差修正/offset" 0px

==/UserStyle== */


@-moz-document domain("bilibili.com") {
    /* version 1.0.1 */
    /*[hide-popover]*/
    /*TODO
    - opacity 1s
    */
    div[id^=van-popover][role=tooltip]
    ,div.login-tip
    {
        transition: 1s;
    }
    div[id^=van-popover][role=tooltip]:not(:hover)
    ,div.login-tip:not(:hover)
    ,div.bili-header ul.right-entry>li.right-entry-item:first-of-type
    >li.v-popover-wrap:not(:hover)>div.v-popover
    {
        filter:opacity(0);
    }
}

@-moz-document url-prefix("https://www.bilibili.com/video/"){
    /* version 1.0.2 */
    /*[expand-part-name]*/
        /*div#multi_page>div.cur-list>ul>li:is(:hover, .on)/**/
        /*,div#multi_page>div.cur-list>ul>li.on
        >a>div.clickitem>div.link-content>span.part*/
    div#multi_page>div.cur-list>ul>li:hover
    >a>div.clickitem>div.link-content>span.part
    ,div#multi_page>div.cur-list>ul>li.on
    >a>div.clickitem>div.link-content>span.part
    {
        _overflow:scroll;
        white-space:pre-line;
        line-height:1.7;
    }
        /*div#multi_page>div.cur-list>ul>li:is(:hover, .on)/**/
        /*,div#multi_page>div.cur-list>ul>li.on*/
    div#multi_page>div.cur-list>ul>li:hover
    ,div#multi_page>div.cur-list>ul>li.on
    {
       height:auto;
    }
}

@-moz-document url-prefix("https://www.bilibili.com/video/") {
    /* version 1.4.7+ 
    by c1ino@CC-BY-NC-SA*/
    /*TODO
    + @text dt
    - @bl_bg
    + fix :is()
    */
    
    /*[light-theater]*/
    /*ASSERT {
        --bg3:var(--Ga1);
        --bg1:var(--Wh0);
        --Wh0:#FFFFFF;
        --Ga1:#F1F2F3;
    }*/
    .bilibili-player-video
    {
        /*[[bl_normal_bg]]*/background:var(--bg3);/**/
    }
    #bilibiliPlayer>div.bilibili-player-area
    >div.bilibili-player-video-wrap
    {
        /*[[bl_normal_bg]]*/background:var(--bg1);/**/
    }
    
    
    /*[crop-side-borders]*/
    /*by c1ino@CC-BY-NC-SA*/
    /*test/beta*/
    /*{
        --sar:(/*[[bl_sar]]*\/);
        --dt:(/*[[bl_dt]]*\/);
        --dar:(/*[[bl_dar]]*\/);
        --sar:1;
        --dt:.5%;
        --dar:16/9;
        --dm:-0.5px;
    }*/
    .bilibili-player-video
    {
        isolation:isolate;
        --sar:(/*[[bl_sar]]*/);
        --dt: (/*[[bl_dt]]*/);
        --dar:(/*[[bl_dar]]*/);
        --dm: (/*[[bl_dm]]*/);
        
        --border: calc(var(--w)*(1 - var(--sar)/var(--dar))/2 - var(--dt) + var(--dm));
        --margin: calc((100% - var(--w))/2 - var(--dm));
        --w:      var(--darw);
        --darw:   calc(100%*var(--dar)/(16/9));
        --maxw:   min(calc(100vh*var(--dar)),100vw);
        --maxh:   min(calc(100vw/var(--dar)),100vh);
        --minw:   calc(100%/max((16/9),var(--dar))*var(--sar));
        
        --w3:     100vw;
        --h3:     100vh;
        --w2:     min(calc(var(--h3)*var(--dar)),var(--w3));
        --h2:     min(calc(var(--w3)/var(--dar)),var(--h3));
        --w1:     min(calc(var(--h2)*var(--sar)),var(--w2));
        --h1:     min(calc(var(--w2)/var(--sar)),var(--h2));
        
        --w0:     min(calc(var(--h3)*var(--sar)),var(--w3));
        --h0:     min(calc(var(--w3)/var(--sar)),var(--h3));
        /*--by:     "c1ino@CC-BY-NC-SA";*/
    }
    
    
    /*[if-bl-mask]*//*[[bl_mask]]*/
    .bilibili-player-video-wrap:hover .bilibili-player-video::after
    ,.bilibili-player-video-wrap:hover .bilibili-player-video::before
    {
        width:0;
        transition: width 1s;
    }
    .bilibili-player-video::before
    ,.bilibili-player-video::after
    {
        height:100%;
        width: var(--border);
        left:  var(--margin);
        transition: width 1s;
        background:var(--bg3);
        position:absolute;
        content:"";
        z-index:1;
        mix-blend-mode:difference;
        _mix-blend-mode:color-dodge;
    }
    .bilibili-player-video::after
    {
        right: var(--margin);
        left:  unset;
    }
    :fullscreen .bilibili-player-video
    ,.webfullscreen .bilibili-player-video
    {
        --w:   var(--maxw);
    }
    :fullscreen .bilibili-player-video::after
    ,:fullscreen .bilibili-player-video::before
    ,.webfullscreen .bilibili-player-video::after
    ,.webfullscreen .bilibili-player-video::before
    {
        height:     var(--maxh);
        margin-top: calc((100vh - var(--maxh))/2);
    }/*
    :fullscreen .bilibili-player-video::after
    ,.webfullscreen .bilibili-player-video::after
    {
        _right:  var(--margin);
        _left:unset;
    }
    /*#bilibiliPlayer.mode-fullscreen .bilibili-player-video::before/**/
    /*[end-of-bl-mask]*/
    
    
    /*[if-bl-crop]*//*[[bl_crop]]*/
    #bilibiliPlayer .bilibili-player-video-wrap:hover .bilibili-player-video > video 
    ,#bilibiliPlayer .bilibili-player-video-wrap:hover .bilibili-player-video > bwp-video 
    {
        transition: width 1s, height 1s, margin 1s;
        width:  100%;
        height: 100%;
        margin: 0 auto;
        _:"fallback";
        _width: auto;
        _margin: auto;
        _margin: 0;
    }
    #bilibiliPlayer .bilibili-player-video > video
    ,#bilibiliPlayer .bilibili-player-video > bwp-video 
    {
        width:      calc(var(--minw) + var(--dt)*2);
        object-fit: cover;
        margin: 0 auto;
        transition: width 1s, height 1s, margin 1s;
    }
    #bilibiliPlayer:fullscreen .bilibili-player-video > video 
    ,#bilibiliPlayer:fullscreen .bilibili-player-video > bwp-video
    ,.webfullscreen #bilibiliPlayer .bilibili-player-video > video 
    ,.webfullscreen #bilibiliPlayer .bilibili-player-video > bwp-video 
    {
        width:      calc(var(--w0) + var(--dt)*2);
        height:     var(--h0);
        margin-top: calc((100vh - var(--h0))/2);
    }
    /*,#bilibiliPlayer .bilibili-player-video-wrap:hover .bilibili-player-video > :is(bwp-video, video)/**/
    /*,#bilibiliPlayer .bilibili-player-video-wrap:hover .bilibili-player-video > :-webkit-any(bwp-video, video)/**/
    /*,#bilibiliPlayer .bilibili-player-video-wrap:hover .bilibili-player-video > :matches(bwp-video, video)/**/
    /*[end-of-bl-crop]*/
}

Reviews

No reviews yet.