Skip to content

BilBili Tabs Modify(90.1%) by celading

Screenshot of BilBili Tabs Modify(90.1%)

Details

Authorcelading

LicenseMIT

Categorybilibili.com

Created

Updated

Size14 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

WDNMD why the website's experience is very suck, and the app-client logic/design is very suck too.
Because of this, I wrote a CSS to share with you.
Turn off the dark mode by default, you need to turn on the settings, and change the two dark mode to [domain name].
! Share/Modify twice/Reprint, please indicate the source and the author
————————————— maybe by Google Translate ↑ ———————————————
wdnmd为什么win板的用起来这么难用,客户端逻辑&设计也很菜。
正因如此,我写了个CSS分享给大家。
默认关闭深色模式,需要开启进入设置,将俩深色模式开启更改为【域名】即可。
!分享/二创/转载请注明来源与作者

优先适配我自己的Surface Pro4(2736x1824, 175%)和PC(1920x1080, 100%),
如有需求可以自行修改。

//emm 请手动开启网页全屏
//new 新增 深色直播样式
//new 动态深色模式
//new 动态样式
//emm 默认开启广告,让叔叔恰饱饱
//new 播放器深色模式
//fix 首页大grid和小双grid对齐
//new 主页新版Tab模式
//new 个人主页4K模式:因为作者吃土换了4K屏实在事买不起2K/5K/8K屏了

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name         BilBili Tabs Modify(未完成)
@version      20221128.05.25
@namespace    userstyles.world/user/celading
@description  wdnmd为什么win板的用起来这么难用,客户端设计也很菜
@author       celading
@license      MIT
==/UserStyle== */

/* ==UserStyle==
@name BiliBili Tabs Modify
@namespace bilibili.com
@version 0.1.1
@description modify website for Tabs easy use
@author cela
==/UserStyle-- */

@-moz-document url-prefix("bilibil.com") {
.user-name a {
    color: #222!important
}
}

