Jump to content

Change progress play bar to gradient color


Recommended Posts

cochize1

@Happy2Play under puzzle for you, based on @simzy code from this topic I changed colors of my progress bar to gradient, BUT

/* PROGRESS BAR - CHROME */
.emby-slider::-webkit-slider-thumb, .sliderBubble {
   background: #52b54b !important;
}
.emby-slider-background-lower {
   background: linear-gradient(to right, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
   background: linear-gradient(to right, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
   background: -webkit-linear-gradient(left, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
}
progress::-webkit-progress-value {
   background: linear-gradient(to right, #52b54b 0%,#52b54b 50%,#d35a34 100%) !important;
   background: -webkit-linear-gradient(left, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
}

/* PROGRESS BAR - FIREFOX */
.emby-slider::-moz-range-thumb, .mdl-slider:active::-moz-range-thumb {
   background: #52b54b !important;
}
.emby-slider::-moz-range-progress {
   background: linear-gradient(to right, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
   background: -moz-linear-gradient(left, #52b54b 0%, #D4AF37 50%, #d35a34 100%) !important;
}
progress::-moz-progress-bar {
   background: linear-gradient(to right, #52b54b 0%,#D4AF37 50%,#d35a34 100%) !important;
   background: -moz-linear-gradient(left, #52b54b 0%, #D4AF37 50%, #d35a34 100%) !important;
}

the code makes progress bar gradient from the begginig to the point where dot is at the moment.

Is there a way to:

1. make the progress bar gradient from beggining (green) through middle (yellow) to the end (red) and change respectivley to the current position (hope you understand what I mean)?

2. have the progress bar dot changing the color while moving along the bar so it starts with green and change smootlhly towards the yellow and then red when you are almost at the end of the movie?

image.thumb.png.97d18afd39d0aa66e77530c87ca4f75b.png

Edited by cochize1
Link to post
Share on other sites
Happy2Play

I don't believe it is possible via css.  If I understand correctly.

 

Link to post
Share on other sites
cochize1
16 hours ago, Happy2Play said:

I don't believe it is possible via css.  If I understand correctly.

 

just to be clear, in reference to the code I posted above this is what we have vs want we want

image.thumb.png.e211d040bca6249a2c0cb5da162418b7.png

And you say that there is no option via css to base the overlay gradient color of the progress bar to change along the line? Of course I can't do it but it just seems it could be doable as the progress bar is always the same length no matter what duration of the movie we have. Please confirm so I can abandon thinking about it:)

Link to post
Share on other sites
Happy2Play

So the entire track not the progress?

track.thumb.jpg.28d8193741be84762d05f6a653123c31.jpg

.emby-slider::-webkit-slider-runnable-track, .emby-slider::-moz-range-track {
  background: linear-gradient(to right, green 33%, yellow 33%, yellow 66%, red 66%) !important;
}

But the bubble can only change via a script at said points to my knowledge.

Looks like it looks different on Firefox also.

 

 

Link to post
Share on other sites
cochize1

this code seem to be working only in Firefox and has no effect in Chrome at all in my case. Yet again the FF it is as per your picture so not gradient but 3 separate colors.

Then again, that is not exactly what I wanted I think. I would like the foreground progress bar color to be changing along the way and leave the background dimmed bar in one color as it is.. Guess no easy way to do that.

Link to post
Share on other sites
Happy2Play

Sorry didn't actually check Chrome as I was using the New Edge browser based off Chrome.

From my understanding no it would have to be scripted to change colors at said value/position.

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...