Skip to content

Nazuki哔哩哔哩播放页 by Natsumesaki

Write a review Install Get Stylus

Details

AuthorNatsumesaki

LicenseMIT

Categorywww.bilibili.com/video/

Created

Updated

Size33 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

哔哩哔哩播放页美化

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			Nazuki哔哩哔哩播放页
@namespace		bilibili-player
@version		1.2
@description	适配bilibili播放页
@author			Natsumesaki[https://space.bilibili.com/3430222]
@license		MIT
@preprocessor	uso

@advanced dropdown T_DIV_BG "选择背景" {
	BG_2 "SAKI" <<<EOT url("https://natsumesaki.cn/wp-content/uploads/2023/10/NightTown4096-scaled.jpg") EOT;
	BG_NONE "无背景" <<<EOT "" EOT;
	BG_3 "宇宙" <<<EOT url("https://i0.hdslb.com/bfs/article/6173f4a6e11e9cccef18752713f0578ce1a39c64.jpg") EOT;	
	BG_4 "新年" <<<EOT url("https://i0.hdslb.com/bfs/new_dyn/837d26ede666306b67f8573aae8f1ccd6823116.jpg") EOT;
	BG_DIV "自定义" <<<EOT var(--activity-bg-custom) EOT;
}

@advanced text T_CUSTOM_BG "自定义背景:在“”内填写链接" "url()"

==/UserStyle== */


@-moz-document url-prefix("https://www.bilibili.com/video/") {

/*深色模式*/
:root{
    --text1:rgba(255,255,255);
    --text2:rgba(220,220,220);
    --text3:rgba(200,200,200);
	 --bg1_float:#101010DD;
	--activity-bgimg: /*[[T_DIV_BG]]*/;
	--activity-bg-custom: /*[[T_CUSTOM_BG]]*/;
	--bg3:rgba(220,220,220,0.2)
}
html{
    --bpx-dmsend-switch-icon:rgba(220,220,220);
    --bpx-dmsend-info-font:rgba(220,220,220);
}    

	h1{
		font-size:28px !important;
		line-height:40px !important;
		transition: 0.5s all;
	}
.app-v1{
	margin-bottom:-20px !important;
    background: var(--activity-bgimg) no-repeat fixed 50% 0;
    background-size: cover;
    
}
	.video-container-v1,
	.left-container{
		transition: 0.5s all;
	}
.fixed-header .bili-header__bar{
	position:relative !important;
}
	.video-info-container{
		height:fit-content !important;
		width:fit-content !important;
		max-width:calc(100% + 8px);
		border-radius:20px;
    padding:20px 25px;
    background: #000000BB;
    backdrop-filter: blur(5px);
		margin:35px 0 20px 0;
	white-space: nowrap; /* 不换行 */
   overflow: hidden;    /* 隐藏超出部分 */
   text-overflow: ellipsis; /* 显示省略号 */
	}
	.video-title{
	 max-width:calc(100% + 8px);
    box-shadow:none;
    width:fit-content;
	}
	.video-info-detail{
		height:fit-content !important;
		width:fit-content !important;
	}
/*OKV插件按钮*/	
	.okv-tools-bili{
		display:flex;
		margin:0 -10px 0 20px;
		padding-top:0;
	}
	.okv-tools-bili *{
    background: rgba(248, 112, 151, .6);
	border:none;
	}
	.bili-top-button[id="tripleClick"]{
		display:none;
	}
/*播放器*/
	.bpx-player-cmd-dm-inside{
		display:none;
	}
#bilibili-player-placeholder{
    display:none;
}
	#bilibili-player{
		max-height:100% !important;
		transition: 0.5s all;
	}
	.player-wrap{
		transition: 0.5s all;
		/*height:calc(100%) !important;*/
	}
.bpx-player-container{
    border-radius:20px;
    padding: 20px 20px 0px 20px;
    background: #000000BB;
    backdrop-filter: blur(5px);
    box-shadow:none;
    width:calc(100% - 32px);
	  height:calc(100% - 8px);
	margin-bottom:15px;
		transition: 0.5s all;
}
.-bwp-internal-container {
    display: flex;
    flex-direction: column;
    position: relative;
    min-width: inherit;
    max-width: inherit;
    min-height: inherit;
    max-height: inherit;
    object-fit: inherit;
    justify-content: center;
		align-items: center;
	}
