The new YouTube design is GOD AWFUL

Thanks for the GitHub link, the extension works and by setting the page zoom to 90-100% in Chrome (I am running a large 4k screen) and ‘Extra Large’ text the video thumbnails are now the right size again too!

Shame that I have no solution on iPad - my fault for buying into Apple’s ecosystem.

They’re literally stylesheets that work in Stylus on Firefox. I double checked by copying the stylesheets manually into Stylus and it worked. (though remember to restrict it to the specific domains)

One thing I noticed today was if I look up all the videos on a channel’s videos page, the thumbnails are large. They used to be small and would show a lot of them(20+?), but now there’s like 4-6 and the usefulness of the page dropped significantly.

2 Likes

Yeah, they removed all the “sort by” features on the videos tab. So when people like Markiplier say to go to the oldest video on their channel, you can’t get there anymore.

1 Like

JSON port of the Github for Stylus for Firefox: (Includes ALL settings, beware)

[
  {
    "settings": {
      "openEditInWindow": false,
      "openEditInWindow.popup": false,
      "windowPosition": {},
      "show-badge": true,
      "disableAll": false,
      "exposeIframes": false,
      "exposeStyleName": false,
      "newStyleAsUsercss": false,
      "styleViaXhr": false,
      "patchCsp": false,
      "config.autosave": true,
      "schemeSwitcher.enabled": "system",
      "schemeSwitcher.nightStart": "18:00",
      "schemeSwitcher.nightEnd": "06:00",
      "popup.breadcrumbs": true,
      "popup.breadcrumbs.usePath": false,
      "popup.enabledFirst": true,
      "popup.stylesFirst": true,
      "popup.autoResort": false,
      "popup.borders": false,
      "popup.findSort": "u",
      "manage.onlyEnabled": false,
      "manage.onlyLocal": false,
      "manage.onlyUsercss": false,
      "manage.onlyEnabled.invert": false,
      "manage.onlyLocal.invert": false,
      "manage.onlyUsercss.invert": false,
      "manage.actions.expanded": true,
      "manage.backup.expanded": true,
      "manage.filters.expanded": true,
      "manage.newUI": true,
      "manage.newUI.favicons": false,
      "manage.newUI.faviconsGray": true,
      "manage.newUI.targets": 3,
      "manage.newUI.sort": "title,asc",
      "editor.options": {},
      "editor.toc.expanded": true,
      "editor.options.expanded": true,
      "editor.lint.expanded": true,
      "editor.publish.expanded": true,
      "editor.lineWrapping": true,
      "editor.smartIndent": true,
      "editor.indentWithTabs": false,
      "editor.tabSize": 4,
      "editor.keyMap": "default",
      "editor.theme": "default",
      "editor.beautify": {
        "selector_separator_newline": true,
        "newline_before_open_brace": false,
        "newline_after_open_brace": true,
        "newline_between_properties": true,
        "newline_before_close_brace": true,
        "newline_between_rules": false,
        "preserve_newlines": true,
        "end_with_newline": false,
        "indent_conditional": true,
        "indent_mozdoc": true
      },
      "editor.beautify.hotkey": "",
      "editor.lintDelay": 300,
      "editor.linter": "csslint",
      "editor.lintReportDelay": 500,
      "editor.matchHighlight": "token",
      "editor.autoCloseBrackets": true,
      "editor.autocompleteOnTyping": false,
      "editor.contextDelete": false,
      "editor.selectByTokens": true,
      "editor.appliesToLineWidget": true,
      "editor.autosaveDraft": 10,
      "editor.livePreview": true,
      "editor.colorpicker": true,
      "editor.colorpicker.hexUppercase": false,
      "editor.colorpicker.hotkey": "",
      "editor.colorpicker.color": "",
      "editor.colorpicker.maxHeight": 300,
      "hotkey._execute_browser_action": "",
      "hotkey.openManage": "",
      "hotkey.styleDisableAll": "",
      "sync.enabled": "none",
      "iconset": -1,
      "badgeDisabled": "#8B0000",
      "badgeNormal": "#006666",
      "headerWidth.edit": 280,
      "headerWidth.install": 280,
      "headerWidth.manage": 280,
      "popupWidth": 246,
      "updateInterval": 24
    },
    "order": {
      "main": [],
      "prio": []
    }
  },
  {
    "enabled": true,
    "updateUrl": "https://github.com/Bowserinator/hellomouse-youtube-style/raw/master/css/desc.css",
    "installDate": 1666923401637,
    "name": "desc",
    "sections": [
      {
        "code": "/* Better descriptions and titles */\n\n/* Restore old playlist title style */\nytd-playlist-panel-renderer[modern-panels]:not([hide-header-text]) .title.ytd-playlist-panel-renderer {\n    font-family: \"Roboto\",\"Arial\",sans-serif !important;\n    font-size: 1.4rem !important;\n    line-height: 2rem !important;\n    font-weight: 500 !important;\n}\n\n/* Restore video title style */\nh1.ytd-watch-metadata {\n    font-family: \"Roboto\",\"Arial\",sans-serif !important;\n    font-size: 1.8rem !important;\n    line-height: 2.6rem !important;\n    font-weight: 400 !important;\n    max-height: 5.2rem !important;\n}\n\n/* Move video buttons to top */\n#top-row.ytd-watch-metadata {\n    flex-direction: column-reverse !important;\n}\n\n/* Move Info box */\n#info-container.ytd-watch-metadata {\n    position: absolute !important;\n    top: -115px !important;\n    left: 0 !important;\n    font-size: 1.4rem !important;\n    line-height: 2rem !important;\n    font-weight: 400 !important;\n    color: var(--yt-spec-text-secondary) !important;\n    display: block !important;\n    max-width: calc(100% - 400px);\n    -webkit-mask-image: none !important;\n}\n\n#info-container.ytd-watch-metadata span.bold.style-scope.yt-formatted-string {\n    font-weight: 400 !important;\n}\n\n/* Remove description flash when expanding */\nyt-interaction {\n    display: none !important;\n}\n\n/* Remove description background color */\nytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata {\n    background-color: transparent !important;\n}\n\n/* Show more button always on new row and blue */\n#expand.ytd-text-inline-expander {\n    /* Original was all title case and faded gray */\n    position: relative !important;\n    left: 0 !important;\n}\n\n/* Show more and less */\n.button.ytd-text-inline-expander,\n#expand.ytd-text-inline-expander {\n    text-transform: uppercase !important;\n    font-weight: normal !important;\n    color: var(--yt-spec-text-secondary) !important;\n    font-size: 1.2rem !important;\n    margin-top: 8px !important;\n}\n\n/* Dislike ratio bar placement (Return youtube dislike) */\n.ryd-tooltip {\n    left: calc(100% - 365px) !important;\n    top: 4px !important;\n}\n/* Red green coloring */\n#ryd-bar {\n    background: #81c784 !important;\n}\n#ryd-bar-container {\n    background: #ef5350 !important;\n}\n\n/* Increase gap between video and title as was before */\nytd-watch-metadata.ytd-watch-flexy {\n    margin-top: 20px !important;\n}\n",
        "domains": [
          "youtube.com",
          "youtube-nocookie.com"
        ]
      }
    ],
    "updateDate": 1667390619920,
    "_id": "eaf9d24e-0465-4f86-ac94-e0dd8f47f66e",
    "_rev": 1667391192414,
    "id": 1
  },
  {
    "enabled": true,
    "updateUrl": "https://github.com/Bowserinator/hellomouse-youtube-style/raw/master/css/ui.css",
    "installDate": 1666923490531,
    "name": "ui",
    "sections": [
      {
        "code": "/* Buttons and UI fixes */\n\n/* Subscribe button */\n#owner.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--filled,\n#owner.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {\n    background-color: var(--yt-spec-brand-button-background) !important;\n    border-radius: 2px;\n    color: var(--yt-spec-static-brand-white) !important;\n    padding: var(--yt-button-padding) !important;\n    margin: auto var(--ytd-subscribe-button-margin,4px) !important;\n    font-size: var(--ytd-tab-system-font-size) !important;\n    font-weight: var(--ytd-tab-system-font-weight) !important;\n    letter-spacing: var(--ytd-tab-system-letter-spacing) !important;\n    text-transform: var(--ytd-tab-system-text-transform) !important;\n}\n\n/* Already subscribed button */\n#owner.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {\n    background-color: var(--yt-spec-badge-chip-background) !important;\n    color: var(--yt-spec-text-secondary) !important;\n}\n\n/* Move subscribe button to right */\n#owner.ytd-watch-metadata {\n    justify-content: space-between !important;\n}\n\n.item.ytd-watch-metadata {\n    margin-right: 0 !important;\n}\n\n/* Old username style */\n/*#text.ytd-channel-name {\n    color: rgb(255, 255, 255) !important;\n    font-family: Roboto, Arial, sans-serif !important;\n    font-size: 14px !important;\n    font-weight: 500 !important;\n    line-height: 20px !important;\n}*/\n\n/* Playlists page left side */\n.immersive-header-background-wrapper.ytd-playlist-header-renderer {\n    opacity: 0.2 !important;\n}\n\n/* Buttons no margin: */\n#flexible-item-buttons.ytd-menu-renderer:not(:empty)>.ytd-menu-renderer[button-renderer] {\n    margin-left: 0 !important;\n}\n\n/* Video buttons: no bg and border: */\nytd-watch-metadata[flex-menu-enabled] #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata .yt-spec-button-shape-next--size-m,\nytd-watch-metadata[flex-menu-enabled] #actions.ytd-watch-metadata ytd-menu-renderer.ytd-watch-metadata .yt-spec-button-shape-next--mono.yt-spec-button-shape-next--tonal {\n    border-radius: 2px !important;\n    background-color: transparent !important;\n}\n\n/* Video buttons: Remove labels for clip, share, and save */\n#actions.ytd-watch-metadata ytd-segmented-like-dislike-button-renderer .yt-spec-button-shape-next--button-text-content {\n    display: block !important;\n}\n#actions.ytd-watch-metadata ytd-segmented-like-dislike-button-renderer .yt-spec-button-shape-next__icon {\n    margin-right: 6px !important;\n    margin-left: -6px !important;\n}\n#actions.ytd-watch-metadata .yt-spec-button-shape-next--button-text-content {\n    display: none !important;\n}\n#actions.ytd-watch-metadata .yt-spec-button-shape-next__icon {\n    margin-right: 0 !important;\n    margin-left: 0 !important;\n}\n\n/* Thumbnail channel name */\n/*#text.ytd-channel-name {\n    color: var(--yt-spec-text-secondary) !important;\n    font-size: 12px !important;\n    font-weight: 400 !important;\n    line-height: 18px !important;\n}*/\n",
        "domains": [
          "youtube.com",
          "youtube-nocookie.com"
        ]
      }
    ],
    "updateDate": 1667390926606,
    "_id": "0cd6b392-af00-4c22-9c0c-d8626d4c059c",
    "_rev": 1667391172551,
    "id": 2,
    "updatable": false
  },
  {
    "enabled": true,
    "updateUrl": "https://github.com/Bowserinator/hellomouse-youtube-style/raw/master/css/unround.css",
    "installDate": 1666923573709,
    "name": "unround",
    "sections": [
      {
        "code": "/* Change border-radius for most elements: */\n\n:root {\n    --border-radius: 0px;\n    --yt-img-border-radius: var(--border-radius) !important;\n    --paper-menu-button-content-border-radius: var(--border-radius) !important;\n}\n\n/** Search button in nav, rounded on right */\nytd-searchbox[desktop-searchbar-style=rounded_corner_borders_light_btn] #search-icon-legacy.ytd-searchbox,\nytd-searchbox[desktop-searchbar-style=rounded_corner_autofocus] #search-icon-legacy.ytd-searchbox {\n    border-radius: 0 var(--border-radius) var(--border-radius) 0 !important;\n}\n\n/** Nav search input, rounded on left */\nytd-searchbox[desktop-searchbar-style=rounded_corner_borders_light_btn] #container.ytd-searchbox,\nytd-searchbox[desktop-searchbar-style=rounded_corner_autofocus] #container.ytd-searchbox {\n    border-radius: var(--border-radius) 0 0 var(--border-radius) !important;\n}\n\n/** Playlist container */\nytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer,\n\n/* Thumbnails */\nytd-thumbnail[size=medium] a.ytd-thumbnail, ytd-thumbnail[size=medium]:before,\nytd-thumbnail[size=large] a.ytd-thumbnail, ytd-thumbnail[size=large]:before,\nytd-playlist-thumbnail[size=medium] a.ytd-playlist-thumbnail,\nytd-playlist-thumbnail[size=medium]:before,\nytd-ghost-grid-renderer[rounded-container] .rich-thumbnail.ytd-ghost-grid-renderer,\n\n/* Selecting a playlist / channel on left */\nytd-guide-entry-renderer[guide-refresh],\nytd-mini-guide-entry-renderer[guide-refresh],\nytd-guide-entry-renderer[guide-refresh] yt-interaction.ytd-guide-entry-renderer,\nytd-guide-entry-renderer[guide-refresh] #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:hover,\nytd-guide-entry-renderer[guide-refresh] #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer:focus,\n\n/* Description */\nytd-watch-metadata[modern-metapanel] #description.ytd-watch-metadata,\nyt-interaction.rounded-large .fill.yt-interaction,\nyt-interaction.rounded-large .stroke.yt-interaction,\n\n/* Cards for games / category */\nytd-rich-metadata-renderer[rounded],\n\n/* Popups */\nytd-menu-popup-renderer[sheets-refresh],\n.ytp-settings-menu.ytp-rounded-menu,\n.ytp-screen-mode-menu.ytp-rounded-menu,\nytd-multi-page-menu-renderer[sheets-refresh],\n.dropdown-content.tp-yt-paper-menu-button,\nyt-dropdown-menu[rounded-container],\nyt-dropdown-menu[modern-dialogs] #menu.yt-dropdown-menu,\nytd-menu-popup-renderer[sheets-refresh],\n\n/* Playlist video */\nytd-playlist-video-renderer[amsterdam],\n\n/* Modal */\ntp-yt-paper-dialog[modern],\n\n/* Playlist page side */\n.immersive-header-container.ytd-playlist-header-renderer,\n.image-wrapper.ytd-hero-playlist-thumbnail-renderer,\n\n/* Search results */\n.sbdd_b,\n\n/* Thread posts */\nytd-backstage-post-thread-renderer[rounded-container],\n\n/* Live chat */\nytd-live-chat-frame[rounded-container],\nytd-live-chat-frame[rounded-container] #show-hide-button.ytd-live-chat-frame ytd-toggle-button-renderer.ytd-live-chat-frame,\n\n/* Buttons */\n.yt-spec-touch-feedback-shape,\n.yt-spec-button-shape-next--size-m,\n\n/* Clip panel */\nytd-engagement-panel-section-list-renderer[modern-panels],\n\n/* Share URL */\nyt-copy-link-renderer[rounded-container] #bar.yt-copy-link-renderer {\n    border-radius: var(--border-radius) !important;\n}\n\n/* Miniplayer */\n.ytp-player-minimized.ytp-rounded-miniplayer .html5-main-video,\n.ytp-player-minimized.ytp-rounded-miniplayer .ytp-miniplayer-scrim,\n.ytp-player-minimized.ytp-rounded-miniplayer.html5-video-player {\n    border-radius: 0 !important;\n}\n\n/* Channel video player */\n.ytd-channel-video-player-renderer {\n    border-radius: 0 !important;\n}\n\n/* Community poll */\nytd-backstage-poll-renderer:not([is-image-poll]) .choice-info.ytd-backstage-poll-renderer {\n    border-radius: 0 !important; /* Used to be 4px */\n}\n",
        "domains": [
          "youtube.com",
          "youtube-nocookie.com"
        ]
      }
    ],
    "updateDate": 1667563164996,
    "_id": "552b976f-f779-45c3-83ae-4b797d887de2",
    "_rev": 1667563179920,
    "id": 3,
    "updatable": false
  }
]

