Jump to content

Zapping the green Again


arrbee99

Recommended Posts

arrbee99

Me again. Any thoughts how to kill the green thats crawled its way back into Beta 37 please.

On the dashboard the tickboxes are green and in the Home page the item counts and watched tickbxes are green again.

I've tried some of this (some works, not sure if its the best / most elegant way though...) -

a) These seem to work -

/* Make Home page played indicator red */
i.cardIndicator.cardPlayedIndicator.playedIndicator.md-icon {background:var(--mycolour);}


/* Make Home page count indicator red */
div.cardIndicator.cardCountIndicator.CountIndicator.countIndicator {background:var(--mycolour);}

b) Seems to work -

/* Make Dashboard Connection Help button MyColour */
a.raised.raised-mini.button-submit {background:var(--mycolour);}

c) Sort of works but gives a red background with a green border round it -

54439132_EmbyCSStickbox.jpg.fa875b19ab0a74827f08cb97ae9ab711.jpg

/* Try to make Dashboard checkboxes MyColour when selected */
span.checkboxLabel::before {background-color: var(--mycolour) !important;}
span.checkboxLabel::before {border: 2px solid white; !important;}

d) Seems to work -

/* Make Dashboard Save button MyColour */
button.raised.button-submit {background:var(--mycolour);}

e) Not working -

1877075547_EmbyCSStickbox2.jpg.50d5350ea5f8650d131fda4282eff652.jpg

/* Try to make Dashboard selected item white not red in left hand list */
div.navDrawerListItem.navMenuOption-selected {text-color: white !important;}

f) Seems to work -

/* Add dropshadow to Home screen bottom right items, heart etc */
button.cardOverlayButton.cardOverlayButton-hover {text-shadow: 2px 2px #000000;}

g) Sort of works but gives a red background with a green border round it -

Emby CSS tickbox 1.jpg

/* Try to make Home screen played select button bottom right MyColour not green */
button.playstatebutton-icon-played {background-color: var(--mycolour) !important;}

 

Edited by Happy2Play
Link to comment
Share on other sites

arrbee99

And would anyone please know how to get rid of this gap (just above Seasons)  in the transparent grey sections please -

This used to work -

/* Close up most gaps between detail rows */
div.itemMainScrollSlider h2.sectionTitle {margin-top: 0;}
div.itemMainScrollSlider .sectionTitleContainer {margin: 0;}
div.itemMainScrollSlider .verticalSection-extrabottompadding {margin-bottom: 0;}

917026953_Embymindthegap.thumb.jpg.6b305795c831fb3f602978bd989a433c.jpg

Link to comment
Share on other sites

Happy2Play

Yep Luke tweaked code again.

5 hours ago, arrbee99 said:

c) Sort of works but gives a red background with a green border round it -

/* Try to make Dashboard checkboxes MyColour when selected */
span.checkboxLabel::before {background-color: var(--mycolour) !important;}
span.checkboxLabel::before {border: 2px solid white; !important;}

Your code is broken for border as you have a semi-colon after white.  But here is overriding default code without !important.

/* Try to make Dashboard checkboxes MyColour when selected */
input.emby-checkbox:checked+span.checkboxLabel:before {
background-color: var(--mycolour);
border: 2px solid white;}

 

6 hours ago, arrbee99 said:

e) Not working -

/* Try to make Dashboard selected item white not red in left hand list */
div.navDrawerListItem.navMenuOption-selected {text-color: white !important;}

That element is "button" not "div" and "color" not "text-color", if I got the intent correct.

/* Try to make Dashboard selected item white not red in left hand list */
button.navDrawerListItem.navMenuOption-selected {color: white;}

 

6 hours ago, arrbee99 said:

g) Sort of works but gives a red background with a green border round it -

/* Try to make Home screen played select button bottom right MyColour not green */
button.playstatebutton-icon-played {background-color: var(--mycolour) !important;}

Close as you need to treat "border" also as you can see in the console for existing code.

image.png.1fe00f66c2081f59c7ea266203559ef0.png

Did not know what you wanted so just added your custom color.

/* Try to make Home screen played select button bottom right MyColour not green */
button.playstatebutton-icon-played {background: var(--mycolour)!important;
border-color: var(--mycolour);}

 

3 hours ago, arrbee99 said:

And would anyone please know how to get rid of this gap (just above Seasons)  in the transparent grey sections please -

A guess would be this sections "margin-top".

image.thumb.png.956370cd83b7b32b37960c970c983f6b.png

Link to comment
Share on other sites

arrbee99

Thanks very much. Things are way better now.

