Jump to content

Some CSS Fixes & Tweaks :)


Recommended Posts

 Some backend fixes: (Tested on 3.1.6034.23988)

1. Fixed when scrolling down in the Dashboard the Progress Bars would appear in the "Menu Header"

5782418122e29_bepb.jpg

2. Fixed Reports Filter Menu getting cut off and not been able to select all options.

572036f71434b_EmbyFilterScroll.jpg

/*Backend Fixes*/
/*Fix Dasboard Menu Bar Showing Progress Bars*/
.dashboardDocument .viewMenuBar {z-index: 1000;}

/*Reports Filter Menu Fix*/
.ui-panel-inner {position: static !important; background: #222;}
.ui-panel.ui-panel-open {position: absolute !important;}
.ui-body-b.ui-panel {height: initial; min-height: initial; bottom: initial;}

Some Frontend Tweaks: (Tested on 3.1.6034.23988)

1. Turn Played Indicator from circle to ribbon and move it to the left, added white boarder

5782440fa8c6a_rlhs.jpg

 

2. Moved overlay button to top right so it doesn't cover progress bar.

57824475dbb01_prhs.jpg

 

Combo of above tweaks

578244d7f23de_combo.jpg

 

3. Center Text In Card Footers

57824562935df_ccf.jpg

 

4. Fixed Navigation Arrows In Place when Scrolling.

57824713c5c25_naf.jpg

/*Frontend Tweaks*/
/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);}
.playedIndicator {top: 4px; left: -21px !important; width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); background: rgba(82,181,75,.95); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5);}

/*Move Overlay Button to top right*/
.cardOverlayButtonContainer {top: -11px !important; right: -5px !important;}

/*Center Card Footer*/
.cardContent .cardFooter {width: 100%; text-align: center;}

/*Fixed Navigation Arrows In Place*/
.lnkSibling {position: fixed; top: 25%;}
Edited by Oxide
  • Like 13
Link to post
Share on other sites
shorty1483

It seems with latest dev the ribbons do not work anymore, just fyi @@Oxide . You just see the ribbon without played indicator and on other views than home, it's still the circle. the play count is just a green number without bg.

Link to post
Share on other sites

@@shorty1483 this should fix it  ;)

/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);}
.playedIndicator {top: 4px; left: -21px !important; width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); background: rgba(82,181,75,.95); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF !important; display: flex; align-items: center; justify-content: center;}
  • Like 1
Link to post
Share on other sites
shorty1483

 

@@shorty1483 this should fix it  ;)

/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);}
.playedIndicator {top: 4px; left: -21px !important; width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); background: rgba(82,181,75,.95); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF !important; display: flex; align-items: center; justify-content: center;}

 

I'm a real dumbass in css :D This fixed the Homescreen!

 

And what to do in the libraries? :D

 

578b575b0788e_Unbenannt.jpg

 

Edit: When I go back from libraries to Homescreen, the counter looks again like in the pic above. When I refresh, it changes to ribbon. Tested on Chrome and FF.

Edited by shorty1483
Link to post
Share on other sites

@shorty1483 sorry they changed more than i thought, I've tested and this works  :)

/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);}
.card .playedIndicator {position: absolute; top: 4px; left: -21px !important; width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); background: rgba(82,181,75,.95); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5); color: #FFFFFF !important; display: flex; align-items: center; justify-content: center;}
  • Like 1
Link to post
Share on other sites

@shorty1483 more changes in build 3.1.6042.21606

 

This will get the ribbon back  :)

/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);}
.card .playedIndicator, .card .countIndicator {position: absolute; top: 4px; left: -21px !important; 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;}
Link to post
Share on other sites
dethknite

Would love to have this merged in.. the "2. Fixed Reports Filter Menu getting cut off and not been able to select all options." has been bugging me for a long time...

  • Like 2
Link to post
Share on other sites
mediacowboy

Some Frontend Tweaks: (Tested on 3.1.6034.23988)

1. Turn Played Indicator from circle to ribbon and move it to the left, added white boarder

5782440fa8c6a_rlhs.jpg

 

2. Moved overlay button to top right so it doesn't cover progress bar.

57824475dbb01_prhs.jpg

 

Combo of above tweaks

578244d7f23de_combo.jpg

 

3. Center Text In Card Footers

57824562935df_ccf.jpg

 

