Jump to content

Some CSS Fixes & Tweaks :)


Oxide

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

chef

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

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

Link to comment
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
Link to comment
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!

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

Link to comment
Share on other sites

  • 5 weeks later...
  • 1 year later...
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
Link to comment
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!

Link to comment
Share on other sites

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

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}

Link to comment
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.

Link to comment
Share on other sites

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.

Link to comment
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)

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

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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

Link to comment
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
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...