Jump to content

Some CSS Fixes & Tweaks :)

Oxide

By Oxide
in Web App CSS

 Share

Recommended Posts

chef

chef 3763

Posted
Posted

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

chef 3763

Posted
Posted

​? 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

Happy2Play 8928

Posted
Posted (edited)

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

chef 3763

Posted
Posted

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

Oxide 139

Posted
  • Author
Posted (edited)

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

Oxide 139

Posted
  • Author
Posted

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

shorty1483 480

Posted
Posted

 

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

makarai 108

Posted
Posted

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

Emby Tower 33

Posted
Posted

 

 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
Oxide

Oxide 139

Posted
  • Author
Posted

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
loomes

loomes 40

Posted
Posted

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

Happy2Play 8928

Posted
Posted

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
Luke Emby Team

Luke 38096

Posted
Posted

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

Happy2Play 8928

Posted
Posted

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

daedalus 430

Posted
Posted

 

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
Oxide

Oxide 139

Posted
  • Author
Posted

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

Happy2Play 8928

Posted
Posted (edited)

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

daedalus 430

Posted
Posted

 

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
Oxide

Oxide 139

Posted
  • Author
Posted

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

daedalus 430

Posted
Posted (edited)

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
 Share
Go to topic listing
×
×
  • Create New...