Add border to cards

[Happy2Play 9780]

Just now, arrbee99 said:

Would those two new ones replace the first two of the old stuff ?

Replace your first code above with those two.  Don't believe it would apply to your second cardOverlay code at all.

[arrbee99 1815]

its now this

/*div.cardBox .cardContent:not(.detailMainContainer .cardContent) {
    box-shadow: 0 0 0 4px white;
    border-radius: 1.8rem;
}*/

div.cardBox .cardContent:not(.detailMainContainer .cardContent) {
    border-radius: 1.8rem;
}

div.cardBox .cardContent:not(.detailMainContainer .cardContent) :not(div.recentlyPlayedSection) :not(div.nowPlayingSessions) {
    box-shadow: 0 0 0 4px white;
}

div.cardOverlayContainer:not(.detailMainContainer .cardOverlayContainer) {
    background: transparent;
    box-shadow: 0 0 0 4px blue;
    border-radius: 1.8rem;
}

div.detailMainContainer .cardContent {
    border: 4px solid white;
    border-radius: 1.8rem;
}

div.detailMainContainer .cardOverlayContainer {
    border: 4px solid blue;
    background: transparent;
    border-radius: 1.8rem;
}

/*Add Rounded Corners to All Dashboard Items*/
div.paperList {
    border-radius: 1.8rem;
}

/*Add Rounded Corners to Dashboard Active Devices*/
div.cardBox.visualCardBox {
    border-radius: 1.8rem;
}

/*Add White Border to Dashboard Active Devices*/
/*div.sessionNowPlayingContent {
    border: 4px white solid !important;
    border-radius: 1.8rem;
}*/

/* Add Round Corners to Info Banner */
div.infoBanner {
    border-radius: 1.8rem;
}

But now its not applying white borders to anything on the home page or Movies page or actors but is doing weird stuff to Media Info -

 

 

[Happy2Play 9780]

2 hours ago, arrbee99 said:

its now this

/*div.cardBox .cardContent:not(.detailMainContainer .cardContent) {
    box-shadow: 0 0 0 4px white;
    border-radius: 1.8rem;
}*/

div.cardBox .cardContent:not(.detailMainContainer .cardContent) {
    border-radius: 1.8rem;
}

div.cardBox .cardContent:not(.detailMainContainer .cardContent) :not(div.recentlyPlayedSection) :not(div.nowPlayingSessions) {
    box-shadow: 0 0 0 4px white;
}

div.cardOverlayContainer:not(.detailMainContainer .cardOverlayContainer) {
    background: transparent;
    box-shadow: 0 0 0 4px blue;
    border-radius: 1.8rem;
}

div.detailMainContainer .cardContent {
    border: 4px solid white;
    border-radius: 1.8rem;
}

div.detailMainContainer .cardOverlayContainer {
    border: 4px solid blue;
    background: transparent;
    border-radius: 1.8rem;
}

/*Add Rounded Corners to All Dashboard Items*/
div.paperList {
    border-radius: 1.8rem;
}

/*Add Rounded Corners to Dashboard Active Devices*/
div.cardBox.visualCardBox {
    border-radius: 1.8rem;
}

/*Add White Border to Dashboard Active Devices*/
/*div.sessionNowPlayingContent {
    border: 4px white solid !important;
    border-radius: 1.8rem;
}*/

/* Add Round Corners to Info Banner */
div.infoBanner {
    border-radius: 1.8rem;
}

But now its not applying white borders to anything on the home page or Movies page or actors but is doing weird stuff to Media Info -

 

 

Okay this should do it, has a issue with spaces.

div.cardBox .cardContent:not(.detailMainContainer .cardContent):not(div.recentlyPlayedSection .cardContent):not(div.nowPlayingSessions .cardContent) {
    box-shadow: 0 0 0 4px white;
}

 

[arrbee99 1815]

Fabuloso. Thanks very much.

[arrbee99 1815]

Wondering if anyone might know how to get rid of these white curvy remnants -

which I think escaped this (the second line it seems) -

