This userstyle disables YouTube's new rounded corners (this also works on browsers that did not support the JavaScript ES10 engine).
YouTube - Non-Rounded Design (CSS version) by magma_craft
Details
Authormagma_craft
LicenseCC Zero
Categoryyoutube
Created
Updated
Size77 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Note: This userstyle was formerly called 'CSS tweaks/fixes for non-rounded YouTube design' but it was replaced because the old version of NRD broke the action buttons functionally with RYD addon, so we've decided to rename it to just 'YouTube - Non-Rounded Design (CSS version)'.
Recommended scripts to install here after you install this style:
Fixes script (includes shorts redirect and explore tab) - https://pastebin.com/fL0KD0Av
Restore Username from Handle to Custom - https://greasyfork.org/en/scripts/468740
Fun fact: This script was NOT compatible with the 'Return YouTube Dislike' addon.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name YouTube - Non-Rounded Design (CSS version)
@version 2024.04.23
@namespace userstyles.world/user/magma_craft
@description This userstyle disables YouTube's new rounded corners (this also works on browsers that did not support the JavaScript ES10 engine).
@author magma_craft
@license CC Zero
==/UserStyle== */
@-moz-document domain("youtube.com") {
/* Revert old background color and buttons */
html[dark] { --yt-spec-general-background-a: #181818 !important; --yt-spec-general-background-b: #0f0f0f !important; --yt-spec-brand-background-primary: rgba(33, 33, 33, 0.98) !important; --yt-spec-10-percent-layer: rgba(255, 255, 255, 0.1) !important }
html:not([dark]) { --yt-spec-general-background-a: #f9f9f9 !important; --yt-spec-general-background-b: #f1f1f1 !important; --yt-spec-brand-background-primary: rgba(255, 255, 255, 0.98) !important; --yt-spec-10-percent-layer: rgba(0, 0, 0, 0.1) !important }
ytd-masthead { background: var(--yt-spec-brand-background-solid) !important }
ytd-app { background: var(--yt-spec-general-background-a) !important }
ytd-browse[page-subtype="channels"] { background: var(--yt-spec-general-background-b) !important }
ytd-c4-tabbed-header-renderer { --yt-lightsource-section1-color: var(--yt-spec-general-background-a) !important }
ytd-mini-guide-renderer, ytd-mini-guide-entry-renderer { background-color: var(--yt-spec-brand-background-solid) !important }
#cinematics.ytd-watch-flexy { display: none !important }
#tabs-divider.ytd-c4-tabbed-header-renderer { border-bottom: 0px !important }
#header.ytd-rich-grid-renderer { width: 100% !important }
[page-subtype="home"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer { background-color: var(--yt-spec-brand-background-primary) !important; border-top: 1px solid var(--yt-spec-10-percent-layer) !important; border-bottom: 1px solid var(--yt-spec-10-percent-layer) !important }
ytd-feed-filter-chip-bar-renderer[is-dark-theme] #left-arrow.ytd-feed-filter-chip-bar-renderer::after { background: linear-gradient(to right, var(--yt-spec-brand-background-primary) 20%, rgba(33, 33, 33, 0) 80%) !important }
ytd-feed-filter-chip-bar-renderer[is-dark-theme] #right-arrow.ytd-feed-filter-chip-bar-renderer::before { background: linear-gradient(to left, var(--yt-spec-brand-background-primary) 20%, rgba(33, 33, 33, 0) 80%) !important }
ytd-feed-filter-chip-bar-renderer #left-arrow-button.ytd-feed-filter-chip-bar-renderer, ytd-feed-filter-chip-bar-renderer #right-arrow-button.ytd-feed-filter-chip-bar-renderer { background-color: var(--yt-spec-brand-background-primary) !important }
yt-chip-cloud-renderer[is-dark-theme] #right-arrow.yt-chip-cloud-renderer::before { background: linear-gradient(to left, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(24, 24, 24, 0) 90%) !important }
yt-chip-cloud-renderer #left-arrow-button.yt-chip-cloud-renderer, yt-chip-cloud-renderer #right-arrow-button.yt-chip-cloud-renderer { background: var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) !important }
yt-chip-cloud-renderer[is-dark-theme] #left-arrow.yt-chip-cloud-renderer::after { background: linear-gradient(to right, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(24, 24, 24, 0) 90%) !important }
yt-chip-cloud-renderer #left-arrow.yt-chip-cloud-renderer::after { background: linear-gradient(to right, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(249, 249, 249, 0) 90%) !important }
yt-chip-cloud-renderer #right-arrow.yt-chip-cloud-renderer::before { background: linear-gradient(to left, var(--ytd-chip-cloud-background, var(--yt-spec-general-background-a)) 10%, rgba(249, 249, 249, 0) 90%) !important }
ytd-feed-filter-chip-bar-renderer[component-style="FEED_FILTER_CHIP_BAR_STYLE_TYPE_HASHTAG_LANDING_PAGE"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer, ytd-feed-filter-chip-bar-renderer[component-style="FEED_FILTER_CHIP_BAR_STYLE_TYPE_CHANNEL_PAGE_GRID"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer { background-color: var(--yt-spec-general-background-b) !important }
yt-chip-cloud-chip-renderer { height: 32px !important; border: 1px solid var(--yt-spec-10-percent-layer) !important; border-radius: 16px !important; box-sizing: border-box !important }
/* Remove rounded corners on buttons and boxes */
#container.ytd-searchbox { background-color: var(--ytd-searchbox-background) !important; border-radius: 2px 0 0 2px !important; box-shadow: inset 0 1px 2px var(--ytd-searchbox-legacy-border-shadow-color) !important; color: var(--ytd-searchbox-text-color) !important; padding: 2px 6px !important }
ytd-searchbox[desktop-searchbar-style="rounded_corner_dark_btn"] #searchbox-button.ytd-searchbox { display: none !important }
ytd-searchbox[desktop-searchbar-style="rounded_corner_light_btn"] #searchbox-button.ytd-searchbox { display: none !important }
#search[has-focus] #search-input { margin-left: 32px !important }
#search-icon-legacy.ytd-searchbox { display: block !important; border-radius: 0px 2px 2px 0px !important }
.sbsb_a { border-radius: 2px !important }
.sbsb_c { padding-left: 10px !important }
div.sbqs_c::before { margin-right: 10px !important }
ytd-searchbox[has-focus] #search-icon.ytd-searchbox { padding-left: 10px !important; padding-right: 10px !important }
#voice-search-button.ytd-masthead { background-color: var(--yt-spec-general-background-a) !important; margin-left: 4px !important }
#guide-content.ytd-app { background: var(--yt-spec-brand-background-solid) !important }
yt-interaction.ytd-guide-entry-renderer, ytd-guide-entry-renderer, ytd-guide-entry-renderer[guide-refresh], ytd-mini-guide-entry-renderer, ytd-guide-entry-renderer[active], .style-scope.ytd-guide-entry-renderer:hover, tp-yt-paper-item.style-scope.ytd-guide-entry-renderer { border-radius: 0px !important }
ytd-guide-entry-renderer[guide-refresh] { width: 100% !important }
ytd-mini-guide-renderer[guide-refresh] { padding: 0 !important }
a#endpoint.yt-simple-endpoint.style-scope.ytd-mini-guide-entry-renderer { margin: 0px !important }
tp-yt-paper-item.ytd-guide-entry-renderer { --paper-item-focused-before-border-radius: 0px !important }
ytd-guide-section-renderer.style-scope.ytd-guide-renderer { padding-left: 0px !important }
tp-yt-paper-item.style-scope.ytd-guide-entry-renderer { padding-left: 24px !important }
#guide-section-title.ytd-guide-section-renderer { color: var(--yt-spec-text-secondary) !important; padding: 8px 24px !important; font-size: var(--ytd-tab-system-font-size) !important; font-weight: var(--ytd-tab-system-font-weight) !important; letter-spacing: var(--ytd-tab-system-letter-spacing) !important; text-transform: var(--ytd-tab-system-text-transform) !important }
.style-scope.ytd-rich-item-renderer { border-radius: 2px !important }
.style-scope.ytd-item-section-renderer { border-radius: 0px !important }
#tooltip.tp-yt-paper-tooltip { border-radius: 2px !important }
div.style-scope.yt-tooltip-renderer { border-radius: 0px !important }
.style-scope.ytd-topic-link-renderer { border-radius: 2px !important }
.style-scope.yt-formatted-string, .bold.style-scope.yt-formatted-string { font-family: Roboto !important }
#bar { border-radius: 2px !important }
ytd-multi-page-menu-renderer { border-radius: 0px !important; border: 1px solid var(--yt-spec-10-percent-layer) !important; border-top: none !important; box-shadow: none !important }
yt-dropdown-menu { --paper-menu-button-content-border-radius: 2px !important }
ytd-menu-popup-renderer { border-radius: 2px !important }
.style-scope.ytd-shared-post-renderer, div#repost-context.style-scope.ytd-shared-post-renderer, ytd-post-renderer.style-scope.ytd-shared-post-renderer { border-radius: 0px !important }
div#dismissed.style-scope.ytd-compact-video-renderer { border-radius: 0px !important }
.style-scope.ytd-feed-nudge-renderer, .style-scope.ytd-inline-survey-renderer { border-radius: 2px !important }
.style-scope.ytd-brand-video-shelf-renderer, div#dismissible.style-scope.ytd-brand-video-singleton-renderer, #inline-survey-compact-video-renderer { border-radius: 0px !important }
tp-yt-paper-button#button.style-scope.ytd-button-renderer.style-inactive-outline.size-default { border-radius: 2px !important }
div#dismissed.style-scope.ytd-rich-grid-media { border-radius: 0px !important }
ytd-thumbnail[size="large"] a.ytd-thumbnail, ytd-thumbnail[size="large"]::before, ytd-thumbnail[size="medium"] a.ytd-thumbnail, ytd-thumbnail[size="medium"]::before { border-radius: 0 !important }
ytd-playlist-thumbnail[size="medium"] a.ytd-playlist-thumbnail, ytd-playlist-thumbnail[size="medium"]::before, ytd-playlist-thumbnail[size="large"] a.ytd-playlist-thumbnail, ytd-playlist-thumbnail[size="large"]::before { border-radius: 0 !important }
ytd-playlist-panel-renderer[modern-panels]:not([within-miniplayer]) #container.ytd-playlist-panel-renderer { border-radius: 0 !important }
ytd-thumbnail-overlay-toggle-button-renderer.style-scope.ytd-thumbnail { border-radius: 2px !important }
ytd-compact-link-renderer.ytd-settings-sidebar-renderer { margin: 0px !important; border-radius: 0 !important }
ytd-compact-link-renderer[compact-link-style=compact-link-style-type-settings-sidebar][active] { border-radius: 0 !important }
tp-yt-paper-item.style-scope.ytd-compact-link-renderer::before { border-radius: 0 !important }
ytd-compact-link-renderer[compact-link-style=compact-link-style-type-settings-sidebar] tp-yt-paper-item.ytd-compact-link-renderer { padding-left: 24px !important; padding-right: 24px !important }
img#img.style-scope.yt-image-shadow { border-radius: 50px !important }
#title.style-scope.ytd-feed-nudge-renderer { font-family: Roboto !important }
yt-chip-cloud-chip-renderer.style-scope.ytd-feed-nudge-renderer { border-radius: 50px !important }
div#label-container.style-scope.ytd-thumbnail-overlay-toggle-button-renderer { border: 2px !i...