A teeny nitpick is that when you (or I ?)...when one clicks on a option and it gets ticked with a red background,  the text next to it also goes red, until you click somewhere else on the page and the text goes back to white again, without affecting the tick. Doubt if I can find a way to stop that, as I would never have come up with your solution anyway, especially that 'checked+span' thing...

Link to comment
Share on other sites

Happy2Play
3 minutes ago, arrbee99 said:

Thanks very much. Things are way better now.

A teeny nitpick is that when you (or I ?)...when one clicks on a option and it gets ticked with a red background,  the text next to it also goes red, until you click somewhere else on the page and the text goes back to white again, without affecting the tick. Doubt if I can find a way to stop that, as I would never have come up with your solution anyway, especially that 'checked+span' thing...

Can you post a specific example.  Might need entire custom code to see this as I am not seeing what you are describing.

All I do is find the code already provided.

Link to comment
Share on other sites

arrbee99

Just when I click, say here on 'Launch the Emby web app...' it makes the text red -

1008272676_EmbyCSStickbox3.jpg.d66b128926d33d50cacbc548f5e8c72a.jpg

though I've just spotted this is a Firefox thing, in Chrome the text stays white.

Link to comment
Share on other sites

Happy2Play
21 minutes ago, arrbee99 said:

Just when I click, say here on 'Launch the Emby web app...' it makes the text red -

1008272676_EmbyCSStickbox3.jpg.d66b128926d33d50cacbc548f5e8c72a.jpg

though I've just spotted this is a Firefox thing, in Chrome the text stays white.

Interesting but I just tested in FireFox and currently don't get that.

Are by chance doing anything with "::selection"?

I can only see what you are showing by manual highlight/copy text or occasional double click.  But changed/added ::selection to highlight this.

image.png.54e34ee9f5562bc3360fa04b9395279e.png

Edited by Happy2Play
Link to comment
Share on other sites

arrbee99

I can't get it to do it now either. Weird. Maybe your code fixed something somehow.

(I don't have anything using selection anywhere...)

Link to comment
Share on other sites

arrbee99

Any thoughts please maybe on these -

a) getting a red played tick for a whole season, as in

1869226620_EmbyCSStickbox4.thumb.jpg.6f16ae26be74e32c6b8de93cbe04cab4.jpg

I thought this, except it doesn't work -

/* Try to make Played red for whole Season */
i.md-icon.button-icon.button-icon-left.playstatebutton-icon.secondaryText.playstatebutton-icon-played {background: var(--mycolour);}

b) getting border to be white, or red or something, for any box you have selected. For example, the css box has a green border while editing, or under Display in the Dashboard, selecting one of the items, such as Display Mode has a green box around it. Thought something to do with 'select' and ':focus', but don't know what. eg -

181021156_EmbyCSStickbox5.jpg.4a43343e31b1fbd127d670189690b159.jpg

 

Link to comment
Share on other sites

Happy2Play
1 hour ago, arrbee99 said:

a) getting a red played tick for a whole season, as in

I thought this, except it doesn't work -

/* Try to make Played red for whole Season */
i.md-icon.button-icon.button-icon-left.playstatebutton-icon.secondaryText.playstatebutton-icon-played {background: var(--mycolour);}

Luke has !important in the background code, but same as above you will need border-color also.

image.png.50b012a0b56eeea5e39dd24370087159.png

 

/* Try to make Played red for whole Season */
i.md-icon.button-icon.button-icon-left.playstatebutton-icon.secondaryText.playstatebutton-icon-played {background: var(--mycolour)!important;
border-color: var(--mycolour);}

 

1 hour ago, arrbee99 said:

b) getting border to be white, or red or something, for any box you have selected. For example, the css box has a green border while editing, or under Display in the Dashboard, selecting one of the items, such as Display Mode has a green box around it. Thought something to do with 'select' and ':focus', but don't know what. eg -

Need to activate Focus (the ::hov menu) on the selected element

image.png.fb24735aa9a4a42937ca6a22f9a618b0.png

input.emby-input:focus, textarea.emby-textarea:focus, select.emby-select:focus {
    border-color: var(--mycolour) !important;
}

 

But easier to target all accent things instead of individual, don't know your exact "--mycolour".  But this hits almost every element at once instead of individual tweaks.

Test with just this

html:root {
    --theme-primary-color-hue: 0;
    --theme-primary-color-saturation: 100%;
    --theme-primary-color-lightness: 40%;
}

Then you can do individual tweaks.

Edited by Happy2Play
Link to comment
Share on other sites

arrbee99

Excellent. Thank you. Hope there aren't any more, but knowing me...

Wonder what will happen when Luke does his separating themes and colours thing 🙃

Link to comment
Share on other sites

Happy2Play
1 minute ago, arrbee99 said:

Excellent. Thank you. Hope there aren't any more, but knowing me...

