Jump to content

how do i change these green ones in custom css ?


Y0SH1zzzz

Recommended Posts

If you mean the checkbox element, I believe they are built using pseudo elements.

If they are then you must target either the before or after element.

If you ever want to know what the target is, then right click the element, and select xcopy path.

This will give you a direct selector to whatever you right clicked on.

From there you can figure out what parts of the xcopy path you want to use to target elements. 

 

Link to comment
Share on other sites

Y0SH1zzzz

i mean the transparent green color showing that it is selected and also would like to change the checkbox. actually i dont really know what you are talking about since i cant program at all im a very new beginner to theming.

 

have tried googling but i dont even know what to search, what i know i have just learn from playing around so you can guess how much of a noob i am haha. 

Link to comment
Share on other sites

Happy2Play

There are several topics with this, targeting :root is easier the targeting elements.

Original code for navdrawer

.navMenuOption-selected {
    background-color: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness),.2)!important;
}

and

.emby-checkbox:checked+.checkboxLabel:before {
    border-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
    background-color: hsl(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
}

Targeting Theming is the best route.

Use an online site to get HSL color values, here is a Blue.

html.accent-emby:root {
    --theme-primary-color-hue: 222;
    --theme-primary-color-saturation: 100%;
    --theme-primary-color-lightness: 50%;
    --theme-accent-text-color-darkbg: #004cff;
    --theme-accent-text-color-lightbg: blue;
}

But if your accents have been changed in UI you may have to add "!important" to each line and change to html:root.

html:root {
    --theme-primary-color-hue: 222!important;
    --theme-primary-color-saturation: 100%!important;
    --theme-primary-color-lightness: 50%!important;
    --theme-accent-text-color-darkbg: #004cff!important;
    --theme-accent-text-color-lightbg: blue!important;
}

But will assume none Premiere and not adjusting User Display Theme/Accent, first option should be fine.

  • Like 1
Link to comment
Share on other sites

Happy is right.

However there are a couple tricky elements in the Emby DOM that do not adhere to it's root custom variables. For example 'emby-toggle' seems to be one.

That element has its own css and it was never updated to use the variables.

Edited by chef
  • Agree 1
Link to comment
Share on other sites

Happy2Play

Yes toggle has its own css.    Don't remember may outliers though, but they can conform.

input.emby-toggle:checked+.toggleLabel::before,input.emby-toggle:checked+.toggleLabel::after {
    background: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
}

input.emby-toggle-focusring:focus:checked + .toggleLabel::after {
    box-shadow: 0 0 0 .7em hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness),.2)
}

"Emby Server is up to date" box

i.serverUpToDateCheckIcon {
    background-color: hsla(var(--theme-primary-color-hue),var(--theme-primary-color-saturation),var(--theme-primary-color-lightness));
}

 

Link to comment
Share on other sites

Y0SH1zzzz

yes i have no idea if i did it right but at least i think i did since it works. thank you for the help and time.

and just to confirm it was the hue im supposed to change right ? even if it wasn't it worked

Link to comment
Share on other sites

Happy2Play
1 hour ago, Y0SH1zzzz said:

and just to confirm it was the hue im supposed to change right ?

Well that depends on the color you want, but primarily yes.

 

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