make like/dislike bar and tooltip exactly same as youtube

Extensions/chrome/content-style.css

@@ -1,46 +1,26 @@
 #return-youtube-dislike-bar-container {
-  background: #c6c6c6;
+  background: var(--yt-spec-icon-disabled);
+  border-radius: 2px;
 }
 
 #return-youtube-dislike-bar {
-  background: #5094c8;
-}
-
-[dark] #return-youtube-dislike-bar-container {
-}
-
-[dark] #return-youtube-dislike-bar {
-  background: #3ea6ff;
+  background: var(--yt-spec-text-primary);
+  border-radius: 2px;
+  transition: all 0.15s ease-in-out;
 }
 
 .ryd-tooltip {
   position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
-  cursor: pointer;
-  height: 10px;
-  margin-bottom: -5px;
+  display: block;
+  height: 2px;
+  top: 9px;
 }
 
-/* Tooltip text */
-.ryd-tooltip .ryd-tooltiptext {
-  visibility: hidden;
-  width: 120px;
-  background-color: #000000c4;
-  color: #fff;
-  text-align: center;
-  padding: 5px 0;
-  border-radius: 6px;
-
-  /* Position the tooltip text - see examples below! */
+.ryd-tooltip-bar-container {
+  width: 100%;
+  height: 2px;
   position: absolute;
-  z-index: 1;
-  bottom: 15px;
-  left: 10px;
-  font-size: 12px;
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.ryd-tooltip:hover .ryd-tooltiptext {
-  visibility: visible;
+  padding-top: 6px;
+  padding-bottom: 28px;
+  top: -6px;
 }

Extensions/chrome/script.js

@@ -163,41 +163,47 @@
     var rateBar = document.getElementById(
       'return-youtube-dislike-bar-container'
     );
+
     const widthPx =
       getButtons().children[0].clientWidth +
-      getButtons().children[1].clientWidth;
+      getButtons().children[1].clientWidth +
+      8;
 
     const widthPercent =
       likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
 
     if (!rateBar) {
-      document.getElementById('menu-container').insertAdjacentHTML(
-        'beforeend',
+      document.getElementById("menu-container").insertAdjacentHTML(
+        "beforeend",
         `
-<div class="ryd-tooltip">
-  <div
-    id="return-youtube-dislike-bar-container"
-    style="width: ${widthPx}px;
-                  height: 3px; margin-left: 6px;"
-  >
-    <div
-      id="return-youtube-dislike-bar"
-      style="width: ${widthPercent}%; height: 100%"
-    ></div>
-  </div>
-
-  <span id="ryd-dislike-tooltip" class="ryd-tooltiptext ryd-tooltip-top">${likes}&nbsp;/&nbsp;${dislikes}</span>
-</div>
-`
+          <div class="ryd-tooltip" style="width: ${widthPx}px">
+          <div class="ryd-tooltip-bar-container">
+             <div
+                id="return-youtube-dislike-bar-container"
+                style="width: 100%; height: 2px;"
+                >
+                <div
+                   id="return-youtube-dislike-bar"
+                   style="width: ${widthPercent}%; height: 100%"
+                   ></div>
+             </div>
+          </div>
+          <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">
+             <!--css-build:shady-->${likes}&nbsp;/&nbsp;${dislikes}
+          </tp-yt-paper-tooltip>
+          </div>
+  `
       );
     } else {
       document.getElementById(
-        'return-youtube-dislike-bar-container'
-      ).style.width = widthPx + 'px';
-      document.getElementById('return-youtube-dislike-bar').style.width =
-        widthPercent + '%';
-
-      document.getElementById('ryd-dislike-tooltip').innerHTML = `${likes}&nbsp;/&nbsp;${dislikes}`
+        "return-youtube-dislike-bar-container"
+      ).style.width = widthPx + "px";
+      document.getElementById("return-youtube-dislike-bar").style.width =
+        widthPercent + "%";
+
+      document
+        .getElementById("ryd-dislike-tooltip")
+        .firstChild().innerHTML = `${likes}&nbsp;/&nbsp;${dislikes}</div>`;
     }
   }
 

Extensions/firefox/content-style.css

@@ -1,46 +1,26 @@
 #return-youtube-dislike-bar-container {
-  background: #c6c6c6;
+  background: var(--yt-spec-icon-disabled);
+  border-radius: 2px;
 }
 
 #return-youtube-dislike-bar {
-  background: #5094c8;
-}
-
-[dark] #return-youtube-dislike-bar-container {
-}
-
-[dark] #return-youtube-dislike-bar {
-  background: #3ea6ff;
+  background: var(--yt-spec-text-primary);
+  border-radius: 2px;
+  transition: all 0.15s ease-in-out;
 }
 
 .ryd-tooltip {
   position: relative;
-  display: inline-block;
-  border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
-  cursor: pointer;
-  height: 10px;
-  margin-bottom: -5px;
+  display: block;
+  height: 2px;
+  top: 9px;
 }
 
-/* Tooltip text */
-.ryd-tooltip .ryd-tooltiptext {
-  visibility: hidden;
-  width: 120px;
-  background-color: #000000c4;
-  color: #fff;
-  text-align: center;
-  padding: 5px 0;
-  border-radius: 6px;
-
-  /* Position the tooltip text - see examples below! */
+.ryd-tooltip-bar-container {
+  width: 100%;
+  height: 2px;
   position: absolute;
-  z-index: 1;
-  bottom: 15px;
-  left: 10px;
-  font-size: 12px;
-}
-
-/* Show the tooltip text when you mouse over the tooltip container */
-.ryd-tooltip:hover .ryd-tooltiptext {
-  visibility: visible;
+  padding-top: 6px;
+  padding-bottom: 28px;
+  top: -6px;
 }

Extensions/firefox/script.js

@@ -170,42 +170,48 @@ function setEventListeners(evt) {
 
 function createRateBar(likes, dislikes) {
   var rateBar = document.getElementById("return-youtube-dislike-bar-container");
+  
   const widthPx =
-    getButtons().children[0].clientWidth + getButtons().children[1].clientWidth;
-
-  const widthPercent =
-    likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
-
-  if (!rateBar) {
-    document.getElementById("menu-container").insertAdjacentHTML(
-      "beforeend",
-      `
-<div class="ryd-tooltip">
-  <div
-    id="return-youtube-dislike-bar-container"
-    style="width: ${widthPx}px;
-                  height: 3px; margin-left: 6px;"
-  >
-    <div
-      id="return-youtube-dislike-bar"
-      style="width: ${widthPercent}%; height: 100%"
-    ></div>
-  </div>
-
-  <span i="ryd-dislike-tooltip" class="ryd-tooltiptext ryd-tooltip-top">${likes}&nbsp;/&nbsp;${dislikes}</span>
-</div>
-`
-    );
-  } else {
-    document.getElementById(
-      "return-youtube-dislike-bar-container"
-    ).style.width = widthPx + "px";
-    document.getElementById("return-youtube-dislike-bar").style.width =
-      widthPercent + "%";
-    document.getElementById(
-      "ryd-dislike-tooltip"
-    ).innerHTML = `${likes}&nbsp;/&nbsp;${dislikes}`;
-  }
+      getButtons().children[0].clientWidth +
+      getButtons().children[1].clientWidth +
+      8;
+
+    const widthPercent =
+      likes + dislikes > 0 ? (likes / (likes + dislikes)) * 100 : 50;
+
+    if (!rateBar) {
+      document.getElementById("menu-container").insertAdjacentHTML(
+        "beforeend",
+        `
+          <div class="ryd-tooltip" style="width: ${widthPx}px">
+          <div class="ryd-tooltip-bar-container">
+             <div
+                id="return-youtube-dislike-bar-container"
+                style="width: 100%; height: 2px;"
+                >
+                <div
+                   id="return-youtube-dislike-bar"
+                   style="width: ${widthPercent}%; height: 100%"
+                   ></div>
+             </div>
+          </div>
+          <tp-yt-paper-tooltip position="top" id="ryd-dislike-tooltip" class="style-scope ytd-sentiment-bar-renderer" role="tooltip" tabindex="-1">
+             <!--css-build:shady-->${likes}&nbsp;/&nbsp;${dislikes}
+          </tp-yt-paper-tooltip>
+          </div>
+  `
+      );
+    } else {
+      document.getElementById(
+        "return-youtube-dislike-bar-container"
+      ).style.width = widthPx + "px";
+      document.getElementById("return-youtube-dislike-bar").style.width =
+        widthPercent + "%";
+
+      document
+        .getElementById("ryd-dislike-tooltip")
+        .firstChild().innerHTML = `${likes}&nbsp;/&nbsp;${dislikes}</div>`;
+    }
 }
 
 // function sendVideoIds() {