☰

YouTube Live Borderless

Make YouTube Live Borderless

目前为 2023-07-22 提交的版本。查看 最新版本。

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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