Jump to content
Oxide

Some CSS Fixes & Tweaks :)

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

Share this post


Link to post
Share on other sites
bfir3

Nice work!

  • Like 1

Share this post


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.

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites
swhitmore

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

  • Like 7

Share this post


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

Share this post


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

Share this post


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

Share this post


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.

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites
Oxide

@@AlwinHummels this should do the trick  ;)

.cardOverlayButton {display:none !important;}
  • Like 1

Share this post


Link to post
Share on other sites
AlwinHummels

Thanks @@Oxide, so simple but never thought it's so !important  ^_^

Share this post


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

Share this post


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. 

Share this post


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.

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites
loomes

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

Edited by loomes

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