To fix YouTube Watch Flexible Menu Items
/* ==UserStyle==
@name Fix YouTube Watch Flexible Menu Items
@namespace github.com/openstyles/stylus
@version 1.2.1
@description To fix YouTube Watch Flexible Menu Items
@author CY Fung
@license MIT
@preprocessor stylus
@var range menu-flex-width "Menu:Flex:Width" [260, 120, 680, 20, 'px']
@var checkbox hide-menu-icon-text "Hide:Menu:Icon:Text (For:No:Tabview:only)" 1
@var range owner-min-width "Owner:Min:Width (default:disable)" [0, 0, 720, 40, 'px']
@var checkbox margin-fix "Margin Fix" 1
==/UserStyle== */
hideMenuIcon(){
@supports (color: var(--hide-menu-icon-text-by-default-v1)) { /* May 2023 */
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 {
margin-right: 0;
margin-left: 0;
contain: layout style;
}
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 {
display: none !important;
width: 0 !important;
contain: strict !important;
}
/* https://greasyfork.org/en/scripts/456108 */
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 {
display: none !important;
width: 0 !important;
contain: strict !important;
}
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) {
margin-right: 0 !important;
margin-left: 0 !important;
contain: layout style;
}
}
@supports (color: var(--hide-menu-icon-text-by-default-v2)) { /* Jul 2023 */
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 {
margin-right: 0;
margin-left: 0;
/* contain: layout style; */ /* removed in Dec 2023 */
contain: style; /* added in Dec 2023 */
}
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 {
display: none !important;
width: 0 !important;
contain: strict !important;
}
/* https://greasyfork.org/en/scripts/456108 */
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 {
display: none !important;
width: 0 !important;
contain: strict !important;
}
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) {
margin-right: 0 !important;
margin-left: 0 !important;
/* contain: layout style; */ /* removed in Dec 2023 */
contain: style; /* added in Dec 2023 */
}
}
}
generalRules(){
#primary.ytd-watch-flexy #below ytd-video-owner-renderer.style-scope.ytd-watch-metadata,
#primary.ytd-watch-flexy #below #owner {
flex-basis: 90%;
max-width: intrinsic;
max-width: -moz-max-content;
max-width: -webkit-max-content;
max-width: max-content;
}
@supports (color: var(--fix-tooltips-display)) { /* May 2023 */
#actions-inner tp-yt-paper-tooltip {
white-space: nowrap; /* no multline for super chat donation button */
}
ytd-watch-flexy #actions-inner.ytd-watch-metadata tp-yt-paper-tooltip{
pointer-events: none !important; /* avoid offset due to cursor */
}
}
@supports (color: var(--tabview-fix-menu-icons-sizing)){ /* May 2023 */
ytd-watch-metadata #actions.item.style-scope.ytd-watch-metadata{
justify-content: end !important;
display:flex;
}
html ytd-watch-metadata[flex-menu-enabled] #actions-inner.ytd-watch-metadata {
/*width: auto !important;*/ /* override 100% */
flex-grow: 1;
}
#sponsor-button.style-scope.ytd-video-owner-renderer {
max-width: calc( ( 100% - 40px ) / 2 );
}
#owner:hover #sponsor-button.style-scope.ytd-video-owner-renderer {
max-width: initial;
}
#sponsor-button.style-scope.ytd-video-owner-renderer [button-next] {
max-width: 100%;
}
#subscribe-button.ytd-watch-metadata {
max-width: calc( ( 100% - 40px ) /3 );
}
#owner:hover #subscribe-button.ytd-watch-metadata {
max-width: initial;
}
#subscribe-button.ytd-watch-metadata > ytd-subscribe-button-renderer {
max-width: 100%;
}
#subscribe-button.ytd-watch-metadata > yt-button-renderer,
#subscribe-button.ytd-watch-metadata > ytd-button-renderer,
#subscribe-button.ytd-watch-metadata > ytd-toggle-button-renderer {
max-width: 100%; /* for Firefox */
}
#sponsor-button.style-scope.ytd-video-owner-renderer > yt-button-renderer,
#sponsor-button.style-scope.ytd-video-owner-renderer > ytd-button-renderer,
#sponsor-button.style-scope.ytd-video-owner-renderer > ytd-toggle-button-renderer {
max-width: 100%; /* for Firefox */
}
}
@supports (color: var(--fix-youtube-bugs-menu-options-hidden-after-page-updated)) and (contain: var(--size)){ /* May 2023 */
/* added in 2023.05.10 due to new css rule added by YouTube due to the change in darker dark theme implementation stage */
/* against YouTube css bug - "max-height: 36px" casue buttons disappear after page changing */
html ytd-menu-renderer[has-flexible-items] {
/* padding-top: 1px; */
max-height: initial; /* limiting the height might prohibit the resizing feature */
/* max-height: 100%; */
/* overflow-y: hidden; */
}
ytd-watch-metadata {
--tyt-action-menu-contain: size;
}
ytd-watch-metadata[actions-on-separate-line] {
/* actions-on-separate-line is a new attribute introduced in May 2023 Darker Dark Theme. */
--tyt-action-menu-contain: none;
}
ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata {
contain: var(--tyt-action-menu-contain); /* follow flex layouting instead of content. content can have larger size */
/* the height will depends on #owner; the width will fill up for flex layout of #top-row */
min-width: var(--menu-min-width, initial) !important;
}
ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner {
max-height: 100%; /* the y-overflowed items will be shifted such that the first line will be always positiioned at the top */
overflow: hidden; /* for visual only */ /* cannot do "contain: paint" due to tooltips */
}
ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner ytd-menu-renderer.style-scope.ytd-watch-metadata,
ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata > #actions-inner .top-level-buttons.ytd-menu-renderer {
row-gap: 12px; /* for visual only */ /* second line will be far below the first line such that it is invisible */
}
/* 2023.05.15 */ /* margin-bottom for `.top-level-buttons.ytd-menu-renderer` is not required. */
html ytd-menu-renderer[has-flexible-items][safe-area] .top-level-buttons.ytd-menu-renderer {
margin-bottom: 0; /* override margin-bottom: 4px; */
}
}
}
marginFix(){
@supports (color: var(--fix-single-column-menu-bar-position)){ /* May 2023 */
html ytd-watch-metadata[actions-on-separate-line] #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata {
justify-content: flex-end; /* override justify-content: flex-start; */
}
ytd-watch-metadata[actions-on-separate-line] .item.ytd-watch-metadata {
/* override margin-bottom: 12px */
margin-top: 6px;
margin-bottom: 6px;
}
html .item.ytd-watch-metadata {
/* override margin-right: 12px */
/* this is a wrong design to make every .item.ytd-watch-metadata with margin-right. this makes description line becomes not fullwidth */
margin-right: 0px; /* fix description line */
}
#top-row.ytd-watch-metadata {
column-gap: 12px; /* this is the correct way to set gap in flex layout */
}
}
@supports (color: var(--tabview-adjust-margin-for-watch-metadata)){ /* May 2023 */
html .item.ytd-watch-metadata {
/* May 2023 theme - no second line in song title */
margin-top: 8px;
}
html #description.ytd-watch-metadata {
font-size: 1.2rem; /* override font-size: 1.4rem; */
line-height: 1.8rem; /* override line-height: 2rem; */
}
}
}
@-moz-document domain("youtube.com") {
html{
// --menu-min-width: menu-min-width;
--menu-flex-width: menu-flex-width;
--owner-min-width: owner-min-width;
}
ytd-watch-metadata #owner ~ #actions.item.style-scope.ytd-watch-metadata {
flex-basis: var(--menu-flex-width);
min-width: var(--menu-min-width, initial) !important;
}
@keyframes ytdMenuRendererAni {
0% {
display: none;
background-position-x: 3px;
}
100% {
display: flex;
background-position-x: 4px;
animation: none;
}
}
ytd-menu-renderer {
animation: ytdMenuRendererAni 1ms linear 0s 1 normal forwards;
}
if hide-menu-icon-text {
hideMenuIcon();
}
if owner-min-width > 0px {
body #owner.ytd-watch-metadata {
min-width: var(--owner-min-width);
}
}
generalRules();
if margin-fix {
marginFix();
}
}