Jump to content


Photo

"Midnight Campfire" Web App Styling

css tweaks theme

  • Please log in to reply
26 replies to this topic

#1 VaporTrail OFFLINE  

VaporTrail

    Advanced Member

  • Members
  • 267 posts
  • Local time: 12:50 AM
  • LocationGo Leafs!

Posted 23 April 2019 - 01:08 AM

Greetings!

 

If you're anything like me, you only use the Emby web app in bed at night with the lights off. Perhaps like me, you also have sleeping problems and bright lights cause you sleeplessness. That's the issue I face when using Emby's web app on a nightly basis (even with dark mode). 

 

As a solution, download and apply the custom CSS attached to this post in Admin Dashboard > Settings > Custom CSS. The "Midnight Campfire" web app styling can be used with the free or premiere version of Emby. You'll need to use the "Dark" theme and "Light" server dashboard theme for changes to apply correctly in User Settings > Display.

 

Note this removes the Emby logo and buy premiere CTA in the main header to completely remove the bright colors which cause sleeplessness (for us extremely poor users who can't even afford $5/month  :(), but also note this doesn't add any premiere features, nor removes the buy premiere CTA section which displays periodically on the homescreen. If you can, buy a premiere license!

 

File is below screenshots. Enjoy!  :D

 

5cc64e71a4f8e_MidnightCampfireScreenshot

 

5cc64e96dfef4_MidnightCampfireScreenshot

 

5cc64ea98003c_MidnightCampfireScreenshot

 

5cc64ec23bae3_MidnightCampfireScreenshot

 

5cc64edb894e6_MidnightCampfireScreenshot

 

5cc64eedba095_MidnightCampfireScreenshot

Attached Files


Edited by VaporTrail, 07 May 2019 - 02:20 AM.

  • kesm and nilma like this

#2 VaporTrail OFFLINE  

VaporTrail

    Advanced Member

  • Members
  • 267 posts
  • Local time: 12:50 AM
  • LocationGo Leafs!

Posted 25 April 2019 - 08:56 PM

Would appreciate some comments from those who've tried it.  :)



#3 kesm OFFLINE  

kesm

    Advanced Member

  • Members
  • 62 posts
  • Local time: 06:50 AM

Posted 26 April 2019 - 07:10 AM

Hi, 

I have a small issue when library is updating : 

 FqCVvWk.png

Also, 
Watched picture is too big for playlists : 
NVNbIqk.png


Edited by kesm, 26 April 2019 - 08:30 AM.


#4 VaporTrail OFFLINE  

VaporTrail

    Advanced Member

  • Members
  • 267 posts
  • Local time: 12:50 AM
  • LocationGo Leafs!

Posted 26 April 2019 - 05:25 PM

Thanks @kesm. Unsure if the playlist watched status is a separate class than the vertical episode list watched status... If not, perhaps % instead of px value might fix that. Might try to fix and post an update.

 

Do you like the playbar gradient?

 

5cc377376ae4d_MidnightCampfireScreenshot


  • nilma likes this

#5 VaporTrail OFFLINE  

VaporTrail

    Advanced Member

  • Members
  • 267 posts
  • Local time: 12:50 AM
  • LocationGo Leafs!

Posted 27 April 2019 - 01:23 PM

Had a look and don't think I can tackle those trouble areas. The class names are the same for other items, so if I try and fix what you mentioned, it breaks something else.



#6 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 14114 posts
  • Local time: 09:50 PM
  • LocationWashington State

Posted 27 April 2019 - 05:23 PM

Had a look and don't think I can tackle those trouble areas. The class names are the same for other items, so if I try and fix what you mentioned, it breaks something else.

 

Looks like it has to be more targeted since "#childrenContent .playedIndicator" would cover lets say playlist and episode in season view.  

#childrenContent div.playedIndicator{
   width: 25%;
   height: 25%;
   border-radius: 0%;
   transform: rotate(-45deg);
   border-style: solid;
   border-width: 1px;
}

