Skip to content

Bilibili 哔哩哔哩 Nekopara by tsuk1ko

Screenshot of Bilibili 哔哩哔哩 Nekopara

Details

Authortsuk1ko

LicenseCC BY-NC

Categorybilibili

Created

Updated

Size9.3 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Bilibili ネコパラ 萌化样式

样式原地址:https://userstyles.org/styles/136957
因 userstyles.org 使用体验挺辣鸡,因此转为使用 userstyles.world

该样式已完结,目前为附加形式的样式,最明显的改动就只是换了个背景而已,顺带去了一些广告,不再对b站原有样式进行大规模改造
除非出现重大问题,该样式不会再更新

※ 请在 Stylus 插件选项中开启“通过 HTML[stylus-iframe] 确定 iframe 父页面”,可解决本样式的背景在某些 iframe 当中应用的问题

Notes

2021-12-24

适配新版(内测)首页

2021-12-11

修复视频播放页面背景不可用问题

Source code

/* ==UserStyle==
@name         Bilibili 哔哩哔哩 Nekopara
@version      2.3.4
@namespace    userstyles.world/user/tsuk1ko
@description  **Bilibili ネコパラ 萌化样式**

样式原地址:<https://userstyles.org/styles/136957>
因 userstyles.org 使用体验比较辣鸡,转为使用 userstyles.world

该样式已完结,目前为附加形式的样式,最明显的改动就只是换了个背景而已,顺带去了一些广告,不再对b站原有样式进行大规模改造
除非出现重大问题,该样式不会再更新

※ 请在 Stylus 插件选项中开启“**通过 HTML[stylus-iframe] 确定 iframe 父页面**”,可解决本样式的背景在某些 iframe 当中应用的问题
@author       tsuk1ko
@license      CC BY-NC
==/UserStyle== */
@-moz-document domain("bilibili.com") {
	/* 前置资源及样式 */
	/******************************
	 * Google Design              *
	 * https://material.io/icons/ *
	 ******************************/
	@font-face {
		font-family: 'Material Icons';
		font-style: normal;
		font-weight: normal;
		src: url(https://fonts.gstatic.com/s/materialicons/v129/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
	}
	/* 滚动条 */
	::-webkit-scrollbar {
		width: 6px;
		height: 6px;
		background-color: #F5F5F5;
	}
	::-webkit-scrollbar-track {
		background-color: #F5F5F5;
	}
	::-webkit-scrollbar-thumb {
		background-color: #999;
	}
	::-webkit-scrollbar-thumb:hover {
		background-color: #777;
	}
	::-webkit-scrollbar-thumb:active {
		background-color: #555;
	}
}

@-moz-document url-prefix("https://www.bilibili.com/video/"),
url-prefix("https://www.bilibili.com/account/dynamic"),
url-prefix("https://www.bilibili.com/watchlater/"),
url-prefix("https://www.bilibili.com/medialist/play/watchlater/"),
url-prefix("https://www.bilibili.com/bangumi/play/"), url-prefix("https://www.bilibili.com/opus/"),
domain("search.bilibili.com"),
domain("message.bilibili.com"),
domain("t.bilibili.com"),
domain("space.bilibili.com"),
regexp("^https?://www.bilibili.com/?((index.html)|(\\?.*))?"),
regexp("^https?://www.bilibili.com/[^/]+(/?|/(\\?.*)?)"),
regexp("^https?://www.bilibili.com/(v|account)/.*"),
regexp("^https?://bangumi.bilibili.com/.*/play#.*") {
	/* 通用 */
	html:not([stylus-iframe]) body {
		background-image: none !important
	}
	html:not([stylus-iframe]) body:before {
		content: "";
		position: fixed;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: -100;
		background-image: url(https://res.lolicon.app/bilibili/bg.png);
		background-position: center bottom;
		background-size: cover;
		background-attachment: fixed;
		background-repeat: no-repeat;
	}
	@media screen and (max-width: 1650px) {
		html:not([stylus-iframe]) body:before {
			background-image: url(https://res.lolicon.app/bilibili/bg_small.png);
		}
	}
	.footer-wrp,
	.international-footer {
		background-color: transparent !important;
	}
	/* 部分卡片背景色处理 */
	.spread-module,
	.manga-spread-module {
		background-color: #fff;
		border-radius: 4px;
	}
	.history-record .r-info {
		background-color: transparent;
	}
	/* 屏蔽已经失效的 lolivector */
	#loli,
	/* 一般去广告 */
	.bili-dyn-ads,
	.vcd,
	.eva-banner,
	.gg-floor-module,
	.adpos,
	.ad-f,
	.ad,
	.video-top-ad,
	.video-bottom-ad,
	.bilibili-player-promote-wrap,
	.video-page-game-card-small,
	#bannerAd,
	#slide_ad {
		display: none !important;
	}
}

@-moz-document regexp("^https?://www.bilibili.com/?((index.html)|(\\?.*))?") {
	/* 首页 */
	body {
		background-color: transparent;
	}
	.extension + div {
		position: relative;
	}
	.online:after {
		position: absolute;
		left: 0;
		right: 0;
		top: 40px;
		content: url(https://res.lolicon.app/bilibili/index_neko.png);
		visibility: visible;
		text-align: center;
	}
	body:after {
		content: '';
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		width: 1770px;
		margin: auto;
		background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, .9) 100px, rgba(255, 255, 255, .5) calc(100% - 100px), transparent);
		z-index: -1;
	}
	@media screen and (max-width: 1870px) {
		body:after {
			width: 1554px;
		}
	}
	@media screen and (max-width: 1654px) {
		body:after {
			width: 1338px;
		}
	}
	/* 首页左侧按钮不要花里胡哨的晃眼睛 */
	.international-home > a {
		box-shadow: none;
	}
	/* 换一换按钮 */
	.rcmd-box-wrap .change-btn:not(:hover) {
		background-color: #fff;
	}
	/* 新版首页 */
	#i_cecream,
	/* 新版首页视频卡片 */
	.__scale-wrap {
		background-color: transparent !important;
	}
	/* 旧版首页推广 */
	.ext-box > div[data-loc-id="34"]:nth-of-type(1),
	.ext-box > div[data-loc-id="34"]:nth-of-type(3),
	/* 新版首页推广 */
	.eva-extension-area[data-loc-id="34"] .bili-video-card:nth-of-type(1),
	.eva-extension-area[data-loc-id="34"] .bili-video-card:nth-of-type(3),
	.eva-extension-area[data-loc-id="34"] .bili-video-card:nth-of-type(6),
	/* 一般去广告 */
	.first-screen .operate-card,
	.app-download,
	.mascot,
	.banner-card {
		display: none;
	}
}

@-moz-document url-prefix("https://www.bilibili.com/watchlater/#/") {
	/* 稍后再看 */
	body {
		background-color: transparent;
	}
	.av-item.clearfix .key {
		z-index: 100;
		width: 44px !important;
		color: #fff !important;
		background-color: #4879bd;
		border-radius: 13px;
		box-shadow: rgba(0, 0, 0, 0.4) 0 0 3px 0;
		top: -10px !important;
		left: 20px !important;
		padding: 2px 0;
	}
}

@-moz-document url-prefix("https://www.bilibili.com/video/"),
url-prefix("https://www.bilibili.com/watchlater/#/"),
url-prefix("https://www.bilibili.com/medialist/play/watchlater/"),
url-prefix("https://www.bilibili.com/bangumi/play/"),
regexp("^https?://bangumi.bilibili.com/(.*)/play#.*") {
	/* 视频播放界面 */
	html:not([stylus-iframe]) body:before {
		opacity: .2;
	}
	html:not([stylus-iframe]) body:has(.error-body):before {
		opacity: 1;
	}
	body,
	#app,
	.v-wrap {
		background-color: transparent;
	}
	#activity_vote {
		border-radius: 6px;
	}
	/* 评论 */
	.bb-comment,
	.bili-comment {
		background-color: transparent !important;
	}
	.reply-box.fixed-box {
		border-radius: 8px 8px 0 0;
		padding-right: 15px !important;
		--border-style: .5px solid var(--graph_bg_thick);
		border-left: var(--border-style);
		border-right: var(--border-style);
	}
	.svg-icon.user-level rect.st0,
	.svg-icon.sub-user-level rect.st0 {
		fill: none;
	}
	/* 弹幕发送按钮动画 */
	.bpx-player-dm-btn-send.bui-button:hover .bui-area,
	.bilibili-player-video-btn-send.bui-button:hover {
		animation: btnWordsFadeInOut 0.6s;
	}
	.bpx-player-dm-btn-send.bui-button:hover:after,
	.bilibili-player-video-btn-send.bui-button:hover:after {
		font-family: 'Material Icons';
		content: "\e163";
		font-size: 20px;
		position: absolute;
		right: 80px;
		top: calc(50% - 10px);
		color: #FFF;
		line-height: 1;
		transition: all 0.3s;
		animation: danmakuSendBtnIcon 0.6s;
		animation-fill-mode: forwards;
	}
	.bilibili-player-video-btn-send.bpui-button.button.bpui-state-disabled:hover {
		animation: none !important;
	}
	.bilibili-player-video-btn-send.bpui-button.button.bpui-state-disabled:hover:after {
		animation: none !important;
	}
	/* 发表评论按钮动画 */
	.comment-submit {
		transition: all 0.3s !important;
		overflow: hidden;
	}
	.comment-submit:hover {
		animation: btnWordsFadeInOut 0.5s;
	}
	.comment-submit:hover:before {
		animation: commentSendBtnIcon 0.5s;
	}
	.comment-submit:before {
		font-family: 'Material Icons';
		content: "\e163";
		font-size: 30px;
		position: absolute;
		left: -57px;
		top: calc(50% - 15px);
		color: #FFF;
		line-height: 1;
		transition: all 0.3s;
		z-index: 10;
	}
	@keyframes danmakuSendBtnIcon {
		0% {
			right: 80px;
			opacity: 0;
		}
		40% {
			right: 36px;
			opacity: 1;
		}
		60% {
			right: 18px;
			opacity: 1;
		}
		100% {
			right: -26px;
			opacity: 0;
		}
	}
	@keyframes commentSendBtnIcon {
		0% {
			left: -47px;
		}
		40% {
			left: 13px;
		}
		60% {
			left: 21px;
		}
		100% {
			left: 67px;
		}
	}
	@keyframes btnWordsFadeInOut {
		0% {
			color: #FFF;
		}
		50% {
			color: transparent;
		}
		100% {
			color: #FFF;
		}
	}
	/* 隐藏遮挡视频的次要元素 */
	.bpx-player-top-issue,
	.bpx-player-top-left-follow {
		display: none;
	}
	.error-body {
		background: none;
	}
}

