arrbee99 1551 Posted March 27, 2021 Author Share Posted March 27, 2021 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; }*/ Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted March 27, 2021 Share Posted March 27, 2021 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; } 1 Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted March 27, 2021 Author Share Posted March 27, 2021 Excellent. That looks great. Thanks very much Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted June 19, 2021 Author Share Posted June 19, 2021 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. Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted June 19, 2021 Share Posted June 19, 2021 (edited) 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 1 Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted June 19, 2021 Share Posted June 19, 2021 Doesn't look like you can get the same effect you had before. Minor updates above. backdrop: transparent seem to mess up the scaling. Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted June 19, 2021 Author Share Posted June 19, 2021 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 # ? Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted June 19, 2021 Share Posted June 19, 2021 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. Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted June 19, 2021 Author Share Posted June 19, 2021 That kind of brilliantly simple approach is way beyond me Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted June 19, 2021 Author Share Posted June 19, 2021 See what you mean about the boxes now - and more noticeable when the blue box is too small. There's always something... Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted June 20, 2021 Author Share Posted June 20, 2021 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. Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted June 20, 2021 Share Posted June 20, 2021 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 Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted June 20, 2021 Author Share Posted June 20, 2021 (edited) 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 Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted June 20, 2021 Author Share Posted June 20, 2021 ...can't get that third picture to delete Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted June 20, 2021 Share Posted June 20, 2021 19 minutes ago, arrbee99 said: ...can't get that third picture to delete You have to ensure you delete in Uploaded image area. Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted June 20, 2021 Author Share Posted June 20, 2021 15 minutes ago, Happy2Play said: You have to ensure you delete in Uploaded image area. So it appears.... Thanks again Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted June 20, 2021 Share Posted June 20, 2021 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; } Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted June 20, 2021 Author Share Posted June 20, 2021 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; } Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted June 21, 2021 Share Posted June 21, 2021 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. Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted June 21, 2021 Author Share Posted June 21, 2021 Thanks for the hint. All seems fine so far... Link to comment Share on other sites More sharing options...
thymon 9 Posted June 21, 2021 Share Posted June 21, 2021 looks great ! Finaly what is the complete css ? Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted June 21, 2021 Author Share Posted June 21, 2021 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. Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted October 17, 2021 Author Share Posted October 17, 2021 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 ? Link to comment Share on other sites More sharing options...
Happy2Play 8252 Posted October 17, 2021 Share Posted October 17, 2021 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; } Link to comment Share on other sites More sharing options...
arrbee99 1551 Posted October 17, 2021 Author Share Posted October 17, 2021 Would those two new ones replace the first two of the old stuff ? Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now