☰

YouTube Live Borderless

Make YouTube Live Borderless

目前为 2023-05-24 提交的版本。查看 最新版本。

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