Disable YouTube Focus and Padding Effects

This Tampermonkey script disables two visual UI behaviors on YouTube:

1. The hover/focus highlight effect on rich video items.
2. An unwanted top padding introduced by an experimental class (efyt-control-bar-position-absolute).

This helps maintain a cleaner and less visually intrusive layout while browsing YouTube.

---

🚀 Features

• Removes background highlight and border glow on focused video items.
• Disables top padding: 36px on various watch page components.
• Automatically applies even as YouTube dynamically loads content.

---

📝 Prerequisites

1. A modern browser like Chrome or Firefox.

2. Tampermonkey extension installed:

   • Stop using Google Chrome
   • Tampermonkey for Firefox

---

🔧 Installation Steps

1. Install Tampermonkey

   • Use the appropriate link above and add it to your browser.

2. Create a New Script

   • Click the Tampermonkey icon in your browser toolbar.
   • Select Dashboard → + Create a new script.

3. Paste the Script

   • Delete the default template and paste the script below:

// ==UserScript==
// @name         Disable YouTube Focus and Padding Effects
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Disable focus and padding-top effects on YouTube UI elements.
// @match        *://www.youtube.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const style = document.createElement('style');
    style.innerHTML = `
        /* Disable highlight & border effects */
        .ytd-rich-item-renderer-highlight,
        .ytd-rich-item-renderer-highlight-border {
            background-color: transparent !important;
            box-shadow: none !important;
        }

        /* Override YouTube padding from experimental UI class */
        html.efyt-control-bar-position-absolute ytd-watch-flexy[theater] #columns.ytd-watch-flexy,
        html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns #primary #alerts.ytd-watch-flexy:not(:empty),
        html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns #primary #messages.ytd-watch-flexy:not(:empty),
        html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns #primary #clarify-box.ytd-watch-flexy:not(:empty),
        html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns #primary #limited-state.ytd-watch-flexy:not(:empty),
        html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns #primary ytd-watch-metadata.ytd-watch-flexy:not([hidden]),
        html.efyt-control-bar-position-absolute ytd-watch-flexy:not([theater]) #columns #primary div.watch-active-metadata.ytd-watch-flexy {
            padding-top: 0px !important;
        }
    `;
    document.head.appendChild(style);
})();

4. Save the Script

   • Press Ctrl + S or use File → Save in the Tampermonkey editor.

5. Enable the Script

   • Ensure the script is toggled to Enabled in Tampermonkey.

6. Refresh YouTube

   • Reload YouTube to see the effect take place.

---

✅ Verification

• Visit YouTube's homepage and hover over any video item — the glow or highlight should be gone.
• On a video watch page, inspect layout spacing. The unwanted padding-top: 36px should no longer be present.

---

🐛 Troubleshooting

• ✅ Make sure Tampermonkey is installed and active.
• ✅ Confirm the script is enabled.
• 🔁 Try refreshing YouTube if changes don’t appear immediately.
• 🧪 Check browser console (F12 → Console) for script injection errors.

If problems persist, feel free to open an issue!

---

📜 License

MIT License. Free to use and modify.

---

🙌 Contributions

Feel free to submit pull requests or suggest improvements!

No more jarring visual changes as you browse! 🚀

README.md generated with ChatGPT