Jump to content
VaporTrail

"Midnight Campfire" Web App Styling

Recommended Posts

VaporTrail

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

 

5cea86b3b4782_MidnightCampfireScreenshot

 

5cc64ec23bae3_MidnightCampfireScreenshot

 

5cc64edb894e6_MidnightCampfireScreenshot

 

5cc64eedba095_MidnightCampfireScreenshot

Emby 4.1 Midnight Campfire theme - v8.css

Edited by VaporTrail
  • Like 3

Share this post


Link to post
Share on other sites
VaporTrail

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

Share this post


Link to post
Share on other sites
kesm

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

Share this post


Link to post
Share on other sites
VaporTrail

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

  • Like 1

Share this post


Link to post
Share on other sites
VaporTrail

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.

Share this post


Link to post
Share on other sites
Happy2Play

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

Share this post


Link to post
Share on other sites
VaporTrail

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

Share this post


Link to post
Share on other sites
VaporTrail

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

Share this post


Link to post
Share on other sites
VaporTrail

Any chance of the odd screenshot ?

 

Also, is this the same as Blackout Theme mentioned here https://emby.media/community/index.php?/topic/18046-custom-css-with-emby-web-app/page-17&do=findComment&comment=732663

 

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

  • Like 1

Share this post


Link to post
Share on other sites
arrbee99

Thanks very much.

  • Like 1

Share this post


Link to post
Share on other sites
kesm

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!

Share this post


Link to post
Share on other sites
VaporTrail

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?  ;) 

  • Like 1

Share this post


Link to post
Share on other sites
Happy2Play

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

Share this post


Link to post
Share on other sites
VaporTrail

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

Share this post


Link to post
Share on other sites
kesm

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

Share this post


Link to post
Share on other sites
VaporTrail

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

Share this post


Link to post
Share on other sites
kesm

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 :)

Share this post


Link to post
Share on other sites
Happy2Play

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

Share this post


Link to post
Share on other sites
VaporTrail

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!  ;)

Share this post


Link to post
Share on other sites
kesm

Looks fine, can't see any new missing border well done!

I found 2 buttons with no style when you add a new scheduled task
ljZmUlY.png

Also in playback reporting I feel that lines with black are not well delimited mainly for the first line because it's the same color that the table's header, maybe add a border between lines or change black color?

iRKyxeN.png

 

Anyway, thank you for your previous fixes, theme looks very nice!

Share this post


Link to post
Share on other sites
FirstAidPoetry

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

Note that Server dashboard themes can't be changed without a Premiere Subscription, and without it some text goes black on black. Example: The text on running tasks in the server dashboard.

 

Share this post


Link to post
Share on other sites
VaporTrail

@@kesm Appreciate the kudos! Please check out version 7 now available. Got the statistics plugin styled the best I could.  :)

  • Like 1

Share this post


Link to post
Share on other sites
kesm

Quick fix as always, theme keeps improving thanks.

Was wondering, is there a way to host the css on a website like GitHub Pages and use it with an import instead of pasting the whole css each time?

This way we could be sure to have the latest version of the theme when using Emby.

Share this post


Link to post
Share on other sites
VaporTrail

@@kesm That sounds interesting but I've never seen such a thing. Is there an example?

 

I've also never used GitHub, so a bit daunted by the prospect.

 

Frankly, I'll probably stop at version 10 whether it's "complete" or not. Happy to take requests until then.

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