Jump to content

Some CSS Fixes & Tweaks :)


Oxide

Recommended Posts

Oxide

 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 comment
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 comment
Share on other sites

Oxide

@@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 comment
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 comment
Share on other sites

Oxide

@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 comment
Share on other sites

Oxide

@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 comment
Share on other sites

swhitmore

Should these changes just be made default? They seem like good improvements to me.

  • Like 7
Link to comment
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 comment
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 comment
Share on other sites

Oxide

@@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 comment
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 comment
Share on other sites

Oxide

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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
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 comment
Share on other sites

  • 3 weeks later...
Oxide

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 comment
Share on other sites

loomes

Can you please post code for all the ribbon in the right corner?

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