Skip to content

YouTube - Compact search box with new icon by alpharetzy

Details

Authoralpharetzy

LicenseCC Zero

Categoryyoutube.com

Created

Updated

Size3.1 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

This style adds the compact search box that was used from August - September 2021. This was short lived because in September 2021, the searchbox got big.

Notes

Source code

/* ==UserStyle==
@name           YouTube - Compact search box with new icon
@namespace      example.com
@version        2023.06.24
@description    This style adds the compact search box that was used from August - September 2021.
@author         Me
@preprocessor   stylus
==/UserStyle== */

@-moz-document domain("youtube.com") {
/* Making the search box compact */
ytd-searchbox.style-scope.ytd-masthead {
  height: 32px;
}

form#search-form.style-scope.ytd-searchbox {
  height: 32px;
}

button#search-icon-legacy.style-scope.ytd-searchbox {
  width: 65px;
  height: 32px;
}

#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;
  margin: 0 !important;
}

#container.ytd-searchbox > [slot=search-input] input {
  box-sizing: border-box !important;
  padding: 1px 6px !important;
  margin: 0 !important;
}

ytd-searchbox[has-focus] #search-icon.ytd-searchbox {
  display: none !important;
}

ytd-searchbox[has-focus] #container.ytd-searchbox {
  padding: 2px 6px 2px 6px;
  margin: 0 !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: 0px !important;
}

#search-icon-legacy.ytd-searchbox {
  display: block !important;
  border-radius: 0px 2px 2px 0px;
}

div.style-scope.ytd-searchbox {
  border-radius: 2px 0px 0px 2px !important;
  margin-left: 0px !important;
  padding-left: 6px !important;
}

button.style-scope.ytd-searchbox {
  border-radius: 0px 2px 2px 0px !important;
}

#search-icon.ytd-searchbox {
  padding-right: 10px !important;
  padding-left: 10px !important;
}

#container.ytd-searchbox > [slot=search-input] input {
  box-sizing: border-box !important;
  padding: 1px 6px !important;
  margin: 0 !important;
}

div.sbsb_a {
  border-radius: 2px !important;
}

#container.ytd-searchbox {
  margin-left: 0px !important;
}

#container.ytd-searchbox > [slot=search-input] input {
  box-sizing: border-box !important;
  padding: 1px 6px !important;
  margin: 0 !important;
}

ytd-searchbox[has-focus] #search-icon.ytd-searchbox {
  display: none !important;
}

ytd-searchbox[has-focus][desktop-searchbar-style=rounded_corner_dark_btn] #search-icon.ytd-searchbox, ytd-searchbox[has-focus][desktop-searchbar-style=rounded_corner_light_btn] #search-icon.ytd-searchbox {
  display: none !important;
}

ytd-searchbox[has-focus] #container.ytd-searchbox {
  padding: 2px 6px 2px 6px !important;
  margin: 0 !important;
}

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

div.sbqs_c::before {
  display: none !important;
}

span.sbpqs_a::before {
  display: none !important;
}

yt-icon.style-scope.ytd-searchbox {
  color: var(--yt-spec-text-secondary) !important;
}
}

Reviews

No reviews yet.