How to make this pill background align with the actual button text?

The pill shaped background needs to move lower left to be exactly behind the 1x

Here is the full script code in Tampermonkey.

// ==UserScript== // @name YouTube Playback Speed Toggle Button // @namespace http://tampermonkey.net/ // @version 2.2 // @description Adds a button to toggle YouTube video playback speed with fullscreen mode support and key bindings for speed control // @author Mike // @match https://www.youtube.com/* // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com // @grant none // ==/UserScript== (function () { 'use strict'; function addSpeedButton() { const settingsButton = document.querySelector('.ytp-settings-button'); if (!settingsButton) return; if (document.querySelector('#speed-toggle-button')) return; // Create the speed toggle button const speedToggleButton = document.createElement('button'); speedToggleButton.id = 'speed-toggle-button'; speedToggleButton.className = 'ytp-button'; speedToggleButton.textContent = '1x'; speedToggleButton.style.fontSize = '18px'; speedToggleButton.style.fontWeight = 'bold'; speedToggleButton.style.padding = '4px'; speedToggleButton.style.margin = '0'; speedToggleButton.style.position = 'relative'; speedToggleButton.style.left = '10px'; speedToggleButton.style.top = '-12px'; // Add tooltip const tooltip = document.createElement('div'); tooltip.className = 'ytp-tooltip custom-tooltip'; tooltip.textContent = 'Adjust speed (s)'; tooltip.style.position = 'absolute'; tooltip.style.padding = '6px 8px'; tooltip.style.backgroundColor = '#181818'; tooltip.style.color = '#fff'; tooltip.style.fontSize = '13px'; tooltip.style.borderRadius = '4px'; tooltip.style.boxShadow = '0 2px 4px rgba(0, 0, 0, 0.2)'; tooltip.style.whiteSpace = 'nowrap'; tooltip.style.opacity = '0'; tooltip.style.transition = 'opacity 0.2s'; tooltip.style.pointerEvents = 'none'; tooltip.style.zIndex = '9999'; document.body.appendChild(tooltip); function showTooltip() { const rect = speedToggleButton.getBoundingClientRect(); tooltip.style.left = `${rect.left + rect.width / 2 - tooltip.offsetWidth / 2}px`; tooltip.style.top = `${rect.top + window.scrollY - tooltip.offsetHeight - 8}px`; tooltip.style.opacity = '1'; } function hideTooltip() { tooltip.style.opacity = '0'; } speedToggleButton.addEventListener('mouseover', showTooltip); speedToggleButton.addEventListener('mouseout', hideTooltip); // Function to adjust playback speed function adjustSpeed(delta) { const video = document.querySelector('video'); if (video) { let newSpeed = Math.max(0.2, Math.min(3, video.playbackRate + delta)); // Limit speed between 0.2x and 3x video.playbackRate = newSpeed; speedToggleButton.textContent = `${newSpeed.toFixed(1)}x`; } } // Click functionality: Increment speed by 0.2, loop back to 1x after 2.0x speedToggleButton.addEventListener('click', () => { const video = document.querySelector('video'); if (video) { let currentSpeed = video.playbackRate; let newSpeed = currentSpeed >= 2.0 ? 1 : currentSpeed + 0.2; // Loop back to 1x after 2.0x video.playbackRate = parseFloat(newSpeed.toFixed(1)); speedToggleButton.textContent = `${newSpeed.toFixed(1)}x`; } }); // Event listeners for key bindings document.addEventListener('keydown', (event) => { const activeElement = document.activeElement; const isInputField = activeElement.tagName === 'INPUT' || activeElement.tagName === 'TEXTAREA' || activeElement.isContentEditable; if (!isInputField) { if (event.key.toLowerCase() === 's') { adjustSpeed(0.2); // Increase speed } else if (event.key.toLowerCase() === 'a') { adjustSpeed(-0.2); // Decrease speed } else if (event.key.toLowerCase() === 'r') { // Reset speed to normal const video = document.querySelector('video'); if (video) { video.playbackRate = 1; // Reset to normal speed speedToggleButton.textContent = '1x'; // Update button text } } } }); // Insert button next to settings button settingsButton.parentNode.insertBefore(speedToggleButton, settingsButton.nextSibling); // Fullscreen detection function updateForFullscreen() { if (document.fullscreenElement) { // Increase font size in fullscreen mode speedToggleButton.style.fontSize = '24px'; tooltip.style.fontSize = '20px'; } else { // Revert to normal size speedToggleButton.style.fontSize = '18px'; tooltip.style.fontSize = '13px'; } } // Listen for fullscreen changes document.addEventListener('fullscreenchange', updateForFullscreen); } const observer = new MutationObserver(() => addSpeedButton()); observer.observe(document.body, { childList: true, subtree: true }); })();