☰

YouTube Live Borderless

Make YouTube Live Borderless

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址