☰

YouTube Rainbow Progress Bar [Updated]

YouTube Rainbow Progress Bar [Updated] by Nick2bad4u - 2024

  1. /* ==UserStyle==
  2. @name         YouTube Rainbow Progress Bar [Updated]
  3. @namespace    https://github.com/Nick2bad4u/UserStyles
  4. @author       nick2bad4u
  5. @description  YouTube Rainbow Progress Bar [Updated] by Nick2bad4u - 2024
  6. @homepageURL  https://github.com/Nick2bad4u/UserStyles
  7. @version      1.1.0
  8. @license      UnLicense
  9. @preprocessor uso
  10. ==/UserStyle== */
  11. @-moz-document domain("youtube.com") {
  12. .html5-progress-bar, .ytp-progress-bar {
  13. 	background: linear-gradient(90deg, rgba(248,13,27,1) 0%, rgba(255,160,0,1) 20%, rgba(255,227,2,1) 40%, rgba(0,250,34,1) 60%, rgba(0,169,238,1) 80%, rgba(159,0,255,1) 100%) !important;
  14. 	height: 12px !important;
  15. 	border: none !important;
  16. }
  17.  
  18. .html5-progress-bar-container, .ytp-progress-bar-container {
  19. 	height: 12px !important;
  20. }
  21.  
  22. .html5-progress-bar, .ytp-progress-bar {
  23. 	margin-top: 12px !important;
  24. }
  25.  
  26. .html5-progress-list, .ytp-progress-list, .video-ads .html5-progress-list.html5-ad-progress-list, .video-ads .ytp-progress-list.ytp-ad-progress-list {
  27. 	height: 12px !important;
  28. }
  29.  
  30. .ytp-scrubber-button {
  31. 	background-color: rgba(159,0,255,1) !important;
  32. 	border: 1px solid black !important;
  33. 	height:32px !important;
  34. 	width: 8px !important;
  35. 	margin-top: -6px !important;
  36. 	margin-left: 0px !important;
  37. }
  38.  
  39. .ytp-heat-map-svg {
  40. 	margin-top: 3px !important;
  41. }
  42.  
  43. .ytp-heat-map-container {
  44. 	height: 50px !important;
  45. }
  46.  
  47. .ytp-heat-map-graph {
  48. 	fill-opacity: 0.5 !important;
  49. 	-webkit-animation: mymove 5s linear infinite;
  50.     -moz-animation: mymove 5s linear infinite;
  51.     animation: mymove 5s linear infinite;
  52. }
  53.  
  54. @keyframes mymove {
  55. 	0% { fill: rgba(248,13,27,1) }
  56. 	10% { fill: rgba(255,160,0,1) }
  57. 	20% { fill: rgba(255,227,2,1) }
  58. 	30% { fill: rgba(0,250,34,1) }
  59. 	40% { fill: rgba(0,169,238,1) }
  60. 	50% { fill: rgba(159,0,255,1) }
  61. 	60% { fill: rgba(0,169,238,1) }
  62. 	70% { fill: rgba(0,250,34,1) }
  63. 	80% { fill: rgba(255,227,2,1) }
  64. 	90% { fill: rgba(255,160,0,1) }
  65. 	100% { fill: rgba(248,13,27,1) }
  66. }
  67. }