Jump to content

Windows CSS Questions (or maybe one enhancement request)


DigitalRebel
Go to solution Solved by Happy2Play,

Recommended Posts

DigitalRebel

In my usage of Emby, I have kind of settled on using "primary view" but am keeping single movies in their own folder and movies that are series (Ex: James Bond) in a parent "James Bond" folder with each of the individual movies in their own folders under that.

2 questions that are definitely edge cases and I am sure don't impact many people:

  1. When looking at series folders, if the folder.jpg has primarily white back background, it is impossible to see the folder icon.  I tried looking into the CSS of this page to see if I could add a border, outline, or drop-shadow to the folder icon, but wasn't able to make that happen.  At the end of the day, I think the folder should be white with a black edge around it.  For darker backgrounds, you wouldn't even notice the edge and for light backgrounds you would at least be able to see the folder icon. (Maybe a feature request?)

    FolderIcon.jpg.fd2a762746043760891ea290641dbca4.jpg
     
  2. Also when naming series folders, I like to match what Emby does for individual movies where it has a primary line of information and several secondary lines of information.  In particular, I care about the series name and the date range of the movies contained in that series.  I am happy to update that information manually.  (I did look at collections for this scenario, but still think I prefer grouping by folders manually.)  The challenge I have is that the space horizontally is limited and I couldn't find a way to force a line break to put the name on the first line and move the date range to the next line.  I see that the primary line is a HTML text button and I tried to manually do something like "Crouching Tiger <br />(2000-2016)" as the title, but that didn't work.  I also thought I could use the "year" field, but that properly validates it down to a single year, not a range or a free text field.

    LongNames.jpg.1cf3045ae9329bb8f59836cbb6d53ba0.jpg

I realize both of these aren't problems and I am just looking for any suggestions on how maybe a CSS tweak might help.

Sincerely,
Mike

Link to comment
Share on other sites

  • Solution
Happy2Play

Yes white will washout white indicator, I assume you want something specific to the icon not the placeholder as border and box-shadow work fine.

i.cardIndicatorIcon {
    border: yellow 2px solid;
}

or

i.cardIndicatorIcon {
    box-shadow: 0 0 0 1px #ff0000;
}

 

For the text I use this.

div.cardText.cardTextCentered.cardText-first {
    white-space: pre-wrap;
}

Note custom css only applies the web client, not the online web client or any other device.

Link to comment
Share on other sites

arrbee99

Re the above, I presume they are superior to these (older ?) versions -

i.md-icon.cardIndicator.cardIndicatorIcon {text-shadow: 2px 4px rgb(0 0 0);}

div.cardText {white-space: pre-wrap;}

somehow ?

Link to comment
Share on other sites

Happy2Play

Okay maybe something like this, as you can play around with these options to affect the border on the folder.

i.cardIndicatorIcon {
    box-shadow: inset 0px 1px 10px 0px black;
}

image.png.17067f25d11e3b2e15596bda5040192e.png

image.png.378546e5d49259a2ac3128588f3f8126.png

i.cardIndicatorIcon {
    box-shadow: inset 0px 1px 0px 20px black;
}

 

 

Link to comment
Share on other sites

Happy2Play
6 minutes ago, arrbee99 said:

Re the above, I presume they are superior to these (older ?) versions -

i.md-icon.cardIndicator.cardIndicatorIcon {text-shadow: 2px 4px rgb(0 0 0);}

div.cardText {white-space: pre-wrap;}

somehow ?

Depends on your needs all or selective.  One is more targeted as mine is not limited to .md-icon.cardIndicator, but as far as I know it only exists this area though so same effect.

As for div.CardText it affects all div.cardText were mine is limited to only div.cardText.cardTextCentered.cardText-first

  • Like 1
Link to comment
Share on other sites

DigitalRebel
23 minutes ago, Happy2Play said:

Okay maybe something like this, as you can play around with these options to affect the border on the folder.


i.cardIndicatorIcon {
    box-shadow: inset 0px 1px 10px 0px black;
}

image.png.17067f25d11e3b2e15596bda5040192e.png

image.png.378546e5d49259a2ac3128588f3f8126.png


i.cardIndicatorIcon {
    box-shadow: inset 0px 1px 0px 20px black;
}

 

 

Thanks for all the help with the folder icon ... I think I am going to go with this for now.  (I'm playing with the text stuff now)

IconFixed.jpg.e3047b73ac0f303d2bdf185d89cc0e58.jpg

image.png.204300762e559a7a08bc435d09354e41.png

Link to comment
Share on other sites

Happy2Play

Or change the color of the icon.

i.cardIndicatorIcon {
    color: antiquewhite;
}

 

Link to comment
Share on other sites

DigitalRebel

@Happy2Play thanks for that last suggestion!  I think this looks even better as the folder is very visible with both very dark and very light backgrounds.  The text wrapping looks great too.

1291522993_Iconv2.jpg.744940f52f9467e823cca8517be8eedb.jpg

373904193_Codev2.jpg.ff89d13f7f14c22dbb7eb3ccc2f93e65.jpg

 

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