Jump to content

Some CSS Fixes & Tweaks :)


Oxide

Recommended Posts

Sorry I don't have Audiobooks or Mixed libraries, I'll try set some up in the next few days and have a look, unless @@Happy2Play beats me to it  :lol:

Edited by Oxide
  • Like 1
Link to comment
Share on other sites

Happy2Play

^ while this makes the folder right but quirks up /* Episode Vertical List Played Indicator into Ribbon RHS*/ -> attachicon.gif2.PNG

I move it to the left as I saw to may quirks on the right for listitems.

 

Reworked some,  

/*Make Count/Played Indicator into Ribbon RHS*/
div.cardIndicators {right: -1.5em;}
 
div.countIndicator, div.playedIndicator {
    width: 75px;
    transform: rotate(45deg);
    border-radius: 0%;
    background: #52B54B;
    border-style: solid;
    border-width: 1px;}
div.playedIndicator i {transform: rotate(-45deg);}

/*Make Folder Indicator into Ribbon LHS*/
div.videoIndicator {
    transform: rotate(-45deg);
    width: 75px;
    left: -21px;
    border-radius: 0%;
    background: rgba(30,30,30,.7);
    border-style: solid;
    border-width: 1px;}
div.videoIndicator i {transform: rotate(45deg);}
 
/* Episode Vertical List Played Indicator into Ribbon LHS*/
#childrenContent .listItem[data-action=none] {padding: 0 0 30px 0;}
#childrenContent .listItemIndicators {top: 4px; left: -21px;}
#childrenContent .listItemImage-large {width: 400px; height: 225px;}
#childrenContent .playedIndicator {
width: 75px;
height: 25px; border-radius: 0%;
transform: rotate(-45deg);
border-style: solid;
border-width: 1px;}
#childrenContent .indicatorIcon {transform: rotate(45deg); }
Edited by Happy2Play
  • Like 2
Link to comment
Share on other sites

daedalus

and emby strikes back again :P

 

watched indicator for episodes in the person detail screen

post-143-0-94807800-1541686296_thumb.png

Edited by daedalus
Link to comment
Share on other sites

@@daedalus I don't get that, I get this:

5be455f6b0aaf_Annotation.png

 

Below I've pasted the css code I use, feel free to try is out. (Some of the code is from excellent forum members)

/* Hide Paths Box in Dashboard */
#dashboardPage > div > div.dashboardSections > div:nth-child(3) > div:nth-child(4) {display:none;}

/* Hide Media Info */
#itemDetailPage > div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg > div.verticalSection.detailVerticalSection.audioVideoMediaInfo {display:none;}