@-moz-document domain("message.bilibili.com") {
	/* 消息 */
	/* 顶部 */
	.space-right-top .title {
		background-color: rgba(250, 93, 141) !important;
		color: #fff !important;
	}
	.space-right-top .helper-btn {
		color: #fff !important;
	}
	.space-right-top .helper-btn {
		filter: brightness(1.2);
	}
	/*无数据*/
	.placeholder-img {
		background-image: url(https://res.lolicon.app/bilibili/noresult.png) !important;
		background-size: contain !important;
		max-width: 256px;
		max-height: 256px;
	}
}

@-moz-document domain("t.bilibili.com"), url-prefix("https://www.bilibili.com/opus/") {
	/* 动态 */
	#app,
	#app:before {
		background: none !important;
	}
	.fixed-bg,
	#app .bg,
	#app .bgc {
		z-index: -99999;
	}
}

@-moz-document domain("space.bilibili.com") {
	/* 空间 */
	/* 滚动条 */
	::-webkit-scrollbar,
	::-webkit-scrollbar-track {
		background-color: #FFF;
	}
}

@-moz-document domain("search.bilibili.com") {
	/* 搜索 */
	.video-list > div:has(a[href^="//cm.bilibili.com"]) {
		display: none !important;
	}
}

Reviews

No reviews yet.