From ca2e73814aca48b8804fb7ff5ece18ef94c348ad Mon Sep 17 00:00:00 2001 From: D-Rek Date: Tue, 6 Jun 2023 01:12:43 +0200 Subject: [PATCH 1/8] Sidebar update --- .../appearance/comments/comments.css | 106 ++++++++++++++++-- .../www.youtube.com/appearance.js | 82 ++++++++++++-- 2 files changed, 169 insertions(+), 19 deletions(-) diff --git a/js&css/extension/www.youtube.com/appearance/comments/comments.css b/js&css/extension/www.youtube.com/appearance/comments/comments.css index 58447d7b4..ccef6030d 100644 --- a/js&css/extension/www.youtube.com/appearance/comments/comments.css +++ b/js&css/extension/www.youtube.com/appearance/comments/comments.css @@ -9,18 +9,104 @@ # Hide avatars --------------------------------------------------------------*/ -@media screen and (min-width: 1599px) { -html[data-page-type=video][it-comments-sidebar='true'] #player { margin-left: -20px !important;} -html[data-page-type=video][it-comments-sidebar='true'] #columns { display:flex !important; max-width:100% !important;} -html[data-page-type=video][it-comments-sidebar='true'] #comments { max-width: min(850px, 19vw) !important; margin-left:-12px; } -html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] #comments { max-right: -25px !important; } -html[data-page-type=video][it-comments-sidebar='true'] #related { margin-right: -22px !important; max-width: max(360px, 18vw) !important; } -html[data-page-type=video][it-comments-sidebar='true'] #secondary { margin-right: -22px !important; max-width: max(360px, 18vw) !important; } - -html[data-page-type=video][it-comments-sidebar='true']:not([it-player-size='1080p']):not([it-player-size='1440p']):not([it-player-size='2160p']):not([it-player-size='custom']):not([it-player-size='max_width']) ytd-watch-flexy:not([fullscreen]) #primary { -min-width: min(calc(100vw - 1000px), 1260px) !important; max-width: 1260px !important; } +@media screen and (min-width: 1600px) { + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related { width: auto !important;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns { max-width: 100%;} + + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #comments { max-right: -25px !important;} + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary { + border-left: 0; + border-right: 1px solid var(--yt-spec-10-percent-layer); + padding-left: 20px; + flex-shrink: 2; + min-width: 300px; + } + + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary {overflow-y: scroll} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary {padding-left: 12px;padding-right: 12px; padding-top: 0!important;border-left: 1px solid var(--yt-spec-10-percent-layer); min-width: 300px;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner {padding-top: 24px;} + + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #comments {overflow-y: scroll} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #comments { padding-left: 12px; padding-right: 12px; max-width: 420px; min-width: 300px; width:unset; display: block !important; flex: 0 1 auto} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary-inner {width: 1280px;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary { + padding-right: 15px; + border-right: 1px solid var(--yt-spec-10-percent-layer); + flex: 0 0 auto; + max-width: 1280px; + } + + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) ytd-live-chat-frame#chat {width: 100%;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #playlist { padding-top: 24px; min-width: unset !important;} + + + /* html[data-page-type=video][it-comments-sidebar='true']:not([it-player-size='1080p']):not([it-player-size='1440p']):not([it-player-size='2160p']):not([it-player-size='custom']):not([it-player-size='max_width']) ytd-watch-flexy:not([fullscreen]) #primary { + min-width: min(calc(100vw - 1000px), 1260px) !important; max-width: 1260px !important; } + */ + /* DIFFERENT HEADERS HEIGHT*/ + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] #comments, /* BUG: if header has never been switched back and forth to normal, [normal] selector isn't applied */ + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] #secondary, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] #comments, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] #secondary { + height: calc(100vh - 56px); + } + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover] #comments, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover] #secondary, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover_on_video_page] #comments, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover_on_video_page] #secondary{ + height: calc(100vh - 14px); + } + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden] #comments, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden] #secondary, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden_on_video_page] #comments, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden_on_video_page] #secondary{ + height: calc(100vh); + } } +@media screen and (min-width: 1000px) and (max-width: 1599px) { + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary { + overflow-x: hidden; overflow-y: scroll; margin-left: 0; padding-left: 24px; padding-right: 15px; border-right: 1px solid var(--yt-spec-10-percent-layer); max-width: fit-content !important; + } + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #player {margin: 0 auto !important;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary {overflow-y: scroll; margin-right: 0; padding-right: 0 !important; padding-top: 0 !important; max-width: 420px !important;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary-inner {padding-left: 24px; padding-top: 24px; padding-right: 24px; box-sizing: border-box;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary-content {overflow: hidden;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-live-chat-frame#chat, + html[data-page-type=video][it-comments-sidebar='true'] #donation-shelf, + html[data-page-type=video][it-comments-sidebar='true'] ytd-reel-shelf-renderer + {width: 100% !important;} + + /* DIFFERENT HEADERS HEIGHT*/ + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] #columns, /* BUG: if header has never been changed then set to normal, normal selector isn't applied */ + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] #columns { + height: calc(100vh - 56px); + } + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover] #columns, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover_on_video_page] #columns{ + height: calc(100vh - 14px); + } + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden] #columns, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden_on_video_page] #columns{ + height: calc(100vh); + } +} + +/* CUSTOM ENHANCEMENTS */ +html[data-page-type=video] #playlist { width: 100% !important; max-height: 460px; } /* SHOULD FIX #1693 */ +html[data-page-type=video] ytd-watch-flexy #chat > tp-yt-paper-button#label { width:calc(100% - 40px); } +html[data-page-type=video] ytd-watch-flexy #right-arrow-container.ytd-merch-shelf-renderer { right: 44px !important; } + +html[data-page-type=video][it-comments-sidebar='true'] #contentContainer::after {pointer-events: none !important;} +html[data-page-type=video][it-comments-sidebar='true'] ytd-reel-shelf-renderer {width: 100%; padding: 0 16px; box-sizing: border-box;} + +/* GRID RELATED */ +html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-video-renderer, +html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-radio-renderer, +html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-playlist-renderer, +html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-continuation-item-renderer {min-width: 300px; max-width: 420px !important; flex-grow: 1; flex-basis: 0 !important; margin-right: 8px;} + + /*-------------------------------------------------------------- # COLLAPSED --------------------------------------------------------------*/ diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js index 19e6eb43d..42c9ce1b9 100644 --- a/js&css/web-accessible/www.youtube.com/appearance.js +++ b/js&css/web-accessible/www.youtube.com/appearance.js @@ -138,15 +138,79 @@ ImprovedTube.playerRemainingDuration = function () { /*------------------------------------------------------------------------------ Comments Sidebar ------------------------------------------------------------------------------*/ -ImprovedTube.commentsSidebar = function() { if(ImprovedTube.storage.comments_sidebar === true){ - if(window.matchMedia("(min-width: 1599px)").matches) { - document.querySelector("#primary").insertAdjacentElement('afterend', document.querySelector("#comments"));} - if(window.matchMedia("(max-width: 1598px)").matches) { - document.querySelector("#related").insertAdjacentElement('beforebegin', document.querySelector("#comments")); - setTimeout(function () { - document.querySelector("#primary-inner").appendChild(document.querySelector("#related"));} - );} - } +ImprovedTube.commentsSidebar = function() { + let hasApplied = 0 + if(ImprovedTube.storage.comments_sidebar === true){ + sidebar(); + setGrid(); + window.addEventListener("resize", sidebar) +} + function sidebar(){ + + if(window.matchMedia("(min-width: 1600px)").matches) { + if (!hasApplied) { + document.querySelector("#primary").insertAdjacentElement('afterend', document.querySelector("#comments")); + let comments = document.querySelector("#comments") + let playlist = document.querySelector("#secondary #playlist") //TO DO: comments overriding playlist + comments.insertBefore(playlist, comments.firstChild) + let i = 0 + const itemsInterval = setInterval(()=>{ + let sections = document.querySelector("#columns #comments #sections") + // let playlist = document.querySelector("#secondary #playlist") + let chat = document.querySelector("#secondary #chat") + let donation = document.querySelector("#secondary #donation-shelf") + // console.log(document.getElementById("comments")) + if(sections && (donation || chat)){ + console.log("we clearing") + // sections.insertAdjacentElement("beforebegin",playlist) + sections.insertAdjacentElement("beforebegin",chat) + sections.insertAdjacentElement("beforebegin",donation) + clearInterval(itemsInterval) + } else if (i == 100) clearInterval(itemsInterval) + i++ + console.log(i) + },100) + } + else if (hasApplied == 2){ + console.log("from medium to big size") + } + hasApplied = 1 + } + else if(window.matchMedia("(min-width: 1000px)").matches) { + if (!hasApplied) { + let secondaryInner = document.getElementById("secondary-inner"); + let primaryInner = document.getElementById("primary-inner"); + let comments = document.querySelector("#comments"); + let related = document.getElementById("related"); + primaryInner.appendChild(document.getElementById("panels")); + primaryInner.appendChild(related) + const chat = document.getElementById("chat-template") + secondaryInner.appendChild(chat) + secondaryInner.appendChild(comments) + } + else if (hasApplied == 1){ + console.log("from big to medium") + } + hasApplied = 2 + } + else { /// 1000 < + if(hasApplied == 2){ //from 1600 + } + else if (hasApplied == 1){ //from 1000 + } + hasApplied = 0 + } + } + function setGrid(){ + let checkParentInterval = setInterval(() => { + container = document.querySelector("#related ytd-compact-video-renderer.style-scope")?.parentElement + if (container) { + clearInterval(checkParentInterval); + container.style.display = "flex" + container.style.flexWrap = "wrap" + } + }, 250); + } } /*------------------------------------------------------------------------------ SIDEBAR From d1230e3c886d2504b830368236f23b021f3a63e5 Mon Sep 17 00:00:00 2001 From: D-Rek Date: Wed, 7 Jun 2023 22:57:05 +0200 Subject: [PATCH 2/8] Updated Sidebar --- .../appearance/comments/comments.css | 133 ++++++++++-------- .../www.youtube.com/appearance.js | 101 +++++++------ 2 files changed, 130 insertions(+), 104 deletions(-) diff --git a/js&css/extension/www.youtube.com/appearance/comments/comments.css b/js&css/extension/www.youtube.com/appearance/comments/comments.css index ccef6030d..400f3b9ad 100644 --- a/js&css/extension/www.youtube.com/appearance/comments/comments.css +++ b/js&css/extension/www.youtube.com/appearance/comments/comments.css @@ -9,76 +9,76 @@ # Hide avatars --------------------------------------------------------------*/ -@media screen and (min-width: 1600px) { +/* 2 COLS FEATURE */ +@media screen and (min-width: 1984px) { html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related { width: auto !important;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns { max-width: 100%;} - - html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #comments { max-right: -25px !important;} - html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary { - border-left: 0; - border-right: 1px solid var(--yt-spec-10-percent-layer); - padding-left: 20px; - flex-shrink: 2; - min-width: 300px; + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #columns { max-width: 100%;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner {padding-top: 24px; border-left: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary {min-width: 300px !important; max-width: 420px;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary { + flex: 0 0 auto; + max-width: 1280px !important; } + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary {flex-shrink: 2;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related { flex-shrink: 4; min-width: 338px;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary {overflow-y: scroll} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary {padding-left: 12px;padding-right: 12px; padding-top: 0!important;border-left: 1px solid var(--yt-spec-10-percent-layer); min-width: 300px;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner {padding-top: 24px;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #comments {overflow-y: scroll} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #comments { padding-left: 12px; padding-right: 12px; max-width: 420px; min-width: 300px; width:unset; display: block !important; flex: 0 1 auto} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary-inner {width: 1280px;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary { - padding-right: 15px; - border-right: 1px solid var(--yt-spec-10-percent-layer); - flex: 0 0 auto; - max-width: 1280px; - } - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) ytd-live-chat-frame#chat {width: 100%;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #playlist { padding-top: 24px; min-width: unset !important;} - + /*-------------------------------------------------------------- + #TODO: there should be 2 new option in settings: + 1 - [it-comments-sidebar-left] so we can shift comments-sidebar to the left (should appear only when 'Comments:Sidebar' is activated). + 2 - [swap-sidebars] so we exchange the sidebars order (that would only apply to 1998px+ wide-screens, because player resize + is messy AT THE MOMENT. Once resize works properly we can re-arrange this entire media-screen in its own setting option too). + Might also think on the edge-cases were both options are active + --------------------------------------------------------------*/ + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary {order: 6;} /*TO DELETE once top is implemented*/ + + + /* PADDINGS */ + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #primary {padding: 0 14px 0 24px;} + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary {padding-right: 0;} + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary-inner {padding: 0 14px;} + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #related > * {padding: 0 24px 0 14px; border-left: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #primary {padding: 0 14px} + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary-inner {padding-right: 24px; padding-left: 14px} + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #related > * {padding: 0 14px 0 24px; border-right: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related{ height: inherit; overflow-y: scroll} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner > :first-child, + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related > :first-child {padding-top: 24px;} + + /* html[data-page-type=video][it-comments-sidebar='true']:not([it-player-size='1080p']):not([it-player-size='1440p']):not([it-player-size='2160p']):not([it-player-size='custom']):not([it-player-size='max_width']) ytd-watch-flexy:not([fullscreen]) #primary { min-width: min(calc(100vw - 1000px), 1260px) !important; max-width: 1260px !important; } */ - /* DIFFERENT HEADERS HEIGHT*/ - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] #comments, /* BUG: if header has never been switched back and forth to normal, [normal] selector isn't applied */ - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] #secondary, - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] #comments, - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] #secondary { - height: calc(100vh - 56px); - } - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover] #comments, - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover] #secondary, - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover_on_video_page] #comments, - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover_on_video_page] #secondary{ - height: calc(100vh - 14px); - } - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden] #comments, - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden] #secondary, - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden_on_video_page] #comments, - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden_on_video_page] #secondary{ - height: calc(100vh); - } } -@media screen and (min-width: 1000px) and (max-width: 1599px) { - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary { - overflow-x: hidden; overflow-y: scroll; margin-left: 0; padding-left: 24px; padding-right: 15px; border-right: 1px solid var(--yt-spec-10-percent-layer); max-width: fit-content !important; + +@media screen and (min-width: 1000px) and (max-width: 1983px) { + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {max-width: calc((100% - 420px) - 48px) !important;} /*UP TO (-658px)*/ + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary { width: unset !important; max-width: 420px !important;} /*UP TO 658px*/ + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #columns {max-width: 100%; min-width: unset !important;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary { margin-right: 0; padding-right: 0 !important; min-width: 300px !important;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner {padding-left: 24px; padding-top: 24px; padding-right: 24px;} + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary-inner { border-right: 1px solid var(--yt-spec-10-percent-layer);} + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary-inner { border-left: 1px solid var(--yt-spec-10-percent-layer);} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #primary, + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #primary { + margin: 0; + padding: 24px 24px 0 24px; } - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #player {margin: 0 auto !important;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary {overflow-y: scroll; margin-right: 0; padding-right: 0 !important; padding-top: 0 !important; max-width: 420px !important;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary-inner {padding-left: 24px; padding-top: 24px; padding-right: 24px; box-sizing: border-box;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary-content {overflow: hidden;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-live-chat-frame#chat, - html[data-page-type=video][it-comments-sidebar='true'] #donation-shelf, - html[data-page-type=video][it-comments-sidebar='true'] ytd-reel-shelf-renderer - {width: 100% !important;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary-content {overflow: hidden;} +} +@media screen and (min-width: 1000px){ + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary, + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary{margin-top: 0 !important; padding-top: 0 !important; padding-right: 0;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {flex: 1 0 auto;padding: 0 24px; margin: 0;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary-inner {padding-top: 24px;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #player {margin: 0 auto;} + /* DIFFERENT HEADERS HEIGHT*/ - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] #columns, /* BUG: if header has never been changed then set to normal, normal selector isn't applied */ + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] #columns, /* BUG: if header has never been changed back and forth to normal, [it-header-position=normal] selector isn't applied */ html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] #columns { height: calc(100vh - 56px); } @@ -90,15 +90,22 @@ html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden_on_video_page] #columns{ height: calc(100vh); } + + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary, + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary{ + height: inherit; overflow-y: scroll + } + } -/* CUSTOM ENHANCEMENTS */ -html[data-page-type=video] #playlist { width: 100% !important; max-height: 460px; } /* SHOULD FIX #1693 */ -html[data-page-type=video] ytd-watch-flexy #chat > tp-yt-paper-button#label { width:calc(100% - 40px); } -html[data-page-type=video] ytd-watch-flexy #right-arrow-container.ytd-merch-shelf-renderer { right: 44px !important; } -html[data-page-type=video][it-comments-sidebar='true'] #contentContainer::after {pointer-events: none !important;} +html[data-page-type=video][it-comments-sidebar='true'] #contentContainer::after {pointer-events: none !important;} /*DISABLES the swap-from-left channels sidebar*/ html[data-page-type=video][it-comments-sidebar='true'] ytd-reel-shelf-renderer {width: 100%; padding: 0 16px; box-sizing: border-box;} +html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #playlist, +html[data-page-type=video][it-comments-sidebar='true'] ytd-live-chat-frame#chat, +html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #donation-shelf{ + width: 100% !important; min-width: unset !important; +} /* GRID RELATED */ html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-video-renderer, @@ -106,6 +113,10 @@ html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-sec html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-playlist-renderer, html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-continuation-item-renderer {min-width: 300px; max-width: 420px !important; flex-grow: 1; flex-basis: 0 !important; margin-right: 8px;} +/* CUSTOM ENHANCEMENTS */ +html[data-page-type=video] #playlist { max-height: 460px; } /* SHOULD FIX #1693 */ +html[data-page-type=video] ytd-watch-flexy #chat > tp-yt-paper-button#label { width:calc(100% - 40px); } +html[data-page-type=video] ytd-watch-flexy #right-arrow-container.ytd-merch-shelf-renderer { right: 44px !important; } /*-------------------------------------------------------------- # COLLAPSED diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js index 42c9ce1b9..beb4c6ff3 100644 --- a/js&css/web-accessible/www.youtube.com/appearance.js +++ b/js&css/web-accessible/www.youtube.com/appearance.js @@ -139,64 +139,47 @@ ImprovedTube.playerRemainingDuration = function () { Comments Sidebar ------------------------------------------------------------------------------*/ ImprovedTube.commentsSidebar = function() { + console.log("It's applying kek") + const video = document.querySelector("#player video.video-stream") || document.querySelector("#container video"); let hasApplied = 0 if(ImprovedTube.storage.comments_sidebar === true){ - sidebar(); - setGrid(); - window.addEventListener("resize", sidebar) -} + sidebar(); + setGrid(); + applyObserver(); + window.addEventListener("resize", sidebar) + } function sidebar(){ - - if(window.matchMedia("(min-width: 1600px)").matches) { + resizePlayer(); + if(window.matchMedia("(min-width: 1984px)").matches) { if (!hasApplied) { - document.querySelector("#primary").insertAdjacentElement('afterend', document.querySelector("#comments")); - let comments = document.querySelector("#comments") - let playlist = document.querySelector("#secondary #playlist") //TO DO: comments overriding playlist - comments.insertBefore(playlist, comments.firstChild) - let i = 0 - const itemsInterval = setInterval(()=>{ - let sections = document.querySelector("#columns #comments #sections") - // let playlist = document.querySelector("#secondary #playlist") - let chat = document.querySelector("#secondary #chat") - let donation = document.querySelector("#secondary #donation-shelf") - // console.log(document.getElementById("comments")) - if(sections && (donation || chat)){ - console.log("we clearing") - // sections.insertAdjacentElement("beforebegin",playlist) - sections.insertAdjacentElement("beforebegin",chat) - sections.insertAdjacentElement("beforebegin",donation) - clearInterval(itemsInterval) - } else if (i == 100) clearInterval(itemsInterval) - i++ - console.log(i) - },100) + initialSetup() + setTimeout(() => {document.getElementById("columns").appendChild(document.getElementById("related"))}) } - else if (hasApplied == 2){ - console.log("from medium to big size") + else if (hasApplied == 2){ //from medium to big size + setTimeout(() => {document.getElementById("columns").appendChild(document.getElementById("related"))}) } hasApplied = 1 } else if(window.matchMedia("(min-width: 1000px)").matches) { if (!hasApplied) { - let secondaryInner = document.getElementById("secondary-inner"); - let primaryInner = document.getElementById("primary-inner"); - let comments = document.querySelector("#comments"); - let related = document.getElementById("related"); - primaryInner.appendChild(document.getElementById("panels")); - primaryInner.appendChild(related) - const chat = document.getElementById("chat-template") - secondaryInner.appendChild(chat) - secondaryInner.appendChild(comments) + initialSetup() } - else if (hasApplied == 1){ - console.log("from big to medium") + else if (hasApplied == 1){ //from big to medium + document.getElementById("primary-inner").appendChild(document.getElementById("related")) } hasApplied = 2 } - else { /// 1000 < - if(hasApplied == 2){ //from 1600 + else { /// <1000 + if(hasApplied == 1){ + document.getElementById("primary-inner").appendChild(document.getElementById("related")) + let comments = document.querySelector("#comments") + let below = document.getElementById("below"); + below.appendChild(comments) } - else if (hasApplied == 1){ //from 1000 + else if (hasApplied == 2){ + let comments = document.querySelector("#comments") + let below = document.getElementById("below"); + below.appendChild(comments) } hasApplied = 0 } @@ -211,6 +194,38 @@ ImprovedTube.commentsSidebar = function() { } }, 250); } + function initialSetup() { + let secondaryInner = document.getElementById("secondary-inner"); + let primaryInner = document.getElementById("primary-inner"); + let comments = document.querySelector("#comments"); + setTimeout(() => { + primaryInner.appendChild(document.getElementById("panels")); + primaryInner.appendChild(document.getElementById("related")) + secondaryInner.appendChild(document.getElementById("chat-template")) + secondaryInner.appendChild(comments) + }) + } + function resizePlayer() { + const width = video.offsetWidth; + const player = document.getElementById("player"); + document.getElementById("primary").style.width = `${width}px` + player.style.width = `${width}px` + } + function applyObserver(){ + const debouncedResizePlayer = debounce(resizePlayer, 200); + const resizeObserver = new ResizeObserver(debouncedResizePlayer); + resizeObserver.observe(video); + } + function debounce(callback, delay) { + let timerId; + return function (...args) { + clearTimeout(timerId); + timerId = setTimeout(() => { + callback.apply(this, args); + }, delay); + }; + } + } /*------------------------------------------------------------------------------ SIDEBAR From b0c831220c49b41189240b8226a88f56be6eddbb Mon Sep 17 00:00:00 2001 From: D-Rek Date: Fri, 9 Jun 2023 16:31:44 +0200 Subject: [PATCH 3/8] Updated selectors --- .../appearance/comments/comments.css | 4 +- .../www.youtube.com/appearance.js | 39 +++++++++---------- 2 files changed, 22 insertions(+), 21 deletions(-) diff --git a/js&css/extension/www.youtube.com/appearance/comments/comments.css b/js&css/extension/www.youtube.com/appearance/comments/comments.css index 400f3b9ad..d37a3fba4 100644 --- a/js&css/extension/www.youtube.com/appearance/comments/comments.css +++ b/js&css/extension/www.youtube.com/appearance/comments/comments.css @@ -69,6 +69,8 @@ } html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary-content {overflow: hidden;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns {justify-content: flex-start !important; overflow-x: scroll;} + } @media screen and (min-width: 1000px){ html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary, @@ -114,7 +116,7 @@ html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-sec html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-continuation-item-renderer {min-width: 300px; max-width: 420px !important; flex-grow: 1; flex-basis: 0 !important; margin-right: 8px;} /* CUSTOM ENHANCEMENTS */ -html[data-page-type=video] #playlist { max-height: 460px; } /* SHOULD FIX #1693 */ +html[data-page-type=video] #playlist #items { max-height: calc(70px * 4 + 4px) ; padding-bottom: 0;} /* SHOULD FIX #1693, currently shows 4 videos */ html[data-page-type=video] ytd-watch-flexy #chat > tp-yt-paper-button#label { width:calc(100% - 40px); } html[data-page-type=video] ytd-watch-flexy #right-arrow-container.ytd-merch-shelf-renderer { right: 44px !important; } diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js index beb4c6ff3..2dfd7a9e5 100644 --- a/js&css/web-accessible/www.youtube.com/appearance.js +++ b/js&css/web-accessible/www.youtube.com/appearance.js @@ -139,9 +139,8 @@ ImprovedTube.playerRemainingDuration = function () { Comments Sidebar ------------------------------------------------------------------------------*/ ImprovedTube.commentsSidebar = function() { - console.log("It's applying kek") - const video = document.querySelector("#player video.video-stream") || document.querySelector("#container video"); - let hasApplied = 0 + const video = document.querySelector("#player .ytp-chrome-bottom") || document.querySelector("#container .ytp-chrome-bottom"); + let hasApplied = 0; if(ImprovedTube.storage.comments_sidebar === true){ sidebar(); setGrid(); @@ -162,35 +161,35 @@ ImprovedTube.commentsSidebar = function() { } else if(window.matchMedia("(min-width: 1000px)").matches) { if (!hasApplied) { - initialSetup() + initialSetup(); } else if (hasApplied == 1){ //from big to medium - document.getElementById("primary-inner").appendChild(document.getElementById("related")) + document.getElementById("primary-inner").appendChild(document.getElementById("related")); } hasApplied = 2 } else { /// <1000 if(hasApplied == 1){ - document.getElementById("primary-inner").appendChild(document.getElementById("related")) - let comments = document.querySelector("#comments") + document.getElementById("primary-inner").appendChild(document.getElementById("related")); + let comments = document.querySelector("#comments"); let below = document.getElementById("below"); - below.appendChild(comments) + below.appendChild(comments); } else if (hasApplied == 2){ - let comments = document.querySelector("#comments") + let comments = document.querySelector("#comments"); let below = document.getElementById("below"); - below.appendChild(comments) + below.appendChild(comments); } - hasApplied = 0 + hasApplied = 0; } } function setGrid(){ let checkParentInterval = setInterval(() => { - container = document.querySelector("#related ytd-compact-video-renderer.style-scope")?.parentElement + container = document.querySelector("#related ytd-compact-video-renderer.style-scope")?.parentElement; if (container) { clearInterval(checkParentInterval); - container.style.display = "flex" - container.style.flexWrap = "wrap" + container.style.display = "flex"; + container.style.flexWrap = "wrap"; } }, 250); } @@ -201,15 +200,15 @@ ImprovedTube.commentsSidebar = function() { setTimeout(() => { primaryInner.appendChild(document.getElementById("panels")); primaryInner.appendChild(document.getElementById("related")) - secondaryInner.appendChild(document.getElementById("chat-template")) - secondaryInner.appendChild(comments) + secondaryInner.appendChild(document.getElementById("chat-template")); + secondaryInner.appendChild(comments); }) } function resizePlayer() { - const width = video.offsetWidth; - const player = document.getElementById("player"); - document.getElementById("primary").style.width = `${width}px` - player.style.width = `${width}px` + const width = video.offsetWidth + 24; + const player = document.querySelector("#player.style-scope.ytd-watch-flexy"); + document.getElementById("primary").style.width = `${width}px`; + player.style.width = `${width}px`; } function applyObserver(){ const debouncedResizePlayer = debounce(resizePlayer, 200); From db43ad4c596a649a08b46de24d9485af910d14cb Mon Sep 17 00:00:00 2001 From: D-Rek Date: Fri, 9 Jun 2023 16:56:41 +0200 Subject: [PATCH 4/8] Created function to style scrollbars --- .../www.youtube.com/appearance.js | 33 +++++++++++++++++++ 1 file changed, 33 insertions(+) diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js index 2dfd7a9e5..4068d01ef 100644 --- a/js&css/web-accessible/www.youtube.com/appearance.js +++ b/js&css/web-accessible/www.youtube.com/appearance.js @@ -143,6 +143,7 @@ ImprovedTube.commentsSidebar = function() { let hasApplied = 0; if(ImprovedTube.storage.comments_sidebar === true){ sidebar(); + styleScrollbars(); setGrid(); applyObserver(); window.addEventListener("resize", sidebar) @@ -210,6 +211,38 @@ ImprovedTube.commentsSidebar = function() { document.getElementById("primary").style.width = `${width}px`; player.style.width = `${width}px`; } + function styleScrollbars(){ + if (!navigator.userAgent.toLowerCase().includes("mac")){ + let color, colorHover + const isDarkMode = document.querySelector('ytd-app').getComputedStyle(ytdAppElement).getPropertyValue('--yt-spec-base-background') == "#0f0f0f"; + if(isDarkMode) [color,colorHover] = ["#616161", "#909090"]; + else [color,colorHover] = ["#aaaaaa", "#717171"]; + const style = document.createElement("style"); + const cssRule = ` + #primary, #secondary { + overflow: overlay !important; + } + + ::-webkit-scrollbar + { + width: 16px; + height: 7px; + } + + ::-webkit-scrollbar-thumb{ + background-color: #${color}; + border-radius: 10px; + border: 4px solid transparent; + background-clip: padding-box; // <== make the border work + } + + ::-webkit-scrollbar-thumb:hover{ + background-color:#${colorHover}; + }`; + style.appendChild(document.createTextNode(cssRule)); + document.head.appendChild(style); + } + } function applyObserver(){ const debouncedResizePlayer = debounce(resizePlayer, 200); const resizeObserver = new ResizeObserver(debouncedResizePlayer); From 2616276a53a8008f9671500c4d638c7cd0a3a850 Mon Sep 17 00:00:00 2001 From: D-Rek Date: Sat, 10 Jun 2023 13:15:38 +0200 Subject: [PATCH 5/8] Updated styles --- .../appearance/comments/comments.css | 48 ++++++++++--------- .../www.youtube.com/appearance.js | 2 +- 2 files changed, 27 insertions(+), 23 deletions(-) diff --git a/js&css/extension/www.youtube.com/appearance/comments/comments.css b/js&css/extension/www.youtube.com/appearance/comments/comments.css index d37a3fba4..cde47eaf4 100644 --- a/js&css/extension/www.youtube.com/appearance/comments/comments.css +++ b/js&css/extension/www.youtube.com/appearance/comments/comments.css @@ -10,24 +10,23 @@ --------------------------------------------------------------*/ /* 2 COLS FEATURE */ -@media screen and (min-width: 1984px) { +@media screen and (min-width: 1952px) { + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related { flex-shrink: 4; min-width: 300px;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related::before { content: ""; height: 24px; display: block;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related { width: auto !important;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #columns { max-width: 100%;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner {padding-top: 24px; border-left: 1px solid var(--yt-spec-10-percent-layer)} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary {min-width: 300px !important; max-width: 420px;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary { flex: 0 0 auto; max-width: 1280px !important; } html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary {flex-shrink: 2;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related { flex-shrink: 4; min-width: 338px;} - /*-------------------------------------------------------------- #TODO: there should be 2 new option in settings: 1 - [it-comments-sidebar-left] so we can shift comments-sidebar to the left (should appear only when 'Comments:Sidebar' is activated). - 2 - [swap-sidebars] so we exchange the sidebars order (that would only apply to 1998px+ wide-screens, because player resize + 2 - [swap-sidebars] so we exchange the sidebars order (that would only apply to 1951px+ wide-screens, because player resize is messy AT THE MOMENT. Once resize works properly we can re-arrange this entire media-screen in its own setting option too). Might also think on the edge-cases were both options are active --------------------------------------------------------------*/ @@ -37,49 +36,54 @@ /* PADDINGS */ html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #primary {padding: 0 14px 0 24px;} html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary {padding-right: 0;} - html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary-inner {padding: 0 14px;} - html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #related > * {padding: 0 24px 0 14px; border-left: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary-inner {padding-left: 14px; padding-right: 14px;} html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #primary {padding: 0 14px} html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary-inner {padding-right: 24px; padding-left: 14px} - html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #related > * {padding: 0 14px 0 24px; border-right: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related, html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related{ height: inherit; overflow-y: scroll} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner > :first-child, + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-right: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related > :first-child {padding-top: 24px;} - - - /* html[data-page-type=video][it-comments-sidebar='true']:not([it-player-size='1080p']):not([it-player-size='1440p']):not([it-player-size='2160p']):not([it-player-size='custom']):not([it-player-size='max_width']) ytd-watch-flexy:not([fullscreen]) #primary { - min-width: min(calc(100vw - 1000px), 1260px) !important; max-width: 1260px !important; } - */ + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #related{ padding: 0 14px 0 24px; border-right: 1px solid var(--yt-spec-10-percent-layer) } + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #related{ padding: 0 24px 0 14px; border-left: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #columns, + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #columns {height: auto} + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)} } -@media screen and (min-width: 1000px) and (max-width: 1983px) { +@media screen and (min-width: 1000px) and (max-width: 1951px) { html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {max-width: calc((100% - 420px) - 48px) !important;} /*UP TO (-658px)*/ html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary { width: unset !important; max-width: 420px !important;} /*UP TO 658px*/ html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #columns {max-width: 100%; min-width: unset !important;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary { margin-right: 0; padding-right: 0 !important; min-width: 300px !important;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner {padding-left: 24px; padding-top: 24px; padding-right: 24px;} - html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary-inner { border-right: 1px solid var(--yt-spec-10-percent-layer);} - html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary-inner { border-left: 1px solid var(--yt-spec-10-percent-layer);} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #primary, - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #primary { + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #primary{ margin: 0; padding: 24px 24px 0 24px; } html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary-content {overflow: hidden;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns {justify-content: flex-start !important; overflow-x: scroll;} - + } @media screen and (min-width: 1000px){ html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary, html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary{margin-top: 0 !important; padding-top: 0 !important; padding-right: 0;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary::before { content: ""; height: 24px; display: block;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {flex: 1 0 auto;padding: 0 24px; margin: 0;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary-inner {padding-top: 24px;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #player {margin: 0 auto;} - /* DIFFERENT HEADERS HEIGHT*/ + /* BORDERS */ + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-right: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)} + + + /* DIFFERENT HEADERS HEIGHT */ html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] #columns, /* BUG: if header has never been changed back and forth to normal, [it-header-position=normal] selector isn't applied */ html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] #columns { height: calc(100vh - 56px); @@ -95,7 +99,7 @@ html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary, html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary{ - height: inherit; overflow-y: scroll + height: inherit; overflow-y: scroll; overflow-x: hidden !important; } } @@ -116,7 +120,7 @@ html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-sec html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-continuation-item-renderer {min-width: 300px; max-width: 420px !important; flex-grow: 1; flex-basis: 0 !important; margin-right: 8px;} /* CUSTOM ENHANCEMENTS */ -html[data-page-type=video] #playlist #items { max-height: calc(70px * 4 + 4px) ; padding-bottom: 0;} /* SHOULD FIX #1693, currently shows 4 videos */ +html[data-page-type=video] #playlist #items { max-height: calc(70px * 4 + 4px) ; padding-bottom: 0;} /* MIGHT FIX #1693, currently shows 4 videos */ html[data-page-type=video] ytd-watch-flexy #chat > tp-yt-paper-button#label { width:calc(100% - 40px); } html[data-page-type=video] ytd-watch-flexy #right-arrow-container.ytd-merch-shelf-renderer { right: 44px !important; } diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js index 2dfd7a9e5..76f76583c 100644 --- a/js&css/web-accessible/www.youtube.com/appearance.js +++ b/js&css/web-accessible/www.youtube.com/appearance.js @@ -149,7 +149,7 @@ ImprovedTube.commentsSidebar = function() { } function sidebar(){ resizePlayer(); - if(window.matchMedia("(min-width: 1984px)").matches) { + if(window.matchMedia("(min-width: 1951px)").matches) { if (!hasApplied) { initialSetup() setTimeout(() => {document.getElementById("columns").appendChild(document.getElementById("related"))}) From 53064127b111b37057a888207a9637f7ae2b6451 Mon Sep 17 00:00:00 2001 From: D-Rek Date: Mon, 12 Jun 2023 15:05:38 +0200 Subject: [PATCH 6/8] Style + Script cleanup - Copied styles from master branch + some changes - Removed "comment" from styleScrollbars func --- .../appearance/comments/comments.css | 72 +++++++++++-------- .../www.youtube.com/appearance.js | 8 +-- 2 files changed, 45 insertions(+), 35 deletions(-) diff --git a/js&css/extension/www.youtube.com/appearance/comments/comments.css b/js&css/extension/www.youtube.com/appearance/comments/comments.css index d37a3fba4..702ba08e4 100644 --- a/js&css/extension/www.youtube.com/appearance/comments/comments.css +++ b/js&css/extension/www.youtube.com/appearance/comments/comments.css @@ -10,24 +10,23 @@ --------------------------------------------------------------*/ /* 2 COLS FEATURE */ -@media screen and (min-width: 1984px) { +@media screen and (min-width: 1952px) { + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related { flex-shrink: 4; min-width: 300px;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related::before { content: ""; height: 24px; display: block;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related { width: auto !important;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #columns { max-width: 100%;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner {padding-top: 24px; border-left: 1px solid var(--yt-spec-10-percent-layer)} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary {min-width: 300px !important; max-width: 420px;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary { flex: 0 0 auto; max-width: 1280px !important; } html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary {flex-shrink: 2;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related { flex-shrink: 4; min-width: 338px;} - /*-------------------------------------------------------------- #TODO: there should be 2 new option in settings: 1 - [it-comments-sidebar-left] so we can shift comments-sidebar to the left (should appear only when 'Comments:Sidebar' is activated). - 2 - [swap-sidebars] so we exchange the sidebars order (that would only apply to 1998px+ wide-screens, because player resize + 2 - [swap-sidebars] so we exchange the sidebars order (that would only apply to 1951px+ wide-screens, because player resize is messy AT THE MOMENT. Once resize works properly we can re-arrange this entire media-screen in its own setting option too). Might also think on the edge-cases were both options are active --------------------------------------------------------------*/ @@ -37,67 +36,76 @@ /* PADDINGS */ html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #primary {padding: 0 14px 0 24px;} html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary {padding-right: 0;} - html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary-inner {padding: 0 14px;} - html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #related > * {padding: 0 24px 0 14px; border-left: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary-inner {padding-left: 14px; padding-right: 14px;} html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #primary {padding: 0 14px} html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary-inner {padding-right: 24px; padding-left: 14px} - html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #related > * {padding: 0 14px 0 24px; border-right: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related, html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related{ height: inherit; overflow-y: scroll} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner > :first-child, + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-right: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related > :first-child {padding-top: 24px;} - - - /* html[data-page-type=video][it-comments-sidebar='true']:not([it-player-size='1080p']):not([it-player-size='1440p']):not([it-player-size='2160p']):not([it-player-size='custom']):not([it-player-size='max_width']) ytd-watch-flexy:not([fullscreen]) #primary { - min-width: min(calc(100vw - 1000px), 1260px) !important; max-width: 1260px !important; } - */ + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #related{ padding: 0 14px 0 24px; border-right: 1px solid var(--yt-spec-10-percent-layer) } + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #related{ padding: 0 24px 0 14px; border-left: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #columns, + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #columns {height: auto} + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)} } -@media screen and (min-width: 1000px) and (max-width: 1983px) { +@media screen and (min-width: 1000px) and (max-width: 1951px) { html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {max-width: calc((100% - 420px) - 48px) !important;} /*UP TO (-658px)*/ html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary { width: unset !important; max-width: 420px !important;} /*UP TO 658px*/ html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #columns {max-width: 100%; min-width: unset !important;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary { margin-right: 0; padding-right: 0 !important; min-width: 300px !important;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner {padding-left: 24px; padding-top: 24px; padding-right: 24px;} - html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary-inner { border-right: 1px solid var(--yt-spec-10-percent-layer);} - html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary-inner { border-left: 1px solid var(--yt-spec-10-percent-layer);} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary-inner {padding-left: 24px; padding-right: 24px;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #primary, - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #primary { + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #primary{ margin: 0; padding: 24px 24px 0 24px; } html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary-content {overflow: hidden;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns {justify-content: flex-start !important; overflow-x: scroll;} - + } @media screen and (min-width: 1000px){ html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary, html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary{margin-top: 0 !important; padding-top: 0 !important; padding-right: 0;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary::before { content: ""; height: 24px; display: block;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {flex: 1 0 auto;padding: 0 24px; margin: 0;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary-inner {padding-top: 24px;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #player {margin: 0 auto;} - /* DIFFERENT HEADERS HEIGHT*/ - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] #columns, /* BUG: if header has never been changed back and forth to normal, [it-header-position=normal] selector isn't applied */ - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] #columns { + /* BORDERS */ + html[data-page-type=video][it-comments-sidebar='true'][it-sidebar-left='true'] ytd-watch-flexy #secondary{border-right: 1px solid var(--yt-spec-10-percent-layer)} + html[data-page-type=video][it-comments-sidebar='true']:not([it-sidebar-left='true']) ytd-watch-flexy #secondary{border-left: 1px solid var(--yt-spec-10-percent-layer)} + + + /* DIFFERENT HEADERS HEIGHT */ + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns, /* BUG: if header has never been changed back and forth to normal, [it-header-position=normal] selector isn't applied */ + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns { height: calc(100vh - 56px); } - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover] #columns, - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover_on_video_page] #columns{ + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover_on_video_page] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns{ height: calc(100vh - 14px); } - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden] #columns, - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden_on_video_page] #columns{ + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns, + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hidden_on_video_page] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns{ height: calc(100vh); } html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #primary, html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #secondary{ - height: inherit; overflow-y: scroll + height: inherit; overflow-y: scroll; overflow-x: hidden !important; + } + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns {overflow: hidden;} + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[theater] #columns + html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy[fullscreen] #columns{ + height: auto; } - } @@ -113,10 +121,12 @@ html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #donation html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-video-renderer, html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-radio-renderer, html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-compact-playlist-renderer, -html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-continuation-item-renderer {min-width: 300px; max-width: 420px !important; flex-grow: 1; flex-basis: 0 !important; margin-right: 8px;} +html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-secondary-results-renderer ytd-continuation-item-renderer { + min-width: 300px; max-width: 420px !important; flex-grow: 1; flex-basis: 0 !important; flex-direction: row; margin-right: 8px; +} /* CUSTOM ENHANCEMENTS */ -html[data-page-type=video] #playlist #items { max-height: calc(70px * 4 + 4px) ; padding-bottom: 0;} /* SHOULD FIX #1693, currently shows 4 videos */ +html[data-page-type=video] #playlist #items { max-height: calc(70px * 4 + 4px) ; padding-bottom: 0;} /* MIGHT FIX #1693, currently shows 4 videos */ html[data-page-type=video] ytd-watch-flexy #chat > tp-yt-paper-button#label { width:calc(100% - 40px); } html[data-page-type=video] ytd-watch-flexy #right-arrow-container.ytd-merch-shelf-renderer { right: 44px !important; } diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js index 4068d01ef..6fd67500d 100644 --- a/js&css/web-accessible/www.youtube.com/appearance.js +++ b/js&css/web-accessible/www.youtube.com/appearance.js @@ -214,7 +214,7 @@ ImprovedTube.commentsSidebar = function() { function styleScrollbars(){ if (!navigator.userAgent.toLowerCase().includes("mac")){ let color, colorHover - const isDarkMode = document.querySelector('ytd-app').getComputedStyle(ytdAppElement).getPropertyValue('--yt-spec-base-background') == "#0f0f0f"; + const isDarkMode = getComputedStyle(document.querySelector('ytd-app')).getPropertyValue('--yt-spec-base-background') == "#0f0f0f"; if(isDarkMode) [color,colorHover] = ["#616161", "#909090"]; else [color,colorHover] = ["#aaaaaa", "#717171"]; const style = document.createElement("style"); @@ -230,14 +230,14 @@ ImprovedTube.commentsSidebar = function() { } ::-webkit-scrollbar-thumb{ - background-color: #${color}; + background-color: ${color}; border-radius: 10px; border: 4px solid transparent; - background-clip: padding-box; // <== make the border work + background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover{ - background-color:#${colorHover}; + background-color: ${colorHover}; }`; style.appendChild(document.createTextNode(cssRule)); document.head.appendChild(style); From e2faa9ca5c297ed930665905b2f40abf3e39ca3d Mon Sep 17 00:00:00 2001 From: D-Rek Date: Wed, 14 Jun 2023 23:46:35 +0200 Subject: [PATCH 7/8] Update styles --- .../www.youtube.com/appearance/comments/comments.css | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/js&css/extension/www.youtube.com/appearance/comments/comments.css b/js&css/extension/www.youtube.com/appearance/comments/comments.css index 702ba08e4..86dc41034 100644 --- a/js&css/extension/www.youtube.com/appearance/comments/comments.css +++ b/js&css/extension/www.youtube.com/appearance/comments/comments.css @@ -12,7 +12,6 @@ /* 2 COLS FEATURE */ @media screen and (min-width: 1952px) { html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related { flex-shrink: 4; min-width: 300px;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #related::before { content: ""; height: 24px; display: block;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy:not([theater]):not([fullscreen]) #related { width: auto !important;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #columns { max-width: 100%;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary {min-width: 300px !important; max-width: 420px;} @@ -26,7 +25,7 @@ /*-------------------------------------------------------------- #TODO: there should be 2 new option in settings: 1 - [it-comments-sidebar-left] so we can shift comments-sidebar to the left (should appear only when 'Comments:Sidebar' is activated). - 2 - [swap-sidebars] so we exchange the sidebars order (that would only apply to 1951px+ wide-screens, because player resize + 2 - [swap-sidebars] so we exchange the sidebars order (that would only apply to 1952px+ wide-screens, because player resize is messy AT THE MOMENT. Once resize works properly we can re-arrange this entire media-screen in its own setting option too). Might also think on the edge-cases were both options are active --------------------------------------------------------------*/ @@ -73,7 +72,6 @@ @media screen and (min-width: 1000px){ html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary, html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary{margin-top: 0 !important; padding-top: 0 !important; padding-right: 0;} - html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #secondary::before { content: ""; height: 24px; display: block;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary {flex: 1 0 auto;padding: 0 24px; margin: 0;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #primary-inner {padding-top: 24px;} html[data-page-type=video][it-comments-sidebar='true'] ytd-watch-flexy #player {margin: 0 auto;} @@ -85,7 +83,8 @@ /* DIFFERENT HEADERS HEIGHT */ html[data-page-type=video][it-comments-sidebar='true'][it-header-position=normal] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns, /* BUG: if header has never been changed back and forth to normal, [it-header-position=normal] selector isn't applied */ - html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns { + html[data-page-type=video][it-comments-sidebar='true']:not([it-header-position^=h]) ytd-watch-flexy:not([theater]):not([fullscreen]) #columns, /* temporary fix */ + html[data-page-type=video][it-comments-sidebar='true'][it-header-position=static] #columns{ height: calc(100vh - 56px); } html[data-page-type=video][it-comments-sidebar='true'][it-header-position=hover] ytd-watch-flexy:not([theater]):not([fullscreen]) #columns, @@ -126,7 +125,7 @@ html[data-page-type=video][it-comments-sidebar='true'] #items.ytd-watch-next-sec } /* CUSTOM ENHANCEMENTS */ -html[data-page-type=video] #playlist #items { max-height: calc(70px * 4 + 4px) ; padding-bottom: 0;} /* MIGHT FIX #1693, currently shows 4 videos */ +html[data-page-type=video] #playlist #items { max-height: calc(70px * 4 + 4px) ; padding-bottom: 0;} /* MIGHT FIX #1693, currently shows up to 4 videos */ html[data-page-type=video] ytd-watch-flexy #chat > tp-yt-paper-button#label { width:calc(100% - 40px); } html[data-page-type=video] ytd-watch-flexy #right-arrow-container.ytd-merch-shelf-renderer { right: 44px !important; } From d770f8ecc2582f88f2439df7f27a39435c243a42 Mon Sep 17 00:00:00 2001 From: Derek Date: Thu, 15 Jun 2023 01:00:03 +0200 Subject: [PATCH 8/8] typo + closing 'feature-scrollbar' branch --- js&css/web-accessible/www.youtube.com/appearance.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/js&css/web-accessible/www.youtube.com/appearance.js b/js&css/web-accessible/www.youtube.com/appearance.js index 598bb61b8..3e2ed64c8 100644 --- a/js&css/web-accessible/www.youtube.com/appearance.js +++ b/js&css/web-accessible/www.youtube.com/appearance.js @@ -150,7 +150,8 @@ ImprovedTube.commentsSidebar = function() { } function sidebar(){ resizePlayer(); - if(window.matchMedia("(min-width: 1951px)").matches) { + if(window.matchMedia("(min-width: 1952px)").matches) { + if (!hasApplied) { initialSetup() setTimeout(() => {document.getElementById("columns").appendChild(document.getElementById("related"))})