☰

Fix YouTube Watch Flexible Menu Items

To fix YouTube Watch Flexible Menu Items

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