Sorry for going off tangent.

I’m here only to remind that there is an alternative FOSS YT frontend that might need your help if you can code, or at least report a bug:

Unfortunately chasing nsig failures (the decryption key for unthrottled connections) like cat and mouse has been the experience of using third party clients. Also third party clients fail within minutes of streaming a continuous livestream.

Newpipe has been fighting nsig failures, age gate failures, and livestream HLS URL failures that it became basically unusable for me.

Streamlink always fails to recover after a livestream URL failure.

The immediate effect of a nsig failure is you are throttled to 5KB/s.

Whatever they’ve done has broken NewPipe’s channel scraping, so NewPipe is currently barely usable.

1 Like

The new design is in my opinion one of the best they made in years, in dark mode it even features ambilight which is a great addition to youtube

I hate the new design.

I was recently searching the LTT YouTube channel for the latest WAN show and it does not show up anywhere.

I had to literally type it into the search bar at the top to find it.

Little did I know that long videos are on a separate tab and that’s where I could have found it but that is just BS.

If you’re going to separate long videos like that then give me the fucking option to remove all of the shorts content from my home recommendations.

Google loves to make something and gradually make it worse.

4 Likes

GitHub - TeamPiped/Piped: An alternative privacy-friendly YouTube frontend which is efficient by design. ? :wink:

