YouTube Material Design Ui by mason20121981

/* ==UserStyle==
@name           YouTube Late 2017-Mid 2019 Polymer Colors with Material Design UI
@version        20240812.18.19
@namespace      userstyles.world/user/magma_craft
@description    Reverts to the old Polymer colors before September 2019 and applies a Material Design UI with rounded elements and Google Sans font.
@author         magma_craft
@license        CC Zero
@preprocessor   stylus
@var            checkbox  watchBackground    "Use pre-August 2019 watch UI background"           0
==/UserStyle== */

@-moz-document domain("youtube.com") {

    /* Google Sans Font and general reset */
    body {
        font-family: 'Google Sans', sans-serif;
        margin: 0;
        padding: 0;
        background-color: #f9f9f9;
    }

    /* Navbar and main elements */
    .yt-masthead {
        background-color: #f8f8f8 !important;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        border-radius: 12px;
        padding: 10px;
    }

    /* Video Card (with rounded corners) */
    .style-scope.ytd-video-renderer,
    .style-scope.ytd-grid-video-renderer {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
        background-color: white;
        margin: 16px;
    }

    /* Video thumbnail */
    .ytd-thumbnail {
        border-radius: 12px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    /* Video title */
    #video-title {
        font-size: 18px;
        font-weight: 500;
        color: #333;
        padding: 12px;
        border-radius: 8px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        transition: all 0.3s;
    }

    /* Hover effect for video titles */
    #video-title:hover {
        background-color: #f1f1f1;
    }

    /* Buttons (rounded, Material style) */
    .yt-simple-endpoint.style-scope.ytd-toggle-button-renderer,
    .yt-simple-endpoint.style-scope.ytd-subscribe-button-renderer {
        padding: 10px 20px;
        font-size: 16px;
        font-weight: 500;
        background-color: #ff0000;
        color: white;
        border: none;
        border-radius: 24px;
        cursor: pointer;
        transition: all 0.3s;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .yt-simple-endpoint.style-scope.ytd-toggle-button-renderer:hover,
    .yt-simple-endpoint.style-scope.ytd-subscribe-button-renderer:hover {
        background-color: #cc0000;
        box-shadow: 0 6px 10px rgba(0, 0, 0, 0.1);
    }

    /* Use pre-August 2019 Watch Page Background */
    @if(checkbox(watchBackground)) {
        .html5-video-container {
            background-color: #000 !important;
        }
    }

    /* Video Description Styling */
    .ytd-video-secondary-info-renderer .description {
        font-size: 14px;
        color: #666;
        margin-top: 8px;
        font-weight: 400;
    }

    /* Sidebar styling for Material Design */
    ytd-guide-renderer {
        border-radius: 12px;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    /* Navigation Bar (rounded corners) */
    ytd-app {
        border-radius: 12px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    }

    /* Apply rounded corners to the thumbnails */
    .ytd-thumbnail img {
        border-radius: 12px;
    }

    /* Video container with rounded corners */
    .ytd-video-renderer {
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        overflow: hidden;
    }

    /* Background Color Adjustments for Polymer Pre-August 2019 */
    /* Custom color adjustments */
    .ytp-chrome-bottom {
        background-color: #212121 !important;
    }

    .ytp-chrome-top {
        background-color: #181818 !important;
    }

    /* Apply older polymer colors */
    .ytp-progress-bar-container {
        background-color: #888 !important;
    }
}