/* Make Played Indicator into Ribbon RHS */
.cardIndicators {right: -21px !important; top: 4px !important; left: initial;}
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg) !important; border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 1); display: flex; align-items: center; justify-content: center; left: 7px; right: unset;}
div.playedIndicator i {transform: rotate(-45deg);}
.listItemIndicators {top: 4px !important; right: -21px !important;}
.playedIndicator {width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
.progressring {right: 28px;}

/* Ribbon For Video Indicator LHS */
.videoIndicator {background: #c33 !important; left: -21px !important; top: 4px !important; width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(-45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
div.videoIndicator i {transform: rotate(45deg);}

/* Make all Screenshot 16:9 */
.listItemImage-large {width: 400px !important; height: 225px !important; margin-bottom: 1em; overflow: hidden;}
.listItemImage {background-size: cover !important;}
#itemDetailPage > div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg > div.nextUpSection.verticalSection.detailVerticalSection > div > div > div > div.cardScalable > button {background-size: cover !important;}
.cardContent-button:not(.defaultCardBackground) {background-size: cover !important;}

/* Make Season Poster Correct Size If Using Series Poster */
#childrenContent > div > div > div > div.cardScalable > div.cardPadder-square {padding-bottom: 147% !important;}
#childrenContent > div > div > div > div.cardScalable > div.cardPadder-portrait {padding-bottom: 147% !important;}

/* Make Star Rating Gold */
.starIcon { color: #D4AF37 !important;}

/* Make Top Menu Default Color On All Themes and Slightly Transparent */
.skinHeader-withBackground { background-color: #222 !important; -webkit-box-shadow: none !important; opacity: 0.80;}

/* Make Progress Bar Slightly Larger and Transparent */
.itemProgressBar {height: 10px !important; opacity: 0.75;}
.detailImageProgressContainer {bottom: 0;}

/* Backgound for Card Text */
.cardDefaultText, .cardTextCentered {background: rgba(0, 0, 0, 0.5);}

/* Center Overlay Buttons, Make Slightly Larger and Outline*/
.cardOverlayButton-br {width: 100%; text-align: center; -webkit-text-stroke: 1px black; font-size: 130%;}

/* Change Overlay Transparency */
.cardOverlayContainer{background: rgba(0,0,0,0.25) !important;}

/* Make Background Image Lighter */
.backgroundContainer.withBackdrop {background-color: rgba(0,0,0,.5) !important;}

/* Blur Background */
.backdropImage.displayingBackdropImage{-webkit-filter: blur(4px); filter: blur(4px);}

/* Posters hover and enlarge */
.cardBox:hover {opacity: 1; transform: scale(1.1); transition:all 0.35s ease; filter: contrast(105%);}
  • Like 1
Link to comment
Share on other sites

makarai

 

@@daedalus I don't get that, I get this:

5be455f6b0aaf_Annotation.png

 

Below I've pasted the css code I use, feel free to try is out. (Some of the code is from excellent forum members)

/* Hide Paths Box in Dashboard */
#dashboardPage > div > div.dashboardSections > div:nth-child(3) > div:nth-child(4) {display:none;}

/* Hide Media Info */
#itemDetailPage > div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg > div.verticalSection.detailVerticalSection.audioVideoMediaInfo {display:none;}

/* Make Played Indicator into Ribbon RHS */
.cardIndicators {right: -21px !important; top: 4px !important; left: initial;}
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg) !important; border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 1); display: flex; align-items: center; justify-content: center; left: 7px; right: unset;}
div.playedIndicator i {transform: rotate(-45deg);}
.listItemIndicators {top: 4px !important; right: -21px !important;}
.playedIndicator {width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
.progressring {right: 28px;}

/* Ribbon For Video Indicator LHS */
.videoIndicator {background: #c33 !important; left: -21px !important; top: 4px !important; width: 75px !important; height: 25px !important; border-radius: 0% !important; transform: rotate(-45deg) !important; border-style: solid !important; border-width: 1px !important; border-color: rgba(255, 255, 255, 1) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
div.videoIndicator i {transform: rotate(45deg);}

/* Make all Screenshot 16:9 */
.listItemImage-large {width: 400px !important; height: 225px !important; margin-bottom: 1em; overflow: hidden;}
.listItemImage {background-size: cover !important;}
#itemDetailPage > div.detailPageContent.padded-bottom-page.detailPageContent-nodetailimg > div.nextUpSection.verticalSection.detailVerticalSection > div > div > div > div.cardScalable > button {background-size: cover !important;}
.cardContent-button:not(.defaultCardBackground) {background-size: cover !important;}

/* Make Season Poster Correct Size If Using Series Poster */
#childrenContent > div > div > div > div.cardScalable > div.cardPadder-square {padding-bottom: 147% !important;}
#childrenContent > div > div > div > div.cardScalable > div.cardPadder-portrait {padding-bottom: 147% !important;}

/* Make Star Rating Gold */
.starIcon { color: #D4AF37 !important;}

/* Make Top Menu Default Color On All Themes and Slightly Transparent */
.skinHeader-withBackground { background-color: #222 !important; -webkit-box-shadow: none !important; opacity: 0.80;}

/* Make Progress Bar Slightly Larger and Transparent */
.itemProgressBar {height: 10px !important; opacity: 0.75;}
.detailImageProgressContainer {bottom: 0;}

/* Backgound for Card Text */
.cardDefaultText, .cardTextCentered {background: rgba(0, 0, 0, 0.5);}

/* Center Overlay Buttons, Make Slightly Larger and Outline*/
.cardOverlayButton-br {width: 100%; text-align: center; -webkit-text-stroke: 1px black; font-size: 130%;}

/* Change Overlay Transparency */
.cardOverlayContainer{background: rgba(0,0,0,0.25) !important;}

/* Make Background Image Lighter */
.backgroundContainer.withBackdrop {background-color: rgba(0,0,0,.5) !important;}

/* Blur Background */
.backdropImage.displayingBackdropImage{-webkit-filter: blur(4px); filter: blur(4px);}

/* Posters hover and enlarge */
.cardBox:hover {opacity: 1; transform: scale(1.1); transition:all 0.35s ease; filter: contrast(105%);}

 

 

Like: I wonder if nobody likes the idea, changing the ribbon color from red to something when you watched all of the episodes 

Link to comment
Share on other sites

Happy2Play

Like: I wonder if nobody likes the idea, changing the ribbon color from red to something when you watched all of the episodes 

 

Well beginning in 3.6 when a series/show has been watched there are no more indicators.  But yes you can have playindicator one color and countindicator another.

Link to comment
Share on other sites

  • 2 weeks later...
PenkethBoy

To hide the new message in the beta server .71

 

/* --- Hide Beta Message in Dashboard --- */
.betaInfoBanner {display: none}
  • Like 1
Link to comment
Share on other sites

  • 4 months later...
hshah

I've just come across this thread and am really liking some of the brilliant tweaks.  I noticed that the ribbon doesn't work properly in list view, but that is minor because that is a horrible view and I never plan to use it lol!

 

Does anyone know if it is possible to display everything Live TV related (on the Home and Programme screens, as well as the More Like This section) as thumbs rather than the default primary portrait image?

post-284361-0-08839300-1555856611_thumb.png

Link to comment
Share on other sites

  • 5 months later...
Happy2Play

Mild tweaking as List View has some issues, using existing code.  This is for LHS Ribbons as RHS ribbons just don't play well on episodes.  Couldn't really get List View to work with Ribbons so they are just regular indicators, shrunk and moved to the left.  You may have to adjust the height and width in List View if you have over 100 unwatched episodes.

 

Think I worked out issues in list view as watched indicators had issues on Movies and Trailers.

/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);}
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center;}
div.cardIndicators {right: initial top: 4px; left: -21px;}
 
/*List View*/
#moviesPage div.listItemImage.itemAction.lazy i, [data-type="Trailer"] div.listItemImage.itemAction.lazy i {transform: rotate(0deg);}
div.listItemImage.itemAction.lazy div.listItemIndicators {left: 7px; top: 0; font-size: 10px;}
div.listItemImage.itemAction.lazy div.indicator {width: 15px; height: 15px;}
 
/*Make Folder Indicator into Ribbon LHS*/
div.videoIndicator {
    transform: rotate(-45deg);
    width: 75px;
    left: -21px;
    border-radius: 0%;
    background: rgba(30,30,30,.7);
    border-style: solid;
    border-width: 1px;}
div.videoIndicator i {transform: rotate(45deg);}
 
/* Episode Vertical List Played Indicator into Ribbon LHS*/
#childrenContent div.listItem[data-action=none] {padding: 0 0 30px 0;}
#childrenContent div.listItemIndicators {top: 4px ; left: -21px;}
#childrenContent div.listItemImage-large {width: 400px ; height: 225px;}
#childrenContent div.playedIndicator {width: 75px ; height: 25px ; border-radius: 0% ; transform: rotate(-45deg) ; border-style: solid ; border-width: 1px ; border-color: rgba(255, 255, 255, 0.5) ; display: flex ; align-items: center ; justify-content: center ;}
#childrenContent div.listItem-content {background: rgba(0, 0, 0, 0.3);}
Edited by Happy2Play
  • Like 2
Link to comment
Share on other sites

  • 1 month later...
Happy2Play

Minor tweak to fix indicators on playlist.

 

add to above code

#childrenContent.verticalSection-extrabottompadding div.playedIndicator {width: 15px; height: 15px; border-radius: 100em;}
#childrenContent.verticalSection-extrabottompadding div.listItemIndicators {top: 0px; left: 7px;}
Link to comment
Share on other sites

  • 2 months later...
daedalus

they killed the right ribbon on the season page episode list again <_<

 

5e127b2b96175_Anmerkung20200106011114.pn

 

 

 

I've just come across this thread and am really liking some of the brilliant tweaks.  I noticed that the ribbon doesn't work properly in list view, but that is minor because that is a horrible view and I never plan to use it lol!

this is still an issue

 

5e127c2fef39d_Anmerkung20200106011432.pn

Edited by daedalus
Link to comment
Share on other sites

Happy2Play

Here is updated LHS code for 4.4.0.5+ (BETA)

/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg); }
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; }
div.cardIndicators {left: -21px; }

