☰

YouTube Live Borderless

Make YouTube Live Borderless

目前为 2023-05-25 提交的版本。查看 最新版本。

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