About the My Media menu (small) - EmbyServer 4640

[Guest]

Hi,
Is it possible to apply some transparency to the background of these images?
I would like to have light transparency, not full transparency.
Thanks from now on.

[Happy2Play 9441]

Something like this.

div.homeSectionsContainer div.visualCardBox {
    background-color: rgba(0,0,0,.3);
}

 

[Guest]

Homepage charm.
My eternal thanks.
Thank you again.

[Guest]

div.homeSectionsContainer div.visualCardBox {
    background-color: rgba(0,0,0,.3);
}

Hi,
I come back here to see the possibility of adding to the code a way to reduce the height of the buttons marked in blue color, so that they are all smaller, as shown by the button marked in yellow color.
Thank you for that.

Edited August 18, 2021 by CarlosLima

[Happy2Play 9441]

12 minutes ago, CarlosLima said:

div.homeSectionsContainer div.visualCardBox {
    background-color: rgba(0,0,0,.3);
}

Hi,
I come back here to see the possibility of adding to the code a way to reduce the height of the buttons marked in blue color, so that they are all smaller, as shown by the button marked in yellow color.
Thank you for that.

Something like this

div.homeSectionsContainer .cardImageContainer-smallSideFooter {height: 2.6em;}

with possible this also

div.homeSectionsContainer .cardBox-sideFooter {margin: 0.3em;}

 

[Guest]

Your first code delivered what I wanted.
Very grateful again.

[Guest]

/* #31 - Aplica transparencia no background do menu - Happy2Play-150821 */
div.homeSectionsContainer div.visualCardBox {
    background-color: rgba(0,0,0,.3);
}

/* #33 - Reduz a altura do background dos menus - Happy2Play-180821 */
div.homeSectionsContainer .cardImageContainer-smallSideFooter {height: 2.6em;}
div.homeSectionsContainer .cardBox-sideFooter {margin: 0.3em;}

Hi, @Happy2Play
In EmbyServer 4730 this code is perfect, however I would like to reduce the width.
Thanks very much.

[Happy2Play 9441]

6 minutes ago, CarlosLima said:

/* #31 - Aplica transparencia no background do menu - Happy2Play-150821 */
div.homeSectionsContainer div.visualCardBox {
    background-color: rgba(0,0,0,.3);
}

/* #33 - Reduz a altura do background dos menus - Happy2Play-180821 */
div.homeSectionsContainer .cardImageContainer-smallSideFooter {height: 2.6em;}
div.homeSectionsContainer .cardBox-sideFooter {margin: 0.3em;}

Hi, @Happy2Play
In EmbyServer 4730 this code is perfect, however I would like to reduce the width.
Thanks very much.

Something like this, adjust to your needs.

div.homeSectionsContainer .smallBannerCard {width: 14%;}

 

[Guest]

You are the best.
More than perfect by 14%.
Strongly grateful.

[Guest]

Hi, I'm sorry, I forgot to test on the smartphone also in the web app and I found this problem.
Is it possible to fix this?

Edited June 21, 2022 by CarlosLima

[Happy2Play 9441]

25 minutes ago, CarlosLima said:

Hi, I'm sorry, I forgot to test on the smartphone also in the web app and I found this problem.
Is it possible to fix this?

How about this.

@media (min-width:100em) {.smallBannerCard {width: 14%}}

But you could target each different size as Emby is scaling to the display.

 

[Guest]

Hi,
I think I didn't understand. Should I use the previous code and also this last code or just the last one?
At the end of the line of the last code are they really }} or ;} ?
It didn't work for me using both or just using the latter.

[Happy2Play 9441]

3 minutes ago, CarlosLima said:

Hi,
I think I didn't understand. Should I use the previous code and also this last code or just the last one?
At the end of the line of the last code are they really }} or ;} ?
It didn't work for me using both or just using the latter.

The code is correct as @media requires it as there is two parts to the code min-width for display and width for the card, and the semicolon is technically only needed if there is additional code applied to the element.

Before

After 

@media (min-width:100em) {.smallBannerCard {width: 14%;}}

As for mobile I see this in browser emulator, the layout is changed to scroll.

 

[Happy2Play 9441]

1 hour ago, CarlosLima said:

Should I use the previous code and also this last code or just the last one?

Just the last one but I guess will be dependent on what (min-width:xxxem) value your display is currently using as the first code overrides scaling options for display width collapsing card on small screens.

Maybe this

@media (min-width:45em) {.smallBannerCard {width: 30%}}
@media (min-width:70em) {.smallBannerCard {width: 14%}}
@media (min-width:100em) {.smallBannerCard {width: 14%}}

.itemsContainer-sideFooters {flex-direction: row}

@supports ((display:-webkit-flex) or (display:flex))
{.itemsContainer-smallSideFooters {max-height: fit-content}}

But as mentioned is dependent on min-width being used.

The additional code above changed scrolling on My Media.

If I removed the min-width:45em I get this, but subjective to how many libraries also

Edited June 22, 2022 by Happy2Play

[Guest]

Again, thank you very much for all your efforts.
Now it worked fine for the pc interface in browser, image 1.
Image 2 shows the phone and scrolling has become vertical, not pleasant for a large volume of items.
Do you think you're able to change just the interface for mobile, so that the scrolling goes back to being horizontal?
Thank you for that

 

Edited June 22, 2022 by CarlosLima

[Happy2Play 9441]

3 minutes ago, CarlosLima said:

Image 2 shows the phone and scrolling has become vertical, not pleasant for a large volume of items.

Remove the additional code.

.itemsContainer-sideFooters {flex-direction: row}

@supports ((display:-webkit-flex) or (display:flex))
{.itemsContainer-smallSideFooters {max-height: fit-content}}

 

[Guest]

Spectacular and very stylish now.
Thanks again for all your help.

[Guest]

/* #15 Happy2Play-210622 */
div.homeSectionsContainer .cardImageContainer-smallSideFooter {height: 2.6em;}
div.homeSectionsContainer .cardBox-sideFooter {margin: 0.3em;}
div.homeSectionsContainer div.visualCardBox {
    background-color: rgba(0,0,0,.3);
}

@media (min-width:45em) {.smallBannerCard {width: 30%}}
@media (min-width:70em) {.smallBannerCard {width: 14%}}
@media (min-width:100em) {.smallBannerCard {width: 14%}}

Hi,
Sorry to come back to this topic. Maybe another CSS applied caused the problem but I couldn't decipher it.
Your original code at 4750 and 4803 no longer displays transparency.
Trying to solve it, I changed the background color and it was perfect in 4803 (beta version without other CSS) but in 4705 (stable version with several other CSS/HTML applied, nothing has changed.
Thanks for this one more.

PS: The change I tried: 
background-color: transparent;

[Happy2Play 9441]

Shows transparent for me in both versions.  added box-shadow also, enabled backdrop to better illustrate.

[Guest]

The lack of transparency in this code was also the "invisible garbage";  (A A).  Removing it worked perfect.  Thanks for another problem solved.

Edited July 20, 2022 by CarlosLima