☰

B站仿旧版样式（番剧/综艺播放页(beta)、搜索页(beta)、播放页、稍后再看播放页）（stylus版）

B站仿旧版样式，仅播放页和稍后再看播放页，搜索页、番剧/综艺播放页还在改造中

  1. /* ==UserStyle==
  2. @name           B站仿旧版样式（番剧/综艺播放页(beta)、搜索页(beta)、播放页、稍后再看播放页）（stylus版）
  3. @namespace      github.com/czxinc/bilibili-old-style
  4. @version        9.3.0
  5. @preprocessor    stylus
  6. @homepageURL     https://github.com/czxinc/bilibili-old-style
  7. @supportURL   https://github.com/czxinc/bilibili-old-style
  8. @description    B站仿旧版样式，仅播放页和稍后再看播放页，搜索页、番剧/综艺播放页还在改造中
  9. @author         CZX Fuckerman
  10. @license      GPL
  11.  
  12. ==/UserStyle== */
  13.  
  14. //@var checkbox topbarVideo "顶栏（视频页）" 1
  15. //@var checkbox topbarSearch "顶栏（搜索页）" 1
  16. //@var checkbox pageVideo "视频页" 1
  17. //@var checkbox pageSearch "搜索页" 1
  18. //@var number leftWidth "左侧宽度" 1280
  19.  
  20. leftWidth = 1280 //宽度
  21. topbarVideo = 1
  22. topbarSearch = 1
  23. pageVideo = 1
  24. pageSearch = 1
  25.  
  26. unitToPx(num)
  27. 	unit(num, 'px')
  28.  
  29. //评论组件
  30. stylusAreaComment()
  31. 	/* 评论 start */
  32. 	.bili-comment.browser-pc
  33. 		*
  34. 			font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
  35. 			a
  36. 				outline: none;
  37. 				color: #00a1d6;
  38. 				text-decoration: none;
  39. 				cursor: pointer;
  40. 				&:hover
  41. 					color: #f25d8e;
  42.  
  43. 	.reply-header
  44. 		.reply-navigation
  45. 			.nav-bar
  46. 				.nav-title
  47. 					font-size: 18px!important;
  48. 					line-height: 24px!important;
  49. 					font-weight: normal!important;
  50. 					.nav-title-text
  51. 						font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif!important;
  52. 					.total-reply
  53. 						color: inherit!important;
  54. 						font-size: 18px!important;
  55. 						font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif!important;
  56. 				.nav-sort
  57. 					font-size: 14px!important;
  58. 					color: #222!important;
  59. 					.hot-sort
  60. 					.time-sort
  61. 						font-weight: bold!important;
  62. 					&.hot .hot-sort
  63. 					&.time .time-sort
  64. 						color: #00a1d6!important;
  65.  
  66. 	.emoji-panel
  67. 		margin-top: 7px;
  68. 		margin-bottom: 10px;
  69. 		box-shadow: 0 11px 12px 0 rgba(106 115 133 30%);
  70. 		top: 27px;
  71. 		.emoji-content
  72. 			height: 196px!important;
  73.  
  74. 	.reply-list
  75. 		.login-prompt //登录(不可用)评论按钮
  76. 			border-radius: 4px!important;
  77.  
  78. 	.reply-box
  79. 		.box-normal
  80. 			.reply-box-send
  81. 				background-color: #00a1d6;
  82. 				border: 1px solid #00a1d6;
  83. 				transition: 0.1s;
  84. 				&:hover
  85. 					background-color: #00b5e5;
  86. 					border-color: #00b5e5;
  87. 				&:after
  88. 					content: none!important;
  89. 			.reply-box-warp
  90. 				.reply-box-textarea
  91. 					font-size: 12px;
  92. 					line-height: normal!important;
  93. 					&:hover
  94. 						border-color: #00a1d6!important;
  95. 						background-color: #fff!important;
  96. 		&.disabled
  97. 			.box-normal
  98. 				.reply-box-send
  99. 					background-color: #e5e9ef !important;
  100. 					border-color: #e5e9ef !important;
  101. 					color: #b8c0cc !important;
  102. 		&.fixed-box
  103. 			.box-normal
  104. 				.reply-box-warp
  105. 					.reply-box-textarea
  106. 						padding-top 10px
  107. 					.textarea-wrap
  108. 						padding: 0px;
  109.  
  110. 	.main-reply-box
  111. 		.box-normal
  112. 			height: 65px!important;
  113. 			.reply-box-send
  114. 				width: 70px!important;
  115. 				height: 64px!important;
  116. 			.reply-box-wrap
  117. 				.reply-box-textarea
  118. 					height: 65px!important;
  119.  
  120. 	.reply-item
  121. 		.root-reply-container
  122. 			padding-left: 85px!important;
  123. 			padding-top: 24px!important;
  124. 			.root-reply-avatar
  125. 				width: 82px!important;
  126. 				padding-top: 6px!important;
  127. 			.content-warp
  128. 				.user-info
  129. 					font-size: 12px!important;
  130. 					font-weight: bold!important;
  131. 					line-height: 18px!important;
  132. 					word-wrap: break-word!important;
  133. 					height:22px!important;
  134. 					.user-name
  135. 						font-family: inherit!important;
  136. 						font-weight: inherit!important;
  137. 					.user-level
  138. 						margin-left: 11px!important;
  139.  
  140. 				.root-reply
  141. 					font-size: 14px!important;
  142. 					line-height: 20px!important;
  143. 					.reply-info
  144. 						font-size: 12px!important;
  145. 						margin-top: 6px!important;
  146. 						.reply-time
  147. 							margin-right: 20px!important;
  148. 						.reply-dislike
  149. 							margin-right: 15px!important;
  150. 						.reply-btn
  151. 							padding: 0 5px;
  152. 							border-radius: 4px;
  153. 							margin-right: 15px;
  154. 							cursor: pointer;
  155. 							&:hover
  156. 								color: #00a1d6!important;
  157. 								background: #e5e9ef!important;
  158. 		.sub-reply-container
  159. 			padding-left: 78px!important;
  160. 		&.login-limit-reply-end
  161. 			.login-limit-mask //未登录(不可用)遮罩
  162. 				display: none!important;
  163.  
  164. 	.sub-reply-item
  165. 		font-size: 14px!important
  166. 		line-height 20px!important
  167. 		.sub-user-info
  168. 			.sub-user-name
  169. 				font-size: 12px!important;
  170. 				font-weight: bold!important;
  171. 				line-height: 18px!important;
  172. 				word-wrap: break-word!important;
  173. 				font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif!important;
  174. 			.sub-user-level
  175. 				margin-left: 11px;
  176. 		.sub-reply-info
  177. 			line-height: 14px!important;
  178. 			margin-top: 6px!important;
  179. 			font-size: 12px!important;
  180.  
  181. 	.sub-reply-list
  182. 		.view-more
  183. 			font-size: 12px!important;
  184. 			color: #6d757a!important;
  185. 			font-weight: bolder!important;
  186. 			.view-more-default
  187. 				.view-more-btn
  188. 					color: #00a1d6;
  189. 					padding: 2px 3px;
  190. 					border-radius: 4px;
  191. 					&:hover
  192. 						background: #e5e9ef;
  193. 						color: #00a1d6;
  194. 			.view-more-pagination
  195. 				span
  196. 					transition: color .3s;
  197. 					line-height: 26px
  198.  
  199. 	.reply-content-container
  200. 		.reply-content
  201. 			line-height: inherit;
  202. 			font-family: -apple-system,BlinkMacSystemFont,Helvetica Neue,Helvetica,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,sans-serif;
  203. 		.jump-link
  204. 		.icon 
  205. 			line-height inherit!important
  206. 		.icon
  207. 			&.search-word
  208. 				position: relative;
  209. 				top: -1px;
  210.  
  211.  
  212. 	.reply-operation
  213. 		.operation-list
  214. 			padding: 10px 0!important;
  215. 	/* 评论 end */
  216.  
  217. //评论区（ShadowDOM组件版）
  218. stylusAreaCommentShadowDOMVer()
  219. 	/* 评论 start */
  220. 	bili-comments
  221. 		--bili-comments-font-size-content: 14px;
  222. 		--bili-comments-line-height-content: 20px;
  223. 		--bili-rich-text-font-size: 14px;
  224. 		--bili-rich-text-line-height: 20px;
  225. 		--bili-font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
  226. 		-webkit-font-smoothing: auto;
  227. 	:host(bili-comment-action-buttons-renderer) //评论功能区
  228. 		font-size: 12px;
  229. 		font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
  230. 		-webkit-font-smoothing: auto;
  231. 	:host(bili-comment-renderer) //评论
  232. 		-webkit-font-smoothing: auto;
  233. 		font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
  234. 	#user-name[data-user-profile-id] //评论人
  235. 		font-size: 12px;
  236. 		font-weight: 700;
  237. 	div#reply>button //回复数
  238. 	div>button>span#count //赞数
  239. 		font-size: 12px;
  240. 	/* 评论 end */
  241.  
  242. //顶部栏
  243. stylusTopbar()
  244. 	/* header start */
  245. 	#biliMainHeader
  246. 		height: 56px!important
  247.  
  248. 	.bili-header
  249. 		height: 56px!important
  250. 		.bili-header__bar
  251. 			padding: 10px 24px
  252. 			height: 56px
  253. 		.left-entry
  254. 			.default-entry
  255. 			.loc-entry
  256. 				margin-right: 12px!important;
  257. 		.left-entry__title
  258. 			.mini-header__logo
  259. 				width: 70px
  260. 				height: 32px
  261. 				path
  262. 					fill: #00a1d6
  263. 		.right-entry
  264. 			.right-entry__outside
  265. 				.right-entry-icon
  266. 					display: none;
  267. 				.right-entry-text
  268. 					color: #212121;
  269. 					text-shadow: none;
  270. 					line-height: 30px;
  271. 					display: block!important;
  272. 			.right-entry-item
  273. 				min-width: 0px;
  274. 				margin-right: 0px;
  275. 			.right-entry-item--upload
  276. 				.v-popover-wrap
  277. 					margin-left: 0px;
  278. 			.right-entry--vip
  279. 				.red-point
  280. 					right: -8px;
  281. 		.right-entry__outside
  282. 			-webkit-font-smoothing: antialiased;
  283. 			font: 14px -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  284. 			min-width: 0px;
  285. 			margin: 0px 0px 0px 12px!important;
  286. 			&.go-login-btn
  287. 				width: 64px;
  288. 		.red-num--message 
  289. 			background-color: #FA5A57;
  290. 			text-align: center;
  291. 			color: #fff;
  292. 			min-width: 16px;
  293. 			height: 16px;
  294. 			padding: 0 3px;
  295. 			border-radius: 8px;
  296. 			line-height: 16px;
  297. 			font-size: 12px;
  298. 			top: -7px;
  299. 			right: -10px;
  300. 			left: auto;
  301. 		.red-num--dynamic
  302. 			left: auto;
  303. 			right: -10px;
  304. 		.v-popover-wrap
  305. 			&.right-entry__outside
  306. 				&.right-entry--message
  307. 					margin: 0px 0px 0px 0px!important;
  308. 			.header-favorite-container
  309. 				height: 100%;
  310. 				min-width: 0px;
  311. 				.header-favorite-container-box
  312. 					margin-top: 0px;
  313. 					.header-favorite-container__up
  314. 						top: 0px!important;
  315. 					.header-favorite-container__down
  316. 						display: none;
  317. 		.header-entry-mini
  318. 			width: 40px;
  319. 			height: 40px;
  320. 			left: 0px;
  321. 			top: 0px;
  322. 			.v-img
  323. 				>img
  324. 					border: 0px;
  325. 		.header-avatar-wrap
  326. 			width: 50px;
  327. 			height: 40px;
  328. 			margin-left: 12px;
  329. 			padding-right: 0px;
  330. 		.header-upload-entry
  331. 			cursor: pointer;
  332. 			position: relative;
  333. 			color: #fff;
  334. 			font-size: 14px;
  335. 			display: block;
  336. 			width: 100px;
  337. 			height: 36px;
  338. 			line-height: 36px;
  339. 			text-align: center;
  340. 			background: #fb7299;
  341. 			border-radius: 2px;
  342. 			margin-left: 14px;
  343. 			.header-upload-entry__text
  344. 				display: block!important;
  345. 			.header-upload-entry__icon
  346. 				display: none;
  347. 		.center-search-container
  348. 			.center-search__bar
  349. 				&.is-focus
  350. 					box-shadow: none
  351. 					border-radius: 0px
  352. 				#nav-searchform
  353. 					display: block;
  354. 					padding: 0 48px 0 16px;
  355. 					border-radius: 2px!important;
  356. 					background: #F4F4F4;
  357. 					border: 1px solid #E7E7E7;
  358. 					position: inherit;
  359. 					height: inherit;
  360. 					background: var(--bg3)!important;
  361. 				.nav-search-content
  362. 					padding: 0px;
  363. 					background: inherit!important;
  364. 					.nav-search-input 
  365. 						word-break: break-all;
  366. 						overflow: hidden;
  367. 						width: 100%;
  368. 						height: 34px;
  369. 						border: none;
  370. 						background-color: transparent;
  371. 						box-shadow: none;
  372. 						color: #999;
  373. 						font-size: 14px;
  374. 						line-height: 34px;
  375. 						transition: all 0.2s;
  376. 						&:focus
  377. 							background-color: inherit;
  378. 							color: #999;
  379. 				.is-actived
  380. 					.nav-search-content
  381. 						.nav-search-input
  382. 							&:focus
  383. 								color: #222222;
  384. 				.nav-search-btn
  385. 					position: absolute;
  386. 					top: 0px;
  387. 					right: 0;
  388. 					margin: 0;
  389. 					padding: 0;
  390. 					width: 48px;
  391. 					height: 36px;
  392. 					border: none;
  393. 					border-radius: 2px;
  394. 					background: #e7e7e7;
  395. 					line-height: 26px;
  396. 					cursor: pointer;
  397. 					display: inherit;
  398. 					transition: none;
  399. 					svg
  400. 						position: absolute;
  401. 						top: 7px;
  402. 						right: 16px;
  403. 						margin: 0;
  404. 						padding: 0;
  405. 						border: none;
  406. 						background: none;
  407. 						color: #505050;
  408. 						font-size: 16px;
  409. 						line-height: 20px;
  410. 						cursor: pointer;
  411. 						transition: all 0.2s;
  412. 		.search-panel
  413. 			background: #ffffff;
  414. 			border: 1px solid #e6e9ee;
  415. 			box-sizing: border-box;
  416. 			box-shadow: 0px 2px 4px rgba(0 0 0 10%);
  417. 			border-radius: 2px;
  418. 			padding: 16px 0;
  419. 			margin-top: 2px;
  420. 			font-family: PingFang SC, sans-serif;
  421. 			font-style: normal;
  422. 			font-weight: normal;
  423. 			color: #212121;
  424. 			-webkit-font-smoothing: antialiased;
  425. 		.message-entry-popover
  426. 			min-width: 173px;
  427. 			.message-inner-list
  428. 				padding: 10.058px 0;
  429. 				color: #212121;
  430. 			.message-inner-list__item
  431. 				padding: 0px 0px 0px 20.116px;
  432. 				line-height: 36.2093px;
  433. 				font-size: 14px;
  434. 				color: inherit;
  435. 		.header-dynamic-avatar
  436. 			width: 34.1px!important;
  437. 			height: 34.1px!important;
  438. 			border: 0px!important;
  439. 		.header-dynamic-list-item
  440. 			transition: 0.3s!important;
  441. 			&:hover
  442. 				background-color: #f4f4f4!important;
  443. 			.header-dynamic__box--right
  444. 				top: 0px!important;
  445. 				width: auto!important;
  446. 			.dynamic-info-content
  447. 				font-size: 13.267px!important;
  448. 				font-weight: 500!important;
  449. 				color: #212121!important;
  450. 				margin: 5.68px 0px!important;
  451. 				line-height: normal!important;
  452.  
  453. 	.bili-header .header-dynamic-list-item .dynamic-name-line,
  454. 	.publish-time 
  455. 		font-size: 12px!important;
  456. 		color: #505050!important;
  457. 		
  458. 	.wnd_bottom 
  459. 		height: 60.64px;
  460. 		display: flex;
  461. 		justify-content: center;
  462. 		align-items: center;
  463. 		margin: 0px 18.95px;
  464. 		.r-l
  465. 			height: 30.313px;
  466. 			width: auto;
  467. 			margin: 0px;
  468. 			border-radius: 0px;
  469. 			color: #212121;
  470. 			font-size: 13.267px;
  471. 			background-color: #f4f4f4;
  472. 			line-height: normal;
  473. 			transition: box-shadow 0.1s;
  474. 			flex: 1;
  475. 			display: flex;
  476. 			justify-content: center;
  477. 			align-items: center;
  478. 			font-family: auto;
  479. 			&:hover
  480. 				background-color: #e7e7e7;
  481.     
  482. 			
  483. 	.right-entry
  484. 		.v-popover-wrap
  485. 			&.right-entry-message
  486. 				margin-left: 12px!important;	
  487. 				
  488. 	.v-popover-content
  489. 		border-radius: 2px;
  490. 		box-shadow: 0 3px 6px 0 rgba(0 0 0 20%);
  491. 		
  492. 	.dynamic-panel-popover
  493. 		width: 350.63px;
  494. 		.header-tabs-panel
  495. 			font-size: 12px;
  496. 			color: #999;
  497. 			line-height: 15.1px;
  498. 			height: 45.5px;
  499. 			display: flex;
  500. 			flex-direction: row;
  501. 			align-items: center;
  502. 			padding-left: 19px;
  503. 			border-bottom: 1px solid #e7e7e7;
  504. 			user-select: none;
  505. 			justify-content: normal;
  506. 		.header-tabs-panel__content
  507. 			min-height: 113.717px;
  508. 			max-height: 444.445px;
  509. 		.header-tabs-panel__item
  510. 			display: flex;
  511. 			justify-content: center;
  512. 			align-items: center;
  513. 			margin: 0px 22.743px 0px 0px;
  514. 			padding: 0px;
  515. 			border-radius: 30px;
  516. 			cursor: pointer;
  517. 			transition: 0.3s ease;
  518. 			z-index: 1;
  519. 			flex: inherit;
  520. 			font-size: 12px;
  521. 			line-height: 15px;
  522. 			border-bottom: none;
  523. 		.header-tabs-panel__item--active
  524. 			background-color: #00a1d6;
  525. 			color: #fff;
  526. 			padding: 3.79px 9.5px;
  527. 			margin: 0px 13.267px 0px 0px;
  528. 			border-bottom: none;
  529. 		.cover
  530. 			width: 60.641px!important;
  531. 			height: 34.109px!important;
  532. 			border-radius: 1.895px!important;
  533. 		.watch-later
  534. 			width: 20.844px!important;
  535. 			height: 20.844px!important;
  536. 			.bili-watch-later__icon
  537. 				width: 15px!important;
  538. 				height: 15px!important;
  539. 			
  540. 	.dynamic-article
  541. 		.tip-box 
  542. 			color: #999!important;
  543. 			font-size: 13.267px!important;
  544. 			display: flex!important;
  545. 			justify-content: center!important;
  546. 			align-items: center!important;
  547. 			height: 94.75px!important;
  548. 			
  549. 	.dynamic-video-item
  550. 		line-height: normal!important;
  551.     
  552. 			
  553. 	.v-popover
  554. 		&.is-bottom
  555. 			padding-top: 13px!important;
  556. 			&::before
  557. 				content: '';
  558. 				width: 10px;
  559. 				height: 7px;
  560. 				display: block;
  561. 				position: absolute;
  562. 				top: 11px;
  563. 				left: calc(50% - 5px) !important;
  564. 				-webkit-transform: rotate(45deg);
  565. 				transform: rotate(45deg);
  566. 				background-color: white;
  567. 				-webkit-box-shadow: -1px -1px 1px rgba(0 0 0 5%);
  568. 				box-shadow: -1px -1px 1px rgba(0 0 0 5%);
  569. 				z-index: 1;
  570. 	
  571. 	.bili-avatar-right-icon
  572. 		width: 15.1px;
  573. 		height: 15.1px;
  574. 	/* header end */
  575.  
  576. //页面 视频播放页
  577. stylusVideo()
  578. 	body
  579. 		margin: 0
  580. 		font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
  581. 		font-size: 12px
  582. 		line-height: 1.5
  583. 		color: #222
  584. 		background-color: #fff
  585.  
  586. 	a
  587. 		color: #222
  588. 		background-color: transparent
  589. 		text-decoration: none
  590. 		outline: none
  591. 		cursor: pointer
  592. 		transition: color .3s
  593. 		-webkit-text-decoration-skip: objects
  594.  
  595. 	.harmony-font 
  596. 		-webkit-font-smoothing: antialiased
  597. 		font: 14px -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif
  598. 		z-index: 1000
  599. 		margin: 0
  600. 		padding: 0
  601.  
  602.  
  603. 	/* 左侧项目 start */
  604. 	.left-container
  605. 		.playlist-container--left //适配稍后再看
  606. 			max-width: unitToPx(leftWidth);
  607. 			
  608. 	.video-info-container
  609. 		height: 96px!important;
  610. 		padding-top: 27px!important;
  611. 		box-sizing: border-box!important;
  612. 		.video-title //视频标题
  613. 		.video-title-href //稍后再看 视频标题
  614. 			font-size: 18px!important;
  615. 			font-weight: 500!important;
  616. 			line-height: 26px!important;
  617. 				
  618. 	.video-container-v1:has(.left-container .bpx-player-container[data-screen='wide']) //宽屏时
  619. 		.right-container	
  620. 			.members-info-container //创作团队
  621. 				padding-top: 0px;
  622. 				.membersinfo-wide
  623. 					.header
  624. 						display: none;
  625.  
  626.  
  627.  
  628. 	.video-info-detail
  629. 		font-size: 12px!important;
  630. 		height: 16px!important;
  631. 		color: #999!important;
  632. 		display: flex!important;
  633. 		align-items: center!important;
  634. 		text-overflow: ellipsis!important;
  635. 		white-space: nowrap!important;
  636. 		.video-info-detail-list
  637. 			.pubdate-ip
  638. 				font-size: inherit!important;
  639. 				.pubdate
  640. 					.pubdate-text
  641. 						font-size: inherit!important;
  642. 			.honor
  643. 				font-size:12px;
  644. 				&.honor-rank
  645. 					.honor-icon
  646. 						width: 12px;
  647. 						height: 12px;
  648. 					.honor-arrow
  649. 						width: 5px;
  650. 						height: 8px;
  651.  
  652. 	.video-argue
  653. 		.video-argue-inner //视频争议标签
  654. 			font-size: 12px!important;
  655.  
  656.  
  657.  
  658. 	/* 视频 start */
  659. 	#bilibili-player:has(.bpx-player-container:not([data-screen = "web"]):not([data-screen = "full"]):not([data-screen = "wide"]))
  660. 		max-width: unitToPx(leftWidth);
  661.  
  662.  
  663. 	#bilibili-player
  664. 		height: 100%;
  665.  
  666. 	#playerWrap:has(.bpx-player-container:not([data-screen = "web"]):not([data-screen = "full"]):not([data-screen = "wide"])) //保持16：9（1280x720）
  667. 		max-height: unit(766,"px")
  668.  
  669. 	//播放器下方栏
  670. 	.bpx-player-sending-bar
  671. 		display: flex!important;
  672. 		flex: none!important;
  673. 		justify-content: space-between!important;
  674. 		height: 46px!important;
  675. 		padding: 0 12px 0 20px!important;
  676. 		//background: #fff!important;
  677. 		font-size: 12px!important
  678. 		.bpx-player-video-info-online
  679. 			b
  680. 				font-weight: bold!important;
  681. 		.bpx-player-video-inputbar
  682. 			border-radius: 2px!important;
  683. 			.bpx-player-dm-btn-send
  684. 				border-radius: 0 2px 2px 0!important;
  685.  
  686. 	@media (min-width: 1681px)
  687. 		#bilibili-player-placeholder		// 
  688. 		#bilibili-player					// 修 小窗口播放器上下窗口有黑框
  689. 			height: calc(100% - 10px);
  690.  
  691. 	//弹幕列表按钮
  692. 	.bui-collapse
  693. 		.bui-collapse-header
  694. 			border-radius: 2px!important;
  695.  
  696. 	/* 视频 end */	
  697.  
  698.  
  699. 	/* 视频下方工具栏 start */
  700. 	.video-toolbar-container
  701. 		.video-toolbar-left
  702. 			.toolbar-left-item-wrap 
  703. 				margin-right: 8px!important;
  704. 				.ring-progress //三连进度条
  705. 					width: 34px!important;
  706. 					height: 34px!important;	
  707. 					left: -3px!important;
  708. 					top: -3px!important;
  709.  
  710. 		.video-toolbar-right
  711. 			.toolbar-right-note
  712. 				margin-right: 0px!important;
  713. 				.video-note-inner
  714. 					/* position: relative; */
  715. 					margin-right: 25px!important;
  716. 					width: auto;
  717. 					height: 24px;
  718. 					align-items: center;
  719. 					justify-content: center;
  720. 					border-radius: 2px;
  721. 					cursor: pointer;
  722. 					font-size: 12px!important;
  723. 					line-height: 20px;
  724. 					border: 1px solid #00a1d6;
  725. 					color: #00a1d6;
  726. 					background: #fff;
  727. 					transition: 0.3s;
  728. 					padding-left: 3px;
  729. 					&:hover
  730. 						color: #fff!important;
  731. 						background: #00a1d6!important;
  732. 						.video-toolbar-item-icon
  733. 							fill: #fff!important;
  734.  
  735. 	.video-toolbar-left-item
  736. 		width: 92px!important;
  737. 		.video-toolbar-item-icon
  738. 			width: 28px!important;
  739. 			height: 28px!important;
  740.  
  741. 	.video-toolbar-right-item
  742. 		font-size: 12px!important;
  743. 		.video-toolbar-item-icon
  744. 			width: 16px;
  745. 			height: 20px;
  746. 			fill: #00a1d6;
  747. 			transition: 0.3s;
  748. 			&.video-complaint-icon
  749. 				display: none;
  750.  
  751. 	.svga-container.svga-center //三连图标弹出
  752. 			transform: translate(-4.5px, -4.5px) scale(0.8)!important;
  753. 	@media (min-width: 1681px)
  754. 		.svga-container.svga-center //三连图标弹出
  755. 			transform: translate(-6.5px, -6.5px) scale(0.8)!important;
  756.  
  757. 	
  758.  
  759. 	.toolbar-right-note
  760. 		.video-toolbar-item-text
  761. 			transition: 0.3s;
  762. 			width: auto;
  763. 			padding-right: 3px;
  764. 			&:hover
  765. 				.video-toolbar-item-icon
  766. 					fill: #fff!important;
  767. 				.video-toolbar-item-text
  768. 					color: #fff!important;
  769.  
  770. 	.video-tool-more
  771. 		.video-tool-more-reference
  772. 			.video-tool-more-icon 
  773. 				width: 20px!important;
  774. 				height: 24px!important;
  775.  
  776. 	.video-tool-more-popover
  777. 		display: block;
  778. 		position: absolute;
  779. 		width: 80px;
  780. 		min-width: 0px;
  781. 		left: -65px;
  782. 		z-index: 30;
  783. 		text-align: center;
  784. 		padding: 10px 0;
  785. 		background: #ffffff;
  786. 		border: 1px solid #e5e9ef;
  787. 		box-shadow: 0 2px 4px 0 rgba(0 0 0 14%);
  788. 		border-radius: 2px;
  789. 		font-size: 14px;
  790. 		color: #222;
  791. 		.video-tool-more-dropdown
  792. 			.dropdown-item
  793. 				position: relative;
  794. 				height: 34px;
  795. 				line-height: 34px;
  796. 				cursor: pointer;
  797. 				transition: all 0.3s;
  798. 				justify-content: center;
  799. 				padding: 0px;
  800. 				.video-toolbar-item-text
  801. 					font-size: 14px!important;
  802. 				svg
  803. 					display: none;
  804.  
  805. 	.video-share-popover
  806. 		border-radius: 2px;
  807. 		-webkit-box-shadow: 0 2px 4px 0 rgba(0 0 0 14%);
  808. 		box-shadow: 0 2px 4px 0 rgba(0 0 0 14%);
  809. 		border: 1px solid #e5e9ef;
  810. 		.video-share-dropdown
  811. 			.dropdown-top
  812. 				padding: 20px 10px 12px 10px;
  813. 			.dropdown-bottom
  814. 				padding: 20px 10px;
  815. 	/* 视频下方工具栏 end */
  816.  
  817. 	/* 视频简介 start */
  818. 	.video-desc-container
  819. 		.basic-desc-info
  820. 		.subtitle-maker-list
  821. 			font-size: 12px!important;
  822. 			line-height: 18px!important;
  823. 	/* 视频简介 end */
  824.  
  825. 	/* 视频标签 start */
  826. 	.video-tag-container
  827. 		.tag-panel
  828. 			/* width: 670px!important; */
  829. 			.tag
  830. 				margin: 0px!important;
  831. 				.show-more-btn
  832. 					display: none;
  833. 				&.not-btn-tag
  834. 					display: block!important;
  835. 			.tag-link
  836. 				float: left;
  837. 				margin: 0 10px 8px 0;
  838. 				background: #F6F7F8;
  839. 				border-radius: 100px;
  840. 				padding: 0 12px;
  841. 				position: relative;
  842. 				height: 22px;
  843. 				line-height: 22px;
  844. 				transition: all 0.3s;
  845. 				font-size: 12px;
  846. 				border: 1px solid transparent;
  847. 				box-sizing: content-box;
  848. 				&:hover
  849. 					border-color: #00a1d6;
  850. 				.tag-icon
  851. 					width: 14px!important;
  852. 					height: 14px!important;
  853.  
  854.  
  855.  
  856. 	.newchannel-tag
  857. 		.tag-link
  858. 			&.newchannel-link
  859. 				.newchannel-tag-icon
  860. 					fill: #9499a0;
  861. 					margin-right: 5px!important;
  862. 					path
  863. 						fill: inherit;
  864.  
  865.  
  866.  
  867. 	/* 视频标签 end */
  868.  
  869. 	/* 评论上面的广播公告栏 start */
  870. 	.reply-header
  871. 		.reply-notice
  872. 			box-sizing: content-box;
  873. 			background-color: #FFF1D3!important;
  874. 			border: 1px solid #F8DFAA!important;
  875. 			color: #E78B1F!important;
  876. 			border-radius: 4px;
  877. 			padding: 0px 15px 0px 10px!important;
  878. 			&::after
  879. 				background-color: inherit!important;
  880. 				opacity: 0!important;
  881. 			.svg-icon
  882. 				&.notice
  883. 					width: 21px!important;
  884. 					height: 21px!important;
  885. 					svg
  886. 						path
  887. 							fill: #e78b1f;
  888. 			.notice-content
  889. 				line-height: 20px;
  890. 				font-size: 14px;
  891. 				font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif;
  892. 				padding-left: 13px!important;
  893. 	/* 评论上面的广播公告栏 end */
  894.  
  895. 	stylusAreaComment()
  896. 	stylusAreaCommentShadowDOMVer()
  897.  
  898. 	.image-exhibition
  899. 		.preview-image-container
  900. 			.image-item-wrap
  901. 				border-radius: 4px!important;
  902.  
  903. 	/* 左侧项目 end */
  904.  
  905. 	/* 右侧项目 start */
  906. 	.video-container-v1 .right-container
  907. 	.playlist-container--right //适配稍后再看
  908. 		max-width: 320px!important;
  909.  
  910. 	/* 头像框 start */
  911. 	.up-info-container
  912. 		box-sizing: border-box!important;
  913. 		height: 96px!important;
  914. 		padding-top: 15px!important;
  915. 		padding-bottom: 12px!important;
  916. 		display: flex!important;
  917. 		align-items: flex-start!important;
  918.  
  919. 	.up-avatar-wrap
  920. 		max-width:60px;
  921. 		max-height:50px;
  922.  
  923. 	.up-detail
  924. 		.up-detail-top
  925. 			.up-name
  926. 				position: relative!important;
  927. 				font-size: 14px!important;
  928. 				color: #FB7299!important;
  929. 				font-weight: 500!important;
  930. 				display: inline-block!important;
  931. 				max-width: 180px!important;
  932. 				overflow: hidden!important;
  933. 				text-overflow: ellipsis!important;
  934. 				white-space: nowrap!important;
  935. 				vertical-align: top!important;
  936. 				margin-right: 0px!important;
  937. 			.send-msg
  938. 				margin-left: 12px!important;
  939. 				font-size: 12px!important;
  940. 				color: #505050!important;
  941. 				display: inline-block!important;
  942. 				vertical-align: middle!important;
  943. 				i
  944. 					color: #999!important;
  945. 					font-size: 16px;
  946. 					margin-right: 4px;
  947. 					height: 16px;
  948. 					width: 16px;
  949. 					vertical-align: text-bottom;
  950. 		.up-description
  951. 			margin-top: 4px!important;
  952. 			font-size: 12px!important;
  953. 			line-height: 16px!important;
  954. 			height: 16px!important;
  955. 			color: #999!important;
  956. 			overflow: hidden!important;
  957. 			text-overflow: ellipsis!important;
  958. 			white-space: nowrap!important;
  959. 	/* 头像框 end */
  960.  
  961. 	/* 广告 start */
  962. 	.slide-ad-exp
  963. 		.slide-gg
  964. 			height:182.857px!important;
  965. 			border-radius: 2px!important;
  966.  
  967. 	.ad-report.video-card-ad-small
  968. 		//display: none!important;
  969.  
  970. 	.next-button
  971. 		font-size: 12px!important;
  972. 		color: #999!important;
  973. 		line-height: 22px!important;
  974. 		cursor: pointer!important;
  975. 	/* 广告 end */
  976.  
  977. 	/* 右侧项目容器及分隔线 start */
  978. 	.recommend-list-v1
  979. 		.rec-title
  980. 			font-size: 16px!important;
  981. 			color: #222!important;
  982. 			display: flex!important;
  983. 			justify-content: space-between!important;
  984. 			margin-bottom: 6px!important;
  985. 		.split-line
  986. 			background: #E5E9EF!important;
  987. 			margin: 6px 0 12px!important;
  988. 		.rec-list
  989. 			margin: 0px!important;
  990. 		.rec-footer
  991. 			border-radius: 2px!important;
  992.  
  993. 	/* 右侧项目容器及分隔线 end */
  994. 	
  995. 	/* 稍后再看列表 start */
  996. 	.action-list-container
  997. 		.action-list-item-wrap
  998. 			font-family: Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif !important;
  999. 			.cover
  1000. 				border-radius: 2px!important;
  1001. 				width: 104px;
  1002. 				height: 58px;
  1003. 				img
  1004. 					border-radius: 2px!important;
  1005. 			.actionlist-item-inner
  1006. 				div.title //标题
  1007. 					font-size: 14px;
  1008. 				div.views //播放量
  1009. 					font-size: 12px;
  1010. 	/* 稍后再看列表 end */
  1011. 	
  1012. 	/* 合集 start */
  1013. 	.video-sections-v1 //合集（有分组）
  1014. 	.base-video-sections-v1 //合集（无分组）
  1015. 		border-radius: 2px!important;
  1016. 		font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  1017. 		.first-line-left
  1018. 			max-width: 195px; //防止自动连播换行
  1019. 			a //合集标题
  1020. 				font-size: 16px!important;	
  1021. 				font-weight: 400;
  1022. 				line-height: 16px;
  1023. 			.cur-page	//项目数量
  1024. 				color: rgb(153, 153, 153);
  1025. 				font-size: 12px!important;
  1026. 				line-height: 16px!important;
  1027. 		.video-sections-content-list	
  1028. 			.video-sections-item
  1029. 				.video-section-title //分组标题
  1030. 					p
  1031. 						font-size: 12px;
  1032. 						color: rgb(33, 33, 33);
  1033. 						line-height: 18px;
  1034. 						font-family: PingFangSC-Regular;
  1035. 				.video-episode-card //项目
  1036. 					.video-episode-card__info
  1037. 						.video-episode-card__info-title	//项目标题
  1038. 							font-size: 14px;
  1039. 							color: #212121;
  1040. 							line-height: 18px;
  1041. 							font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
  1042. 						.video-episode-card__info-title-playing	//项目标题 当前播放 
  1043. 							color: #00a1d6;
  1044. 						.video-episode-card__info__number
  1045. 							font-size: 12px;
  1046. 							color: #999;
  1047. 							line-height: 16px;
  1048. 					&:hover //项目 鼠标在上 
  1049. 						.video-episode-card__info
  1050. 							.video-episode-card__info-title //项目标题 
  1051. 								color: #00a1d6;
  1052. 	/* 合集 end */
  1053.  
  1054. 	/* 分P项目 start */
  1055. 	.multi-page-v1
  1056. 		border-radius: 2px!important;
  1057. 		&.small-mode 
  1058. 			.cur-list
  1059. 				.list-box
  1060. 					li
  1061. 						width: 308px!important;
  1062. 	/* 分P项目 end */
  1063.  
  1064.  
  1065. 	/* 右侧项目（视频） start */
  1066. 	.video-page-card-small
  1067. 	.video-page-special-card-small
  1068. 	.video-page-operator-card-small
  1069. 	.recommend-video-card //用于“稍后再看”
  1070. 		padding: 6px 0!important;
  1071. 		margin-bottom: 0px!important;
  1072. 		&:first-child
  1073. 			padding-top:0px!important;
  1074. 		.card-box
  1075. 			.info
  1076. 				font-size: 12px!important;
  1077. 				.title
  1078. 					display: block!important;
  1079. 					font-size: 14px!important;
  1080. 					font-weight: 500!important;
  1081. 					height: 36px!important;
  1082. 					line-height: 18px!important;
  1083. 					margin-bottom: 6px!important;
  1084. 					word-break: break-word!important;
  1085. 					overflow: hidden!important;
  1086. 					text-overflow: ellipsis!important;
  1087. 					display: box!important;	
  1088. 				.upname
  1089. 					margin: 0px 0px 4px 0px;
  1090. 					height: 16px;
  1091. 					svg
  1092. 						display: none;
  1093. 				.desc
  1094. 					font-size: 12px!important;
  1095. 			.pic-box
  1096. 				width: 141px!important;
  1097. 				height: 80px!important;
  1098. 				border-radius: 2px!important;
  1099. 				.cover
  1100. 					width: 80px!important;
  1101. 					height: 80px!important;
  1102. 					background: none!important;
  1103. 				.pic
  1104. 					position: relative!important;
  1105. 					border-radius: 2px!important;
  1106. 					border-top-left-radius: 2px!important;
  1107. 					border-top-right-radius: 2px!important;
  1108. 					border-bottom-right-radius: 2px!important;
  1109. 					border-bottom-left-radius: 2px!important;
  1110. 				.duration
  1111. 					font-size: 12px!important;
  1112. 					line-height: normal!important;
  1113. 					height: 14px!important;
  1114. 				.framepreview-box
  1115. 					.video-awesome-img
  1116. 						width: 141px!important;
  1117. 						height: 80px!important;
  1118. 				.rcmd-cover-img
  1119. 					border-radius: 2px!important;  //用于“稍后再看”
  1120. 			.playinfo
  1121. 				.play
  1122. 				.dm
  1123. 				.play-icon //用于“稍后再看”
  1124. 				.dm-icon //用于“稍后再看”
  1125. 					/* display: none; */
  1126. 					height: 14px!important;
  1127. 					width: 14px!important;
  1128. 					position: relative;
  1129. 					top: -1px;
  1130. 	/* 右侧项目（视频） end */
  1131. 	
  1132. 	/* 接下来播放上面的广告 start */
  1133. 	.video-card-ad-small
  1134. 		.vcd
  1135. 			.cover
  1136. 				.b-img[data-v-eba1a9e8]
  1137. 				img[data-v-eba1a9e8]
  1138. 					border-radius: 2px!important;
  1139.  
  1140. 	.is-in-large-ab
  1141. 		.video-card-ad-small
  1142. 			.vcd
  1143. 				.cover
  1144. 					width: 141px!important;
  1145. 					height: 80px!important;
  1146. 					border-radius: 2px!important;
  1147. 				.info
  1148. 					line-height: 12px!important;
  1149. 					font-size: 12px!important;
  1150. 					word-break: keep-all!important;
  1151. 					display: flex;
  1152. 					flex-direction: column;
  1153. 					justify-content: space-between;		
  1154. 				.title
  1155. 					font-size: 14px!important;
  1156. 					font-weight: 500;
  1157. 					line-height: 18px!important;
  1158. 					word-break: break-word;
  1159. 					text-overflow: ellipsis;
  1160. 					-webkit-line-clamp: 2;
  1161. 	/* 接下来播放上面的广告 end */
  1162.  
  1163. 	/* 下面的广告和直播推荐 start */
  1164. 	.video-container-v1
  1165. 		.right-container
  1166. 			#right-bottom-banner
  1167. 				height: 160px!important;
  1168. 				border-radius: 2px!important;
  1169.  
  1170. 	.pop-live-small-mode
  1171. 		.pl__
  1172. 			&title
  1173. 				font-size: 14px!important;
  1174. 			&name__text
  1175. 				font-size: 12px!important;
  1176. 			&user
  1177. 				font-size: 12px!important;
  1178. 			&cover
  1179. 			&mask
  1180. 				height: 180px!important;
  1181. 				border-radius: 2px!important;
  1182. 	/* 下面的广告和直播推荐 end */
  1183.  
  1184. 	/* 右侧项目 end */
  1185.  
  1186. 	/* 注释 start */
  1187. 	/* 注释 end */
  1188.  
  1189. stylusSearch()
  1190. 	svgSize=15px //图标尺寸（长和宽）
  1191. 	
  1192. 	html
  1193. 		font: 12px Helvetica Neue, Helvetica, Arial, Microsoft Yahei, Hiragino Sans GB, Heiti SC, WenQuanYi Micro Hei, sans-serif;
  1194. 	
  1195. 	/* 容器宽度 start */
  1196. 	.i_wrapper
  1197. 		padding-left:0px!important;
  1198. 		padding-right:0px!important;
  1199. 		width:980px!important;	
  1200. 	/* 容器宽度 end */
  1201.  
  1202. 	div
  1203. 		&:has(.vui_pagenation) //分页容器
  1204. 			margin-top: -10px;
  1205. 			margin-bottom: 35px;
  1206. 			
  1207. 	.bangumi-pgc-list
  1208. 		.to_hide_md //取消小宽度模式隐藏结果
  1209. 			display:block!important;
  1210. 		.col_md_4 //取消番剧、影视等关联结果自适应
  1211. 			flex:0 0 100%!important;
  1212. 			max-width:100%!important;
  1213. 		.media-card-content
  1214. 			max-width: none!important;
  1215. 			
  1216. 	.activity-game-list
  1217. 		.col_6 //取消动漫、游戏推荐自适应
  1218. 			flex:0 0 100%!important;
  1219. 			max-width:100%!important;
  1220. 	
  1221. 	/* 搜索框（首页） start */
  1222. 	.search-entry-page
  1223. 		.search-input-wrap
  1224. 			border:none!important;
  1225. 			border-radius:0px!important;
  1226. 			transition:none!important;
  1227. 			background:inherit!important;
  1228. 			&:hover
  1229. 				background:inherit!important;
  1230. 			.search-icon
  1231. 				display:none !important;
  1232. 			.search-input-el
  1233. 				border: 1px solid #ddd!important;
  1234. 				border-right: 0!important;
  1235. 				padding: 0 10px!important;
  1236. 				height: 40px!important;
  1237. 				color: #222!important;
  1238. 				padding:0px 10px!important;
  1239. 				margin:0px!important;
  1240. 				//width: 518px!important;
  1241. 				width:100%!important;
  1242. 				border-top-left-radius:4px!important;
  1243. 				border-bottom-left-radius:4px!important;
  1244. 				font-size: 13.3333px!important;
  1245. 				&:focus-visible
  1246. 					outline: -webkit-focus-ring-color auto 1px !important;
  1247. 			.search-button
  1248. 				text-align: center!important;
  1249. 				line-height: 40px!important;
  1250. 				font-size: 16px!important;
  1251. 				font-weight: bolder!important;
  1252. 				background-color: #00a1d6!important;
  1253. 				color: #fff!important;
  1254. 				border: 1px solid #008cd2!important;
  1255. 				width: 120px!important;
  1256. 				height: 40px!important;
  1257. 				border-radius: 0 4px 4px 0!important;
  1258. 				transition:none!important;
  1259. 				&:hover
  1260. 					background-color: #00b5e5!important;
  1261. 			.search-panel
  1262. 				border: 1px solid var(--line_regular);	//temp
  1263. 				border-radius:8px;						//temp
  1264. 	/* 搜索框（首页） end */
  1265. 			
  1266. 	/* 搜索框（其他） start */
  1267. 	.search-header
  1268. 		.search-input
  1269. 			margin-top:52px!important;
  1270. 			.search-input-wrap
  1271. 				border: none!important;
  1272. 				background: none!important;
  1273. 				width:auto!important;
  1274. 				height:42px!important;
  1275. 				padding:0px!important;
  1276. 				&:before	//搜索logo
  1277. 					content: url("data:image/png;base64,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");
  1278. 					margin-right: 26px;
  1279. 					margin-top: 11px;
  1280. 				.search-icon
  1281. 					display:none;
  1282. 				.search-input-el
  1283. 					box-sizing: border-box!important;
  1284. 					height: 42px!important;
  1285. 					box-shadow: none!important;
  1286. 					padding: 11px 15px!important;
  1287. 					background: transparent!important;
  1288. 					width: 424px!important;
  1289. 					border: 2px solid #ccd0d7!important;
  1290. 					border-radius: 4px!important;
  1291. 					font-size: 16px!important;
  1292. 					color: #222!important;
  1293. 					outline:inherit!important;
  1294. 					margin-right:10px!important;
  1295. 					&:focus-visible
  1296. 						outline: -webkit-focus-ring-color auto 1px !important;
  1297. 				.search-button
  1298. 					cursor: pointer!important;
  1299. 					float: left!important;
  1300. 					color: #fff!important;
  1301. 					background: #00a1d6!important;
  1302. 					font-size: 16px!important;
  1303. 					letter-spacing: 2px!important;
  1304. 					line-height: 42px!important;
  1305. 					text-align: center!important;
  1306. 					width: 90px!important; 
  1307. 					height: inherit!important;
  1308. 					border-radius: 4px!important;
  1309. 					transition: none!important;
  1310. 					padding: 0px!important;
  1311. 					border: 0px!important;
  1312. 					font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif !important;
  1313. 					&:hover
  1314. 						background: #00b5e5!important;
  1315. 					&:before
  1316. 						content: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAATCAYAAACdkl3yAAABg0lEQVQ4jaVUTU/CQBAtrYYPxSClF0/ExBj/lCdPRrzYxH/gycSLN2/+IIlIrCwY4SbsbndJ+GgUumZKt6wFpeJLpjudnfe6O7NbTQjxzZwGOqWMdSeTiS9CgA8xmIvnS4uch8enIuOciBXg/b5brdX3lgqByNjzPqSEyzhGrderWv15Hwx8iMl5z/M+gbMgxDinkOD7vnhBrcuflg9zkAMIVz8XchqoIr/0m4giZsv8kDsTchnryu2sEpEmtxlyg5i+k89bmqZphNI7LSFkruQCdMMwUuAMhqPrpEKD4egGRskNhJKSVWwYRj4e06fTqQBneytnJxXKZNInMEpugH8WuzdvP2qeK+23V4k4qHkRtX/GXetA2sqBpOpcCh7VWr14dHjwnkmnN2G7jHOMiXs7Go/v4T2XzR5bpeLZbqEQtRtT2rFMsxzV6K+XVkUPk7eF2x/VoIEqUMT4bwRiUJMeJu1lYom6FLdlYmsdSKtkljGhHSWUCoq9LjCh7UC4ZJa/AG/6CQHa0ZSAAAAAAElFTkSuQmCC");
  1317. 						width: 18px;
  1318. 						height: 19px;
  1319. 						display: inline-block;
  1320. 						top: 4px;
  1321. 						position: relative;
  1322. 						margin-right: 7px;
  1323. 				.search-panel
  1324. 					width: 424px!important;
  1325. 					background: #fff!important;
  1326. 					border: 1px solid #e6e9ee!important;
  1327. 					box-shadow: 0 2px 4px rgba(0,0,0,10%)!important;
  1328. 					border-radius: 2px!important;
  1329. 					padding: 16px 0!important;
  1330. 					margin-top: 2px!important;
  1331. 					font-style: normal!important;
  1332. 					font-weight: 400!important;
  1333. 					color: #212121!important;
  1334. 					-webkit-font-smoothing: antialiased!important;
  1335. 					left:158px!important;
  1336. 					top:44px!important;
  1337. 			.search-fixed-header //非页头时的浮动搜索框
  1338. 				.search-input-wrap:before
  1339. 					margin-top: 0px;
  1340. 		.search-tabs //搜索类别栏
  1341. 			.vui_tabs--nav
  1342. 				justify-content: space-between;
  1343. 				.vui_tabs--nav-item
  1344. 					.vui_tabs--nav-text
  1345. 						color: #000;
  1346. 					.vui_tabs--nav-num
  1347. 						color: rgb(109, 117, 122);
  1348. 						background: none;
  1349. 					&:first-child
  1350. 						.vui_tabs--nav-link
  1351. 							padding-left: 10px!important;
  1352. 			.vui_tabs--nav-slider //当前选择下方的滑动横线
  1353. 				color: rgb(0, 161, 214);
  1354. 				width: 54.25px!important;
  1355. 				transition-duration: 200ms;
  1356. 				transition-timing-function: cubic-bezier(.645,.045,.355,1);
  1357. 				transition-property: width, height, transform;
  1358. 				will-change: transform;
  1359. 				pointer-events: none;
  1360. 				transform: translate(-10px, 4px);
  1361. 				height: 2px;
  1362. 				z-index: 1;
  1363. 			.vui_tabs--navbar:after 
  1364. 				border-bottom: 1px solid #ccd0d7;
  1365. 				top: 4px;
  1366. 				position: relative;
  1367. 					
  1368. 	.search-all-list
  1369. 		.user-video-info
  1370. 			.video-list-item //UP主视频推荐显示一行
  1371. 				&:nth-last-child(1)
  1372. 				&:nth-last-child(2)
  1373. 				&:nth-last-child(3)
  1374. 					display: none;
  1375. 					
  1376. 	.search-conditions
  1377. 		.vui_button
  1378. 			&--tab //搜索条件
  1379. 				font-size: 12px;
  1380. 				height: 20px;
  1381. 				padding: 0px 8px;
  1382. 				color: #222;
  1383. 				margin: 0px 15px 0px 0px!important;
  1384. 			&--active
  1385. 				background-color: #00a1d6;
  1386. 				color: #fff;
  1387. 				border-radius: 4px;
  1388. 		.search-condition-row		
  1389. 			margin-bottom: 10px;
  1390. 			width: 95%; //把纪录片选项挤到下一行，旧版纪录片在第二行
  1391. 			.search-channel-item //搜索条件 分区 容器
  1392. 				margin-top: 0px!important;
  1393. 				.vui_button--tab
  1394. 					margin-right: 6px!important;
  1395. 				&:nth-child(2) .vui_button--tab
  1396. 					margin-left: 6px!important;
  1397. 				&:nth-last-child(1) //分区第二行边距特殊
  1398. 				&:nth-last-child(2)
  1399. 				&:nth-last-child(3)
  1400. 					margin-top: 4px!important;
  1401. 				.search-sub-wrapper
  1402. 					height: auto;
  1403. 					bottom: -45px!important;
  1404. 					margin-bottom: 2px;
  1405. 					padding-top: 15px!important;
  1406. 					transition: none!important;
  1407. 					&:before
  1408. 						content: ''
  1409. 						background-image: url(//s1.hdslb.com/bfs/static/jinkela/search/assets/sprite-690be8a6ea.png);
  1410. 						background-position: -442px -285px;
  1411. 						width: 10px;
  1412. 						position: absolute;
  1413. 						height: 5px;
  1414. 						top: 10px;
  1415. 						left: calc(50% - 10px);
  1416. 					.search-sub-channel
  1417. 						padding: 0px!important;
  1418. 						border-radius: 4px!important;
  1419. 						border: 1px solid #e5e9ef!important;
  1420. 						background-color: #f4f5f7!important;
  1421. 						box-shadow: none!important;
  1422. 						.sub-channel-item
  1423. 							padding: 0px 12px;
  1424. 							line-height: 30px;
  1425. 							margin-right: 0!important;
  1426. 							font-size: 12px;
  1427. 							a
  1428. 								color: #000!important;
  1429. 		.i_button_more
  1430. 			height: auto!important;
  1431. 			border-radius: 4px;
  1432. 			line-height: 24px;
  1433. 			font-size: 12px!important;
  1434. 			color: #6d757a;
  1435. 			right: 0;
  1436. 			display: inline-block;
  1437. 			width: 74px;
  1438. 			text-align: center;
  1439. 			padding: 0px!important;
  1440. 			border: 0px;
  1441. 			transition: none;
  1442. 			&:hover
  1443. 				background-color: #e5e9ef;
  1444. 				color: #00a1d6;
  1445.  
  1446. 				
  1447. 					
  1448. 					
  1449. 	/* 搜索框（其他） start */
  1450. 			
  1451. 	/* 视频项目 start */
  1452. 	.video-list.row
  1453. 		&>div
  1454. 			flex:0 0 20%!important;
  1455. 			max-width:none!important;
  1456. 		.bili-video-card
  1457. 			height: 208px;
  1458. 			width: 168px;
  1459. 			border: 1px solid #e5e9ef;
  1460. 			border-radius: 4px;
  1461. 			box-sizing: content-box;
  1462. 			.bili-video-card__image
  1463. 				height: 100px;
  1464. 				border-radius: 4px!important;
  1465. 				&:hover
  1466. 					.bili-video-card__mask
  1467. 						opacity: inherit!important;
  1468. 						visibility: visible!important;
  1469. 					.bili-video-card__stats
  1470. 						&:before
  1471. 							opacity: 0;
  1472. 			.bili-video-card__wrap
  1473. 				height: 100%
  1474. 				display: flex;
  1475. 				flex-direction: column;
  1476. 			.bili-video-card__image--wrap
  1477. 				padding-top: 0px!important;
  1478. 				.bili-watch-later
  1479. 				picture
  1480. 					border-radius: inherit!important;
  1481. 					object-fit: fill!important;
  1482. 			.bili-video-card__stats
  1483. 				border-bottom-left-radius: 4px!important;
  1484. 				border-bottom-right-radius: 4px!important;
  1485. 				padding: 0px!important;
  1486. 				background-image: none!important;
  1487. 				height: auto!important;
  1488. 				&--left //播放量和弹幕量 把它从视频那边拽到信息那边
  1489. 					position: relative;
  1490. 					top: 75px!important;
  1491. 					left: 9px!important;
  1492. 					color: #99a2aa!important;
  1493. 					font-size: 12px!important;
  1494. 					line-height: 16px!important;
  1495. 					svg
  1496. 						color: #99a2aa!important;
  1497. 						width: svgSize+1!important;
  1498. 						height: svgSize+1!important;
  1499. 				&__duration //视频长度
  1500. 					position: absolute;
  1501. 					right: 0;
  1502. 					bottom: 0;
  1503. 					line-height: 18px;
  1504. 					padding: 0 5px;
  1505. 					color: #fff;
  1506. 					background-color: #333;
  1507. 					background-color: rgba(0,0,0,.5);
  1508. 					border-top-left-radius: 4px;
  1509. 			.bili-video-card__info //视频信息
  1510. 				padding: 8px 10px 0!important;
  1511. 				margin-top: 0px!important;
  1512. 				flex: 1;
  1513. 				&--tit //标题
  1514. 					lineHeight=20px;
  1515. 					font-size: 12px!important;
  1516. 					line-height: lineHeight!important;
  1517. 					color: #222!important;
  1518. 					font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif !important;
  1519. 					padding-right: 0px!important;
  1520. 					height:lineHeight*2!important;
  1521. 				&--right
  1522. 					height: 100%!important;
  1523. 					display: flex!important;
  1524. 					flex-direction: column!important;
  1525. 					justify-content: space-between!important;
  1526. 				&--bottom
  1527. 					margin-bottom: 8px!important;
  1528. 					font-size:12px!important;
  1529. 					line-height: 16px!important;
  1530. 					color:#99a2aa!important;
  1531. 				&--author-ico //UP主图标
  1532. 					width: svgSize!important;
  1533. 					height: svgSize!important;
  1534. 					use
  1535. 						stroke-width: 2px; //图片尺寸，但没有作用，需要找其他方法
  1536. 				&--cheese //课堂图标
  1537. 					width: svgSize+9!important;
  1538. 					height: svgSize!important;
  1539. 	/*  .to_hide_xs	//
  1540. 			.to_hide_md		//自适应不显示超过的视频项目
  1541. 			.to_hide_xl		//
  1542. 				display:block!important;
  1543. 			&>div:nth-last-child(1)
  1544. 			&>div:nth-last-child(2)
  1545. 				display:none!important; */
  1546. 	.video-v //直接搜索BV号的结果，采用列表显示方式（临时处理）
  1547. 		height: 132.188px; //列表高度
  1548. 		.bili-video-card__wrap //图片占比
  1549. 			>a:first-child
  1550. 				flex: 0 0 251px;
  1551. 				max-width: 251px;
  1552. 		.bili-video-card__info
  1553. 			.bili-video-card__av
  1554. 				width: 100%;
  1555. 				&--tit
  1556. 					width: 100%;
  1557. 					span:last-child //标题长度裁剪，省略号（新版好像没有这个）
  1558. 						text-overflow: ellipsis;
  1559. 						white-space: nowrap;
  1560. 						overflow: hidden;
  1561. 	/* 视频项目 end */
  1562.  
  1563. //番剧、综艺 视频播放页
  1564. stylusBangumi()
  1565. 	:root
  1566. 		--right-bar-width: 320px;
  1567. 		
  1568. 		--o: calc(16 * (0.743 * 100vh - 108.7px) / 9);
  1569. 		--r: calc(100vw - 152px - 350px);
  1570. 		--s: clamp(638px, calc(min(var(--r), var(--o))), 1280px);
  1571. 		--l: calc(var(--s) + 350px);
  1572. 		--video-height: calc(9 * (var(--s)) / 16 + 46px);
  1573.  
  1574. 	.main-container
  1575. 		--containerWidth: var(--l);
  1576.  
  1577. 	#bilibili-player-wrap
  1578. 		height: var(--video-height);
  1579. 		#bilibili-player
  1580. 			.bpx-player-sending-bar 
  1581. 				height:46px !important;
  1582. 	
  1583. 	div[class*="eplist_ep_list_wrapper"]
  1584. 		div[class*="numberList_wrapper"] 
  1585. 			gap: 10px 9px;
  1586. 			div[class*="numberListItem_number_list_item"] //单集数项目
  1587. 				width: 64px;
  1588. 				height: 36px;
  1589. 				border-radius: 2px;
  1590. 				background-color: #fff;
  1591. 				border: 1px solid #e5e9ef;
  1592. 				padding: 0;
  1593. 				text-align: center;
  1594. 				transition: none;
  1595. 				overflow: visible;
  1596. 				opacity: 1;
  1597. 				margin: 0px!important;
  1598. 				span[class*="numberListItem_title"] //单集数文字
  1599. 					overflow: hidden;
  1600. 					-o-text-overflow: ellipsis;
  1601. 					text-overflow: ellipsis;
  1602. 					white-space: nowrap;
  1603. 					height: 36px;
  1604. 					line-height: 36px;
  1605. 					display: block;
  1606. 					font-size: 12px;
  1607. 					font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  1608. 				div[class*="numberListItem_badge"] //单集数标识（限免、会员等）
  1609. 					height: 16px;
  1610. 					line-height: 16px;
  1611. 					top: -4px;
  1612. 					right: -2px;
  1613. 					font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  1614. 					border-radius: 0px;
  1615. 			div[class*="numberListItem_select"] //当前单集数项目
  1616. 				border-color: #00a1d6;
  1617. 				background-color: #00a1d6;
  1618. 				color: #fff;
  1619. 	div[class*="RecommendItem_wrap"]
  1620. 		div[class*="RecommendItem_cover"]
  1621. 			width: 141px;
  1622. 			height: 80px;
  1623. 			border-radius: 2px;
  1624. 		div[class*="RecommendItem_right_wrap"]
  1625. 			margin: 0px!important;		
  1626. 			div[class*="RecommendItem_title"]
  1627. 				font-family: -apple-system, BlinkMacSystemFont, Helvetica Neue, Helvetica, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, sans-serif;
  1628. 	stylusAreaComment()
  1629. 	stylusAreaCommentShadowDOMVer()
  1630. 	
  1631.  
  1632. @-moz-document url-prefix("https://www.bilibili.com/video/")
  1633. 	//视频播放页
  1634. 	if topbarVideo == 1
  1635. 		stylusTopbar()
  1636. 	if pageVideo == 1
  1637. 		stylusVideo()
  1638. 		
  1639. @-moz-document url-prefix("https://www.bilibili.com/list")
  1640. 	//视频列表 视频播放页（稍后再看 播放全部 等）
  1641. 	if topbarSearch == 1
  1642. 		stylusTopbar()
  1643. 	if pageVideo == 1
  1644. 		stylusVideo()
  1645. 		
  1646. @-moz-document url-prefix("https://search.bilibili.com/")
  1647. 	//搜索页
  1648. 	if topbarSearch == 1
  1649. 		stylusTopbar()
  1650. 	if pageSearch == 1
  1651. 		stylusSearch()
  1652. 	
  1653. @-moz-document url-prefix("https://space.bilibili.com/")
  1654. 	//个人空间
  1655. 	stylusTopbar()
  1656.  
  1657. @-moz-document url-prefix("https://www.bilibili.com/bangumi/play/ss")
  1658. 	//番剧、综艺播放页
  1659. 	stylusTopbar()
  1660. 	stylusBangumi()
  1661. 	
  1662. @-moz-document url-prefix("https://www.bilibili.com/bangumi/play/ep")
  1663. 	//电影、电视剧播放页
  1664. 	stylusTopbar()
  1665. 	stylusBangumi()
  1666. 	
  1667. @-moz-document url-prefix("https://t.bilibili.com/")
  1668. 	//动态首页
  1669. 	stylusTopbar()
  1670. 	
  1671. @-moz-document url-prefix("https://www.bilibili.com/read/")
  1672. 	//专栏
  1673. 	stylusTopbar()

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址