#childrenContent div.listItem-content div.playedIndicator{
   width: 75px;
   height: 25px;
   border-radius: 0%;
   transform: rotate(-45deg);
   border-style: solid;
   border-width: 1px;
}

Just like if you changed image type from Primary to List, the ribbon indicator has issues also but that has always been that way, as the code is targeting all views and need adjusted in some views.

 

The progress ring.

/*Move Library Progress Ring*/
div.progressring {
    right: 30px; }

Edited by Happy2Play, 27 April 2019 - 05:49 PM.


#7 VaporTrail OFFLINE  

VaporTrail

    Advanced Member

  • Members
  • 267 posts
  • Local time: 12:50 AM
  • LocationGo Leafs!

Posted 27 April 2019 - 11:31 PM

Thanks @Happy2Play, I've updated the code and attached it to the original post.

 

It made sense to separate played video indicator from played audio indicator, and keep audio indicator as circle instead of ribbon due to the issues you've outlined.

 

I haven't tested your code re: progress ring, but have added it. Thanks again!  :)


Edited by VaporTrail, 27 April 2019 - 11:38 PM.


#8 VaporTrail OFFLINE  

VaporTrail

    Advanced Member

  • Members
  • 267 posts
  • Local time: 12:50 AM
  • LocationGo Leafs!

Posted 28 April 2019 - 04:52 PM

Updated file in original post to version 3 - played indicator icons now black to match other icon styling.



#9 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2578 posts
  • Local time: 04:50 PM
  • LocationNew Zealand

Posted 28 April 2019 - 05:05 PM

Any chance of the odd screenshot ?

 

Also, is this the same as Blackout Theme mentioned here https://emby.media/c...-17#entry732663



#10 VaporTrail OFFLINE  

VaporTrail

    Advanced Member

  • Members
  • 267 posts
  • Local time: 12:50 AM
  • LocationGo Leafs!

Posted 28 April 2019 - 08:48 PM

Any chance of the odd screenshot ?

 

Also, is this the same as Blackout Theme mentioned here https://emby.media/c...-17#entry732663

 

The version you link was my first attempt using default green. It wasn't helping deal with sleeplessness, so went with red and yellow to mimic firelight like we've evolved to sleep by.

 

I'll post a couple screenshots in the OP. Thanks for asking.  :)


  • arrbee99 likes this

#11 arrbee99 OFFLINE  

arrbee99

    Advanced Member

  • Members
  • 2578 posts
  • Local time: 04:50 PM
  • LocationNew Zealand

Posted 28 April 2019 - 09:13 PM

Thanks very much.


  • VaporTrail likes this

#12 kesm OFFLINE  

kesm

    Advanced Member

  • Members
  • 62 posts
  • Local time: 06:50 AM

Posted 29 April 2019 - 02:38 AM

playbar gradient looks very nice, like all the rest of your theme, all seems very polish.

Any chance that you can stylish statistics plugin?

 

puMcRs6.png

That mix between green and red is pretty hard for eyes.

Also selected item in metadata manager is green in the left part

T8j7MgY.png

Another point : 

In synchronize part, delete button is cut : 
aMdYTeP.png

Thanks for your great work, it's nice to see other themes for emby!



#13 VaporTrail OFFLINE  

VaporTrail

    Advanced Member

  • Members
  • 267 posts
  • Local time: 12:50 AM
  • LocationGo Leafs!

Posted 29 April 2019 - 05:34 AM

Appreciate the kudos and suggestions @kesm. Check the original post, the CSS file has been updated with your requests.

 

I was not able to tackle the synchronized downloads delete button, as I've never used that feature. Perhaps @Happy2Play knows how to fix that?  ;) 


  • kesm likes this

#14 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 14114 posts
  • Local time: 09:50 PM
  • LocationWashington State

Posted 29 April 2019 - 05:05 PM

