Around October 26th 2022 youtube released a new UI update, with lots of round buttons, bad features, etc... This user CSS undoes most of that.
Undo Bad Youtube UI Update by bowserinator
Details
Authorbowserinator
LicenseMIT
Categoryyoutube.com
Created
Updated
Size24 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Undo Bad Youtube UI Update
Around October 26th 2022 youtube released a new UI update, with lots of round buttons, bad features, etc...
This user CSS undoes most of that (and has some "enhancements" of my own, you can look for them in the CSS and disable them if you don't like them). There are also a few settings you can adjust.
Note: if you see 2 description boxes enable the bug fix in the settings, I have no idea what other extension or youtube feature causes this
Features (v1.1.1)
- Fix view and date location for new youtube UI
- Remove stack effect from generated playlists
- Unswap the position of "Video Speed" and "Captions"
Features (v1.0.0)
- Restore the old style for playlist titles, video thumbnail titles, channel names, etc...
- Move video buttons to top again, remove names for more a compact interface (optional) (that can fit all buttons including Add to Playlist)
- Remove the ugly new description box styles and move date added to top
- Red subscribe buttons
- Make the new playlist page slightly more bearable
- (Adjustable) Border radius on most things, unrounded UI as was before
- (Optional) Denser grid on homepage and channels, on a 1080p screen can now fit 5 thumbnails instead of 4
- (Optional) Red/green styling for "Return Youtube Dislikes" ratio bar
- (Optional) Always show titles in video end card grid
Bug
Found a bug? Want to request a feature? Open an issue at https://github.com/Bowserinator/hellomouse-youtube-style/issues
License
Licensed under the MIT License
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Undo Bad Youtube UI Update
@namespace github.com/openstyles/stylus
@version 1.1.3
@description Restore youtube style to mostly what it was before the October 2022 update
@author Bowserinator
@preprocessor less
@var checkbox DislikeRatioColors "Red/green coloring for 'Return Youtube Dislike's' dislike ratio bar" 1
@var checkbox DenseGrid "Smaller thumbnails and more items on homepage / channel video grid" 1
@var checkbox AlwaysShowEndCardTitle "Always show titles (without needing to hover) in the video end grid" 1
@var checkbox RemoveButtonLabel "Remove labels on buttons below video" 1
@var checkbox LargerThumbnails "Enable for larger thumbnails (for smaller screens)" 0
@var checkbox DescBugFix "Enable if you see 2 description boxes" 0
@var number ButtonBorderRadius "Border radius for buttons (px)" [2, 0, 32, 'px']
@var number ChipBorderRadius "Border radius for chips and bubbles (px)" [4, 0, 32, 1, 'px']
@var number NormalBorderRadius "Border radius for most things (px)" [0, 0, 32, 1, 'px']
==/UserStyle== */
@-moz-document url-prefix("https://www.youtube.com/") {
/* Better descriptions and titles */
/*
* Denser grid
* Decreases padding for home page thumbnails as well as
* show more thumbnails per row, may have slight visual bugs
* when thumbnails are loading
*/
& when (@DenseGrid = 1) {
#contents.ytd-rich-grid-renderer {
margin: 10px;
--ytd-rich-grid-item-margin: 10px !important;
}
ytd-rich-item-renderer {
margin-bottom: 20px !important;
}
#contents > ytd-rich-grid-row,
#contents > ytd-rich-grid-row > #contents {
display: contents;
}
}
/* Regular small thumbnails */
& when (@LargerThumbnails = 0) {
/* Playlist thumbnails smaller */
ytd-playlist-video-renderer[amsterdam-post-mvp] ytd-thumbnail.ytd-playlist-video-renderer {
width: 130px !important;
height: 76px !important;
}
/*
* Denser grid
* Decreases padding for home page thumbnails as well as
* show more thumbnails per row, may have slight visual bugs
* when thumbnails are loading
*/
& when (@DenseGrid = 1) {
@media (min-width: 1100px) and (max-width: 2100px) {
#contents.ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 5 !important;
}
}
@media (min-width: 800px) and (max-width: 1100px) {
#contents.ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 4 !important;
}
}
@media (min-width: 2100px) {
#contents.ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 6 !important;
}
}
}
}
/* For smaller screens / people who like larger thumbnails */
& when (@LargerThumbnails = 1) {
/*
* Denser grid
* Decreases padding for home page thumbnails as well as
* show more thumbnails per row, may have slight visual bugs
* when thumbnails are loading
*/
& when (@DenseGrid = 1) {
@media (min-width: 1300px) and (max-width: 2100px) {
#contents.ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 4 !important;
}
}
@media (min-width: 800px) and (max-width: 1300px) {
#contents.ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 3 !important;
}
}
@media (min-width: 2100px) {
#contents.ytd-rich-grid-renderer {
--ytd-rich-grid-items-per-row: 5 !important;
}
}
}
}
/* Unswap playback speed and subtitles */
.ytp-popup.ytp-settings-menu .ytp-panel-menu > .ytp-menuitem:nth-child(3):nth-last-child(3),
.ytp-popup.ytp-settings-menu .ytp-panel-menu > .ytp-menuitem:nth-child(2):nth-last-child(3) { /* Subtitles, move down */
position: relative;
top: 40.19px;
}
.ytp-popup.ytp-settings-menu .ytp-panel-menu > .ytp-menuitem:nth-child(4):nth-last-child(2),
.ytp-popup.ytp-settings-menu .ytp-panel-menu > .ytp-menuitem:nth-child(3):nth-last-child(2) { /* Playback, move down */
position: relative;
top: -40.19px;
}
/* Restore old playlist title style */
ytd-playlist-panel-renderer[modern-panels]:not([hide-header-text]) .title.ytd-playlist-panel-renderer,
ytd-engagement-panel-title-header-renderer[modern-panels] #title-text.ytd-engagement-panel-title-header-renderer {
font-family: "Roboto","Arial",sans-serif !important;
font-size: 1.4rem !important;
line-height: 2rem !important;
font-weight: 500 !important;
}
/* Restore video title style */
h1.ytd-watch-metadata {
font-family: "Roboto","Arial",sans-serif !important;
font-size: 1.8rem !important;
line-height: 2.6rem !important;
font-weight: 400 !important;
max-height: 5.2rem !important;
}
/* Hide shop */
ytd-merch-shelf-item-renderer.ytd-merch-shelf-renderer { display: none !important; }
/* Consistent video left width */
@media (min-width: 1100px) {
#primary.ytd-watch-flexy {
max-width: calc(100% - 600px) !important;
}
}
/* Remove shorts shelf */
.style-scope.ytd-rich-section-renderer[is-shorts] {
display: none!important;
}
/* Move video buttons to top */
#top-row.ytd-watch-metadata {
flex-direction: column-reverse !important;
margin-top: -4px !important;
}
/* Align description box */
ytd-text-inline-expander {
margin-left: 50px !important;
max-width: 615px !important;
}
/* Comment smaller */
ytd-comments {
max-width: 815px !important;
}
/* All links are blue */
a.yt-simple-endpoint.yt-formatted-string {
color: var(--yt-spec-call-to-action);
}
/* Remove top margin from desc */
#description-inner.ytd-watch-metadata {
margin-top: 0 !important;
}
/* Move Info box */
#info-container.ytd-watch-info-text {
position: absolute !important;
top: -104px !important;
left: -2px;
font-size: 1.4rem !important;
line-height: 2rem !important;
color: var(--yt-spec-text-secondary) !important;
& .bold.yt-formatted-string { font-weight: 400 !important; }
}
#info-container.ytd-watch-metadata {
position: absolute !important;
visibility: visible !important;
& when (@DescBugFix = 1) { top: -74px !important; }
& when (@DescBugFix = 0) { top: -120px !important; }
left: 0 !important;
font-size: 1.4rem !important;
line-height: 2rem !important;
font-weight: 400 !important;
color: var(--yt-spec-text-secondary) !important;
display: block !important;
max-width: calc(100% - 400px);
-webkit-mask-image: none !important;
}
ytd-metadata-row-container-renderer.ytd-watch-metadata {
max-width: calc(100% - 300px) !important;
margin-left: 52px !important;
}
/* Proper margin for buttons so view count is height offset correctly */
ytd-watch-metadata #actions {
margin-top: 12px;
}
ytd-watch-metadata.ytd-watch-flexy {
margin-bottom: 0px !important;
}
#info-container.ytd-watch-metadata span.bold.style-scope.yt-formatted-string {
font-weight: 400 !important;
}
/* Remove description flash when expanding */
yt-interaction {
display: none !important;
}
/* Remove description background color */
#description.ytd-watch-metadata {
background-color: transparent !important;
}
/* Show more button always on new row and blue */
#expand.ytd-text-inline-expander {
/* Original was all title case and faded gray */
position: relative !important;
left: 0 !important;
}
/* Show more and less */
.button.ytd-text-inline-expander,
#expand.ytd-text-inline-expander {
text-transform: uppercase !important;
font-weight: normal !important;
color: var(--yt-spec-text-secondary) !important;
font-size: 1.2rem !important;
margin-top: 8px !important;
}
/* Dislike ratio bar placement (Return youtube dislike) */
.ryd-tooltip {
left: 0px !important;
top: 35px !important;
}
& when (@DislikeRatioColors = 1) {
/* Red green coloring */
#ryd-bar {
background: #81c784 !important;
}
#ryd-bar-container {
background: #ef5350 !important;
}
}
/* Increase gap between video and title as was before */
ytd-watch-metadata.ytd-watch-flexy {
margin-top: 20px !important;
}
/* Hide weird extra content in new update in desc */
div[slot="extra-content"].ytd-watch-metadata {
display: none;
}
/* Buttons and UI fixes */
/* Subscribe button */
#owner.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
#owner.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
yt-button-shape.ytd-subscribe-button-renderer > .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
yt-button-shape.ytd-subscribe-button-renderer > .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal,
#subscribe-button .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,
#subscribe-button .yt-spec-button-shape-next--mono.yt-spec-button-sha...