哔哩哔哩(BiliBili)动态页主题 by noname

Details

Authornoname

LicenseNo License

CategoryBiliBili 哔哩哔哩

Created2 years, 11 months ago

Updated2 years, 2 months ago

Size50 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

深度适配bilibili动态页，大量运用模糊与大圆角元素，背景采用必应每日壁纸
二级菜单的问题暂时无法解决（如果要解决就要去除全部的卡片模糊效果）我个人觉得得不偿失，可能以后会加入模糊特效的开关。

小日记: 9/27 抱歉这么久都没有更新，主要是一直都没有空余的时间更新，甚至都很少再来逛UserStyles了，这是个很不错的项目，我也很想保持更新，但实在没空余的精力去坚持。而且由于之前动态页有大量的改动，如果继续在这版的基础上更新的话很可能会留下大量的屎山，而如果从零开始的话，其工作量是现在的我难以想象的。怎么结尾呢。。。来日方长吧，说不定哪次长假他就能重新活过来呢
借用句歌词吧
"Look at the sky, I'm still here
I'll be alive next year
I can make something good, oh
Something good"

Notes

V1.0 2022/01/10 正式发布
V1.1 2022/01/20 适配顶栏二级菜单及bug修复
V1.1.1 2022/01/21 修复上次更新后新增的bug以及右列(公告栏及话题栏)底部留白调整
v1.2 2022/01/22 适配直播预约
v1.3 2022/01/29 适配抽奖二级菜单，动态互动抽奖及视频卡片话题hover效果调整并加入过渡效果，修正互动抽奖官方图标文字选色误差
v1.3.1 2022/03/18 修复了些定位偏差(小更新)
v1.3.2 2022/03/19 适配头像二级菜单(有曲线救国的成分)
v1.3.2 2022/03/23 跟随官方变动修复
v1.3.3 2022/03/28 适配投票

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name         bilibili动态页主题
@version      20220404.06.53
@namespace    userstyles.world/user/noname
@description  深度适配bilibili动态页，大量运用模糊与大圆角元素，背景采用必应每日壁纸
@author       noname
@license      No License
==/UserStyle== */

