☰

YouTube Live Borderless

Make YouTube Live Borderless

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

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