b站界面简化 by xiaolongmr

Details

Authorxiaolongmr

LicenseNo License

Categoryhttps://www.bilibili.com

Created2 years, 1 month ago

Updated2 months, 2 weeks ago

Size48 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

点我留言

👋概括：

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

Notes

🙋‍♂️提示：

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

✨其他：

我的邮箱：xhcy1116@qq.com 如果有幸用到并发现问题，很高兴能提出问题和意见，我会尽力解决

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

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

📑 更新日志

2023/3/11

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

2023/3/5

首页推荐视频改为五列两行点我查看效果顶部导航栏常驻

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界面简化2023（2024年重新修改）
@version      20230928.07.66
@namespace    userstyles.world/user/xiaolongmr
@description  ## 🕒 最后更新： 以上方更新于时间为准
### 建议搭配油猴【玩的嗨】工具箱脚本 <a target=_blank rel=noopener href=“https://greasyfork.org/zh-CN/scripts/384538”>点我去安装</a> 
#### 安装后可： 🎉 bilibili视频封面获取; 🎉 bilibili视频下载（已支持分P下载）
### 👋概括：
主要简化了B站视频播放页的一些自己不需要的功能，去除了首页的长富广告，自定义为其他图片，播放页侧边栏将up主信息更改为博客类型的垂直排列，头像增加hover效果，等其他小修改。样式不定时更新，具体请安装使用查看变化和修改！
### 🙋‍♂️提示：
会存在bug，本人只是业余前端菜鸟，上传备份自用的，不晓得会不会有人碰巧用到。

### ✍待添加：
1️⃣：用户自定义内容(功能）
2️⃣：其他B站页面的适配，和简化（暂时大部分只对视频播放页进行修饰，原因这个页面最经常使用）
3️⃣：代码分类太乱，抽空整理

### ✨其他：
我的邮箱：xhcy1116@扣扣.com 如果有幸用到并发现问题，很高兴能提出问题和意见，我会尽力解决
@author       xiaolongmr
@license      No License
==/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.*") {



    /*============== 【用户自定义】 ============= */
    /* 添加时间：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: url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/scene/6dd3e413b4fc02ea50aaf9654a8dbca0_preview.jpg);
        --body-bg: url(var(--activity-bg-custom));

        /* 	--header-bg: url(bkgdImg); */
        /* 	网页背景图片 */
        --avatar: url(https://i0.hdslb.com/bfs/garb/item/516ecdf2d495a62f1bac31497c831b711823140c.webp@144w_144h.webp);
        /* 	头像挂件 */
        --bg1: var(--Wh0);
        --Wh0: #fff;
    }

    /*============== ✨✨【全局鼠标样式】✨✨添加时间：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 domain("account.bilibili.com"),
domain("search.bilibili.com"),
domain("bilibili.com"),
regexp("^https?://www\\.bilibili\\.com/?((index\\.html)|(\\?.*))?") {
    /*============== 【播放页部分】================*/
    /*=============== ✨✨【滚动条部分】✨✨ 添加时间：2022年1月28号 ==============*/
    /* 优化记录📑 */
    /*===2022/3/15:在代码9里面可以自己将提示消息自己选择是否展示，默认关闭
=====2022/：
*/
    ::-webkit-scrollbar/*  ==整个滚动条== */
    {
        width: 10px;
        /* 竖着时候滚动条的宽度 */
        height: 10px;
        /* 横着时候滚动条的宽度 */
        background-color: #F5F5F5;
    }

    ::-webkit-scrollbar-track/* ==滚动条轨道== */
    {
        background-color: #fff;
        /*屏幕滚动条背景颜色 */
        border-left: 1px solid #eaeaea;
        /*  滚动条背景颜色的边框，只需要左边框即可 */
    }

    ::-webkit-scrollbar-corner {
        /* ==当同时有垂直滚动条和水平滚动条时交汇的部分== */
        background-color: #A9C9FF;
    }

    ::-webkit-scrollbar-thumb/* ==滚动条上的滚动滑块== */
    {
        background-color: #9cd3f7;
        /* 滚动条正常显示的颜色 */
        background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .4) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .4) 50%, rgba(255, 255, 255, .4) 75%, transparent 75%, transparent);
        border-radius: 5px;
    }

    ::-webkit-scrollbar-thumb:hover {
        background-color: #39b0ff;
        /* 鼠标放到滚动条上的颜色变化 */
    }

    ::-webkit-scrollbar-thumb:active {
        background-color: #fb7299;
        /* 鼠标点击拖拽滚动条时候的颜色变化 */
    }
    ::-webkit-scrollbar-track-piece {
        background-color: #ffffff;
    }
    /*============== 	🎯【END】🎯 ================*/
    /*=============== ✨✨【改变B站背景图片】✨✨ 添加时间：2022年1月24号 ==============*/
    /* 优化记录📑 */
    /*===2022/02/01：摒弃原来单一一张的背景图片，更换使用小歪大佬提供的免费随机图片api
/*===2023/01/01：兔年了，更换站酷大佬画的新年贺图
=====2022/03/26
*/
    html {
        background-color: transparent;
    }

    /* body {
	background-image: none !important;
} */
    #app: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;
    }

    /*============== 	🎯【END】🎯 ================*/
    #header-v3,
    #app {
        /* 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);
/*         backdrop-filter: blur(.5rem); 加模糊有bug */ 
        margin: 20px;
        margin-right: 5px;
        border-radius: 10px;
        padding: 2em;
        box-shadow: 0 1px 20px 0 rgb(211 234 255);
        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;
    }
    /* 视频标题添加效果 */
    .tit {
        transition: all .5s;
    }
    .tit:hover {
        color: hotpink;
        font-size: 20px;
        cursor: pointer;
    }

    .tit:hover:after {
        content: " 🎉";
        vertical-align: middle;
        transition: all .3s;
    }

    /* 隐藏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: 158px; */
        /*     padding-top: 15px; */
        /*         padding-bottom: 12px; */
        /*  display: flex; */
    }
    .up-info-container,
    .up-info--right {
        box-sizing: border-box;
        height: 200px!important;
        padding-top: 15px;
        padding-bottom: 12px;
        display: flex;
        align-content: center;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
        text-align: center;
    }
    .up-detail .up-detail-top {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .up-info-container .up-info_right {
        width: 256px;
        /*     height: 96px; */
        /*     margin-left: 13px; */
        /* float: left; */
        padding-top: 40px;
    }
    /*     up主头像居中2023、6、28  */
    .up-info-container {
        /*     整个头像部分，原来子集有左边和右边     */
        box-sizing: border-box;
        height: 153px;
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    .up-detail .up-description {
        /*     up主自我介绍 2023、6、28 */
        margin-top: 2px;
        font-size: 13px;
        line-height: 16px!important;
        height: 32px!important;
        color: #9499A0;
        color: var(--text3);
        /* overflow: hidden; */
        text-overflow: ellipsis;
        white-space: break-spaces!important;
    }
    /* up主头像旋转 */
    .r-con .report-scroll-module .u-face {
        /* float: left; */
        width: 48px;
        /*      transform: scale(1.5); */
        transition: all .5s;
    }
    .r-con .report-scroll-module .u-face:hover {
        transform: rotate(360deg) scale(1.5);
    }

    .r-con .report-scroll-module .u-face .bili-avatar {
        width: 60px !important;
        height: 60px !important;
    ...

Reviews

No reviews yet.