diff options
author | mini-bomba <55105495+mini-bomba@users.noreply.github.com> | 2022-11-01 18:56:42 +0300 |
---|---|---|
committer | mini-bomba <55105495+mini-bomba@users.noreply.github.com> | 2022-11-01 18:57:32 +0300 |
commit | 02cb6fd398277f6a2dcaff81f4ba2ebab2949696 (patch) | |
tree | 4bf7321ab614c9d2877dfd7285cba0d84aa6af8f | |
parent | de1831f2c74032f8ccfe42a8eb174088363e011f (diff) |
Fix ratiobar positioning in the new youtube design
This is done by attaching the bar to the like/dislike button container instead of the whole interaction menu,
then using absolute positioning after modifying a few youtube styles.
-rw-r--r-- | Extensions/combined/content-style.css | 20 | ||||
-rw-r--r-- | Extensions/combined/src/bar.js | 6 |
2 files changed, 21 insertions, 5 deletions
diff --git a/Extensions/combined/content-style.css b/Extensions/combined/content-style.css index d8da7db..4e53f87 100644 --- a/Extensions/combined/content-style.css +++ b/Extensions/combined/content-style.css @@ -30,12 +30,21 @@ } .ryd-tooltip { - position: relative; display: block; height: 2px; +} + +.ryd-tooltip-old-design { + position: relative; top: 9px; } +.ryd-tooltip-new-design { + position: absolute; + bottom: -10px; + left: -4px; +} + .ryd-tooltip-bar-container { width: 100%; height: 2px; @@ -44,3 +53,12 @@ padding-bottom: 12px; top: -6px; } + +/* required to make the ratio bar visible in the new design */ +ytd-menu-renderer.ytd-watch-metadata { + overflow-y: visible !important; +} + +#top-level-buttons-computed { + position: relative !important; +} diff --git a/Extensions/combined/src/bar.js b/Extensions/combined/src/bar.js index 930f0f5..ebf9ad8 100644 --- a/Extensions/combined/src/bar.js +++ b/Extensions/combined/src/bar.js @@ -57,14 +57,12 @@ function createRateBar(likes, dislikes) { ( document.getElementById( - isNewDesign() ? "actions-inner" : "menu-container" + isNewDesign() ? "top-level-buttons-computed" : "menu-container" ) || document.querySelector("ytm-slim-video-action-bar-renderer") ).insertAdjacentHTML( "beforeend", ` - <div class="ryd-tooltip" style="width: ${widthPx}px${ - isNewDesign() ? "; margin-bottom: -2px" : "" - }"> + <div class="ryd-tooltip ryd-tooltip-${isNewDesign() ? "new" : "old"}-design" style="width: ${widthPx}px"> <div class="ryd-tooltip-bar-container"> <div id="ryd-bar-container" |