☰

YT Vibra [Updated]

YT Vibra - WIP

当前为 2024-12-27 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           YT Vibra [Updated]
  3. @namespace      typpi.online
  4. @version        1.0.1
  5. @description    YT Vibra - WIP
  6. @author         Nick2bad4u
  7. @license        UnLicense
  8. @homepageURL    https://github.com/Nick2bad4u/UserStyles
  9. ==/UserStyle== */
  10. @-moz-document domain("youtube.com") {
  11. 	#container.ytd-masthead {
  12. 		display: flex;
  13. 		-ms-flex-direction: row;
  14. 		-webkit-flex-direction: row;
  15. 		flex-direction: row;
  16. 		background: linear-gradient(90deg);
  17. 		padding: 0 16px;
  18. 		height: 56px;
  19. 		-ms-flex-align: center;
  20. 		-webkit-align-items: center;
  21. 		align-items: center;
  22. 		-ms-flex-pack: justify;
  23. 		-webkit-justify-content: space-between;
  24. 		justify-content: space-between;
  25. 	}
  26.  
  27. 	ytd-searchbox[mode='legacy']
  28. 		#container.ytd-searchbox,
  29. 	ytd-searchbox[mode='legacy-centered']
  30. 		#container.ytd-searchbox {
  31. 		box-shadow: inset 0 1px 2px
  32. 			var(
  33. 				--ytd-searchbox-legacy-border-shadow-color
  34. 			);
  35. 		border: 0;
  36. 		border-right: none;
  37. 		border-radius: 100px 0 0 100px;
  38. 		background-color: white !important;
  39. 		padding: 3px 6px;
  40. 		text-align: center;
  41. 	}
  42.  
  43. 	ytd-masthead[mode='legacy']
  44. 		#container.ytd-masthead {
  45. 		-ms-flex-pack: start;
  46. 		-webkit-justify-content: flex-start;
  47. 		justify-content: flex-start;
  48. 		background: linear-gradient(90deg);
  49. 	}
  50.  
  51. 	#search-button.ytd-masthead {
  52. 		display: block;
  53. 		margin-right: 0;
  54. 		color: white;
  55. 	}
  56.  
  57. 	#search-icon-legacy.ytd-searchbox {
  58. 		cursor: pointer;
  59. 		margin: 0;
  60. 		border: white;
  61. 		border-radius: 0 100px 100px 0;
  62. 		background-color: white;
  63. 		width: 65px;
  64. 	}
  65.  
  66. 	ytd-searchbox[mode='legacy']
  67. 		#container.ytd-searchbox {
  68. 		box-shadow: 0 0 0 0;
  69. 		border: white;
  70. 		border-right: none;
  71. 		border-radius: 100px 0 0 100px;
  72. 		background-color: white;
  73. 		padding: 2px 6px;
  74. 		text-align: center;
  75. 	}
  76.  
  77. 	ytd-searchbox[mode='legacy'][has-focus]
  78. 		#container.ytd-searchbox {
  79. 		box-shadow: inset 0 0 2px rgb(0 0 0 / 0%);
  80. 		border: 0 solid #1c62b9;
  81. 	}
  82.  
  83. 	li.sbsb_c.gsfs {
  84. 		text-align: center !important;
  85. 	}
  86.  
  87. 	#like-bar.ytd-sentiment-bar-renderer {
  88. 		transition: width 0.3s;
  89. 		background: linear-gradient();
  90. 		height: 2px;
  91. 	}
  92.  
  93. 	a.yt-simple-endpoint.yt-formatted-string {
  94. 		color: #ff5666;
  95. 	}
  96.  
  97. 	#owner-name.ytd-video-owner-renderer {
  98. 		font-weight: 500;
  99. 		font-size: 1.4rem;
  100. 		line-height: 1.6rem;
  101. 	}
  102.  
  103. 	div#sb-heading {
  104. 		background-color: rgb(
  105. 			255
  106. 			0
  107. 			0 /
  108. 			0%
  109. 		) !important;
  110. 		background: linear-gradient(90deg);
  111. 	}
  112.  
  113. 	#buttons.ytd-masthead[is-icon-button].ytd-masthead {
  114. 		color: white;
  115. 	}
  116.  
  117. 	div#ChanOver span {
  118. 		color: white !important;
  119. 	}
  120.  
  121. 	div#ChanOver {
  122. 		background-color: rgb(
  123. 			255
  124. 			0
  125. 			0 /
  126. 			0%
  127. 		) !important;
  128. 		background: linear-gradient(50deg);
  129. 		color: white !important;
  130. 	}
  131.  
  132. 	div#ChanOver h2 {
  133. 		color: white !important;
  134. 	}
  135.  
  136. 	div#ChanOver h3 {
  137. 		color: white !important;
  138. 	}
  139.  
  140. 	div#ChanOver a {
  141. 		color: white !important;
  142. 	}
  143.  
  144. 	div#sb-heading {
  145. 		background-color: rgb(
  146. 			255
  147. 			0
  148. 			0 /
  149. 			0%
  150. 		) !important;
  151. 		background: url("https://i.imgur.com/dc7CRrl.png");
  152. 		background-position: center;
  153. 	}
  154.  
  155. 	div#sb-heading a {
  156. 		opacity: 0%;
  157. 	}
  158.  
  159. 	div#ChanOver div {
  160. 		border-right: 0 !important;
  161. 		border-bottom: 0 solid !important;
  162. 	}
  163.  
  164. 	div#socialblade-stats {
  165. 		background: linear-gradient(90deg) !important;
  166. 	}
  167.  
  168. 	div#vid-tags-outdated div {
  169. 		color: white !important;
  170. 	}
  171.  
  172. 	ytd-searchbox[mode='legacy'][has-focus]
  173. 		#container.ytd-searchbox,
  174. 	ytd-searchbox[mode='legacy-centered'][has-focus]
  175. 		#container.ytd-searchbox {
  176. 		box-shadow: inset 0 1px 2px rgb(0 0 0 / 30%);
  177. 		border: 0 !important;
  178. 	}
  179.  
  180. 	div#SBMenu div h3 {
  181. 		border-right: 0 !important;
  182. 		background-color: white !important;
  183. 		color: #fa3d69 !important;
  184. 	}
  185.  
  186. 	div#SBMenu div {
  187. 		border-right: 0 !important;
  188. 		background-color: white !important;
  189. 		color: #fa3d69 !important;
  190. 	}
  191.  
  192. 	p#vid-tags span {
  193. 		border-radius: 100px !important;
  194. 		background-color: white !important;
  195. 		color: var(--yt-primary-color) !important;
  196. 	}
  197.  
  198. 	ytd-searchbox[mode='legacy']
  199. 		#container.ytd-searchbox
  200. 		input.ytd-searchbox,
  201. 	ytd-searchbox[mode='legacy-centered']
  202. 		#container.ytd-searchbox
  203. 		input.ytd-searchbox {
  204. 		color: black !important;
  205. 	}
  206.  
  207. 	a#SBL div {
  208. 		background: white !important;
  209. 		color: black !important;
  210. 	}
  211.  
  212. 	a#SBL div h3 {
  213. 		background: white !important;
  214. 		color: black !important;
  215. 	}
  216.  
  217. 	div#socialblade {
  218. 		box-shadow: 1px 0 16px 1px #0000003b;
  219. 	}
  220.  
  221. 	a#SBLC div h3 {
  222. 		color: black !important;
  223. 	}
  224.  
  225. 	a#SBLC div {
  226. 		background-color: white !important;
  227. 	}
  228.  
  229. 	a#SBLC div:hover {
  230. 		background-color: grey !important;
  231. 	}
  232.  
  233. 	a#SBLC div {
  234. 		background-color: white !important;
  235. 	}
  236.  
  237. 	paper-toggle-button[checked]:not([disabled])
  238. 		.toggle-bar.paper-toggle-button {
  239. 		opacity: 100%;
  240. 		background-color: #ff000000;
  241. 		background: linear-gradient(90deg);
  242. 	}
  243.  
  244. 	paper-toggle-button[checked]:not([disabled])
  245. 		.toggle-button.paper-toggle-button {
  246. 		background-color: #fe3e8f05;
  247. 		background: linear-gradient(90deg);
  248. 	}
  249.  
  250. 	span.count {
  251. 		color: black !important;
  252. 		font-weight: lighter !important;
  253. 	}
  254.  
  255. 	ytd-button-renderer.style-primary[is-paper-button] {
  256. 		border-radius: 100px;
  257. 		background-color: hsl(206deg 79% 53% / 0%);
  258. 		background: linear-gradient(90deg);
  259. 		color: hsl(0deg 0% 100%);
  260. 	}
  261.  
  262. 	a#iridium_settings_button svg {
  263. 		color: white;
  264. 	}
  265.  
  266. 	g#youtube-paths path {
  267. 		fill: white !important;
  268. 	}
  269.  
  270. 	body[invert]
  271. 		yt-icon#logo-icon.ytd-topbar-logo-renderer
  272. 		svg {
  273. 		opacity: 0%;
  274. 	}
  275.  
  276. 	body[invert]
  277. 		yt-icon#logo-icon.ytd-topbar-logo-renderer {
  278. 		background: url("https://i.imgur.com/oHv7EEw.png");
  279. 		background-position: center;
  280. 		background-size: contain;
  281. 		background-repeat: no-repeat;
  282. 		width: 80px;
  283. 	}
  284.  
  285. 	app-drawer.ytd-app:not([persistent])
  286. 		#header.ytd-app {
  287. 		background: linear-gradient(90deg);
  288. 	}
  289.  
  290. 	.ytp-play-progress.ytp-swatch-background-color {
  291. 		background: linear-gradient(90deg);
  292. 	}
  293.  
  294. 	#guide-icon.ytd-masthead {
  295. 		fill: white;
  296. 	}
  297.  
  298. 	#guide-icon.ytd-app {
  299. 		fill: white;
  300. 	}
  301.  
  302. 	section.vc-stat-section.third-layout div span {
  303. 		color: var(--yt-primary-color) !important;
  304. 	}
  305.  
  306. 	.vc-stat-section .stat-box.alt {
  307. 		border-color: white;
  308. 		background: rgb(255 255 255);
  309. 	}
  310.  
  311. 	paper-button.ytd-subscribe-button-renderer {
  312. 		display: flex;
  313. 		-ms-flex-direction: row;
  314. 		-webkit-flex-direction: row;
  315. 		flex-direction: row;
  316. 		margin: auto 4px;
  317. 		border-radius: 2px;
  318. 		background-color: #ff000005;
  319. 		background: linear-gradient(90deg);
  320. 		padding: 10px 16px;
  321. 		font-weight: 300;
  322. 		font-size: 1.4rem;
  323. 		letter-spacing: 0.007px;
  324. 		text-transform: uppercase;
  325. 		white-space: nowrap;
  326. 	}
  327.  
  328. 	.video-companion-container
  329. 		ul.keywords
  330. 		.search-rank {
  331. 		display: inline-block;
  332. 		vertical-align: middle;
  333. 		margin-left: 0.5em;
  334. 		background: linear-gradient(90deg);
  335. 		padding: 0 3px;
  336. 		height: 15px;
  337. 		color: white;
  338. 		font-weight: bold;
  339. 		line-height: 15px;
  340. 	}
  341.  
  342. 	.vidiq-logo-container {
  343. 		filter: brightness(0) !important;
  344. 	}
  345.  
  346. 	img#sb-return {
  347. 		filter: brightness(100000%);
  348. 		padding-right: 10px;
  349. 	}
  350.  
  351. 	#socialblade-tab paper-button {
  352. 		display: flex;
  353. 		-ms-flex-direction: row;
  354. 		-webkit-flex-direction: row;
  355. 		flex-direction: row;
  356. 		margin: auto 4px;
  357. 		border-radius: 2px;
  358. 		background-color: #ff6c7b !important;
  359. 		padding: 10px 16px;
  360. 		color: #ffffff !important;
  361. 		font-weight: 500;
  362. 		font-size: 1.4rem;
  363. 		letter-spacing: 0.007px;
  364. 		text-transform: uppercase;
  365. 		white-space: nowrap;
  366. 	}
  367.  
  368. 	.vidiq-rating-bar-container
  369. 		.vidiq-rating-bar
  370. 		.vidiq-rating-likes {
  371. 		background: linear-gradient(90deg) ​;
  372. 		height: 5px;
  373. 	}
  374.  
  375. 	ytd-guide-entry-renderer[active]
  376. 		.guide-icon.ytd-guide-entry-renderer {
  377. 		color: var(--yt-primary-color) !important;
  378. 	}
  379.  
  380. 	.badge-style-type-featured.ytd-badge-supported-renderer {
  381. 		border-radius: 10px;
  382. 		background: linear-gradient(90deg);
  383. 		padding: 6px 10px 5px;
  384. 		color: hsl(0deg 0% 100%);
  385. 		font-weight: 100;
  386. 		letter-spacing: 2px;
  387. 		text-transform: uppercase;
  388. 	}
  389.  
  390. 	.vidiq-rating-bar-container
  391. 		.vidiq-rating-bar
  392. 		.vidiq-rating-likes {
  393. 		background: #f98a5f;
  394. 		height: 5px;
  395. 	}
  396.  
  397. 	yt-icon.ytd-badge-supported-renderer {
  398. 		background: url("https://i.imgur.com/FhRzUqU.png");
  399. 		background-position: center;
  400. 		background-size: 116%;
  401. 		background-repeat: no-repeat;
  402. 		color: #b3b1b100;
  403. 	}
  404.  
  405. 	.vidiq-rating-bar {
  406. 		background-color: #faae90 !important;
  407. 	}
  408.  
  409. 	#search-icon-legacy.ytd-searchbox {
  410. 		cursor: pointer;
  411. 		margin: 0;
  412. 		box-shadow: 1px 0 19px 0 #1010102b;
  413. 		border: white;
  414. 		border-radius: 0 100px 100px 0;
  415. 		width: 65px;
  416. 	}
  417.  
  418. 	ytd-searchbox[mode='legacy']
  419. 		#container.ytd-searchbox
  420. 		input.ytd-searchbox {
  421. 		color: black;
  422. 	}
  423.  
  424. 	button.vidiq-button {
  425. 		border: 0 solid !important;
  426. 		border-radius: 100px;
  427. 		background: linear-gradient(90deg);
  428. 		font-family: Roboto;
  429. 		text-transform: uppercase;
  430. 	}
  431.  
  432. 	.ytp-chrome-controls
  433. 		.ytp-button[aria-pressed]::after {
  434. 		background: linear-gradient(90deg);
  435. 	}
  436.  
  437. 	#country-code.ytd-topbar-logo-renderer {
  438. 		margin: 0 0 0 2px;
  439. 		color: white !important;
  440. 	}
  441.  
  442. 	paper-button[subscribed].ytd-subscribe-button-renderer {
  443. 		background-color: hsl(0deg 0% 93.3%);
  444. 		color: hsl(0deg 28% 96% / 96%);
  445. 	}
  446.  
  447. 	img.vidiq-button-logo.vidiq-button-logo-small {
  448. 		background-color: #fe3d91;
  449. 	}
  450.  
  451. 	#search-icon-legacy.ytd-searchbox {
  452. 		cursor: pointer;
  453. 		margin: 0;
  454. 		box-shadow: 1px 0 19px 0 #1010102b;
  455. 		border: white;
  456. 		border-radius: 0 100px 100px 0;
  457. 		background-color: white !important;
  458. 		width: 65px;
  459. 	}
  460.  
  461. 	#logo-icon-container.ytd-topbar-logo-renderer {
  462. 		-ms-flex: none;
  463. 		-webkit-flex: none;
  464. 		flex: none;
  465. 		background: url("https://i.imgur.com/oHv7EEw.png");
  466. 		background-position: center;
  467. 		background-size: contain;
  468. 		background-repeat: no-repeat;
  469. 		width: 80px;
  470. 		height: 24px;
  471. 	}
  472.  
  473. 	svg.style-scope.ytd-topbar-logo-renderer {
  474. 		fill-opacity: 0%;
  475. 	}
  476.  
  477. 	header.video-companion-header {
  478. 		margin-bottom: -2px;
  479. 		background: linear-gradient(90deg);
  480. 		padding: 15px;
  481. 	}
  482.  
  483. 	button.toggle-collapse {
  484. 		margin-top: 18px;
  485. 		margin-right: 11px;
  486. 	}
  487.  
  488. 	.vidiq-logo-container {
  489. 		margin-right: 18px;
  490. 		margin-bottom: 16px;
  491. 	}
  492.  
  493. 	yt-icon.style-scope.ytd-searchbox {
  494. 		color: black !important;
  495. 	}
  496.  
  497. 	div#SBMenu div h3 {
  498. 		border-right: 0 !important;
  499. 		background-color: white !important;
  500. 		color: black !important;
  501. 	}
  502.  
  503. 	div#ChanOver a div h3 {
  504. 		color: black !important;
  505. 	}
  506.  
  507. 	div#ChanOver div {
  508. 		border-left: 0 !important;
  509. 	}
  510.  
  511. 	span.value-inner {
  512. 		-webkit-text-fill-color: black !important;
  513. 	}
  514.  
  515. 	div#sb-heading {
  516. 		background-color: rgb(
  517. 			255
  518. 			0
  519. 			0 /
  520. 			0%
  521. 		) !important;
  522. 		background: linear-gradient(90deg) !important;
  523. 		background-position: center;
  524. 	}
  525.  
  526. 	div#sb-heading a {
  527. 		opacity: 100% !important;
  528. 		margin-top: -100px;
  529. 		margin-left: 12px;
  530. 		background: url("https://i.imgur.com/TvIeZZx.png");
  531. 		background-position: center;
  532. 		background-size: 62%;
  533. 		background-repeat: no-repeat;
  534. 		padding: 100px 0 49px 100px;
  535. 	}
  536.  
  537. 	div#sb-heading a img {
  538. 		opacity: 0% !important;
  539. 	}
  540.  
  541. 	img#sb-return {
  542. 		margin: 16px 8px 0 0 !important;
  543. 	}
  544.  
  545. 	.ytp-scrubber-button.ytp-swatch-background-color {
  546. 		background: linear-gradient(
  547. 			270deg
  548. 		) !important;
  549. 	}
  550.  
  551. 	.ytp-menuitem[aria-checked='true']
  552. 		.ytp-menuitem-toggle-checkbox {
  553. 		background: linear-gradient(
  554. 			270deg
  555. 		) !important;
  556. 	}
  557.  
  558. 	a.yt-simple-endpoint.yt-formatted-string {
  559. 		color: var(--yt-primary-color) !important;
  560. 		font-weight: 500;
  561. 	}
  562.  
  563. 	.deemphasize.yt-formatted-string {
  564. 		margin-left: var(
  565. 			--yt-formatted-string-deemphasize_-_margin-left
  566. 		);
  567. 		color: var(
  568. 			--yt-formatted-string-deemphasize-color
  569. 		);
  570. 		color: white;
  571. 	}
  572.  
  573. 	.vidiq-subscriber-count.new-layout span {
  574. 		color: black !important;
  575. 	}
  576.  
  577. 	.vc-section-social .stat-pair-like-ratio label,
  578. 	.vc-section-social[class^='stat-pair-yt'] label,
  579. 	.vc-section-social
  580. 		.stat-pair-like-ratio
  581. 		.value-inner,
  582. 	.vc-section-social[class^='stat-pair-yt']
  583. 		.value-inner,
  584. 	.vc-section-social .stat-pair-like-ratio .unit,
  585. 	.vc-section-social[class^='stat-pair-yt']
  586. 		.unit {
  587. 		color: black !important;
  588. 	}
  589.  
  590. 	header.video-companion-header button i {
  591. 		color: white;
  592. 	}
  593.  
  594. 	button.tab-tweets span svg {
  595. 		color: white !important;
  596. 		fill: white !important;
  597. 		filter: brightness(100000%) !important;
  598. 	}
  599.  
  600. 	.vidiq-logo-container {
  601. 	}
  602. 	#container.ytd-searchbox {
  603. 		display: var(--layout-horizontal_-_display);
  604. 		position: relative;
  605. 		-ms-flex: 1 1 0.000000001px;
  606. 		-webkit-flex: 1;
  607. 		flex: 1;
  608. 		-webkit-flex-basis: 0.000000001px;
  609. 		flex-basis: 0.000000001px;
  610. 		-ms-flex-direction: var(
  611. 			--layout-horizontal_-_-ms-flex-direction
  612. 		);
  613. 		-webkit-flex-direction: var(
  614. 			--layout-horizontal_-_-webkit-flex-direction
  615. 		);
  616. 		flex-direction: var(
  617. 			--layout-horizontal_-_flex-direction
  618. 		);
  619. 		align-items: center;
  620. 		box-shadow: inset 0 1px 2px
  621. 			var(
  622. 				--ytd-searchbox-legacy-border-shadow-color
  623. 			);
  624. 		border: 1px solid hsl(0deg 0% 100%);
  625. 		border-right: none;
  626. 		border-radius: 100px 0 0 100px;
  627. 		background-color: hsl(0deg 0% 100%);
  628. 		padding: 2px 15px;
  629. 		color: hsl(0deg 0% 0% / 88%);
  630. 		text-align: center;
  631. 	}
  632.  
  633. 	#container.ytd-searchbox input.ytd-searchbox {
  634. 		color: hsl(0deg 0% 0% / 88%);
  635. 	}
  636.  
  637. 	ytd-subscribe-button-renderer[new-subscribe-color]
  638. 		paper-button.ytd-subscribe-button-renderer[subscribed] {
  639. 		background-color: var(
  640. 			--yt-spec-10-percent-layer
  641. 		);
  642. 		color: #ffffff;
  643. 	}
  644.  
  645. 	ytd-author-comment-badge-renderer {
  646. 		--ytd-author-comment-badge-name-color: var(
  647. 			--yt-spec-text-primary
  648. 		);
  649. 		-ms-flex-direction: var(
  650. 			--layout-horizontal_-_-ms-flex-direction
  651. 		);
  652. 		-webkit-flex-direction: var(
  653. 			--layout-horizontal_-_-webkit-flex-direction
  654. 		);
  655. 		flex-direction: var(
  656. 			--layout-horizontal_-_flex-direction
  657. 		);
  658. 		margin-bottom: 2px;
  659. 		border-radius: 12px;
  660. 		background-color: linear-gradient(
  661. 			270deg
  662. 		) !important;
  663. 		height: 20px;
  664. 		-ms-flex-align: center;
  665. 		display: inline-flex;
  666. 		-webkit-align-items: center;
  667. 		align-items: center;
  668. 	}
  669.  
  670. 	ytd-masthead[mode='legacy']
  671. 		#container.ytd-masthead {
  672. 		-ms-flex-pack: start;
  673. 		-webkit-justify-content: flex-start;
  674. 		justify-content: flex-start;
  675. 		background: linear-gradient(90deg);
  676. 	}
  677.  
  678. 	#search-icon-legacy.ytd-searchbox {
  679. 		cursor: pointer;
  680. 		margin: 0;
  681. 		border: white;
  682. 		border-radius: 0 100px 100px 0;
  683. 		background-color: white;
  684. 		width: 65px;
  685. 	}
  686.  
  687. 	ytd-searchbox[mode='legacy']
  688. 		#container.ytd-searchbox {
  689. 		box-shadow: 0 0 0 0;
  690. 		border: white;
  691. 		border-right: none;
  692. 		border-radius: 100px 0 0 100px;
  693. 		background-color: white;
  694. 		padding: 2px 6px;
  695. 		text-align: center;
  696. 	}
  697.  
  698. 	ytd-searchbox[mode='legacy'][has-focus]
  699. 		#container.ytd-searchbox {
  700. 		box-shadow: inset 0 0 2px rgb(0 0 0 / 0%);
  701. 		border: 0 solid #1c62b9;
  702. 	}
  703.  
  704. 	li.sbsb_c.gsfs {
  705. 		text-align: center !important;
  706. 	}
  707.  
  708. 	#like-bar.ytd-sentiment-bar-renderer {
  709. 		transition: width 0.3s;
  710. 		background: linear-gradient();
  711. 		height: 2px;
  712. 	}
  713.  
  714. 	a.yt-simple-endpoint.yt-formatted-string {
  715. 		color: var(--yt-primary-color) !important;
  716. 	}
  717.  
  718. 	#owner-name.ytd-video-owner-renderer {
  719. 		font-weight: 500;
  720. 		font-size: 1.4rem;
  721. 		line-height: 1.6rem;
  722. 	}
  723.  
  724. 	div#sb-heading {
  725. 		background-color: rgb(
  726. 			255
  727. 			0
  728. 			0 /
  729. 			0%
  730. 		) !important;
  731. 		background: linear-gradient(90deg);
  732. 	}
  733.  
  734. 	#buttons.ytd-masthead[is-icon-button].ytd-masthead {
  735. 		color: white;
  736. 	}
  737.  
  738. 	div#ChanOver span {
  739. 		color: white !important;
  740. 	}
  741.  
  742. 	div#ChanOver {
  743. 		background-color: rgb(
  744. 			255
  745. 			0
  746. 			0 /
  747. 			0%
  748. 		) !important;
  749. 		background: linear-gradient(50deg);
  750. 		color: white !important;
  751. 	}
  752.  
  753. 	div#ChanOver h2 {
  754. 		color: white !important;
  755. 	}
  756.  
  757. 	div#ChanOver h3 {
  758. 		color: white !important;
  759. 	}
  760.  
  761. 	div#ChanOver a {
  762. 		color: white !important;
  763. 	}
  764.  
  765. 	div#sb-heading {
  766. 		background-color: rgb(
  767. 			255
  768. 			0
  769. 			0 /
  770. 			0%
  771. 		) !important;
  772. 		background: url("https://i.imgur.com/dc7CRrl.png");
  773. 		background-position: center;
  774. 	}
  775.  
  776. 	div#sb-heading a {
  777. 		opacity: 0%;
  778. 	}
  779.  
  780. 	div#ChanOver div {
  781. 		border-right: 0 !important;
  782. 		border-bottom: 0 solid !important;
  783. 	}
  784.  
  785. 	div#socialblade-stats {
  786. 		background: linear-gradient(
  787. 			90deg
  788. 		) !important;
  789. 	}
  790.  
  791. 	div#vid-tags-outdated div {
  792. 		color: white !important;
  793. 	}
  794.  
  795. 	div#SBMenu div h3 {
  796. 		border-right: 0 !important;
  797. 		background-color: white !important;
  798. 		color: var(--yt-primary-color) !important;
  799. 	}
  800.  
  801. 	div#SBMenu div {
  802. 		border-right: 0 !important;
  803. 		background-color: white !important;
  804. 		color: var(--yt-primary-color) !important;
  805. 	}
  806.  
  807. 	p#vid-tags span {
  808. 		border-radius: 100px !important;
  809. 		background-color: white !important;
  810. 		color: var(--yt-primary-color) !important;
  811. 	}
  812.  
  813. 	a#SBL div {
  814. 		background: white !important;
  815. 		color: black !important;
  816. 	}
  817.  
  818. 	a#SBL div h3 {
  819. 		background: white !important;
  820. 		color: var(--yt-primary-color) !important;
  821. 	}
  822.  
  823. 	div#socialblade {
  824. 		box-shadow: 1px 0 16px 1px #0000003b;
  825. 	}
  826.  
  827. 	a#SBLC div h3 {
  828. 		color: var(--yt-primary-color) !important;
  829. 	}
  830.  
  831. 	a#SBLC div {
  832. 		background-color: white !important;
  833. 	}
  834.  
  835. 	a#SBLC div:hover {
  836. 		background-color: grey !important;
  837. 	}
  838.  
  839. 	a#SBLC div {
  840. 		background-color: white !important;
  841. 	}
  842.  
  843. 	paper-toggle-button[checked]:not([disabled])
  844. 		.toggle-bar.paper-toggle-button {
  845. 		opacity: 100%;
  846. 		background-color: #ff000000;
  847. 		background: linear-gradient(90deg);
  848. 	}
  849.  
  850. 	paper-toggle-button[checked]:not([disabled])
  851. 		.toggle-button.paper-toggle-button {
  852. 		background-color: var(
  853. 			--yt-primary-color
  854. 		) !important;
  855. 		background: linear-gradient(90deg);
  856. 	}
  857.  
  858. 	yt-icon.style-scope.ytd-topbar-menu-button-renderer {
  859. 		fill: white !important;
  860. 		color: white !important;
  861. 	}
  862.  
  863. 	span.count {
  864. 		color: var(--yt-primary-color) !important;
  865. 		font-weight: lighter !important;
  866. 	}
  867.  
  868. 	ytd-button-renderer.style-primary[is-paper-button] {
  869. 		border-radius: 100px;
  870. 		background-color: hsl(206deg 79% 53% / 0%);
  871. 		background: linear-gradient(90deg);
  872. 		color: hsl(0deg 0% 100%);
  873. 	}
  874.  
  875. 	a#iridium_settings_button svg {
  876. 		color: white;
  877. 	}
  878.  
  879. 	g#youtube-paths path {
  880. 		fill: white !important;
  881. 	}
  882.  
  883. 	polygon.style-scope.yt-icon {
  884. 		fill: var(--yt-primary-color) !important;
  885. 	}
  886.  
  887. 	body[invert]
  888. 		yt-icon#logo-icon.ytd-topbar-logo-renderer
  889. 		svg {
  890. 		opacity: 0%;
  891. 	}
  892.  
  893. 	body[invert]
  894. 		yt-icon#logo-icon.ytd-topbar-logo-renderer {
  895. 		background: url("https://i.imgur.com/oHv7EEw.png");
  896. 		background-position: center;
  897. 		background-size: contain;
  898. 		background-repeat: no-repeat;
  899. 		width: 80px;
  900. 	}
  901.  
  902. 	app-drawer.ytd-app:not([persistent])
  903. 		#header.ytd-app {
  904. 		background: linear-gradient(90deg);
  905. 	}
  906.  
  907. 	.ytp-play-progress.ytp-swatch-background-color {
  908. 		background: linear-gradient(90deg);
  909. 	}
  910.  
  911. 	#guide-icon.ytd-masthead {
  912. 		fill: white;
  913. 	}
  914.  
  915. 	#guide-icon.ytd-app {
  916. 		fill: white;
  917. 	}
  918.  
  919. 	section.vc-stat-section.third-layout div span {
  920. 		color: var(--yt-primary-color) !important;
  921. 	}
  922.  
  923. 	.vc-stat-section .stat-box.alt {
  924. 		border-color: white;
  925. 		background: rgb(255 255 255);
  926. 	}
  927.  
  928. 	paper-button.ytd-subscribe-button-renderer {
  929. 		display: flex;
  930. 		-ms-flex-direction: row;
  931. 		-webkit-flex-direction: row;
  932. 		flex-direction: row;
  933. 		margin: auto 4px;
  934. 		border-radius: 2px;
  935. 		background-color: #ff000005;
  936. 		background: linear-gradient(90deg);
  937. 		padding: 10px 16px;
  938. 		font-weight: 300;
  939. 		font-size: 1.4rem;
  940. 		letter-spacing: 0.007px;
  941. 		text-transform: uppercase;
  942. 		white-space: nowrap;
  943. 	}
  944.  
  945. 	.video-companion-container
  946. 		ul.keywords
  947. 		.search-rank {
  948. 		display: inline-block;
  949. 		vertical-align: middle;
  950. 		margin-left: 0.5em;
  951. 		background: linear-gradient(90deg);
  952. 		padding: 0 3px;
  953. 		height: 15px;
  954. 		color: white;
  955. 		font-weight: bold;
  956. 		line-height: 15px;
  957. 	}
  958.  
  959. 	.vidiq-logo-container {
  960. 		filter: brightness(0) !important;
  961. 	}
  962.  
  963. 	img#sb-return {
  964. 		filter: brightness(100000%);
  965. 		padding-right: 10px;
  966. 	}
  967.  
  968. 	#socialblade-tab paper-button {
  969. 		display: flex;
  970. 		-ms-flex-direction: row;
  971. 		-webkit-flex-direction: row;
  972. 		flex-direction: row;
  973. 		margin: auto 4px;
  974. 		border-radius: 2px;
  975. 		background-color: #ff6c7b !important;
  976. 		padding: 10px 16px;
  977. 		color: #ffffff !important;
  978. 		font-weight: 500;
  979. 		font-size: 1.4rem;
  980. 		letter-spacing: 0.007px;
  981. 		text-transform: uppercase;
  982. 		white-space: nowrap;
  983. 	}
  984.  
  985. 	.vidiq-rating-bar-container
  986. 		.vidiq-rating-bar
  987. 		.vidiq-rating-likes {
  988. 		background: linear-gradient(90deg) ​;
  989. 		height: 5px;
  990. 	}
  991.  
  992. 	ytd-guide-entry-renderer[active]
  993. 		.guide-icon.ytd-guide-entry-renderer {
  994. 		color: var(--yt-primary-color) !important;
  995. 	}
  996.  
  997. 	.badge-style-type-featured.ytd-badge-supported-renderer {
  998. 		border-radius: 10px;
  999. 		background: linear-gradient(90deg);
  1000. 		padding: 6px 10px 5px;
  1001. 		color: hsl(0deg 0% 100%);
  1002. 		font-weight: 100;
  1003. 		letter-spacing: 2px;
  1004. 		text-transform: uppercase;
  1005. 	}
  1006.  
  1007. 	.vidiq-rating-bar-container
  1008. 		.vidiq-rating-bar
  1009. 		.vidiq-rating-likes {
  1010. 		background: #f98a5f;
  1011. 		height: 5px;
  1012. 	}
  1013.  
  1014. 	yt-icon.ytd-badge-supported-renderer {
  1015. 		background: url("https://i.imgur.com/FhRzUqU.png");
  1016. 		background-position: center;
  1017. 		background-size: 116%;
  1018. 		background-repeat: no-repeat;
  1019. 		color: #b3b1b100;
  1020. 	}
  1021.  
  1022. 	.vidiq-rating-bar {
  1023. 		background-color: #faae90 !important;
  1024. 	}
  1025.  
  1026. 	#search-icon-legacy.ytd-searchbox {
  1027. 		cursor: pointer;
  1028. 		margin: 0;
  1029. 		box-shadow: 1px 0 19px 0 #1010102b;
  1030. 		border: white;
  1031. 		border-radius: 0 100px 100px 0;
  1032. 		background-color: #ff516e;
  1033. 		width: 65px;
  1034. 	}
  1035.  
  1036. 	ytd-searchbox[mode='legacy']
  1037. 		#container.ytd-searchbox
  1038. 		input.ytd-searchbox {
  1039. 		color: black;
  1040. 	}
  1041.  
  1042. 	button.vidiq-button {
  1043. 		border: 0 solid !important;
  1044. 		border-radius: 100px;
  1045. 		background: linear-gradient(90deg);
  1046. 		font-family: Roboto;
  1047. 		text-transform: uppercase;
  1048. 	}
  1049.  
  1050. 	#search-icon-legacy.ytd-searchbox {
  1051. 		cursor: pointer;
  1052. 		margin: 0;
  1053. 		box-shadow: 1px 0 19px 0 #1010102b;
  1054. 		border: white;
  1055. 		border-radius: 0 100px 100px 0;
  1056. 		background-color: white !important;
  1057. 		width: 65px;
  1058. 	}
  1059.  
  1060. 	div#SBMenu div h3 {
  1061. 		border-right: 0 !important;
  1062. 		background-color: white !important;
  1063. 		color: black !important;
  1064. 	}
  1065.  
  1066. 	span.value-inner {
  1067. 		-moz-text-fill-color: black !important;
  1068. 	}
  1069.  
  1070. 	div#sb-heading {
  1071. 		background-color: rgb(
  1072. 			255
  1073. 			0
  1074. 			0 /
  1075. 			0%
  1076. 		) !important;
  1077. 		background: moz-linear-gradient(
  1078. 			90deg
  1079. 		) !important;
  1080. 		background-position: center;
  1081. 	}
  1082.  
  1083. 	div#sb-heading a {
  1084. 		opacity: 100% !important;
  1085. 		margin-top: -100px;
  1086. 		margin-left: 12px;
  1087. 		background: url("https://i.imgur.com/TvIeZZx.png");
  1088. 		background-position: center;
  1089. 		background-size: 62%;
  1090. 		background-repeat: no-repeat;
  1091. 		padding: 100px 0 49px 100px;
  1092. 	}
  1093.  
  1094. 	.ytp-scrubber-button.ytp-swatch-background-color {
  1095. 		background: moz-linear-gradient(
  1096. 			270deg
  1097. 		) !important;
  1098. 	}
  1099.  
  1100. 	.ytp-cards-teaser-text {
  1101. 		border-radius: 100px;
  1102. 	}
  1103.  
  1104. 	video.video-stream.html5-main-video {
  1105. 		border-radius: 8px;
  1106. 	}
  1107.  
  1108. 	ytd-watch:not([transparent-player-background_])
  1109. 		#player-container.ytd-watch,
  1110. 	ytd-watch[flexy-fit-to-video_]:not(
  1111. 			[is-currently-flexible_]
  1112. 		)
  1113. 		#player-container.ytd-watch,
  1114. 	ytd-watch[theater] #player-container.ytd-watch {
  1115. 		background-color: #0000 !important;
  1116. 	}
  1117.  
  1118. 	ytd-watch:not([transparent-player-background_])
  1119. 		#player-container.ytd-watch,
  1120. 	ytd-watch[flexy-fit-to-video_]:not(
  1121. 			[is-currently-flexible_]
  1122. 		)
  1123. 		#player-container.ytd-watch,
  1124. 	ytd-watch[theater] #player-container.ytd-watch {
  1125. 		background-color: #0000 !important;
  1126. 	}
  1127.  
  1128. 	#player-container.ytd-watch {
  1129. 		position: relative;
  1130. 		margin: 0 auto;
  1131. 		border-radius: 8px;
  1132. 		width: 100%;
  1133. 		height: 100%;
  1134. 	}
  1135.  
  1136. 	#top
  1137. 		> #player
  1138. 		#movie_player:not(.ytp-fullscreen)
  1139. 		video,
  1140. 	#top
  1141. 		> #player
  1142. 		#movie_player:not(.ytp-fullscreen)
  1143. 		.html5-video-container {
  1144. 		border-radius: 8px !important;
  1145. 		height: 100% !important;
  1146. 	}
  1147.  
  1148. 	div#player {
  1149. 		border-radius: 8px !important;
  1150. 	}
  1151.  
  1152. 	#player.ytd-watch {
  1153. 		position: relative;
  1154. 		-ms-flex: none;
  1155. 		-webkit-flex: none;
  1156. 		flex: none;
  1157. 		border-radius: 8px !important;
  1158. 	}
  1159.  
  1160. 	video.video-stream.html5-main-video {
  1161. 		border-radius: 8px !important;
  1162. 	}
  1163.  
  1164. 	.html5-video-player:not(.ytp-transparent),
  1165. 	.html5-video-player.ad-interrupting,
  1166. 	.html5-video-player.ended-mode,
  1167. 	.html5-video-player.ytp-fullscreen {
  1168. 		background-color: #ff373700;
  1169. 	}
  1170.  
  1171. 	p#vid-tags span {
  1172. 		border-radius: 100px !important;
  1173. 		background-color: white !important;
  1174. 		color: #000000fa !important;
  1175. 	}
  1176.  
  1177. 	.vidiq-subscriber-count.new-layout span {
  1178. 		color: black !important;
  1179. 	}
  1180.  
  1181. 	.vidiq-logo-container {
  1182. 		filter: invert(100%) !important;
  1183. 		filter: brightness(10000000000%) !important;
  1184. 	}
  1185.  
  1186. 	header.video-companion-header {
  1187. 		padding-bottom: 19px;
  1188. 	}
  1189.  
  1190. 	#thumbnail.ytd-thumbnail {
  1191. 		position: absolute;
  1192. 		inset: 0;
  1193. 		border-radius: 5px;
  1194. 	}
  1195.  
  1196. 	img.yt-img-shadow {
  1197. 		display: block;
  1198. 		margin-right: auto;
  1199. 		margin-left: auto;
  1200. 		border-radius: 5px;
  1201. 		max-width: var(--yt-img-max-width, 100%);
  1202. 		max-height: var(--yt-img-max-height, none);
  1203. 	}
  1204.  
  1205. 	img.yt-img-shadow {
  1206. 		display: block;
  1207. 		margin-right: auto;
  1208. 		margin-left: auto;
  1209. 		border-radius: 6px;
  1210. 		max-width: var(--yt-img-max-width, 100%);
  1211. 		max-height: var(--yt-img-max-height, none);
  1212. 	}
  1213.  
  1214. 	.ytp-settings-button.ytp-hd-quality-badge::after,
  1215. 	.ytp-settings-button.ytp-4k-quality-badge::after,
  1216. 	.ytp-settings-button.ytp-5k-quality-badge::after,
  1217. 	.ytp-settings-button.ytp-8k-quality-badge::after {
  1218. 		position: absolute;
  1219. 		top: 10px;
  1220. 		right: 5px;
  1221. 		border-radius: 1px;
  1222. 		border-radius: 100px;
  1223. 		background-color: #000;
  1224. 		width: 13px;
  1225. 		height: 9px;
  1226. 		content: '';
  1227. 		color: hsl(0deg 0% 0% / 88%) !important;
  1228. 		line-height: normal;
  1229. 	}
  1230.  
  1231. 	div#sb-heading {
  1232. 		border-radius: 8px 8px 0 0;
  1233. 		background-color: rgb(
  1234. 			255
  1235. 			0
  1236. 			0 /
  1237. 			0%
  1238. 		) !important;
  1239. 		background: moz-linear-gradient(
  1240. 			90deg
  1241. 		) !important;
  1242. 		background-position: center;
  1243. 	}
  1244.  
  1245. 	div#sb-data-pages {
  1246. 		border-radius: 0 0 8px 8px;
  1247. 	}
  1248.  
  1249. 	.ytp-settings-button.ytp-hd-quality-badge::after {
  1250. 		background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zd…wxMCw2IEwxMCw0IFoiIGZpbGw9IiNmZmYiIGZpbGwtcnVsZT0iZXZlbm9kZCIgLz48L3N2Zz4=") !important;
  1251. 	}
  1252.  
  1253. 	.ytp-settings-button.ytp-hd-quality-badge::after {
  1254. 		background: linear-gradient(90deg) !important;
  1255. 	}
  1256.  
  1257. 	yt-icon.style-scope.ytd-notification-topbar-button-renderer {
  1258. 		fill: white !important;
  1259. 	}
  1260. }