Skip to content

Instantly share code, notes, and snippets.

@Yanrishatum
Last active September 6, 2023 22:54
Show Gist options
  • Save Yanrishatum/41dd65ac42b59db47f595ef954ca5062 to your computer and use it in GitHub Desktop.
Save Yanrishatum/41dd65ac42b59db47f595ef954ca5062 to your computer and use it in GitHub Desktop.
New YT subscriptions page is shit, gotta fix it.
/* ==UserStyle==
@name Fix YT shit UX (again)
@namespace github.com/openstyles/stylus
@version 1.1.0
@description A new userstyle
@author Me
@var number ipr "Items per row" 6
@var number avatarSize "Avatar size" [30, "px"]
@var select hideButtons "Hide video buttons" {
yes: "none",
no: "initial"
}
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/feed/subscriptions") {
#contents.ytd-rich-grid-renderer {
display: grid;
grid-template-columns: repeat(var(--ipr), minmax(0, 1fr));
gap: 1rem;
max-width: 1400px;
}
#contents.ytd-rich-grid-renderer>ytd-rich-section-renderer {
grid-column-start: span var(--ipr);
}
#contents.ytd-rich-grid-renderer> ytd-rich-grid-row,
#contents.ytd-rich-grid-renderer> ytd-rich-grid-row>#contents {
display: contents;
}
#meta.ytd-rich-grid-media {
padding-right: 0;
display: flex;
flex-direction: column;
}
#meta.ytd-rich-grid-media #buttons {
display: var(--hideButtons);
}
#avatar-link.ytd-rich-grid-media {
margin-top: 4px;
margin-right: 4px;
height: var(--avatarSize);
--yt-img-max-width: var(--avatarSize);
--yt-img-max-height: var(--avatarSize);
}
#avatar-link.ytd-rich-grid-media>yt-img-shadow {
width: var(--avatarSize);
height: var(--avatarSize);
}
h3.ytd-rich-grid-media {
margin-top: 4px;
flex-grow: 1;
}
ytd-rich-item-renderer {
margin-left: 0;
margin-right: 0;
width: auto;
flex-grow: 1;
margin-bottom: 10px;
}
#details yt-formatted-string#video-title {
font-size: 1.4rem;
line-height: 1.7rem;
}
ytd-video-meta-block[rich-meta] #byline-container.ytd-video-meta-block,
ytd-video-meta-block[rich-meta] #metadata-line.ytd-video-meta-block,
#metadata.ytd-video-meta-block>div {
font-size: 1.2rem;
line-height: 1.6rem;
flex-wrap: nowrap !important;
white-space: nowrap !important;
}
ytd-thumbnail[size=large] a.ytd-thumbnail, ytd-thumbnail[size=large]:before {
border-radius: 2px;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment