Jump to content

Some CSS Fixes & Tweaks :)


Oxide

Recommended Posts

Diedrich

And now I don't know what to say, I just pasted your code and it works like a charm. Thanks a lot!

Could have been browser caching not being refreshed
  • Like 1
Link to comment
Share on other sites

Emby Tower

This will fix the "square" appearance of Season Posters if they no artwork and are using the Series Poster.

/* Resize Season Posters */
body > div.mainAnimatedPages.skinBody.skinBody-withWindowScroll > div:nth-child(n) > div > div.verticalSection.childrenSection-x > div > div.scrollSlider.focuscontainer-x.itemsContainer.padded-left.padded-right.focusable.scrollX.hiddenScrollX > div > div > div.cardScalable > div.cardPadder-square {padding-bottom: 147%;}

Before:

5e1437863ea1e_Before.jpg

 

After:

5e1437acdb2f3_After.jpg

 

What is the correct one for the actual stable version?

 

Thanks a lot!

Link to comment
Share on other sites

Happy2Play

@@Luke is there a reason inherited Season images present in square instead of portrait still, as shown above?

Link to comment
Share on other sites

Happy2Play

What is the correct one for the actual stable version?

 

Thanks a lot!

 

Something like this.

[data-type="Season"] div.cardScalable.cardPadder-square {padding-bottom: 147%;}
  • Like 1
Link to comment
Share on other sites

daedalus

the circles seem to be rendered differently on different browsers

 

Firefox              ||      Edge (Chorme)

 

post-143-0-01218700-1585165794_thumb.png     ||     post-143-0-20434000-1585165799_thumb.png

 

and on both, the circle is still there and broader than the banner

 

but on the season view, both look the same:

 

Firefox                        ||    Edge (Chorme)

post-143-0-05108900-1585166187_thumb.png     ||    post-143-0-76390700-1585166180_thumb.png

Edited by daedalus
Link to comment
Share on other sites

Happy2Play

the circles seem to be rendered differently on different browsers

 

Firefox              ||      Edge (Chorme)

 

attachicon.gifff.png     ||     attachicon.gifedge(chorme).png

 

and on both, the circle is still there and broader than the banner

 

but on the season view, both look the same:

 

Firefox                        ||    Edge (Chorme)

attachicon.gifff.png     ||    attachicon.gifedge(chorme).png

 

Because FireFox does there own thing.

 

Add this.

div.countIndicator, i.playedIndicator {
    background: transparent;
    box-shadow: none;
}

I personally can't tell what the difference in the 16:9 image compare.

  • Like 1
Link to comment
Share on other sites

Emby Tower

How can I switch to another font?

 

I've installed Nexa Bold on all PCs, but don't find the correct css code.

 

Thanks a lot!

Link to comment
Share on other sites

daedalus

I personally can't tell what the difference in the 16:9 image compare.

 

because there is no difference, the indicator on the season view is just "different", what leads to the same apperence in both browsers

 

but on the season view, both look the same:

 

Firefox                        ||    Edge (Chorme)

attachicon.gifff.png     ||    attachicon.gifedge(chorme).png

 

Link to comment
Share on other sites

Happy2Play

How can I switch to another font?

 

I've installed Nexa Bold on all PCs, but don't find the correct css code.

 

Thanks a lot!

Have you seen this topic?

https://emby.media/community/index.php?/topic/70905-change-font-size/page-1

 

May have to add additional elements, like "button".  All depends on what area you what to change.

Link to comment
Share on other sites

Happy2Play

I want to use "Nexa Bold" for the whole Emby Server...

 

So something like this, I haven't looked at all areas so there may be more elements.

/*Change Font*/
html, h1, h2, h3, button {font-family: "Nexa Bold"; }
Edited by Happy2Play
typo in button
  • Like 1
Link to comment
Share on other sites

drashna

 

So something like this, I haven't looked at all areas so there may be more elements.

/*Change Font*/
html, h1, h2, h3, button {font-family: "Nexa Bold"; }

 

 

I want to use "Nexa Bold" for the whole Emby Server...

 

 

I use this, and it works well:

