Add grey background to Details page fom name downwards

[arrbee99 1712]

As per the above, am wanting to have a bright backdrop (which I already have) with a somewhat opaque background from the name of the media downwards.

Have got this so far -

div.flex-grow.topDetailsMain.flex.flex-direction-column {background: rgba(0, 0, 0, 0.3);}

giving -

but can't get it to work for everything lower down. Have played with -

div.details-additionalContent.padded-bottom-page.details-additionalContent-withbackdrop {{background: rgba(0, 0, 0, 0.3);}

div.scrollSlider.flex-grow.padded-top-page.itemMainScrollSlider.scrollSliderY {background: rgba(0, 0, 0, 0.3);}

and I don't know what else, but...

[Happy2Play 9443]

Something like this but you will have to look at each sections margin-top, unless you like the stripes.

div.itemMainScrollSlider div.verticalSection {background: rgba(0, 0, 0, 0.3);}

 

[arrbee99 1712]

Thanks very much. I shall try to find some margins...

[Happy2Play 9443]

14 minutes ago, arrbee99 said:

Thanks very much. I shall try to find some margins...

Something like this

div.itemMainScrollSlider h2.sectionTitle {margin-top: 0;}
div.itemMainScrollSlider .sectionTitleContainer {margin: 0;}
div.itemMainScrollSlider .verticalSection-extrabottompadding {margin-bottom: 0;}

 

[arrbee99 1712]

Thanks. I was trying this -

 div.itemMainScrollSlider div.verticalSection {
  margin-top: 12px;
  margin-bottom: -12px;
 }

which seems to leave a gap between the title  / info stuff and Next Up, then no gaps between Next Up and More Like This, and then a gap to Links

Will definitely have a play with the above though.

[Happy2Play 9443]

Maybe something like this if you need more spacing otherwise you would have to target specific sections.

div.itemMainScrollSlider .verticalSection:not(.detailMainContainer) {padding: 1em 0 0 0;}

 

Edited October 20, 2020 by Happy2Play

[arrbee99 1712]

Unsurprisingly, I don't know what I want, but hopefully I'll know what I want when I see it

[arrbee99 1712]

Quite promising I think...

[speechles 2010]

You lose the partial image "clues" that more exists below to scroll to.

It looks like your screen is just that. As if nothing exists further below. That is why those cut-off items appear because the design guidelines say to give users context clues. Without those context clues certain screens may fail certification on app stores. I am being serious. They will reject you and maybe not tell you why but expect you to know or go through the app and find anything not in the guidelines and fix it. So the reason you see this is the trend is moving this direction.

 

2 hours ago, arrbee99 said:

Quite promising I think...

 

Edited October 20, 2020 by speechles

[arrbee99 1712]

Thats one of the reasons I like it, no tops of actors showing (and no poster of course).

As I'm sure you know, its css just for browsers only and personal use, so it can be changed without worrying about daft (IMHO) certification requirements (I still don't see why there can't be a down arrow instead).