1 Like

This is actually one of the things I dislike about the new update. It makes it look like there’s backlight bleed all over my monitor and it’s distracting. Much of the other stuff doesn’t really bother me but this one thing does. I actually started watching more videos in fullscreen just to get rid of this effect.

3 Likes

that’s the new ambient mode, i like that setting a lot but you just have to tap the gear icon and turn that setting off if that effect isn’t good for you :smiling_face:

Summary

Screenshot from 2022-11-04 21-03-53

4 Likes

Have some additional CSS to unround the channel trailer:

/* Channel video player */
.ytd-channel-video-player-renderer {
    border-radius: 0 !important;
}
2 Likes

Latest update of chrome leaves this static line. It seems like it lines up w the bottom edge of the YT drop menu. It remains there as I scroll down (menu disappears) through the feed. I thought it was a screen artifact drom a drop or something but its only there on my yt home page as I scroll not in any vids.
Fwiw

1 Like

Oh neat I tried it, but didn’t notice it on videos I watch

1 Like

There’s a new userCSS for Stylus that just got released:

1 Like

might be more for music or stuff like that but try it with dark mode and theatrical mode and you’ll see… its subtle and pretty

2 Likes

yuk, my UI for Youtube has rounded video previews.

Am I the only one who doesn’t like it?

I dislike rounded designs too.
Buttons and switches can be rounded for feel under fingers, but square is best!

1 Like