☰

YouTube Live Borderless

Make YouTube Live Borderless

当前为 2023-10-08 提交的版本，查看 最新版本。

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