Fix up excessive css shading

[arrbee99 1815]

Have this bit of css -

/* Add transparent grey background to top info, episode list, extra bottom info */  
div.verticalSection.detailMainContainer {background: rgba(0, 0, 0, 0.3); }
div.trackList.vertical-list {background: rgba(0, 0, 0, 0.3); }
div.details-additionalContent.padded-bottom-page.details-additionalContent-withbackdrop {background: rgba(0, 0, 0, 0.3); }

which adds shading here (hopefully if I've found the right bit), but that seems to be adding  (too much ?) shading here (that extra wide darker band)

so I tried this

/* Try to make individual seaon top details not transparent all the way over but works everywhere*/
/*div.verticalSection.detailMainContainer.flex.flex-direction-row.align-items-flex-start.padded-left.padded-right.detailMainContainer-withitembackdrop {background: rgba(0, 0, 0, 0.0); }*/

but that removes it everywhere.

Any thoughts please, to get rid of the shading in just that bit (seems to be correct on other detail pages) or adjust its width on just that page, or...

 

 

Edited June 29, 2022 by arrbee99

[Happy2Play 9780]

@arrbee99Are you talking about the listitem hover treatment?  As the detailMainContainer is not transparent.

disabled

Edited June 29, 2022 by Happy2Play

[arrbee99 1815]

I think its the MainContainer thing.

The overall view looks good to me, with uniform transparency -

While a better example of the image in the first post has this -

and getting rid of it using the css in the first post yields this -

and kills some of the effect here as well -

so in second image above, hoping to keep the shading for the details ('Agatha Christie's Poirot' 'Season 1' bit), but make it same width as the stuff below it, or make the shading below it wider (preferable I think), or get rid off the wide shading but just for that page...

 

 

[Happy2Play 9780]

I am guessing you are talking about the issue on the left ie multi-select position as I do not see the issue per my screenshots so that would suggest different code.  What are you doing with multi-select?  If this is not what you are asking about, I guess, I am blind.

[arrbee99 1815]

I do seem to have killed the multi-select bit with some css somewhere. But you should see its the same down the right hand side as well.

Its this T shape transparency thing am hoping to fix up somehow.

 

[Happy2Play 9780]

@arrbee99 can you post or pm all your custom css.

[arrbee99 1815]

Hokey, just bare in mind there's a reason I've never won the most organized css in the Universe competition...

Emby css 30 Jun 22.txt

[Happy2Play 9780]

7 minutes ago, arrbee99 said:

Hokey, just bare in mind there's a reason I've never won the most organized css in the Universe competition...

Emby css 30 Jun 22.txt 30.09 kB · 0 downloads

Not seeing an issue here.

[arrbee99 1815]

Weird. So seems like its not having that shading at the top being too wide, its shading for individual episodes being too narrow. Get it in Firefox and Edge (that I've checked), using the server beta. I see I get multi-select showing up in Edge as well. Oh well, such is life. Thanks for all your considerable efforts ...I shall return...

[arrbee99 1815]

BTW I just got Firefox 102 and now get this weird bar when hovering in Library -

...actually when you hover over any image anywhere...

[arrbee99 1815]

Related to this I guess -

 

[arrbee99 1815]

On the plus side blur is back !

[Happy2Play 9780]

2 minutes ago, arrbee99 said:

BTW I just got Firefox 102 and now get this weird bar when hovering in Library -

...actually when you hover over any image anywhere...

Noticed that also, will look at it shortly.

Back to the issue, not sure why one is using margin and the other just padding.

 

 

[Happy2Play 9780]

Yes the hover issue is do to the defects introduced in FF102 as it works in nightly 104.

[arrbee99 1815]

Excuse the dumbness, but that margin and padding thing, one vs the other, what are you comparing ?

[Happy2Play 9780]

56 minutes ago, arrbee99 said:

Excuse the dumbness, but that margin and padding thing, one vs the other, what are you comparing ?

Margin is causing your T effect.

removed div.itemMainScrollSlider to better see

 

But my examples one has virtualItemsContainerand the other does not

div.trackList.vertical-list.padded-left.padded-right.padded-bottom.focuscontainer-left.itemsContainer.padded-bottom-page.tracklist-topmargin.virtualItemsContainer.virtual-scroller-overflowvisible.virtual-scroller

vs

div.trackList.vertical-list.padded-left.padded-right.padded-bottom.focuscontainer-left.itemsContainer.padded-bottom-page.tracklist-topmargin

 

[Happy2Play 9780]

@arrbee99 I guess add something like this

div.topDetailsMain .virtualItemsContainer.vertical-list.padded-left, div.topDetailsMain .virtualItemsContainer.vertical-wrap.padded-left {
    margin-left: 0;
    padding-left: 3.4%;
}

div.topDetailsMain .virtualItemsContainer.vertical-list.padded-right, div.topDetailsMain .virtualItemsContainer.vertical-wrap.padded-right {
    margin-right: 0;
    padding-right: 0%;
}

div.topDetailsMain .virtualScrollItem.dataGridItem, div.topDetailsMain .virtualScrollItem.listItem {
    width: 93.5%;
}

 

[arrbee99 1815]

Excellent. Thank you. Also fixes up the multi-select

[arrbee99 1815]

Am wondering if this could be fixed in the latest beta. I think in connection with the above, its now missing some shading -

and

tried changing that 3.4% but it had no effect

 

 

[Happy2Play 9780]

Many need to delete/edit existing code.

But something like this.

div.topDetailsContainer div.topDetailsMain div.padded-right {
    -webkit-padding-end: 0;
    padding-inline-end: 0;
}

div.topDetailsContainer div.topDetailsMain div.padded-left {
    -webkit-padding-start: 0;
    padding-inline-start: 0;
}

div.topDetailsContainer div.topDetailsMain div.detailMainContainer {padding-left: 3.4%;}
div.topDetailsContainer div.topDetailsMain div.trackList.vertical-list {padding-left: 3.4%;}

 

[arrbee99 1815]

Terrific. Thank you.