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