Jump to content

Change OSD play/resume color buttons with backgrounds


cochize1
Go to solution Solved by Happy2Play,

Recommended Posts

cochize1

So, I have changed my OSD button colors with this code:

/*change OSD play colors*/
button.videoOsd-btnPause {color: #52b54b; background-color: rgba(255,0,0,0.2);}
button.btnOsdFastForward {color: #D4AF37}
button.btnRewind {color: #D4AF37}
div.videoOsdVolumeControls {color: #1E6EA5}
button.btnNextTrack {color: #E0B0E8}

and as you see I tried to change background circle color to RED to check if it works. It does, but it seems that there are more states to these: when left alone, when clicked, when OSD disappears and reappears (maybe more). What I want to achieve is to have the colors set for the buttons as it is in my code but have them stayed with that color after clicking etc (well, always) with corresponding background circle color whenever it should appear. How to go about that?

image.thumb.png.875259ca9a9f2f8ea69c801c23d228c0.png

image.thumb.png.a3464df0d6372e1bd0dc3eed53548aaf.png

image.thumb.png.21a1a673667a1fcfb839421357f82556.png

Link to comment
Share on other sites

  • Solution
Happy2Play

You need to add :focus and :active for that element.

button.videoOsd-btnPause:focus, button.videoOsd-btnPause:active {color: #52b54b; background-color: rgba(255,0,0,0.2);}

 

Link to comment
Share on other sites

cochize1

ok, so I finished with this code

button.videoOsd-btnPause, button.videoOsd-btnPause:focus, button.videoOsd-btnPause:active {color: #52b54b; background-color: rgba(82, 181, 75, 0.2);}
button.btnOsdFastForward, button.btnOsdFastForward:focus, button.btnOsdFastForward:active {color: #D4AF37; background-color: rgba(212, 175, 55, 0.2);}
button.btnRewind, button.btnRewind:focus, button.btnRewind:active {color: #D4AF37; background-color: rgba(212, 175, 55, 0.2);}

and it seems ok with one exception:

now, the background circle is always on, not just when clicked on

with just your code the buttons stay white and change colors only when clicked on

how to make them the circle disappear when there is no interaction with the buttons?

Link to comment
Share on other sites

cochize1

scratch that, this solved the problem:

button.videoOsd-btnPause {color: #52b54b}
button.videoOsd-btnPause:focus, button.videoOsd-btnPause:active {color: #52b54b; background-color: rgba(82, 181, 75, 0.2);}
button.btnOsdFastForward {color: #D4AF37}
button.btnOsdFastForward:focus, button.btnOsdFastForward:active {color: #D4AF37; background-color: rgba(212, 175, 55, 0.2);}
button.btnRewind {color: #D4AF37}
button.btnRewind:focus, button.btnRewind:active {color: #D4AF37; background-color: rgba(212, 175, 55, 0.2);}

thank you again

  • Like 1
Link to comment
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...