Authoryacine_book
LicenseCC Zero
Categorym.youtube.com
Created
Updated
Size110 kB
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Update: As of 12 May 2023, this userstyle will no-longer be receiving updates. Consider checking out YouTube Mobile - Old Design instead: https://userstyles.world/style/9705/youtube-mobile-old-design
This userstyle makes the YouTube Mobile web-app look like the Material 2.0 layout that it had back in the day before 2021
Note: If you're using light theme on this userstyle, it is highly recommended to enable light theme on YouTube, and if you're using dark theme on this userstyle, it is highly recommended to enable dark theme on YouTube. To enable light or dark theme, go to the YT menu > Settings > Account > Appearance, then select your preferred option
To use this userstyle on your phone, Kiwi Browser and Stylus are required, and you are required to go to the Stylus extension, click on options, and enable "Instant inject mode", if this userstyle doesn't work
Changelog:
Version 1.0.0 (10 Apr 2023) - Initial Release
Version 1.0.1 (17 Apr 2023) - Made the subscribe button font bigger + Changed playlist color in watch pages
/* ==UserStyle==
@name Old YouTube Mobile 2018
@namespace https://userstyles.world/user/yacine_book
@version 1.0.1
@description A Userstyle that replicates the Material 2.0 layout that YouTube Mobile had back in the day
@author Yacine
@preprocessor less
@var select darkTheme "Preferred Theme" ["Light*", "Dark"]
@var checkbox redColor "Use Red Colors Instead (For Playlists, Channel pages, and Searchbox)" 0
@var checkbox chiphide "Hide Chipbar [EXPERIMENTAL]" 0
@var checkbox autoplayhide "Hide Autoplay Toggle [EXPERIMENTAL]" 0
==/UserStyle== */
@-moz-document domain("m.youtube.com") {
path.logo-arrow {
fill: #fff;
}
path#triangle {
fill: #fff;
}
path#rectangle {
fill: #ff0000;
}
html[darker-dark-theme] ytm-mobile-topbar-renderer {
background-color: #fff;
}
& when (@darkTheme = Dark) {
html[darker-dark-theme] ytm-mobile-topbar-renderer {
background-color: #282828;
}
}
.mobile-topbar-logo, .logo-in-player {
color: #f00;
}
.video-thumbnail-container-compact-rounded {
border-radius: 0
}
ytm-reel-item-renderer.rounded-reel-item .video-thumbnail-container-vertical {
border-radius: 0
}
ytm-reel-item-renderer.rounded-reel-item .reel-item-metadata {
border-radius: 0
}
@media (min-aspect-ratio: 13 / 9) and (orientation: landscape), (min-width: 931px) and (orientation: landscape) {
.video-thumbnail-container-large.rounded-thumbnail {
border-radius: 0;
}
}
@media (min-width: 550px) and (orientation: portrait), (min-width: 931px) and (orientation: landscape) {
.video-thumbnail-container-large.rounded-thumbnail {
border-radius: 0;
}
}
html[darker-dark-theme] ytm-pivot-bar-renderer {
background: #fff;
}
ytm-pivot-bar-renderer {
border-top: 1px solid rgba(0,0,0,0.1);
}
& when (@darkTheme = Dark) {
html[darker-dark-theme] ytm-pivot-bar-renderer {
background: #282828;
}
ytm-pivot-bar-renderer {
border-top: 1px solid rgba(255,255,255,0.1);
}
}
html[darker-dark-theme] .chip-bar {
background-color: #fff;
}
& when (@darkTheme = Dark) {
html[darker-dark-theme] .chip-bar {
background-color: #282828;
}
}
.rich-grid-sticky-header ytm-feed-filter-chip-bar-renderer {
top: 48px;
z-index: 3;
}
html[darker-dark-theme] .mobile-topbar-header[data-mode=watch] {
background-color: #212121;
}
.mobile-topbar-header[data-mode=watch] {
background-color: #212121;
}
html[darker-dark-theme] .menu-content {
background-color: #fafafa;
}
& when (@darkTheme = Dark) {
html[darker-dark-theme] .menu-content {
background-color: #282828;
}
}
.menu-content.rounded-container {
border-radius: 1px;
}
.menu-item-button {
text-align: left;
color: #000;
}
& when (@darkTheme = Dark) {
.menu-item-button {
color: #eee;
}
}
.menu-cancel-button {
justify-content: left;
}
.mobile-topbar-header {
box-shadow: 0 4px 2px -2px rgba(0,0,0,.2);
}
.pivot-bar-item-title {
display: block;
}
.mobile-topbar-title {
color: #0f0f0f;
}
& when (@darkTheme = Dark) {
.mobile-topbar-title {
color: #f1f1f1;
}
}
.mobile-topbar-logo.ringo-logo, .logo-in-player.ringo-logo {
color: #0f0f0f
}
& when (@darkTheme = Dark) {
.mobile-topbar-logo.ringo-logo, .logo-in-player.ringo-logo {
color: #f1f1f1
}
}
ytm-pivot-bar-renderer c3-icon {
color: #606060;
}
& when (@darkTheme = Dark) {
ytm-pivot-bar-renderer c3-icon {
color: #909090;
}
}
.mobile-topbar-header[data-mode=browse][data-has-rounded-searchbox=true] c3-icon:not(.mobile-topbar-logo), .mobile-topbar-header[data-mode=search][data-has-rounded-searchbox=true] c3-icon:not(.mobile-topbar-logo), .mobile-topbar-header[data-mode=searching][data-has-rounded-searchbox=true] c3-icon:not(.mobile-topbar-logo) {
color: #707070;
}
& when (@darkTheme = Dark) {
.mobile-topbar-header[data-mode=browse][data-has-rounded-searchbox=true] c3-icon:not(.mobile-topbar-logo), .mobile-topbar-header[data-mode=search][data-has-rounded-searchbox=true] c3-icon:not(.mobile-topbar-logo), .mobile-topbar-header[data-mode=searching][data-has-rounded-searchbox=true] c3-icon:not(.mobile-topbar-logo) {
color: #f1f1f1;
}
}
.mobile-topbar-header[data-mode=searching][data-has-rounded-searchbox=true] c3-icon:not(.mobile-topbar-logo) {
color: #909090;
}
& when (@redColor = 1) {
.mobile-topbar-header[data-mode=searching][data-has-rounded-searchbox=true] c3-icon:not(.mobile-topbar-logo) {
color: #fff!important;
}
}
& when (@darkTheme = Dark) {
.mobile-topbar-header[data-mode=searching][data-has-rounded-searchbox=true] c3-icon:not(.mobile-topbar-logo) {
color: #808080;
}
}
ytm-mobile-topbar-renderer c3-icon {
color: #707070;
}
& when (@darkTheme = Dark) {
ytm-mobile-topbar-renderer c3-icon {
color: #f1f1f1;
}
}
& when (@darkTheme = Light) {
html[darker-dark-theme] {
background-color: #fff;
}
}
& when (@darkTheme = Dark) {
html[darker-dark-theme] {
background-color: #282828;
}
}
.setting-generic-category-title-block h2 {
color: #0f0f0f;
}
& when (@darkTheme = Dark) {
.setting-generic-category-title-block h2 {
color: #f1f1f1;
}
}
.setting-generic-category c3-icon, ytm-setting-generic-category c3-icon {
color: #909090;
}
.setting-generic-category-title-block {
color: #606060;
}
& when (@darkTheme = Dark) {
.setting-generic-category-title-block {
color: #909090;
}
}
.setting-generic-category, ytm-setting-generic-category {
border-top: 4px solid rgba(0,0,0,0.1);
}
& when (@darkTheme = Dark) {
.setting-generic-category, ytm-setting-generic-category {
border-top: 4px solid rgba(255,255,255,0.1);
}
}
ytm-settings {
border-bottom: 4px solid rgba(0,0,0,0.1)
}
& when (@darkTheme = Dark) {
ytm-settings {
border-bottom: 4px solid rgba(255,255,255,0.1)
}
}
.c3-material-toggle-button-circle {
background-color: #909090;
}
.c3-material-toggle-button-track {
background-color: #ccc
}
& when (@darkTheme = Dark) {
.c3-material-toggle-button-track {
background-color: #606060
}
}
[aria-pressed=true] .c3-material-toggle-button-circle {
background-color: #065fd4
}
& when (@darkTheme = Dark) {
[aria-pressed=true] .c3-material-toggle-button-circle {
background-color: #3ea6ff
}
}
.setting-title-subtitle-block h3 {
color: #0f0f0f;
}
& when (@darkTheme = Dark) {
.setting-title-subtitle-block h3 {
color: #f1f1f1;
}
}
.setting-title-subtitle-block {
color: #606060;
}
& when (@darkTheme = Dark) {
.setting-title-subtitle-block {
color: #909090;
}
}
.setting-generic-category-title.expanded {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
& when (@darkTheme = Dark) {
.setting-generic-category-title.expanded {
border-bottom: 1px solid rgba(255,255,255,0.1);
}
}
.compact-link-icon {
fill: #707070;
}
& when (@darkTheme = Dark) {
.compact-link-icon {
fill: #909090;
}
}
ytm-simple-menu-header-renderer .icon-button {
color: #000;
}
.view-account-icon {
color: #000
}
& when (@darkTheme = Dark) {
.view-account-icon {
color: #f1f1f1
}
}
.selected-account {
color: #000;
}
& when (@darkTheme = Dark) {
.selected-account {
color: #f1f1f1;
}
}
.setting-single-option-menu-header {
background-color: #fff;
}
.setting-single-option-menu-header .icon-button {
color: #606060
}
& when (@darkTheme = Dark) {
.setting-single-option-menu-header {
background-color: #282828;
}
.setting-single-option-menu-header .icon-button {
color: #fff
}
}
.title {
color: #0f0f0f;
}
& when (@darkTheme = Dark) {
.title {
color: #f1f1f1;
}
}
ytm-setting-menu-item-renderer svg {
color: #0f0f0f;
}
& when (@darkTheme = Dark) {
ytm-setting-menu-item-renderer svg {
color: #909090;
...