Youtube Side-Guide Style

change style/mode guide in youtube

// ==UserScript==
// @name        Youtube Side-Guide Style
// @namespace   https://greasyfork.org/pt-BR/users/821661
// @match       https://www.youtube.com/*
// @grant       GM_setValue
// @grant       GM_getValue
// @grant       GM_registerMenuCommand
// @grant       GM_addElement
// @version     0.2.1
// @author      hdyzen
// @description change style/mode guide in youtube
// @license     MIT
// ==/UserScript==

(function () {
    'use strict';

    let guide = ['Default', 'Compact', 'Compact-E', 'Compact-M', 'Compact-D', 'Minimize', 'Remove'];
    let guideMode = GM_getValue('guide', 2);
    let p = 'ytd-app[guide-persistent-and-visible]';
    let m = 'ytd-app[mini-guide-visible]';
    let i = '!important';

    function setStyle() {
        const guideEL = document.querySelector('[guideStyle]');
        if (guideEL) guideEL.remove();
        guideMode = GM_getValue('guide', 2);
        switch (guideMode) {
            case 1:
                GM_addElement(document.documentElement, 'style', {
                    textContent: `${p} tp-yt-app-drawer {display: none${i};}${p} tp-yt-app-header {left: 72px${i};}${p} #channel-container {max-height: 218px${i};}${p} ytd-page-manager {margin-left: var(--ytd-mini-guide-width)${i};}${p} ytd-mini-guide-renderer {display: unset${i};}${p} ytd-playlist-header-renderer.ytd-browse {left: var(--ytd-mini-guide-width)${i};}${m} tp-yt-app-drawer {display: unset ${i};visibility: visible ${i};}${m} tp-yt-app-header {left: 240px ${i};}${m} #channel-container {max-height: 230px;}${m} ytd-page-manager {margin-left: var(--app-drawer-width) ${i};}${m} ytd-mini-guide-renderer {display: none ${i};}${m} #scrim.tp-yt-app-drawer {opacity: 1 ${i};}${m} #contentContainer.tp-yt-app-drawer {transform: translate3d(0, 0, 0) ${i};}${m} #contentContainer.tp-yt-app-drawer #header.ytd-app {display: none ${i};}${m} ytd-playlist-header-renderer.ytd-browse {left: var(--app-drawer-width) ${i};}`,
                    guideStyle: 'Compact',
                });
                break;
            case 2:
                GM_addElement(document.documentElement, 'style', {
                    textContent: `${p} .title.ytd-guide-entry-renderer, a.ytd-guide-entry-renderer[href='/feed/you'], #guide-section-title.ytd-guide-section-renderer, yt-img-shadow.ytd-guide-entry-renderer ~ :is(yt-icon, #newness-dot), #footer.style-scope.ytd-guide-renderer, ytd-guide-renderer ytd-guide-signin-promo-renderer, #contentContainer.tp-yt-app-drawer[swipe-open].tp-yt-app-drawer::after {display: none ${i};}${p} div#guide-inner-content {scrollbar-width: none ${i};}${p} div#guide-inner-content::-webkit-scrollbar {display: none ${i};}${p} :is(yt-img-shadow.ytd-guide-entry-renderer, .guide-icon.ytd-guide-entry-renderer) {margin: 0 ${i};}${p} :is(tp-yt-app-drawer, ytd-guide-renderer.ytd-app) {width: var(--ytd-mini-guide-width) ${i};}${p} :is(ytd-guide-entry-renderer, ytd-guide-entry-renderer[active]) {width: max-content ${i};}${p} :is(ytd-guide-section-renderer > #items > ytd-guide-entry-renderer, #section-items > ytd-guide-entry-renderer, ytd-guide-collapsible-entry-renderer ytd-guide-entry-renderer) {margin-bottom: 5px ${i};}${p} ytd-page-manager.ytd-app {margin-left: var(--ytd-mini-guide-width) ${i};}${p} ytd-playlist-header-renderer.ytd-browse {left: var(--ytd-mini-guide-width) ${i};}${p} ytd-guide-section-renderer {padding: 0 ${i};margin: 12px 10px 0 ${i};width: max-content ${i};}`,
                    guideStyle: 'Compact-E',
                });
                break;
            case 3:
                GM_addElement(document.documentElement, 'style', {
                    textContent: `${p} ytd-mini-guide-renderer {opacity: 0${i};transition: .15s ease${i};left: calc((var(--ytd-mini-guide-width) / 1.2) * -1);}${p} ytd-mini-guide-renderer:hover {opacity: 1${i};left: 0${i};}${p} ytd-page-manager {margin-left: 0${i};}${p} ytd-two-column-browse-results-renderer.style-scope > #primary {padding-left: 0${i};}${p} tp-yt-app-drawer {display: none${i};}${p} tp-yt-app-header {left: 72px${i};}${p} #channel-container {max-height: 218px${i};}${p} ytd-page-manager {margin-left: 0${i};}${p} ytd-mini-guide-renderer {display: unset${i};}${p} ytd-playlist-header-renderer.ytd-browse {left: var(--ytd-mini-guide-width)${i};}${m} tp-yt-app-drawer {display: unset ${i};visibility: visible ${i};}${m} tp-yt-app-header {left: 240px ${i};}${m} #channel-container {max-height: 230px;}${m} ytd-page-manager {margin-left: var(--app-drawer-width) ${i};}${m} ytd-mini-guide-renderer {display: none ${i};}${m} #scrim.tp-yt-app-drawer {opacity: 1 ${i};}${m} #contentContainer.tp-yt-app-drawer {transform: translate3d(0, 0, 0) ${i};}${m} #contentContainer.tp-yt-app-drawer #header.ytd-app {display: none ${i};}${m} ytd-playlist-header-renderer.ytd-browse {left: var(--app-drawer-width) ${i};}`,
                    guideStyle: 'Compact-M',
                });
                break;
            case 4:
                GM_addElement(document.documentElement, 'style', {
                    textContent: `${p} ytd-guide-section-renderer {padding: 4px${i};width: 200px${i};}${p} ytd-guide-section-renderer.style-scope:nth-child(1) {padding-top: 10px${i};}${p} tp-yt-app-drawer {width: 200px${i};}${p} #page-manager.ytd-app {margin-left: 200px${i};}${p} tp-yt-paper-item.ytd-guide-entry-renderer {padding: 0 4px${i};}${p} .guide-icon.ytd-guide-entry-renderer, yt-img-shadow.ytd-guide-entry-renderer {margin-right: 12px${i};}${p} ytd-guide-collapsible-section-entry-renderer.ytd-guide-section-renderer:not(:first-child) {margin-top: 3px${i};padding-top: 4px${i};}${p} #endpoint.yt-simple-endpoint.ytd-guide-entry-renderer {margin: 2px 0${i};}`,
                    guideStyle: 'Compact-D',
                });
                break;
            case 5:
                GM_addElement(document.documentElement, 'style', {
                    textContent: `${p} #guide {transform: translateX(-90%)${i};transition: .1s ease${i};}${p} #guide:hover {transform: unset${i};}${p} ytd-page-manager.ytd-app {margin-left: 24px${i};}${p} ytd-browse :is(ytd-playlist-sidebar-renderer.ytd-browse, ytd-playlist-header-renderer.ytd-browse) {left: 24px${i};}`,
                    guideStyle: 'Minimize',
                });
                break;
            case 6:
                GM_addElement(document.documentElement, 'style', {
                    textContent: `tp-yt-app-drawer, ytd-mini-guide-renderer {display: none${i};}ytd-page-manager.ytd-app {margin-left: 0${i};}`,
                    guideStyle: 'Remove',
                });
                break;
        }
    }
    setStyle();

    function changeStyle() {
        if (guideMode < 6) {
            GM_setValue('guide', guideMode + 1);
        } else {
            GM_setValue('guide', (guideMode = 0));
        }
        // location.reload();
        setStyle();
        GM_registerMenuCommand(`Guide style: ${guide[guideMode]}`, changeStyle, {
            title: 'Click for select next',
            autoClose: false,
            id: guideCommand,
        });
    }

    const guideCommand = GM_registerMenuCommand(`Guide style: ${guide[guideMode]}`, changeStyle, {
        title: 'Click for select next',
        autoClose: false,
    });
})();