Skip to content

YouTube - July 2022 experimental rounded search UI by magma_craft

Screenshot of YouTube - July 2022 experimental rounded search UI

Details

Authormagma_craft

LicenseCC Zero

Categoryyoutube

Created

Updated

Size4.9 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

This userstyle uses to the experimental rounded borderless search box (including the enabled darker-dark-theme on non-rounded UI) from late-July 2022.

Notes

Userstyle doesn't have notes.

Source code

/* ==UserStyle==
@name         YouTube - July 2022 experimental rounded search UI
@version      20230803.04.35
@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-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 script */
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;
}

#tabs-divider.ytd-c4-tabbed-header-renderer {
  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;
}
}

Reviews

No reviews yet.