Fixing media info gaps

[arrbee99 1815]

Having trouble with these gaps again. Any thoughts please on how to either get rid of the gaps so the shading is continuous or fill in the gaps with shading. Thanks. Seems to need different things depending on if its got lists, like episodes or music album tracks involved.

 

 

[Happy2Play 9780]

Where have you looked?  As by default there is spacing between sections.

But look here

But though we looked at this awhile ago?

But may need to look at all your code again.

[mgworek 134]

I use these lines to get the info to move down and not have the darker backdrop for the whole screen.

.backgroundContainer.withBackdrop {
 background: rgba(0, 0, 0, .10)!important;
}

div.topDetailsMain {padding-top: 30em; }

div.backgroundContainer.withBackdrop {background: rgba(0,0,0,.10)!important; opacity: 0 !important;}

[arrbee99 1815]

1 hour ago, mgworek said:

I use these lines to get the info to move down and not have the darker backdrop for the whole screen.

.backgroundContainer.withBackdrop {
 background: rgba(0, 0, 0, .10)!important;
}

div.topDetailsMain {padding-top: 30em; }

div.backgroundContainer.withBackdrop {background: rgba(0,0,0,.10)!important; opacity: 0 !important;}

 

I have similar, but also want bit of grey behind the info for slightly better legibility, but its in sections with gaps in-between, which is untidy.

[arrbee99 1815]

5 hours ago, Happy2Play said:

Where have you looked?  As by default there is spacing between sections...

But look here...

But though we looked at this awhile ago?

But may need to look at all your code again.

True, did look a while ago, its just not right at the moment for me. I can't get all the gaps shown to disappear nicely at the same time - got some right and it leaves others somewhere else.

Anyway, was playing with this (which is 90%% yours anyway) ----

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

/*div.verticalSection.detailMainContainer {margin-bottom: -2em;}*/

/*div.details-additionalContent.padded-bottom-page.details-additionalContent-withbackdrop {margin-top: 10em;}
div.details-additionalContent.padded-bottom-page.details-additionalContent-withbackdrop {background: rgba(0, 0, 0, 0.3);}

div.trackList.vertical-list.padded-bottom {margin-top: 10em;}*/

/* Add transparent grey background to top info, episode list, extra bottom info */  
/*div.topDetailsMain {margin-bottom: -2em;}*/

/* Close gap between Media Info and info below that */
div.topDetailsContainer {margin-bottom: -2em;}

/* Add a bit of a gap between Media Info and next item down - Cast & Crew or Seasons */
div.details-additionalContent.padded-bottom-page.details-additionalContent-withbackdrop {background: rgba(0, 0, 0, 0.3); padding-top: 1em;}

/* TRY TO Add a bit of a gap between Media Info and next item down - list of episodes and list of songs */
div.verticalSection.detailMainContainer {margin-bottom: -2em;}

/*div.verticalSection.detailMainContainer:not(.topDetailsContainer) {margin-bottom: -2em;}*/

div.verticalSection.detailMainContainer {background: rgba(0, 0, 0, 0.3); padding-bottom: 1em;}

----hope thats the right stuff. Bit of a mess obviously.

[mgworek 134]

42 minutes ago, arrbee99 said:

I have similar, but also want bit of grey behind the info for slightly better legibility, but its in sections with gaps in-between, which is untidy.

Oh I see it now. I misunderstood. Sorry, was trying to help!

[Happy2Play 9780]

Really depends on what you want as the easy route mentioned about is to remove the gap code or zero it out.

@supports selector(:hover) and (display: revert) and (column-gap:1em) {
    .verticalSections {
        row-gap: 0;
    }
}

Or 

div.padded-bottom-focusscale {
    margin-bottom: -2em;
    padding-bottom: 2em;
}

 

[arrbee99 1815]

Thanks for your help. For me, only the first one you gave works for some reason.

Must admit though, removing the gaps makes things look a bit scrunched up. Not much of a gap above Cast & Crew for example.

You don't think there's a way to extend this grey transparency thing (there's others apart from the one below) -

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

past any margin or something ?

[arrbee99 1815]

Don't know if its very nice or very elegant or getting some kind of result the daftest way possible, but I think this works -

/* Get rid of gaps in media info sections */
@supports selector(:hover) and (display: revert) and (column-gap:1em) {
    .verticalSections {
        row-gap: 0;
    }
}

/* Add shading to first section of media info */
div.verticalSection.detailMainContainer {background: rgba(0, 0, 0, 0.3);}

/* Add bit of a gap before Cast & Crew and before More From in album songs list */
div.details-additionalContent:before {content: ""; height: 25px; width: 100%; }

/* Add shading to lists of episodes and music tracks only */
div.trackList.vertical-list {background: rgba(0, 0, 0, 0.3); }

/* Add shading to info below initial media info only ie from Cast & Crew or Seasons downwards */
div.details-additionalContent.padded-bottom-page.details-additionalContent-withbackdrop {background: rgba(0, 0, 0, 0.3);}