Jump to content

Change #embyselect background color


cochize1
Go to solution Solved by Happy2Play,

Recommended Posts

cochize1

I know I can change every #embyselect background color (subtitles, audio etc.) but for some reason in different places they have different numbers like #embyselect1, #embyselect2 etc. and I have counted at least 30 so far so I ended up with the massive lines of code like this fraction below. Is there a way to trim it down and address all embyselect elements at once?

#embyselect0 {background-color: #52B54B; opacity: .73;}
#embyselect1 {background-color: #52B54B; opacity: .73;}
#embyselect2 {background-color: #52B54B; opacity: .73;}
#embyselect3 {background-color: #52B54B; opacity: .73;}
#embyselect4 {background-color: #52B54B; opacity: .73;}
#embyselect5 {background-color: #52B54B; opacity: .73;}
#embyselect6 {background-color: #52B54B; opacity: .73;}
#embyselect7 {background-color: #52B54B; opacity: .73;}
......and so on

 

Link to comment
Share on other sites

  • Solution
Happy2Play

I think you mean this.

select.emby-select-withcolor.emby-select

 

  • Like 1
Link to comment
Share on other sites

  • 1 month later...
Happy2Play

Change background-color to just background as it is theme driven now

original code

.emby-select-withcolor {
    background: var(--button-background);
}



:root {
    --button-background: rgba(0,0,0,.5);
}

 

Edited by Happy2Play
Link to comment
Share on other sites

cochize1

if you mean this, it does not work I guess

select.emby-select-withcolor.emby-select
{background: #52B54B; opacity: .73;}

 

Edited by cochize1
Link to comment
Share on other sites

cochize1

it seems to be changing embyselect form in other places like dashboard but not on subtitles or source, I managed to come up with this but could you trim that if necessary:

.selectSubtitles.detailTrackSelect.emby-select-inline.emby-select
{background-color: #52B54B; opacity: .73;}

.selectSource.detailTrackSelect.emby-select-inline.emby-select
{background-color: #52B54B; opacity: .73;}

also, it doesn't  look good in Firefox, is there a way to paint that grey arrow and the outlines in the my custom color?

image.thumb.png.cb767ef2aab9edbadb568f834ff1d6a8.png

Edited by cochize1
Link to comment
Share on other sites

Happy2Play
8 minutes ago, cochize1 said:

also, it doesn't  look good in Firefox, is there a way to paint that grey arrow and the outlines in the my custom color?

I don't believe you can as that is a design of Firefox.  There are other selectors and boxes that are unique to Firefox.

But you can added "!important" to the previous code to cover all or target the "detailTrackSelect" as you did.

Link to comment
Share on other sites

cochize1

and since I've got you here, can I at least make scrollbar in Firefox slimmer as this code I have only works for Opera and Chrome:

/*Scrollbar Opacity*/
html ::-webkit-scrollbar-track-piece {
    background-color: rgba(0,0,0,.1);
}

/*Scrollbar width*/
html ::-webkit-scrollbar {
    width: .1em;
}

::selection, ::-moz-selection {
  color: green;
  background-color: rgba(0,0,0,.1);
}

 

Link to comment
Share on other sites

Happy2Play
41 minutes ago, cochize1 said:

and since I've got you here, can I at least make scrollbar in Firefox slimmer as this code I have only works for Opera and Chrome:

Looks like something with scrollbar-width:thin but I can't seem to get it to work.

https://developer.mozilla.org/en-US/docs/Web/CSS/scrollbar-width

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...