YouTubeRedux
YouTubeRedux copied to clipboard
some patches for CSS
here are some patches for CSS to fix a few small issues, and to make the player buttons have their older sizing (which is still used in the embed player, but not the main player)
not really familiar enough with the source to make a PR though, so I'm opening an issue with the CSS in it instead
{ see further replies }
Thanks for that! I'll try to have a look at it soon.
made a quick revision to bring the player controls spacing back to what it was in 2017
(see above)
updated original comment with these fixes, and fixes to the subscriber count text
updated original comment with further patches
the tooltip height in the player may need adjusting but idk how to do override that without breaking anything lol
there's also this, but this requires either hiding the new, live and premiere badges, or moving them to their old location beside the view count to keep sizing consistent (as their presence makes the container overflow)
/* small thumbnails */
ytd-compact-video-renderer:not([watch-feed-big-thumbs]) ytd-thumbnail.ytd-compact-video-renderer, ytd-compact-radio-renderer:not([watch-feed-big-thumbs]) ytd-thumbnail.ytd-compact-radio-renderer, ytd-compact-playlist-renderer:not([watch-feed-big-thumbs]) ytd-playlist-thumbnail.ytd-compact-playlist-renderer {
height: 67px;
width: 120px;
}
ytd-button-renderer.ytd-item-section-renderer, ytd-compact-radio-renderer.ytd-item-section-renderer, ytd-compact-video-renderer.ytd-item-section-renderer, ytd-compact-movie-renderer.ytd-item-section-renderer, ytd-compact-playlist-renderer.ytd-item-section-renderer, ytd-emergency-onebox-renderer.ytd-item-section-renderer, ytd-feed-nudge-renderer.ytd-item-section-renderer, ytd-movie-renderer.ytd-item-section-renderer, ytd-playlist-renderer.ytd-item-section-renderer, ytd-show-renderer.ytd-item-section-renderer, ytd-radio-renderer.ytd-item-section-renderer, yt-search-no-results-renderer.ytd-item-section-renderer, ytd-video-renderer.ytd-item-section-renderer, ytd-channel-renderer.ytd-item-section-renderer, ytd-promoted-sparkles-text-search-renderer.ytd-item-section-renderer, ytd-web-answer-renderer.ytd-item-section-renderer, ytd-clarification-renderer.ytd-item-section-renderer, ytd-fact-check-renderer.ytd-item-section-renderer, ytd-info-panel-container-renderer.ytd-item-section-renderer {
margin-top: 15px;
}
html[dark] #secondary-inner.ytd-watch-flexy #related {
padding-top: 0px;
}
ytd-badge-supported-renderer {
display: none; /* either this or move badges beside view count */
}
#show-more-related { /* fix show more button spacing and height */
padding-top: 11px;
padding-bottom: 8px;
}
as you can tell I can get pretty obsessive even over a single pixel xd
and a tweak for "show replies" button in comments to rearrange it and change the text from "view n replies" to "view all n replies"
.ytd-comment-replies-renderer #button.ytd-button-renderer #text.ytd-button-renderer span:first-child::after {
content: "all ";
}
.ytd-comment-replies-renderer #button.ytd-button-renderer yt-icon.ytd-button-renderer+yt-formatted-string.ytd-button-renderer {
order: 0;
margin-left: 0px;
font-family: "Arial", sans-serif;
font-size: 14px;
}
.ytd-comment-replies-renderer ytd-button-renderer[is-paper-button] yt-icon.ytd-button-renderer {
order: 1;
margin-left: 2px;
}
.ytd-comment-replies-renderer #button {
--yt-button-padding: 0px 0 8px 0;
}
/* player button size css patches */
.ytp-chrome-controls .ytp-button[aria-pressed=true]:after { width: 20px; left: 8px; }
.ytp-chrome-controls .ytp-button[aria-pressed]:after { bottom: 5px; }
.ytp-big-mode .ytp-chrome-bottom { height: 54px; padding-top: 4px; }
.ytp-big-mode .ytp-progress-bar-container { bottom: 52.5px; height: 8px; }
.ytp-big-mode .ytp-chrome-controls { height: 54px; line-height: 54px; }
.ytp-big-mode .ytp-time-display { line-height: 53px; }
.ytp-big-mode .ytp-chrome-top .ytp-button, .ytp-big-mode .ytp-chrome-controls .ytp-button { width: 54px; }
.ytp-big-mode .ytp-chrome-controls .ytp-play-button { width: 69px; }
.ytp-chrome-bottom { height: 36px; }
.ytp-progress-bar-container { bottom: 35px; height: 5px; }
.ytp-chrome-controls { height: 36px; line-height: 36px; }
.ytp-small-mode .ytp-time-display, .ytp-time-display { line-height: 36px; }
.ytp-chrome-top .ytp-button, .ytp-chrome-controls .ytp-button, .ytp-replay-button { opacity: .9; width: 36px; padding: 0px; }
.ytp-chrome-controls .ytp-button.ytp-mute-button { padding: 3.1px; }
.ytp-chrome-controls .ytp-play-button { width: 46px; }
.ytp-chrome-controls .ytp-button { height: 100%; }
.ytp-chapter-title.ytp-button, .ytp-big-mode .ytp-chapter-title.ytp-button, .ytp-small-mode .ytp-chrome-controls .ytp-chapter-title.ytp-button, .ytp-embed-mobile-exp .ytp-chrome-controls .ytp-chapter-title.ytp-button { width: 100%; display: -webkit-box; display: -webkit-flex; display: -moz-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -moz-box-align: center; -ms-flex-align: center; align-items: center; }
/* youtube redux css patches */
ytd-expander#expander { overflow: hidden; }
span.ytd-video-owner-renderer { line-height: 24px; height: 22px; padding: 0 6px; font-size: 11px; text-align: center; }
yt-formatted-string.style-scope.ytd-channel-name::before { content: "by "; }
.style-scope.ytd-search .style-scope.ytd-channel-name::before { color: var(--yt-endpoint-color,var(--yt-spec-text-primary)); }
.ytd-video-secondary-info-renderer yt-formatted-string.style-scope.ytd-channel-name::before, .channel-link yt-formatted-string.style-scope.ytd-channel-name::before, .ytd-author-comment-badge-renderer yt-formatted-string.style-scope.ytd-channel-name::before, .ytd-c4-tabbed-header-renderer yt-formatted-string.style-scope.ytd-channel-name::before { content: ""; }
#container.ytd-masthead { height: 49px; }
ytd-watch-flexy:not([theater]):not([fullscreen]) #primary.ytd-watch-flexy, ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary.ytd-watch-flexy { padding-top: 4px !important; }
#guide-spacer.ytd-app { margin-top: 50px; }
ytd-feed-filter-chip-bar-renderer { margin-left: 0px; }
#chips-wrapper.ytd-feed-filter-chip-bar-renderer { width: var(--ytd-rich-grid-chips-bar-width); }
ytd-menu-renderer ytd-menu-renderer .ytd-menu-renderer[style-target=button], .ytd-menu-renderer[style-target=button], ytd-button-renderer[is-icon-button][style-action-button] { vertical-align: top; }
ytd-video-primary-info-renderer:after { --yt-icon-button-icon-width: 24px; --yt-icon-button-icon-height: 24px; width: var(--yt-icon-width); height: 32px; content: "";
display: inline-block;
box-sizing: border-box;
font-size: 0;
}
#button.dropdown-trigger { height: 36px; }
yt-formatted-string.style-scope.ytd-toggle-button-renderer.style-text, yt-formatted-string.style-scope.ytd-toggle-button-renderer.style-default-active { font-weight: 500; font-size: 11px; text-decoration: none; white-space: nowrap; word-wrap: normal; line-height: normal; vertical-align: middle; }
ytd-video-primary-info-renderer { padding: 15px; padding-bottom: 5px; position: relative; }
#info.ytd-watch-flexy { min-height: 150px; }
.redux-moved-info:last-of-type + yt-icon-button { transform: translateY(-2px); } yt-formatted-string.style-scope.ytd-subscribe-button-renderer { font-weight: normal; font-size: 100%; }
/* small thumbnails */ ytd-compact-video-renderer:not([watch-feed-big-thumbs]) ytd-thumbnail.ytd-compact-video-renderer, ytd-compact-radio-renderer:not([watch-feed-big-thumbs]) ytd-thumbnail.ytd-compact-radio-renderer, ytd-compact-playlist-renderer:not([watch-feed-big-thumbs]) ytd-playlist-thumbnail.ytd-compact-playlist-renderer, ytd-compact-movie-renderer:not([watch-feed-big-thumbs]) ytd-thumbnail.ytd-compact-movie-renderer { height: 67px; width: 120px; }
ytd-playlist-renderer[is-search] ytd-playlist-thumbnail.ytd-playlist-renderer, #avatar-section.ytd-channel-renderer { max-width: 246px; }
ytd-button-renderer.ytd-item-section-renderer, ytd-compact-radio-renderer.ytd-item-section-renderer, ytd-compact-video-renderer.ytd-item-section-renderer, ytd-compact-movie-renderer.ytd-item-section-renderer, ytd-compact-playlist-renderer.ytd-item-section-renderer, ytd-emergency-onebox-renderer.ytd-item-section-renderer, ytd-feed-nudge-renderer.ytd-item-section-renderer, ytd-movie-renderer.ytd-item-section-renderer, ytd-playlist-renderer.ytd-item-section-renderer, ytd-show-renderer.ytd-item-section-renderer, ytd-radio-renderer.ytd-item-section-renderer, yt-search-no-results-renderer.ytd-item-section-renderer, ytd-video-renderer.ytd-item-section-renderer, ytd-channel-renderer.ytd-item-section-renderer, ytd-promoted-sparkles-text-search-renderer.ytd-item-section-renderer, ytd-web-answer-renderer.ytd-item-section-renderer, ytd-clarification-renderer.ytd-item-section-renderer, ytd-fact-check-renderer.ytd-item-section-renderer, ytd-info-panel-container-renderer.ytd-item-section-renderer { margin-top: 15px; }
#secondary-inner.ytd-watch-flexy #related, #secondary-inner.ytd-watch-flexy #playlist + #related:not(#secondary-inner.ytd-watch-flexy #playlist[hidden="true"] + #related) { padding-top: 0px; }
ytd-badge-supported-renderer { display: none; /* either this or move badges beside view count */ }
#show-more-related { padding-top: 11px; padding-bottom: 8px; }
#related { margin-bottom: 32px; }
#commentbox #creation-box, #placeholder-area.ytd-comment-simplebox-renderer { min-height: 32px; }
#action-buttons.ytd-comment-renderer { margin-top: -2px; }
#more-replies, #less-replies { margin-top: 2px; margin-bottom: 0px; }
.ytd-comment-thread-renderer { margin-bottom: -16px; margin-top: 8px; }
.ytp-chrome-top .ytp-cards-button { margin-top: 7px; }
ytd-comments-header-renderer { margin-top: 12px; margin-bottom: 12px; }
#title.ytd-comments-header-renderer { margin-bottom: 12px; }
#meta.ytd-watch-flexy tp-yt-paper-button#more { margin-top: 0px; }
ytd-video-secondary-info-renderer { padding-bottom: 4px !important; }
#show-more-related { padding-bottom: 0px; }
.style-scope.ytd-comment-replies-renderer #commentbox #creation-box::before { top: -4px; }
#count.ytd-comments-header-renderer yt-formatted-string span:last-child::after { content: '('; margin: 0 5px; margin-right: 0px; }
#count.ytd-comments-header-renderer yt-formatted-string span:last-child::before { content: ' All'; margin: 0 0; }
#count.ytd-comments-header-renderer yt-formatted-string span:first-child::after { content: ')'; }
.ytp-spinner { transform: scale(0.5) translateZ(0); }
#logo.ytd-topbar-logo-renderer, ytd-yoodle-renderer.ytd-topbar-logo-renderer { margin-top: 0px; }
#author-comment-badge.ytd-comment-renderer, #sponsor-comment-badge.ytd-comment-renderer, #header.ytd-comment-renderer { margin-top: -2px; margin-bottom: 0px; }
#pinned-comment-badge.ytd-comment-renderer { margin-bottom: 0px; }
.ytd-comment-renderer #text.ytd-channel-name { font-size: var(--ytd-channel-name-text-font-size); }
.ytd-comment-renderer[creator] { background-color: #0465f1; color: #fff; }
ytd-author-comment-badge-renderer[creator] { height: 16px; border-radius: 0px; margin-bottom: 0px; padding-right: 2px; padding-left: 2px; }
#content-text.ytd-comment-renderer { font-size: 14px; }
.bold.yt-formatted-string { font-weight: bold; }
#content-text.ytd-comment-renderer { line-height: 16px !important; }
#author-thumbnail.ytd-comment-renderer yt-img-shadow.ytd-comment-renderer { margin-right: 12px; }
ytd-comment-replies-renderer.ytd-comment-thread-renderer { margin-left: 52px; }
.ytd-comment-replies-renderer #button.ytd-button-renderer #text.ytd-button-renderer span:first-child::after { content: "all "; }
.ytd-comment-replies-renderer #button.ytd-button-renderer yt-icon.ytd-button-renderer+yt-formatted-string.ytd-button-renderer { order: 0; margin-left: 0px; font-size: 14px; }
.ytd-comment-replies-renderer ytd-button-renderer[is-paper-button] yt-icon.ytd-button-renderer { order: 1; margin-left: 2px; }
.ytd-comment-replies-renderer #button { --yt-button-padding: 0px 0 8px 0; }
/* set font family for everything */
- { font-family: Arial, Helvetica, sans-serif; }
#playlist { padding-left: 12px; }
#upload-info.ytd-video-owner-renderer { margin-top: -4px; }
#search-form.ytd-searchbox, #search-icon-legacy.ytd-searchbox { height: 29px; }
#search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox { width: 18px; height: 18px; margin-top: -1px; margin-left: -2px; }
#country-code.ytd-topbar-logo-renderer { margin-top: 17px; }
#container.ytd-searchbox { margin-left: -10px; }
ytd-searchbox.ytd-masthead { margin-right: 29px; }
[dark] #search-icon-legacy.ytd-searchbox { border-color: #404040; }
#search-icon-legacy.ytd-searchbox { border-color: #d3d3d3; border-left: 0; -moz-border-radius-topleft: 0; border-top-left-radius: 0; -moz-border-radius-bottomleft: 0; border-bottom-left-radius: 0; width: 66px; }
#search-icon.ytd-searchbox { display: none; width: 0px; }
ytd-searchbox[has-focus] #container.ytd-searchbox { margin-left: -10px !important; padding: 2px 6px; }
ytd-video-renderer[is-search] ytd-thumbnail.ytd-video-renderer { height: 137px; }
#top-row.ytd-video-secondary-info-renderer { margin-bottom: 12px; padding-top: 16px; }
#primary.ytd-watch-flexy { padding-left: 0px; margin-left: 0px; }
#primary.ytd-watch-flexy > #primary-inner { padding-left: 0px; }
ytd-watch-flexy[flexy] #secondary.ytd-watch-flexy { padding-right: 0px; margin-right: 0px; }
.title.ytd-video-primary-info-renderer, .title.style-scope.ytd-video-primary-info-renderer yt-formatted-string.ytd-video-primary-info-renderer { font-size: 20px; font-weight: 100; font-family: Arial, Helvetica, sans-serif; line-height: normal; word-wrap: break-word; }
#top-row.ytd-video-secondary-info-renderer { margin-bottom: 10px; padding-top: 10px; }
.redux-moved-info:last-of-type + yt-icon-button { transform: none; }
body { word-wrap: break-word; margin: 0; padding: 0; font: 12px Arial, Helvetica, sans-serif; }
#info.ytd-video-primary-info-renderer > #menu-container { transform: translateY(42px) !important; }
#avatar.ytd-video-owner-renderer { margin-right: 12px; }
.ytd-video-owner-renderer #text.ytd-channel-name { display: inline-block; height: 22px; color: #333; font-weight: 500; max-width: 315px; overflow: hidden; text-overflow: ellipsis; vertical-align: top; font-size: 13px; }
.redux-moved-info:first-of-type yt-icon-button#button { margin-left: -8px; padding-left: 0px; padding-right: 0px; }
ytd-watch-flexy[flexy][is-two-columns_] #columns.ytd-watch-flexy { max-width: 1066px; min-width: 1003px; width: auto; }
@media screen and (min-width: 1294px) and (min-height: 630px) { ytd-watch-flexy[flexy][is-two-columns_] #columns.ytd-watch-flexy { max-width: 1280px !important; } }
#items.ytd-watch-next-secondary-results-renderer { padding-right: 15px; }
oh and be aware that I've left a global font patch in there that sets the font to Arial on the whole site
you can change it to use Roboto, YouTube Noto or anything else
and regarding the smaller icons in related videos, you can make toggling between the earlier smaller size, and the later larger size an option