/*List View-Playlists*/
#moviesPage div.listItemImageContainer i, [data-action="playallfromhere"] div.listItemImageContainer i {transform: rotate(0deg);}
[data-action="link"] div.listItemImageContainer div.listItemIndicators, [data-action="playallfromhere"] div.listItemImageContainer div.listItemIndicators {left: 0; top: 0; font-size: 10px;  }
div.listItemImageContainer div.indicator {width: 15px; height: 15px; }


/*Make Folder Indicator into Ribbon LHS*/
div.videoIndicator {
    transform: rotate(-45deg);
    width: 75px;
    left: -21px;
    border-radius: 0%;
    background: rgba(30,30,30,.7);
    border-style: solid;
    border-width: 1px; }
div.videoIndicator i {transform: rotate(45deg); }
 
/* Episode Vertical List Played Indicator into Ribbon LHS*/
div.listItem[data-type="Episode"] {padding: 0 0 30px 0; }
div.listItemImageContainer-large div.listItemIndicators {top: 4px ; left: -28px; }
div.listItemImageContainer-large  div.listItemImageContainer-large  {width: 400px ; height: 225px; }
div.listItemImageContainer-large  div.playedIndicator {width: 75px ; height: 25px ; border-radius: 0% ; transform: rotate(-45deg) ; border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; }
div.listItem-content {background: rgba(0, 0, 0, 0.3); }
  • Like 2
