change youtube's logo with added controls
/* ==UserStyle==
@name Youtube Logo Changer
@namespace https://userstyles.world/user/xyadx
@version 1.3.0
@description change youtube's logo with added controls
@author YAD
@supportURL https://userstyles.world/style/1791/youtube-logo-changer
@license CC-BY-NC-4.0
@advanced dropdown logoniyad "Logo Presets" {
1 "Default*" <<<EOT data:image/svg+xml,%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' viewBox='0 0 488.31 109.2'%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill:url(%23Spectrum_);%7D.cls-2%7Bfill:%23fff;%7D.cls-3%7Bfill:url(%23Spectrum_2);%7D.cls-4%7Bfill:url(%23Spectrum_3);%7D.cls-5%7Bfill:url(%23Spectrum_4);%7D.cls-6%7Bfill:url(%23Spectrum_5);%7D%3C/style%3E%3ClinearGradient id='Spectrum_' x1='397.33' y1='-92.5' x2='-153.67' y2='163.5' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2300a8de'/%3E%3Cstop offset='0.2' stop-color='%23333391'/%3E%3Cstop offset='0.4' stop-color='%23e91388'/%3E%3Cstop offset='0.6' stop-color='%23eb2d2e'/%3E%3Cstop offset='0.8' stop-color='%23fde92b'/%3E%3Cstop offset='1' stop-color='%23009e54'/%3E%3C/linearGradient%3E%3ClinearGradient id='Spectrum_2' x1='440.95' y1='1.4' x2='-110.05' y2='257.4' xlink:href='%23Spectrum_'/%3E%3ClinearGradient id='Spectrum_3' x1='439.56' y1='-1.59' x2='-111.44' y2='254.41' xlink:href='%23Spectrum_'/%3E%3ClinearGradient id='Spectrum_4' x1='448.83' y1='18.36' x2='-102.17' y2='274.36' xlink:href='%23Spectrum_'/%3E%3ClinearGradient id='Spectrum_5' x1='453.57' y1='28.56' x2='-97.43' y2='284.56' xlink:href='%23Spectrum_'/%3E%3C/defs%3E%3Cpath class='cls-1' d='M154.3,17.5A19.62,19.62,0,0,0,140.5,3.7C128.4.4,79.7.4,79.7.4S31,.5,18.9,3.8A19.62,19.62,0,0,0,5.1,17.6C1.4,39.1,0,71.9,5.2,92.5A19.62,19.62,0,0,0,19,106.3c12.1,3.3,60.8,3.3,60.8,3.3s48.7,0,60.8-3.3a19.62,19.62,0,0,0,13.8-13.8C158.3,71,159.4,38.2,154.3,17.5Z' transform='translate(-1.79 -0.4)'/%3E%3Cpath class='cls-2' d='M64.2,78.4,104.6,55,64.2,31.6Z' transform='translate(-1.79 -0.4)'/%3E%3Cpath class='cls-3' d='M227.9,99.7c-3.1-2.1-5.3-5.3-6.6-9.7s-1.9-10.2-1.9-17.5V62.6c0-7.3.7-13.3,2.2-17.7s3.8-7.7,7-9.7A23,23,0,0,1,241,32.1c5,0,9.1,1,12.1,3.1a18.08,18.08,0,0,1,6.7,9.7c1.4,4.4,2.1,10.3,2.1,17.6v9.9c0,7.3-.7,13.1-2.1,17.5s-3.6,7.6-6.7,9.7-7.3,3.1-12.5,3.1C235.2,102.8,231,101.7,227.9,99.7ZM245.2,89c.9-2.2,1.3-5.9,1.3-10.9V56.8c0-4.9-.4-8.5-1.3-10.7s-2.4-3.4-4.5-3.4-3.5,1.1-4.4,3.4S235,51.9,235,56.8V78.1c0,5,.4,8.7,1.2,10.9a4.48,4.48,0,0,0,4.5,3.3Q243.85,92.3,245.2,89ZM464.4,72.7v3.5l.4,9.9a10,10,0,0,0,1.6,4.8,4.62,4.62,0,0,0,3.8,1.5c2.3,0,3.9-.9,4.7-2.7s1.3-4.8,1.4-8.9l13.3.8a16.27,16.27,0,0,1,.1,2.4c0,6.3-1.7,11-5.2,14.1s-8.3,4.7-14.6,4.7c-7.6,0-12.9-2.4-15.9-7.1s-4.6-12.1-4.6-22V61.6c.3-17,3.3-29.5,20.9-29.5,5.3,0,9.3,1,12.1,2.9s4.8,4.9,6,9,1.7,9.7,1.7,16.9V72.6l-25.7.1Zm2-28.8a9.51,9.51,0,0,0-1.6,4.7c-.3,2.2-.4,10-.4,10v4.9h11.2V58.6c0,4.9-.1-7.7-.4-10s-.8-3.9-1.6-4.8a4.59,4.59,0,0,0-3.6-1.4A4.67,4.67,0,0,0,466.4,43.9ZM190.5,71.4,173,8.2h15.3s7.1,31.7,9.6,46.6h.4c2.8-15.8,9.8-46.6,9.8-46.6h15.3L205.7,71.3v30.3H190.6V71.4Z' transform='translate(-1.79 -0.4)'/%3E%3Cpath id='A' class='cls-4' d='M311.5,33.4v68.3h-12l-1.3-8.4h-.3c-3.3,6.3-8.2,9.5-14.7,9.5-11.8,0-13.1-10-13.2-18.4v-51h15.4V83.5c0,3,.3,5.2,1,6.5,1.4,2.8,5.1,2.1,7.1.7a8.12,8.12,0,0,0,2.7-3.1V33.4Z' transform='translate(-1.79 -0.4)'/%3E%3Cpath class='cls-5' d='M353.3,20.6H338v81.1H323V20.6H307.7V8.2h45.5l.1,12.4Zm87.9,23.7c-.9-4.3-2.4-7.4-4.5-9.4s-4.9-2.9-8.6-2.9a13.87,13.87,0,0,0-7.9,2.4,16.46,16.46,0,0,0-5.7,6.3h-.1V4.7H399.6v96.9h12.7l1.6-6.5h.3a14,14,0,0,0,5.3,5.5,16.26,16.26,0,0,0,7.9,2c5.2,0,9-2.4,11.5-7.2s3.7-12.3,3.7-22.4V62.2A91.61,91.61,0,0,0,441.2,44.3ZM427.1,72.2a87.7,87.7,0,0,1-.6,11.7q-.6,4.2-2.1,6a4.84,4.84,0,0,1-3.9,1.8,6.7,6.7,0,0,1-6.1-3.6V49.3a9.27,9.27,0,0,1,2.7-4.6c2.2-2.5,6-2.5,7.7,0,.9,1.2,1.4,3.3,1.8,6.2s.5,7,.5,12.4Z' transform='translate(-1.79 -0.4)'/%3E%3Cpath id='A-2' data-name='A' class='cls-6' d='M390.4,33.4v68.3h-12l-1.3-8.4h-.3c-3.3,6.3-8.2,9.5-14.7,9.5-11.8,0-13.1-10-13.2-18.4v-51h15.4V83.5c0,3,.3,5.2,1,6.5,1.4,2.8,5.1,2.1,7.1.7a8.12,8.12,0,0,0,2.7-3.1V33.4Z' transform='translate(-1.79 -0.4)'/%3E%3C/svg%3E EOT;
2 "Coca Cola" <<<EOT https://upload.wikimedia.org/wikipedia/commons/c/ce/Coca-Cola_logo.svg EOT;
3 "Minecraft" <<<EOT https://i.pinimg.com/originals/57/19/c4/5719c4ed7e4352b646d3c9c1fa463b3e.png EOT;
4 "Google" <<<EOT https://upload.wikimedia.org/wikipedia/commons/thumb/2/2f/Google_2015_logo.svg/368px-Google_2015_logo.svg.png EOT;
5 "Twitch" <<<EOT https://i.ibb.co/M1twnJX/Twitch.png EOT;
6 "Dunkin Donuts" <<<EOT https://upload.wikimedia.org/wikipedia/en/thumb/b/b8/Dunkin%27_Donuts_logo.svg/1200px-Dunkin%27_Donuts_logo.svg.png EOT;
7 "Facebook" <<<EOT https://cdn.worldvectorlogo.com/logos/facebook-7.svg EOT;
8 "Spotify" <<<EOT https://www.gizmodo.com.au/content/uploads/sites/2/2019/09/13/gaoxnwalj2yjdiv1ap0m.png EOT;
9 "Netflix" <<<EOT https://1000logos.net/wp-content/uploads/2017/05/Netflix-Logo.png EOT;
10 "Pepsi" <<<EOT https://upload.wikimedia.org/wikipedia/commons/thumb/c/c6/Pepsi_logo_new.svg/2560px-Pepsi_logo_new.svg.png EOT;
11 "Neon Youtube" <<<EOT https://media1.giphy.com/media/TSoUgXI9Tt65lpGPXu/giphy.webp EOT;
12 "Liquid Nike" <<<EOT https://media0.giphy.com/media/Ak2uyWyjfIPfLwHMOM/200.webp EOT;
13 "Spotify Animated" <<<EOT https://media4.giphy.com/media/1R3V9d7wzrqB9ZKdVC/giphy.webp EOT;
logoniyad-custom-dropdown "Custom" <<<EOT /*[[logoniyad-custom]]*\/ EOT;
}
@advanced text logoniyad-custom "Custom Logo URL" "https://example.com/image.png"
@var range logosize 'Logo Size' [60, 60, 350, 1, 'px']
@var range leftright 'Left/Right' [16, -100, 200, 1, '']
@advanced dropdown yadcolorize22 "Logo Changing Color" {
1 "OFF*" <<<EOT none EOT;
2 "ON" <<<EOT yadlogo22 EOT;
}
@advanced dropdown yadinvert "Invert Color" {
1 "OFF*" <<<EOT 0 EOT;
2 "ON" <<<EOT 1 EOT;
}
@advanced dropdown yadsatur "Monochrome" {
1 "OFF*" <<<EOT 1 EOT;
2 "ON" <<<EOT 0 EOT;
}
@advanced dropdown yadblend "Blend Modes" {
1 "Normal*" <<<EOT normal EOT;
2 "Darken" <<<EOT darken EOT;
3 "Multiply" <<<EOT multiply EOT;
4 "Color Burn" <<<EOT color-burn EOT;
5 "Lighten" <<<EOT lighten EOT;
6 "Screen" <<<EOT screen EOT;
7 "Color Dodge" <<<EOT color-dodge EOT;
8 "Overlay" <<<EOT overlay EOT;
9 "Soft Light" <<<EOT soft-light EOT;
10 "Hard Light" <<<EOT hard-light EOT;
11 "Difference" <<<EOT difference EOT;
12 "Exclusion" <<<EOT exclusion EOT;
13 "Hue" <<<EOT hue EOT;
14 "Saturation" <<<EOT saturation EOT;
15 "Color" <<<EOT color EOT;
16 "Luminosity" <<<EOT luminosity EOT;
}
==/UserStyle== */
@-moz-document domain("youtube.com") {
/*logo*/
yt-icon.ytd-topbar-logo-renderer,
[id="logo"][class="style-scope ytd-masthead"] yt-icon.ytd-logo {
fill-opacity: 0;
background: url("/*[[logoniyad]]*/") center center/100% no-repeat!important;
max-width: 100%;
max-height: 100px;
width: /*[[logosize]]*/!important;
margin-left: /*[[leftright]]*/px!important;
animation: yadlogo22 9s steps(136) infinite!important;
position: relative!important
}
/*compatibility*/
#logo .ytd-topbar-logo-renderer svg {
background: none!important
}
[d*="M27.9727 3.12324C27.6435 1.89323 26"],
[d*="M11.4253 14.2854L18.8477 10.0004L11.4253"] {
stroke: transparent!important
}
/*animator*/
@keyframes /*[[yadcolorize22]]*/ {
0% {filter: hue-rotate(360deg) saturate(2);}
}
/*country*/
#country-code.ytd-topbar-logo-renderer {
opacity: 0;
color: transparent!important;/*change this color if you want to show it*/
margin: 12px 0 0 2px;
font-size: 70%
}
/*inverter*/
#logo #logo.ytd-topbar-logo-renderer, ytd-yoodle-renderer.ytd-topbar-logo-renderer {
filter: invert(/*[[yadinvert]]*/) saturate(/*[[yadsatur]]*/);
mix-blend-mode: /*[[yadblend]]*/;
}
#logo {
mix-blend-mode: /*[[yadblend]]*/;
animation: yadlogo22 9s steps(136) infinite!important
}
tp-yt-app-drawer[opened] [class="style-scope ytd-logo"][id="logo-icon"]{
fill-opacity: 0;
background: url("/*[[logoniyad]]*/") center center/100% no-repeat!important;
max-width: 130px!important;
min-width: 60px;
width: /*[[logosize]]*/!important;
left: 0;
margin-left: 10px;
filter: invert(/*[[yadinvert]]*/) saturate(/*[[yadsatur]]*/);
position: relative!important
}
#scrim {
backdrop-filter: blur(5px);
}
#logo:hover yt-icon.ytd-topbar-logo-renderer {
background: url("https://i.gifer.com/YAg6.gif") center center/100% no-repeat!important;
width: 90px!important;
transition-delay: 20s
}
}