Jump to content

Change #embyselect background color


Go to solution Solved by Happy2Play,

Recommended Posts

Posted

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

 

  • Solution
Happy2Play
Posted

I think you mean this.

select.emby-select-withcolor.emby-select

 

  • Like 1
  • 1 month later...
Posted (edited)

ok, worked just fine

 

Edited by cochize1
Happy2Play
Posted (edited)

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
Posted (edited)

if you mean this, it does not work I guess

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

 

Edited by cochize1
Posted (edited)

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

Posted

thanks, it worked again

PS. Firefox design looks like Windows 95

Posted

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);
}

 

Happy2Play
Posted
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

Posted

at least one thing you can't do:)

but seriously, thanks for all the support

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