Wonder what will happen when Luke does his separating themes and colours thing 🙃

Don't really think it will be much different.

But targeting html:root is easier as most elements use it instead of having their own styles.  As three lines can change almost all item accents.

Spoiler

html:root
{
    --background-hue: 209;
    --background-saturation: 94%;
    --background-lightness: 19.61%;
    --theme-primary-color-hue: 116;
    --theme-primary-color-saturation: 41.7%;
    --theme-primary-color-lightness: 50.2%;

    --theme-text-color-hue: 0;
    --theme-text-color-saturation: 0%;
    --theme-text-color-lightness: 100%;
    --theme-text-color-alpha: .87;
    --theme-secondary-text-color-alpha: .6;
    --theme-accent-text-color: #6CCF65;
    --theme-icon-focus-background: hsla(var(--theme-primary-color-hue), var(--theme-primary-color-saturation), var(--theme-primary-color-lightness), .2);
    --theme-background: hsl(var(--background-hue), var(--background-saturation), var(--background-lightness));
    --button-background-hue: 0;
    --button-background-saturation: 0%;
    --button-background-lightness: 0%;
    --button-background-blur-lightness: calc(var(--button-background-lightness) + 43%);
    --button-background-blur-alpha: .3;
    --button-background: hsla(var(--button-background-hue), var(--button-background-saturation), var(--button-background-lightness), .5);
    --card-background-hue: 0;
    --card-background-saturation: 0%;
    --card-background-lightness: 0%;
    --header-background: var(--theme-background);
    --header-blur-background: hsla(var(--background-hue), var(--background-saturation), var(--background-lightness), .66);
    --footer-background: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) + 7%));
    --line-background: hsla(var(--theme-text-color-hue), var(--theme-text-color-saturation), var(--theme-text-color-lightness), .15);
    --line-size: .08em;
    --drawer-background: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 5%));
    --docked-drawer-background: rgba(0,0,0,.2);
    --epg-channel-color: hsl(var(--background-hue), var(--background-saturation), calc(var(--background-lightness) - 10%));
    --epg-program-color: rgba(0,0,0,.3);
    --dialog-border-width: 0;
    --focus-background: rgba(255,255,255,.9);
    --focus-blur-background: rgba(255,255,255,.6);
    --focus-text-color-lightness: 0%;
}

 

Link to comment
Share on other sites

arrbee99

So it appears, though to be honest, it never occurred to me that changing things called hue, saturation and lightness would turn a green border into a red one.

Link to comment
Share on other sites

Happy2Play
3 minutes ago, arrbee99 said:

So it appears, though to be honest, it never occurred to me that changing things called hue, saturation and lightness would turn a green border into a red one.

I just look at a color picker online to get the numbers.

HTML Color Picker (w3schools.com)

Select a color and use the hsl numbers.  As Luke code targets :root styling as shown in images above.

Edited by Happy2Play
Link to comment
Share on other sites

arrbee99

Ah, OK. Well, said he desperately, Hue, Saturation and Lightness don't really sound coloury to me, so I didn't check. Obviously I should have.

besides, I already had this -

html:root {
    --theme-primary-color: var(--mycolour);
    --theme-accent-text-color: var(--mycolour);
    --theme-primary-color-lightened: var(--mycolour);
    --theme-icon-focus-background: rgba(120, 120, 120, 0.2);
}

so would have though your hsl thing is a variation on the first one.

Link to comment
Share on other sites

arrbee99

I now have this -

html:root {
    --theme-primary-color-hue: 0;
    --theme-primary-color-saturation: 100%;
    --theme-primary-color-lightness: 32%;
    --theme-accent-text-color: var(--mycolour);
    --theme-primary-color-lightened: var(--mycolour);
    --theme-icon-focus-background: rgba(120, 120, 120, 0.2);
}

with your additions and the green highlight is back with Lukes separate highlight colour thing. Any idea what to change please.

Link to comment
Share on other sites

Happy2Play
23 minutes ago, arrbee99 said:

I now have this -

html:root {
    --theme-primary-color-hue: 0;
    --theme-primary-color-saturation: 100%;
    --theme-primary-color-lightness: 32%;
    --theme-accent-text-color: var(--mycolour);
    --theme-primary-color-lightened: var(--mycolour);
    --theme-icon-focus-background: rgba(120, 120, 120, 0.2);
}

with your additions and the green highlight is back with Lukes separate highlight colour thing. Any idea what to change please.

Do to style be applied in html and not using :root, these three have to be !important to override this.

image.thumb.png.649445924a2914960b38e01f4c80113c.png

 

Link to comment
Share on other sites

arrbee99

Partly because I like trying different colours but seem to have settled on red just for now, and because there's lots of different reds out there and I happen to like this variation.

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