☰

Youtube Hide Paused Gradient by Sapioit

Removes the annoying gradients visible when pausing a video.

  1. // ==UserScript==
  2. // @name        Youtube Hide Paused Gradient by Sapioit
  3. // @namespace   Sapioit
  4. // @copyright   Sapioit, 2020 - Present
  5. // @author      sapioitgmail.com
  6. // @license     GPL-2.0-only; http://www.gnu.org/licenses/gpl-2.0.txt
  7. // @icon        https://youtube.com/favicon.ico
  8. // @match       https://www.youtube.com/*
  9. // @match       https://*.youtube.com/*
  10. // @match       https://youtube.com/*
  11. // @match       https://youtu.be/*
  12. // @match       https://*.youtu.be/*
  13. // @match       http://www.youtube.com/*
  14. // @match       http://*.youtube.com/*
  15. // @match       http://youtube.com/*
  16. // @match       http://youtu.be/*
  17. // @match       http://*.youtu.be/*
  18. // @description Removes the annoying gradients visible when pausing a video.
  19. // @version     1.7.1.2-2025-05May-09Fri
  20. // @grant       GM_addStyle
  21. // @grant       GM_registerMenuCommand
  22. // @grant       GM_setValue
  23. // @grant       GM_getValue
  24. // ==/UserScript==
  25. // @updateURL https://openuserjs.org/meta/sapioitgmail.com/Youtube_Hide_Paused_Gradient_by_Sapioit.meta.js
  26. // @downloadURL https://greasyfork.org/scripts/448125-youtube-hide-paused-gradient-by-sapioit/code/Youtube%20Hide%20Paused%20Gradient%20by%20Sapioit.user.js
  27.  
  28. let isHidden = GM_getValue('autoplayHidden', true);
  29.  
  30. function updateStyle_autonav_toggle() {
  31.   //GM_addStyle(`[data-tooltip-target-id="ytp-autonav-toggle-button"] { display: ${isHidden ? 'none' : 'inherit'} !important; }`);
  32.   GM_addStyle(`.ytp-button.ytp-autonav-toggle { display: ${isHidden ? 'none' : 'inline-block'} !important; }`);
  33. }
  34.  
  35. function toggleVisibility() {
  36.     isHidden = !isHidden;
  37.     GM_setValue('autoplayHidden', isHidden);
  38.     updateStyle_autonav_toggle();
  39. }
  40.  
  41. GM_registerMenuCommand("Toggle Autoplay Button Visibility", toggleVisibility);
  42.  
  43. updateStyle_autonav_toggle(); // Apply initial style to the autonav-toggle checkbox
  44.  
  45. var changed_page = false;
  46. document.addEventListener('spfdone', function() {
  47.   changed_page = true;
  48.   //alert("changed link 1 spfdone");
  49. });
  50. document.addEventListener('transitionend', function(e) {
  51.   //alert("changed link 2 transitionend");
  52.   if (e.target.id === 'progress'){
  53.     changed_page = true;
  54.     //alert("changed link 2 transitionend progress");
  55.   }
  56. });
  57. window.addEventListener('load', function () {
  58.   changed_page = true;
  59.   //alert("changed link 3 load");
  60. });
  61.  
  62. window.addEventListener('yt-page-data-updated', function () {
  63.   changed_page = true;
  64.   //alert("changed link 4 url change");
  65. });
  66.  
  67. function changed_link(){
  68.   if (changed_page) {
  69.     changed_page = false;
  70.     return true;
  71.   }
  72.   return false;
  73. }
  74.  
  75.  
  76. localStorage.setItem('currentWatchMetadataValued', 0);
  77. localStorage.setItem('consecutiveUnchangedCounted', 0);
  78. let isTabFocused = () => typeof document.hidden !== undefined ? !document.hidden : null;
  79.  
  80. function title_changed (count = 3) {
  81.   console.info("%cYoutube Hide Paused Gradient by Sapioit: changed_link(): %c" + changed_page, "color: yellow; background-color: black;", "color: cyan");
  82.   console.info("%cYoutube Hide Paused Gradient by Sapioit: title_changed: %cChecking title.", "color: yellow; background-color: black;", "color: white");
  83.  
  84.   // Check if the value of the title (the first "yt-formatted-string.style-scope.ytd-watch-metadata" element) has changed
  85.   let firstWatchMetadataElement = document.querySelector('h1 yt-formatted-string.style-scope.ytd-watch-metadata');
  86.  
  87.   if ( firstWatchMetadataElement === null || (typeof firstWatchMetadataElement) === 'undefined') {
  88.     console.info("Youtube Hide Paused Gradient by Sapioit: title_changed: %cThe 'h1 yt-formatted-string.style-scope.ytd-watch-metadata' is either NULL or UNDEFINED.", "color: red");
  89.     console.info("%cYoutube Hide Paused Gradient by Sapioit: title_changed: %c", "color: red", "color: default", firstWatchMetadataElement , (typeof firstWatchMetadataElement));
  90.     return false;
  91.   }
  92.  
  93.   console.info("%cYoutube Hide Paused Gradient by Sapioit: title_changed:", "color: cyan", (firstWatchMetadataElement.textContent.trim()) );
  94.   console.info("%cYoutube Hide Paused Gradient by Sapioit: title_changed:", "color: cyan", (firstWatchMetadataElement.textContent.trim() !== '') , ' ' , (firstWatchMetadataElement) );
  95.  
  96.   if ( firstWatchMetadataElement.textContent.trim() !== '') {
  97.     // Get the current value of the title
  98.     let currentWatchMetadataValue = firstWatchMetadataElement.textContent.trim();
  99.     console.info("%cYoutube Hide Paused Gradient by Sapioit: title_changed: %cTitle found.", "color: yellow; background-color: black;", "color: white");
  100.  
  101.     // Get the consecutive unchanged count from localStorage, or set it to 0 if it's not available
  102.     let consecutiveUnchangedCount = parseInt(localStorage.getItem('consecutiveUnchangedCounted')) || 0;
  103.  
  104.     // Increment the consecutiveUnchangedCount if the value is the same
  105.     consecutiveUnchangedCount++;
  106.  
  107.     // Update the stored value and consecutiveUnchangedCount in localStorage
  108.     localStorage.setItem('currentWatchMetadataValued', currentWatchMetadataValue);
  109.     localStorage.setItem('consecutiveUnchangedCounted', consecutiveUnchangedCount.toString());
  110.  
  111.     console.log("Youtube Hide Paused Gradient by Sapioit: title_changed: Try nr #" + (1+consecutiveUnchangedCount) );
  112.  
  113.     // Check if the current value is the same as the previous one stored in localStorage
  114.     if (localStorage.getItem('currentWatchMetadataValued') === currentWatchMetadataValue) {
  115.  
  116.       // Stop the function if the title value hasn't changed for the last three checks (consecutiveUnchangedCount is less than 4)
  117.       if ( consecutiveUnchangedCount < (count+1) ) {
  118.         console.log("Youtube Hide Paused Gradient by Sapioit: title_changed: First 'yt-formatted-string.style-scope.ytd-watch-metadata' element has not changed for the last three checks. Stopping check.");
  119.         return false; // Return that the title has not changed.
  120.       } else {
  121.         // Reset the consecutiveUnchangedCount if the value has changed
  122.         consecutiveUnchangedCount = 0;
  123.  
  124.         // Update the stored value and consecutiveUnchangedCount in localStorage
  125.         localStorage.setItem('currentWatchMetadataValued', currentWatchMetadataValue);
  126.         localStorage.setItem('consecutiveUnchangedCounted', consecutiveUnchangedCount.toString());
  127.         return true; // Return that the title has changed.
  128.       }
  129.     } else {
  130.       // Reset the consecutiveUnchangedCount if the value has changed
  131.       consecutiveUnchangedCount = 0;
  132.  
  133.       // Update the stored value and consecutiveUnchangedCount in localStorage
  134.       localStorage.setItem('currentWatchMetadataValued', currentWatchMetadataValue);
  135.       localStorage.setItem('consecutiveUnchangedCounted', consecutiveUnchangedCount.toString());
  136.       return true; // Return that the title has changed.
  137.     }
  138.   } else {
  139.     console.log("Youtube Hide Paused Gradient by Sapioit: title_changed: Checking title FAILED.");
  140.   }
  141.   return false; // Return that the title has changed.
  142.   // Usage example:
  143.   if ( title_changed() ){
  144.     return;
  145.   }
  146.   if ( title_changed(8) ){
  147.     return;
  148.   }
  149. }
  150.  
  151.  
  152. function swapButtonsSaveShare(){
  153.   if ( !isTabFocused() ){
  154.     console.log("Youtube Hide Paused Gradient by Sapioit: swapButtonsSaveShare:: isFocused(): " + isTabFocused() );
  155.     return;
  156.   }
  157.   if ( title_changed(8) ){
  158.     console.log("Youtube Hide Paused Gradient by Sapioit: swapButtonsSaveShare:: title_has_changed(8): " + title_changed(8) );
  159.     return;
  160.   }
  161.  
  162.  
  163.   console.log("Youtube Hide Paused Gradient by Sapioit: swapButtonsSaveShare:: Checking if 'Save' button is inside the top-level-buttons-computed element.");
  164.  
  165.   let isSaveButtonInside = document.querySelector('div#top-level-buttons-computed.top-level-buttons.style-scope.ytd-menu-renderer button[aria-label="Save to playlist"]');
  166.   console.info('%cYoutube Hide Paused Gradient by Sapioit: swapButtonsSaveShare: %c', "color: cyan", isSaveButtonInside, (typeof isSaveButtonInside));
  167.  
  168.   if (isSaveButtonInside) {
  169.     console.log("Youtube Hide Paused Gradient by Sapioit: swapButtonsSaveShare: 'Save' button is inside the top-level-buttons-computed element.");
  170.     console.log("Youtube Hide Paused Gradient by Sapioit: swapButtonsSaveShare:: isSaveButtonInside: " + JSON.stringify(isSaveButtonInside));
  171.     //GM_addStyle('div#top-level-buttons-computed.top-level-buttons.style-scope.ytd-menu-renderer button[aria-label="Save to playlist"] { background-color: red;}');
  172.     return;
  173.   }
  174.  
  175.   console.log("Youtube Hide Paused Gradient by Sapioit: swapButtonsSaveShare: 'Save' button is NOT inside the top-level-buttons-computed element.");
  176.   let saveButton = document.querySelector('ytd-button-renderer[button-renderer][button-next] button[aria-label="Save to playlist"]');
  177.   let shareButton = document.querySelector('ytd-button-renderer[button-renderer][button-next] button[aria-label="Share"]');
  178.  
  179.   if (saveButton && shareButton) {
  180.     let saveButtonParent = saveButton.parentElement;
  181.     let shareButtonParent = shareButton.parentElement;
  182.  
  183.     // Create placeholder elements to hold the buttons temporarily
  184.     const placeholder1 = document.createElement('div');
  185.     const placeholder2 = document.createElement('div');
  186.  
  187.     // Move the buttons to their respective placeholder positions
  188.     saveButtonParent.insertBefore(placeholder1, saveButton);
  189.     shareButtonParent.insertBefore(placeholder2, shareButton);
  190.     shareButtonParent.insertBefore(saveButton, placeholder2);
  191.     saveButtonParent.insertBefore(shareButton, placeholder1);
  192.  
  193.     // Remove the placeholders
  194.     saveButtonParent.removeChild(placeholder1);
  195.     shareButtonParent.removeChild(placeholder2);
  196.  
  197.     // Swap Save2 with a new Share2
  198.     let save2Button = document.querySelector('tp-yt-paper-item[aria-disabled="false"] yt-formatted-string[role="option"][class="style-scope ytd-menu-service-item-renderer"]');
  199.     if (save2Button) {
  200.       let saveButtonParent = saveButton.parentElement;
  201.  
  202.       // Swap the positions of saveButton and shareButton in their respective parents
  203.       saveButtonParent.insertBefore(shareButton, saveButton.nextSibling);
  204.  
  205.       // Create new HTML for the modified share2Button
  206.       let newShare2ButtonHTML = '<ytd-menu-service-item-renderer class="style-scope ytd-menu-popup-renderer iron-selected" use-icons="" system-icons="" role="menuitem" tabindex="-1" aria-selected="true"><!--css-build:shady--><!--css-build:shady--><tp-yt-paper-item class="style-scope ytd-menu-service-item-renderer" style-target="host" role="option" tabindex="0" aria-disabled="false"><!--css-build:shady--><yt-icon class="style-scope ytd-menu-service-item-renderer"><!--css-build:shady--><!--css-build:shady--><yt-icon-shape class="style-scope yt-icon"><icon-shape class="yt-spec-icon-shape"><div style="width: 100%; height: 100%; fill: currentcolor;"><svg height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"><path d="M15 5.63 20.66 12 15 18.37V14h-1c-3.96 0-7.14 1-9.75 3.09 1.84-4.07 5.11-6.4 9.89-7.1l.86-.13V5.63M14 3v6C6.22 10.13 3.11 15.33 2 21c2.78-3.97 6.44-6 12-6v6l8-9-8-9z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon></div><yt-formatted-string class="style-scope ytd-menu-service-item-renderer">Share</yt-formatted-string><ytd-badge-supported-renderer class="style-scope ytd-menu-service-item-renderer" disable-upgrade="" hidden=""></ytd-badge-supported-renderer></tp-yt-paper-item></ytd-menu-service-item-renderer>';
  207.  
  208.       // Create a new DOM element from the HTML string
  209.       const parser = new DOMParser();
  210.       const newShare2Button = parser.parseFromString(newShare2ButtonHTML, "text/html").body.firstChild;
  211.  
  212.       // Add the newShare2Button after the saveButton
  213.       saveButtonParent.insertBefore(newShare2Button, saveButton.nextSibling);
  214.     }
  215.  
  216.     /*let newShareButton = '<button class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading " aria-label="Share" style=""><div class="yt-spec-button-shape-next__icon" aria-hidden="true"><yt-icon style="width: 24px; height: 24px;"><!--css-build:shady--><!--css-build:shady--><yt-icon-shape class="style-scope yt-icon"><icon-shape class="yt-spec-icon-shape"><div style="width: 100%; height: 100%; fill: currentcolor;"><svg height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"><path d="M15 5.63 20.66 12 15 18.37V14h-1c-3.96 0-7.14 1-9.75 3.09 1.84-4.07 5.11-6.4 9.89-7.1l.86-.13V5.63M14 3v6C6.22 10.13 3.11 15.33 2 21c2.78-3.97 6.44-6 12-6v6l8-9-8-9z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon></div><div class="cbox yt-spec-button-shape-next__button-text-content"><span class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap" role="text">Share</span></div><yt-touch-feedback-shape style="border-radius: inherit;"><div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true"><div class="yt-spec-touch-feedback-shape__stroke" style=""></div><div class="yt-spec-touch-feedback-shape__fill" style=""></div></div></yt-touch-feedback-shape></button>';
  217.     let newSaveButton = '<button class="yt-spec-button-shape-next yt-spec-button-shape-next--tonal yt-spec-button-shape-next--mono yt-spec-button-shape-next--size-m yt-spec-button-shape-next--icon-leading " aria-label="Save to playlist" style=""><div class="yt-spec-button-shape-next__icon" aria-hidden="true"><yt-icon style="width: 24px; height: 24px;"><!--css-build:shady--><!--css-build:shady--><yt-icon-shape class="style-scope yt-icon"><icon-shape class="yt-spec-icon-shape"><div style="width: 100%; height: 100%; fill: currentcolor;"><svg height="24" viewBox="0 0 24 24" width="24" focusable="false" style="pointer-events: none; display: block; width: 100%; height: 100%;"><path d="M22 13h-4v4h-2v-4h-4v-2h4V7h2v4h4v2zm-8-6H2v1h12V7zM2 12h8v-1H2v1zm0 4h8v-1H2v1z"></path></svg></div></icon-shape></yt-icon-shape></yt-icon></div><div class="cbox yt-spec-button-shape-next__button-text-content"><span class="yt-core-attributed-string yt-core-attributed-string--white-space-no-wrap" role="text">Save</span></div><yt-touch-feedback-shape style="border-radius: inherit;"><div class="yt-spec-touch-feedback-shape yt-spec-touch-feedback-shape--touch-response" aria-hidden="true"><div class="yt-spec-touch-feedback-shape__stroke" style=""></div><div class="yt-spec-touch-feedback-shape__fill" style=""></div></div></yt-touch-feedback-shape></button>';
  218.  
  219.     function createTrustedHTML(inputString) {
  220.       const parser = new DOMParser();
  221.       const doc = parser.parseFromString(inputString, "text/html");
  222.       const fragment = doc.body;
  223.       return fragment.outerHTML;
  224.     }
  225.  
  226.  
  227.     function escapeHTML(inputString) {
  228.       return inputString.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
  229.     }
  230.  
  231.  
  232.     newShareButton = createTrustedHTML(newShareButton);
  233.     newSaveButton = createTrustedHTML(newSaveButton);
  234.  
  235.  
  236.     shareButton.outerHTML = newSaveButton;
  237.     saveButton.outerHTML = newShareButton;*/
  238.  
  239.     // To remove the old "Save" and "Share" buttons, uncomment the lines below:
  240.     // saveButtonParent.removeChild(saveButton);
  241.     // shareButtonParent.removeChild(shareButton);
  242.   }
  243.   console.info("%cYoutube Hide Paused Gradient by Sapioit: swapButtonsSaveShare: Finishing swapping.", "color: cyan");
  244. }
  245.  
  246.  
  247. function add_hover_tooltips() {
  248.   /*var video_titles = document.getElementsByTagName("h3").getElementsByClassName("ytd-compact-video-renderer").getElementsByTagName("span");*/
  249.   /*var video_titles = document.querySelector("span.ytd-compact-video-renderer");*/
  250.   //var video_titles = document.getElementsByTagName("span").getElementsByClassName("ytd-compact-video-renderer");
  251.  
  252.   /*var video_titles = document.querySelectorAll("span.ytd-compact-video-renderer");*/
  253.   var video_titles = document.querySelectorAll("span.ytd-compact-video-renderer, #video-title");
  254.   for(var i=0; i<video_titles.length; i++){
  255.     console.log(video_titles[i]);
  256.     var current_title = video_titles[i].getAttribute("title");
  257.     video_titles[i].setAttribute("alt", current_title);
  258.     video_titles[i].setAttribute("data-title", current_title);
  259.     video_titles[i].setAttribute("data-tooltip", current_title);
  260.   }
  261.   /*
  262.     video_titles = document.querySelectorAll("#video-title");
  263.     for(i=0; i<video_titles.length; i++){
  264.         console.log(video_titles[i]);
  265.         current_title = video_titles[i].getAttribute("title");
  266.         video_titles[i].setAttribute("alt", current_title);
  267.         video_titles[i].setAttribute("data-title", current_title);
  268.         video_titles[i].setAttribute("data-tooltip", current_title);
  269.     }
  270.     */
  271. }
  272.  
  273.  
  274.  
  275.  
  276.  
  277.  
  278. window.onloadstart = function(){setTimeout(function () {
  279.   add_hover_tooltips();
  280. }, 0.001*1000)}; //loads after 0.001 seconds
  281.  
  282.  
  283. window.addEventListener('keydown', function(e) {
  284.   let play_button = document.querySelector('button.ytp-play-button');
  285.   let valid_target = e.target === document.body || e.target === document.querySelector('#player-api');
  286.   let pressed_space = e.keyCode === 32 || e.keyCode === 'Space'; // Space
  287.   if (play_button && valid_target && pressed_space) {
  288.     console.log("Youtube Hide Paused Gradient by Sapioit: Pressed pause or resume.");
  289.     e.preventDefault();
  290.     playButton.click();
  291.   }
  292. });
  293.  
  294.  
  295. function disable_autoplay() {
  296.   // Select the element by its class and attribute
  297.   /*
  298.   var element = document.querySelector('.ytp-autonav-toggle-button[aria-checked="true"]');
  299.   if (element) {
  300.     element.click();
  301.   }
  302.   */
  303.   /*
  304.   var toggle = document.querySelector('.ytp-autonav-toggle-button');
  305.   if (toggle && toggle.getAttribute('aria-checked') === "true") {
  306.     toggle.setAttribute('aria-checked', "false");
  307.   }
  308.   */
  309.   var element = document.querySelector('.ytp-autonav-toggle-button');
  310.   if (element && element.getAttribute('aria-checked') === "true") {
  311.     element.setAttribute('aria-checked', "false");
  312.     GM_setValue('autoplayDisabled', true);
  313.   }/* else {
  314.     element.setAttribute('aria-checked', "true");
  315.     GM_setValue('autoplayDisabled', false);
  316.   }*/
  317. }
  318.  
  319.  
  320.  
  321.  
  322. window.addEventListener('load', function() {
  323.   disable_autoplay();
  324. }, false);
  325.  
  326.  
  327. if (typeof document.getElementsByClassName("ytp-gradient-top")[0] != "undefined") {
  328.   document.getElementsByClassName("ytp-gradient-top")[0].style.display = 'none';
  329. }
  330. if (typeof document.getElementsByClassName("ytp-gradient-top")[0] != "undefined") {
  331.   document.getElementsByClassName("ytp-gradient-top")[0].style.opacity = '0';
  332. }
  333. if (typeof document.getElementsByClassName("ytp-gradient-bottom")[0] != "undefined") {
  334.   document.getElementsByClassName("ytp-gradient-bottom")[0].style.display = 'none';
  335. }
  336. if (typeof document.getElementsByClassName("ytp-gradient-bottom")[0] != "undefined") {
  337.   document.getElementsByClassName("ytp-gradient-bottom")[0].style.opacity = '0';
  338. }
  339.  
  340. /*
  341. document.getElementsByClassName("ytp-gradient-top")[0].style.display = 'none';
  342. document.getElementsByClassName("ytp-gradient-top")[0].style.opacity = '0';
  343. document.getElementsByClassName("ytp-gradient-bottom")[0].style.display = 'none';
  344. document.getElementsByClassName("ytp-gradient-bottom")[0].style.opacity = '0';
  345. */
  346.  
  347.  
  348.  
  349. GM_addStyle('.ytp-caption-window-container { top: 2% !important; }');
  350.  
  351. GM_addStyle('.ytp-gradient-top { display: none !important; opacity: 0 !important; }');
  352. GM_addStyle('.ytp-gradient-top { width: none !important; opacity: 0 !important; }');
  353.  
  354. //GM_addStyle('button div.ytp-autonav-toggle-button-container { display: none !important;}');
  355. //GM_addStyle('[data-tooltip-target-id="ytp-autonav-toggle-button"] { display: none !important;}');
  356. updateStyle_autonav_toggle(); // Apply initial style to the autonav-toggle checkbox
  357. //GM_addStyle('.ytp-button[data-tooltip-target-id="ytp-autonav-toggle-button"] { display: none !important;}');
  358. GM_addStyle('--ytd-engagement-panel-section-list-rendere { display: none !important;}');
  359. //GM_addStyle('.ytp-time-display > span { padding: 3px; background: rgba(0, 0, 0, 0.5); }'); // half opacity for time text
  360. //GM_addStyle('.ytd-thumbnail-overlay-time-status-renderen { transition-duration: 0s; }');
  361. GM_addStyle('ytd-watch-flexy[fixed-panels] #chat.ytd-watch-flexy { position: relative; height: 500px; }');
  362.  
  363. window.onload = function(){setTimeout(function () {
  364.   console.log("Youtube Hide Paused Gradient by Sapioit: onload:: start");
  365.   //GM_addStyle('button div.ytp-autonav-toggle-button-container { display: none !important;}');
  366.   //GM_addStyle('[data-tooltip-target-id="ytp-autonav-toggle-button"] { display: none !important;}');
  367.   updateStyle_autonav_toggle(); // Apply initial style to the autonav-toggle checkbox
  368.   GM_addStyle('--ytd-engagement-panel-section-list-rendere { display: none !important;}');
  369.   GM_addStyle('#video-title.ytd-compact-video-renderer { overflow: none !important;}');
  370.   GM_addStyle('ytd-button-renderer > yt-button-shape > button[aria-label="Thanks"] { display: none !important; }');
  371.   //GM_addStyle('ytd-button-renderer > yt-button-shape > button[aria-label="Save to playlist"] { display: inline-block !important; }');
  372.   GM_addStyle('ytd-watch-flexy[fixed-panels] #chat.ytd-watch-flexy { position: relative; height: 500px; }');
  373.   add_hover_tooltips();
  374.   disable_autoplay();
  375.   swapButtonsSaveShare();
  376.   setTimeout(function () {
  377.     swapButtonsSaveShare();
  378.   }, 5*1000) //loads after 5 seconds
  379.   console.log("Youtube Hide Paused Gradient by Sapioit: onload:: stop");
  380.   //GM_addStyle('.ytd-thumbnail-overlay-time-status-renderen { transition-duration: 0s; }');
  381. }, 5*1000)}; //loads after 5 seconds
  382.  
  383. function repeaterFunction(){
  384.   setTimeout(repeaterFunction, 30*1000); //loads every 30 seconds
  385.   console.log("Youtube Hide Paused Gradient by Sapioit: repeaterFunction:: focus-check and title-chance-check");
  386.   if ( !isTabFocused() ){
  387.     console.log("Youtube Hide Paused Gradient by Sapioit: repeaterFunction:: isFocused(): " + isTabFocused() );
  388.     return;
  389.   }
  390.   if ( title_changed(8) ){
  391.     console.log("Youtube Hide Paused Gradient by Sapioit: repeaterFunction:: title_has_changed(8): " + title_changed(8) );
  392.     return;
  393.   }
  394.  
  395.   console.log("Youtube Hide Paused Gradient by Sapioit: repeaterFunction:: start");
  396.   //GM_addStyle('button div.ytp-autonav-toggle-button-container { display: none !important;}');
  397.   //GM_addStyle('[data-tooltip-target-id="ytp-autonav-toggle-button"] { display: none !important;}');
  398.   updateStyle_autonav_toggle(); // Apply initial style to the autonav-toggle checkbox
  399.   GM_addStyle('--ytd-engagement-panel-section-list-rendere { display: none !important;}');
  400.   add_hover_tooltips();
  401.   disable_autoplay();
  402.   swapButtonsSaveShare();
  403.   console.log("Youtube Hide Paused Gradient by Sapioit: repeaterFunction:: stop");
  404. }
  405. repeaterFunction();
  406.  
  407. /*
  408. GM_addStyle("span[data-tooltip]:before { z-index:301;  position: absolute;  opacity: 0;  padding: 0px; width: 200px;  background: black;  color: white; content: attr(data-tooltip); }    span[data-tooltip]:hover:before {  opacity: 1; } ");
  409. GM_addStyle(".yt-simple-endpoint[title]:before { z-index:301; position: absolute;  opacity: 0;  padding: 0px; width: 200px;  background: black;  color: white; content: attr(title); }    .yt-simple-endpoint[title]:hover:before {  opacity: 1; } ");
  410. */
  411.  
  412. GM_addStyle("span[data-tooltip]:before , .yt-simple-endpoint[title]:before { z-index:301; position: absolute;  opacity: 0;  padding: 0px; width: 200px;  background: black;  color: white; content: attr(title); }");
  413. GM_addStyle("span[data-tooltip]:before { content: attr(data-tooltip); }");
  414. GM_addStyle(".yt-simple-endpoint[title]:before { content: attr(title); }");
  415. GM_addStyle("span[data-tooltip]:hover:before , .yt-simple-endpoint[title]:hover:before {  opacity: 1; } ");
  416.  
  417. GM_addStyle(".ytp-cairo-refresh-signature-moments .ytp-play-progress { background: -webkit-gradient(linear, left top, right top, color-stop(80%, #f03), to(#f03)) !important; background: -webkit-linear-gradient(left, #f03 80%, #f03 100%) !important; background: linear-gradient(to right, #f03 80%, #f03 100%) !important; }");
  418.  
  419. // <ytd-engagement-panel-section-list-renderer class="style-scope ytd-watch-flexy" visibility="ENGAGEMENT_PANEL_VISIBILITY_EXPANDED">GM_addStyle(a);
  420.  
  421.  
  422.  
  423.  
  424.  
  425.  
  426.  
  427.  
  428.  
  429.  
  430.  
  431.  
  432.