☰

Fix YouTube Watch Flexible Menu Items

To fix YouTube Watch Flexible Menu Items

目前为 2023-10-15 提交的版本，查看 最新版本。

  1. /* ==UserStyle==
  2. @name           Fix YouTube Watch Flexible Menu Items
  3. @namespace      github.com/openstyles/stylus
  4. @version        1.2.0
  5. @description    To fix YouTube Watch Flexible Menu Items
  6. @author         CY Fung
  7. @license        MIT
  8. @preprocessor   stylus
  9. @var range      menu-flex-width           "Menu:Flex:Width"                           [260, 120, 680, 20, 'px']
  10. @var checkbox   hide-menu-icon-text      "Hide:Menu:Icon:Text (For:No:Tabview:only)"                      1
  11. @var range     owner-min-width     "Owner:Min:Width (default:disable)"                               [0, 0, 720, 40, 'px']
  12. @var checkbox   margin-fix      "Margin Fix"                      1
  13. ==/UserStyle== */
  14.  
  15. hideMenuIcon(){
  16.  
  17.     @supports (color: var(--hide-menu-icon-text-by-default-v1)) { /* May 2023 */
  18.  
  19.         ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {
  20.             margin-right: 0;
  21.             margin-left: 0;
  22.             contain: layout style;
  23.         }
  24.  
  25.         ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon+.yt-spec-button-shape-next--button-text-content {
  26.             display: none !important;
  27.             width: 0 !important;
  28.             contain: strict !important;
  29.         }
  30.  
  31.         /* https://greasyfork.org/en/scripts/456108 */
  32.  
  33.         ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child+span:last-child {
  34.             display: none !important;
  35.             width: 0 !important;
  36.             contain: strict !important;
  37.         }
  38.  
  39.         ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child:nth-last-child(2) {
  40.             margin-right: 0 !important;
  41.             margin-left: 0 !important;
  42.             contain: layout style;
  43.         }
  44.  
  45.     }
  46.  
  47.  
  48.     @supports (color: var(--hide-menu-icon-text-by-default-v2)) { /* Jul 2023 */
  49.  
  50.         ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon {
  51.             margin-right: 0;
  52.             margin-left: 0;
  53.             contain: layout style;
  54.         }
  55.  
  56.         ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] [button-next] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading .yt-spec-button-shape-next__icon+.yt-spec-button-shape-next__button-text-content {
  57.             display: none !important;
  58.             width: 0 !important;
  59.             contain: strict !important;
  60.         }
  61.  
  62.         /* https://greasyfork.org/en/scripts/456108 */
  63.  
  64.         ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child+span:last-child {
  65.             display: none !important;
  66.             width: 0 !important;
  67.             contain: strict !important;
  68.         }
  69.  
  70.         ytd-watch-metadata:not([actions-on-separate-line]) ytd-menu-renderer.ytd-watch-metadata[class] div[name="top_level_translate_btn"] .yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-leading > img:first-child:nth-last-child(2) {
  71.             margin-right: 0 !important;
  72.             margin-left: 0 !important;
  73.             contain: layout style;
  74.         }
  75.  
  76.     }
  77.     
  78. }
  79.  
  80. generalRules(){
  81.     
  82.     #primary.ytd-watch-flexy #below ytd-video-owner-renderer.style-scope.ytd-watch-metadata,
  83.     #primary.ytd-watch-flexy #below #owner {
  84.         flex-basis: 90%;
  85.         max-width: intrinsic;
  86.         max-width: -moz-max-content;
  87.         max-width: -webkit-max-content;
  88.         max-width: max-content;
  89.     }
  90.     
  91.     @supports (color: var(--fix-tooltips-display)) { /* May 2023 */
  92.         #actions-inner tp-yt-paper-tooltip {
  93.             white-space: nowrap; /* no multline for super chat donation button */
  94.         }
  95.  
  96.         ytd-watch-flexy #actions-inner.ytd-watch-metadata tp-yt-paper-tooltip{
  97.             pointer-events: none !important; /* avoid offset due to cursor */
  98.         }
  99.     }
  100.  
  101.  
  102.     @supports (color: var(--tabview-fix-menu-icons-sizing)){ /* May 2023 */
  103.  
  104.         ytd-watch-metadata #actions.item.style-scope.ytd-watch-metadata{
  105.             justify-content: end !important;
  106.             display:flex;
  107.         }
  108.         html ytd-watch-metadata[flex-menu-enabled] #actions-inner.ytd-watch-metadata {
  109.             /*width: auto !important;*/ /* override 100% */
  110.             flex-grow: 1;
  111.         }
  112.         #sponsor-button.style-scope.ytd-video-owner-renderer {
  113.             max-width: calc( ( 100% - 40px ) / 2 );
  114.  
  115.         }
  116.         #owner:hover #sponsor-button.style-scope.ytd-video-owner-renderer {
  117.             max-width: initial;
  118.         }
  119.  
  120.         #sponsor-button.style-scope.ytd-video-owner-renderer [button-next] {
  121.             max-width: 100%;
  122.         }
  123.  
  124.         #subscribe-button.ytd-watch-metadata {
  125.             max-width: calc( ( 100% - 40px ) /3 );
  126.         }
  127.         #owner:hover #subscribe-button.ytd-watch-metadata {
  128.             max-width: initial;
  129.         }
  130.  
  131.         #subscribe-button.ytd-watch-metadata > ytd-subscribe-button-renderer {
  132.             max-width: 100%;
  133.         }
  134.  
  135.  
  136.         #subscribe-button.ytd-watch-metadata > yt-button-renderer, 
  137.         #subscribe-button.ytd-watch-metadata > ytd-button-renderer, 
  138.         #subscribe-button.ytd-watch-metadata > ytd-toggle-button-renderer {
  139.             max-width: 100%; /* for Firefox */
  140.         }
  141.  
  142.  
  143.         #sponsor-button.style-scope.ytd-video-owner-renderer > yt-button-renderer, 
  144.         #sponsor-button.style-scope.ytd-video-owner-renderer > ytd-button-renderer, 
  145.         #sponsor-button.style-scope.ytd-video-owner-renderer > ytd-toggle-button-renderer {
  146.             max-width: 100%; /* for Firefox */
  147.         }
  148.  
  149.     }
  150.  
  151.  
  152.     @supports (color: var(--fix-youtube-bugs-menu-options-hidden-after-page-updated)) and (contain: var(--size)){ /* May 2023 */
  153.         /* added in 2023.05.10 due to new css rule added by YouTube due to the change in darker dark theme implementation stage */
  154.  
  155.         /* against YouTube css bug - "max-height: 36px" casue buttons disappear after page changing */
  156.         html ytd-menu-renderer[has-flexible-items] {
  157.             /* padding-top: 1px; */
  158.             max-height: initial; /* limiting the height might prohibit the resizing feature */
  159.             /* max-height: 100%; */
  160.             /* overflow-y: hidden; */
  161.         }
  162.  
  163.          ytd-watch-metadata {
  164.             --tyt-action-menu-contain: size;
  165.          }
  166.  
  167.         ytd-watch-metadata[actions-on-separate-line] {
  168.             /* actions-on-separate-line is a new attribute introduced in May 2023 Darker Dark Theme. */
  169.             --tyt-action-menu-contain: none;
  170.  
  171.         }
  172.  
  173.         ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata {
  174.             contain: var(--tyt-action-menu-contain); /* follow flex layouting instead of content. content can have larger size */
  175.             /* the height will depends on #owner; the width will fill up for flex layout of #top-row */
  176.             min-width: var(--menu-min-width, initial) !important;
  177.         }
  178.  
  179.         ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner {
  180.             max-height: 100%; /* the y-overflowed items will be shifted such that the first line will be always positiioned at the top */
  181.             overflow: hidden; /* for visual only */ /* cannot do "contain: paint" due to tooltips */
  182.         }
  183.  
  184.         ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner ytd-menu-renderer.style-scope.ytd-watch-metadata,
  185.         ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner .top-level-buttons.ytd-menu-renderer {
  186.             row-gap: 12px; /* for visual only */ /* second line will be far below the first line such that it is invisible */
  187.         }
  188.  
  189.         /* 2023.05.15 */ /* margin-bottom for `.top-level-buttons.ytd-menu-renderer` is not required. */
  190.         html ytd-menu-renderer[has-flexible-items][safe-area] .top-level-buttons.ytd-menu-renderer {
  191.             margin-bottom: 0; /* override margin-bottom: 4px; */
  192.         }
  193.  
  194.     }
  195.  
  196. }
  197.  
  198. marginFix(){
  199.     
  200.     @supports (color: var(--fix-single-column-menu-bar-position)){ /* May 2023 */
  201.         html ytd-watch-metadata[actions-on-separate-line] #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata {
  202.             justify-content: flex-end; /* override justify-content: flex-start; */
  203.         }
  204.         ytd-watch-metadata[actions-on-separate-line] .item.ytd-watch-metadata {
  205.             /* override margin-bottom: 12px */
  206.             margin-top: 6px;
  207.             margin-bottom: 6px;
  208.         }
  209.         html .item.ytd-watch-metadata {
  210.             /* override margin-right: 12px */
  211.             /* this is a wrong design to make every .item.ytd-watch-metadata with margin-right. this makes description line becomes not fullwidth */
  212.             margin-right: 0px; /* fix description line */
  213.         }
  214.         #top-row.ytd-watch-metadata {
  215.             column-gap: 12px; /* this is the correct way to set gap in flex layout */
  216.         }
  217.     }
  218.  
  219.     @supports (color: var(--tabview-adjust-margin-for-watch-metadata)){ /* May 2023 */
  220.         html .item.ytd-watch-metadata {
  221.             /* May 2023 theme - no second line in song title */
  222.             margin-top: 8px;
  223.         }
  224.         html #description.ytd-watch-metadata {
  225.             font-size: 1.2rem;      /* override font-size: 1.4rem; */
  226.             line-height: 1.8rem;    /* override line-height: 2rem; */
  227.         }
  228.     }
  229.     
  230. }
  231.  
  232. @-moz-document domain("youtube.com") {
  233.     
  234.     html{
  235.         // --menu-min-width: menu-min-width;
  236.         --menu-flex-width: menu-flex-width;
  237.         --owner-min-width: owner-min-width;
  238.     }
  239.  
  240.     ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata {
  241.         flex-basis: var(--menu-flex-width);
  242.         min-width: var(--menu-min-width, initial) !important;
  243.     }
  244.  
  245.     @keyframes ytdMenuRendererAni {
  246.  
  247.         0% {
  248.             display: none;
  249.             background-position-x: 3px;
  250.         }
  251.         100% {
  252.             display: flex;
  253.             background-position-x: 4px;
  254.             animation: none;
  255.         }
  256.     }
  257.  
  258.     ytd-menu-renderer {
  259.         animation: ytdMenuRendererAni 1ms linear 0s 1 normal forwards;
  260.     }
  261.  
  262.     if hide-menu-icon-text {
  263.         
  264.         hideMenuIcon();
  265.         
  266.         
  267.     }
  268.     
  269.     if owner-min-width > 0px {
  270.  
  271.         body #owner.ytd-watch-metadata {
  272.             min-width: var(--owner-min-width);
  273.         }
  274.         
  275.     }
  276.     
  277.  
  278.     generalRules();
  279.     
  280.     if margin-fix {
  281.         marginFix();
  282.     }
  283.  
  284. }