Greasy Fork

Would you consider the possibility of returning back the option of the old icon for older youtube style?

The button style of this script will only be compatible with the new YouTube UI. But don't worry, it is still possible to restyle the button to the old style using CSS.

You can use Stylus for compatibility, or notify the author of the userstyle to be compatible with the button style, or I can help you write a userstyle.

Here you are @udontkn0wme :)

#top-level-buttons-computed > div > button > img {
     filter: brightness(0) saturate(100%) invert(57%) sepia(95%) saturate(11%) hue-rotate(99deg) brightness(102%) contrast(87%);
}
#top-level-buttons-computed > div > button > span {
     color: #aaaaaa;
     text-transform: uppercase;
}

change icon to old:

div[name="top_level_translate_btn"] img {
    content: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcuNDEgOSAyLjI0IDIuMjQtLjgzIDJMNiAxMC40bC0zLjMgMy4zLTEuNC0xLjQyTDQuNTggOWwtLjg4LS44OGMtLjUzLS41My0xLTEuMy0xLjMtMi4xMmgyLjJjLjE1LjI4LjMzLjUzLjUxLjdsLjg5LjkuODgtLjg4QzcuNDggNi4xIDggNC44NCA4IDRIMFYyaDVWMGgydjJoNXYyaC0yYzAgMS4zNy0uNzQgMy4xNS0xLjcgNC4xMkw3LjQgOXptMy44NCA4TDEwIDIwSDhsNS0xMmgybDUgMTJoLTJsLTEuMjUtM2gtNS41em0uODMtMmgzLjg0TDE0IDEwLjQgMTIuMDggMTV6IiBmaWxsPSIjOTA5MDkwIiBjbGFzcz0iZmlsbC0wMDAwMDAiPjwvcGF0aD48L3N2Zz4=);
}

What userstyle/userscript are you using right now? @linkwanggo

Your userstyle

Oh, I see you're using the older version. Since I fixed the overlapping element problems in the latest version, your script doesn't work with my userstyles.

I see you re-enabled the old UI panel. My script doesn't support it yet, I will be compatible in the next few days.

change icon to old:

Thank you very much :)
But how do I make the icon smaller it's bit huge now and als how do I change the color to fit my theme?

div[name="top_level_translate_btn"] button {
    overflow: hidden
}

div[name="top_level_translate_btn"] img {
    width: 20px;
    height: 20px;
    filter: drop-shadow(60px 0 0 #00ffff);
    transform: translate(-60px);
    content: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcuNDEgOSAyLjI0IDIuMjQtLjgzIDJMNiAxMC40bC0zLjMgMy4zLTEuNC0xLjQyTDQuNTggOWwtLjg4LS44OGMtLjUzLS41My0xLTEuMy0xLjMtMi4xMmgyLjJjLjE1LjI4LjMzLjUzLjUxLjdsLjg5LjkuODgtLjg4QzcuNDggNi4xIDggNC44NCA4IDRIMFYyaDVWMGgydjJoNXYyaC0yYzAgMS4zNy0uNzQgMy4xNS0xLjcgNC4xMkw3LjQgOXptMy44NCA4TDEwIDIwSDhsNS0xMmgybDUgMTJoLTJsLTEuMjUtM2gtNS41em0uODMtMmgzLjg0TDE0IDEwLjQgMTIuMDggMTV6IiBmaWxsPSIjOTA5MDkwIiBjbGFzcz0iZmlsbC0wMDAwMDAiPjwvcGF0aD48L3N2Zz4=);
}

You can adjust the size by changing width and height.

change icon to old:

Thank you very much :)
But how do I make the icon smaller it's bit huge now and als how do I change the color to fit my theme?

If you want to change the color just add

filter: brightness(0) saturate(100%) invert(80%) sepia(51%) saturate(1690%) hue-rotate(133deg) brightness(89%) contrast(90%);

drop-shadow

Wow I never knew that you can use drop-shadow to change the color of image. I learned something new today.

drop-shadow Wow I never knew that you can use drop-shadow to change the color of image. I learned something new today.

活到老，学到老。 （＾∀＾●）ﾉｼ

div[name="top_level_translate_btn"] button {
    overflow: hidden
}

div[name="top_level_translate_btn"] img {
    width: 20px;
    height: 20px;
    filter: drop-shadow(60px 0 0 #00ffff);
    transform: translate(-60px);
    content: url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTcuNDEgOSAyLjI0IDIuMjQtLjgzIDJMNiAxMC40bC0zLjMgMy4zLTEuNC0xLjQyTDQuNTggOWwtLjg4LS44OGMtLjUzLS41My0xLTEuMy0xLjMtMi4xMmgyLjJjLjE1LjI4LjMzLjUzLjUxLjdsLjg5LjkuODgtLjg4QzcuNDggNi4xIDggNC44NCA4IDRIMFYyaDVWMGgydjJoNXYyaC0yYzAgMS4zNy0uNzQgMy4xNS0xLjcgNC4xMkw3LjQgOXptMy44NCA4TDEwIDIwSDhsNS0xMmgybDUgMTJoLTJsLTEuMjUtM2gtNS41em0uODMtMmgzLjg0TDE0IDEwLjQgMTIuMDggMTV6IiBmaWxsPSIjOTA5MDkwIiBjbGFzcz0iZmlsbC0wMDAwMDAiPjwvcGF0aD48L3N2Zz4=);
}

You can adjust the size by changing width and height.

Thank you very much for your patience. It is very helpful :)