☰

YouTube Live Borderless

Make YouTube Live Borderless

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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