☰

YouTube Live Borderless

Make YouTube Live Borderless

当前为 2022-12-30 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           YouTube Live Borderless
  3. @version        0.1.13
  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. @preprocessor   stylus
  10. @var checkbox   apply-to-live-chat-only         "Apply to Live Chat Only"                       1
  11. @var checkbox   no-masthead                     "Hide Top Masthead Bar"                         0
  12. @var range      masthead-hoverable-height       "Height of Invisible MastHead Bar"              [0, 0, 12, 2, "px"]
  13. @var range      chrome-bottom-bar-margin        "Chrome Bottom Bar Margin"                      [12, 6, 48, 6, "px"]
  14. @var range      primary-content-margin          "Primary Content Margin"                        [24, 6, 48, 6, "px"]
  15. @var checkbox   no-bottom-row                   "Hide Primary MetaInfo Bottom Row"              0
  16. @var range      video-title-size                "Video Title Size"                              [2.0, 1.0, 3.0, 0.2, "rem"]
  17. @var number     side-panel-width                "Side Panel Width"                              [440, 320, 640, 20, "px"]
  18. @var checkbox   no-round-border                 "No Round Border"                               1
  19. ==/UserStyle== */
  20.  
  21. @-moz-document url-prefix("https://www.youtube.com/watch?v=") 
  22.     
  23.     contentf(){
  24.         
  25.         &:not([tabview-loaded]){
  26.             
  27.             #primary-inner.ytd-watch-flexy ytd-comments#comments.ytd-watch-flexy, 
  28.             #secondary-inner.ytd-watch-flexy > #related.ytd-watch-flexy {
  29.                 display:none !important;
  30.             }
  31.  
  32.             #player-theater-container{
  33.                 max-height: calc(100vh - 100px) !important;
  34.             }
  35.             #cinematics{
  36.                 // contain: layout;
  37.                 contain: layout size style;
  38.                 user-select: none;
  39.                 touch-action: none;
  40.                 pointer-events: none;
  41.             }
  42.         }
  43.         
  44.         if no-masthead {
  45.             
  46.             &,
  47.             ytd-app,
  48.             ytd-page-manager[class].style-scope,
  49.             ytd-watch-flexy[class].style-scope {
  50.                 /* 0px not 0 */
  51.                 --ytd-masthead-height: 0px;
  52.                 --ytd-toolbar-height: 0px;
  53.                 --ytd-watch-flexy-masthead-height: 0px;
  54.             }
  55.             
  56.             #masthead-container {
  57.                 opacity: 0 !important;
  58.                 transition: opacity 300ms;
  59.                 min-height: masthead-hoverable-height;
  60.             }
  61.             #masthead-container:not(:hover) > ytd-masthead {
  62.                 display: none !important;
  63.             }
  64.             if masthead-hoverable-height > 0 {
  65.  
  66.                 #masthead-container:hover {
  67.                     opacity: 1 !important;
  68.                 }
  69.  
  70.                 #masthead-container::after {
  71.                     content: '';
  72.                     display: flex;
  73.                     width: 100%;
  74.                     height: masthead-hoverable-height;
  75.                     top: 0;
  76.                     z-index: 99999;
  77.                 }
  78.                 
  79.             }
  80.             
  81.             ytd-watch-flexy.style-scope[is-two-columns_]:not([fullscreen]):not([theater]) {
  82.  
  83.                 #columns.style-scope.ytd-watch-flexy,
  84.                 #primary.style-scope.ytd-watch-flexy,
  85.                 #primary-inner.style-scope.ytd-watch-flexy,
  86.                 #secondary.style-scope.ytd-watch-flexy,
  87.                 #secondary-inner.style-scope.ytd-watch-flexy {
  88.                     height: 100vh;
  89.                     max-height: 100%;
  90.                 }
  91.                 
  92.             }
  93.  
  94.             ytd-watch-flexy.style-scope[is-two-columns_][theater]:not([fullscreen]) {
  95.  
  96.                 height:100vh; 
  97.                 #player-theater-container.ytd-watch-flexy {
  98.                     flex: 77;
  99.                     max-height: unset;
  100.                 }
  101.                 #player-theater-container.ytd-watch-flexy ~ #columns.style-scope.ytd-watch-flexy {
  102.                     overflow: visible;
  103.                 }
  104.                 
  105.             }
  106.             
  107.             
  108.         }
  109.  
  110.         if no-bottom-row {
  111.             
  112.             #bottom-row.ytd-watch-metadata {
  113.                 display: none !important;
  114.             }
  115.             
  116.         }
  117.  
  118.         h1.ytd-watch-metadata {
  119.             font-size: video-title-size;
  120.             --font-size: video-title-size;
  121.             line-height: calc(var(--font-size) * 1.4);
  122.         }
  123.  
  124.         ytd-watch-flexy.style-scope:not([fullscreen]) {
  125.  
  126.             & {
  127.                 --ytd-margin-2y: var(--ytd-margin-2x);
  128.                 --ytd-margin-4y: var(--ytd-margin-4x);
  129.                 --ytd-margin-6y: var(--ytd-margin-6x);
  130.                 --ytd-margin-8y: var(--ytd-margin-8x);
  131.             }
  132.             #columns.style-scope.ytd-watch-flexy {
  133.                 --ytd-margin-2x: 0;
  134.                 --ytd-margin-4x: 0;
  135.                 --ytd-margin-6x: 0;
  136.                 --ytd-margin-8x: 0;
  137.             }
  138.             .style-scope.ytd-watch-flexy > :not(.ytd-watch-flexy) {
  139.                 --ytd-margin-2x: var(--ytd-margin-2y);
  140.                 --ytd-margin-4x: var(--ytd-margin-4y);
  141.                 --ytd-margin-6x: var(--ytd-margin-6y);
  142.                 --ytd-margin-8x: var(--ytd-margin-8y);
  143.             }
  144.             #secondary-inner.style-scope.ytd-watch-flexy {
  145.                 display: flex;
  146.                 flex-direction: column;
  147.                 height: 100%;
  148.             }
  149.             #movie_player {
  150.                 position: relative;
  151.  
  152.                 > .html5-video-container:has(video) {
  153.  
  154.                     top: 0;
  155.                     bottom: 0;
  156.                     left: 0;
  157.                     right: 0;
  158.                     position: absolute;
  159.                 }
  160.                 .ytp-chrome-bottom[style*="width"] {
  161.                     width: unset !important;
  162.                     left: chrome-bottom-bar-margin !important;
  163.                     right: chrome-bottom-bar-margin !important;
  164.                 }
  165.                 .html5-video-container > video {
  166.                     width: unset !important;
  167.                     height: 100% !important;
  168.                     left: 0 !important;
  169.                     right: 0 !important;
  170.                     max-height: 100%;
  171.                     max-width: 100%;
  172.                     margin: 0 auto;
  173.                 }
  174.                 .ytp-iv-video-content {
  175.                     width: 100% !important;
  176.                     height: 100% !important;
  177.                 }
  178.                 .ytp-chapter-hover-container[style*="width"] {
  179.                     width: 100% !important;
  180.                 }
  181.             }
  182.             #chat:not([collapsed]) {
  183.                 flex: 77;
  184.             }
  185.             #right-tabs {
  186.                 display: flex;
  187.                 margin: 0 !important;
  188.                 flex: 1;
  189.                 flex-direction: column;
  190.  
  191.                 #material-tabs,
  192.                 .tab-content {
  193.                     outline: 0;
  194.                 }
  195.  
  196.                 .tab-content {
  197.                     flex: 77;
  198.                 }
  199.             }
  200.             #primary-inner > *:not(#player) {
  201.                 padding: 0 primary-content-margin 0;
  202.             }
  203.             h1.style-scope.ytd-watch-metadata {
  204.                 display: flex;
  205.                 flex-direction: row;
  206.                 flex-wrap: wrap;
  207.                 align-items: center;
  208.             }
  209.             #player-container-outer.ytd-watch-flexy {
  210.                 max-width: unset;
  211.             }
  212.             
  213.         }
  214.  
  215.         
  216.         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]){
  217.             overflow-y: unset !important;
  218.         }
  219.         
  220.         
  221.         #columns.ytd-watch-flexy > #secondary.ytd-watch-flexy {
  222.             width: side-panel-width;
  223.         }
  224.         
  225.         if no-round-border {
  226.  
  227.             ytd-live-chat-frame[rounded-container], 
  228.             ytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame,
  229.             ytd-live-chat-frame[rounded-container] iframe.ytd-live-chat-frame,     
  230.             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,
  231.             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 {
  232.                 border-radius: unset;
  233.             }
  234.  
  235.         }
  236.         
  237.     }
  238.     
  239.     if apply-to-live-chat-only 
  240.         html:has(iframe#chatframe)
  241.             contentf()
  242.     else
  243.         html
  244.             contentf()
  245.

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

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

加入Q群

QingJ © 2025

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