Some CSS Fixes & Tweaks :)

[Oxide 139]

 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"

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

/*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

 

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

 

Combo of above tweaks

 

3. Center Text In Card Footers

 

4. Fixed Navigation Arrows In Place when Scrolling.

/*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 July 10, 2016 by Oxide

[bfir3 117]

Nice work!

[shorty1483 500]

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.

[Oxide 139]

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

[shorty1483 500]

 

@@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 This fixed the Homescreen!

 

And what to do in the libraries?

 

 

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 July 17, 2016 by shorty1483

[Oxide 139]

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

[Oxide 139]

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

[swhitmore 781]

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

[dethknite 36]

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

[mediacowboy 438]

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

 

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

 

Combo of above tweaks

 

3. Center Text In Card Footers

 

4. Fixed Navigation Arrows In Place when Scrolling.

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

 

 

Edited July 30, 2016 by mediacowboy

[Oxide 139]

@@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 July 31, 2016 by Oxide

[mediacowboy 438]

 

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

[Oxide 139]

Fixes for ribbon in version 3.1.6059.3847 

/*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;}

[mediacowboy 438]

 

Fixes for ribbon in version 3.1.6059.3847 

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

[mediacowboy 438]

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

[Happy2Play 9140]

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

[AlwinHummels 134]

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)

[Oxide 139]

@@AlwinHummels this should do the trick 

.cardOverlayButton {display:none !important;}

[AlwinHummels 134]

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

[AlwinHummels 134]

Change .card .indicators to .cardIndicators

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

Edited August 9, 2016 by AlwinHummels

[Happy2Play 9140]

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

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

[AlwinHummels 134]

Sorry I had my wrong pair of glasses on my nose

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

[Happy2Play 9140]

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 June 23, 2017 by Happy2Play

[Oxide 139]

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

 

 

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);}

[loomes 40]

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

Edited July 10, 2017 by loomes