Some CSS Fixes & Tweaks :)

[chef 3804]

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

 

Here:

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

[loomes 40]

​? Its the original code with the Ribbons in the left corner ?

[chef 3804]

​? Its the original code with the Ribbons in the left corner ?

Ops! Right hand... Doh! One second.

[Happy2Play 9280]

Ops! Right hand... Doh! One second.

 

Remember these are two different ribbons.  You posted for the main indicator and @@Oxide posted for new vertical list.

Edited July 12, 2017 by Happy2Play

[loomes 40]

Yes i mean the original Ribbons. Im using the Final Emby Version and have no vertical list.

[chef 3804]

Sorry I can flip them to the right position, but haven't figured out how to move them back to the right.

 

I tried to help. Fail!

[Oxide 139]

@@loomes I've have a look over the weekend and move the ribbon across for you, where do you want the play button as with my css tweaks that is on the right?

Edited July 14, 2017 by Oxide

[Oxide 139]

@@loomes is this is what you are looking for 

 

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

[sh0rty 520]

 

@@loomes is this is what you are looking for 

 

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

 

 

Unfortunately this seems not to work on the Season list view.

 

[lokize 0]

css to add search bar to press a button its possible?

[makarai 108]

all left hand side

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

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

[Emby Tower 33]

 

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

Can someone update the code for the actual version?

 

Thanks a lot!

[Oxide 139]

This is my current css tweaks, hope it's what you are looking for    All tweaks have descriptions, use what suites you  

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

/* Capitalize Card Text */
.cardFooter {text-transform: capitalize !important;}
div.sessionCardFooter.cardFooter > div:nth-child(n) > div {text-transform: capitalize !important;}

/* 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;}
.indicatorIcon {transform: rotate(-45deg);}

/* Episode Vertical List Played Indicator into Ribbon RHS*/
.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;}
#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 all Screenshot 16:9 */
.listItemImage-large {width: 400px !important; height: 225px !important; margin-bottom: 1em; overflow: hidden;}
.listItemImage {background-size: cover !important;}