Link to comment
Share on other sites

Oxide

@@daedalus I've quickly modified @@Happy2Play excellent fixes above for RHS version, let me know if it's working for you :)

/*Make Played Indicator into Ribbon RHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(-45deg); }
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center; }
div.cardIndicators {right: -21px;}

/*List View-Playlists*/
#moviesPage div.listItemImageContainer i, [data-action="playallfromhere"] div.listItemImageContainer i {transform: rotate(0deg);}
[data-action="link"] div.listItemImageContainer div.listItemIndicators, [data-action="playallfromhere"] div.listItemImageContainer div.listItemIndicators {left: 0; top: 0; font-size: 10px;}
div.listItemImageContainer div.indicator {width: 15px; height: 15px;}

/*Make Folder Indicator into Ribbon RHS*/
div.videoIndicator {transform: rotate(-45deg); width: 75px; left: -21px; border-radius: 0%; background: rgba(30,30,30,.7); border-style: solid; border-width: 1px;}
div.videoIndicator i {transform: rotate(45deg);}
 
/* Episode Vertical List Played Indicator into Ribbon RHS*/
div.listItem[data-type="Episode"] {padding: 0 0 30px 0;}
div.listItemImageContainer-large div.listItemIndicators {top: 4px ; right: -21px;}
div.listItemImageContainer-large  div.listItemImageContainer-large  {width: 400px ; height: 225px;}
div.listItemImageContainer-large  div.playedIndicator {width: 75px ; height: 25px ; border-radius: 0% ; transform: rotate(45deg) ; border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); display: flex; align-items: center; justify-content: center;}
div.listItem-content {background: rgba(0, 0, 0, 0.3);}
.listItemImageContainer-large {overflow: hidden;}
  • Like 2
Link to comment
Share on other sites

Happy2Play

One addition to "/* Episode Vertical List Played Indicator into Ribbon LHS*/" to cover scaling/screen size, thanks to @@Oxide

.listItemImageContainer-large {overflow: hidden;}
  • Like 2
Link to comment
Share on other sites

Oxide

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

  • Like 2
Link to comment
Share on other sites

PenkethBoy

Need a little help

 

i have the following to change the size of the new huge poster etc images

/* ----- Change Movie/TV Active Thumbnail Image Size ----- */
.detailImage-main {width: 60%; }

But what i cant do is reduce the size of the container that the image is in - so end up with a gap between image and item detail

 

5e14b522341c7_Annotation20200107164231.j

Any hints what i am missing?

Link to comment
Share on other sites

Oxide

Try this, you can play with the "13" below to see what suits you best, if you use a % value it leaves a gap to the right of the image.

.detailImage-main {max-width: 13vw;}
  • Like 1
Link to comment
Share on other sites

PenkethBoy

with the new items page code in beta - due i think to adding favs to home page

 

has anybody figured out how to target specific types of pages

 

as i cant see an obvious way to apply different codes to TV episodes/Movies etc etc - as page code appears to be the same

 

so the .detailImage-main {width: 13vw;} applies to movies episode and artist pages etc and would like to apply diff widths to movies compared to episodes etc

Edited by PenkethBoy
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...