Jump to content
Oxide

Some CSS Fixes & Tweaks :)

Recommended Posts

Oxide

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
daedalus

thank you both

 

if we could just have this also in the emby apps :rolleyes:

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
Oxide

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

Share this post


Link to post
Share on other sites
daedalus

thanks a lot @Oxide :wub:

your ribbon code works correctly on folder icons and all episodes including the vertical list

  • Like 1

Share this post


Link to post
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 

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
PenkethBoy

To hide the new message in the beta server .71

 

/* --- Hide Beta Message in Dashboard --- */
.betaInfoBanner {display: none}
  • Like 1

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites
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;}

Share this post


Link to post
Share on other sites
daedalus
Posted (edited)

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
daedalus

thx a lot

you mind making a RHS version?

 

tried on myself but i seem to be too dump -_-

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
arrbee99

Thanks for that - one less pet hate in my life  :)

Share this post


Link to post
Share on other sites
daedalus

working great :o

thx @Happy2Play & @Oxide for your great help and caring :wub: :wub:

  • Like 1

Share this post


Link to post
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?

Share this post


Link to post
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

Share this post


Link to post
Share on other sites
PenkethBoy

Ok that works - Thanks

 

BUT you have to change max-width to just width

Share this post


Link to post
Share on other sites
PenkethBoy
Posted (edited)

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

Share this post


Link to post
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...