☰

YouTube Custom UI

Custom YouTube UI design based on provided image.

// ==UserScript==
// @name         YouTube Custom UI
// @namespace    http://tampermonkey.net/
// @version      1.0
// @description  Custom YouTube UI design based on provided image.
// @author       Your Name
// @match        *://*.youtube.com/*
// @license      MIT
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    const style = `
    /* Reset and General Styling */
    body {
        font-family: 'Your Preferred Font', sans-serif !important;
        background-color: #f4f4f4 !important; /* light grey background */
    }

    /* Top Navigation Bar */
    #container.ytd-masthead {
        background-color: #ffffff !important; /* white background */
        border-bottom: 1px solid #e0e0e0 !important;
    }

    /* Sidebar */
    #guide {
        background-color: #ffffff !important;
    }

    #guide-content {
        padding-top: 20px !important;
    }

    #guide #sections #items {
        border-bottom: 1px solid #e0e0e0 !important;
    }

    #guide a.ytd-guide-entry-renderer {
        color: #000000 !important;
    }

    /* Home Page Thumbnails */
    #contents.ytd-rich-grid-renderer {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 15px !important;
        padding: 10px !important;
    }

    #items.ytd-rich-item-renderer {
        background-color: #ffffff !important;
        border-radius: 8px !important;
        padding: 10px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Channel Page Styling */
    #channel-header-container.ytd-c4-tabbed-header-renderer {
        background-color: #ffffff !important;
        border-bottom: 1px solid #e0e0e0 !important;
    }

    #tabsContent.ytd-c4-tabbed-header-renderer {
        background-color: #f9f9f9 !important;
    }

    #tabsContent .tab-content {
        padding: 10px !important;
    }

    /* Watch Page Video Player */
    #player.ytd-watch-flexy {
        background-color: #ffffff !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Comments Section */
    #comments.ytd-item-section-renderer {
        background-color: #ffffff !important;
        border-radius: 8px !important;
        padding: 15px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Related Videos Sidebar */
    #related.ytd-watch-flexy {
        background-color: #ffffff !important;
        border-radius: 8px !important;
        padding: 10px !important;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
    }

    /* Footer */
    #footer-container {
        background-color: #ffffff !important;
        padding: 20px !important;
        border-top: 1px solid #e0e0e0 !important;
        color: #666666 !important;
    }

    /* Additional Styling */
    .ytd-video-renderer, .ytd-grid-video-renderer {
        border-radius: 8px !important;
        overflow: hidden !important;
    }

    .ytd-video-renderer:hover, .ytd-grid-video-renderer:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    }

    /* Button Styling */
    .yt-simple-endpoint.style-scope.ytd-button-renderer {
        background-color: #ff0000 !important; /* red button background */
        color: #ffffff !important;
        padding: 5px 10px !important;
        border-radius: 5px !important;
    }
    `;

    const styleSheet = document.createElement('style');
    styleSheet.type = 'text/css';
    styleSheet.innerText = style;
    document.head.appendChild(styleSheet);
})();