4. Fixed Navigation Arrows In Place when Scrolling.

57824713c5c25_naf.jpg

/*Frontend Tweaks*/
/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);}
.playedIndicator {top: 4px; left: -21px !important; width: 75px; height: 25px; border-radius: 0%; transform: rotate(-45deg); background: rgba(82,181,75,.95); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 255, 0.5);}

/*Move Overlay Button to top right*/
.cardOverlayButtonContainer {top: -11px !important; right: -5px !important;}

/*Center Card Footer*/
.cardContent .cardFooter {width: 100%; text-align: center;}

/*Fixed Navigation Arrows In Place*/
.lnkSibling {position: fixed; top: 25%;}

 

Appears broken in dev server v 3.1.6055.27290.

 

579d13c8ee194_show.png

 

579d13ddaebe1_episode.png

Edited by mediacowboy
Link to post
Share on other sites

@@mediacowboy this should fix it  ;)

/*Center Card Footer*/
.innerCardFooter {width: 100%; text-align: center !important;}

/*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;}
.card .indicators {right: initial !important; top: -1px !important; left: 61px;}

/*Move Overlay Button to top right*/
.cardOverlayButton {bottom: initial !important; top: 5px !important;}
Edited by Oxide
  • Like 1
Link to post
Share on other sites
mediacowboy

 

@@mediacowboy this should fix it  ;)

/*Center Card Footer*/
.innerCardFooter {width: 100%; text-align: center !important;}

/*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;}
.card .indicators {right: initial !important; top: -1px !important; left: 61px;}

/*Move Overlay Button to top right*/
.cardOverlayButton {bottom: initial !important; top: 5px !important;}

Awesome thank you.

Link to post
Share on other sites

Fixes for ribbon in version 3.1.6059.3847  :rolleyes:

/*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;}
.card .indicators {right: initial !important; top: 4px !important; left: -21px;}
  • Like 3
Link to post
Share on other sites
mediacowboy

 

Fixes for ribbon in version 3.1.6059.3847  :rolleyes:

/*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;}
.card .indicators {right: initial !important; top: 4px !important; left: -21px;}

 

You are the man. Just got home after a update and saw it was broke. Was coming to look for this or report it.

  • Like 1
Link to post
Share on other sites
mediacowboy

Ribbions are broke again with the latest update of server 3.1.6064.238387. No rush just wanted to let you know.57a8e878e7d24_ribbions.png

Link to post
Share on other sites
Happy2Play

Ribbions are broke again with the latest update of server 3.1.6064.238387. No rush just wanted to let you know.

 

Change .card .indicators to .cardIndicators

  • Like 3
Link to post
Share on other sites
AlwinHummels

How can I hide the button instead of place it on top right? 

 

I tried

 

 /*Hide poster play button*/

.cardOverlayButton {display: none;}
 
But that wont work on my server version 3.0.6050.0 (synology install)
  • Like 1
Link to post
Share on other sites
AlwinHummels

Change .card .indicators to .cardIndicators

I tried this but I think it should be .cardIndicators with the capital "I"

Edited by AlwinHummels
Link to post
Share on other sites
Happy2Play

I tried this but I think it should be .cardIndicators with the capital "I"

Yes it already is a capital "I" in Indicators. 

Link to post
Share on other sites
AlwinHummels

Sorry I had my wrong pair of glasses on my nose

You're absolutely right there was already a capital I.

Link to post
Share on other sites
  • 10 months later...
Happy2Play

Had to make an update to move new progress indicator since this "Make Played Indicator into Ribbon LHS" code moves indicator partial off Library card.  Beta 3.2.20.11

/*Move Progress Ring*/
.progressring {
    left: 30px; }
Edited by Happy2Play
Link to post
Share on other sites
  • 3 weeks later...

Here is the css for the new vertical episode list in 3.2.24 for the watch ribbon.

 

5963bc4fb72db_EpisodeVertical.jpg

 

Also added a slightly dark transparent background to make the text more readable.

/* Episode Vertical List Played Indicator into Ribbon LHS*/
.listItem[data-action=none] {padding: 0 0 30px 0 !important;}
.listItemIndicators {top: 4px !important; left: -21px;}
.listItemImage-large {width: 400px !important; height: 225px !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, 0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important;}
.listItem-content {background: rgba(0, 0, 0, 0.3);}
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...