☰

YouTube Live Borderless

Make YouTube Live Borderless

目前为 2023-01-03 提交的版本。查看 最新版本。

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