☰

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. })();