☰

Greasy Fork镜像 支持简体中文。

YouTube Live Borderless

Make YouTube Live Borderless

目前為 2023-01-11 提交的版本，檢視 最新版本。

  1. /* ==UserStyle==
  2. @name           YouTube Live Borderless
  3. @version        0.4.4
  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 select     mode-for-two-col                "Mode ##TwoColumns" {
  16.   "Expanded Panel Only #Recommended":  "expanded-panel",
  17.   "Expanded Live Chat Only":            "expanded-live",
  18.   "Expandable Live Chat Only":          "expandable-live",
  19.   "Always":                             "always"
  20. }
  21. @var select     mode-for-single-col             "Mode ##SingleColumn" {
  22.   "YT Mobile #Recommended":       "mobile",
  23.   "Normal":                             "normal",
  24.   "Disabled":                           "disabled"
  25. }
  26. @var checkbox   no-masthead                     "Top.MastheadBar ::Hide"                            0
  27. @var number     masthead-hoverable-h            "Top.MastheadBar ::Hoverable >>>1_alwaysHide"       [4, 1, 8, 1]
  28. @var checkbox   disable-cinematics              "CinematicsEffect ::Disable"                        0
  29. @var range      video-enlarging                 "Video.Enlarging >>>Video.Border.Fine.Tune"       [0, 0, 8, 2]
  30. @var range      primary-content-margin          "PrimaryContent ::Margin"                           [24, 6, 48, 6, "px"]
  31. @var range      video-title-size                "VideoTitle ::Size"                                 [2.0, 1.0, 3.0, 0.2, "rem"]
  32. @var checkbox   no-bottom-row                   "Bottom.PrimaryMetaInfoRow ::Hide"                  0
  33. @var range      min-below-area                  "BelowArea ::Minimum >>>10px_disable"               [120, 10, 240, 10, 'px']
  34. @var range      min-below-area-for-theater      "WideTheater.BelowArea ::Minimum >>>10px_disable"   [120, 10, 240, 10, 'px']
  35. @var number     side-panel-width                "SidePanel ::Width"                                 [440, 320, 640, 20, "px"]
  36. @var checkbox   no-round-border                 "RoundBorder ::Disable"                             1
  37. @var number     chat-zoom-for-right-col         "RightCol.Chat ::Zoom"                              [1.0, 0.4, 1.2, 0.05]
  38. @var range      chat-btn-height                 "RightCol.Chat ::SpaceAbove@Zoom >>>4px_disable"    [36, 4, 60, 4, 'px']
  39. @var number     chat-zoom-for-mobile            "YTMobile.Chat ::Zoom"                              [1.0, 0.4, 1.2, 0.05]
  40. @var range      chat-min-height                 "YTMobile.Chat ::Min.Height"                        [400, 20, 900, 10, 'px']
  41. ==/UserStyle== */
  42. /*
  43.  
  44. @var range      chrome-bottom-bar-margin        "Chrome Bottom Bar Margin"                      [12, 6, 48, 6, "px"]
  45.  
  46.   Chrome Bottom Bar Margin is 12px only due to
  47.  
  48.     MU = function(a) {
  49.         var b = a.u.ag()
  50.           , c = a.G.getVideoData().D
  51.           , d = 0;
  52.         a.u.ag() && a.u.Me() && (d = (a.G.fb().getPlayerSize().width - a.G.getVideoContentRect().width) / 2);
  53.         return 12 * (c ? 0 : b ? 2 : 1) + d
  54.     }
  55.  
  56. */
  57.  
  58. @-moz-document url-prefix("https://www.youtube.com/watch?v=") {
  59.  
  60.     dummy() { 
  61.         // dummy
  62.         border: 0; 
  63.     }
  64.     
  65.     buildL4(type, args...) {
  66.         st1 = join('', ':', type, '(', join('\, ', args), ')')
  67.         selector(st1)
  68.     }
  69.  
  70.     if min-below-area <= 10px {
  71.         min-below-area = 0px
  72.     }
  73.     if min-below-area-for-theater <= 10px {
  74.         min-below-area-for-theater = 0px
  75.     }
  76.     chat-btn-height = chat-btn-height + 1px
  77.     if chat-btn-height == 4px + 1px {
  78.         chat-btn-height = 0px
  79.     }
  80.     
  81.     masthead-hoverable-height = (masthead-hoverable-h - 1) * 2px
  82.  
  83.     no-masthead-w = no-masthead //
  84.     chrome-bottom-bar-margin = 12px // this cannot be changed
  85.  
  86.     single-col-mobile = 0 //
  87.     if mode-for-single-col == "mobile" {
  88.         single-col-mobile = 1 // 
  89.         if no-masthead == 0 {
  90.             no-masthead-w = 2 //
  91.         }
  92.     }
  93.     
  94.     chat-zoom-for-mobile-enable = ((chat-zoom-for-mobile < 1) or (chat-zoom-for-mobile > 1))
  95.  
  96.     
  97.     content361(){
  98.         
  99.         html {
  100.             --ylb-min-below-area: min-below-area;
  101.         }
  102.         
  103.         // general fix
  104.         ytd-watch-flexy[theater] #player-theater-container.ytd-watch-flexy{
  105.             min-height: unset;
  106.         }
  107.         #movie_player .ytp-cued-thumbnail-overlay-image {
  108.             /* background-size: contain !important; */
  109.             background-size: auto 100% !important;
  110.         }
  111.         ytd-watch-flexy:not([is-two-columns_]) ytd-watch-metadata {
  112.             padding-top: var(--ytd-margin-3x);
  113.         }
  114.         ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]) #primary.ytd-watch-flexy {
  115.             padding-top: 0;
  116.             margin-top: 0;
  117.         }
  118.  
  119.     }
  120.  
  121.     //
  122.     contentNoMasthead() {
  123.  
  124.         // root = html
  125.         
  126.         &,
  127.         & {buildL4('is', 'ytd-app', 'ytd-page-manager[class].style-scope', 'ytd-watch-flexy[class].style-scope')} {
  128.             /* 0px not 0 */
  129.             --ytd-masthead-height: 0px;
  130.             --ytd-toolbar-height: 0px;
  131.             --ytd-watch-flexy-masthead-height: 0px;
  132.         }
  133.         
  134.         
  135.  
  136.         #masthead-container {
  137.             height: 0;
  138.             --masthead-opacity: 0;
  139.             opacity: var(--masthead-opacity) !important;
  140.             transition: opacity 300ms;
  141.             min-height: masthead-hoverable-height;
  142.             contain: layout size style;
  143.         }
  144.  
  145.         #masthead-container > ytd-masthead {
  146.             transform: translateY(-100%);
  147.             transition: transform 300ms;
  148.         }
  149.  
  150.         if masthead-hoverable-height > 0 {
  151.  
  152.  
  153.             #masthead-container:hover {
  154.                 --masthead-opacity: 1;
  155.             }
  156.  
  157.             #masthead-container:hover > ytd-masthead {
  158.                 transform: translateY(0%);
  159.             }
  160.  
  161.             #masthead-container::after {
  162.                 content: '';
  163.                 display: flex;
  164.                 width: 100%;
  165.                 height: masthead-hoverable-height;
  166.                 top: 0;
  167.                 z-index: 77;
  168.                 cursor: default;
  169.                 user-select: none !important;
  170.                 touch-action: none !important;
  171.                 box-sizing: border-box;
  172.                 padding: 0;
  173.                 margin: 0;
  174.             }
  175.         }
  176.  
  177.         ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]):not([theater]) {
  178.  
  179.             #columns.style-scope.ytd-watch-flexy,
  180.             #primary.style-scope.ytd-watch-flexy,
  181.             #primary-inner.style-scope.ytd-watch-flexy,
  182.             #secondary.style-scope.ytd-watch-flexy,
  183.             #secondary-inner.style-scope.ytd-watch-flexy {
  184.                 height: 100vh;
  185.                 max-height: 100%;
  186.             }
  187.         }
  188.  
  189.         ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
  190.  
  191.             height: 100vh;
  192.             #player-theater-container.ytd-watch-flexy {
  193.                 flex: 77;
  194.                 max-height: unset;
  195.             }
  196.  
  197.              
  198.         }
  199.         
  200.         
  201.         
  202.         &:not([tabview-loaded]) ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
  203.  
  204.             
  205.             #player-theater-container.ytd-watch-flexy ~ #columns.style-scope.ytd-watch-flexy {
  206.                 overflow: visible;
  207.             }
  208.         }
  209.  
  210.  
  211.     } // 
  212.         
  213.     #microformat.ytd-watch-flexy{
  214.         position: fixed;
  215.         top:-200vh;
  216.         left:-200vw;
  217.     }
  218.         
  219.     contentSingleColMobile(){
  220.         // html:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]))
  221.         
  222.         #chat:not([collapsed]) {
  223.             --ytd-margin-2x: 0;
  224.             --ytd-margin-4x: 0;
  225.             --ytd-margin-6x: 0;
  226.             --ytd-margin-8x: 0;
  227.             
  228.             height: 100% !important;
  229.             min-height: unset !important;
  230.             max-height: 100vh !important;
  231.             
  232.             // position:relative;
  233.             // top:auto;
  234.             // bottom:0;
  235.             
  236.             iframe#chatframe{
  237.              
  238.                 
  239.                 min-height: 0px;
  240.                 
  241.             }
  242.  
  243.  
  244.  
  245.             if chat-zoom-for-mobile-enable {
  246.  
  247.  
  248.                 iframe-transform = 'scale(%s)' % chat-zoom-for-mobile
  249.                 iframe-ratio = 100% / chat-zoom-for-mobile
  250.  
  251.                 iframe#chatframe {
  252.                     position:absolute;
  253.  
  254.                     transform:  iframe-transform;
  255.                     height: s('calc((100% - %s) / %s) !important', chat-btn-height, chat-zoom-for-mobile); 
  256.                     max-height: unset !important; 
  257.                     min-height: unset !important; 
  258.                     transform-origin: 0 0;
  259.                     width: iframe-ratio !important;
  260.                     margin-top: chat-btn-height;
  261.  
  262.  
  263.                 }
  264.  
  265.  
  266.             }
  267.  
  268.  
  269.         }
  270.  
  271.         &:has(#chat:not([collapsed])) {
  272.  
  273.             #contentContainer.tp-yt-app-drawer[swipe-open].tp-yt-app-drawer::after {
  274.  
  275.                 content: unset;
  276.  
  277.             }
  278.          
  279.             #primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy,
  280.             #below.ytd-watch-flexy > .ytd-watch-flexy{buildL4('is', '#related', 'ytd-watch-metadata')} {
  281.                /* display:none !important; */
  282.                 position: fixed !important;
  283.                 transform: scale(0.01) !important;
  284.                 transform-origin: 0 0 !important;
  285.                 left: -100vw !important;
  286.                 top: -100vh !important;
  287.                 visibility: collaspe !important;
  288.                 pointer-events: none !important;
  289.                 user-select: none !important;
  290.                 touch-action: none !important;
  291.             }
  292.  
  293.             #secondary.ytd-watch-flexy {
  294.                 display:none !important;
  295.             }
  296.  
  297.  
  298.  
  299.             
  300.             .efyt-control-bar {
  301.                 position: relative;
  302.                 display: inline-flex;
  303.                 top: auto;
  304.                 left: auto;
  305.                 z-index: 99999;
  306.                 opacity: 0.8;
  307.                 transform: translate(calc(-100% + 32px), 0) !important;
  308.             }
  309.  
  310.             .efyt-control-bar:hover {
  311.                 opacity: 1.0;
  312.                 background: var(--yt-spec-general-background-a);
  313.                 transform: translate(0px, 0) !important;
  314.             }
  315.  
  316.             #player {
  317.                 margin-bottom: 0;
  318.             }
  319.  
  320.             {buildL4('is', '#columns', '#primary')} {
  321.                 padding: 0;
  322.             }
  323.             
  324.             --ylb-min-below-area:  chat-min-height;
  325.  
  326.             {buildL4('is', '#player', '#player-theater-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} {
  327.                 object-fit: contain;
  328.                 max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  329.                 
  330.             }
  331.  
  332.             
  333.             #primary-inner.ytd-watch-flexy > :not(.style-scope) {
  334.                 display: none !important;
  335.             }
  336.  
  337.             #below > *:not(#chat) {
  338.                 /* display:none !important; */
  339.                 position: fixed !important;
  340.                 transform: scale(0.01) !important;
  341.                 transform-origin: 0 0 !important;
  342.                 left: -100vw !important;
  343.                 top: -100vh !important;
  344.                 visibility: collaspe !important;
  345.                 pointer-events: none !important;
  346.                 user-select: none !important;
  347.                 touch-action: none !important;
  348.                 
  349.             }
  350.  
  351.             #below:not(:has(#chat)) {
  352.                 display: none;
  353.             }
  354.  
  355.             
  356.  
  357.             {buildL4('is', 'ytd-watch-flexy', '#columns.ytd-watch-flexy', '#primary.ytd-watch-flexy', '#primary-inner.ytd-watch-flexy')} {
  358.                 display: flex;
  359.                 flex-direction: column;
  360.                 margin: 0;
  361.                 flex: 1;
  362.             }
  363.  
  364.             #below {
  365.                 flex: 1;
  366.             }
  367.  
  368.             ytd-watch-flexy {
  369.                 height: 100vh !important;
  370.                 max-height: 100vh !important;
  371.             }
  372.  
  373.             ytd-watch-flexy{buildL4('is', '[theater]', '[fullscreen]')} #player-theater-container.ytd-watch-flexy {
  374.  
  375.                 min-height: unset !important;
  376.             }
  377.         }
  378.         
  379.         
  380.     }
  381.     
  382.  
  383.     content2c() {
  384.  
  385.         
  386.         
  387.         if chat-zoom-for-right-col >1 or chat-zoom-for-right-col < 1 {
  388.             
  389.             ytd-watch-flexy[is-two-columns_]:not([fullscreen]) iframe#chatframe {
  390.                 
  391.                 position:absolute;
  392.                 margin-top:chat-btn-height;
  393.  
  394.                 transform: 'scale(%s)' % chat-zoom-for-right-col;
  395.                 transform-origin: 0 0;
  396.                 width: '%s !important' % (100% / chat-zoom-for-right-col);
  397.                 max-width: unset !important;
  398.                 height: s('calc( (100% - %s) / %s ) !important', chat-btn-height, chat-zoom-for-right-col);
  399.                 z-index: 1; /* for normal youtube */
  400.  
  401.             }
  402.  
  403.         }
  404.         
  405.  
  406.         if no-masthead-w==2 {
  407.             // 
  408.         } else if no-masthead-w==1 {
  409.             // 
  410.         } else {
  411.  
  412.             ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) {
  413.  
  414.                 .style-scope.ytd-watch-flexy{buildL4('is', '#secondary', '#secondary-inner')} {
  415.                     height: calc(100vh - var(--ytd-toolbar-height));
  416.                     max-height: 100%;
  417.                 }
  418.             }
  419.         }
  420.  
  421.         
  422.         ytd-watch-flexy[is-two-columns_]:not([fullscreen]) #movie_player {
  423.             
  424.             .ytp-chrome-bottom[style*="width"] {
  425.                 width: unset !important;
  426.                 left: chrome-bottom-bar-margin !important;
  427.                 right: chrome-bottom-bar-margin !important;
  428.             }
  429.  
  430.         }
  431.         
  432.         
  433.         ytd-watch-flexy:not([is-two-columns_]):not([fullscreen]) #movie_player {
  434.             
  435.             .ytp-chrome-bottom[style*="width"] {
  436.                 left: 50% !important;
  437.                 transform: translateX(-50%);
  438.             }
  439.  
  440.         }
  441.  
  442.         
  443.         ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) ytd-live-chat-frame#chat:not([collapsed]) {
  444.                 min-height: unset;
  445.         }
  446.  
  447.         
  448.  
  449.         ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]) #primary-inner.ytd-watch-flexy > *:not(#player) {
  450.                 padding: 0 primary-content-margin 0;
  451.         }
  452.  
  453.  
  454.         ytd-watch-flexy.style-scope[is-two-columns_]:not([theater]):not([fullscreen]) #player 
  455.         .ytd-watch-flexy{buildL4('is', '#player-container-outer', '#player-container-inner', '#player-container')}{
  456.  
  457.             // layout outside
  458.              // no effect
  459.              // layout inside
  460.                 max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for very wide screen
  461.         }
  462.  
  463.         ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) #player-theater-container.ytd-watch-flexy {
  464.                 max-height: calc(100vh - var(--ytd-toolbar-height, 0px) - var(--ylb-min-below-area, 0px)); // for 4:3 video
  465.            
  466.         }
  467.  
  468.         
  469.  
  470.         body.lock-scrollbar[style*="overflow"][style*="hidden"]:has(ytd-watch-flexy[is-two-columns_]):has(#movie_player) {
  471.             overflow-y: unset !important;
  472.         }
  473.  
  474.  
  475.         ytd-watch-flexy.style-scope[is-two-columns_] #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy {
  476.             width: side-panel-width;
  477.         }
  478.     
  479.  
  480.  
  481.     }
  482.  
  483.     contentf() {
  484.         // html
  485.  
  486.         
  487.         body ytd-watch-flexy[flexy] #player-container-outer.ytd-watch-flexy {
  488.             max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
  489.         }
  490.  
  491.         &:not([tabview-loaded]) {
  492.             
  493.             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{
  494.                 
  495.                 max-width: unset; // override var(--ytd-watch-flexy-max-player-width);
  496.             
  497.             }
  498.  
  499.             {buildL4('is', 
  500.                 '#primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy', 
  501.                 '#secondary-inner.ytd-watch-flexy > #related.ytd-watch-flexy')} {
  502.                 display: none !important;
  503.             }
  504.  
  505.             ytd-watch-flexy:not([fullscreen]) #player-theater-container {
  506.                 max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  507.             }
  508.             
  509.  
  510.             #cinematics {
  511.                 // contain: layout;
  512.                 contain: layout size style;
  513.                 user-select: none;
  514.                 touch-action: none;
  515.                 pointer-events: none;
  516.             }
  517.             
  518.             ytd-watch-flexy[is-two-columns_]:not([theater]):not([fullscreen]) {buildL4('is', 
  519.                 '#columns', '#primary', '#primary-inner', '#secondary', '#secondary-inner')} {
  520.                 height: calc(100vh - var(--ytd-toolbar-height));
  521.             }
  522.             
  523.         }
  524.         
  525.         if video-enlarging > 0 {
  526.          
  527.             ytd-watch-flexy:not([theater]):not([fullscreen]) #movie_player video[src] {
  528.                 transform: 'scale(%s)' % (video-enlarging / 1000 + 1) ;
  529.                 transform-origin: 50% 50%;
  530.             }
  531.             
  532.         }
  533.  
  534.  
  535.         if no-masthead-w==2 {
  536.             // 
  537.         } else if no-masthead-w==1 {
  538.  
  539.             contentNoMasthead()
  540.         }
  541.         
  542.         
  543.         
  544.         
  545.         
  546.         ytd-watch-flexy[flexy][is-two-columns_][theater]:not([fullscreen]) {
  547.             
  548.             --ylb-min-below-area: min-below-area-for-theater;
  549.             
  550.             
  551.             {buildL4('is', '#player', '#player-theater-container', '#player-container-outer', '#player-container-inner', '#player-container', '#movie_player', '#movie_player video')} { 
  552.                 object-fit: contain;
  553.                 max-height: calc(100vh - var(--ytd-toolbar-height) - var(--ylb-min-below-area, 0px)) !important;
  554.             }
  555.         }
  556.  
  557.  
  558.  
  559.         if no-bottom-row {
  560.  
  561.             #bottom-row.ytd-watch-metadata {
  562.                 display: none !important;
  563.             }
  564.         }
  565.  
  566.         h1.ytd-watch-metadata {
  567.             font-size: video-title-size;
  568.             --font-size: video-title-size;
  569.             line-height: 140%;
  570.             margin-bottom: -2px;
  571.         }
  572.  
  573.  
  574.         ytd-watch-flexy.style-scope:not([fullscreen]) {
  575.  
  576.             & {
  577.                 --ytd-margin-2y: var(--ytd-margin-2x);
  578.                 --ytd-margin-4y: var(--ytd-margin-4x);
  579.                 --ytd-margin-6y: var(--ytd-margin-6x);
  580.                 --ytd-margin-8y: var(--ytd-margin-8x);
  581.             }
  582.  
  583.             #columns.style-scope.ytd-watch-flexy {
  584.                 --ytd-margin-2x: 0;
  585.                 --ytd-margin-4x: 0;
  586.                 --ytd-margin-6x: 0;
  587.                 --ytd-margin-8x: 0;
  588.             }
  589.  
  590.             .style-scope.ytd-watch-flexy > :not(.ytd-watch-flexy),
  591.             #below,
  592.             #player {
  593.                 --ytd-margin-2x: var(--ytd-margin-2y);
  594.                 --ytd-margin-4x: var(--ytd-margin-4y);
  595.                 --ytd-margin-6x: var(--ytd-margin-6y);
  596.                 --ytd-margin-8x: var(--ytd-margin-8y);
  597.             }
  598.  
  599.             #secondary-inner.style-scope.ytd-watch-flexy {
  600.                 display: flex;
  601.                 flex-direction: column;
  602.                 height: 100%;
  603.             }
  604.  
  605.             #movie_player {
  606.                 position: relative;
  607.                 > .html5-video-container:has(video) {
  608.                     top: 0;
  609.                     bottom: 0;
  610.                     left: 0;
  611.                     right: 0;
  612.                     position: absolute;
  613.                 }
  614.  
  615.                 .html5-video-container > video {
  616.                     width: unset !important;
  617.                     height: 100% !important;
  618.                     left: 0 !important;
  619.                     right: 0 !important;
  620.                     max-height: 100%;
  621.                     max-width: 100%;
  622.                     margin: 0 auto;
  623.                 }
  624.  
  625.                 /*
  626.                 .ytp-iv-video-content {
  627.                     width: 100% !important;
  628.                     height: 100% !important;
  629.                 }
  630.                 */
  631.  
  632.                 /*
  633.                 // this is buggy; eg multiple chapter hover container; can be fixed by YouTube Video Resize Fix Only
  634.                 .ytp-chapter-hover-container[style*="width"] {
  635.                     width: 100% !important;
  636.                 }
  637.                 */
  638.                 
  639.                 .html5-video-container > video[style*="top:"]:not(video[style*="top: -"]):not(video[style*="top:-"]) {
  640.                     top: 0 !important;
  641.                 }
  642.  
  643.             }
  644.             
  645.  
  646.             #chat:not([collapsed]) {
  647.                 flex: 77;
  648.             }
  649.  
  650.             #right-tabs {
  651.                 display: flex;
  652.                 margin: 0 !important;
  653.                 flex: 1;
  654.                 flex-direction: column;
  655.  
  656.                 {buildL4('is', '#material-tabs', '.tab-content')} {
  657.                     outline: 0;
  658.                 }
  659.  
  660.                 .tab-content {
  661.                     flex: 77;
  662.                 }
  663.             }
  664.  
  665.             &:not([is-two-columns_]) #primary-inner > *:not(#player) {
  666.                 padding: 0;
  667.             }
  668.  
  669.             &:not([is-two-columns_]) #primary-inner #below > *:not(ytd-live-chat-frame#chat) {
  670.                 padding: 0 primary-content-margin 0;
  671.             }
  672.             
  673.             /*
  674.             #player-container-outer.ytd-watch-flexy {
  675.                 max-width: unset;
  676.             }
  677.             */
  678.         }
  679.  
  680.  
  681.  
  682.         if no-round-border {
  683.  
  684.             ytd-live-chat-frame[rounded-container],
  685.             ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame,
  686.             ytd-live-chat-frame[rounded-container] iframe.ytd-live-chat-frame,
  687.             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,
  688.             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 {
  689.                 border-radius: unset;
  690.             }
  691.         }
  692.  
  693.  
  694.         if disable-cinematics {
  695.             #cinematics.ytd-watch-flexy {
  696.                 display: none;
  697.             }
  698.         }
  699.     } // 
  700.     
  701.     
  702.     contentg() {
  703.  
  704.         content2c() //
  705.         
  706.         selector-g = '&' //
  707.         
  708.         if mode-for-single-col=="disabled" { //
  709.             selector-g = '&:has(ytd-watch-flexy[is-two-columns_])' //
  710.         } //
  711.             
  712.         {s(selector-g)} { //
  713.             // html
  714.             contentf() //
  715.         } //
  716.         
  717.     }
  718.     
  719.     content361() //
  720.     
  721.     selectors-2col = { //
  722.          "expanded-panel": join(', ', 
  723.              "html:not([tabview-loaded]):has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)", 
  724.              "html[tabview-loaded]:has(ytd-watch-flexy[is-two-columns_]:not([fullscreen]):not([theater]))"
  725.          ),
  726.          "expanded-live": "html:has(ytd-live-chat-frame#chat:not([collapsed])):has(iframe#chatframe)",
  727.          "expandable-live": "html:has(ytd-live-chat-frame#chat):has(iframe#chatframe)",
  728.          "always": "html"
  729.      } //
  730.     
  731.     selector-2col = selectors-2col[mode-for-two-col]
  732.     selectors-k = split(', ', selector-2col)
  733.     for selector-k in selectors-k {
  734.      
  735.         {s(selector-k)} {
  736.             contentg() //
  737.         }
  738.         
  739.     }
  740.     
  741.  
  742.     if single-col-mobile {
  743.         
  744.         
  745.         &:has(ytd-watch-flexy:not([is-two-columns_]):not([fullscreen])) {
  746.  
  747.             if no-masthead-w==2 {
  748.                 contentNoMasthead()
  749.             }
  750.             contentSingleColMobile()
  751.         }
  752.     }
  753.     
  754. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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