@font-face {
    font-family: 'Ubuntu';
    font-style: normal;
    font-weight: normal;
    src: local('Ubuntu Regular'), local('Ubuntu-Regular'), url(https://fonts.gstatic.com/s/ubuntu/v11/4iCs6KVjbNBYlgoKfw72.woff2) format('woff2');
}
* {
    font-family: 'Ubuntu';
}
body * {
    font-family: 'Ubuntu';
}

::cue {
    font-family: 'Ubuntu'!important;
    font: 'Ubuntu'!important;
}

It is a fairly brute forcing of it, but it works well, and doesn't break icons/symbols. 

 

I don't know what to say as this is what I get with the code posted in post 95 and 96, no other code.

 

LHS/RHS

 

5e79de11655d5_lhs1.jpg

 

5e79de2628648_lhs2.jpg

 

5e79de528a0de_lhs3.jpg

 

On 4.4.1.0, that doesn't appear to be the case anymore?   At least, not for me.  Series and episodes (and folders) work, but it's still a circle for movies. 

  • Like 1
Link to comment
Share on other sites

  • 2 months later...
daedalus
2 hours ago, muppet4k said:

how can i get the ribbon?
Must i activate some plugin first?

no, just add the corresponding css code in this section in the server dashboard

1460062173_Screenshot_2020-06-13Emby.png.2e327807a74a0881efb0ac55d09084b9.png

 

and be aware this only works in the webclient not in any app

Link to comment
Share on other sites

daedalus
On 4/7/2020 at 3:24 PM, drashna said:

On 4.4.1.0, that doesn't appear to be the case anymore?   At least, not for me.  Series and episodes (and folders) work, but it's still a circle for movies. 

still woking on latest beta 4.5.0.12

5027_Screenshot_2020-06-13Emby(1).png.55aecf5afcf8592966a87ba0739f8454.png

 

just list view is broken

1007914189_Screenshot_2020-06-13Emby(2).png.c8ffcdf18f25a092416a6a5bbfbe5e3e.png

Link to comment
Share on other sites

  • 2 months later...

@Happy2Play got a question for you.  Is it possible to provide a right hand ribbon for MOVIES without a check mark or number inside it to be used only when the movie has NOT been watched (opposite of current functionality)?

This to me would make more sense as any time you see the ribbon (show or movie) it means there is unwatched content.  Any time there is not a ribbon everything has been watched.

Possible to do that code?

Link to comment
Share on other sites

  • 1 month later...
BiTeTHeBiGG

Hi, may be not 100% safe, but simpler css modification for RHS without adding pseudo elements. It works with series and episodes. It does not break movies view or search view. Those I will try later.

For Version 4.5.2.0

/* Episode Counter */
.countIndicator {
  transform: rotate(45deg);
  width: 75px;
  height: 25px;
}
.cardCountIndicator {
  right: -1.725em;
}
/* Episode Watched Status Vertical List */
.listItemIndicators {
  right: -1.4em;
  border-radius: 100em;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
  transform: rotate(45deg);
  background: var(--theme-primary-color);
}
.listItemImageContainer {
  overflow: hidden;
}
.listItemIndicators .playedIndicator {
  width: 75px;
  box-shadow: none;
  transform: rotate(-45deg);
  background: none !important;
}
/* Movie Watched Status AND Episode Watched Status Within Search AND Episode Watched Status Horizontal List */
button.cardContent-button > i::before{
  width: 75px;
  height: 25px;
  transform: rotate(45deg);
  content: ' ';
  background: var(--theme-primary-color);
  position: absolute;
  top: 1.3em;
  z-index: -1;
  border-radius: 100em;
  box-shadow: 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12), 0 3px 1px -2px rgba(0,0,0,.2);
}
button.cardContent-button > i{
width: 75px;
  height: 75px;
  top: -1.2em;
  right: -1.2em;
  position: absolute;
}
.cardContent-button .playedIndicator {
  background: none !important;
  box-shadow: none !important;
}

EDIT: Done, I hope it helps someone

Edited by BiTeTHeBiGG
  • Like 2
Link to comment
Share on other sites

  • 5 months later...
Happy2Play

4.6.0.37+ 

Season view

