☰

YouTube Live Borderless

Make YouTube Live Borderless

当前为 2025-05-19 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           YouTube Live Borderless
  3. @version        0.5.35
  4. @namespace      github.com/cyfung1031
  5. @license        MIT
  6. @description    Make YouTube Live Borderless
  7. @author         CY Fung
  8. @supportURL     https://github.com/cyfung1031/YouTube-Live-Borderless/
  9. @compatible     edge Edge [Blink] >= 105; Stylus (Beta)
  10. @compatible     chrome Chrome >= 105; Stylus (Beta); Chrome 101-104 requires "enable-experimental-web-platform-features"
  11. @compatible     firefox FireFox >= 103; Stylus; layout.css.has-selector.enabled = true; note: some features might not be very stable!!
  12. @compatible     opera Opera >= 91; Stylus (Beta)
  13. @compatible     safari Safari >= 15.4; Stylus
  14. @preprocessor   stylus
  15. @var checkbox   youtube-wpr                     "YouTube WPR"                      0
  16. @var select     mode-for-two-col                "Mode ##TwoColumns" {
  17.   "Expanded Panel Only #Recommended":   "expanded-panel",
  18.   "Expanded Live Chat Only":            "expanded-live",
  19.   "Expandable Live Chat Only":          "expandable-live",
  20.   "Always":                             "always"
  21. }
  22. @var select     mode-for-single-col             "Mode ##SingleColumn" {
  23.   "YT Mobile #Recommended":             "mobile",
  24.   "Normal":                             "normal",
  25.   "Disabled":                           "disabled"
  26. }
  27. @var checkbox   no-masthead                     "Top.MastheadBar ::Hide"                            0
  28. @var range      masthead-hoverable-height       "Top.MastheadBar ::Hoverable"                       [12, 0, 36, 2, 'px']
  29. @var range      masthead-hoverable-delay-in     "Top.MastheadBar ::Hoverable.DelayIn"               [300, 0, 800, 100, 'ms']
  30. @var checkbox   disable-cinematics              "CinematicsEffect ::Disable"                        0
  31. @var range      video-enlarging                 "Video.Enlarging >>>Video.Border.Fine.Tune"         [0, 0, 8, 2]
  32. @var range      video-padding-left-right        "Video.Padding.LeftRight (Experimental)"            [0, 0, 18, 2, 'px']
  33. @var range      video-padding-top-bottom        "Video.Padding.TopBottom (Experimental)"            [0, 0, 18, 2, 'px']
  34. @var range      primary-content-margin          "PrimaryContent ::Margin"                           [24, 6, 48, 6, "px"]
  35. @var range      video-title-size                "VideoTitle ::Size"                                 [2.0, 1.0, 3.0, 0.2, "rem"]
  36. @var checkbox   no-bottom-row                   "Bottom.PrimaryMetaInfoRow ::Hide"                  0
  37. @var range      min-below-area                  "BelowArea ::Minimum"                               [120, 0, 240, 10, 'px']
  38. @var range      min-below-area-for-theater      "WideTheater.BelowArea ::Minimum"                   [120, 0, 240, 10, 'px']
  39. @var number     side-panel-width                "SidePanel ::Width"                                 [440, 320, 640, 20, "px"]
  40. @var checkbox   no-round-border                 "RoundBorder ::Disable"                             1
  41. @var number     chat-zoom-for-right-col         "RightCol.Chat ::Zoom"                              [1.0, 0.4, 1.2, 0.05]
  42. @var range      chat-btn-height                 "RightCol.Chat ::SpaceAbove@Zoom"                   [36, 0, 60, 4, 'px']
  43. @var number     chat-zoom-for-mobile            "YTMobile.Chat ::Zoom"                              [1.0, 0.4, 1.2, 0.05]
  44. @var range      chat-min-height                 "YTMobile.Chat ::Min.Height"                        [400, 20, 900, 10, 'px']
  45. @var checkbox   unlimit-player-max-width        "Unlimit Player Max Width"                          1
  46. @var checkbox   fix-player-height-overflow-a      "Fix Player Height Overflow"                      0
  47. @var checkbox   video-no-round-angle            "Video No Round Angle"                              0
  48. @var checkbox   compatible-ytlstm               "Compatible with ytlstm-theater-mode"               0
  49. @var checkbox   fix-for-ytlc                    "Fix for YouTubeLiveClock"                          0
  50. @var checkbox   show-comments-region            "Show Comments (without Tabview Youtube)"           0
  51. ==/UserStyle== */
  52. /*
  53.  
  54. @var range      chrome-bottom-bar-margin        "Chrome Bottom Bar Margin"                      [12, 6, 48, 6, "px"]
  55.  
  56.   Chrome Bottom Bar Margin is 12px only due to
  57.  
  58.     MU = function(a) {
  59.         var b = a.u.ag()
  60.           , c = a.G.getVideoData().D
  61.           , d = 0;
  62.         a.u.ag() && a.u.Me() && (d = (a.G.fb().getPlayerSize().width - a.G.getVideoContentRect().width) / 2);
  63.         return 12 * (c ? 0 : b ? 2 : 1) + d
  64.     }
  65.  
  66. */
  67. // d
  68. @-moz-document url-prefix("https://www.youtube.com/watch?v="),
  69.                url-prefix("https://www.youtube.com/live/") {
  70.  
  71.     dummy() { 
  72.         // dummy
  73.         border: 0; 
  74.     }
  75.  
  76.     buildL4(type, args...) {
  77.         st1 = join('', ':', type, '(', join('\, ', args), ')')
  78.         selector(st1)
  79.     }
  80.  
  81.     /*
  82.     if min-below-area <= 10px {
  83.         min-below-area = 0px
  84.     }
  85.     if min-below-area-for-theater <= 10px {
  86.         min-below-area-for-theater = 0px
  87.     }
  88.     */
  89.     chat-btn-height = chat-btn-height + 1px
  90.     if chat-btn-height == 0px + 1px {
  91.         chat-btn-height = 0px
  92.     }
  93.  
  94.     // masthead-hoverable-height = (masthead-hoverable-h - 1) * 2px
  95.  
  96.     no-masthead-w = no-masthead //
  97.     chrome-bottom-bar-margin = 12px // this cannot be changed
  98.  
  99.     single-col-mobile = (mode-for-single-col == "mobile" ? 1 : 0) //
  100.     if single-col-mobile == 1 and no-masthead-w == 0 {
  101.         no-masthead-w = 2 //
  102.     }
  103.  
  104.     chat-zoom-for-mobile-enable = ((chat-zoom-for-mobile < 1) or (chat-zoom-for-mobile > 1))
  105.  
  106.     contentBase() {
  107.         
  108.         html {
  109.             --ylb-min-below-area: min-below-area;
  110.         }
  111.         
  112.         #microformat.ytd-watch-flexy {
  113.             position: fixed;
  114.             top:-200vh;
  115.             left:-200vw;
  116.         }
  117.  
  118.         if fix-player-height-overflow-a { // 縦配信
  119.             html:not([tabview-loaded]) {
  120.                 --yt-fix-player-contain: layout;
  121.             }
  122.             .efyt-mini-player {
  123.                 --yt-fix-player-contain: initial;
  124.             }
  125.             #player > #player-container-outer.style-scope.ytd-watch-flexy {
  126.                 contain: var(--yt-fix-player-contain);
  127.             }
  128.         }
  129.  
  130.         if fix-for-ytlc {
  131.  
  132.             @supports (color: var(--compatibile-with-chrome-plugin-youtube-live-clock-20221107)) {
  133.  
  134.                 /* 2022/11/07 - specific fix for YouTubeLiveClock - chrome only */
  135.                 html:has(style#ytlctn-style-for-native-control) #columns.ytd-watch-flexy #player::after {
  136.                     content: "";
  137.                     background-color: transparent;
  138.                     border-color: transparent;
  139.                     color: transparent;
  140.                     box-sizing: border-box;
  141.                     border-style: dotted;
  142.                     display: flex;
  143.                     height: 0px;
  144.                     margin: 0;
  145.                     border: 0;
  146.                     margin-top: 51px;
  147.                     width: calc(100% - 4px);
  148.                     position: relative;
  149.                     pointer-events: none;
  150.                 }
  151.  
  152.                 html:has(style#ytlctn-style-for-native-control) #columns.ytd-watch-flexy #below {
  153.                     transform: initial;
  154.                 }
  155.  
  156.                 html:has(style#ytlctn-style-for-native-control) ytd-watch-flexy[flexy][is-two-columns_][theater] #columns.ytd-watch-flexy {
  157.                     margin-top: 51px;
  158.                 }
  159.                 
  160.                 html:has(style#ytlctn-style-for-native-control) #columns {
  161.                     overflow: revert;
  162.                 }
  163.                 
  164.             }
  165.  
  166.             @supports (color: var(--compatibile-with-chrome-plugin-youtube-live-clock-20240123)) {
  167.  
  168.                 /* 2024/01/23 - specific fix for YouTubeLiveClock - chrome only */
  169.                 html:has(style#ytlc-style-for-native-control) #columns.ytd-watch-flexy #player::after {
  170.                     content: "";
  171.                     background-color: transparent;
  172.                     border-color: transparent;
  173.                     color: transparent;
  174.                     box-sizing: border-box;
  175.                     border-style: dotted;
  176.                     display: flex;
  177.                     height: 0px;
  178.                     margin: 0;
  179.                     border: 0;
  180.                     margin-top: 51px;
  181.                     width: calc(100% - 4px);
  182.                     position: relative;
  183.                     pointer-events: none;
  184.                 }
  185.  
  186.                 html:has(style#ytlc-style-for-native-control) #columns.ytd-watch-flexy #below {
  187.                     transform: initial;
  188.                 }
  189.  
  190.                 html:has(style#ytlc-style-for-native-control) ytd-watch-flexy[flexy][is-two-columns_][theater] #columns.ytd-watch-flexy {
  191.                     margin-top: 51px;
  192.                 }
  193.                 
  194.                 html:has(style#ytlc-style-for-native-control) #columns {
  195.                     overflow: revert;
  196.                 }
  197.                 
  198.             }
  199.  
  200.  
  201.  
  202.         }
  203.  
  204.         ytd-watch-flexy[flexy] #player-container-outer.ytd-watch-flexy,
  205.         ytd-watch-flexy[flexy] #player-container-inner.ytd-watch-flexy {
  206.             pointer-events: none;    
  207.         }
  208.  
  209.         ytd-watch-flexy[flexy] #player-container.ytd-watch-flexy,
  210.         ytd-watch-flexy[flexy] #ytd-player.ytd-watch-flexy {
  211.             pointer-events: initial;    
  212.         }
  213.  
  214.         // general fix
  215.         ytd-watch-flexy[theater] .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
  216.             min-height: unset;
  217.         }
  218.         #movie_player .ytp-cued-thumbnail-overlay-image {
  219.             /* background-size: contain !important; */
  220.             background-size: auto 100% !important;
  221.         }
  222.         ytd-watch-flexy:not([is-two-columns_]) ytd-watch-metadata {
  223.             padding-top: var(--ytd-margin-3x);
  224.         }
  225.         ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]) #primary.ytd-watch-flexy {
  226.             padding-top: 0;
  227.             margin-top: 0;
  228.         }
  229.  
  230.         m = youtube-wpr ? ':not([tabview-loaded])[youtube-wpr*="h2"]' : ':not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)'
  231.  
  232.         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'
  233.  
  234.         html{selector(m)} {buildL4('is', 
  235.             selector-comments-1, 
  236.             '#secondary-inner.ytd-watch-flexy > #related.ytd-watch-flexy')} {
  237.             display: none !important;
  238.         }
  239.  
  240.  
  241.         html:not([tabview-loaded]) #cinematics {
  242.             // contain: layout;
  243.             contain: layout size style;
  244.             user-select: none;
  245.             touch-action: none;
  246.             pointer-events: none;
  247.         }
  248.  
  249.         if video-no-round-angle {
  250.             ytd-watch-flexy[rounded-player-large][default-layout] #ytd-player.ytd-watch-flexy.ytd-watch-flexy,
  251.             ytd-watch-flexy[rounded-player][default-layout] #ytd-player.ytd-watch-flexy.ytd-watch-flexy {
  252.                 border-radius: 0;
  253.             }
  254.         }
  255.  
  256.     }
  257.  
  258.     //
  259.     contentNoMasthead() {
  260.  
  261.         // root = html
  262.         
  263.         & {
  264.             /* 0px not 0 */
  265.             --ytd-masthead-height: 0px;
  266.             --ytd-toolbar-height: 0px;
  267.             --ytd-watch-flexy-masthead-height: 0px;
  268.         }
  269.         
  270.         ytd-app[style] { /* YouTube set the masthead-height in style */
  271.             --ytd-masthead-height: 0px !important;
  272.             --ytd-toolbar-height: 0px !important;
  273.             --ytd-watch-flexy-masthead-height: 0px !important;
  274.         }
  275.         
  276.         & .style-scope{buildL4('is', '#page-manager', 'ytd-watch-flexy', 'ytd-page-manager')} {
  277.             --ytd-masthead-height: 0px;
  278.             --ytd-toolbar-height: 0px;
  279.             --ytd-watch-flexy-masthead-height: 0px;
  280.         }
  281.         
  282.         
  283.  
  284.         #masthead-container {
  285.             height: 0;
  286.             --masthead-opacity: 0;
  287.             opacity: var(--masthead-opacity) !important;
  288.             transition: opacity 300ms;
  289.             min-height: masthead-hoverable-height;
  290.             contain: layout size style;
  291.         }
  292.  
  293.         #masthead-container > ytd-masthead {
  294.             transform: translateY(-100%);
  295.             transition: transform 300ms;
  296.         }
  297.  
  298.  
  299.         if masthead-hoverable-height > 0 {
  300.  
  301.             ytd-app {
  302.                 --ut-masthead-background: rgba(15,15,15,0.8);
  303.             }
  304.             ytd-app[darker-dark-theme] {
  305.                 --ut-masthead-background: rgba(240,240,240,0.8);
  306.             }
  307.             ytd-masthead#masthead:hover {
  308.                 background-color: color(--ut-masthead-background);
  309.                 z-index: 9999 !important;
  310.             }
  311.  
  312.             ytd-masthead#masthead {
  313.                 background-color: rgba(15,15,15,0.8);
  314.                 z-index: 9999 !important;
  315.             }
  316.  
  317.             #masthead-container:hover {
  318.                 --masthead-opacity: 1;
  319.             }
  320.  
  321.             #masthead-container:hover > ytd-masthead {
  322.                 transform: translateY(0%);
  323.                 transition-delay: masthead-hoverable-delay-in;
  324.             }
  325.  
  326.             #masthead-container::after {
  327.                 content: '';
  328.                 display: flex;
  329.                 width: 100%;
  330.                 height: masthead-hoverable-height;
  331.                 top: 0;
  332.                 z-index: 77;
  333.                 cursor: default;
  334.                 user-select: none !important;
  335.                 touch-action: none !important;
  336.                 box-sizing: border-box;
  337.                 padding: 0;
  338.                 margin: 0;
  339.             }
  340.         }
  341.         
  342.  
  343.         ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]):not([theater]) {
  344.  
  345.             #columns.style-scope.ytd-watch-flexy,
  346.             #primary.style-scope.ytd-watch-flexy,
  347.             #primary-inner.style-scope.ytd-watch-flexy,
  348.             #secondary.style-scope.ytd-watch-flexy,
  349.             #secondary-inner.style-scope.ytd-watch-flexy {
  350.                 height: 100vh;
  351.                 max-height: 100%;
  352.             }
  353.         }
  354.  
  355.         ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
  356.  
  357.             height: 100vh;
  358.             
  359.             .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
  360.                 flex: 77;
  361.                 max-height: unset;
  362.             }
  363.  
  364.  
  365.         }
  366.  
  367.  
  368.  
  369.         &:not([tabview-loaded]) ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
  370.  
  371.             .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} ~ #columns.style-scope.ytd-watch-flexy {
  372.                 overflow: visible;
  373.             }
  374.             
  375.         }
  376.  
  377.         
  378.  
  379.     } // 
  380.         
  381.     contentSingleColMobile() {
  382.         
  383.  
  384.         // html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))
  385.  
  386.         if no-masthead-w>=1 {
  387.  
  388.  
  389.             if youtube-wpr {
  390.  
  391.  
  392.                 &[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')} {
  393.                     padding-top: 0px;
  394.                 }
  395.                 &[youtube-wpr*="h2"] ytd-watch-flexy[tyt-tab^="#tab-"]:not([is-two-columns_]) #primary-inner.ytd-watch-flexy {
  396.                     padding-bottom: 0px;
  397.                 }
  398.  
  399.  
  400.             } else {
  401.  
  402.  
  403.                 &: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')} {
  404.                     padding-top: 0px;
  405.                 }
  406.                 &:has(#chat:not([collapsed])) ytd-watch-flexy[tyt-tab^="#tab-"]:not([is-two-columns_]) #primary-inner.ytd-watch-flexy {
  407.                     padding-bottom: 0px;
  408.                 }
  409.  
  410.             }
  411.  
  412.         }
  413.  
  414.         #chat:not([collapsed]) {
  415.             --ytd-margin-2x: 0;
  416.             --ytd-margin-3x: 0;
  417.             --ytd-margin-4x: 0;
  418.             --ytd-margin-6x: 0;
  419.             --ytd-margin-8x: 0;
  420.  
  421.             height: 100% !important;
  422.             min-height: unset !important;
  423.             max-height: 100vh !important;
  424.  
  425.             // position:relative;
  426.             // top:auto;
  427.             // bottom:0;
  428.  
  429.             iframe#chatframe{
  430.  
  431.                 min-height: 0px;
  432.  
  433.             }
  434.  
  435.  
  436.  
  437.             if chat-zoom-for-mobile-enable {
  438.  
  439.  
  440.                 iframe-transform = 'scale(%s)' % chat-zoom-for-mobile
  441.                 iframe-ratio = 100% / chat-zoom-for-mobile
  442.  
  443.                 iframe#chatframe {
  444.                     position:absolute;
  445.  
  446.                     transform:  iframe-transform;
  447.                     height: s('calc((100% - %s) / %s) !important', chat-btn-height, chat-zoom-for-mobile); 
  448.                     max-height: unset !important; 
  449.                     min-height: unset !important; 
  450.                     transform-origin: 0 0;
  451.                     width: iframe-ratio !important;
  452.                     margin-top: chat-btn-height;
  453.  
  454.  
  455.                 }
  456.  
  457.  
  458.             }
  459.  
  460.  
  461.         }
  462.  
  463.  
  464.         
  465.         
  466.         m = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
  467.         
  468.         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'
  469.  
  470.         &{selector(m)} {
  471.             // html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen])):has(#chat:not([collapsed]))
  472.  
  473.             --ylb-min-below-area:  chat-min-height;
  474.  
  475.             #contentContainer.tp-yt-app-drawer[swipe-open].tp-yt-app-drawer::after {
  476.  
  477.                 content: unset;
  478.  
  479.             }
  480.  
  481.  
  482.             {selector-comments-2},
  483.             #below.ytd-watch-flexy > .ytd-watch-flexy{buildL4('is', '#related', 'ytd-watch-metadata')} {
  484.                 /* display:none !important; */
  485.                 position: fixed !important;
  486.                 transform: scale(0.01) !important;
  487.                 transform-origin: 0 0 !important;
  488.                 left: -100vw !important;
  489.                 top: -100vh !important;
  490.                 visibility: collaspe !important;
  491.                 pointer-events: none !important;
  492.                 user-select: none !important;
  493.                 touch-action: none !important;
  494.             }
  495.  
  496.  
  497.             #secondary.ytd-watch-flexy {
  498.                 display:none !important;
  499.             }
  500.  
  501.  
  502.             .efyt-control-bar {
  503.                 position: relative;
  504.                 display: inline-flex;
  505.                 top: auto;
  506.                 left: auto;
  507.                 z-index: 99999;
  508.                 opacity: 0.8;
  509.                 transform: translate(calc(-100% + 32px), 0) !important;
  510.             }
  511.  
  512.             .efyt-control-bar:hover {
  513.                 opacity: 1.0;
  514.                 background: var(--yt-spec-general-background-a);
  515.                 transform: translate(0px, 0) !important;
  516.             }
  517.  
  518.             #player {
  519.                 margin-bottom: 0;
  520.             }
  521.  
  522.             {buildL4('is', '#columns', '#primary')} {
  523.                 padding: 0;
  524.             }
  525.  
  526.             {buildL4('is', '#player', '#player-theater-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} {
  527.                 object-fit: contain;
  528.                 max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  529.  
  530.             }
  531.  
  532.  
  533.             #primary-inner.ytd-watch-flexy > :not(.style-scope) {
  534.                 display: none !important;
  535.             }
  536.  
  537.             #below {
  538.                 display: flex;
  539.                 flex-direction: column;
  540.                 flex: 1;
  541.             }
  542.             #below > *:not([id|="chat"]) {
  543.                 position: fixed !important;
  544.                 transform: scale(0.01) !important;
  545.                 transform-origin: 0 0 !important;
  546.                 left: -100vw !important;
  547.                 top: -100vh !important;
  548.                 visibility: collaspe !important;
  549.                 pointer-events: none !important;
  550.                 user-select: none !important;
  551.                 touch-action: none !important;
  552.             }
  553.             
  554.             #below ~ [id|="chat"],
  555.             #primary-inner.ytd-watch-flexy ~ [id|="chat"],
  556.             #primary.ytd-watch-flexy ~ [id|="chat"] {
  557.                 flex: 1;
  558.             }
  559.             
  560.  
  561.             #below:not(:has(#chat)) {
  562.                 display: none;
  563.             }
  564.  
  565.             {buildL4('is', 'ytd-watch-flexy', '#columns.ytd-watch-flexy', '#primary.ytd-watch-flexy', '#primary-inner.ytd-watch-flexy')} {
  566.                 display: flex;
  567.                 flex-direction: column;
  568.                 margin: 0;
  569.                 flex: 1;
  570.             }
  571.  
  572.             ytd-watch-flexy {
  573.                 height: 100vh !important;
  574.                 max-height: 100vh !important;
  575.             }
  576.  
  577.             ytd-watch-flexy{buildL4('is', '[theater]', '[fullscreen]')} .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
  578.  
  579.                 min-height: unset !important;
  580.             }
  581.         }
  582.         
  583.     }
  584.     
  585.     content2cHTML() {
  586.         // html
  587.         
  588.         body.lock-scrollbar {
  589.             overflow-y: auto;
  590.         }
  591.         
  592.     }
  593.  
  594.     content2cMAIN() {
  595.         // body or html
  596.  
  597.         if chat-zoom-for-right-col > 1 or chat-zoom-for-right-col < 1 {
  598.  
  599.             ytd-watch-flexy[is-two-columns_]:not([fullscreen]) iframe#chatframe {
  600.  
  601.                 position:absolute;
  602.                 margin-top:chat-btn-height;
  603.  
  604.                 transform: 'scale(%s)' % chat-zoom-for-right-col;
  605.                 transform-origin: 0 0;
  606.                 width: '%s !important' % (100% / chat-zoom-for-right-col);
  607.                 max-width: unset !important;
  608.                 height: s('calc( (100% - %s) / %s ) !important', chat-btn-height, chat-zoom-for-right-col);
  609.                 z-index: 1; /* for normal youtube */
  610.  
  611.             }
  612.  
  613.         }
  614.  
  615.  
  616.         if no-masthead-w==0 {
  617.  
  618.             ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) {
  619.  
  620.                 .style-scope.ytd-watch-flexy{buildL4('is', '#secondary', '#secondary-inner')} {
  621.                     height: calc(100vh - var(--ytd-toolbar-height));
  622.                     max-height: 100%;
  623.                 }
  624.             }
  625.         }
  626.  
  627.  
  628.         ytd-watch-flexy[is-two-columns_]:not([fullscreen]) #movie_player {
  629.  
  630.             .ytp-chrome-bottom[style*="width"] {
  631.                 width: unset !important;
  632.                 left: chrome-bottom-bar-margin !important;
  633.                 right: chrome-bottom-bar-margin !important;
  634.             }
  635.  
  636.         }
  637.  
  638.  
  639.         ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) ytd-live-chat-frame#chat:not([collapsed]) {
  640.             min-height: unset;
  641.         }
  642.  
  643.  
  644.  
  645.         ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]) #primary-inner.ytd-watch-flexy > *:not(#player) {
  646.             padding: 0 primary-content-margin 0;
  647.         }
  648.  
  649.  
  650.         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')}{
  651.  
  652.             // layout outside
  653.             // no effect
  654.             // layout inside
  655.             max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for very wide screen
  656.         }
  657.  
  658.         ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
  659.             max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for 4:3 video
  660.  
  661.         }
  662.  
  663.         ytd-watch-flexy.style-scope[is-two-columns_] #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy {
  664.             width: side-panel-width;
  665.         }
  666.  
  667.     }
  668.     
  669.     contentfHTML(){
  670.         // html
  671.         
  672.         
  673.  
  674.         body ytd-watch-flexy[flexy] #player-container-outer.ytd-watch-flexy {
  675.             max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
  676.         }
  677.  
  678.        
  679.         &:not([tabview-loaded]) {
  680.  
  681.             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 {
  682.  
  683.                 max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
  684.  
  685.             }
  686.         }
  687.     
  688.         chat-selector = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
  689.  
  690.         &{selector(chat-selector)} {
  691.             
  692.             ytd-watch-flexy.style-scope:not([fullscreen]) {
  693.                 
  694.                 .style-scope{buildL4('is', '#chat', '#chat-container')}{
  695.                     flex: 77;
  696.                 }
  697.             }
  698.             
  699.         }
  700.         
  701.     }
  702.  
  703.     contentfMAIN() {
  704.         // body or html
  705.         
  706.  
  707.         if (video-padding-left-right + video-padding-top-bottom) > 0 {
  708.  
  709.             #player-container-outer.ytd-watch-flexy {
  710.                 padding-left: video-padding-left-right;
  711.                 padding-right: video-padding-left-right;
  712.                 padding-top: video-padding-top-bottom;
  713.                 padding-bottom: video-padding-top-bottom;
  714.             }
  715.  
  716.         }
  717.  
  718.  
  719.         &:not([tabview-loaded]) {
  720.  
  721.             ytd-watch-flexy:not([fullscreen]) .ytd-watch-flexy{buildL4('is', '#player-theater-container', '#player-wide-container')} {
  722.                 max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  723.             }
  724.  
  725.  
  726.             ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) {buildL4('is', '#columns', '#primary', '#primary-inner', '#secondary', '#secondary-inner')} {
  727.                 height: calc(100vh - var(--ytd-toolbar-height));
  728.             }
  729.  
  730.         }
  731.  
  732.         if video-enlarging > 0 {
  733.  
  734.             ytd-watch-flexy:not([theater]):not([fullscreen]) #movie_player video[src] {
  735.                 transform: 'scale(%s)' % (video-enlarging / 1000 + 1) ;
  736.                 transform-origin: 50% 50%;
  737.             }
  738.  
  739.         }
  740.  
  741.  
  742.  
  743.  
  744.  
  745.  
  746.  
  747.         ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) {
  748.  
  749.             --ylb-min-below-area: min-below-area-for-theater;
  750.  
  751.             {buildL4('is', '#player', '#player-theater-container', '#player-wide-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} { 
  752.                 object-fit: contain;
  753.                 max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  754.             }
  755.         }
  756.  
  757.  
  758.  
  759.         if no-bottom-row {
  760.  
  761.             #bottom-row.ytd-watch-metadata {
  762.                 display: none !important;
  763.             }
  764.         }
  765.  
  766.         h1.ytd-watch-metadata {
  767.             font-size: video-title-size;
  768.             --font-size: video-title-size;
  769.             line-height: 140%;
  770.             margin-bottom: -2px;
  771.         }
  772.  
  773.         
  774.     
  775.         chat-selector = youtube-wpr ? '[youtube-wpr*="h2"]': ":has(#chat:not([collapsed]))"
  776.         
  777.         #secondary-inner.ytd-watch-flexy {
  778.             --tabview-slider-right: 0px !important;
  779.         }
  780.  
  781.         ytd-watch-flexy.style-scope:not([fullscreen]) {
  782.  
  783.             & {
  784.                 --ytd-margin-2y: var(--ytd-margin-2x);
  785.                 --ytd-margin-3y: var(--ytd-margin-3x);
  786.                 --ytd-margin-4y: var(--ytd-margin-4x);
  787.                 --ytd-margin-6y: var(--ytd-margin-6x);
  788.                 --ytd-margin-8y: var(--ytd-margin-8x);
  789.             }
  790.  
  791.             #columns.style-scope.ytd-watch-flexy {
  792.                 --ytd-margin-2x: 0;
  793.                 --ytd-margin-3x: 0;
  794.                 --ytd-margin-4x: 0;
  795.                 --ytd-margin-6x: 0;
  796.                 --ytd-margin-8x: 0;
  797.             }
  798.  
  799.             .style-scope.ytd-watch-flexy > :not(.ytd-watch-flexy):not(secondary-wrapper),
  800.             .style-scope.ytd-watch-flexy > secondary-wrapper > :not(.ytd-watch-flexy),
  801.             #below,
  802.             #player {
  803.                 --ytd-margin-2x: var(--ytd-margin-2y);
  804.                 --ytd-margin-3x: var(--ytd-margin-3y);
  805.                 --ytd-margin-4x: var(--ytd-margin-4y);
  806.                 --ytd-margin-6x: var(--ytd-margin-6y);
  807.                 --ytd-margin-8x: var(--ytd-margin-8y);
  808.             }
  809.             
  810.             if unlimit-player-max-width {
  811.                 html body ytd-watch-flexy.style-scope[class][flexy]:not([attr1][attr2]) #columns.ytd-watch-flexy.style-scope[class] {
  812.                     max-width: initial;
  813.                 }
  814.                 #columns {
  815.                     --ytd-watch-flexy-max-player-width: initial;
  816.                 }
  817.             }
  818.  
  819.             #secondary-inner.style-scope.ytd-watch-flexy {
  820.                 display: flex;
  821.                 flex-direction: column;
  822.                 height: 100%;
  823.             }
  824.  
  825.             #secondary-inner.style-scope.ytd-watch-flexy > * {
  826.                 flex-shrink: 0;
  827.             }
  828.  
  829.             #movie_player {
  830.                 position: relative;
  831.                 > .html5-video-container:has(video) {
  832.                     top: 0;
  833.                     bottom: 0;
  834.                     left: 0;
  835.                     right: 0;
  836.                     position: absolute;
  837.                 }
  838.  
  839.                 .html5-video-container > video {
  840.                     width: unset !important;
  841.                     height: 100% !important;
  842.                     left: 0 !important;
  843.                     right: 0 !important;
  844.                     max-height: 100%;
  845.                     max-width: 100%;
  846.                     margin: 0 auto;
  847.                 }
  848.  
  849.                 .html5-video-container > video[style*="top:"]:not(video[style*="top: -"]):not(video[style*="top:-"]) {
  850.                     top: 0 !important;
  851.                 }
  852.  
  853.             }
  854.  
  855.             #chat-container {
  856.                 display: flex;
  857.                 flex-direction: column;
  858.             }
  859.  
  860.             #right-tabs {
  861.                 display: flex;
  862.                 margin: 0 !important;
  863.                 flex: 1;
  864.                 flex-direction: column;
  865.  
  866.                 {buildL4('is', '#material-tabs', '.tab-content')} {
  867.                     outline: 0;
  868.                 }
  869.  
  870.                 .tab-content {
  871.                     flex: 77;
  872.                 }
  873.             }
  874.  
  875.             &:not([is-two-columns_]) #primary-inner > *:not(#player) {
  876.                 padding: 0;
  877.             }
  878.  
  879.             &:not([is-two-columns_]) #primary-inner #below > *:not([id|="chat"]) {
  880.                 padding: 0 primary-content-margin 0;
  881.             }
  882.  
  883.         }
  884.  
  885.         
  886.         if no-round-border {
  887.  
  888.             ytd-live-chat-frame[rounded-container],
  889.             ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame,
  890.             ytd-live-chat-frame[rounded-container] iframe.ytd-live-chat-frame,
  891.             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,
  892.             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 {
  893.                 border-radius: unset;
  894.             }
  895.         }
  896.  
  897.  
  898.         if disable-cinematics {
  899.             #cinematics.ytd-watch-flexy {
  900.                 display: none;
  901.             }
  902.         }
  903.     } // 
  904.     
  905.     
  906.         
  907.     contentgHTML() {
  908.         // html
  909.  
  910.         content2cHTML() //
  911.         
  912.         selector-g = '' //
  913.         
  914.         if mode-for-single-col=="disabled" { //
  915.             selector-g = youtube-wpr ? '[youtube-wpr*="s"]': ":has(ytd-watch-flexy[is-two-columns_])" //
  916.         } //
  917.             
  918.         &{s(selector-g)} { //
  919.             // html
  920.             contentfHTML() //
  921.         } //
  922.             
  923.         
  924.             
  925.         
  926.     }
  927.     
  928.         
  929.     contentgMAIN() {
  930.         // body or html
  931.  
  932.         content2cMAIN() //
  933.         
  934.         selector-g = '' //
  935.         
  936.         if mode-for-single-col=="disabled" { //
  937.             selector-g = youtube-wpr ? '[youtube-wpr*="s"]': ":has(ytd-watch-flexy[is-two-columns_])" //
  938.         } //
  939.             
  940.         &{s(selector-g)} { //
  941.             // html
  942.             contentfMAIN() //
  943.         } //
  944.             
  945.             
  946.         
  947.     }
  948.     
  949.     
  950.     
  951.     
  952.     contentBase() //
  953.     
  954.     selectors-2col = { //
  955.          "expanded-panel": join(', ', 
  956.              "html:not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)", 
  957.              "html[tabview-loaded]:has(ytd-watch-flexy[is-two-columns_]:not([fullscreen]))"
  958.          ),
  959.          "expanded-live": "html:has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)",
  960.          "expandable-live": "html:has(ytd-live-chat-frame#chat):has(iframe#chatframe)",
  961.          "always": "html"
  962.      } //
  963.          
  964.     if youtube-wpr {
  965.         
  966.         selectors-2col = { //
  967.          "expanded-panel": join(', ', 
  968.              'html:not([tabview-loaded])[youtube-wpr*="h2"][youtube-wpr*="f"]', 
  969.              'html[tabview-loaded][youtube-wpr*="s"][youtube-wpr*="f"]'
  970.          ),
  971.          "expanded-live": 'html[youtube-wpr*="h2"][youtube-wpr*="f"]',
  972.          "expandable-live": 'html:not([youtube-wpr*="h0"])[youtube-wpr*="f"]',
  973.          "always": 'html[youtube-wpr*="f"]'
  974.      } //
  975.         
  976.     }
  977.     
  978.     selector-2col = selectors-2col[mode-for-two-col]
  979.     selectors-k = split(', ', selector-2col)
  980.     for selector-k in selectors-k {
  981.      
  982.         {s(selector-k)} {
  983.             
  984.             if no-masthead-w==1 {
  985.                 contentNoMasthead()
  986.             }
  987.             
  988.             if compatible-ytlstm {
  989.                 contentgHTML()
  990.                 
  991.                 body:not([data-ytlstm-theater-mode]) {
  992.                     contentgMAIN() //
  993.                 }
  994.                 
  995.             } else {
  996.                     
  997.                 contentgHTML()
  998.                 contentgMAIN() //
  999.             }
  1000.             
  1001.         }
  1002.         
  1003.     }
  1004.     
  1005.     
  1006.  
  1007.     if single-col-mobile {
  1008.         
  1009.         
  1010.         m = youtube-wpr ? '[youtube-wpr*="S"][youtube-wpr*="f"]': ":has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))"
  1011.         
  1012.         
  1013.         html{selector(m)} {
  1014.  
  1015.             
  1016.             if no-masthead-w==1 {
  1017.                 contentNoMasthead()
  1018.             }
  1019.             
  1020.             if no-masthead-w==2 {
  1021.                 
  1022.                 if youtube-wpr {
  1023.                     &[youtube-wpr*="h2"] {
  1024.                         contentNoMasthead()
  1025.                     }
  1026.                 } else {
  1027.                     
  1028.                     &:has(#chat:not([collapsed])) {
  1029.                         contentNoMasthead()
  1030.                     }
  1031.                 }
  1032.             }
  1033.             contentSingleColMobile()
  1034.         }
  1035.     }
  1036.  
  1037.     @css {
  1038.  
  1039.         @supports not selector(:has(body)) {
  1040.  
  1041.  
  1042.             html::after {
  1043.                 display: block;
  1044.                 content: 'Your browser does not support "has-selector". Please update to latest version and enable it via configuration.';
  1045.                 width: 60vh;
  1046.                 padding: 12px;
  1047.                 height: auto;
  1048.                 position: fixed;
  1049.                 left: 50%;
  1050.                 top: 50%;
  1051.                 transform: translate(-50%, -50%);
  1052.                 transform-origin: 0 0;
  1053.                 background: #71210f;
  1054.                 color: #d2dadb;
  1055.                 font-size: 14pt;
  1056.                 text-shadow: 1px 1px 2px #605262;
  1057.             }
  1058.  
  1059.         }
  1060.     }
  1061.  
  1062.     
  1063.  
  1064.     if youtube-wpr {
  1065.  
  1066.         @css {
  1067.                 
  1068.             @supports selector(:has(body)) {
  1069.  
  1070.             
  1071.                 @keyframes wpr-message-appear {
  1072.                     0% {
  1073.                         top: -300vh;
  1074.                     }
  1075.                     1% {
  1076.                         top: 50%; 
  1077.                     }
  1078.                     100% {
  1079.                         top: 50%; 
  1080.                     }
  1081.                 }
  1082.                 
  1083.                 
  1084.                 html:not([youtube-wpr]) ytd-watch-flexy::after {
  1085.                     display: block;
  1086.                     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';
  1087.                     width: 60vh;
  1088.                     padding: 12px;
  1089.                     height: auto;
  1090.                     position: fixed;
  1091.                     left: 50%;
  1092.                     top: -300vh;
  1093.                     transform: translate(-50%, -50%);
  1094.                     transform-origin: 0 0;
  1095.                     background: #71210f;
  1096.                     color: #d2dadb;
  1097.                     font-size: 14pt;
  1098.                     text-shadow: 1px 1px 2px #605262;
  1099.                     animation: wpr-message-appear 1ms 2s forwards;
  1100.                     z-index: 9999;
  1101.                 }
  1102.         
  1103.                 
  1104.             }
  1105.  
  1106.         }
  1107.  
  1108.     }
  1109.     
  1110. }