☰

YouTube Transparent Header

Makes YouTube's top navigation bar and search bar semi-transparent

  1. // ==UserScript==
  2. // @name         YouTube Transparent Header
  3. // @namespace    http://tampermonkey.net/
  4. // @version      1.3
  5. // @description  Makes YouTube's top navigation bar and search bar semi-transparent
  6. // @author       Minoa
  7. // @match        https://www.youtube.com/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() {
  13.     'use strict';
  14.  
  15.     const style = document.createElement('style');
  16.     style.textContent = `
  17.         /* Make header slightly visible with no blur */
  18.         ytd-masthead {
  19.             background: rgba(0, 0, 0, 0.3) !important;
  20.             border: none !important;
  21.             -webkit-backdrop-filter: none !important;
  22.             backdrop-filter: none !important;
  23.         }
  24.  
  25.         /* Remove any potential blur from child elements */
  26.         ytd-masthead *,
  27.         ytd-masthead *::before,
  28.         ytd-masthead *::after {
  29.             -webkit-backdrop-filter: none !important;
  30.             backdrop-filter: none !important;
  31.             background: transparent !important;
  32.         }
  33.  
  34.         /* Style for search box */
  35.         ytd-searchbox input,
  36.         ytd-searchbox #container,
  37.         ytd-searchbox[has-focus] input,
  38.         ytd-searchbox[has-focus] #container {
  39.             background: rgba(0, 0, 0, 0.3) !important;
  40.             border: 1px solid rgba(255, 255, 255, 0.1) !important;
  41.         }
  42.  
  43.         /* Style for search suggestions/autocomplete */
  44.         ytd-searchbox #container.ytd-searchbox,
  45.         .ytd-searchbox-spt,
  46.         ytd-unified-search-suggestions-renderer {
  47.             background: rgba(0, 0, 0, 0.4) !important;
  48.         }
  49.  
  50.         /* Make suggestion items slightly visible */
  51.         ytd-unified-search-suggestions-renderer * {
  52.             background: transparent !important;
  53.         }
  54.  
  55.         /* Hover effects for better usability */
  56.         ytd-searchbox input:hover,
  57.         ytd-searchbox input:focus {
  58.             border-color: rgba(255, 255, 255, 0.2) !important;
  59.         }
  60.  
  61.         /* Ensure text remains visible */
  62.         ytd-searchbox input,
  63.         ytd-unified-search-suggestions-renderer {
  64.             color: rgba(255, 255, 255, 0.8) !important;
  65.         }
  66.  
  67.         /* Keep notification count visible */
  68.         .yt-spec-icon-badge-shape__badge {
  69.             background: red !important;
  70.             opacity: 1 !important;
  71.         }
  72.     `;
  73.  
  74.     document.head.appendChild(style);
  75. })();