/*RH Season View*/
div.listItemImageContainer-large i.listItemIndicator:before {
    width: 100px;
    height: 25px;
    transform: rotate(45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-large i.listItemPlayedIndicator {
    overflow: visible;
    z-index: 1;
    background: none;
    box-shadow: none;
}

rh.jpg.5643ac3b1534060b15e2a855ceac2448.jpg

/*LH Season View*/
div.listItemImageContainer-large i.listItemIndicator:before {
    width: 100px;
    height: 25px;
    transform: rotate(-45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-large i.listItemPlayedIndicator {
    overflow: visible;
    z-index: 1;
    background: none;
    left: -275px;
    box-shadow: none;
}

lh.jpg.c77b00c37d786248b039c0e454b578d2.jpg

List View Movies

/*RH Movie List View*/
div.listItemImageContainer-portrait i.listItemIndicator:before  {
    width: 50px;
    height: 20px;
    transform: rotate(45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-portrait i.listItemPlayedIndicator {
    overflow: visible;
    z-index: 1;
    background: none;
    box-shadow: none;
}

223649205_listrh.jpg.61f96c0246026b4cd8db1021686dc838.jpg

/*LH Movie List View*/
div.listItemImageContainer-portrait i.listItemIndicator:before {
    width: 50px;
    height: 20px;
    transform: rotate(-45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-portrait i.listItemPlayedIndicator {
    overflow: visible;
    z-index: 1;
    box-shadow: none;
    background: none;
    left: -30px;
}

2116811880_listlh.jpg.eb8d1b93846e594d79dea790732008d3.jpg

List View TV

/*RH TV List View*/
div.listItemImageContainer-portrait .listItemIndicator-mini:before  {
    width: 50px;
    height: 20px;
    transform: rotate(45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-portrait .listItemCountIndicator  {
    overflow: visible;
    z-index: 1;
    background: none;
    box-shadow: none;
    right: -4px;
    top: -3px;
}

1918874060_countrh.jpg.cceb19f7f8d10b7ce0a0995a4dfd25d0.jpg

/*LH TV List View*/
div.listItemImageContainer-portrait .listItemIndicator-mini:before {
    width: 50px;
    height: 20px;
    transform: rotate(-45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

div.listItemImageContainer-portrait .listItemCountIndicator  {
    overflow: visible;
    z-index: 1;
    box-shadow: none;
    background: none;
    left: -4px;
    top: -3px;
}

1805459155_countlh.jpg.5300fc7f4e4660f5c1972bfba1d58863.jpg

Normal view indicator Ribbons

RH 

/*Make Indicator into Ribbon RHS*/
.cardPlayedIndicator, .cardCountIndicator {
    overflow: visible;
}

.cardPlayedIndicator:before, .cardCountIndicator:before {
    width: 75px;
    height: 25px;
    transform: rotate(45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

LH

/*Make Indicator into Ribbon LHS*/
.cardPlayedIndicator, .cardCountIndicator {
    overflow: visible;
    left: 0;
}

.cardPlayedIndicator:before, .cardCountIndicator:before {
    width: 75px;
    height: 25px;
    transform: rotate(-45deg);
    content: ' ';
    background: #0C57D6;
    z-index: -1;
    position: absolute;
    border-style: solid;
    border-width: 1px;
    border-color: rgba(255, 255, 255, 0.5);
}

 

Only tested in Edge/Chrome

Edited by Happy2Play
Link to comment
Share on other sites

  • 1 month later...
KMBanana

Updated to 4.6.0.50 stable today and some of the ribbon changes for 4.6.0.37+ don't seem to be working for me.  

The only one that appears to work for me is "Normal view indicator Ribbons" and only for TV shows, not movies.  They working for anyone else or is it something funky on my end?

Link to comment
Share on other sites

Happy2Play
3 minutes ago, KMBanana said:

Updated to 4.6.0.50 stable today and some of the ribbon changes for 4.6.0.37+ don't seem to be working for me.  

The only one that appears to work for me is "Normal view indicator Ribbons" and only for TV shows, not movies.  They working for anyone else or is it something funky on my end?

Can you elaborate as I just applied to a newly updated system without issue.

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