Greasy Fork is available in English.

YouTube Live Borderless

Make YouTube Live Borderless

/* ==UserStyle==
@name           YouTube Live Borderless
@version        0.5.31
@namespace      github.com/cyfung1031
@license        MIT
@description    Make YouTube Live Borderless
@author         CY Fung
@supportURL     https://github.com/cyfung1031/YouTube-Live-Borderless/
@compatible     edge Edge [Blink] >= 105; Stylus (Beta)
@compatible     chrome Chrome >= 105; Stylus (Beta); Chrome 101-104 requires "enable-experimental-web-platform-features"
@compatible     firefox FireFox >= 103; Stylus; layout.css.has-selector.enabled = true; note: some features might not be very stable!!
@compatible     opera Opera >= 91; Stylus (Beta)
@compatible     safari Safari >= 15.4; Stylus
@preprocessor   stylus
@var checkbox   youtube-wpr                     "YouTube WPR"                      0
@var select     mode-for-two-col                "Mode ##TwoColumns" {
  "Expanded Panel Only #Recommended":   "expanded-panel",
  "Expanded Live Chat Only":            "expanded-live",
  "Expandable Live Chat Only":          "expandable-live",
  "Always":                             "always"
}
@var select     mode-for-single-col             "Mode ##SingleColumn" {
  "YT Mobile #Recommended":             "mobile",
  "Normal":                             "normal",
  "Disabled":                           "disabled"
}
@var checkbox   no-masthead                     "Top.MastheadBar ::Hide"                            0
@var range      masthead-hoverable-height       "Top.MastheadBar ::Hoverable"                       [12, 0, 36, 2, 'px']
@var range      masthead-hoverable-delay-in     "Top.MastheadBar ::Hoverable.DelayIn"               [300, 0, 800, 100, 'ms']
@var checkbox   disable-cinematics              "CinematicsEffect ::Disable"                        0
@var range      video-enlarging                 "Video.Enlarging >>>Video.Border.Fine.Tune"         [0, 0, 8, 2]
@var range      video-padding-left-right        "Video.Padding.LeftRight (Experimental)"            [0, 0, 18, 2, 'px']
@var range      video-padding-top-bottom        "Video.Padding.TopBottom (Experimental)"            [0, 0, 18, 2, 'px']
@var range      primary-content-margin          "PrimaryContent ::Margin"                           [24, 6, 48, 6, "px"]
@var range      video-title-size                "VideoTitle ::Size"                                 [2.0, 1.0, 3.0, 0.2, "rem"]
@var checkbox   no-bottom-row                   "Bottom.PrimaryMetaInfoRow ::Hide"                  0
@var range      min-below-area                  "BelowArea ::Minimum"                               [120, 0, 240, 10, 'px']
@var range      min-below-area-for-theater      "WideTheater.BelowArea ::Minimum"                   [120, 0, 240, 10, 'px']
@var number     side-panel-width                "SidePanel ::Width"                                 [440, 320, 640, 20, "px"]
@var checkbox   no-round-border                 "RoundBorder ::Disable"                             1
@var number     chat-zoom-for-right-col         "RightCol.Chat ::Zoom"                              [1.0, 0.4, 1.2, 0.05]
@var range      chat-btn-height                 "RightCol.Chat ::SpaceAbove@Zoom"                   [36, 0, 60, 4, 'px']
@var number     chat-zoom-for-mobile            "YTMobile.Chat ::Zoom"                              [1.0, 0.4, 1.2, 0.05]
@var range      chat-min-height                 "YTMobile.Chat ::Min.Height"                        [400, 20, 900, 10, 'px']
@var checkbox   unlimit-player-max-width        "Unlimit Player Max Width"                          1
@var checkbox   fix-player-height-overflow      "Fix Player Height Overflow"                        1
@var checkbox   video-no-round-angle            "Video No Round Angle"                              0
@var checkbox   compatible-ytlstm               "Compatible with ytlstm-theater-mode"               0
@var checkbox   fix-for-ytlc                    "Fix for YouTubeLiveClock"                          0
@var checkbox   show-comments-region            "Show Comments (without Tabview Youtube)"           0
==/UserStyle== */
/*

@var range      chrome-bottom-bar-margin        "Chrome Bottom Bar Margin"                      [12, 6, 48, 6, "px"]

  Chrome Bottom Bar Margin is 12px only due to

    MU = function(a) {
        var b = a.u.ag()
          , c = a.G.getVideoData().D
          , d = 0;
        a.u.ag() && a.u.Me() && (d = (a.G.fb().getPlayerSize().width - a.G.getVideoContentRect().width) / 2);
        return 12 * (c ? 0 : b ? 2 : 1) + d
    }

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

    dummy() { 
        // dummy
        border: 0; 
    }

    buildL4(type, args...) {
        st1 = join('', ':', type, '(', join('\, ', args), ')')
        selector(st1)
    }

    /*
    if min-below-area <= 10px {
        min-below-area = 0px
    }
    if min-below-area-for-theater <= 10px {
        min-below-area-for-theater = 0px
    }
    */
    chat-btn-height = chat-btn-height + 1px
    if chat-btn-height == 0px + 1px {
        chat-btn-height = 0px
    }

    // masthead-hoverable-height = (masthead-hoverable-h - 1) * 2px

    no-masthead-w = no-masthead //
    chrome-bottom-bar-margin = 12px // this cannot be changed

    single-col-mobile = (mode-for-single-col == "mobile" ? 1 : 0) //
    if single-col-mobile == 1 and no-masthead-w == 0 {
        no-masthead-w = 2 //
    }

    chat-zoom-for-mobile-enable = ((chat-zoom-for-mobile < 1) or (chat-zoom-for-mobile > 1))

    contentBase() {
        
        html {
            --ylb-min-below-area: min-below-area;
        }
        
        #microformat.ytd-watch-flexy {
            position: fixed;
            top:-200vh;
            left:-200vw;
        }

        if fix-player-height-overflow { // 縦配信
            html:not([tabview-loaded]) {
                --yt-fix-player-contain: layout;
            }
            .efyt-mini-player {
                --yt-fix-player-contain: initial;
            }
            #player > #player-container-outer.style-scope.ytd-watch-flexy {
                contain: var(--yt-fix-player-contain);
            }
        }

        if fix-for-ytlc {

            @supports (color: var(--compatibile-with-chrome-plugin-youtube-live-clock-20221107)) {

                /* 2022/11/07 - specific fix for YouTubeLiveClock - chrome only */
                html:has(style#ytlctn-style-for-native-control) #columns.ytd-watch-flexy #player::after {
                    content: "";
                    background-color: transparent;
                    border-color: transparent;
                    color: transparent;
                    box-sizing: border-box;
                    border-style: dotted;
                    display: flex;
                    height: 0px;
                    margin: 0;
                    border: 0;
                    margin-top: 51px;
                    width: calc(100% - 4px);
                    position: relative;
                    pointer-events: none;
                }

                html:has(style#ytlctn-style-for-native-control) #columns.ytd-watch-flexy #below {
                    transform: initial;
                }

                html:has(style#ytlctn-style-for-native-control) ytd-watch-flexy[flexy][is-two-columns_][theater] #columns.ytd-watch-flexy {
                    margin-top: 51px;
                }
                
                html:has(style#ytlctn-style-for-native-control) #columns {
                    overflow: revert;
                }
                
            }

            @supports (color: var(--compatibile-with-chrome-plugin-youtube-live-clock-20240123)) {

                /* 2024/01/23 - specific fix for YouTubeLiveClock - chrome only */
                html:has(style#ytlc-style-for-native-control) #columns.ytd-watch-flexy #player::after {
                    content: "";
                    background-color: transparent;
                    border-color: transparent;
                    color: transparent;
                    box-sizing: border-box;
                    border-style: dotted;
                    display: flex;
                    height: 0px;
                    margin: 0;
                    border: 0;
                    margin-top: 51px;
                    width: calc(100% - 4px);
                    position: relative;
                    pointer-events: none;
                }

                html:has(style#ytlc-style-for-native-control) #columns.ytd-watch-flexy #below {
                    transform: initial;
                }

                html:has(style#ytlc-style-for-native-control) ytd-watch-flexy[flexy][is-two-columns_][theater] #columns.ytd-watch-flexy {
                    margin-top: 51px;
                }
                
                html:has(style#ytlc-style-for-native-control) #columns {
                    overflow: revert;
                }
                
            }



        }

        ytd-watch-flexy[flexy] #player-container-outer.ytd-watch-flexy,
        ytd-watch-flexy[flexy] #player-container-inner.ytd-watch-flexy {
            pointer-events: none;    
        }

        ytd-watch-flexy[flexy] #player-container.ytd-watch-flexy,
        ytd-watch-flexy[flexy] #ytd-player.ytd-watch-flexy {
            pointer-events: initial;    
        }

        // general fix
        ytd-watch-flexy[theater] .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
            min-height: unset;
        }
        #movie_player .ytp-cued-thumbnail-overlay-image {
            /* background-size: contain !important; */
            background-size: auto 100% !important;
        }
        ytd-watch-flexy:not([is-two-columns_]) ytd-watch-metadata {
            padding-top: var(--ytd-margin-3x);
        }
        ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]) #primary.ytd-watch-flexy {
            padding-top: 0;
            margin-top: 0;
        }

        m = youtube-wpr ? ':not([tabview-loaded])[youtube-wpr*="h2"]' : ':not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)'

        selector-comments-1 = show-comments-region ? '#primary-inner.ytd-watch-flexy ytd-commentsx#commentsx.ytd-watch-flexy' : '#primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy'

        html{selector(m)} {buildL4('is', 
            selector-comments-1, 
            '#secondary-inner.ytd-watch-flexy > #related.ytd-watch-flexy')} {
            display: none !important;
        }


        html:not([tabview-loaded]) #cinematics {
            // contain: layout;
            contain: layout size style;
            user-select: none;
            touch-action: none;
            pointer-events: none;
        }

        if video-no-round-angle {
            ytd-watch-flexy[rounded-player-large][default-layout] #ytd-player.ytd-watch-flexy.ytd-watch-flexy {
                border-radius: 0;
            }
        }

    }

    //
    contentNoMasthead() {

        // root = html
        
        & {
            /* 0px not 0 */
            --ytd-masthead-height: 0px;
            --ytd-toolbar-height: 0px;
            --ytd-watch-flexy-masthead-height: 0px;
        }
        
        ytd-app[style] { /* YouTube set the masthead-height in style */
            --ytd-masthead-height: 0px !important;
            --ytd-toolbar-height: 0px !important;
            --ytd-watch-flexy-masthead-height: 0px !important;
        }
        
        & .style-scope{buildL4('is', '#page-manager', 'ytd-watch-flexy', 'ytd-page-manager')} {
            --ytd-masthead-height: 0px;
            --ytd-toolbar-height: 0px;
            --ytd-watch-flexy-masthead-height: 0px;
        }
        
        

        #masthead-container {
            height: 0;
            --masthead-opacity: 0;
            opacity: var(--masthead-opacity) !important;
            transition: opacity 300ms;
            min-height: masthead-hoverable-height;
            contain: layout size style;
        }

        #masthead-container > ytd-masthead {
            transform: translateY(-100%);
            transition: transform 300ms;
        }


        if masthead-hoverable-height > 0 {

            ytd-app {
                --ut-masthead-background: rgba(15,15,15,0.8);
            }
            ytd-app[darker-dark-theme] {
                --ut-masthead-background: rgba(240,240,240,0.8);
            }
            ytd-masthead#masthead:hover {
                background-color: color(--ut-masthead-background);
                z-index: 9999 !important;
            }

            ytd-masthead#masthead {
                background-color: rgba(15,15,15,0.8);
                z-index: 9999 !important;
            }

            #masthead-container:hover {
                --masthead-opacity: 1;
            }

            #masthead-container:hover > ytd-masthead {
                transform: translateY(0%);
                transition-delay: masthead-hoverable-delay-in;
            }

            #masthead-container::after {
                content: '';
                display: flex;
                width: 100%;
                height: masthead-hoverable-height;
                top: 0;
                z-index: 77;
                cursor: default;
                user-select: none !important;
                touch-action: none !important;
                box-sizing: border-box;
                padding: 0;
                margin: 0;
            }
        }
        

        ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]):not([theater]) {

            #columns.style-scope.ytd-watch-flexy,
            #primary.style-scope.ytd-watch-flexy,
            #primary-inner.style-scope.ytd-watch-flexy,
            #secondary.style-scope.ytd-watch-flexy,
            #secondary-inner.style-scope.ytd-watch-flexy {
                height: 100vh;
                max-height: 100%;
            }
        }

        ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {

            height: 100vh;
            
            .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
                flex: 77;
                max-height: unset;
            }


        }



        &:not([tabview-loaded]) ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {

            .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} ~ #columns.style-scope.ytd-watch-flexy {
                overflow: visible;
            }
            
        }

        

    } // 
        
    contentSingleColMobile() {
        

        // html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))

        if no-masthead-w>=1 {


            if youtube-wpr {


                &[youtube-wpr*="h2"] ytd-watch-flexy:not([theater]):not([fullscreen]):not([no-top-margin]):not([reduced-top-margin]) .ytd-watch-flexy{buildL4('is', '#primary', '#secondary')} {
                    padding-top: 0px;
                }
                &[youtube-wpr*="h2"] ytd-watch-flexy[tyt-tab^="#tab-"]:not([is-two-columns_]) #primary-inner.ytd-watch-flexy {
                    padding-bottom: 0px;
                }


            } else {


                &:has(#chat:not([collapsed])) ytd-watch-flexy:not([theater]):not([fullscreen]):not([no-top-margin]):not([reduced-top-margin]) .ytd-watch-flexy{buildL4('is', '#primary', '#secondary')} {
                    padding-top: 0px;
                }
                &:has(#chat:not([collapsed])) ytd-watch-flexy[tyt-tab^="#tab-"]:not([is-two-columns_]) #primary-inner.ytd-watch-flexy {
                    padding-bottom: 0px;
                }

            }

        }

        #chat:not([collapsed]) {
            --ytd-margin-2x: 0;
            --ytd-margin-4x: 0;
            --ytd-margin-6x: 0;
            --ytd-margin-8x: 0;

            height: 100% !important;
            min-height: unset !important;
            max-height: 100vh !important;

            // position:relative;
            // top:auto;
            // bottom:0;

            iframe#chatframe{

                min-height: 0px;

            }



            if chat-zoom-for-mobile-enable {


                iframe-transform = 'scale(%s)' % chat-zoom-for-mobile
                iframe-ratio = 100% / chat-zoom-for-mobile

                iframe#chatframe {
                    position:absolute;

                    transform:  iframe-transform;
                    height: s('calc((100% - %s) / %s) !important', chat-btn-height, chat-zoom-for-mobile); 
                    max-height: unset !important; 
                    min-height: unset !important; 
                    transform-origin: 0 0;
                    width: iframe-ratio !important;
                    margin-top: chat-btn-height;


                }


            }


        }


        
        
        m = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
        
        selector-comments-2 = show-comments-region ? '#primary-inner.ytd-watch-flexy ytd-commentsx#commentsx.ytd-watch-flexy' : '#primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy'

        &{selector(m)} {
            // html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen])):has(#chat:not([collapsed]))

            --ylb-min-below-area:  chat-min-height;

            #contentContainer.tp-yt-app-drawer[swipe-open].tp-yt-app-drawer::after {

                content: unset;

            }
 

            {selector-comments-2},
            #below.ytd-watch-flexy > .ytd-watch-flexy{buildL4('is', '#related', 'ytd-watch-metadata')} {
                /* display:none !important; */
                position: fixed !important;
                transform: scale(0.01) !important;
                transform-origin: 0 0 !important;
                left: -100vw !important;
                top: -100vh !important;
                visibility: collaspe !important;
                pointer-events: none !important;
                user-select: none !important;
                touch-action: none !important;
            }
 

            #secondary.ytd-watch-flexy {
                display:none !important;
            }


            .efyt-control-bar {
                position: relative;
                display: inline-flex;
                top: auto;
                left: auto;
                z-index: 99999;
                opacity: 0.8;
                transform: translate(calc(-100% + 32px), 0) !important;
            }

            .efyt-control-bar:hover {
                opacity: 1.0;
                background: var(--yt-spec-general-background-a);
                transform: translate(0px, 0) !important;
            }

            #player {
                margin-bottom: 0;
            }

            {buildL4('is', '#columns', '#primary')} {
                padding: 0;
            }

            {buildL4('is', '#player', '#player-theater-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} {
                object-fit: contain;
                max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;

            }
 

            #primary-inner.ytd-watch-flexy > :not(.style-scope) {
                display: none !important;
            }

            #below {
                display: flex;
                flex-direction: column;
                flex: 1;
            }
            #below > *:not([id|="chat"]) {
                position: fixed !important;
                transform: scale(0.01) !important;
                transform-origin: 0 0 !important;
                left: -100vw !important;
                top: -100vh !important;
                visibility: collaspe !important;
                pointer-events: none !important;
                user-select: none !important;
                touch-action: none !important;
            }
            
            #below ~ [id|="chat"],
            #primary-inner.ytd-watch-flexy ~ [id|="chat"],
            #primary.ytd-watch-flexy ~ [id|="chat"] {
                flex: 1;
            }
            

            #below:not(:has(#chat)) {
                display: none;
            }

            {buildL4('is', 'ytd-watch-flexy', '#columns.ytd-watch-flexy', '#primary.ytd-watch-flexy', '#primary-inner.ytd-watch-flexy')} {
                display: flex;
                flex-direction: column;
                margin: 0;
                flex: 1;
            }

            ytd-watch-flexy {
                height: 100vh !important;
                max-height: 100vh !important;
            }

            ytd-watch-flexy{buildL4('is', '[theater]', '[fullscreen]')} .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {

                min-height: unset !important;
            }
        }
        
    }
    
    content2cHTML() {
        // html
        
        body.lock-scrollbar {
            overflow-y: auto;
        }
        
    }

    content2cMAIN() {
        // body or html

        if chat-zoom-for-right-col > 1 or chat-zoom-for-right-col < 1 {

            ytd-watch-flexy[is-two-columns_]:not([fullscreen]) iframe#chatframe {

                position:absolute;
                margin-top:chat-btn-height;

                transform: 'scale(%s)' % chat-zoom-for-right-col;
                transform-origin: 0 0;
                width: '%s !important' % (100% / chat-zoom-for-right-col);
                max-width: unset !important;
                height: s('calc( (100% - %s) / %s ) !important', chat-btn-height, chat-zoom-for-right-col);
                z-index: 1; /* for normal youtube */

            }

        }


        if no-masthead-w==0 {

            ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) {

                .style-scope.ytd-watch-flexy{buildL4('is', '#secondary', '#secondary-inner')} {
                    height: calc(100vh - var(--ytd-toolbar-height));
                    max-height: 100%;
                }
            }
        }


        ytd-watch-flexy[is-two-columns_]:not([fullscreen]) #movie_player {

            .ytp-chrome-bottom[style*="width"] {
                width: unset !important;
                left: chrome-bottom-bar-margin !important;
                right: chrome-bottom-bar-margin !important;
            }

        }


        ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) ytd-live-chat-frame#chat:not([collapsed]) {
            min-height: unset;
        }



        ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]) #primary-inner.ytd-watch-flexy > *:not(#player) {
            padding: 0 primary-content-margin 0;
        }


        ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) #player .ytd-watch-flexy{buildL4('is', '#player-container-outer', '#player-container-inner', '#player-container')}{

            // layout outside
            // no effect
            // layout inside
            max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for very wide screen
        }

        ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
            max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for 4:3 video

        }

        ytd-watch-flexy.style-scope[is-two-columns_] #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy {
            width: side-panel-width;
        }
 
    }
    
    contentfHTML(){
        // html
        
        

        body ytd-watch-flexy[flexy] #player-container-outer.ytd-watch-flexy {
            max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
        }

       
        &:not([tabview-loaded]) {

            body ytd-watch-flexy[flexy][is-two-columns_]{buildL4('is', '[is-extra-wide-video_]', '[is-four-three-to-sixteen-nine-video_]')} #primary.ytd-watch-flexy {

                max-width: unset; // override var(--ytd-watch-flexy-max-player-width);

            }
        }
    
        chat-selector = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"

        &{selector(chat-selector)} {
            
            ytd-watch-flexy.style-scope:not([fullscreen]) {
                
                .style-scope{buildL4('is', '#chat', '#chat-container')}{
                    flex: 77;
                }
            }
            
        }
        
    }

    contentfMAIN() {
        // body or html
        

        if (video-padding-left-right + video-padding-top-bottom) > 0 {

            #player-container-outer.ytd-watch-flexy {
                padding-left: video-padding-left-right;
                padding-right: video-padding-left-right;
                padding-top: video-padding-top-bottom;
                padding-bottom: video-padding-top-bottom;
            }

        }


        &:not([tabview-loaded]) {

            ytd-watch-flexy:not([fullscreen]) .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
                max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
            }


            ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) {buildL4('is', '#columns', '#primary', '#primary-inner', '#secondary', '#secondary-inner')} {
                height: calc(100vh - var(--ytd-toolbar-height));
            }

        }

        if video-enlarging > 0 {

            ytd-watch-flexy:not([theater]):not([fullscreen]) #movie_player video[src] {
                transform: 'scale(%s)' % (video-enlarging / 1000 + 1) ;
                transform-origin: 50% 50%;
            }

        }







        ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) {

            --ylb-min-below-area: min-below-area-for-theater;

            {buildL4('is', '#player', '#player-theater-container', '#player-wide-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} { 
                object-fit: contain;
                max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
            }
        }



        if no-bottom-row {

            #bottom-row.ytd-watch-metadata {
                display: none !important;
            }
        }

        h1.ytd-watch-metadata {
            font-size: video-title-size;
            --font-size: video-title-size;
            line-height: 140%;
            margin-bottom: -2px;
        }

        
    
        chat-selector = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
        
        #secondary-inner.ytd-watch-flexy {
            --tabview-slider-right: 0px !important;
        }

        ytd-watch-flexy.style-scope:not([fullscreen]) {

            & {
                --ytd-margin-2y: var(--ytd-margin-2x);
                --ytd-margin-4y: var(--ytd-margin-4x);
                --ytd-margin-6y: var(--ytd-margin-6x);
                --ytd-margin-8y: var(--ytd-margin-8x);
            }

            #columns.style-scope.ytd-watch-flexy {
                --ytd-margin-2x: 0;
                --ytd-margin-4x: 0;
                --ytd-margin-6x: 0;
                --ytd-margin-8x: 0;
            }

            .style-scope.ytd-watch-flexy > :not(.ytd-watch-flexy),
            #below,
            #player {
                --ytd-margin-2x: var(--ytd-margin-2y);
                --ytd-margin-4x: var(--ytd-margin-4y);
                --ytd-margin-6x: var(--ytd-margin-6y);
                --ytd-margin-8x: var(--ytd-margin-8y);
            }
            
            if unlimit-player-max-width {
                html body ytd-watch-flexy.style-scope[class][flexy]:not([attr1][attr2]) #columns.ytd-watch-flexy.style-scope[class] {
                    max-width: initial;
                }
                #columns {
                    --ytd-watch-flexy-max-player-width: initial;
                }
            }

            #secondary-inner.style-scope.ytd-watch-flexy {
                display: flex;
                flex-direction: column;
                height: 100%;
            }

            #secondary-inner.style-scope.ytd-watch-flexy > * {
                flex-shrink: 0;
            }

            #movie_player {
                position: relative;
                > .html5-video-container:has(video) {
                    top: 0;
                    bottom: 0;
                    left: 0;
                    right: 0;
                    position: absolute;
                }

                .html5-video-container > video {
                    width: unset !important;
                    height: 100% !important;
                    left: 0 !important;
                    right: 0 !important;
                    max-height: 100%;
                    max-width: 100%;
                    margin: 0 auto;
                }

                .html5-video-container > video[style*="top:"]:not(video[style*="top: -"]):not(video[style*="top:-"]) {
                    top: 0 !important;
                }

            }

            #chat-container {
                display: flex;
                flex-direction: column;
            }

            #right-tabs {
                display: flex;
                margin: 0 !important;
                flex: 1;
                flex-direction: column;

                {buildL4('is', '#material-tabs', '.tab-content')} {
                    outline: 0;
                }

                .tab-content {
                    flex: 77;
                }
            }

            &:not([is-two-columns_]) #primary-inner > *:not(#player) {
                padding: 0;
            }

            &:not([is-two-columns_]) #primary-inner #below > *:not([id|="chat"]) {
                padding: 0 primary-content-margin 0;
            }

        }

        
        if no-round-border {

            ytd-live-chat-frame[rounded-container],
            ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame,
            ytd-live-chat-frame[rounded-container] iframe.ytd-live-chat-frame,
            ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame button.yt-spec-button-shape-next,
            ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame button.yt-spec-button-shape-next:hover {
                border-radius: unset;
            }
        }


        if disable-cinematics {
            #cinematics.ytd-watch-flexy {
                display: none;
            }
        }
    } // 
    
    
        
    contentgHTML() {
        // html

        content2cHTML() //
        
        selector-g = '' //
        
        if mode-for-single-col=="disabled" { //
            selector-g = youtube-wpr ? '[youtube-wpr*="s"]': ":has(ytd-watch-flexy[is-two-columns_])" //
        } //
            
        &{s(selector-g)} { //
            // html
            contentfHTML() //
        } //
            
        
            
        
    }
    
        
    contentgMAIN() {
        // body or html

        content2cMAIN() //
        
        selector-g = '' //
        
        if mode-for-single-col=="disabled" { //
            selector-g = youtube-wpr ? '[youtube-wpr*="s"]': ":has(ytd-watch-flexy[is-two-columns_])" //
        } //
            
        &{s(selector-g)} { //
            // html
            contentfMAIN() //
        } //
            
            
        
    }
    
    
    
    
    contentBase() //
    
    selectors-2col = { //
         "expanded-panel": join(', ', 
             "html:not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)", 
             "html[tabview-loaded]:has(ytd-watch-flexy[is-two-columns_]:not([fullscreen]))"
         ),
         "expanded-live": "html:has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)",
         "expandable-live": "html:has(ytd-live-chat-frame#chat):has(iframe#chatframe)",
         "always": "html"
     } //
         
    if youtube-wpr {
        
        selectors-2col = { //
         "expanded-panel": join(', ', 
             'html:not([tabview-loaded])[youtube-wpr*="h2"][youtube-wpr*="f"]', 
             'html[tabview-loaded][youtube-wpr*="s"][youtube-wpr*="f"]'
         ),
         "expanded-live": 'html[youtube-wpr*="h2"][youtube-wpr*="f"]',
         "expandable-live": 'html:not([youtube-wpr*="h0"])[youtube-wpr*="f"]',
         "always": 'html[youtube-wpr*="f"]'
     } //
        
    }
    
    selector-2col = selectors-2col[mode-for-two-col]
    selectors-k = split(', ', selector-2col)
    for selector-k in selectors-k {
     
        {s(selector-k)} {
            
            if no-masthead-w==1 {
                contentNoMasthead()
            }
            
            if compatible-ytlstm {
                contentgHTML()
                
                body:not([data-ytlstm-theater-mode]) {
                    contentgMAIN() //
                }
                
            } else {
                    
                contentgHTML()
                contentgMAIN() //
            }
            
        }
        
    }
    
    

    if single-col-mobile {
        
        
        m = youtube-wpr ? '[youtube-wpr*="S"][youtube-wpr*="f"]': ":has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))"
        
        
        html{selector(m)} {

            
            if no-masthead-w==1 {
                contentNoMasthead()
            }
            
            if no-masthead-w==2 {
                
                if youtube-wpr {
                    &[youtube-wpr*="h2"] {
                        contentNoMasthead()
                    }
                } else {
                    
                    &:has(#chat:not([collapsed])) {
                        contentNoMasthead()
                    }
                }
            }
            contentSingleColMobile()
        }
    }

    @css {

        @supports not selector(:has(body)) {


            html::after {
                display: block;
                content: 'Your browser does not support "has-selector". Please update to latest version and enable it via configuration.';
                width: 60vh;
                padding: 12px;
                height: auto;
                position: fixed;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
                transform-origin: 0 0;
                background: #71210f;
                color: #d2dadb;
                font-size: 14pt;
                text-shadow: 1px 1px 2px #605262;
            }

        }
    }

    

    if youtube-wpr {

        @css {
                
            @supports selector(:has(body)) {

            
                @keyframes wpr-message-appear {
                    0% {
                        top: -300vh;
                    }
                    1% {
                        top: 50%; 
                    }
                    100% {
                        top: 50%; 
                    }
                }
                
                
                html:not([youtube-wpr]) ytd-watch-flexy::after {
                    display: block;
                    content: 'YouTube Live Borderless: YouTube WPR is not yet installed. Please install the userscript https://greasyfork.org/scripts/457319 in order to use YouTube WPR';
                    width: 60vh;
                    padding: 12px;
                    height: auto;
                    position: fixed;
                    left: 50%;
                    top: -300vh;
                    transform: translate(-50%, -50%);
                    transform-origin: 0 0;
                    background: #71210f;
                    color: #d2dadb;
                    font-size: 14pt;
                    text-shadow: 1px 1px 2px #605262;
                    animation: wpr-message-appear 1ms 2s forwards;
                    z-index: 9999;
                }
        
                
            }

        }

    }
    
}