Jump to content

About the My Media menu (small) - EmbyServer 4640


CarlosLima
Go to solution Solved by Happy2Play,

Recommended Posts

CarlosLima

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.

download.png

Link to comment
Share on other sites

  • Solution
Happy2Play

Something like this.

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

 

  • Thanks 1
Link to comment
Share on other sites

CarlosLima
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.

download.png

Edited by CarlosLima
Link to comment
Share on other sites

Happy2Play
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.

download.png

Something like this

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

with possible this also

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

 

Link to comment
Share on other sites

  • 10 months later...
CarlosLima
/* #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.

download.png

Link to comment
Share on other sites

Happy2Play
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.

download.png

Something like this, adjust to your needs.

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

 

  • Thanks 1
Link to comment
Share on other sites

CarlosLima

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

Link to comment
Share on other sites

CarlosLima

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?

Screenshot_20220621-192208-497.png

Edited by CarlosLima
Link to comment
Share on other sites

Happy2Play
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?

Screenshot_20220621-192208-497.png

How about this.

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

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

image.png.5ff92afa0754f0ea4013e19809517a14.png

 

Link to comment
Share on other sites

CarlosLima
 

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.

Link to comment
Share on other sites

Happy2Play
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

image.thumb.png.1bbad669416a40c4dbf7ce8b9612e3e1.png

After 

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

image.thumb.png.c15521983f60c3d3ce33509cc2d2edc0.png

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

image.thumb.png.477636097be28b18116de67147ad95d1.png

 

Link to comment
Share on other sites

Happy2Play
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.

image.png

The additional code above changed scrolling on My Media.

image.png.659432a1102a5371d3a04509e191e4ed.png

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

image.png.3e5f02a1c4747c8ff2d05a7d872eb359.png

Edited by Happy2Play
Link to comment
Share on other sites

CarlosLima

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

 

download.png

Screenshot_20220622-142826-052.png

Edited by CarlosLima
Link to comment
Share on other sites

Happy2Play
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}}

 

Link to comment
Share on other sites

CarlosLima

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

Link to comment
Share on other sites

  • 2 weeks later...
CarlosLima
/* #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;

trash1.png

trash2.png

Link to comment
Share on other sites

Happy2Play

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

image.thumb.png.26fe8245e23ec2e1f5901f236acd9fee.png

image.thumb.png.5f7375312f49422f0c380a787ccc8f21.png

Link to comment
Share on other sites

  • 3 weeks later...
CarlosLima

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

Screenshot_20220720-130120-358.png

Edited by CarlosLima
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...