☰

YouTube Rounded Style

A simple rounded corner style for youtube.

// ==UserScript==
// @name          YouTube Rounded Style
// @author        Redi
// @version       1.0.51
// @description   A simple rounded corner style for youtube.
// @include       https://www.youtube.com/*
// @license       MIT License
// @grant         GM_addStyle
// @run-at        document-start
// @require       http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @namespace https://greasyfork.org/users/955267
// ==/UserScript==


// ==============================================================================
// MIT License

// Copyright (c) 2022 Redi

// Permission is hereby granted, free of charge, to any person obtaining a copy
// of this software and associated documentation files (the "Software"), to deal
// in the Software without restriction, including without limitation the rights
// to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
// copies of the Software, and to permit persons to whom the Software is
// furnished to do so, subject to the following conditions:

// The above copyright notice and this permission notice shall be included in all
// copies or substantial portions of the Software.

// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
// IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
// FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
// AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
// LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
// OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
// SOFTWARE.
// ==============================================================================


// Cascade Style Sheets
GM_addStyle 
( `
    @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css");


    /* ============================================================================== */
    /* Video Thumbnail */
    /* ============================================================================== */
    img.yt-img-shadow 
    {
        border-radius: 9px !important;
    }

    ytd-thumbnail #thumbnail.ytd-thumbnail 
    {
        background-color: #181818 !important;
    }

    ytd-thumbnail-overlay-resume-playback-renderer:nth-child(1) /* Video Watched Bar */
    {
        right: 44px;
        left: 9px;
        z-index: 0;
        margin-bottom: 9px;
        border-radius: 50px;
    }

    ytd-thumbnail-overlay-resume-playback-renderer.style-scope.ytd-thumbnail 
    {
        right: 44px;
        left: 9px;
        z-index: 0;
        margin-bottom: 9px;
        border-radius: 50px;
    }

    #progress.ytd-thumbnail-overlay-resume-playback-renderer 
    {
        border-radius: 50px;
    }    

    ytd-thumbnail-overlay-time-status-renderer /* Video Duration */
    {
        background-color: rgb(0 0 0 / 35%) !important;
        border-radius: 5px !important;
    }

    ytd-toggle-button-renderer.style-compact-gray[is-paper-button] 
    {
        border-radius: 4px;
    }


    /* ============================================================================== */
    /* Video Playlist */
    /* ============================================================================== */
    ytd-thumbnail-overlay-bottom-panel-renderer 
    {
        border-radius: 0px 0px 8px 8px;
    }

    ytd-thumbnail-overlay-hover-text-renderer 
    {
        transition: 0.2s;
        border-radius: 7px;
    }

    ytd-thumbnail[now-playing] ytd-thumbnail-overlay-now-playing-renderer.ytd-thumbnail 
    {
        opacity: 1;
        pointer-events: auto;
        border-radius: 7px;
    }


    /* ============================================================================== */
    /* Recommended Genres */
    /* ============================================================================== */
    ytd-feed-filter-chip-bar-renderer 
    {
        --ytd-rich-grid-chips-bar-top: 66px !important;
        --ytd-rich-grid-chips-bar-width: 86% !important;
        justify-content: center !important;
        margin-left: 10px;
    }
    
        #chips-wrapper.ytd-feed-filter-chip-bar-renderer 
    {
        border: 1px solid var(--yt-spec-10-percent-layer);
        border-radius: 10px;
    }
  
        #left-arrow-button.ytd-feed-filter-chip-bar-renderer, #right-arrow-button.ytd-feed-filter-chip-bar-renderer 
    {
        border-radius: 10px;
    }

    yt-chip-cloud-chip-renderer[chip-style=STYLE_DEFAULT], yt-chip-cloud-chip-renderer[chip-style=STYLE_HOME_FILTER], yt-chip-cloud-chip-renderer[chip-style=STYLE_REFRESH_TO_NOVEL_CHIP] 
    {
        border: 0px solid var(--yt-spec-10-percent-layer) !important;
    }


    /* ============================================================================== */
    /* YouTube Menu */
    /* ============================================================================== */
    #guide-content.ytd-app 
    {
        margin-left: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 10px;
        border: 1px solid var(--yt-spec-10-percent-layer);
        width: 97%;
    }

    ytd-guide-entry-renderer[active] 
    {
        border-radius: 7px;
        width: 85%;
        margin-left: 10px;
    }

    tp-yt-paper-item:focus, .tp-yt-paper-item.tp-yt-paper-item:focus 
    {
        position: static !important;
    }

    #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:active 
    {
        background-color: #383838;
    }

    #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover
    {
        background-color: rgb(66 66 66 / 10%) !important;
        margin-left: 10px;
    }

    #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer 
    {
        width: 85%;
        border-radius: 7px;
        margin-top: 5px;
        transition: .2s;
    }

    ytd-mini-guide-entry-renderer 
    {
        margin-left: 4px;
        transition: .2s;
    }

    ytd-mini-guide-renderer.ytd-app 
    {
        margin-left: 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        border-radius: 7px;
        border: 1px solid var(--yt-spec-10-percent-layer);
    }

    ytd-mini-guide-entry-renderer:hover, ytd-mini-guide-entry-renderer:focus 
    {
        border-radius: 7px;
        margin-left: 4px;
        margin-right: 4px;
        margin-bottom: 4px;
    }

    a.ytd-mini-guide-entry-renderer 
    {
        padding: 13px 0px 4px !important;
        margin-left: -4px;
    }

    /* ============================================================================== */
    /* Youtube Upload Button */
    /* ============================================================================== */
    button#button[aria-label="Create"] 
    {
        width: 0;
        padding: 12px;
    }

    button#button[aria-label="Create"]:before 
    {
      content: "\\e09a";
      font-size: 19px;
      color: white;
      display: block;
      font-family: FontAwesome;
      font-weight: 200;
      margin-left: -7.8px;
    }


    /* ============================================================================== */
    /* YouTube Notifications */
    /* ============================================================================== */
    #contentWrapper.tp-yt-iron-dropdown > * 
    {
        border-radius: 10px;
        border-top: 1px solid var(--yt-spec-10-percent-layer);
    }

    /* ============================================================================== */
    /* Search */
    /* ============================================================================== */
    #container.ytd-searchbox 
    {
        border: 0px solid var(--ytd-searchbox-legacy-border-color) !important;
        border-radius: 6px !important;
        margin-right: 10px;
    }

    #container.ytd-searchbox > [slot=search-input] input 
    {
        margin-left: 5px !important;
    }

    #search-icon-legacy.ytd-searchbox 
    {
        border-radius: 6px !important;
        width: 70px;
    }


    /* ============================================================================== */
    /* Youtube Country */
    /* ============================================================================== */
        #country-code.ytd-topbar-logo-renderer 
    {
        color: transparent !important;
    }

    /* ============================================================================== */
    /* Youtube Video*/
    /* ============================================================================== */
    .html5-video-player .video-click-tracking, .html5-video-player .video-stream 
    {
        border-radius: 12px;
    }

    .ytp-chrome-bottom 
    {
        border-radius: 10;
    }
    
    
    /* ============================================================================== */
    /* Youtube Bar */
    /* ============================================================================== */
    .ytp-progress-list 
    {
        border-radius: 10px;
    }

    .ytp-progress-linear-live-buffer, .ytp-ad-progress, .ytp-load-progress, .ytp-play-progress
    {
        border-radius: 10px;
    }
  

    /* ============================================================================== */
    /* Youtube Subscribe Button */
    /* ============================================================================== */
    tp-yt-paper-button.ytd-subscribe-button-renderer 
    {
        background-color: #c000 !important;
        border: 2px red solid;
        border-radius: 7px !important;
    }

    tp-yt-paper-button.ytd-subscribe-button-renderer[subscribed] 
    {
        background-color: #262626 !important;
        color: #fff;
        border: 2px solid #262626;
    }


    /* ============================================================================== */
    /* Youtube Join Button */
    /* ============================================================================== */
    ytd-button-renderer.style-suggestive[is-paper-button] tp-yt-paper-button.ytd-button-renderer 
    {
        border: 2px solid var(--yt-spec-call-to-action) !important;
        border-radius: 7px;
    }


    /* ============================================================================== */
    /* Youtube Notification Button */
    /* ============================================================================== */
    ytd-subscription-notification-toggle-button-renderer #button.ytd-subscription-notification-toggle-button-renderer 
    {
      background-color: #262626 !important;
      border-radius: 7px;
      margin-left: 8px;
    }

    ytd-menu-popup-renderer 
    {
        border-radius: 10px !important;
    }


    /* ============================================================================== */
    /* Youtube Title Header */
    /* ============================================================================== */
    ytd-video-primary-info-renderer 
    {
        background: #111 !important;
        margin-top: 20px;
        border-radius: 10px 10px 0px 0px;
    }

    .title.ytd-video-primary-info-renderer 
    {
        margin-left: 20px;
    }

    #info.ytd-video-primary-info-renderer 
    {
        margin-left: 20px;
        margin-right: 20px;
    }

    .super-title-icon.ytd-video-primary-info-renderer 
    {
        margin-left: 17px !important;
        margin-right: -17px !important;
    }


    /* ============================================================================== */
    /* Youtube Description */
    /* ============================================================================== */
    ytd-video-secondary-info-renderer 
    {
        background: #111 !important;
        margin-bottom: -24px !important;
        margin-bottom: -4px !important;
        border-bottom: 0px solid var(--yt-spec-10-percent-layer) !important;
        border-radius: 0px 0px 10px 10px;
    }
  
    .super-title.ytd-video-primary-info-renderer 
    {
        margin-left: 20px !important;
    }
    
    #top-row.ytd-video-secondary-info-renderer 
    {
        margin-left: 20px !important;
        margin-right: 20px !important;
    }

    /* ============================================================================== */
    /* Youtube Comment Section */
    /* ============================================================================== */
    #title.ytd-comments-header-renderer 
    {
        margin-left: 20px !important;
        margin-top: 16px !important;
    }

    ytd-comment-simplebox-renderer
    {
        margin-left: 20px !important;
        margin-bottom: 16px !important;
        margin-right: 20px !important;
    }

    ytd-comments-header-renderer 
    {
        background: #111 !important;
    }

    #footer.ytd-commentbox 
    {
        margin-top: 10px !important;
    }

    ytd-button-renderer.style-primary[disabled][is-paper-button] 
    {
        border-radius: 5px !important;
        transition: .2s;
    }
    
    ytd-button-renderer.style-primary[is-paper-button] 
    {
        border-radius: 5px !important;
        transition: .2s;
    }

    #sections:nth-child(2) 
    {
        background-color: #111 !important;
        border-radius: 10px;
    }

    ytd-comment-thread-renderer 
    {
        margin-left: 20px;
        margin-right: 20px;
    }


    /* ============================================================================== */
    /* Video Mini Playlist */
    /* ============================================================================== */
    #container.ytd-playlist-panel-renderer 
    {
        border-radius: 10px;
    }
    
    ytd-playlist-panel-renderer[collapsible] .header.ytd-playlist-panel-renderer 
    {
        border-radius: 10px 10px 0px 0px;
    }

    .playlist-items.ytd-playlist-panel-renderer 
    {
        border-radius: 10px;
    }

    ytd-playlist-panel-video-renderer[selected][watch-color-update] 
    {
        background-color: rgb(0 0 0) !important;
        border-radius: 10px;
        margin-top: 10px;
        margin-left: 10px;
        margin-right: 5px;
        margin-bottom: 10px;
    }

    ytd-playlist-panel-video-renderer 
    {
        margin: 10px;
        border-radius: 10px;
        transition: .2s;
        padding: 9px 0px 3px 0px !important;
    }

    ytd-playlist-panel-video-renderer[watch-color-update]:hover:not(.dragging)
    {
        background-color: rgb(32 32 32) !important;
    }

    ytd-thumbnail-overlay-side-panel-renderer 
    {
        border-radius: 0px 10px 10px 0px !important;
    }

    img#img[width="94"] 
    {
        border-radius: 10px 0px 0px 10px !important;
    }

    /* Youtube Premium Overlay */
    img#img[src="https://www.gstatic.com/youtube/img/promos/growth/6ad5a99c727579634bc3e2fb67562a2621170bdd11578967392667be5a05c5e4_384x384.png"] 
    {
        border-radius: 10px;
    }

    tp-yt-paper-dialog 
    {
        border-radius: 10px;
    }


    /* ============================================================================== */
    /* Miniplayer */
    /* ============================================================================== */
    .video.ytd-miniplayer 
    {
        background-color: #00000000 !important;
    }

    .html5-video-player.ytp-player-minimized:not(.ended-mode):not(.cued-mode):not(.unstarted-mode) 
    {
        overflow: visible;
    }

    #content.ytd-rich-item-renderer ytd-post-renderer.ytd-rich-item-renderer, #content.ytd-rich-item-renderer ytd-shared-post-renderer.ytd-rich-item-renderer 
    {
        border-radius: 10px !important;
    }

    #player-container.ytd-miniplayer 
    {
        border-radius: 15px;
    }

    #movie_player
    {
         border-radius: 14px;
    }

    .html5-video-player .video-stream 
    {
        border-radius: 14px 14px 0px 0px !important;
    }

    ytd-miniplayer.ytd-app[active] 
    {
        border-radius: 14px !important;
    }

    #card.ytd-miniplayer 
    {
        border-radius: 15px;
    }

    .ytp-miniplayer-scrim 
    {
        border-radius: 14px;
    }

    .ytp-miniplayer-close-button 
    {        
        transition: .2s;
        margin-top: 5px;
        margin-right: 5px;
        border-radius: 30px;
    }

    .ytp-miniplayer-close-button:hover
    {        
        background-color: #11111175;
        border-radius: 30px;
    }

    .ytp-miniplayer-expand-watch-page-button.ytp-miniplayer-button-top-left 
    {
        transition: .2s;
        margin-left: 5px;
        margin-top: 5px;
        border-radius: 30px;
    }

    .ytp-miniplayer-expand-watch-page-button.ytp-miniplayer-button-top-left:hover
    {        
        background-color: #11111175;
        border-radius: 30px;
    }


    /* ============================================================================== */
    /* Premiere / Live Chat Notification */
    /* ============================================================================== */
    .ytp-autohide .ytp-offline-slate-bar, .ytp-hide-controls .ytp-offline-slate-bar 
    {
        border-radius: 9px !important;
    }

    yt-live-chat-header-renderer 
    {
        border-radius: 10px 10px 0px 0px;
    }

    ytd-live-chat-frame 
    {
        border: 0px solid var(--yt-spec-10-percent-layer) !important;
        border-radius: 10px;
    }

    #show-hide-button.ytd-live-chat-frame>ytd-toggle-button-renderer.ytd-live-chat-frame 
    {
        margin-top: -1px;
    }

    #item-scroller.animated.yt-live-chat-item-list-renderer #items.yt-live-chat-item-list-renderer 
    {
        background: #111;
    }

    #show-hide-button.ytd-live-chat-frame>ytd-toggle-button-renderer.ytd-live-chat-frame 
    {
        border-radius: 10px;
        transition: .2s;
    } 

    tp-yt-paper-button#button[aria-pressed="true"] 
    {
        border-radius: 0px 0px 10px 10px !important;
        border-top: 1px solid var(--yt-spec-10-percent-layer);
        background-color: #202020 !important;
    }

    tp-yt-paper-button#button[aria-pressed="false"] 
    {
        border-radius: 10px;
        border-top: 0px solid var(--yt-spec-10-percent-layer);        
    }

    #card.yt-live-chat-viewer-engagement-message-renderer 
    {
        background-color: #1c1c1c !important;
        border-radius: 8px !important;
    }

    #menu.yt-live-chat-text-message-renderer 
    {
        background: #111 !important;
    }
    
    .sbsb_a 
    {
        /*background: #111 !important;*/
        border-radius: 10px;
        margin-top: 10px;
        margin-right: 10px;
    }

    .sbpqs_a 
    {
        /*color: #ffffff !important;*/
    }    

    .sbdd_b 
    {
        background: #fff0 !important;
        border: 0px solid #2a2a2a00 !important;
        border-top-color: #d9d9d900 !important;
        box-shadow: 0 2px 4pxrgba(0,0,0,0.2) !important;
        -webkit-box-shadow: 0 2px 4px rgb(0 0 0 / 0%) !important;
    }


    /* ============================================================================== */
    /* Community Chat */
    /* ============================================================================== */
    ytd-page-manager>*.ytd-page-manager 
    {
        background: #181818 !important;
    }

    ytd-backstage-post-thread-renderer 
    {
        border-radius: 10px;
    }

    ytd-section-list-renderer:not([hide-bottom-separator]):not([page-subtype=history]):not([page-subtype=memberships-and-purchases]):not([page-subtype=ypc-offers]) #contents.ytd-section-list-renderer>*.ytd-section-list-renderer:not(:last-child):not(ytd-page-introduction-renderer):not([item-dismissed]).ytd-section-list-renderer:not([has-destination-shelf-renderer]).ytd-section-list-renderer:not(ytd-minor-moment-header-renderer) 
    {
        border-bottom: 0px solid var(--yt-spec-10-percent-layer) !important;
    }

    ytd-comments-header-renderer:nth-child(1)
    {
        border-radius: 10px;
    }

` );

/* JS */
function GM_addStyle(cssStr) 
{
    var D               = document;
    var newNode         = D.createElement ('style');
    newNode.textContent = cssStr;

    var targ    = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
    targ.appendChild (newNode);
    
}

(function()
{
  'use strict';
  
  // ==============================================================================
  // Change Youtube Search Placeholder
  // ==============================================================================
  document.addEventListener('yt-navigate-finish', () => 
    {
        setTimeout(() => 
        {
            document.querySelector('input#search').placeholder = 'Search something...';
        }, 200);
    }); 
  
}) ();