I have never used sync so I will see if I can figure it out when I get a chance.  Add at the bottom.  At first I couldn't reproduce then realized it was do to the word wrap.

 

Other areas that are green

 

 

Progress bars on Dashboard, Library, and Scheduled Tasks
 
/* Google Progress Bars */
progress::-webkit-progress-value {
  background: YOURCOLOR !important; }
 
/* Firefox Progress Bars */
progress::-moz-progress-bar {
  background: YOURCOLOR !important; }
 
/* Edge Progress Bars */
progress {
  background: YOURCOLOR !important; }
 

Runningtask counter/percentage
 
#divRunningTasks span {
  color: YOURCOLOR !important; }
 
Areas that are Blue
 
Header tabs in each User and in DLNA profiles
 
div[data-role=controlgroup] a.ui-btn-active.emby-button {
    background: YOURCOLOR !important;
}
 
The sync job box, something like this.
 
div.jobItems div.listItem.listItem-border {display: -webkit-box;}

Edited by Happy2Play, 29 April 2019 - 05:53 PM.

  • VaporTrail likes this

#15 VaporTrail OFFLINE  

VaporTrail

    Advanced Member

  • Members
  • 267 posts
  • Local time: 12:50 AM
  • LocationGo Leafs!

Posted 29 April 2019 - 06:49 PM

Awesome insights @Happy2Play, I've been able to update with your code. Version 5 is attached to OP.  B)



#16 kesm OFFLINE  

kesm

    Advanced Member

  • Members
  • 62 posts
  • Local time: 06:50 AM

Posted 30 April 2019 - 03:10 AM

Better now, thanks!

Another point : if emby is in french, some texts in the left bar are cut : 
23QUoC7.png
Metadata Manger and Camera upload aren't fully visible

 

Also right border is missing in menus : 
XwBG3tO.png


Edited by kesm, 30 April 2019 - 03:11 AM.


#17 VaporTrail OFFLINE  

VaporTrail

    Advanced Member

  • Members
  • 267 posts
  • Local time: 12:50 AM
  • LocationGo Leafs!

Posted 30 April 2019 - 05:55 AM

Great to hear @kesm!

 

Can you live with the text off the page in French? If not, try adding this to your Custom CSS box. Should make menu text smaller:

span.navMenuOptionText { font-size: .8em !important; }

That's custom for you, the menu looks fine in English language.  :)

 

The right border missing in menus only happens in some cases. Mostly it shows up fine as it should. Does it bother you much as is?


Edited by VaporTrail, 30 April 2019 - 06:03 AM.


#18 kesm OFFLINE  

kesm

    Advanced Member

  • Members
  • 62 posts
  • Local time: 06:50 AM

Posted 30 April 2019 - 08:14 AM

Yes no problem for the text cut, I definitively can live without it 

 

For the missing borders I also have some at the bottom, almost all menus on home screen doesn't work well. Not so important but I had to tell you about it in case you missed it :)



#19 Happy2Play OFFLINE  

Happy2Play

    Trial and Error

  • Moderators
  • 14114 posts
  • Local time: 09:50 PM
  • LocationWashington State

Posted 30 April 2019 - 02:33 PM

This should help with the dialog box border.

div.dialog {padding: 0 .2em .2em 0; }

Another option for the drawer text if you don't want to change the font size would be wrapping the text.  As this would appear to be a issue for Translated sections.

 

Something like

span.navMenuOptionText {
    white-space: pre-wrap;
    text-align: justify;
}


#20 VaporTrail OFFLINE  

VaporTrail

    Advanced Member

  • Members
  • 267 posts
  • Local time: 12:50 AM
  • LocationGo Leafs!

Posted 30 April 2019 - 11:27 PM

Thanks again @Happy2Play, I've updated the OP file with your suggestions!

 

@kesm please download the latest version 6 and let me know if it helps. Screenshots would be nice!  ;)







Also tagged with one or more of these keywords: css, tweaks, theme

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users