diff options
| author | Dmitrii Selivanov <selivano.d@gmail.com> | 2022-11-10 17:00:08 +0300 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-11-10 17:00:08 +0300 |
| commit | 7e2e95feebb9e47122a4b0e693840c1f3878e3bf (patch) | |
| tree | 4750523d060d1ad23dda9ec65701b28451dc5c0c | |
| parent | f1891e0dbbbf225d0d30d9504bf2dd5e6b7a5528 (diff) | |
| parent | 02cb6fd398277f6a2dcaff81f4ba2ebab2949696 (diff) | |
Merge pull request #804 from mini-bomba/new-layout-fix
Fix ratiobar positioning in the new youtube design
| -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" |