/* Add rounded corners to all posters thumbs etc except for dashboard Now Playing and Music recently frequently */
div.cardBox .cardContent:not(.detailMainContainer .cardContent):not(div.recentlyPlayedSection .cardContent):not(div.frequentlyPlayedSection .cardContent):not(div.nowPlayingSessions .cardContent) {
    border-radius: 1.8rem;
}

/* Add shadow to all posters thumbs etc except for dashboard Now Playing and Music recently frequently */
div.cardBox .cardContent:not(.detailMainContainer .cardContent):not(div.recentlyPlayedSection .cardContent):not(div.frequentlyPlayedSection .cardContent):not(div.nowPlayingSessions .cardContent) {
    box-shadow: 0 0 0 4px white;
}

Been trying to get rid of it for hours but no joy. Thank you.

[Happy2Play 9780]

14 hours ago, arrbee99 said:

Wondering if anyone might know how to get rid of these white curvy remnants -

which I think escaped this (the second line it seems) -

/* Add rounded corners to all posters thumbs etc except for dashboard Now Playing and Music recently frequently */
div.cardBox .cardContent:not(.detailMainContainer .cardContent):not(div.recentlyPlayedSection .cardContent):not(div.frequentlyPlayedSection .cardContent):not(div.nowPlayingSessions .cardContent) {
    border-radius: 1.8rem;
}

/* Add shadow to all posters thumbs etc except for dashboard Now Playing and Music recently frequently */
div.cardBox .cardContent:not(.detailMainContainer .cardContent):not(div.recentlyPlayedSection .cardContent):not(div.frequentlyPlayedSection .cardContent):not(div.nowPlayingSessions .cardContent) {
    box-shadow: 0 0 0 4px white;
}

Been trying to get rid of it for hours but no joy. Thank you.

Did you try ":not" for that element?

Quote

/* Add shadow to all posters thumbs etc except for dashboard Now Playing and Music recently frequently */
div.cardBox .cardContent:not(.detailMainContainer .cardContent):not(div.recentlyPlayedSection .cardContent):not(div.frequentlyPlayedSection .cardContent):not(div.nowPlayingSessions .cardContent):not(.cardImageContainer-sideFooter) {
    box-shadow: 0 0 0 4px white;
}

 

[arrbee99 1815]

Thanks. Wasn't sure whether it would apply there, thought the existing ':not's were just for the Music > Suggestions page and wouldn't work for Music > Songs.

And I probably wouldn't have put what you put anyway.

Now I just need to find whats making that Songs page the only one with an alphapicker that isn't fixed but scrolls with the songs...

[Happy2Play 9780]

3 minutes ago, arrbee99 said:

Now I just need to find whats making that Songs page the only one with an alphapicker that isn't fixed but scrolls with the songs..

Mine is fixed.  Have you tested with no css ensuring to clear your browser cache?

[arrbee99 1815]

Yes, its fine with no css. Guess I just have to put it back slowly and methodically...

[arrbee99 1815]

Seems to be this -

/* Make Home Page posters, Movie TV posters, Actors Etc almost black and white but exclude TV guide */
div.scrollSlider.flex-grow.padded-top-page {filter: blur(0px) grayscale(3%)!important;}
/* and exclude Dashboard Family tick boxes */
/*div.scrollSlider.flex-grow.flex-direction-column.padded-left.padded-left-page.padded-right.padded-top-page.padded-bottom-page.settingsContainer.scrollSliderY {filter: blur(0px) grayscale(0%)!important;}*/

when the top one is operating the picker isn't fixed, but when its commented out it is fixed. Can you spot a reason as I (surprisingly) can't.

I can leave it commented out as it has very little effect anyway, but just wondering...

[Happy2Play 9780]

13 minutes ago, arrbee99 said:

Seems to be this -

/* Make Home Page posters, Movie TV posters, Actors Etc almost black and white but exclude TV guide */
div.scrollSlider.flex-grow.padded-top-page {filter: blur(0px) grayscale(3%)!important;}
/* and exclude Dashboard Family tick boxes */
/*div.scrollSlider.flex-grow.flex-direction-column.padded-left.padded-left-page.padded-right.padded-top-page.padded-bottom-page.settingsContainer.scrollSliderY {filter: blur(0px) grayscale(0%)!important;}*/