/* Make Star Rating Gold */
.starIcon { color: #D4AF37 !important;}

/* Make Top Menu Default Color On All Themes */
.skinHeader-withBackground { background-color: #222 !important; -webkit-box-shadow: none !important;}

/* Make Progress Bar Larger */
.itemProgressBar {height: 10px !important;}
.detailImageProgressContainer {bottom: 0;}

[Emby Tower 33]

Thanks a lot, Emby Server now looks so much better!

[loomes 40]

i have theme.mp3 files for my Series and Movie Collections.

When i enter a Collection or Series in the WebApp the theme.mp3 is playing.... but at the bottom comes a Playbar with Stop/pause.

Can i hide this bar?

I found an old CSS Code, but its not working with the latest stable emby server: #themeSongsCollapsible {display: none !important}

[Happy2Play 9280]

i have theme.mp3 files for my Series and Movie Collections.

When i enter a Collection or Series in the WebApp the theme.mp3 is playing.... but at the bottom comes a Playbar with Stop/pause.

Can i hide this bar?

I found an old CSS Code, but its not working with the latest stable emby server: #themeSongsCollapsible {display: none !important}

It appears to be the ".nowPlayingBar" now, but hiding it will affect other areas like when playing Music.

[Luke 39294]

i have theme.mp3 files for my Series and Movie Collections.

When i enter a Collection or Series in the WebApp the theme.mp3 is playing.... but at the bottom comes a Playbar with Stop/pause.

Can i hide this bar?

I found an old CSS Code, but its not working with the latest stable emby server: #themeSongsCollapsible {display: none !important}

 

You won't need to worry about it anymore with the next release of emby server.

[Happy2Play 9280]

You won't need to worry about it anymore with the next release of emby server.

 

This is true for the first time you enter a item.  But if you navigate somewhere else and come back the nowPlayingBar appears on all subsequent entries. 

 

Tested on .58 with one series having theme music.  The only way the nowPlayingBar doesn't appear on re-entering a item is if the browser is refreshed.  (at least in my tests)

[Luke 39294]

Ah yes good catch, thanks.

[daedalus 430]

 

This is my current css tweaks, hope it's what you are looking for    All tweaks have descriptions, use what suites you  

/* 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;}
.indicatorIcon {transform: rotate(-45deg);}

 

don't know if anything can be done, the above works great but leads to this little "glitches"

its affecting but not covering the folder markers

could be a nice addition to also have the folder indicator 'ribbonized' 

 

and shifts the percentage indicator on running library scans

[Oxide 139]

To make the folder markers into ribbons use this:

/* 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;}
#homeVideosPage > div.pageTabContent.tabContent.is-active > div.itemsContainer.padded-left.padded-right.vertical-wrap > div:nth-child(n) > div > div.cardScalable > button > div > i {transform: rotate(45deg);}

You can change the background to the colour of your choice, by default it's a dark transparent grey. I've remarked out by background which is red.

 

 

 

To Fix the library scans indicator use this:

.progressring {right: 28px;}

[Happy2Play 9280]

don't know if anything can be done, the above works great but leads to this little "glitches"

its affecting but not covering the folder markers

folder_indicator.PNG

could be a nice addition to also have the folder indicator 'ribbonized' 

 

and shifts the percentage indicator on running library scans

library_progress.PNG

 

Something like this?  Replace existing code, caused ".indicatorIcon" over rotation.  Only tested on beta server (3.6.0.60).

/*Make folder Indicator into Ribbon LHS*/
div.videoIndicator {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; left: -21px; }
 
/* Make Played Indicator into Ribbon RHS */
div.cardIndicators {right: -21px; top: 4px; left: initial;}
div.playedIndicator, div.countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg); 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;}
#moviesPage .indicatorIcon, #homeTab .indicatorIcon, #tvPage .indicatorIcon {transform: rotate(-45deg); }
 
/*Move Library Progress Ring*/
.progressring {
    left: -30px; }

Edited November 4, 2018 by Happy2Play

[daedalus 430]

 

To make the folder markers into ribbons use this:

/* 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;}
#homeVideosPage > div.pageTabContent.tabContent.is-active > div.itemsContainer.padded-left.padded-right.vertical-wrap > div:nth-child(n) > div > div.cardScalable > button > div > i {transform: rotate(45deg);}

You can change the background to the colour of your choice, by default it's a dark transparent grey. I've remarked out by background which is red.

 

^ this produces this -> while keeping /* Episode Vertical List Played Indicator into Ribbon RHS*/ working

 

 

Something like this?  Replace existing code, caused ".indicatorIcon" over rotation.  Only tested on beta server (3.6.0.60).

/*Make folder Indicator into Ribbon LHS*/
div.videoIndicator {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; left: -21px; }
 
/* Make Played Indicator into Ribbon RHS */
div.cardIndicators {right: -21px; top: 4px; left: initial;}
div.playedIndicator, div.countIndicator {width: 75px; height: 25px; border-radius: 0%; transform: rotate(45deg); 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;}
#moviesPage .indicatorIcon, #homeTab .indicatorIcon, #tvPage .indicatorIcon {transform: rotate(-45deg); }

 

^ while this makes the folder right but quirks up  /* Episode Vertical List Played Indicator into Ribbon RHS*/ ->

 

[Oxide 139]

Weird, with this:

/* 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;}
#homeVideosPage > div.pageTabContent.tabContent.is-active > div.itemsContainer.padded-left.padded-right.vertical-wrap > div:nth-child(n) > div > div.cardScalable > button > div > i {transform: rotate(45deg);}

I get this:

 

What other css you got @@daedalus? 

[daedalus 430]

ah this are all "different" icons

with your code only a library setup as "homevideo" the folder icon is correct

"audiobook" -> and "mixed" -> are wrong

Edited November 4, 2018 by daedalus