.slide-ad-exp{
    display:none;
}

.bpx-player-video-area{
    border-radius:10px;
    box-shadow:0 0 10px black;

}
.bpx-player-sending-area:before{
    display:none;
}
/*.bpx-player-sending-bar{
    margin-top:18px;
    background:transparent;
    padding:0 2px 0 3px !important;
		transition: 0.5s all;
}
.bpx-player-video-info{
    height:34px !important;
}
.bpx-player-container .bpx-player-sending-bar .bpx-player-video-inputbar{
    border-radius:10px ;
}
.bpx-player-container .bpx-player-sending-bar .bpx-player-video-inputbar .bpx-player-dm-btn-send{
    border-radius:0 10px 10px 0;
}*/
	
	.bpx-player-sending-bar{
		transition:0.5s all;
		background:transparent !important;
	margin-top:0;
		padding:10px 0 15px 2px!important;
		height:32px !important;
	}
	
	.bpx-player-container .bpx-player-primary-area .bpx-player-sending-bar .bpx-player-video-inputbar{
		height:28px;
		border-radius:14px !important;
	}
	.bpx-player-container .bpx-player-primary-area .bpx-player-sending-bar .bpx-player-video-inputbar .bpx-player-dm-btn-send{
	border-radius: 0 14px 14px 0 !important;}
	
	
	.bui-button .bui-area.bui-button-blue{
		background-color:#00a1d6BB;
	}
.video-toolbar-container{
    margin-top:22px !important;
	padding-top:0px !important;
    border:none !important;
	width:calc(100% + 8px);
	flex-wrap: wrap;
}
.video-toolbar-left-main{
    padding:18px 8px 18px 18px;
    background: #000000bb;
    backdrop-filter: blur(5px);
    box-shadow:none;
    border-radius:20px;
		transition: 0.5s all;
}
	.video-toolbar-left-main:hover{
		background: #010e41bb;
	}
.video-toolbar-right-item{
		    padding:18px;
    background: #000000bb;
    backdrop-filter: blur(5px);
    box-shadow:none;
    border-radius:20px;
	}
.video-toolbar-right-item:hover{
		background: #063587bb;
	}
.video-toolbar-container .video-toolbar-right .toolbar-right-ai{
    background: transparent !important;
    backdrop-filter: none !important;
    box-shadow:none;
		border:none !important;
			padding:18px!important;
	}
	.minisize{
		margin-right:10px !important;
	}
	.video-ai-assistant .video-ai-assistant-bg{
height: 100% !important;	
	background: rgba(0, 24, 1761,.3);
    backdrop-filter: blur(5px);
	border-radius:20px;
		border:none !important;

	}
	.video-ai-assistant .video-ai-assistant-bg[data-v-6e867ab5]::before{
	border-radius:20px !important;
	}
.video-ai-assistant .video-ai-assistant-bg[data-v-6e867ab5]::after{
		border:none !important;
	}
	
	.video-note .video-note-inner{
		display:flex !important;
	}
	.video-toolbar-right-item .video-toolbar-item-icon,
	.video-ai-assistant .video-ai-assistant-icon{
		margin:0 !important;
		height:24px  !important;
		width:24px !important;
	}
.video-note-info.video-toolbar-item-text,
	.video-ai-assistant .video-ai-assistant-info{
			display:none !important;
}
.video-container-v1 #bannerAd,.activity-m-v1{
    display:none;
}
	.video-desc-container{
		margin-top:0px !important;
	}
