OldTube Tweaks by aKqir24

/* ==UserStyle==
@name           OldTube Tweaks
@author         aKqir24 <Akqir> (https://github.com/aKqir24)
@description    Interface tweaks for a nostalgic experience in youtube...
@namespace      https://userstyles.world/user/aKqir24
@homepageURL    https://github.com/aKqir24/OldTube-Tweaks
@supportURL     https://github.com/aKqir24/OldTube-Tweaks/issues
@version        1.2.7
@license        MIT
@preprocessor   stylus

@var number descriptionRadius "Panels Radius" [0, 0, 20, 5, "px"]
@var number feedVideoRadius "Video Radius" [0, 0, 20, 5, "px"]
@var number buttonRadius "Buttons Radius" [0, 0, 20, 5, "px"]
@var number searchBoxRadius "Searchbox Radius" [0, 0, 20, 5, "px"]
@var range videoCardThumbnail "Video Margins" [1, 0, 10, 1, "px"]

@var checkbox controlShadow 'Controls Shadow' 1
@var checkbox removeShorts  'Remove Shorts' 1
@var checkbox compactMenu  'Compact Menu' 1
@var checkbox betaFeatures ' Beta Features' 0

@var select accentChoice "Theme Color Level" [ "None:None",
                                          "Mini:Minimal",
                                          "Full:Full*" ]
@var color accentColor1 'Primary Color' #CC0000
@var color accentColor2 'Secondary Color' #f03
==/UserStyle== */

/*==TO BE ADDED== */
/*@var checkbox compactButtons  'Compact Buttons' 1*/

/* Support My Youtube Channel!!     */
/* - https://www.youtube.com/@Akqir */
/* Or Star This Project In Github   */
/* https://github.com/aKqir24/OldTube-Tweaks */

@-moz-document domain("youtube.com") {
  :root {
    --sub-black-bg-btn: #303030;
    --sub-white--text-btn: #f2f2f2;
    --button-corner-radius: buttonRadius;
    --search-box-color: --yt-spec-call-to-action;
    --corner-radius-video-player: feedVideoRadius;
    --description-corner: descriptionRadius;
    --feed-thumbnail-preview: feedVideoRadius;
    --video-card-preview: videoCardThumbnail;
    --search-box-radius: searchBoxRadius;
    --progressbar-color-right: #ff2791;
    --progressbar-color-left: #f03;
    --highlight-link: #2091f0;
    --button-des-text: #2091f0;
    --dislike-color: red;
    --like-color: lime;
  }
}


/** Options Condition **/

    /*? Accent Color Application */
    if accentChoice == Full {
        :root {
            --subscribe-button-color: accentColor1;
            --progressbar-color-left: accentColor1;
            --progressbar-color-right: accentColor2;
            --yt-attributed-string-link-hover-color: accentColor2;
            --button-des-text: accentColor1;
            --search-box-color: accentColor1
        }

        html[dark],
        [dark] {
            --yt-spec-red-indicator: accentColor1
        }

    } else if accentChoice == Mini {
        :root {
            --search-box-color: accentColor1;
            --subscribe-button-color: accentColor1;
            --playlist-progressbar-color:
            linear-gradient(
                to right,
                var(accentColor1) 80%,
                var(accentColor2) 100%
            );
        }
    } else if accentChoice == None {
        :root {
            --playlist-progress-color: linear-gradient(
                to right,
                #f03 80%,
                #ff2791 100%
            );
        }

      html[dark],
      [dark] {
            --yt-spec-red-indicator: linear-gradient(
          to right,
          #f03 80%,
          #ff2791 100%
        );
      }
    }

    /*? Controls Shadow */
    if controlShadow == 0{
        .ytp-gradient-top,
        .ytp-gradient-bottom {
            display: none;
        }
    }

    /*? Side Menu Buttons */
    if compactMenu {
        tp-yt-paper-item.ytd-guide-entry-renderer {
            padding-left: 1px;
            padding-right: 1px
        }

        .title.ytd-mini-guide-entry-renderer {
            display: none
        }

        ytd-mini-guide-entry-renderer {
            border-radius: var(--button-corner-radius);
            width: 54px
        }

        a.ytd-mini-guide-entry-renderer {
            padding: 14px 0px 12px;
            width: 54px
        }
    }

    /*? Beta Features */
    if betaFeatures {
        .player-container.ytd-reel-video-renderer,
        .metadata-container.ytd-reel-player-overlay-renderer {
            border-radius: var(--feed-thumbnail-preview);
        }

        .ytPlayerProgressBarDragContainer,
        ytProgressBarLineProgressBarLine {
            margin-left: -8px;
            width: 81.6%;
            position: sticky;
        }

        .ytProgressBarLineProgressBarBackground,
        .ytProgressBarLineProgressBarPlayed,
        .ytProgressBarLineProgressBarLine,
        yt-progress-bar-playhead {
            width: 103.41%;
        }

        .ytProgressBarLineHost {
            width: 123.53%;
        }
        
        /*? Playlist */
        ytd-item-section-header-renderer[modern-typography] #title.ytd-item-section-header-renderer{
            margin-left: -10rem;
            margin-bottom: 0px
        }
    
        #page-header.ytd-tabbed-page-header {
            margin-left: -8%;
        }
    
        #dismissible.ytd-video-renderer {
            width: 155%;
            margin-left: -98px;  
        }
        
        #placeholder-area.ytd-comment-simplebox-renderer,
        .focused-line.tp-yt-paper-input-container {
            border-radius: 0px
        }
    }

    /*? Shorts Suggestion*/
    if removeShorts {
        ytd-rich-shelf-renderer[standard-shelf-margins][is-shorts][is-show-more-hidden][is-show-less-hidden][is-truncated]
        #dismissible.ytd-rich-shelf-renderer,
        ytd-exploratory-results-renderer.ytd-item-section-renderer,
        ytd-horizontal-card-list-renderer.ytd-item-section-renderer:not(:first-child),
        ytd-rich-shelf-renderer[standard-shelf-margins]
        #dismissible.ytd-rich-shelf-renderer,
        ytd-reel-shelf-renderer.ytd-item-section-renderer {
            display: none;
            margin: 0px;
            padding: 0px
        }
    }



