💡Add a dark transparent backgrounds for extension buttons on video bar

[matteo-moro]

⚬ PROBLEM: When watching videos that make heavy use of the color white in the bottom section, the buttons that can be added through the extension become extremely hard to see

⚬ SOLUTION: Implement a similar solution to the one YouTube itself uses, with a dark semitransparent background for the buttons to make them visible on white backgrounds

⚬ ALTERNATIVES: Giving the option to personalize the buttons would be a solution, but it looks harder to implement than a simple background. It could also be possible to change the color of the buttons but that would break consistency with YouTube's UI and would give issues with other colors

⚬ RELEVANCE / SCOPE: i think it would hypotetically be good for most users, but i am not sure of how many are actually bothered by it. Because of it being a minor aestethic issue it would probably not be a high priority issue, but i think it would improve user experience for most

⚬ "SIDE EFFECTS": If too many buttons are added to the bar it could look weird and solutions could break consistency with YouTube's UI. It could be solved by making it an aestethic option rather than just the only way of showing the buttons

SHORT Table	(Summary)
Problem	Custom buttons not clearly visible on bright backgrounds
Solution	Add a semitransparent dark background behind the button image to enhance visibility
Alternatives	Give the option to change the color of buttons or to customize their appearence
Scope	Should slightly improve experience for most users (imo)
Side effects	Could have weird interactions depending on the amount of buttons

[jaideepkathiresan]

Hi @matteo-moro, I think i have resolved this issue, could you take a look at it and give me your feedback?

[matteo-moro]

@jaideepkathiresan while it hasnt been merged yet i was able to add the changes with web editor, it looks a bit off depending on screen size. I think it might be because the radius is static rather than depending on window size, but i am not a web developer so i am not sure

[matteo-moro]

after checking youtube handles scaling by itself i think, so it is something different i am not sure about

[jaideepkathiresan]

Hi @matteo-moro, thanks for testing it out and sharing your observations! Is there something I can add or shall I leave it here? Thanks again for the feedback!

[matteo-moro]

@jaideepkathiresan i tried in my pull request to fix a few things but the style still doesnt match and i dont have the knowledge to know what is missing

[jaideepkathiresan]

@matteo-moro, yes, I saw that issue. I tried to fix, and I guess now the buttons are centered and does not scale variably due to screen size. Could you take a look at it and give me your feedback?

[matteo-moro]

@jaideepkathiresan the only issue i would have is that the color YouTube uses is rgba(0, 0, 0, 0.3) rather than rgba(0, 0, 0, 0.7), but other than that your fix is definitely better than what i had made

[jaideepkathiresan]

@matteo-moro, Thank you for the feedback! I will change the rgba as requested and push it to my PR again.

[jaideepkathiresan]

Hi @matteo-moro, I have changed it to rgba(0, 0, 0, 0.3). Could you take a look at it?