itdominator
/
Better-Youtube-Plus
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactored, added volume indicator on scroll, added endless play mode

This commit is contained in:
Maxim Stewart 2020-05-15 20:36:21 -05:00
parent faed6edee5
commit d845c9ce4f
9 changed files with 301 additions and 238 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -4,18 +4,29 @@ Better YouTube + works to improve the YouTube experience by providing quick acce
* It allows quick thumbnail access of the video.
* It allows setting the loop mode easily.
* It allows setting the loop mode to a ranged set.
* It allows the video to be toggled to fixed or floating with drag functionality.
* It allows the video to be toggled to fixed or floating. (With drag functionality!)
* It allows volume control through the mouse-wheel when hovering over the player.
* It allows for quick access to the YouTube video slug.
* It lets Unix, Linux, and MacOS systems the ability to download the video using native app calls.
* It allows for NonStop watch mode. (i.e, no "Are you still there?" dialog.)
* It shows volume level as you scroll.
* It lets Unix, Linux, and MacOS systems have the ability to download the video using native app calls.
# Version: 1.4.3
* Added mutation observation for (un)fullscreen action.
* Cleaned up some log cruft and fixed CSS...
# Version: 1.5.0
* Refactored code.
* Resolved volume change not always sticking on Linux. (I think fixed...)
* Added a quick volume indicator when scrolling.
* Added NonStop watch mode.
# Download
https://addons.mozilla.org/en-US/firefox/addon/better-youtube-plus/
# Images
![1 Controls... ](images/pic1.png)
![2 Thumbnail list... ](images/pic2.png)
![3 Secondary controls... ](images/pic3.png)
![4 Video in float mode... ](images/pic4.png)
![5 Video moved around in float mode... ](images/pic5.png)
# NOTE
On *Nix systems download youtube-dl and use provided app in this repo to download videos.

BIN
images/pic1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.5 KiB

BIN
images/pic2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 386 KiB

BIN
images/pic3.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.9 KiB

BIN
images/pic4.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 424 KiB

BIN
images/pic5.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 768 KiB

5
src/manifest.json
View File

