ProgressBar Multicolor by goatgitt

Details

Authorgoatgitt

LicenseGPL-3.0

Categoryeverywhere

Created3 years, 5 months ago

Updated3 years, 4 months ago

Size52 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

The objective is to put on all players a multicolor progressbar with the add-on stylus

Created with an exemple from userstyles.org wich name is RainbowTube++ and wich is created by Justin Ikeako. The link is below:

https://userstyles.org/styles/164882/rainbowtube my github is here: https://github.com/goatgitt/Progressbar_mullticolor

Please, star me if you like this project

You can create an issue if you want to see a another website in this list

actually works with:

url wich the prefix is: https://www.fembed.com

url wich the prefix is: https://mixdrop.sx/

url wich the prefix is: https://www.vidmob.com

the domain upstream.to

the domain fvs.io

the domain www331.ff-01.com

the domain sendvid.com

the domain parisanime.com

the domain fembed.com

the domain sendvid.net

the domain sibnet.ru

the domain mystream.to

the domain streamz.ws

the domain vedbom.com

the domain mavplay.xyz

the domain embed.mystream.to

the domain mystream.to

the domain streamtape.com

the domain dood.watch

the domain upvid.co

the domain upvid.host

the domain mixdrop.sx

the domain vudeo.net

the domain streamtape.com

the domain upstream.to

the domain jetload.net

the domain wikiserie.org

the domain mixdrop.sx

the domain mstream.press

the domain vudeo.net

the domain streamcrypt.net

the domain vidmob.com

the domain player.vimeo.com

the domain vimeo.com

the domain down-paradise.com

the domain openload.co

the domain ocine.co

the domain youtube.com

the domain ddl-francais.com

the domain netu.tv

the domain vostanimes.net

the domain ogp.me

the domain elahmad.com

the domain dood.so

the domain netutv.net

the domain wigistream.to

the domain cloudstream.to

the domain allfoot.info

the domain telerium.digital

the domain hqq.tv

the domain vidoza.net

the domain vidlox.me

the domain vshare.eu

the domain ok.ru

the domain twitch.tv

the domain vimeo.com

all of federations of peertube

Soundcloud with a few bugs

Facebook medias

Twitter medias

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.