when the top one is operating the picker isn't fixed, but when its commented out it is fixed. Can you spot a reason as I (surprisingly) can't.

I can leave it commented out as it has very little effect anyway, but just wondering...

add :not(.padded-right-withalphapicker) as those elements apply to Songs tab scroller, don't know why  filter would cause this action though.

Quote

/* Make Home Page posters, Movie TV posters, Actors Etc almost black and white but exclude TV guide */
div.scrollSlider.flex-grow.padded-top-page:not(.padded-right-withalphapicker) {filter: blur(0px) grayscale(3%)!important;}

[arrbee99 1815]

Thanks again

Never in a million years etc etc...

[arrbee99 1815]

Could do with some help please to fix up the borders on the Info banner when playing something -

I've managed to move the poster round a bit and made the image a bit smaller but I just can't get the border to go all the way round.

It uses this -

/* Add shadow to all posters thumbs etc except for dashboard Now Playing and Music recently frequently */
div.cardBox .cardContent:not(.detailMainContainer .cardContent):not(div.recentlyPlayedSection .cardContent):not(div.frequentlyPlayedSection .cardContent):not(div.nowPlayingSessions .cardContent):not(.cardImageContainer-sideFooter) {
    box-shadow: 0 0 0 4px white;
}

and this moves the text down a bit -

/* Move text down in osd Info banner */
h3.videoosd-info-title {padding-top: 4em; }

Any thoughts please ?

[Happy2Play 9780]

17 hours ago, arrbee99 said:

Could do with some help please to fix up the borders on the Info banner when playing something -

I've managed to move the poster round a bit and made the image a bit smaller but I just can't get the border to go all the way round.

It uses this -

/* Add shadow to all posters thumbs etc except for dashboard Now Playing and Music recently frequently */
div.cardBox .cardContent:not(.detailMainContainer .cardContent):not(div.recentlyPlayedSection .cardContent):not(div.frequentlyPlayedSection .cardContent):not(div.nowPlayingSessions .cardContent):not(.cardImageContainer-sideFooter) {
    box-shadow: 0 0 0 4px white;
}

and this moves the text down a bit -

/* Move text down in osd Info banner */
h3.videoosd-info-title {padding-top: 4em; }

Any thoughts please ?

Did you look at the DIV above the one you are treating that set !important on margins?

Disabled

Does that point you in the right direction?

[arrbee99 1815]

...erm, not really. Does that mean I have css somewhere that sets margins (specifically margins) as !important ? Can't find anything like that.

[Happy2Play 9780]

14 minutes ago, arrbee99 said:

...erm, not really. Does that mean I have css somewhere that sets margins (specifically margins) as !important ? Can't find anything like that.

No look at where it is coming from "videoosd.css", so Luke has code set to !important that you need to override.

Per the images you see videoosd.css overrides (@media (min-width: 50em) .cardBox) [card.css], and .cardbox [card.css] margin values.

So something like this.

div.videoosd-poster .osdInfoImageCardBox {
    margin: .68em!important;
}

 

Edited January 4, 2022 by Happy2Play

[arrbee99 1815]

Ohhhh. Would never have realised that is significant. If I did would probably spend the next hour looking for a !unimportant command.

And why 0.68em?

[Happy2Play 9780]

2 minutes ago, arrbee99 said:

Ohhhh. Would never have realised that is significant. If I did would probably spend the next hour looking for a !unimportant command.

And why 0.68em?

I just used the value that was being overridden.  So by default per the image above 2 override 3/4, 3 is controlled by dimensions.

So you can adjust that value lower.

[arrbee99 1815]

I see. I think...

 

Also (bit weird), do you ever get when you just click in the forum reply box a copy of your previous reply showing up ?

[Happy2Play 9780]

8 minutes ago, arrbee99 said:

Also (bit weird), do you ever get when you just click in the forum reply box a copy of your previous reply showing up ?

Yes I see this occasionally, but not always repeatable.

[arrbee99 1815]

....and it happens again.

Ah well, thanks again for your help - I can only imagine how much you must look forwards to my haven't go a clue what I'm doing questions