神代綺凜

[Bilibili-Style] 哔哩哔哩 Nekopara B站网页萌化主题
最后更新时间:2019-03-05 这一天,我终于想起了自己的 userstyles 帐号,并增加了新版播放器页面的样式
扫描右侧二维码阅读全文
02
2017/09

[Bilibili-Style] 哔哩哔哩 Nekopara B站网页萌化主题

最后更新时间:2019-03-05

这一天,我终于想起了自己的 userstyles 帐号,并增加了新版播放器页面的样式

Bilibili萌化 ネコパラ

临近毕业事情较多

完事打算推倒重写? <- 对不起,我觉得我咕定了

目前状态

已经基本稳定√
大部分萌化已完成,今后有时间有新点子会一点点添加并完善。

如果发现了什么问题,或者有好的功能及外观建议,可以在这里反馈,这样我就能第一时间收到。
由衷感谢发现问题和提出意见建议的各位,以及正在使用这个萌化的你我TA。

使用

需要先安装 Stylus 插件

并建议在 Stylus 插件设置中开启“通过 HTML[stylus-iframe] 方式改变 iframes 的 css”,可解决本样式造成的部分 iframe 背景问题

插件设置可通过 右击 Stylus 插件图标 - 选项 来进入

查看截图/更新日志以及安装:

样式目前应用的情况

  • 大部分UI
  • B站主页(暂不包括视频分类主页)
  • 视频播放界面(普通视频 & 番剧 & 稍后再看)
  • 动态
  • 空间
  • 搜索
  • 消息

主要功能

  • 可自定义背景 (new)
  • 去页面推广、广告
  • 隐藏了视频顶部消息栏
  • 在视频播放界面(旧版播放器) 全屏网页全屏 状态下,将鼠标放在右侧边缘可呼出播放器右侧面板
  • 隐藏了早已失效的lolivector插件UI
搬瓦工VPS优惠套餐,建站稳如狗,支持支付宝,循环出账94折优惠码BWH26FXH3HIQ
年付$28CN2线路,1核/512M内存/10G硬盘/500GB@1Gbps【点击购买】(经常售罄,请抓紧机会)
年付$47CN2线路,1核/1G内存/20G硬盘/1T@1Gbps【点击购买
我的文章对您有帮助吗?
我很可爱 请给我钱
扫一扫拿红包 → 扫商家收款码 → 花呗支付比红包多1分钱的金额
既可免费赞赏,又可完成支付宝支付任务!
Last modification:April 7th, 2019 at 01:24 am
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

