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.
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
Notes
This is based on this style: https://userstyles.world/style/4663/youtube-use-compact-search-box
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;
}
}