@-moz-document domain("www.bilibili.com") {
/* 主页 */
body::-webkit-scrollbar {
    display: none;
}
body {
    background: #EFEFEF!important;
}
.bili-feed4 {
    background-color: #efefef;
}
.bili-feed4-layout {
    max-width: inherit!important;
}
/* 标题栏 */
.bili-header__banner {
    min-height: 2em!important;
    height: 6em!important;
    max-height: 10em!important;
}
.taper-line {
    height: 6.5em!important;
}
.bili-header .bili-header__banner .taper-line {
    background: linear-gradient(to top, #EFEFEF 10%, #1e7b68)!important;
}
/* 干掉烦人的标题栏动画 */
.bili-header__banner video {
    opacity: 0;
}
#bili-header-banner-img,
.header-banner__inner {
    opacity: 0;
}
.download-entry {
    opacity: 0;
}
.entry-title {
    border-right: 2px solid #EEEEEE33;
    padding: 1em;
}
.default-entry span {
    border: 2px solid #FFFFFF00;
    border-radius: 0.2em;
    padding: 0.7em;
    color: #FFF;
    font-size: 1.2em;
}
.default-entry span {
    width: 2em!important;
}
.default-entry:hover {
    animation: none!important;
}
.default-entry span:hover {
    border-bottom: 2px solid #FFFFFFAA;
}
/* 搜索栏定制 */
#nav-searchform,
.nav-search-content {
    border-radius: 2em!important;
}
.search-panel {
    margin-top: -1.3em!important;
    background: linear-gradient(to top, #FFF, #FAFAFA 93%, #FFFFFF00)!important;
    border: 0px!important;
}
.history {
    margin-top: 1.3em;
}

#biliMainHeader,
#danmukuBox,
.ad-report,
.video-page-special-card-small,
.right-entry-item--upload {
    display: none!important;
}
.slide-down,
.header-channel {
    opacity: 0 !important;
    z-index: 0;
}
.bili-header__channel {
    top: 5.5em;
    z-index: 1001;
    border-radius: 6em;
    border: 6em #000;
    left: 5em!important;
    width: 90%!important;
    max-width: 90%!important;
    position: fixed!important;
    display: none!important;
}
.right-channel-container {
    width: 82%;
}
.carousel-slide {
    padding: 0em!important;
}
.recommended-swipe-core {
    height: 102%;
}
.carousel-mask {
    height: 320%!important;
}
.carousel-tool span {
    font-size: 2em!important;
}
.carousel-footer .buttons {
    top: 81%!important;
}
.carousel-footer .buttons button,
.carousel-footer .buttons svg {
    width: 4.5em!important;
    height: 4.5em!important;
}
.carousel-footer .buttons svg {
    width: 3em;
}
.is-gray {
    height: 9em;
    padding: 1.3em
}
.is-gray li {
    margin-top: 0px!important;
    height: 2.3em!important;
}
.feed-roll-btn {
    left: 99.6%!important;
}
.feed-roll-btn .primary-btn {
    width: 4em!important;
}
.feed-roll-btn span {
    font-size: 1.3em!important;
}
.palette-button-wrap {
    position: absolute!important;
    left: 101%!important;
}
.palette-button-outer {
    bottom: 4em !important;
}
.top-btn {
    visibility: visible !important;
    opacity: 1 !important;
}

.container div,
.feed-floor-list div,
.bili-video-card .bili-video-card__wrap,
.bili-video-card__image--wrap,
.bili-video-card div {
    border-radius: 1em!important;
}
.bili-video-card__info {
    padding: 1em;
    margin-top: -0.6em!important;
}
.bili-video-card__cover img,
.bili-video-card__mask {
    height: 100%!important;
}
.bili-video-card__info--owner {
    color: #BBB;
    font-size: 1.3em;
}
.bili-video-card__info--ad {
    color: #ff3e3e!important;
}
.bili-live-card__wrap,
.bili-movie-card__wrap {
    height: 110%!important;
}
.bili-live-card__info--text,
.bili-movie-card__info {
    text-align: center;
}

.business-card {
    margin-top: 0.6em!important;
}

.business-card .__scale-wrap {
    background-color: #FEFEFE!important;
}

.recommended-container {
    left: 0%;
}
.container {
    grid-template-columns: repeat(5, 1fr) !important;
}
.feed-floor-list {
    grid-template-columns: repeat(6, 1fr) !important;
}
.bili-feed4-layout,
.bili-feed4 .bili-header .bili-header__channel {
    padding: 1em !important;
}
.bili-feed4-layout {
    background-color: #EFEFEF !important;
}
.feed2 {
    width: 98%;
}

div#28,
.manga-card-list {
    display: none !important;
}
.manga-card-body {
    grid-template-columns: repeat(13, 1fr) !important;
}

.feeds-bottom {
    grid-template-columns: repeat(8, 1fr) !important;
}

.left-container,
#bilibili-player {
    width: 100%;
}
#playerWrap {
    height: 62em;
}
#bilibili-player {
    height: 100%;
    min-height: 100%;
}
.switch-button {
    padding: 1.5em;
}
.switch-button:after {
    top: 0.3em!important;
}
.next-button .switch-button.on:after {
    left: 1.7em;
    top: 1.7em!important;
}
.next-button .switch-button,
.switch-button.on {
    border-radius: 3em!important;
}
.next-button .txt {
    font-size: 1.3em!important;
}

/* Modify with TMPMKY */
.btn-chanl {
    position: fixed;
    top: 0.7em;
    left: 46em;
    z-index: 1002;
    padding: 0.6em;
    /* writing-mode: tb-rl; */
    cursor: pointer;
    border-radius: 3em;
    color: #FFFFFFAA;
    font-size: 1.2em;
    border: 2px dotted #FFFFFF22;
}
.btn-chanl:hover {
    color: #FFFFFFFF;
    background-color: #FFFFFF11;
    border: 2px solid #FFFFFF66;
}
}

@-moz-document domain("www.bilibili.com") {
/* 通用播放器 取消该样式'URLs on this domain'改URL即可 */
.video-toolbar-v1,
.s_tag-v1,
.reply-box-textarea,
.reply-box,
.emoji-btn,
.at-btn {
    border: unset!important;
}
.bottom-line {
    border: 3px dotted #FFFFFF66!important;
}

.fixed-reply-box,
.reply-box-warp {
    border: unset;
}
}

