cochize1 24 Posted January 9 Share Posted January 9 (edited) @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? Edited January 9 by cochize1 Link to post Share on other sites
Happy2Play 4533 Posted January 10 Share Posted January 10 I don't believe it is possible via css. If I understand correctly. Link to post Share on other sites
cochize1 24 Posted January 10 Author Share Posted January 10 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 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 4533 Posted January 10 Share Posted January 10 So the entire track not the progress? .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 24 Posted January 10 Author Share Posted January 10 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 4533 Posted January 10 Share Posted January 10 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. 1 Link to post Share on other sites
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now