☰

YouTube Live Borderless

Make YouTube Live Borderless

安装为用户样式？
作者推荐脚本

您可能也喜欢YouTube Video Resize Fix。

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