☰

YouTube Live Borderless

Make YouTube Live Borderless

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

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

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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