Skip to content

Instantly share code, notes, and snippets.

@BobbyWibowo
Last active August 22, 2025 09:07
Show Gist options
  • Save BobbyWibowo/fe0d15a1451d3b260013d1059f8d6e7d to your computer and use it in GitHub Desktop.
Save BobbyWibowo/fe0d15a1451d3b260013d1059f8d6e7d to your computer and use it in GitHub Desktop.
/** Override subtitle font **/
.ytp-caption-segment {
font-family: Ubuntu, sans-serif !important;
}
/** Enforce 4 videos per row **/
ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 4 !important;
--ytd-rich-grid-posts-per-row: 4 !important;
}
/** Fit more videos in subscription page's Shorts section **/
[page-subtype="subscriptions"] ytd-rich-shelf-renderer {
--ysc-video-per-row: 5 !important;
&:has(.button-container:last-child:not([hidden])) {
--ysc-video-per-row: 6 !important;
}
}
/** Remove video player's border radius **/
ytd-watch-flexy[rounded-player] #ytd-player.ytd-watch-flexy {
border-radius: 0 !important;
}
/** Fix avatar of recommended channel in sidebar **/
#avatar-section.ytd-channel-renderer {
min-width: unset !important;
flex: unset !important;
}
#avatar.ytd-channel-renderer {
width: unset !important;
}
#info-section.ytd-channel-renderer {
flex-direction: column !important;
}
/** Fix dismissed videos height **/
#dismissed.ytd-compact-video-renderer {
max-height: 94px;
box-sizing: border-box;
}
#dismissed.ytd-compact-video-renderer #text.ytd-notification-multi-action-renderer {
margin: 0 8px;
}
ytd-item-section-renderer {
.ytNotificationMultiActionRendererHost {
height: 94.5px;
box-sizing: border-box;
padding: 3px 6px;
}
.ytNotificationMultiActionRendererTextContainer {
margin-bottom: 0;
.yt-core-attributed-string--white-space-pre-wrap {
font-size: .85em;
}
}
.ytNotificationMultiActionRendererButton {
padding: 3px 0;
.yt-spec-button-shape-next--size-m {
height: 24px;
}
}
}
/** Ext: Return Youtube Dislike **/
:root {
--colorful-rating-bar-like-color: #3ea6ff;
--colorful-rating-bar-dislike-color: #ff2929;
}
.ryd-tooltip-bar-container {
height: 4px !important;
top: -9px !important;
}
#ryd-bar {
background: var(--colorful-rating-bar-like-color) !important;
}
#ryd-bar-container {
background: var(--colorful-rating-bar-dislike-color) !important;
height: 100% !important;
}
/* liked button */
like-button-view-model [aria-pressed="true"] {
.yt-spec-button-shape-next__button-text-content {
color: var(--colorful-rating-bar-like-color) !important;
}
yt-animated-icon path,
.yt-spec-icon-shape path {
fill: var(--colorful-rating-bar-like-color) !important;
}
}
ytd-toggle-button-renderer#like-button [aria-pressed="true"] {
.yt-spec-button-shape-next__icon path {
fill: var(--colorful-rating-bar-like-color) !important;
}
& + .yt-spec-button-shape-with-label__label {
color: var(--colorful-rating-bar-like-color) !important;
}
}
/* disliked button */
dislike-button-view-model [aria-pressed="true"] {
.yt-spec-button-shape-next__button-text-content {
color: var(--colorful-rating-bar-dislike-color) !important;
}
yt-animated-icon path,
.yt-spec-icon-shape path {
fill: var(--colorful-rating-bar-dislike-color) !important;
}
}
ytd-toggle-button-renderer#dislike-button [aria-pressed="true"] {
.yt-spec-button-shape-next__icon path {
fill: var(--colorful-rating-bar-dislike-color) !important;
}
& + .yt-spec-button-shape-with-label__label {
color: var(--colorful-rating-bar-dislike-color) !important;
}
}
/* comments liked/disliked buttons */
#like-button.ytd-comment-engagement-bar [aria-pressed="true"] path {
fill: var(--colorful-rating-bar-like-color);
}
#dislike-button.ytd-comment-engagement-bar [aria-pressed="true"] path {
fill: var(--colorful-rating-bar-dislike-color);
}
/** Watched videos **/
ytd-thumbnail:has(#progress[style="width: 100%;"]),
yt-thumbnail-view-model:has(.ytThumbnailOverlayProgressBarHostWatchedProgressBarSegment[style="width: 100%;"]) {
&::after {
content: "WATCHED";
z-index: 2;
color: white;
top: 40%;
font-size: 1.4rem;
font-weight: 600;
text-align: center;
position: absolute;
width: 100%;
}
> #thumbnail,
> .yt-thumbnail-view-model__image,
> .ytThumbnailViewModelImage {
opacity: 0.35;
}
}
/** Ext: PocketTube **/
/* disable PocketTube's notification */
body > .isa_info.on {
display: none;
}
/* disable PocketTube's Deck */
#items > .ysm-deck-open {
display: none;
}
/* disable built-in Subscriptions section */
#sections > ytd-guide-section-renderer:has(+ .yms-block-groups) {
display: none !important;
}
/* disable built-in sections after PocketTube's, excluding the last one (Settings/Help/etc.) */
#sections > .yms-block-groups ~ ytd-guide-section-renderer:not(:last-child) {
display: none !important;
}
/* undo stylings related to enforced "N videos per row" in subscriptions page, when modified by PocketTube **/
.ysm-subscription-filter:has(iframe[src*="pockettube"]) {
~ #contents.ytd-rich-grid-renderer {
padding-left: 0 !important;
}
~ * ytd-rich-item-renderer[rendered-from-rich-grid][is-in-first-column] {
margin-left: 0 !important;
}
~ * #content.ytd-rich-section-renderer {
margin-left: calc(var(--ytd-rich-grid-item-margin) / 2) !important;
}
}
/** Ext: Tweaks for YouTube **/
ytd-watch-flexy:not([theater]):not([fullscreen]):not([show-engagement-panel-scrim__]) #secondary-inner {
height: calc(100vh - var(--ytd-watch-flexy-masthead-height) - var(--ytd-margin-6x));
}
/* fix Clean Page > Home - Header chips */
#frosted-glass.ytd-app {
height: 56px !important;
}
/** Fix: YouTube-DeepDark: Ambient Mode Support **/
#content ytd-watch-flexy[cinematics-enabled] #cinematics.ytd-watch-flexy {
display: unset !important;
}
#content ytd-watch-flexy[cinematics-enabled] [class*="ytd-watch-flexy"] {
background-color: unset !important;
}
@BobbyWibowo
Copy link
Author

BobbyWibowo commented Aug 15, 2025

Recommended Extensions

My Userscript

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment