// ==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,
});
})();
