Skip to content

Invidious -> YouTube Mobile by yacine_book

Write a review Install Get Stylus

Details

Authoryacine_book

LicenseNo License

Categoryyewtu.be

Created

Updated

Size270 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

This userstyle makes Invidious look like the YouTube mobile app

Notes

By default, this userstyle is meant to make Invidious look like the 2018/2019 YT mobile app, and there are no options to make it look like even older YT UIs at the moment (I might add them in a future update though)

Want a whole entire frontend/web-client instead? Please check out our project YTm15, it uses Invidious APIs and mainly aims to bring back the 2015 YouTube mobile UI: https://ytm15.github.io/app

This userstyle currently works on the following Invidious instances:
-invidious.flokinet.to
-yewtu.be
-invidious.protokolla.fi

Recommended scripts to install alongside this userstyle (Requires Tampermonkey):
-About tab for Invidious (By me): https://greasyfork.org/en/scripts/487535-about-tab-for-invidious
-ReturnInvidiousDislike (By TheLastZombie): https://greasyfork.org/en/scripts/436254-returninvidiousdislike

To-do list:
-Modify the playlist page and possibly other pages to make them look like YouTube
-Fix a lot of things in this style
-Modify search filters
-Modify the video player

Disclaimer: This userstyle will not work on iOS, due to there being no browser for it that supports chrome extensions

To use this userstyle on your phone, Kiwi Browser and Stylus are required
If this userstyle isn't working for you, you may have to go to the Stylus extension, click on options, and enable "Instant inject mode"

Changelog:
-Version 1.0.0 (22 Jan 2024) -
--Initial Release
-Version 1.0.1 (23 Jan 2024) -
--Added padding to the search widget that appears on the empty search page
-Version 1.0.2 (24 Jan 2024) -
--Some improvements and fixes
--Made the sort by options on the channel page look like cloud chips
--Made video item sizing compact in some places
--Added a "Wide Search Bar" option along with an option to hide the footer
--Finally modified the watchpage
-Version 1.0.3 (26 Jan 2024) -
--Minor fixes and improvements
--Modified the "Music in this video" thing in the watchpage
-Version 1.0.4 (14 Feb 2024) -
--CSS improvements
--Finally made radio buttons, checkboxes, and sliders look like their Material Design counterparts
--Modified the comment section's view replies button along with the comments themselves
--Made community posts look more accurate to YouTube
--Made the searchbar visible on the searchpage
--Made the description expandable
--Made watchpage video item sizing compact
-Version 1.0.5 (21 Feb 2024) -
--Made the searchbar's height fixed and slightly modified its positioning
--Optimized this style for my "About page for Invidious" userscript and one called "ReturnInvidiousDislike"
--Minor tweaks + Changed the header color on channel pages
--Optimized this style for the multi-images carousel in the community tab on channels

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link. 
/* ==UserStyle==
@name           Invidious to YouTube Mobile
@namespace      https://userstyles.world/user/yacine_book
@version        1.0.5
@description    A userstyle that makes Invidious look like YouTube mobile
@author         Yacine
@preprocessor   stylus

@var  checkbox  widesearch  "Wide Search Bar"  0
@var  checkbox  hidefooter  "Hide Footer"  1
==/UserStyle== */

@-moz-document domain("invidious.flokinet.to"), domain("yewtu.be"), domain("invidious.protokolla.fi") {
    /* Change font to Roboto */
    @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
    html, body, .pure-g [class*=pure-u] {
        font-family: Roboto,Arial,sans-serif;
    }
    
    /* Makes page contents fill the entire screen in any resolution */
    .pure-u-1.pure-u-md-2-24 {
        display: none;
    }
    .pure-u-md-20-24, .pure-u-md-5-6 {
        width: 100%;
    }
    .pure-u-xl-20-24, .pure-u-xl-5-6 {
        width: 100%;
    }
    
    /* Changes minimum height from the contents element */
    #contents {
        min-height: unset;
    }
    
    body {
        background-color: #fff;
        color: #111;
    }
    body.dark-theme {
        background-color: #282828;
        color: #f1f1f1;
    }
    
    /* Makes link text inherit color */
    .light-theme a, .dark-theme a {
        color: inherit;
    }
    
    
    /* Changes link text color in some places */
    .light-theme #descriptionWrapper a, .light-theme .pure-u-20-24.pure-u-md-22-24>p:nth-of-type(2) a, a#link-yt-embed, p#genre a {
        color: #065fd4;
    }
    .dark-theme #descriptionWrapper a, .dark-theme .pure-u-20-24.pure-u-md-22-24>p:nth-of-type(2) a, .dark-theme a#link-yt-embed, .dark-theme p#genre a {
        color: #3ea6ef;
    }
    
    .h-box {
        padding: 0;
    }
    
    #contents {
        padding-top: 48px;
    }
    
    #contents:has(.feed-menu) {
        padding-bottom: 48px;
    }
    
    hr {
        display: none;
    }
    
    /* Header tweaks */
    .navbar {
        margin: 0;
        height: 48px;
        background-color: #fff;
        flex-direction: row;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        flex-wrap: nowrap;
        z-index: 104;
        justify-content: flex-start;
    }
    .dark-theme .navbar {
        background-color: #282828;
    }
    
    #contents::before {
        content: "";
        display: block;
        z-index: 101;
        height: 48px;
        box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.15);
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
    }
    
    /* Searchbar tweaks */
    div.searchbar input {
        color: inherit;
        background-color: inherit;
    }
    
    /* Converts searchbar in the header to an icon button */
    .navbar .searchbar input[type="search"] {
        font-size: 0;
        margin: 0;
        padding: 12px;
        height: 48px;
        width: 48px;
        border: 0;
        background-image: url('data:image/png;base64,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...

Reviews

No reviews yet.