/** Panels Section **/

    /*? Description & Chat */
    a.yt-simple-endpoint.yt-formatted-string {
        color: var(--yt-spec-call-to-action)
    }
    
    #video-title.ytd-playlist-video-renderer {
        color: white
    }
    #middle-row.ytd-watch-metadata:empty {
        display: flex;
        margin-top: 1rem;
        height: 0.01px;
        padding: 1px;
        background-color: var(--yt-emoji-picker-variant-selector-bg-color)
    }

    ytd-expandable-metadata-renderer:not([is-expanded]),ytd-expandable-metadata-renderer,
    ytd-expandable-metadata-renderer:not([is-expanded]) #header.ytd-expandable-metadata-renderer:hover,
    #description.ytd-watch-metadata, .shortsLockupViewModelHostThumbnailContainerRounded,
    ytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer,
    ytd-watch-metadata[description-collapsed] #description.ytd-watch-metadata, ytd-rich-metadata-renderer[rounded],
    ytd-watch-flexy[flexy][js-panel-height_]:not([fixed-panels]) #chat.ytd-watch-flexy:not([collapsed]),
    .ytVideoMetadataCarouselViewModelHost {
        border-radius: var(--description-corner) !important
    }
    
    yt-content-metadata-view-model,
    yt-core-attributed-string--inline-block-mod,
    .yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color span{
        color:gray
    }
    
    .yt-core-attributed-string__link--call-to-action-color, a.yt-simple-endpoint.yt-formatted-string, 
    .yt-core-attributed-string--link-inherit-color .yt-core-attributed-string__link--call-to-action-color {
        color: var(--yt-attributed-string-link-hover-color)
    }
    
    .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--text,
    .yt-spec-button-shape-next--call-to-action.yt-spec-button-shape-next--outline {
        color: var(--button-des-text)
    }

    /*? Suggestions */
    ytd-rich-grid-renderer:not([is-default-grid]) #header.ytd-rich-grid-renderer {
        margin-bottom: 2%;
    }

    /*? Side Menu */
    .yt-simple-endpoint,
        #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer {
        color: transparent;
    }

    ytd-mini-guide-renderer.ytd-app {
        padding: 5px;
        margin-right: -100px;
        width: 65px;
    }

    #items.ytd-mini-guide-renderer {
        align-items: center;
        margin: 0px;
        width: 55px;
    }

    #dismissible.ytd-compact-video-renderer {
        margin-bottom: var(--video-card-preview);
        margin-left: 2px;
    }

    /*? Channel Menu*/
    ytd-multi-page-menu-renderer {
        border-radius: var(--description-corner) !important;
    }

    /*?  Banner */
    .yt-image-banner-view-model-wiz--inset {
        border-radius: var(--feed-thumbnail-preview) !important;
    }

    .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading
    .yt-spec-button-shape-next__icon {
        margin: 0px;
    }
    
    /*? Write A Comment */
    
    ytd-commentbox:not([is-backstage-post]) yt-formatted-string#contenteditable-textarea.ytd-commentbox {
        font-family: "Roboto","Arial",sans-serif;
        margin-bottom: 0px;
        font-size: 1.4rem;
        line-height: 2rem;
        font-weight: 400;
        background-color: var(--yt-spec-raised-background);
        padding: 8px 12px 8px;
    }
    
/** Video Section **/

    /*? Metadata Title */
    ytd-watch-metadata[title-headline-xs] h1.ytd-watch-metadata {
        font-family: "Roboto", "Arial", sans-serif;
        font-size: 2rem;
        line-height: 2.8rem;
        font-weight: 700;
        overflow: hidden;
        max-height: 5.6rem;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        text-overflow: ellipsis;
        white-space: normal;
        padding-top: 5px
    }
    

    /*? Thumbnail */
    .ytd-thumbnail,
    .collections-stack-wiz__collection-stack1--medium,
    .collections-stack-wiz__collection-stack2,
    .yt-thumbnail-view-model--medium,
    .yt...