414 comments

  1. 神呪様  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.131(Google Chrome 74.0.3729.131)

    拜托了,无论是新版播放器还是老版播放器一定要把评论居中好吗?划到下面偏向一边我要死了啊啊啊啊OωO

  2. YYDXDEKR  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.108(Google Chrome 74.0.3729.108)

    播放页面的 侧栏相关推荐 遇到标题过长的情况会伸到背景外面去

  3. 风吹名无  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)

    主页可用,点击具体的分区就会失效(播放页无误)
    你有什么头猪吗?
    (感觉大问题没有,毕竟结构一致)

  4. Tsing  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.86(Google Chrome 73.0.3683.86)

    新版播放器宽屏模式下右侧与弹幕内容显示区域有重叠,部分超出。

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @Tsing

      宽屏模式下原本就会覆盖弹幕列表,这个不是BUG
      超出一部分以及边框轮廓样式问题是已知问题,这阵子忙完后找时间细调

  5. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)

    在看番剧的时候新版h5播放器有bug,视频以下的部分背景会透明(普通视频没有这个bug) 想看个评论都看不清

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @ㄒㄐㄍㄢ

      看了下,番剧页面的元素id和普通视频是不一样的,需要调一下
      这阵子要肝毕业论文比较忙,先暂时忍一会吧

      1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
        @神代綺凜

        邮件QQ给我分到垃圾箱了,现在才看到。。。其实之前就看到这个小bug了,但是记得你说等B站新UI来着,于是我就切回旧版本的啦 最近想起来B站有新h5播放器了,一切回去发现bug还在,以防万一,我就汇报一下吧

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @ㄒㄐㄍㄢ

          主要因为我平时不用PC补番来着,所以一直没注意有这个问题

          1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
            @神代綺凜

            我也少,正好前几天碰巧,另外为什么这个消息没有提醒 甚至不在垃圾箱里——连邮件都没有 我记得以前是有的啊

            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
              @ㄒㄐㄍㄢ

              emmm,可我自己都有收到邮件提醒

              1. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
                @神代綺凜

                刚刚那条有提醒,到垃圾箱了,但是之前的没有

  6. 小见  Windows 7 x64 Edition(Windows 7 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)

    大佬用了之后动态预览会加载不出来

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @小见

      请根据“使用”所说的步骤设置一下

  7. Trayler  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.26(Google Chrome 63.0.3239.26)

    大佬什么时候把视频分类主页也完善一下 有强迫症

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @Trayler

      大概不会了吧……

      1. 风吹名无  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.110(Google Chrome 70.0.3538.110)
        @神代綺凜

        那个……分类主页好像只需在比对正则加一个
        ^https?://www.bilibili.com/(.*)
        就可以了,是这样吗?

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @风吹名无

          这相当于对整个域生效了,不推荐,如果你这样用着没觉得有什么问题那也没啥关系了

  8. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)

    建议背景换个图床,现在加载太慢了,我换了https://miao.su/这个图床后,秒加载|´・ω・)ノ

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
      @某二次元的波波

      我现在背景直接用的 Github Pages,有点慢正常,但能保证资源可用性
      你知道我为什么宁愿用慢一点的 Github Pages 吗,就是因为在两年前 https://miao.su/ 宕了两周,搞得我差点没能把数据拿出来
      后来我也尝试过好几个其他的国内图床,都不稳定,最后才打算直接用的 Github

      1. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
        @神代綺凜

        emmmm......好吧,不过加载确实太慢了,动态列表要好久才加载出来,不知道能不能换个好点的方法?

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
          @某二次元的波波

          只有替换进去的壁纸壁纸这类静态资源才走的 Github 鸭,动态列表载入慢那你只能怪B站和家里网络了

          1. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
            @神代綺凜

            不是,是顶栏的动态下拉列表,上次更新了以后那个列表也有背景了,如果背景没加载出来动态列表也加载不出来

            就这个列表

            1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 73.0.3683.103(Google Chrome 73.0.3683.103)
              @某二次元的波波

              看一下使用里的说明

              并建议在 Stylus 插件设置中开启“通过 HTML[stylus-iframe] 方式改变 iframes 的 css”,可解决本样式造成的部分 iframe 背景问题

              我还是去加个粗好了……

              1. 某二次元的波波  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
                @神代綺凜

                哦好的,解决了,谢谢

  9. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)

    chrome版本:72.0.3626.121(正式版本) (64 位)
    样式似乎会导致播放页面的标题无法选中复制

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
      @seasmogchan

      感谢反馈,这是我的疏忽,已修复

  10. nanami  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)

    怎么更新了有些地方还是和视频里有些差别

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
      @nanami

      那是一年半前的视频了……后来b站改了很多,有些地方已经不做成和最初版本一样的效果了

  11. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3725.0(Google Chrome 74.0.3725.0)

    终于等来了新版样式的更新!ヾ(≧∇≦*)ゝ
    不过个人觉得播放器下方的功能按钮那个圆角有点过大了,跟其他的地方相比突兀了点

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
      @seasmogchan

      因为那一条比较窄所以就想直接做成两边半圆了,那这么说还是统一一下圆角大小比较好?

      1. seasmogchan  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3726.0(Google Chrome 74.0.3726.0)
        @神代綺凜

        你决定啊!我有得用就感激不尽啦φ( ̄∇ ̄o)

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 72.0.3626.121(Google Chrome 72.0.3626.121)
  12. LelaGuerri  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 99.9.9999.999(Google Chrome 99.9.9999.999)

    像您网站这种乳白色的 半透明 遮罩就是一个很好的解决方法 图片背景能显示出来 文字还可以很好的识别

    https://i.imgur.com/bXegtBR.png 至于 请使用真实邮箱地址,否则一概不会通过审核
    同步通过审核无所谓只要大佬能看到就行真实邮箱是不可能用的

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @LelaGuerri

      莫,真实邮箱不是说要用“真实”邮箱,只是那种123@123.com的邮箱我会直接标为垃圾评论,你懂意思就好

  13. LelaGuerri  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 99.9.9999.999(Google Chrome 99.9.9999.999)

    您好大佬 可否在这个 B站主题的评论区位置增加一个 像 您网站 评论区这种乳白色半透明的遮罩图层呢
    因为 用了自定义壁纸 壁纸的颜色 一多 或者图案 太暗 或者太复杂 评论区的字就很难识别了
    我附上一张图.. 您看下... https://i.imgur.com/OMptVY9.jpg

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @LelaGuerri

      这是因为我还没写新版页面的样式

      1. LelaGuerri  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 99.9.9999.999(Google Chrome 99.9.9999.999)
        @神代綺凜

        嗯 嗯 能传达到 给大佬看到 就好-.-

  14. 子痕  Windows 10 x64 Edition(Windows 10 x64 Edition) / Sogou Explorer(Sogou Explorer)

    作为中年大叔,不太习惯年轻人又萌又这么多动画图片的网站。

  15. 教书先生  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 65.0.3325.181(Google Chrome 65.0.3325.181)

    我可以申请一下友链吗

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @教书先生

      因为目前友链太多所以不考虑再加,很抱歉

  16. 鸟叔  Windows 7 x64 Edition(Windows 7 x64 Edition) / Maxthon 5.2.5.4000(Maxthon 5.2.5.4000)

    网站主题真萌

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @鸟叔

      |´・ω・)ノ 谢谢夸奖

  17. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    稍后再看时也有标签栏
    直播和小黑屋跑到第二排去了∠( ᐛ 」∠)_(才发现)

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @cakeyui

      可我这里也是没有问题的啊……

      1. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @神代綺凜

        ∠( ᐛ 」∠)_没法发图 我丢外链了 http://www.tzr.me/image/h8Iw9 就很奇怪。。。

        1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
          @cakeyui

          这就是没更新啊……或者 userstyle 出了什么 bug 你没更新到
          自行检查样式代码1这部分

          如果和图片中不一致就自行替换

          .bili-header-m > .bili-wrapper{
              width: 1285px;
          }
          @media screen and (max-width: 1400px){
          .bili-header-m > .bili-wrapper{
              width: 1055px;
          }
          }
          1. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
            @神代綺凜

            感谢 因为首页修复了。。我以为代码更新到最全了 现在都能正常显示了

  18. OASIS  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    大佬..很喜欢您主页的样式 于是偷偷借用了下css 但是主页一行只能显示一篇文章,请问我缺少了什么修改?

    1. OASIS  GNU/Linux x64(GNU/Linux x64) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @OASIS

      刚刚才仔细看了大佬的注释
      就不麻烦大佬啦~

  19. ss  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)

    突然间Stylish被视为恶意脚本后 改用油猴子 版本的Stylish轻捷 然后发现评论区的留白 是尖角 不是圆角 老版界面的播放器边上白色 遮住了背景

    1. ss  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
      @ss

      不知 油猴子版的Stylish 会不会造成显示异常

      1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
        @ss

        用Stylus

        1. ss  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 63.0.3239.132(Google Chrome 63.0.3239.132)
          @神代綺凜

          试了一下 Stylus 和 Stylish的插件浏览器都安装不了显示恶意插件555

          1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
            @ss

            你要是 Chrome 的话从第三方网站直接下 crx 装扩展肯定装不了啊,都提示恶意
            https://chrome.google.com/webstore/detail/stylus/clngdbkpkpeebahjckkjfobafhncgmne

  20. cakeyui  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)

    标签栏的直播和小黑屋跑到第二排去了。。能修改下吗

    1. 神代綺凜  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 71.0.3578.98(Google Chrome 71.0.3578.98)
      @cakeyui

      已修复

      1. Stephanie  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 70.0.3538.102(Google Chrome 70.0.3538.102)
        @神代綺凜

        奇怪,明明已经是最新版,但是我还是存在这个问题耶。。