Jump to content
Oxide

Some CSS Fixes & Tweaks :)

Recommended Posts

chef

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

Share this post


Link to post
Share on other sites
loomes

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

Share this post


Link to post
Share on other sites
chef

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

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

Share this post


Link to post
Share on other sites
Happy2Play

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 by Happy2Play

Share this post


Link to post
Share on other sites
loomes

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

Share this post


Link to post
Share on other sites
chef

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!

Share this post


Link to post
Share on other sites
Oxide

@@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 by Oxide

Share this post


Link to post
Share on other sites
Oxide

@@loomes is this is what you are looking for  ;)

 

5969f5de550ce_LHSRibbon.jpg

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

Share this post


Link to post
Share on other sites
shorty1483

 

@@loomes is this is what you are looking for  ;)

 

5969f5de550ce_LHSRibbon.jpg

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

 

5972086180b5c_Unbenannt.png

Share this post


Link to post
Share on other sites
lokize

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

Share this post


Link to post
Share on other sites
makarai

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);}
  • Like 2

Share this post


Link to post
Share on other sites
Emby Tower

 

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

Can someone update the code for the actual version?

 

Thanks a lot!

Share this post


Link to post
Share on other sites
Oxide

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

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

Share this post


Link to post
Share on other sites
Emby Tower

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

Share this post


Link to post
Share on other sites
loomes

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}

Share this post


Link to post
Share on other sites
Happy2Play

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.

Share this post


Link to post
Share on other sites
Luke

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.

Share this post


Link to post
Share on other sites
Happy2Play

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)

Share this post


Link to post
Share on other sites
Luke

Ah yes good catch, thanks.

Share this post


Link to post
Share on other sites
daedalus

 

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

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

post-143-0-91469400-1541307976_thumb.png

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

 

and shifts the percentage indicator on running library scans

post-143-0-18502500-1541308128_thumb.png

Share this post


Link to post
Share on other sites
Oxide

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;}
  • Like 1

Share this post


Link to post
Share on other sites
Happy2Play

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

attachicon.giffolder_indicator.PNG

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

 

and shifts the percentage indicator on running library scans

attachicon.giflibrary_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 by Happy2Play
  • Like 1

Share this post


Link to post
Share on other sites
daedalus

 

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 -> post-143-0-32531800-1541342892_thumb.png 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*/ -> post-143-0-42881000-1541342967_thumb.png

 

Share this post


Link to post
Share on other sites
Oxide

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:

5bdf10d87eed2_Annotation.png

 

What other css you got @@daedalus

Share this post


Link to post
Share on other sites
daedalus

ah this are all "different" icons

with your code only a library setup as "homevideo" the folder icon is correct post-143-0-12950000-1541346341_thumb.png

"audiobook" -> post-143-0-26616400-1541346507_thumb.png and "mixed" -> post-143-0-01776900-1541346568_thumb.png are wrong

Edited by daedalus

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