Add border to cards

[arrbee99 1815]

That doesn't seem to have any effect for me (in Firefox or Chrome).

Just noticed I tried it (and a few variations) already -

/*div.sessionNowPlayingContent.sessionNowPlayingContent-withbackground button {
       border-radius: 1.5rem;
}*/
/*div.sessionNowPlayingContent {
       border-radius: 1.5rem;
}*/
/*div.sessionNowPlayingContent.sessionNowPlayingContent {
       border-radius: 1.5rem;
}*/

 

[Happy2Play 9780]

38 minutes ago, arrbee99 said:

That doesn't seem to have any effect for me (in Firefox or Chrome).

Just noticed I tried it (and a few variations) already -

/*div.sessionNowPlayingContent.sessionNowPlayingContent-withbackground button {
       border-radius: 1.5rem;
}*/
/*div.sessionNowPlayingContent {
       border-radius: 1.5rem;
}*/
/*div.sessionNowPlayingContent.sessionNowPlayingContent {
       border-radius: 1.5rem;
}*/

 

Sorry I had tested in two places you need this one.

div.activeSession .cardContent {
    border-radius: 1.5rem;
}

 

[arrbee99 1815]

Excellent. That looks great. Thanks very much

[arrbee99 1815]

Any chance of some updates with this please ? I think 4.7.something broke it recently

Think the original stuff was this -

 /* Remove Fade and Add Box to Focus Item */
div.cardOverlayContainer {
    background: transparent;
    border-style: solid;
    border-width: 6px 6px 6px 6px;
    border-color:  var(--myblue);
    border-radius: 1.5rem;
}

/*Add Box to All Items on Movies TV etc */
div.cardScalable {
    background: transparent;
    border-style: solid;
    border-width: 4px 4px 4px 4px;
    border-color: white;
    border-radius: 1.8rem;
}

/*Get above to work in Chrome also*/
div.cardScalable button   {
    border-radius: 1.5rem;
}

But all that seems to do now is not add a permanent border and the border I get when hovering is white not blue.

I've been trying for ages but not much joy. Can't even spot that cardScalable thing anywhere.

[Happy2Play 9780]

Took me a minute to see as I had to clear my browser cache for my test build to see the change.

Your color issue should be your var(--myblue), but yes overall code has changed and will look at it more later as it looks like the two boxes don't align like they use to and are different on for thumb and poster (at least on my system).

You will/should see what I mean with this

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

div.cardOverlayContainer {
    background: radial-gradient(farthest-corner at 50% 50%,rgba(30,30,30,0) 50%,#2c2c2c 100%);
    border: 4px blue solid;
    border-radius: 1.8rem;
}

You can see cardScalable has changed

 

Edited June 19, 2021 by Happy2Play
Minor changes but still not like previous

[Happy2Play 9780]

Doesn't look like you can get the same effect you had before.  Minor updates above.

backdrop: transparent seem to mess up the scaling.

[arrbee99 1815]

Thanks very much for that. Works great. I think originally I wanted it to do what you've done now actually.

But I still wish this kind of fixing wasn't necessary almost every time a (significant) new version turns up.

Am wondering what the bit after Farthest Corner does ? At least, I see it makes the corners darker and uses two shades of grey, is there a particular reason why one colour is an rgba and the other a # ?

[Happy2Play 9780]

1 minute ago, arrbee99 said:

Am wondering what the bit after Farthest Corner does ? At least, I see it makes the corners darker and uses two shades of grey, is there a particular reason why one colour is an rgba and the other a # ?

I just copied Luke's code and removed the .5 for brightness.

[arrbee99 1815]

That kind of brilliantly simple approach is way beyond me

[arrbee99 1815]

See what you mean about the boxes now -

and

more noticeable when the blue box is too small.

There's always something...

[arrbee99 1815]

Changing the second part to this

div.cardOverlayContainer {
    background: radial-gradient(farthest-corner at 50% 50%,rgba(30,30,30,0) 50%,#2c2c2c 100%);
    outline: 5px blue solid;
outline-offset: -4px;
    border-radius: 1.8rem;
}

seems to work. Don't know why changing it to outline affects the bottom border but it'll do (hopefully).

If you leave the first outline as 4px a bit of white peeps through the bottom border.

 

[Happy2Play 9780]

23 minutes ago, arrbee99 said:

Changing the second part to this

div.cardOverlayContainer {
    background: radial-gradient(farthest-corner at 50% 50%,rgba(30,30,30,0) 50%,#2c2c2c 100%);
    outline: 5px blue solid;
outline-offset: -4px;
    border-radius: 1.8rem;
}

seems to work. Don't know why changing it to outline affects the bottom border but it'll do (hopefully).

If you leave the first outline as 4px a bit of white peeps through the bottom border.

 

What do you think of this?

div.cardBox .cardContent {
    box-shadow: inset 0 0 0 4px white;
    border-radius: 1.8rem;
}

div.cardOverlayContainer {
    background: radial-gradient(farthest-corner at 50% 50%,rgba(30,30,30,0) 50%,#2c2c2c 100%);
    box-shadow: inset 0 0 0 4px blue;
    border-radius: 1.8rem;
}

Only

[arrbee99 1815]

That looks fine in most places, except not too sure about the in progress stuff -

using Outline it was -

 

 

 

 

Edited June 20, 2021 by arrbee99

[arrbee99 1815]

...can't get that third picture to delete

[Happy2Play 9780]

19 minutes ago, arrbee99 said:

...can't get that third picture to delete

You have to ensure you delete in Uploaded image area.

[arrbee99 1815]

15 minutes ago, Happy2Play said:

You have to ensure you delete in Uploaded image area.

So it appears....

Thanks again

[Happy2Play 9780]

20 hours ago, arrbee99 said:

That looks fine in most places, except not too sure about the in progress stuff -

How about this? Minor changes as itemdetails was not playing nice and removed inset.

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

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

 

[arrbee99 1815]

Thank you. That looks very nice.

The below seem to work. Any thoughts  on whether they're actually correct.

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

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

 

[Happy2Play 9780]

1 hour ago, arrbee99 said:

Thank you. That looks very nice.

The below seem to work. Any thoughts  on whether they're actually correct.

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

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

 

Looks good, If you need it limited to Dashboard you would prefix with "div.dashboardSections".  Not sure of other areas that are these elements.

[arrbee99 1815]

Thanks for the hint.

All seems fine so far...

[thymon 11]

looks great !

Finaly what is the complete css ? 

[arrbee99 1815]

If (repeat if) I've picked the right bits and haven't missed anything, and there aren't unintended consequences, etc its -

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

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

Have quite a few other bits obviously, should you be interested.

[arrbee99 1815]

I have this at the moment (some commented out) -

/* Borders */

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

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

and I'm hoping there's a way to get rid of the white borders at just these locations -

and

I've tried, hence those green borders which I haven't shown the css for, but any thoughts please ?

[Happy2Play 9780]

10 minutes ago, arrbee99 said:

I have this at the moment (some commented out) -

/* Borders */

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

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

and I'm hoping there's a way to get rid of the white borders at just these locations -

and

I've tried, hence those green borders which I haven't shown the css for, but any thoughts please ?

 Well something like this.  Separating code and adding ":not" elements

 

/* Borders */

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

 

[arrbee99 1815]

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