/* ==UserStyle==
@name         ProgressBar Multicolor
@description  put a multicolor progressbar on all of websites 
@author       goatgitt (https://github.com/goatgitt)
@homepageURL  https://github.com/goatgitt/Progressbar_mullticolor
@supportURL   https://github.com/goatgitt/Progressbar_mullticolor/issues
@preprocessor stylus
@version      Beta
@license      GPL-3.0
==UserStyle== */
/* ⭐ Star it if you like this project ⭐ */
@namespace url(http://www.w3.org/1999/xhtml);
/* 👋🏽 Hello, fellow web developer! 👋🏽 */
/* Initial setup */
:root {
    --color-transition-duration: 10s;
    --color-transition-duration2: 35s;
    --standard-ease: cubic-bezier(0.4, 0.0, 0.2, 1);}

* {
    outline: none; }

/* Scrollbar */
[dark] body::-webkit-scrollbar {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
    background: #141414 !important;
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iMzIiCiAgIGhlaWdodD0iMzIiCiAgIHZpZXdCb3g9IjAgMCA4LjQ2NjY2NjYgOC40NjY2NjY2IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc4IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkyLjMgKDI0MDU1NDYsIDIwMTgtMDMtMTEpIgogICBzb2RpcG9kaTpkb2NuYW1lPSJ1cC5zdmciPgogIDxkZWZzCiAgICAgaWQ9ImRlZnMyIiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0iYmFzZSIKICAgICBwYWdlY29sb3I9IiNmZmZmZmYiCiAgICAgYm9yZGVyY29sb3I9IiM2NjY2NjYiCiAgICAgYm9yZGVyb3BhY2l0eT0iMS4wIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZXNoYWRvdz0iMiIKICAgICBpbmtzY2FwZTp6b29tPSI3LjkxOTU5NTkiCiAgICAgaW5rc2NhcGU6Y3g9IjUuNzM0NjA5NSIKICAgICBpbmtzY2FwZTpjeT0iMjAuODY3MDU3IgogICAgIGlua3NjYXBlOmRvY3VtZW50LXVuaXRzPSJweCIKICAgICBpbmtzY2FwZTpjdXJyZW50LWxheWVyPSJsYXllcjEiCiAgICAgc2hvd2dyaWQ9InRydWUiCiAgICAgdW5pdHM9InB4IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTM2NiIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSI3NDUiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9Ii04IgogICAgIGlua3NjYXBlOndpbmRvdy15PSItOCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIj4KICAgIDxpbmtzY2FwZTpncmlkCiAgICAgICB0eXBlPSJ4eWdyaWQiCiAgICAgICBpZD0iZ3JpZDgxNSIKICAgICAgIGVtcHNwYWNpbmc9IjQiCiAgICAgICBkb3R0ZWQ9InRydWUiIC8+CiAgPC9zb2RpcG9kaTpuYW1lZHZpZXc+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNSI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiCiAgICAgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMCwtMjg4LjUzMzMzKSI+CiAgICA8cGF0aAogICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MC4yNjQ1ODMzMnB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjE7ZmlsbC1vcGFjaXR5OjEiCiAgICAgICBkPSJtIDIuMTE2NjY2NywyOTMuODI1IDQuMjMzMzMzMiwwIC0yLjExNjY2NjYsLTIuMTE2NjcgeiIKICAgICAgIGlkPSJwYXRoODE3IgogICAgICAgaW5rc2NhcGU6Y29ubmVjdG9yLWN1cnZhdHVyZT0iMCIKICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY2NjYyIgLz4KICA8L2c+Cjwvc3ZnPgo=), url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iMzIiCiAgIGhlaWdodD0iMzIiCiAgIHZpZXdCb3g9IjAgMCA4LjQ2NjY2NjYgOC40NjY2NjY2IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmc4IgogICBpbmtzY2FwZTp2ZXJzaW9uPSIwLjkyLjMgKDI0MDU1NDYsIDIwMTgtMDMtMTEpIgogICBzb2RpcG9kaTpkb2NuYW1lPSJkb3duLnN2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczIiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJiYXNlIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjcuOTE5NTk1OSIKICAgICBpbmtzY2FwZTpjeD0iNS43MzQ2MDk1IgogICAgIGlua3NjYXBlOmN5PSIyMC44NjcwNTciCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9InB4IgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9ImxheWVyMSIKICAgICBzaG93Z3JpZD0idHJ1ZSIKICAgICB1bml0cz0icHgiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIxMzY2IgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9Ijc0NSIKICAgICBpbmtzY2FwZTp3aW5kb3cteD0iLTgiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9Ii04IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiPgogICAgPGlua3NjYXBlOmdyaWQKICAgICAgIHR5cGU9Inh5Z3JpZCIKICAgICAgIGlkPSJncmlkODE1IgogICAgICAgZW1wc3BhY2luZz0iNCIKICAgICAgIGRvdHRlZD0idHJ1ZSIgLz4KICA8L3NvZGlwb2RpOm5hbWVkdmlldz4KICA8bWV0YWRhdGEKICAgICBpZD0ibWV0YWRhdGE1Ij4KICAgIDxyZGY6UkRGPgogICAgICA8Y2M6V29yawogICAgICAgICByZGY6YWJvdXQ9IiI+CiAgICAgICAgPGRjOmZvcm1hdD5pbWFnZS9zdmcreG1sPC9kYzpmb3JtYXQ+CiAgICAgICAgPGRjOnR5cGUKICAgICAgICAgICByZGY6cmVzb3VyY2U9Imh0dHA6Ly9wdXJsLm9yZy9kYy9kY21pdHlwZS9TdGlsbEltYWdlIiAvPgogICAgICAgIDxkYzp0aXRsZT48L2RjOnRpdGxlPgogICAgICA8L2NjOldvcms+CiAgICA8L3JkZjpSREY+CiAgPC9tZXRhZGF0YT4KICA8ZwogICAgIGlua3NjYXBlOmxhYmVsPSJMYXllciAxIgogICAgIGlua3NjYXBlOmdyb3VwbW9kZT0ibGF5ZXIiCiAgICAgaWQ9ImxheWVyMSIKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgwLC0yODguNTMzMzMpIj4KICAgIDxwYXRoCiAgICAgICBzdHlsZT0iZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTpub25lO3N0cm9rZS13aWR0aDowLjI2NDU4MzMycHg7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46bWl0ZXI7c3Ryb2tlLW9wYWNpdHk6MSIKICAgICAgIGQ9Ik0gMi4xMTY2NjY3LDI5MS43MDgzMyBIIDYuMzQ5OTk5OSBMIDQuMjMzMzMzMywyOTMuODI1IFoiCiAgICAgICBpZD0icGF0aDgxNyIKICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiCiAgICAgICBzb2RpcG9kaTpub2RldHlwZXM9ImNjY2MiIC8+CiAgPC9nPgo8L3N2Zz4K) !important;
    background-position: top center, bottom center !important;
    background-size: contain !important;
    background-repeat: no-repeat !important; }

