This userstyle reverts back to UI changes after late-September 2021 (including the 'compact' searchbox).
YT - Revert UI changes before late-Sept 2021 by magma_craft
Details
Authormagma_craft
LicenseCC Zero
Categoryyoutube
Created
Updated
Size22 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Works better with these 4 scripts/styles such as "YouTube - Non-Rounded Design" script (including both CSS tweaks along with the YOIR integrated built-in to the script) and also "YT Polymer Mid 2019-Early 2021" script (which works better with the CSS tweaks for NRD style).
Changelog:
Version 1.0.0 (5-12-22) - First release.
Version 1.0.1 (5-12-22) - CSS fixes and improvements.
Version 1.0.2 (7-08-22) - Removed search icon on lists.
Version 1.0.3 (7-21-22) - Fixed the rounded search bar and removed the history icon on search lists.
Version 1.0.3.1 (7-21-22) - Re-enabled the rounded search bar due to disappeared search button bug and removed focus icon on new search bar.
Version 1.1.0 (10-20-22) - Removed the "fix rounded search bar" part since YouTube has reverted back to the default search bar.
Version 1.2.0 (1-07-23) - Improved the CSS so it will function properly and I also replaced the max-width and max-height under the search button to fix the button issue in Firefox browser.
Version 1.2.1 (3-03-23) - Added CSS to disable the rounded search box to make it like 2018-2021 style.
Version 1.2.2 (4-14-23) - Fixed the microphone icon position.
Version 1.3.0 (4-15-23) - Added an option to use the pre-August 2021 mic styled icon.
Version 1.3.1 (6-16-23) - Improved the CSS code (special thanks to alpharetzy).
Version 1.3.2 (7-10-23) - Fixed the microphone icon position again.
Version 1.5.0 (8-03-23) - Renamed it to "Pre-August 2021 UI topbar" from "Use compact search box" that includes adding the old notification badge.
Version 1.5.1 (10-12-23) - Renamed it to "Revert UI before late-August 2021" and added code for "Remove CC button when CC is unavailable".
Version 1.5.2 (10-13-23) - Bug fix for the codes.
Version 1.5.5 (11-10-23) - Add a bug fix for YT Player Classicifier.
Version 1.6.0 (3-30-24) - Renamed it to "Revert UI changes before late-Sept 2021" and improved additional tweaks from the new update including the removal of the 'Download' and 'Promote' action buttons.
Version 1.6.1 (8-11-24) - Added the "Revert pre-May 2021 UI changes" option.
Version 1.6.2 (9-20-24) - Added CSS to improve the name and view count for the revert video list code (revert pre-May 2021 UI changes only).
Version 1.6.3 (11-21-24) - Added the remove search mic icon option along with bug fixes after updates.
Version 1.6.4 (11-30-24) - CSS improvements for the action buttons on pre-May 2021 style to make it work properly.
Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name YT - Revert UI changes before late-Sept 2021
@namespace example.com
@version 1.6.4
@description This userstyle reverts back to UI changes after late-September 2021 (including the 'compact' searchbox).
@author Magma_Craft
@preprocessor stylus
@var checkbox borderlessBadge "Use borderless notification badge" 1
@var checkbox micIcon21Q1 "Use pre-August 2021 mic styled icon" 0
@var checkbox searchIco "Increase search button icon (required if you are using the outlined icons)" 0
@var checkbox beforeMay21 "Revert pre-May 2021 UI changes" 0
@var checkbox removemicIco "Remove the search mic icon" 0
==/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
}
button#search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox {
max-width: 20px;
max-height: 20px
}
#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
}
button.yt-spec-button-shape-next.yt-spec-button-shape-next--text.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-only-default[aria-label="Search with your voice"] {
max-width: 36px;
max-height: 36px
}
#voice-search-button.ytd-masthead {
background-color: var(--yt-spec-general-background-a) !important;
margin-left: 4px !important
}
/* Other CSS tweaks */
button.yt-spec-button-shape-next.yt-spec-button-shape-next--text.yt-spec-button-shape-next--mono.yt-spec-button-shape-next--size-m.yt-spec-button-shape-next--icon-only-default.yt-spec-button-shape-next--enable-backdrop-filter-experiment[aria-label="Clear search query"] {
display: none !important
}
div.yt-spec-icon-badge-shape__badge {
left: 14px !important;
padding: 0px !important;
min-width: 14px !important;
max-width: 14px !important;
font-size: 10px !important
}
ytd-download-button-renderer {
display: none !important
}
#flexible-item-buttons [aria-label="Promote"] {
display: none !important
}
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Onderskrifte is nie beskikbaar nie"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Altyazılar var"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Subtitel/teks tertutup tidak tersedia"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Sari kata tidak tersedia"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Titlovi nisu dostupni"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Els subtítols no estan disponibles"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Titulky nejsou dostupné"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Undertekster er ikke tilgængelige"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Untertitel nicht verfügbar"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Subtiitreid pole"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Subtitles/closed captions unavailable"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Subtítulos no disponibles"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Ez dago azpititulurik erabilgarri"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Hindi available ang mga subtitle/closed caption"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Sous-titres non disponibles"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Sous-titres/sous-titres codés non offerts"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Os subtítulos non están dispoñibles"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Imibhalo engezansi/amagama-ncazo awatholakali"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Skjátextar ekki í boði"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Sottotitoli/sottotitoli codificati non disponibili"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Manukuu hayapatikani"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Subtitri nav pieejami"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Subtitrų nėra"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Felirat nem áll rendelkezésre"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Ondertiteling niet beschikbaar"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Teksting er ikke tilgjengelig"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Taglavhalar mavjud emas"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Napisy niedostępne"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Não há legendas/closed captions disponíveis"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Subtitrările nu sunt disponibile"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Titrat/teksti shpjegues nuk ofrohen"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Tekstityksiä ei saatavilla"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Undertexter/textning inte tillgängligt"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Không có phụ đề"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Altyazılar kullanılamıyor"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Субцітры недаступныя"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Субтитрите/надписите не са налице"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Коштомо жазуулар жок"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Субтитр қолжетімді емес"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Титловите/затворените титлови не се достапни"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Хадмал/хаалттай тайлбар боломжгүй байна"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Субтитры недоступны"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Титлови нису доступни"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Субтитри недоступні"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Οι υπότιτλοι δεν είναι διαθέσιμοι"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="Ենթագրերը հասանելի չեն"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="אין כתוביות זמינות"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="سب ٹائٹلز دستیاب نہیں ہے"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="مقاطع الترجمة والشرح غير متاحة."],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="زیرنویس/ زیرنویس ناشنوایان دردسترس نیست"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="सबटाइटल/क्लोज्ड क्याप्सन उपलब्ध छैन"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="सबटायटल उपलब्ध नाहीत"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="सबटाइटल उपलब्ध नहीं हैं"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="সাবটাইটেল/ক্লোজড ক্যাপশন উপলভ্য নেই"],
.ytp-subtitles-button.ytp-button[data-title-no-tooltip="ਉਪਸਿਰਲੇਖ/ਬੰਦ ਸੁਰਖੀਆਂ ਉਪਲਬਧ ਨਹੀਂ ਹਨ"],
.ytp-subtitles-button.ytp...