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
Size23 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.
Version 1.6.5 (12-15-24) - CSS fixes for the search box after update.
Version 1.6.6-1.6.7 (12-22-24) - Improvements to the pre-May 2021 styled fonts and added the old share icon option.
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.7
@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 removemicIco "Remove the search mic 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 oldshareBtn "Use the pre-December 2020 'Share' 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,
.ytSearchboxComponentHost {
height: 32px
}
button#search-icon-legacy.style-scope.ytd-searchbox,
.ytSearchboxComponentSearchButton {
width: 65px;
height: 32px
}
button#search-icon-legacy.ytd-searchbox yt-icon.ytd-searchbox,
button.ytSearchboxComponentSearchButton yt-icon {
max-width: 20px;
max-height: 20px
}
#container.ytd-searchbox,
.ytSearchboxComponentInputBox {
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
}
.ytSearchboxComponentInputBox {
padding-left: 12px !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,
.ytSearchboxComponentInnerSearchIcon,
.ytSuggestionComponentIcon {
display: none !important
}
ytd-searchbox[has-focus] #container.ytd-searchbox {
padding: 2px 6px 2px 6px;
margin: 0 !important
}
.ytSearchboxComponentInputBoxHasFocus input {
padding: 2px 0px 2px 0px;
margin: 0 !important
}
ytd-searchbox[desktop-searchbar-style="rounded_corner_dark_btn"] #searchbox-button.ytd-searchbox,
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"],
.ytSearchboxComponentClearButtonWrapper {
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="ز...