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
Size14 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Link is required to install here: https://www.reddit.com/r/oldyoutubelayout/comments/uogi6n/youtube_ui_before_august_26th_2021_with_all_links/
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.
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.0
@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
==/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 */
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-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="സബ്ടൈറ്റിലുകൾ/CC...