.basic-desc-info{
	padding:18px;
    background-color: #000000BB;
    backdrop-filter: blur(5px);
	border-radius:20px;
	width:fit-content;
	height:fit-content;
}
.video-desc-container{
		transition: 0.5s all;
	}
	.toggle-btn{
	padding:5px 15px;
 background-color: rgba(7, 83, 110, .5);
    backdrop-filter: blur(5px);
	border-radius:20px;
	width:fit-content;
	height:fit-content;
	}
	
	.video-tool-more-popover{
		border:none;
			background:transparent;
		box-shadow:none;
	}
	.video-tool-more-popover *{
		border-radius:20px;
		margin:10px 0;
		overflow:hidden;
		fill:white;

	}

.video-tag-container{
	border:none !important;
	margin:0 !important;
}
.video-tag-container .tag-panel .tag-link{
    background: #000000bb !important;
    backdrop-filter: blur(5px);
			transition:0.5s all;
}
	.video-tag-container .tag-panel .tag-link:hover{
		background: #010e41bb !important;
	}
	.bgm-tag .tag-link.bgm-link:hover{
		background: #000000bb !important;
}

/*评论区*/
.video-container-v1 #comment{
	margin-top:0 !important;
	margin-bottom:30px;
}
.bili-comment.browser-pc{
    border-radius:20px;
    padding:30px 30px 30px 10px;
        background:#000000BB;
    backdrop-filter: blur(10px);
    box-shadow:none;
	width:calc(100% - 32px);
}
.reply-header{
    padding-left:20px;
}

.svg-icon.use-color svg path{
    fill:rgba(220,220,220)!important;
}
.reply-box.fixed-box,
.reply-box .box-expand,
.reply-box.fixed-box .box-normal .reply-box-warp .reply-box-textarea,
.reply-box .box-normal .reply-box-send[data-v-29c79ab1]:after{
	transition: 0.5s all;
}
.reply-warp .fixed-reply-box{
	left:20px !important;
	margin-bottom:8px;
}
.reply-warp .fixed-reply-box .reply-box-shadow{
	display:none;
}
.reply-box.fixed-box{
background-color:transparent !important;
	border:none !important;
	flex-direction:column-reverse;
}
.reply-box .box-normal .reply-box-warp .reply-box-textarea{
	background-color:#FFFFFF44 !important;
	border:none !important;
}
.reply-box.fixed-box .box-normal:hover{
	height:65px;
	bottom:0;
}
.reply-box .box-expand{
	margin-bottom:10px !important;
}
/*浮窗*/
.user-card{
    border-radius:20px;
    background: rgba(0, 0, 0, 0.7) !important;
	backdrop-filter: blur(5px);
    border:none !important;
    box-shadow:0 0 30px black !important;
    overflow:visible !important;
}
.user-card-m-exp{
	 border-radius:20px;
    background: rgba(0, 0, 0, 0.7) !important;
    backdrop-filter: blur(5px);
    border:none !important;
    box-shadow:0 0 30px black !important;
    overflow:visible !important;
}
/*#侧边栏*/
	.right-container{
		transition:0.5s all;
	}
	.video-container-v1 .right-container .right-container-inner{
		display:flex;
		flex-direction:column;

	}
.up-panel-container{
	border-radius:20px !important;
    background:#021c4288;
    backdrop-filter: blur(5px);
	margin:30px 0 16px 0;
	padding:15px !important;
}

.up-info-container{
	height:fit-content !important;
	align-items:flex-start !important;
}
.up-detail{
	display:flex;
	flex-direction:column;
}
.up-detail-top{
	margin-top:6px;
	margin-bottom:2px;
}
.up-detail-bottom{
	margin-bottom:5px;
}
	#danmukuBox{
			transition: 0.5s all;
	}
.video-container-v1 .danmaku-box .danmaku-wrap{

    border-radius:20px !important;
    background:#000000BB!important;
    backdrop-filter: blur(5px);
	overflow:hidden !important;
	}
	.video-container-v1 .danmaku-box .danmaku-wrap *{
			transition: 0.5s all;
}
.bui-collapse-header:hover,
.bpx-player-dm-btn-history:hover{
	background: #06358766 !important;
	border-radius:0 !important;
	}
.bpx-docker-minor:not(:empty){
    background:transparent;
}
.bpx-player-auxilia...

Reviews

No reviews yet.