☰

YouTube Live Borderless

Make YouTube Live Borderless

当前为 2024-01-22 提交的版本，查看 最新版本。

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