神代綺凜

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

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

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

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

Bilibili萌化 ネコパラ

过去和未来

这个样式原本是我开始学 CSS 的时候 xjb 写的一个东西,其实仅仅是为了熟悉各种属性的运用以及积累一些实际经验

差不多三年过去了,回头再看,样式本身其实十分臃肿,另外,B站样式频繁的改版是必然的,并且也使得我很难维护并维持当时的自己写出来的大杂烩的样子

而且B站新版播放页面 UI 很好,我挑不出什么刺来,我觉得我的 xjb 改很多地方都是多余的

所以我决定重新开始做一些微小的工作,仅仅为了 nekopara 而做一个很简单的附加式的皮肤,只保留我之前做的一些 UI 图片资源,剩下的,原来的B站是什么样的,就是什么样的

目前状态

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

如果发现了什么问题,或者有好的功能及外观建议,可以在这里反馈,这样我就能第一时间收到。
由衷感谢发现问题和提出意见建议的各位,以及正在使用这个萌化的你我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【点击购买
Last modification:July 21st, 2019 at 07:25 pm
If you think my article is useful to you, please feel free to appreciate

Leave a Comment

431 comments

  1. 迷路也是路  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)

    是因为我的网不行吗? 背景图经常加载不出来。。。

  2. Vergissmeinnicht  Windows 10 x64 Edition(Windows 10 x64 Edition) / Firefox 68.0(Firefox 68.0)

    我的推广那一栏(在线人数、投稿数下面)的图片刷不出来了。。

    1. 神代綺凜  Mac OS X 10.14.5(Mac OS X 10.14.5) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
      @Vergissmeinnicht

      静态资源已经迁移了,现在图片加载应应该会快很多了

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

        解决了,原来是我装的一个广告拦截扩展的问题(→_→)

  3. Sora  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.169(Google Chrome 74.0.3729.169)

    使用这个皮肤,B站订阅的动态一直刷新不出来,一片空白,要卡很久

    1. 神代綺凜  Mac OS X 10.14.5(Mac OS X 10.14.5) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
      @Sora

      如果你说的是右上角导航栏那个,请看文章的“使用”部分

    2. 神代綺凜  Mac OS X 10.14.5(Mac OS X 10.14.5) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)
      @Sora

      今晚会迁移静态资源到 Coding Pages 改善访问

  4. 空白  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.131(Google Chrome 74.0.3729.131)

    好腻害OωO

  5. Lolicon  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 75.0.3770.142(Google Chrome 75.0.3770.142)

    视频播放页板块hover加个阴影跟丢丢透明w?

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

      我打算放弃这些大杂烩样式了,实在是不太行

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

        是要重做(咕咕咕)了吗

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

          也不算重做,大概就是去掉所有杂七杂八的

          目前在入职培训,先咕到一周后

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

            实时版聊海星233
            嘛辛苦了鸭~

  6.   Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 64.0.3282.204(Google Chrome 64.0.3282.204)

    那个,背景刷不出来了

  7. XZL  Windows 8.1 x64 Edition(Windows 8.1 x64 Edition) / Google Chrome 69.0.3497.100(Google Chrome 69.0.3497.100)

    不知能否在搜索结果中出现的“番剧”部分增加白色背景(目前为无背景)以减少和自定义背景的冲突呢?

  8. ㄒㄐㄍㄢ  Windows 10 x64 Edition(Windows 10 x64 Edition) / Google Chrome 74.0.3729.169(Google Chrome 74.0.3729.169)

    麒麟麒麟,搜索结果页面,如果切换了分类(综合、视频、用户啥的),样式会崩,刷新之后又回来了,另外分类栏能不能加个背景,看不清。。。

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

      好的,马上就修(咕咕咕)

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

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

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

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

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

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

  12. 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
      超出一部分以及边框轮廓样式问题是已知问题,这阵子忙完后找时间细调

  13. ㄒㄐㄍㄢ  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)
                @神代綺凜

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

  14. 小见  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)
      @小见

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

  15. 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)
          @风吹名无

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

  16. 某二次元的波波  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)
                @神代綺凜

                哦好的,解决了,谢谢

  17. 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

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

  18. 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站改了很多,有些地方已经不做成和最初版本一样的效果了

  19. 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)
  20. 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的邮箱我会直接标为垃圾评论,你懂意思就好