☰

YouTube Live Borderless

Make YouTube Live Borderless

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

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