@ -1,13 +1,12 @@
{
"manifest_version": 2,
"name": "Better Youtube +",
"version": "1.4.0",
"version": "1.5.0",
"description": "Enhancements for Youtube to have a better experience.",
"applications": {
"gecko": {
"id": "betterYoutube@itdominator.com",
"strict_min_version": "50.0"
"id": "betterYoutube@itdominator.com"
}
},

374
src/scripts/betterYoutube.js
View File

@ -1,182 +1,183 @@
(function() {
// Declare variables
let slugInputTag, ytThumbImgMenu, ytEnhancerMenu; // Menu systems
let ytThumbnailBttn, ytMaxDefaultImg, ytHqDefaultImg, // Buttons & Images
ytLoopBttn, ytFloatBttn, ytAMaxDefaultImg, ytAHqDefaultImg;
const menuTemplate = `
<div class="ytMenuStyle" id="enhancerMenuID" style="display: block;">
<div id="ytThumbnailBttn" class="imageStyle" title="Video Thumbnails..."></div>
<div id="ytLoopBttn" class="imageStyle" title="Start Loop..."/></div>
<div id="ytFloatBttn" class="imageStyle" title="Float Video Container"/></div>
<div id="ytDownloadBttn" class="imageStyle" title="Download Video..."/></div>
</div>
`
const slugTemplate = `
<div id="enhancerMenuID2">
<div id="volumeContainerID" style="">
Volume <label id="volumeValueLbl"></label>
</div>
<input id="slugCopyZone" type="text">
<label>Loop Range Start:&nbsp;&nbsp;</label>
<input type="text" id="rangeStartID"/>
<label>Loop Range End:&nbsp;&nbsp;</label>
<input id="rangeEndID" type="text"/>
<label for="endlessPlayID">Endless Play</label>
<input type="checkbox" checked id="endlessPlayID" name="endlessPlayID"/>
</div>
`
const thumbnailTemplate = `
<div id="ytThumbMenuID" class="ytThumbMenuStyle" style="display: none;">
<a id="ytAMaxDefaultImgID" target="_blank" href=""><img id="ytMaxDefaultImgID" class="thumbImageStyle" src="" title="Max Resolution Default"/></a>
<a id="ytAHqDefaultImgID" target="_blank" href=""><img id="ytHqDefaultImgID" class="thumbImageStyle" src="" title="High Quality Default"/></a>
<a id="ytAMedDefaultImgID" target="_blank" href=""><img id="ytMqDefaultImgID" class="thumbImageStyle" src="" title="Medium Quality Default"></a>
<a id="ytASdDefaultImgID" target="_blank" href=""><img id="ytSdDefaultImgID" class="thumbImageStyle" src="" title="Standard Quality Default"/></a>
</div>
`
const popedContainerTemplate = `
<div id="draggable" style="display:none; block; top: 114px; left: 408px;">
<iframe id="popIframe" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
autoplay="" allowfullscreen="true" width="650px" height="400px" frameborder="0" src="" />
</iframe>
</div>
`
let mastHead, mainContentArea, playerWindow; // Youtube Player container
let video, containerOfPlyrWndow, poppedContainer; // Video accessor
let part, videoSlug, temp; // Image part
// Declare other variables
let ytThumbImgMenu, ytEnhancerMenu, ytEnhancerMenu2; // Menu systems
let ytThumbnailBttn, ytLoopBttn, ytFloatBttn, ytDownloadBttn; // Menu Buttons
let ytMaxDefaultImg, ytHqDefaultImg, ytAMaxDefaultImg, ytAHqDefaultImg; // Thumbnail images
let mainContentArea, playerWindow, containerOfPlyrWndow, video; // Youtube Player container
let videoTimeLength, videoTimeCurent, ytRangeStart, ytRangeEnd,
ytdVideoIntervalLoop;
slugInputTag, endlessPlayTag, ytVideoIntervalLoop;
let poppedContainer, videoSlug, volumeLbl, part;
let loopingInterval = false;
let count = 0;
let shouldHideVol = true;
let OSName = "";
let count = 0;
// confirm dialog elm
const isYoutubeMusic = window.location.hostname === 'music.youtube.com';
let dialogElementQueryRef = isYoutubeMusic ? 'ytmusic-you-there-renderer' : 'yt-confirm-dialog-renderer';
// Options for the observer (which mutations to observe)
const config = { attributes: true };
let observer, observer2;
const observerConfig = { attributes: true };
const observerConfig2 = { childList: true, subtree: true };
const preSetupProc = () => {
// Look to add saving image from video elm.
// path = "/html/body/ytd-app/div/ytd-page-manager/ytd-watch-flexy/div[4]/div[1]/div/div[1]/div/div/div/ytd-player/div/div/div[1]/video"
// elm = document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
if (navigator.appVersion.indexOf("Win")!=-1) OSName = "Windows";
if (navigator.appVersion.indexOf("Mac")!=-1) OSName = "MacOS";
if (navigator.appVersion.indexOf("X11")!=-1) OSName = "UNIX";
if (navigator.appVersion.indexOf("Linux")!=-1) OSName = "Linux";
video = document.getElementsByTagName("video")[0]; // Video Controler
slugInputTag = document.createElement("INPUT");
ytRangeEnd = document.createElement("INPUT");
slugInputTag.id = "slugCopyZone";
ytRangeEnd.id = "rangeEndID";
slugInputTag.type = "text";
ytRangeEnd.type = "text";
// We need to wait for info to load before getting full duration
setTimeout(function () {
videoTimeLength = document.getElementsByClassName("ytp-time-duration")[0].innerHTML;
if (!document.getElementById("rangeEndID")) {
} else {
ytRangeEnd = document.getElementById("rangeEndID");
}
ytRangeEnd.value = videoTimeLength;
}, 1000);
// check if we've loaded elements already...
if (!document.getElementById("slugCopyZone")) {
document.body.appendChild(slugInputTag);
document.body.insertAdjacentHTML( 'beforeend', slugTemplate );
document.body.insertAdjacentHTML( 'beforeend', menuTemplate );
document.body.insertAdjacentHTML( 'beforeend', thumbnailTemplate );
document.body.insertAdjacentHTML( 'beforeend', popedContainerTemplate );
controlsWereLoaded = false;
} else {
slugInputTag = document.getElementById("slugCopyZone");
controlsWereLoaded = true;
}
slugInputTag.value = video.baseURI.slice(32, 32+11);
ytEnhancerMenu = document.getElementById("enhancerMenuID");
ytEnhancerMenu2 = document.getElementById("enhancerMenuID2");
ytThumbnailBttn = document.getElementById("ytThumbnailBttn");
ytLoopBttn = document.getElementById("ytLoopBttn");
ytRangeEnd = document.getElementById("rangeEndID");
ytRangeStart = document.getElementById("rangeStartID");
ytFloatBttn = document.getElementById("ytFloatBttn");
ytDownloadBttn = document.getElementById("ytDownloadBttn");
volumeContainer = document.getElementById("volumeContainerID");
volumeLbl = document.getElementById("volumeValueLbl");
endlessPlayTag = document.getElementById("endlessPlayID");
ytThumbImgMenu = document.getElementById("ytThumbMenuID");
ytAMaxDefaultImg = document.getElementById("ytAMaxDefaultImgID");
ytAHqDefaultImg = document.getElementById("ytAHqDefaultImgID");
ytAMedDefaultImg = document.getElementById("ytAMedDefaultImgID");
ytASdDefaultImg = document.getElementById("ytASdDefaultImgID");
ytMaxDefaultImg = document.getElementById("ytMaxDefaultImgID");
ytHqDefaultImg = document.getElementById("ytHqDefaultImgID");
ytMqDefaultImg = document.getElementById("ytMqDefaultImgID");
ytSdDefaultImg = document.getElementById("ytSdDefaultImgID");
poppedContainer = document.getElementById("draggable");
ytIfrm = document.getElementById("popIframe");
slugInputTag = document.getElementById("slugCopyZone");
// Video Controler
video = document.getElementsByTagName("video")[0];
// Container of actual player (Used for floating window)
containerOfPlyrWndow = document.getElementById("player-container");
}
const setupProc = () => {
poppedContainer = document.createElement("DIV");
ytThumbImgMenu = document.createElement("DIV");
ytEnhancerMenu = document.createElement("DIV");
ytThumbnailBttn = document.createElement("IMG");
ytDownloadBttn = document.createElement("IMG");
ytLoopBttn = document.createElement("IMG");
ytFloatBttn = document.createElement("IMG");
ytMaxDefaultImg = document.createElement("IMG");
ytHqDefaultImg = document.createElement("IMG");
ytMqDefaultImg = document.createElement("IMG");
ytSdDefaultImg = document.createElement("IMG");
ytAMaxDefaultImg = document.createElement("A");
ytAHqDefaultImg = document.createElement("A");
ytAMedDefaultImg = document.createElement("A");
ytASdDefaultImg = document.createElement("A");
ytIfrm = document.createElement("IFRAME");
// Loop range controls
ytRangeSection = document.createElement("SECTION");
ytRangeStart = document.createElement("INPUT");
// Get nodes for page work
containerOfPlyrWndow = document.getElementById("player-container"); // Container of actual player - Used for floating window
part = "https://img.youtube.com/vi/";
// Append to nodes as required
ytThumbnailBttn.title = "Video Thumbnails...";
ytLoopBttn.title = "Start Loop...";
ytFloatBttn.title = "Float Video Container";
ytRangeStart.title = "Loop Range Start";
ytRangeEnd.title = "Loop Range End";
ytRangeStart.type = "text";
slugInputTag.value = video.baseURI.slice(32, 32+11);
ytRangeStart.value = "0:00";
// Insert
ytEnhancerMenu.appendChild(ytThumbnailBttn);
ytEnhancerMenu.appendChild(ytLoopBttn);
ytEnhancerMenu.appendChild(ytRangeSection);
ytEnhancerMenu.appendChild(ytFloatBttn);
// We need to wait for info to load before getting full duration
setTimeout(function () {
videoTimeLength = document.getElementsByClassName("ytp-time-duration")[0].innerText;
ytRangeEnd.value = videoTimeLength;
}, 2000);
if (OSName.includes("MacOS") || OSName.includes("UNIX") ||
OSName.includes("Linux")) {
console.log("System supports downloader...");
console.log("OS is : " + OSName);
ytEnhancerMenu.appendChild(ytDownloadBttn);
}
ytRangeSection.append(ytRangeStart);
ytRangeSection.append(ytRangeEnd);
document.body.appendChild(poppedContainer);
document.body.appendChild(ytThumbImgMenu);
document.body.appendChild(ytEnhancerMenu);
ytAMaxDefaultImg.appendChild(ytMaxDefaultImg);
ytAHqDefaultImg.appendChild(ytHqDefaultImg);
ytAMedDefaultImg.appendChild(ytMqDefaultImg);
ytASdDefaultImg.appendChild(ytSdDefaultImg);
ytThumbImgMenu.appendChild(ytAMaxDefaultImg);
ytThumbImgMenu.appendChild(ytAHqDefaultImg);
ytThumbImgMenu.appendChild(ytAMedDefaultImg);
ytThumbImgMenu.appendChild(ytASdDefaultImg);
poppedContainer.appendChild(ytIfrm);
// Only setting these up if we need to load controls' info
if (!controlsWereLoaded) {
setbuttonImage(ytThumbnailBttn, "/icons/thumbnailOff.png");
setbuttonImage(ytLoopBttn, "/icons/loopFalse.png");
setbuttonImage(ytFloatBttn, "/icons/floatPlayer.png");
setbuttonImage(ytDownloadBttn, "/icons/downloadVid.png");
// Set onclick actions
ytThumbnailBttn.addEventListener("click", showThumbImageVew);
ytLoopBttn.addEventListener("click", setLoop);
ytFloatBttn.addEventListener("click", toggleFloat);
endlessPlayTag.addEventListener("click", toggleEndlessPlay);
ytDownloadBttn.addEventListener("click", downloadVideo);
video.addEventListener("wheel", manageVolume);
// Observer target for fullscreen action...
targetNode = document.getElementsByTagName('ytd-app')[0];
// Create an observer instance linked to the callback function
const observer = new MutationObserver(mutationcallback);
// Start observing the target node for configured mutations
observer.observe(targetNode, config);
// Dragable window for floating video
// Dragable window for floating video event setup
dragVideo(poppedContainer);
ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOff.png");
ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png");
ytFloatBttn.src = browser.extension.getURL("/icons/floatPlayer.png");
ytDownloadBttn.src = browser.extension.getURL("/icons/downloadVid.png");
// Remove download button if system doesn't support youtube-dl functionality
if (!OSName.includes("MacOS") && !OSName.includes("UNIX") && !OSName.includes("Linux")) {
console.log("System does not support downloader...");
ytEnhancerMenu.removeChild(ytDownloadBttn);
}
}
// Set trget of Thumbnails of video
ytAMaxDefaultImg.target = "_blank";
ytAHqDefaultImg.target = "_blank";
ytAMedDefaultImg.target = "_blank";
ytASdDefaultImg.target = "_blank";
// ---- Hide controls if fullscreen using obsever ----
// Observer target for fullscreen action...
let targetNode = document.getElementsByTagName('ytd-app')[0];
// Create an observer instance linked to the callback function
observer = new MutationObserver(mutationCallback);
// Start observing the target node for configured mutations
observer.observe(targetNode, observerConfig);
// Theming & Apply Styles
ytThumbImgMenu.className = "ytThumbMenuStyle";
ytMaxDefaultImg.className = "thumbImageStyle";
ytHqDefaultImg.className = "thumbImageStyle";
ytMqDefaultImg.className = "thumbImageStyle";
ytSdDefaultImg.className = "thumbImageStyle";
ytEnhancerMenu.className = "ytMenuStyle";
ytThumbnailBttn.className = "imageStyle";
ytLoopBttn.className = "imageStyle";
ytFloatBttn.className = "imageStyle";
ytDownloadBttn.className = "imageStyle";
ytEnhancerMenu.id = "enhancerMenuIDRef";
poppedContainer.id = "draggable";
ytRangeStart.id = "rangeStartID";
ytRangeEnd.id = "rangeEndID";
poppedContainer.style.display = "none";
ytEnhancerMenu.style.display = "block";
slugInputTag.style.display = "block";
ytIfrm.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture");
ytIfrm.setAttribute("frameborder", "0");
ytIfrm.setAttribute("autoplay", "");
ytIfrm.setAttribute("allowfullscreen", "true");
ytIfrm.setAttribute("width", "650px");
ytIfrm.setAttribute("height", "400px");
// ---- Endless play obsever ----
// Create an observer instance linked to the callback function
observer2 = new MutationObserver(mutationCallback);
// Start observing the target node for configured mutations
if (endlessPlayTag.checked == true) {
endlessPlayTag.setAttribute("checked", true);
console.log("Endless play checked. Starting observer...");
observer2.observe(document, observerConfig2);
}
}
// Functions
// Callback function to execute when mutations are observed
const mutationcallback = (mutationsList, observer) => {
const mutationCallback = (mutationsList, observer) => {
for(let mutation of mutationsList) {
if (mutation.type === 'attributes') {
controlManager(mutation.target);
} else if (mutation.type === 'childList') {
let elm = document.querySelector(dialogElementQueryRef).parentElement;
elmDisplayState = elm.style.display;
if (elmDisplayState !== 'none') {
clickDialog();
}
}
}
};
@ -185,15 +186,33 @@
attrib = elm.getAttribute('masthead-hidden_');
if (attrib == null) { // if out of fullscreen
ytEnhancerMenu.style.display = "block";
slugInputTag.style.display = "block";
ytEnhancerMenu2.style.display = "block";
} else { // if fullscreen
ytEnhancerMenu.style.display = "none";
slugInputTag.style.display = "none";
ytEnhancerMenu2.style.display = "none";
}
}
const downloadVideo = () => {
browser.runtime.sendMessage( { "url": video.baseURI } );
const clickDialog = () => {
console.log("Clicking dialog confirm to continue playing...");
document
.querySelector(dialogElementQueryRef)
.querySelector('yt-button-renderer[dialog-confirm]')
.click();
}
const toggleEndlessPlay = () => {
isChecked = endlessPlayTag.getAttribute("checked");
if (isChecked) {
endlessPlayTag.setAttribute("checked", false);
console.log("Stopping endless play...");
observer2.disconnect();
} else {
endlessPlayTag.setAttribute("checked", true);
console.log("Starting endless play...");
observer2.observe(confirmDialogElement, observerConfig2);
}
console.log(observer2);
}
const showThumbImageVew = (e) => {
@ -201,7 +220,7 @@
if (ytThumbImgMenu.style.display == "block") {
ytThumbImgMenu.style.display = "none";
ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOff.png");
setbuttonImage(ytThumbnailBttn, "/icons/thumbnailOff.png");
} else {
ytAMaxDefaultImg.href = part + videoSlug + "/maxresdefault.jpg";
ytAHqDefaultImg.href = part + videoSlug + "/hqdefault.jpg";
@ -211,12 +230,7 @@
ytHqDefaultImg.src = part + videoSlug + "/hqdefault.jpg";
ytMqDefaultImg.src = part + videoSlug + "/mqdefault.jpg";
ytSdDefaultImg.src = part + videoSlug + "/sddefault.jpg";
ytMaxDefaultImg.title = "Max Resolution Default";
ytHqDefaultImg.title = "High Quality Default";
ytMqDefaultImg.title = "Medium Quality Default";
ytSdDefaultImg.title = "Standard Quality Default";
ytThumbnailBttn.src = browser.extension.getURL("/icons/thumbnailOn.png");
setbuttonImage(ytThumbnailBttn, "/icons/thumbnailOn.png");
ytThumbImgMenu.style.display = "block";
}
return;
@ -228,10 +242,11 @@
if (loopingInterval) {
console.log("Unsetting interval for loop check...");
clearInterval(ytdVideoIntervalLoop);
clearInterval(ytVideoIntervalLoop);
loopingInterval = false;
ytLoopBttn.title = "Start Loop...";
ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png");
let ipath = browser.extension.getURL("/icons/loopFalse.png");
setbuttonImage(ytLoopBttn, ipath);
return ;
}
@ -240,12 +255,14 @@
console.log("Setting default loop marker...");
video.loop = true;
ytLoopBttn.title = "Stop Loop...";
ytLoopBttn.src = browser.extension.getURL("/icons/loopTrue.png");
let ipath = browser.extension.getURL("/icons/loopTrue.png");
setbuttonImage(ytLoopBttn, ipath);
} else {
console.log("Unsetting default loop marker...");
video.loop = false;
ytLoopBttn.title = "Start Loop...";
ytLoopBttn.src = browser.extension.getURL("/icons/loopFalse.png");
let ipath = browser.extension.getURL("/icons/loopFalse.png");
setbuttonImage(ytLoopBttn, ipath);
}
return ;
} else {
@ -285,11 +302,12 @@
// Setup interval check for 1 sec and compare value of current pos to end
ytLoopBttn.title = "Stop Loop...";
ytLoopBttn.src = browser.extension.getURL("/icons/loopTrue.png");
let ipath = browser.extension.getURL("/icons/loopTrue.png");
setbuttonImage(ytLoopBttn, ipath);
loopingInterval = true;
console.log("Setting interval for loop check...");
ytdVideoIntervalLoop = setInterval(checkLoopStuff, 1000);
ytVideoIntervalLoop = setInterval(checkLoopStuff, 1000);
}
}
@ -326,10 +344,33 @@
let delta;
e.preventDefault(); // Keep page from scrolling while in video area
shouldHideVol = false;
volumeContainer.style.display = "block";
// Detect scroll direction
let incramentType = "+";
if (e.wheelDelta) delta = e.wheelDelta; else delta = -1 * e.deltaY;
// Vol UP || Vol DOWN
if (delta > 0) video.volume += 0.05; else if (delta < 0) video.volume -= 0.05;
let tmpVol = video.volume.toFixed(2);
let volume = Math.round((tmpVol * 100), 2).toFixed(0);
if (delta > 0) {
incramentType = "+";
while ((volume % 5) !== 0) { volume += 1; }
video.volume = (volume/100) + 0.05;
} else if (delta < 0) {
incramentType = "-";
while ((volume % 5) !== 0) { volume -= 1; }
video.volume = (volume/100) - 0.05;
}
volumeLbl.innerText = incramentType + Math.round((video.volume * 100), 1).toFixed(0);
setTimeout(function () {
if (shouldHideVol) {
volumeContainer.style.display = "none";
}
}, 1000);
shouldHideVol = true;
}
const dragVideo = (elmnt) => {
@ -375,28 +416,15 @@
}
}
const checkPg = () => {
if (!document.getElementById("enhancerMenuIDRef")) {
let existCondition = setInterval(function() {
if (document.getElementById("masthead-container")) {
clearInterval(existCondition);
preSetupProc();
setupProc();
count = 0;
} else {
if (count == 12) { // ~ 6 sec through half sec loops
count = 0;
clearInterval(existCondition);
} else {
count++;
}
}
}, 500); // check every 500ms
} else {
preSetupProc();
const downloadVideo = () => {
browser.runtime.sendMessage( { "url": video.baseURI } );
}
const setbuttonImage = (elm, path) => {
elm.style.backgroundImage = "url('" + browser.extension.getURL(path); + "')";
}
// Start init
checkPg();
preSetupProc();
setupProc();
}());

