YouTube - July 2022 experimental rounded search UI by magma_craft

/* ==UserStyle==
@name         YouTube - July 2022 experimental rounded search UI
@version      20240811.11.51
@namespace    ?
==/UserStyle== */

@-moz-document domain("youtube.com") {
#container.ytd-searchbox {
  box-shadow: none !important;
  border: none !important;
  background: var(--yt-spec-additive-background) !important;
  border-radius: 40px !important;
  color: var(--yt-spec-text-primary) !important;
  padding: 0px 4px 0px 16px !important;
  margin-right: -45px !important
}

ytd-searchbox[has-focus] #container.ytd-searchbox {
  margin-left: 0px !important;
  padding: 0px 4px 0px 50px !important;
  border: none !important;
  background: var(--yt-spec-raised-background) !important;
  box-shadow: 0px 4px 15px var(--yt-spec-shadow) !important;
  transition: box-shadow 0.4s cubic-bezier(0.05,0,0,1) 0.1s !important
}

ytd-searchbox[sbox-del-icon] #search-clear-button.ytd-searchbox {
  margin-right: 50px !important
}

button#button.style-scope.yt-icon-button[aria-label="Clear search query"] {
  margin-left: -64px !important
}

#search-clear-button.ytd-searchbox {
  padding-right: 64px !important
}

#search-icon-legacy.ytd-searchbox {
  border: none !important;
  background: none !important;
  color: var(--yt-spec-text-primary) !important;
  padding: 0 !important;
  margin-left: -20px !important;
  border-radius: 40px !important
}

#search[has-focus] #search-input {
  margin-left: 0px !important
}

ytd-searchbox[has-focus] #search-icon.ytd-searchbox {
  padding: 0 16px !important
}

.sbsb_a {
  border-radius: 40px !important
}

.sbsb_c {
  padding-left: 16px !important
}

div.sbqs_c::before {
  margin-right: 16px !important
}

#voice-search-button.ytd-masthead {
  border-radius: 100px !important;
  margin-left: 12px !important;
  background-color: var(--yt-spec-additive-background) !important
}

/* Enable darker-dark-theme on non-rounded UI style */
ytd-masthead {
  background: var(--yt-spec-base-background) !important
}
    
ytd-app {
  background: var(--yt-spec-base-background) !important
}

ytd-browse[page-subtype="channels"] {
  background: var(--yt-spec-base-background) !important
}

ytd-c4-tabbed-header-renderer {
  --yt-lightsource-section1-color: var(--yt-spec-base-background) !important
}

#page-header.ytd-tabbed-page-header, #tabs-inner-container.ytd-tabbed-page-header { background: var(--yt-spec-base-background) !important }

#tabs-divider.ytd-c4-tabbed-header-renderer,
#tabs-divider.ytd-tabbed-page-header {
  border-bottom: 1px !important
}

#guide-content.ytd-app {
  background: var(--yt-spec-base-background) !important
}

ytd-mini-guide-renderer {
  background-color: var(--yt-spec-base-background) !important
}

ytd-mini-guide-entry-renderer {
  background-color: var(--yt-spec-base-background) !important
}

[page-subtype="home"] #chips-wrapper.ytd-feed-filter-chip-bar-renderer {
  background-color: var(--yt-spec-base-background) !important;
  border-top: 0px !important;
  border-bottom: 0px !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-base-background) 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-base-background) 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-base-background) !important
}

yt-chip-cloud-renderer[is-dark-theme] #right-arrow.yt-chip-cloud-renderer::before {
  background: linear-gradient(to left,var(--yt-spec-base-background) 20%,rgba(33,33,33,0) 80%) !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-base-background)) !important
}

yt-chip-cloud-renderer[is-dark-theme] #left-arrow.yt-chip-cloud-renderer::after {
  background: linear-gradient(to right,var(--yt-spec-base-background) 20%,rgba(33,33,33,0) 80%) !important
}

yt-chip-cloud-renderer #left-arrow.yt-chip-cloud-renderer::after {
  background: linear-gradient(to right,var(--yt-spec-base-background) 20%,rgba(33,33,33,0) 80%) !important
}

yt-chip-cloud-renderer #right-arrow.yt-chip-cloud-renderer::before {
  background: linear-gradient(to left,var(--yt-spec-base-background) 20%,rgba(33,33,33,0) 80%) !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-base-background) !important
}
}