☰

Tabview Youtube Design Customization

Change some designs in Tabview Youtube

/* ==UserStyle==
@name           Tabview Youtube Design Customization
@version        0.2.6
@namespace      github.com/cyfung1031
@license        MIT
@description    Change some designs in Tabview Youtube
@author         CY Fung
@supportURL     https://github.com/cyfung1031/Tabview-Youtube/
@preprocessor   stylus
@var select     default-tab                     "Default Tab" {
  "dt0:Default / Local Setting": "0",
  "dt1:Info Tab": "1",
  "dt2:Comments Tab": "2",
  "dt3:Videos Tab": "3"
}
@var checkbox   no-rounded-button               "No Rounded Button"                        0
@var checkbox   no-tab-btn-text                 "No Tab Button Text"                       0
@var checkbox   round-tab-container             "Round Tab Container"                      0
@var checkbox   round-live-chat-frame           "Round Live Chat Frame"                    0
@var checkbox   use-custom-rounding             "Use Custom Rounding"                      0
@var range      custom-rounding-value           "Custom Rounding Value"                    [12, 1, 50, 1, 'px']
@var checkbox   split-tabs                      "Split Tabs"                               0
@var checkbox   hide-tab-info                   "Hide Tab - Info"                          0
@var checkbox   hide-tab-comments               "Hide Tab - Comments"                      0
@var checkbox   hide-tab-videos                 "Hide Tab - Videos"                        0   
@var checkbox   no-red-line-for-single-tab      "No Red Line For Single Tab"               0                  
@var checkbox   move-tabs-to-top-side-when-chat-expanded "Move Tabs To Top Side When Chat Expanded" 0
@var checkbox   hide-disabled-comment-tab       "Hide Disabled Comment Tab"                0
==/UserStyle== */

keyFrameForTabviewTabsHideController(a, x)
    $keyframe-name = s('%s-%s',a, x);
    @keyframes {$keyframe-name}
      for i in 0..1
        {100% * i}
          background-position-x (i+1)px


@-moz-document url-prefix("https://www.youtube.com/watch?v=") {

                
    if no-rounded-button {
        html .yt-spec-button-shape-next--size-m,
        html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-start,
        // html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-button.yt-spec-button-shape-next--segmented-end,
        html .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--segmented-end {
            border-radius: 0;
        }
    }

    if no-tab-btn-text {
        .tab-btn[tyt-tab-content="#tab-info"] span,
        .tab-btn[tyt-tab-content="#tab-videos"] span,
        .tab-btn[tyt-tab-content="#tab-playlist"] span {
            display: none;
        }
    }
    
    if round-tab-container {
        html body ytd-watch-flexy[class] #right-tabs {
            border-radius: var(--tyt-rounding-value);
            outline: 1px solid var(--yt-spec-10-percent-layer);
            contain: paint;
            #material-tabs {
                border: 0;
            }
            .tab-content {
                border: 0;
                border-top: 1px solid var(--yt-spec-10-percent-layer);
            }
        }
    }
    
    if round-live-chat-frame {
        ytd-live-chat-frame#chat.ytd-watch-flexy{
            border-radius: var(--tyt-rounding-value);
        }
    }

    :root {
        if use-custom-rounding {
            --tyt-rounding-value: custom-rounding-value;
        } else {
            --tyt-rounding-value: 12px;
        }
    }
            
    if split-tabs {
        html body ytd-watch-flexy #right-tabs {
            .tab-btn:nth-child(n+2)::before {
                content: "";
                background: var(--yt-spec-10-percent-layer);
                position: absolute;
                left: 0;
                top: 8px;
                height: 30px;
                width: 1px;
            }
        }
    }
    
    tyt-tabs-hide-config = 0
        
    if hide-tab-info + hide-tab-comments + hide-tab-videos < 3 {

        tki = 0
        if hide-tab-info {
            tyt-tabs-hide-config += 1
            tki += 1
        }
        if hide-tab-comments {
            tyt-tabs-hide-config += 2
            tki += 1
        }
        if hide-tab-videos {
            tyt-tabs-hide-config += 4
            tki += 1
        }

        if tki == 2 && no-red-line-for-single-tab {
            body ytd-watch-flexy #right-tabs .tab-btn[tyt-tab-content].active {
                border-bottom-color: transparent;
            }
        }
        
    }

    controllerId = unquote('tabviewTabsHideController')
    keyFrameForTabviewTabsHideController(controllerId, tyt-tabs-hide-config)

    #tabview-tabs-hide-controller{
        animation: s('%s-%s 0ms linear 0ms 1 normal forwards', controllerId, tyt-tabs-hide-config);
    }
    
    tyt-default-tab-config = default-tab - 0;
    
    controllerId = unquote('tabviewDefaultTabController')
    keyFrameForTabviewTabsHideController(controllerId, tyt-default-tab-config)

    #tabview-default-tab-controller{
        animation: s('%s-%s 0ms linear 0ms 1 normal forwards', controllerId, tyt-default-tab-config);
    }
    
    
    if move-tabs-to-top-side-when-chat-expanded {

        ytd-watch-flexy[tyt-chat^="+"] #secondary-inner.style-scope.ytd-watch-flexy {
            display:flex;
            flex-direction: column;
        }

        ytd-watch-flexy[tyt-chat^="+"] #chat-container, ytd-watch-flexy[tyt-chat^="+"] ytd-live-chat-frame#chat {
            order: 99;
        }

        ytd-watch-flexy[is-two-columns_][tyt-chat][tyt-chat^="+"] #secondary-inner.style-scope.ytd-watch-flexy #right-tabs {
            --tyt-right-tabs-margin-top: 0;
            --tyt-right-tabs-margin-bottom: var(--tyt-right-tabs-margin-size);
        }

    }
    
    if hide-disabled-comment-tab {
        .tab-btn[loaded-comment="message"] {
            display: none !important;
        }
    }
    
}