YouTubeRedux icon indicating copy to clipboard operation
YouTubeRedux copied to clipboard

some patches for CSS

Open TorutheRedFox opened this issue 3 years ago • 11 comments

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 }

TorutheRedFox avatar Jul 15 '22 15:07 TorutheRedFox

Thanks for that! I'll try to have a look at it soon.

omnidevZero avatar Jul 15 '22 20:07 omnidevZero

made a quick revision to bring the player controls spacing back to what it was in 2017

(see above)

TorutheRedFox avatar Jul 16 '22 09:07 TorutheRedFox

updated original comment with these fixes, and fixes to the subscriber count text

TorutheRedFox avatar Jul 16 '22 09:07 TorutheRedFox

updated original comment with further patches

TorutheRedFox avatar Jul 16 '22 10:07 TorutheRedFox

the tooltip height in the player may need adjusting but idk how to do override that without breaking anything lol

TorutheRedFox avatar Jul 17 '22 19:07 TorutheRedFox

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; 
}

TorutheRedFox avatar Jul 17 '22 20:07 TorutheRedFox

as you can tell I can get pretty obsessive even over a single pixel xd

TorutheRedFox avatar Jul 17 '22 20:07 TorutheRedFox

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;
}
 

TorutheRedFox avatar Jul 20 '22 14:07 TorutheRedFox

/* 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; }

TorutheRedFox avatar Jul 20 '22 18:07 TorutheRedFox

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

TorutheRedFox avatar Jul 20 '22 18:07 TorutheRedFox

and regarding the smaller icons in related videos, you can make toggling between the earlier smaller size, and the later larger size an option

TorutheRedFox avatar Jul 20 '22 19:07 TorutheRedFox