b站界面简化 by xiaolongmr

Details

Authorxiaolongmr

LicenseNo License

Categoryhttps://www.bilibili.com

Created2 years, 8 months ago

Updated1 month, 2 weeks ago

Size52 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

[点我留言](https://blog.z-l.top）

👋概括：

主要简化了B站视频播放页的一些自己不需要的功能，去除了首页的长富广告，自定义为其他图片，播放页侧边栏将up主信息更改为博客类型的垂直排列，头像增加hover效果，等其他小修改。样式不定时更新，具体请安装使用查看变化和修改！

Notes

🙋 ♂️ 提示：

会存在bug，本人只是业余前端菜鸟，上传备份自用的，不晓得会不会有人碰巧用到。

✨其他：

在线留言：点我去留言或者下方邮箱我可以即使收到提醒
我的邮箱：xhcy1116@qq.com 如果用到并发现问题，很高兴能提出问题和意见，我会尽力解决

建议搭配油猴【玩的嗨】工具箱脚本点我去安装

安装后可： 🎉 bilibili视频封面获取;🎉 bilibili视频下载（已支持分P下载）

📑 更新日志

2024/10/26

添加专注模式，一键打开后侧边栏推荐视频会消失

2024/10/20

添加自定义功能，学习自：https://github.com/xiaofeiTM233/bilibili-newsfeed-theme 感谢大佬

2023/3/11

屏蔽使用广告插件导致主页顶端显示红色提示

2023/3/5

首页推荐视频改为五列两行[点我查看效果]（https://api.onedrive.com/v1.0/shares/s!Aqm8bsHMdZ72ghzHZZjnDnBun6oS/root/content）顶部导航栏常驻

2023/2/5

收到使用本样式的小伙伴“TP-LINK”的反馈，评论区可点击链接蓝色字体太小，现已修正增加两个像素改为14px。点击查看对比效果

2022/5/4

推荐安装油猴插件，并安装【玩的嗨】工具箱点我去安装
查看效果点我

2022/5/2

鼠标移入up主头像显示Up信息修正因背景图片导致文字辨识度低的问题
视频播放页收藏按钮点击时，收藏栏展开3列自定义背景图片

2022/4/30

修正了一个已知小Bug（已关注不居中的后续问题）

2022/4/21

简化了一下B站登录页面点我查看对比图
可能其他页面会出现bug，后续会修正

2022/4/17

将点赞、投币、收藏等加上的颜色去除，恢复辨识度

2022/4/8

B站修改了部分位置的小组件的样式属性名称，本修改样式现存在bug，目前正在修改（2022/04/08）

2022/3/27

悼念飞机逝世的同胞网站样式添加整体变灰

2022/2/12

修复搜索页面内容背景透明造成的文字辨识度低，并添加圆角
更换背景冰墩墩，来自站酷大佬<a target=blank rel=noopener href=“https://www.zcool.com.cn/work/ZNDAzMzU3NzI=.html”>WonderWong
首页视频卡片增加鼠标移入效果效果展示

2022/2/2

视频播放页收藏视频默认展开一列改为三列
去除了无用的css样式

2022/2/1

优化原来视频播放器的彩虹猫进度条
增加视频默认进度条的已播放的彩虹渐变
优化视频播放页右上角新年灯笼（去除白色背景）
增加视频播放器下栏的一些样式
去除首页[推广模块]算是优化吧，也是去除广告，因为实在没用
新增一些其他的小的修改
使用了小歪大佬提供的图片api做背景

2022/1/26

移除视频播放页右侧up主信息下方广告
居中对齐顶部导航栏
新增一些其他的小的修改

2022/1/25

修改了一些小问题
增加了鼠标移入侧栏up主头像区域触发背景gif特效
增加视频播放页右上角新年灯笼
新增一键三联图标颜色
增加其他的某些小变化

2022/1/24

第一个版本
鸣谢时尚的大佬 Hakadao（引用了大佬的弹出提示现已关闭）

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界面简化-2024
@version      20241026.10.22
@namespace    userstyles.world/user/xiaolongmr
@description  主要简化了B站视频播放页的一些自己不需要的功能，去除了首页的长富广告，自定义为其他图片，播放页侧边栏将up主信息更改为博客类型的垂直排列，头像增加hover效果，等其他小修改。样式不定时更新，具体请安装使用查看变化和修改！
@author       xiaolongmr (https://blog.z-l.top)
@homepageURL	https://userstyles.world/style/3920/b
@supportURL		https://blog.z-l.top/posts/4114.html
@license		MIT
@preprocessor	uso

[![Install directly with Stylus](https://img.shields.io/badge/Install%20directly%20with-Stylus-00adad.svg)](MY.USER.CSS)
@advanced color T_THEME_COLOR_NEW "选择主题色" #00a1d6

@advanced dropdown T_DIV_BG "选择背景" {
	BG_1 "win11" <<<EOT url(https://www.sharezm.com/assets/bg/bg1.jpg) EOT;
	BG_2 "必应" <<<EOT url(https://api.vvhan.com/api/bing) EOT;
	BG_3 "二次元" <<<EOT url(https://api.vvhan.com/api/wallpaper/acg) EOT;
	BG_4 "上岸" <<<EOT url(https://cdn.h5ds.com/space/files/600972551685382144/20241013/769604120287838208.png) EOT;
	BG_NONE "无背景" <<<EOT "" EOT;
	BG_DIV "自定义" <<<EOT var(--自定义背景) EOT;
}

@advanced text T_CUSTOM_BG "自定义背景URL" ""

@var text FREEIMG "免费图床" www.helloimg.com

@advanced dropdown LOGO_COLOR "顶栏 LOGO 样式" {
	LOGO_COLOR_THEME "跟随主题" <<<EOT
		.bili-header .left-entry__title .mini-header__logo path {
    fill:  var(--www_z-l_top-theme-color)!important;
		}
	EOT;
	LOGO_COLOR_BLUE "蓝色" <<<EOT
		.bili-header .left-entry__title .mini-header__logo path {
    fill: #00a1d6;
		}
	EOT;
	LOGO_COLOR_PINK "粉色" <<<EOT
		.bili-header .left-entry__title .mini-header__logo path {
    fill: #fb7299!important;
		}
	EOT;
}


@advanced dropdown FW_BANNER "屏蔽广告" {
	ON "✅开启" <<<EOT
	:is(.feed-card, .bili-video-card):has(.bili-video-card__info--ad),
#loli, 
.gg-floor-module, 
.adpos, 
.ad-f, 
.ad,
.video-top-ad,
.video-bottom-ad,
.bilibili-player-promote-wrap,
#bannerAd,
#slide_ad,
.r-con .ad-report
,.slide-ad,
.vcd,.ad-report,
.activity-m-v1{
    display: none!important;
}
	EOT;
	OFF "❌关闭" <<<EOT
	EOT;
}

@advanced dropdown FW_FRAME "作者头像框" {
	ON "✅开启" <<<EOT
	EOT;
	OFF "❌关闭" <<<EOT
		.bili-avatar[style="width: 48px;height:48px;transform: translate(0px, 0px);"]:after{
			display:none;
		}
	EOT;
}



@advanced dropdown L_BLUR "播放页毛玻璃" {
	OFF "❌关闭" <<<EOT
		EOT;
	ON "✅开启" <<<EOT
		.mini-header,
		.left-container,
.right-container,
.bili-header .search-panel{
			backdrop-filter: blur(20px)!important;
		}
	EOT;
}

@advanced dropdown L_STUDY "专注模式（摆烂了，能用就行,本来想做熄灯模式的）" {
	OFF "❌关闭" <<<EOT
		EOT;
	ON "✅开启" <<<EOT

 .right-container{
display:none!important;
    transition: filter 0.3s ease;
    }
.left-container {
    width: auto;
}
	EOT;
}
@advanced dropdown GPUS "开启硬件加速 (有bug)" {
	OFF "❌关闭" <<<EOT
	EOT;
	ON "✅开启" <<<EOT
		* {
			transform: translateZ(0);
		}
	EOT;
}

==/UserStyle== */
@-moz-document domain("www.bilibili.com"),
regexp("^https?://www\\.bilibili\\.com/?((index\\.html)|(\\?.*))?"),
regexp("https?\\:\\/\\/(www\\.)?bilibili\\.[a-z]{2,3}(\\.[a-z]{2,3})?\\/video.*") {
/*     root */
    /*[[LOGO_COLOR]]*/
    /*[[FW_BANNER]]*/
    /*[[FW_FRAME]]*/
    /*[[GPUS]]*/
    /*[[L_BLUR]]*/
    /*[[L_STUDY]]*/
    /*[[LOGO_COLOR]]*/
    /*  毛玻璃 */
    .bili-header .header-upload-entry {
        background: var(--www_z-l_top-theme-color);
    }
    /*============== 【用户自定义】 ============= */
    :root {
        /* 首页广告默认关闭，删去关即可开启广告（广告被改为了彩蛋） */
        --首页视频标题大小: 15px;
    }
    /*============== 【用户自定义结束】 ============= */
    /* 添加时间：2022年2月5号 */
    :root {
        --warp-bgcolor: #ffffffc9;
        /* 视频页卡片背景颜色 */
        --bg1_float: #f4fffd;
        /*   首页滚动时 顶部黏贴的导航栏的背景，和右边返回顶部等的背景   */
        --header_l-con_r-con_hoverbg: -1px 3px 15px 8px #84848494;
        /* 	顶栏 视频左 视频右 鼠标移入背景阴影效果 */
        --header-bg: #ffffffc9 border-box;
        /* 	顶栏背景 */
        --body-bg: /*[[T_DIV_BG]]*/;
        --自定义背景: url(/*[[T_CUSTOM_BG]]*/);
        /*         --body-bg: url(https://cdn.h5ds.com/space/files/600972551685382144/20241013/769604120287838208.png); */
        /* 	网页背景图片 */
        --avatar: url(https://i0.hdslb.com/bfs/garb/item/516ecdf2d495a62f1bac31497c831b711823140c.webp@144w_144h.webp);
        /* 	头像挂件 */
        --bg1: var(--Wh0);
        --Wh0: #fff0;
        --首页广告图片: url(https://api.suyanw.cn/api/tgbj.php);
        --activity-theme-default: rgb(0, 179, 255);
        /*主题颜色 */
        --www_z-l_top-theme-color: /*[[T_THEME_COLOR_NEW]]*/;
        --www_z-l_top-theme-color-85: /*[[T_THEME_COLOR_NEW]]*/d6;
        --www_z-l_top-theme-color-50: /*[[T_THEME_COLOR_NEW]]*/80;
        --www_z-l_top-theme-color-40: /*[[T_THEME_COLOR_NEW]]*/66;
        --www_z-l_top-theme-color-30: /*[[T_THEME_COLOR_NEW]]*/4d;
        --www_z-l_top-theme-color-20: /*[[T_THEME_COLOR_NEW]]*/33;
        /* 下面是替换B站官方root */
        --Lb5: var(--www_z-l_top-theme-color);
    }
    /*============== ✨✨【全局鼠标样式】✨✨添加时间：2022年2月1号 ============= */
    body,
    a {
        color: #4d4d4d;
        font-family: Helvetica Neue, Microsoft Yahei;
        /*  浏览器鼠标样式插件https://custom-cursor.com/en/how-to-use/chrome */
        cursor: url(https://gcore.jsdelivr.net/gh/caibhh/CDN/img/blog/default.cur), default;
    }
    /*============== 💝💝【悼念飞机逝世的同胞】 💝💝添加时间：2022年03月27号 ============= */
    /*     filter: grayscale(100%); 数值越接近1就越没有颜色  */
    /* html {
    filter: gray;
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);  
    } */
    html.gray {
        /*  正常日子用0% */
        filter: grayscale(10%);
    }
    /*  染色效果添加时间：2022年12月3号    */
    .recommended-swipe-body .carousel-area {
        transition: .5s filter;
        filter: sepia(100%) saturate(200%) hue-rotate(160deg);
    }
}



@-moz-document url-prefix("https://www.bilibili.com/video") {
    /*============== 【播放页部分】================*/
    /*=============== ✨✨【滚动条部分】✨✨ 添加时间：2022年1月28号 ==============*/
    /* 优化记录📑 */
    /*===2022/3/15:在代码9里面可以自己将提示消息自己选择是否展示，默认关闭
=====2022/：
*/
    html {
        background-color: transparent;
    }

    /* body {
	background-image: none !important;
} */
    #app {
        /* app里面的背景颜色设置为不透明灰色当作遮罩 */
        background-color: #fff0;
        background-repeat: no-repeat;
        background-size: cover;

        &:before {
            content: "";
            position: fixed;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: -100;

            /* 🔰此处填写需要设置B站背景的图片地址url 
        1️⃣支持图片api  例如：https://api.ixiaowai.cn/api/api.php  
        2️⃣支持图片地址 例如：https://img.zcool.cn/community/01474b5db9a2b5a8012163ba3f6275.png
        */
            background-image: var(--body-bg) !important;
            background-position: center bottom;
            background-size: cover;
            background-attachment: fixed;
            background-repeat: no-repeat;
        }
    }



    #header-v {
        /* app里面的背景颜色设置为不透明灰色当作遮罩 */
        background-color: #fff0;
        background-repeat: no-repeat;
        background-size: cover;
    }
    /* 视频页面内容主体部分 */
    .v-wrap {
        /* 内容部分使其背景颜色变透明 */
        background-color: #ffefef24;
        transition: all .3s;
    }

    /* 视频页面内容左部分和右部分 */
    .left-container,
    .right-container,
    .comment-send-lite {
        /* 内容左右部分背景变透明 */
        /* background-color: #ffffffd9; */
        background-color: var(--warp-bgcolor);
        margin: 20px;
        margin-right: 5px;
        border-radius: 10px;
        padding: 2em;
        box-shadow: 0 1px 20px 0 var(--www_z-l_top-theme-color-20);
        transition: all .3s;
    }
    .bb-comment,
    .comment-bilibili-fold {
        font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
        font-size: 0;
        zoom: 1;
        min-height: 100px;
        background: #fff0;
    }
    /* 视频页面做部分背景添加灯笼效果 */
    .l-con {
        background-image: url(https://xiaolongmr.github.io/test/img/gif1.gif);
        background-repeat: no-repeat;
        background-size: 110px;
        background-position: top right;
    }
    /* 视频标题添加效果 */
    .video-title {
        transition: all 0.5s;

        &:hover {
            color: var(--www_z-l_top-theme-color) !important;
            font-size: 22px !important;
            cursor: pointer;

            &:after {
                content: " 🎉";
                vertical-align: middle;
                transition: all 0.3s;
                font-size: 22px !important;
            }
        }
    }


    /* 隐藏up主侧边栏 */
    /* .v-wrap .r-con {
    display: none;
} */
    /* 鼠标移入播放页up主头像展示背景gif */
    .r-con:hover #v_upinfo::after {
        margin: -214px;
        /* display: none; */
        content: '';
        /* position: absolute; */
        top: 0;
        left: 0;
        /*     padding-top: -148px !important; */
        width: 100%;
        height: 241px;
        background: url(https://gcore.jsdelivr.net/npm/typecho_joe_theme@4.4.5/assets/img/snow.gif);
        background-size: cover;
    }
    /* 视频页面内容左部分和右部分鼠标放入效果 */
    .l-con:hover,
    .r-con:hover,
    .bili-header .bili-header__bar:hover,
    .comment-send-lite:hover {
        box-shadow: var(--header_l-con_r-con_hoverbg);
        transition: all .3s;
    }
    /* 进度条2022年1月2 */
    /* .bui-thumb,.bui-thumb:hover{
    background-color: #f8ffffcc;
    background-image: url(https://s3.bmp.ovh/imgs/2022/01/810086776b036b56.gif);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center left;
    width: 90px;
    height: 25px;
} */
    /* 测试使用 */
    /* * {
 border: 1px solid red !important;
} */
    /* .r-con .up-info{
     display: flex;

} */
    /* up主信息居中 */
    .up-info_right {
        text-align: center;
    }
    .report-scroll-module,
    .up-info--right {
        box-sizing: border-box;
        /*     height: ...

Reviews

No reviews yet.