@-moz-document domain("www.bilibili.com") {
/* 黑色播放器 取消该样式'URLs on this domain'改URL即可*/
.video-container-v1 {
    background-color: #000!important;
    padding: 2em;
}
#bilibili-player-placeholder,
.bpx-player-container {
    -webkit-box-shadow: 0 0 1px #111!important;
    box-shadow: 0 0 1px #111!important;
}

.video-info-v1,
.video-info-v1-ab,
.report-wrap-module,
.report-scroll-module,
.video-title,
.tit,
.rec-title,
.root-reply {
    color: #FEFEFE!important;
}
.reply-content,
.sub-reply-content,
.user-name {
    color: #EAEAEA!important;
}
.sub-user-name,
.hinter-msg {
    color: #C6C6C6!important;
}
.bpx-player-video-info,
.reply-tag-item {
    color: #A6A6A6!important;
}
.name a,
.info .title,
.desc-info .desc-v2,
.tag-link,
.tag-link svg,
use {
    color: #D6D6D6!important;
    fill: #D6D6D6!important;
    font-weight: 300!important;
}

.reply-tag-item,
.tag-link,
.activity-m-v1,
.reply-box-textarea,
.following-charge-btn {
    background: #3F3F3F!important;
}

.bpx-player-primary-area,
.bpx-player-sending-bar,
.bpx-player-sending-area,
.bpx-player-sending-area:before,
.reply-box {
    background: #333!important
}
.bpx-player-video-inputbar {
    background: #222!important;
}
.bili-comment.browser-pc {
    background: #111!important;
}
.default-btn {
    background: #3d4146!important;
    color: #EEE;
}

.inside-wrp,
.activity-m-v1 {
    border: unset!important;
    border-radius: 1em;
}
.inside-bg:before {
    background-image: linear-gradient(to right, #3F3F3F, #00000000 20%)!important;
}
}

@-moz-document domain("t.bilibili.com") {
/* 个人主页 取消该样式'URLs on this domain'改URL即可*/
body::-webkit-scrollbar {
    display: none;
}
.bili-topic-search__popover {
    border: unset!important;
}
/* 个人主页 */
body,
#app {
    background: #EEE;
}
.bili-header__banner {
    min-height: 2em!important;
    height: 3em!important;
    max-height: 8em!important;
}
.taper-line {
    height: 50em!important;
}
.mini-header {
    background: linear-gradient(to top, #EEE 3%, #FAFAFA);
}
/* 干掉烦人的标题栏动画 */
.bili-header__banner video {
    opacity: 0;
}
#bili-header-banner-img,
.header-banner__inner {
    opacity: 0;
}
.download-entry {
    opacity: 0;
}
.entry-title {
    border-right: 2px solid #33333333;
    padding: 1em;
}
.default-entry span {
    border: 2px solid #FFFFFF00;
    border-radius: 0.2em;
    padding: 0.7em;
    color: #333;
    font-size: 1.2em;
}
.default-entry span {
    width: 2em!important;
}
.default-entry:hover {
    animation: none!important;
}
.default-entry span:hover {
    border-bottom: 2px solid #333333AA;
}
/* 搜索栏定制 */
#nav-searchform,
.nav-search-content,
.nav-search-btn {
    border-radius: 3em!important;
}
.search-panel {
    margin-top: -1.3em!important;
    background: linear-gradient(to top, #FFF, #FAFAFA 93%, #FFFFFF00)!important;
    border: 0px!important;
}

/* Start */
.bili-dyn-home--member {
    justify-content: unset;
    display: inline-flex;
    width: 86%;
    padding: 1em;
}
aside.left {
    width: 250px;
}
aside.right {
    width: 250px!important;
    position: absolute;
    top: 485px;
}
main {
    width: 100%
}
.bili-rich-text {
    font-size: 15px;
    letter-spacing: 1.5px;
}
.bili-dyn-content__orig {
    width: 34em;
}
.bili-dyn-list__items {
    column-count: 2;
    column-gap: 28px;
}
.bili-dyn-list__item {
    width: 43.5%;
    height: 100%;
}
aside.right {
    width: 319px;
}
}

@-moz-document url("t.bilibili.com") {
/* 个人主页:4K屏适配 取消该样式'URLs on this domain'改URL即可*/
.bili-dyn-list__items {
    column-count: 3!important;
    column-gap: 28px!important;
}
.bili-dyn-item {
    min-width: 715px!important;
}
}

@-moz-document url("t.bilibili.com") {
/* 深色个人主页 取消该样式'URLs on this domain'改URL即可*/
body,
#app {
    background: #2a2a2a!important;
}

/* 搜索栏定制 */
#nav-searchform,
.nav-search-content,
.nav-search-input,
.nav-search-input:active,
.nav-search-input:focus {
    color: #EEE!important;
    border-radius: 2em!important;
    background: #2a2a2a!important;
    border: unset!important;
}
.search-panel {
    margin-top: -1.3em!important;
    background: linear-gradient(to top, #444, #444 93%, #22222200)!important;
    border: unset!important;
    color: #CCC;
}
.history {
...

Reviews

No reviews yet.