Old Red YouTube Progress Bar

Restores the old solid red YouTube progress bars and other UI elements (favicon, icons, etc.) with red color styling. Dynamically applies on page loads and DOM changes.

目前为 2024-10-25 提交的版本,查看 最新版本

  1. // ==UserScript==
  2. // @name Old Red YouTube Progress Bar
  3. // @namespace https://greasyfork.org/en/users/1384870
  4. // @version 1.2.1
  5. // @description Restores the old solid red YouTube progress bars and other UI elements (favicon, icons, etc.) with red color styling. Dynamically applies on page loads and DOM changes.
  6. // @author Rastrisr
  7. // @compatible firefox
  8. // @compatible chrome
  9. // @compatible edge
  10. // @match *://*.youtube.com/*
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15. 'use strict';
  16.  
  17. // Function to apply old red progress bar and additional style tweaks
  18. function applyCustomStyles() {
  19. let styleElement = document.getElementById('customYouTubeStyles');
  20. if (!styleElement) {
  21. styleElement = document.createElement('style');
  22. styleElement.id = 'customYouTubeStyles';
  23. document.head.appendChild(styleElement);
  24. }
  25.  
  26. // Apply all the styles
  27. styleElement.innerHTML = `
  28. .ytp-play-progress {
  29. background: #FF0000 !important; /* Old solid red for video player progress */
  30. }
  31. #progress.ytd-thumbnail-overlay-resume-playback-renderer {
  32. background: #FF0000 !important; /* Red for thumbnail overlay progress */
  33. }
  34. #progress.yt-page-navigation-progress {
  35. background: #FF0000 !important; /* Red for top loading bar */
  36. }
  37. .YtProgressBarLineProgressBarPlayed {
  38. background: #FF0000 !important; /* Red for hover preview progress */
  39. }
  40. .ytp-cairo-refresh-signature-moments .ytp-play-progress {
  41. background: #FF0000 !important; /* Removes pink fade from playback progress */
  42. }
  43. ytd-thumbnail-overlay-resume-playback-renderer[enable-refresh-signature-moments-web] #progress.ytd-thumbnail-overlay-resume-playback-renderer {
  44. background: #FF0000 !important; /* Red for refreshed signature moments */
  45. }
  46. html[refresh], [refresh] {
  47. --yt-spec-static-brand-red: #FF0000 !important;
  48. --yt-spec-static-overlay-background-brand: rgba(255, 0, 0, 0.9) !important; /* Red for playback head dot */
  49. }
  50. #icon > .yt-icon-shape.style-scope.yt-icon.yt-spec-icon-shape > div > svg > path:first-of-type {
  51. fill: #FF0000 !important; /* Red for shorts icon */
  52. }
  53. .YtProgressBarLineProgressBarPlayedRefresh.YtProgressBarLineProgressBarPlayed {
  54. background: #FF0000 !important; /* Red for shorts progress bar */
  55. }
  56. .YtProgressBarPlayheadProgressBarPlayheadDot {
  57. background-color: #FF0000 !important; /* Red for shorts playhead dot */
  58. }
  59. .yt-spec-icon-badge-shape__badge {
  60. background: #CC0000 !important;
  61. color: #FFF !important; /* Red for notification badge and white font */
  62. }
  63. html, [light] {
  64. --yt-frosted-glass-desktop: rgba(255, 255, 255, 1.0) !important; /* Remove transparency from title bar */
  65. --yt-spec-red-indicator: #FF0000 !important; /* Red for settings icon */
  66. }
  67. html[dark], [dark] {
  68. --yt-frosted-glass-desktop: rgba(15, 15, 15, 1.0) !important;
  69. --yt-spec-red-indicator: #FF0000 !important;
  70. }
  71. yt-page-navigation-progress[enable-refresh-signature-moments-web] #progress.yt-page-navigation-progress {
  72. background: #FF0000 !important; /* Red for refresh progress bar */
  73. }
  74. #logo-icon > .yt-spec-icon-shape.yt-icon.style-scope.yt-icon-shape > div > svg > g:first-of-type > path:first-of-type {
  75. fill: #FF0000 !important; /* Red for YouTube logo */
  76. }
  77. .yt-core-attributed-string--inline-block-mod > img {
  78. filter: brightness(100%) saturate(100%) hue-rotate(18deg) !important; /* Red for link preview icon */
  79. }
  80. .yt-spec-avatar-shape--cairo-refresh.yt-spec-avatar-shape--live-ring::after {
  81. background: #FF0000 !important; /* Red for live-ring */
  82. }
  83. `;
  84. }
  85.  
  86. // Function to remove YouTube favicon to prevent it from being replaced with pinkish one
  87. function removeYouTubeFavicons() {
  88. let favicons = document.querySelectorAll('link[rel*="icon"]');
  89. favicons.forEach(favicon => {
  90. favicon.remove();
  91. });
  92. }
  93.  
  94. // MutationObserver to ensure styles are reapplied dynamically
  95. function observeForChanges() {
  96. const observer = new MutationObserver(() => {
  97. applyCustomStyles();
  98. removeYouTubeFavicons();
  99. });
  100.  
  101. observer.observe(document.body, { childList: true, subtree: true });
  102. }
  103.  
  104. // Initial application of styles and setting up the observer
  105. setTimeout(() => {
  106. applyCustomStyles();
  107. removeYouTubeFavicons();
  108. observeForChanges();
  109. }, 2000);
  110.  
  111. })();