Jump to content

Fixing colour outliers


arrbee99

Recommended Posts

arrbee99

Am just wondering, this changes the basic colour scheme I use to blue -

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

but there's a few bits that get left as the old colour. So, is there any easy (repeat easy) way in css to set some kind of colour variable for these extra bits to point too so these extras don't have to be changed individually ?

Merci.

Link to comment
Share on other sites

Happy2Play

@arrbee99 Do you have specific examples?  But it really depends on if the original code points to theme or not.

Edited by Happy2Play
Link to comment
Share on other sites

arrbee99

Seems to be these -

/* Playing Now Queue - Second Line of Album and Song Name to Blue */
h3.videoOsdTitle { color: #5d7e9b !important;}

/*Change card progress indicator color*/
progress.playbackProgress::-webkit-progress-value, progress.playbackProgress::-moz-progress-bar {background-color:#5d7e9b;}

/*Adjust Colour and Width of Current Time Indicator*/
div.guide-currentTimeIndicatorDot {width: 3px;}
div.guide-currentTimeIndicatorDot {background: #5d7e9b;}

/*Make Premiere New etc Blue*/
div.mediaInfoProgramAttribute.mediaInfoItem {background-color: #5d7e9b;}
span.premiereTvProgram.guideProgramIndicator {background-color: #5d7e9b;}

/*Make Scheduled Tasks Progress Bar Blue*/
div.taskProgressInner {background-color: #5d7e9b;}

/*Running Task Percentage Colour*/
#divRunningTasks.paperList  p  span {color: #5d7e9b !important;}

/*Up to Date Checkbox to Blue*/
#pUpToDate i {background-color: #5d7e9b !important;}

/*Activity and Alerts to Blue*/
div.listItemImageContainer-round.defaultCardBackground {background-color: #5d7e9b !important;}

/*Make Scheduled Tasks percentage Colour Blue*/
div.scheduledTaskPaperIconItem[data-status="Running"] span {color: #5d7e9b;}

Might be possible that some where added before the stuff given in the first post and are redundant...

Link to comment
Share on other sites

Happy2Play

Quick look most are controlled outside of Theme. 

53 minutes ago, arrbee99 said:

/* Playing Now Queue - Second Line of Album and Song Name to Blue */
h3.videoOsdTitle { color: #5d7e9b !important;}

Depends if you want every secondary lines this color, add.

    --theme-body-secondary-text-color: #5d7e9b;

You might want to look at all of the root values and pick and choose.  But if you only want a specific element you will have to target.

Edited by Happy2Play
Link to comment
Share on other sites

arrbee99

I will check that out, thanks, looks interesting.

Also, so far, this seems to work -

html:root {
    --myblue: #ff0000;
}

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

so can hopefully just change that one value on line 2 and it propagates. Still have to have that stuff in Post #3, far as I can see, so am having a go at changing #5d7e9b; to var(--myblue); wherever it occurs.

 

Link to comment
Share on other sites

Happy2Play
2 minutes ago, arrbee99 said:

Still have to have that stuff in Post #3, far as I can see, so am having a go at changing #5d7e9b; to var(--myblue); wherever it occurs.

Yes as they have there own css or html styling, so all elements that are not using var(--theme-primary-color) will need changed as it is not targeted by root values.

  • Like 1
Link to comment
Share on other sites

arrbee99

Erm. Not really related, but this -

changes the colour of the controls on the video player -

div.videoOsdBottom-buttons.flex.align-items-center.flex-direction-row.focuscontainer-x.videoOsd-customFont {color: #A30000;}

but I actually want to try drop shadows on those controls and this -

div.videoOsdBottom-buttons.flex.align-items-center.flex-direction-row.focuscontainer-x.videoOsd-customFont {text-shadow: 2px 2px #000000;}

doesn't work.

Any thoughts please ?

Link to comment
Share on other sites

PenkethBoy
4 hours ago, arrbee99 said:

Am just wondering, this changes the basic colour scheme I use to blue -

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

but there's a few bits that get left as the old colour. So, is there any easy (repeat easy) way in css to set some kind of colour variable for these extra bits to point too so these extras don't have to be changed individually ?

Merci.

curious

is the root stuff just something you added to your custom css - did you copy it from somewhere or from a theme.css file?

reason i ask is that there are a lot more --xxxx options in a theme.css which might get you closer to having only a few things to change and get all items picked up etc

 

Link to comment
Share on other sites

arrbee99

Happy2play is probably the person to ask, as he (or she ?) provided it in the first place. I put it in the custom css, though don't know where Happy got it from.

Making the colour a variable makes life a bit easier.

Sorry. As you know, my css 'skills' are largely confined to the cut and paste variety.

Could have a look in the themes, not that I'd know what to look for.

Link to comment
Share on other sites

PenkethBoy

this is the current list from the top of the theme.css file

1298921235_Annotation2020-10-29062950.jpg.5a44c8cadc05e845c9de6d996f9d94ed.jpg

you can see the path at the top embycore is just my root for a test install but system onwards is the same as your install

some of the above colours i have changed for the dark theme from Lukes default

i have as yet not experimented with changing all of them to see what happens but would be easy to do - just not had the time recently to play

 

Note: i opened this in Visual Studio Code and get it to modify the file from one line to a more readable format

Link to comment
Share on other sites

arrbee99

It is a bit easier on the eye like that.

I've looked at that before, just can't remember what for.

Anyway, if I look in say the dark-red theme, assuming there isn't more than one red used, it only gets mentioned 3 times, and those are the three mentioned in the css given above.

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