@-moz-document domain("t.bilibili.com") {
/*动态页背景*/
/*备用地址：https://api.sunweihu.com/api/bing1/api.php*/
body{
    padding-top:10px;
    font-family:Helvetica;
    color:white;
    background-color:#0f0f0f;
    background:url(https://bing.getlove.cn/bingImage) no-repeat;
    background-size:auto;    /*背景图片自动拉伸以铺满全屏*/
    background-position:top center;
    background-attachment: fixed;
}
#app .bg/*背景图像*/{
    background:url(#);
}
}

@-moz-document domain("t.bilibili.com") {
/*动态页顶栏*/
.international-header/*解除顶栏背景最小宽度限制*/{
    min-width:500px;
}
.international-header .mini-type, .van-popover .mini-type/*顶栏*/{
    position:sticky;
    background:rgba(0,0,0,0.5);
    backdrop-filter:blur(100px);
    border-radius:30px;
    min-width:460px;
    width:80%;
    max-width:460px;/*下部元素总宽度为1152px,有搜索栏时900px为宜,无搜索栏时460px为宜*/
    height:60px;
    margin:auto;
    margin-right:10px;
}
.mini-upload[data-v-7578e9ae]/*顶栏投稿按钮*/{
    border-radius:28px;
    height:40px;
    min-width:100px!important;
    margin-left:3px;
    line-height:40px;
}
.mini-header__content/*顶栏文本*/{
    padding:10px 10px;
    line-height:40px;
}
.bili-header-m .nav-search-box, .international-header .nav-search-box/*搜索栏整体定位*/{
    margin:auto 0;
}
.international-header .mini-type .mini-header--login .nav-user-center .user-con.search-icon, .van-popover .mini-type .mini-header--login .nav-user-center .user-con.search-icon/*去除搜索栏*/{
    display:none;
}
.international-header .mini-type .nav-search #nav_searchform, .van-popover .mini-type .nav-search #nav_searchform/*搜索栏输入框部分*/{
    display:none;
    border-radius:28px;
    height:40px;
}
.bili-header-m .nav-search .nav-search-keyword, .international-header .nav-search .nav-search-keyword/*搜索栏文字定位*/{
    font-size:15px;
    height:38px;
}
.bili-header-m .nav-search .nav-search-btn, .international-header .nav-search .nav-search-btn/*搜索栏按钮部分*/{
    border-radius:28px;
    height:40px;
}
.nav-user-center .user-con .item/*顶栏文字间距*/{
    margin-left:0;
    margin-right:12px
}
.mini-avatar[data-v-d7d33416]/*头像*/{
    height:40px;
    width:40px;
    margin-right:3px;
}
.nav-link/*垃圾*/{
    display:none;
}
.mini-type .nav-user-center .user-con .item .name /*顶栏字体颜色*/{
    color:white;
}
.van-popover/*头像二级菜单背景*/{
    border-radius:14px;
    background:rgba(51,51,51,1);
}
.van-popover.van-popper.van-popper-avatar/*头像二级菜单阴影*/{
    box-shadow:0px 20px 40px rgba(0,0,0,0.4)!important;
}
.van-popper-avatar .nickname[data-v-d7d33416]/*头像二级菜单用户名颜色，无非大会员账号无法测试*/{
    color:white;
}
.van-popper-avatar .level-info .grade[data-v-d7d33416]/*账号等级*/{
    color:rgba(255,255,255,0.8);
}
.van-popper-avatar .level-info .progress[data-v-d7d33416]/*账号等级经验*/{
    color:rgba(255,255,255,0.4)
}
.van-popper-avatar .level-content .level-intro[data-v-d7d33416] /*账号等级权限等相关说明动画1*/{
    visibility:hidden;
    opacity:0;
    border-radius:14px;
    background:rgba(51,51,51,1);
    color:rgba(255,255,255,0.8);
    margin-left:0px;
    box-shadow:0px 20px 0px rgba(0,0,0,0.4)!important;
}
.van-popper-avatar .level-content:hover .level-intro[data-v-d7d33416] /*账号等级权限等相关说明动画2*/{
    visibility:visible;
    opacity:1;
    border-radius:14px;
    background:rgba(51,51,51,1);
    color:rgba(255,255,255,0.8);
    margin-left:7px;
    box-shadow:0px 20px 40px rgba(0,0,0,0.4)!important;
}
.van-popper-avatar .coins[data-v-d7d33416]/*去除硬币及B币底部分割线*/{
    border:0;
}
.international-header a, .van-popover a/*硬币及B币字体颜色*/{
    color:white;
}
.van-popper-avatar .counts[data-v-d7d33416]/*去除关注、粉丝、动态计数器底部分割线*/{
    border:0;
}
.van-popper-avatar .count-item .item-key[data-v-d7d33416]/*关注、粉丝、动态字体颜色*/{
    color:rgba(255,255,255,0.6)
}
.van-popper-avatar .count-item .item-value[data-v-d7d33416]/*关注、粉丝、动态计数字体颜色*/{
    color:rgba(255,255,255,0.8)
}
.van-popper-avatar .links[data-v-d7d33416]/*去除我的课程下的分割线*/{
    border:0;
    padding:0
}
.international-header .mini-type .nav-user-center .bilifont/*个人中心-我的课程的图标颜色*/{
    color:rgba(255,255,255,0.4)
}
.van-popper-avatar .links .link-title[data-v-d7d33416]/*个人中心-我的课程的字体颜色*/{
    color:rgba(255,255,255,0.8);
}
.van-popper-avatar .links .link-item[data-v-d7d33416]/*个人中心-我的课程卡片调整*/{
    border-radius:0px;
    width:calc(100% - 0px);
    transition:all 0.2s;
}
.van-popper-avatar .links .link-item[data-v-d7d33416]:hover/*当光标在个人中心-我的课程卡片上时*/{
    color:rgba(255,255,255,0.8);
    border-radius:14px;
    background:rgba(255,255,255,0.05);
    margin-left:7px;
    width:calc(100% - 14px);
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
.van-popper-avatar .logout[data-v-d7d33416]/*登出部分调整*/{
    height:42px;
    width:calc(100% - 0px);
    padding:0;
    margin-bottom:7px;
    color:rgba(255,255,255,0.8);
    background-color:rgba(0,0,0,0);
    border-radius:14px;
    transition:all 0.2s;
}
.van-popper-avatar .logout[data-v-d7d33416]:hover/*当光标在登出上时1*/{
    width:calc(100% - 14px);
    transition:all 0.2s;
}
.van-popper-avatar .logout span[data-v-d7d33416]:hover/*当光标在登出上时2*/{
    color:rgba(255,255,255,0.8);
    background:rgba(255,255,255,0.05);
    border-radius:14px;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
.van-popper .popper__arrow/*大会员二级菜单上的小三角*/{
    filter:brightness(0.2);
}
.vip-m .bubble-traditional .recommand .title/*大会员二级菜单标题字体*/{
    color:rgba(255,255,255,0.8)
}
.vip-m .bubble-traditional .recommand .bubble-col .item .recommand-link/*大会员二级菜单内容字体*/{
    color:rgba(255,255,255,0.8)
}
.vip-m .bubble-traditional .recommand .bubble-col .item img/*大会员二级菜单图片圆角适配*/{
    border-radius:14px;
}
.vip-m .bubble-traditional .renew-btn button/*大会员二级菜单按钮圆角适配*/{
    border-radius:14px;
}
.nav-user-center .t .num{/*消息小红点*/
    top:-2.5px;
}
.i-frame iframe[data-v-01c9e08c]/*消息二级菜单背景*/{
    background:rgba(51,51,51,1);
    border-radius:14px!important;
    box-shadow:0 10px 25px rgba(0,0,0,0.2);
}
.i-frame[data-v-01c9e08c]::before/*消息二级菜单顶部小三角*/{
    background-color:rgba(51,51,51,1);
}
/*↑下接“动态页顶栏消息二级菜单”*/
.i-frame[data-v-3f6279c7]::before{
    background-color:rgb(72, 72, 72);
}
.nav-user-center .nav-item-dynamic .i-frame/*动态二级菜单调整*/{
    padding:14px;
    height:calc(535px + 56px);
    width:382px;
}
.nav-user-center .nav-item-dynamic .i-frame iframe/*动态二级菜单调整*/{
    padding:0;
    height:calc(535px + 21px);
    border-radius:14px;
    box-shadow:0 10px 14px rgba(0,0,0,0.3);
}
/*↑下接“动态页顶栏动态二级菜单”*/
.van-popper-favorite .tab-item--active[data-v-70d07937]/*收藏二级菜单被选中的收藏夹标题*/{
    border-radius:14px 0px 0px 14px;
    margin-right:0px;
    margin-left:12px;
    padding:7px;
    padding-left:14px;
    box-shadow:5px 5px 20px rgba(0,161,214,0.3)
}
.van-popper-favorite .tab-item--normal[data-v-70d07937]/*未被选中的收藏夹标题*/{
    color:rgba(255,255,255,0.8);
}
.van-popper-favorite .tab-item--normal[data-v-70d07937]:hover/*未被选中的收藏夹标题*/{
    color:rgba(255,255,255,0.8);
    background:rgba(255,255,255,0.1);
    margin:7px 0px 3.5px 7px;
    padding:7px;
    padding-left:14px;
    border-radius:14px 0px 0px 14px;
    box-shadow:0 10px 20px rgba(0,0,0,0.1);
}
.van-popper-favorite .tab-item .num[data-v-70d07937]/*被选中的收藏夹计数器*/{
    color:rgba(255,255,255,0.4)
}
.van-popper-favorite .tab-item--active .num[data-v-70d07937]/*未被选中的收藏夹计数器*/{
    color:rgba(255,255,255,0.9)
}
.header-video-card[data-v-589fc0a0]/*视频信息卡片*/{
    background-color:rgba(255,255,255,0);
    margin:7px;
    margin-top:0px;
    border-radius:0px;
    width:calc(100% - 0px);
    padding:7px 0px;
    box-shadow:0 0px 0px rgba(0,0,0,0.1)
}
.header-video-card[data-v-589fc0a0]:hover/*视频信息卡片*/{
    background-color:rgba(255,255,255,0.1);
    margin:7px;
    margin-top:0px;
    border-radius:14px;
    width:calc(100% - 14px);
    padding:7px;
    box-shadow:0 10px 20px rgba(0,0,0,0.1)
}
.video-card-img .default-img[data-v-c05424d6]/*收藏夹内视频封面*/{
    border-radius:14px;
}
.duration-tag[data-v-c05424d6]/*收藏夹内视频时长计数*/{
    border-radius:7px;
    line-height:11px;
    font-size:4px;
    padding:2px 3.5px;
    bottom:6.5px;
    right:6.5px;
    backdrop-filter:blur(10px);
    background:rgba(0,0,0,0.2)
}
.header-video-card .video-info[data-v-589fc0a0]/*视频信息卡片文字位置调整*/{
    margin-left:7px;
}
.header-video-card .video-info .line-2[data-v-589fc0a0]/*视频信息卡片视频标题*/{
    color:rgba(255,255,255,0.8)
}
.header-video-card .video-info .info[data-v-589fc0a0]/*视频信息卡片视频作者*/{
    color:rgba(255,255,255,0.4)
}
.van-popper-favorite .play-all[data-v-70d07937]/*查看全部、播放全部按钮*/{
    background-color:rgba(255,255,255,0);
    border:0;
    border-radius:7px;
    margin:7px;
    line-height:31px;
    box-shadow:0 0px 0px rgba(0,0,0,0.2)
}
.van-popper-favorite .play-all[data-v-70d07937]:hover/*查看全部、播放全部按钮*/{
    background-color:rgba(255,255,255,0.1);
    border:0;
    border-radius:7px;
    margin:7px;
    line-height:31px;
    box-shadow:0 10px 20px rgba(0,0,0,0.1)
}
.van-popper-favorite .play-all.view[data-v-70d07937]/*查看全部、播放全部按钮文字*/{
    color:rgba(255,255,255,0.8);
}
.van-popover/*去除历史二级菜单标题颜色*/{
    color:rgba(255,255,255,0.6)
}
.van-popper-history .tab-header[data-v-7077b904]/*去除历史二级菜单分割线*/{
    border:0;
    background:rgba(255,255,255,0.1);
    border-radius:14px;
}
.video-card-img .default-img[data-v-c05424d6]/*历史视频封面*/{
    height:58px;
}
.header-video-card .bar[data-v-589fc0a0]/*视频进度条*/{
    height:3px;
    border-radius:1.5px;
    background-color:rgba(255,255,255,0.2)
}
.header-video-card .progress[data-v-589fc0a0]/*视频已看进度*/{
    border-radius:1.5px;
    height:3px;
}
}

@-moz-document domain("t.bilibili.com") {
/*动态页左列*/
.bili-dyn-my-info, .bili-dyn-my-info-...

Reviews

No reviews yet.