/* Thumb */
[dark] body::-webkit-scrollbar-thumb {
    background: #fff4 !important;
    border-left: 2px solid !important;
    border-right: 2px solid !important;
    border-color: #141414 !important; }

[dark] body::-webkit-scrollbar-thumb:hover {
    background: #fff5 !important; }

[dark] body::-webkit-scrollbar-thumb:active {
    background: #fff6 !important; }

/* Buttons */
[dark] body::-webkit-scrollbar-button:single-button {
    background-position: center center;
    background-size: contain;
    display: block;
    height: 16px;
    width: 16px;
    background: #14141488; }

[dark] body::-webkit-scrollbar-button:single-button:hover {
    background: #14141444; }

[dark] body::-webkit-scrollbar-button:single-button:active {
    background: #14141422; }


/* Progress bar */
.ytp-scrubber-button,
.ytp-play-progress {
    animation: BgTransition var(--color-transition-duration) linear infinite; }

/* Pop effect on videos */
ytd-compact-video-renderer,
.ytp-show-tiles .ytp-videowall-still,
ytd-thumbnail {
    transition: all 250ms cubic-bezier(0.175, 0.885, 0.32, 1.275) !important }

ytd-compact-video-renderer:hover,
.ytp-show-tiles .ytp-videowall-still:hover,
ytd-thumbnail:hover {
    transform: scale(1.025) }
/* Make sure video tiles (shown after a video has finished) are above the others when they're hovered over */
.ytp-show-tiles .ytp-videowall-still:hover ytd-thumbnail:hover {
    z-index: 1000 }

/* KeyFrames for background col-or */
@keyframes BgTransition {
    0% {background-color: #f00 }
    
    5% {background-color: #f00 }
    
    15% {background-color: #f80 }
    
    25% {background-color: #ff0 }
    
    35% {background-color: #8f0 }
    
    45% {background-color: #0f8 }
    
    55% {background-color: #08f }
    
    65% {background-color: #00f }
    
    75% {background-color: #80f }
    
    85% {background-color: #f08 }
    
    95% {background-color: #f00 }
    
    100% {background-color: #f00 } }

@keyframes BTransition {
    0% {background: #f00 }
    
    5% {background: #f00 }
    
    15% {background: #f80 }
    
    25% {background: #ff0 }
    
    35% {background: #8f0 }
    
    45% {background: #0f8 }
    
    55% {background: #08f }
    
    65% {background: #00f }
    
    75% {background: #80f }
    
    85% {background: #f08 }
    
    95% {background: #f00 }
    
    100% {background: #f00 } }

@keyframes BTransitionrepeat {
    0% {background: #f00 none repeat scroll 0% 0% }
    
    5% {background: #f00 none repeat scroll 0% 0% }
    
    15% {background: #f80 none repeat scroll 0% 0% }
    
    25% {background: #ff0 none repeat scroll 0% 0% }
    
    35% {background: #8f0 none repeat scroll 0% 0% }
    
    45% {background: #0f8 none repeat scroll 0% 0% }
    
    55% {background: #08f none repeat scroll 0% 0% }
    
    65% {background: #00f none repeat scroll 0% 0% }
    
    75% {background: #80f none repeat scroll 0% 0% }
    
    85% {background: #f08 none repeat scroll 0% 0% }
    
    95% {background: #f00 none repeat scroll 0% 0% }
    
    100% {background: #f00 none repeat scroll 0% 0% } }

/* KeyFrames for text a...

Reviews

No reviews yet.