111
src/styles/betterYoutube.css
View File

@ -1,4 +1,16 @@
#slugCopyZone, .ytThumbMenuStyle, .ytMenuStyle {
/* Tag CSS */
/* Youtube stylers based off of its tags... */
yt-formatted-string > a {
color: rgba(125, 65, 0, 0.84) !important;
}
yt-formatted-string > a:hover {
color: rgba(150, 21, 176, 0.97);
}
/* ID CSS */
#enhancerMenuID2, .ytThumbMenuStyle, .ytMenuStyle {
z-index: 100;
position: fixed;
background: rgba(0,0,0,0.64);
@ -6,52 +18,26 @@
overflow: auto;
}
#slugCopyZone {
#enhancerMenuID2 {
bottom: 0%;
left: 35%;
width: 10em;
text-align: center;
color: #fff;
left: 10%;
width: auto;
color: #ffffff;
}
#enhancerMenuIDRef, #slugCopyZone {
#enhancerMenuID, #enhancerMenuID2 {
z-index: 5;
}
.ytThumbMenuStyle {
#volumeContainerID {
display: none;
bottom: 20px;
}
.ytMenuStyle {
top: 45%;
width: 4em;
}
.imageStyle {
width: 32px;
height: 32px;
margin-right: 0.5em;
}
.imageStyle:hover {
background:rgba(12,160,193,.64);
cursor: pointer;
}
#xIconHoverTop {
margin-bottom: 80px;
}
.thumbImageStyle {
width: 200px;
height: 100px;
margin: 0em 1em 0em 1em;
float: left;
font-size:200%;
color: #ffffff;
text-align: center;
}
#draggable {
z-index: 100;
z-index: 9999;
position: fixed;
right: 0px;
bottom: 0px;
@ -63,12 +49,51 @@
background: rgba(64, 64, 64, 0.64)
}
/* Youtube stylers based off of its tags... */
yt-formatted-string > a {
color: rgba(125, 65, 0, 0.84) !important;
#rangeEndID, #rangeStartID {
width: 56px;
overflow-x: scroll;
overflow-y: hidden;
}
yt-formatted-string > a:hover {
color: rgba(150, 21, 176, 0.97);
#slugCopyZone, #rangeEndID, #rangeStartID {
text-align: center;
background: rgba(0,0,0,0.0);
color: #fff;
}
/* Class CSS */
.ytMenuStyle {
top: 40%;
width: 42px;
overflow: hidden;
}
.ytThumbMenuStyle {
display: none;
bottom: 20px;
}
.imageStyle {
width: 42px;
height: 42px;
background-repeat: no-repeat;
background-position: center;
background-color: rgba(0,0,0,.64);
background-size: 42px 42px;
}
.imageStyle:hover {
background: rgba(12,160,193,.64);
cursor: pointer;
background-repeat: no-repeat;
background-position: center;
background-size: 28px 28px;
}
.thumbImageStyle {
width: 200px;
height: 100px;
margin: 0em 1em 0em 1em;
float: left;
}