VaporTrail 66 Posted April 23, 2019 Posted April 23, 2019 (edited) 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! Emby 4.1 Midnight Campfire theme - v8.css Edited May 26, 2019 by VaporTrail 3
VaporTrail 66 Posted April 26, 2019 Author Posted April 26, 2019 Would appreciate some comments from those who've tried it.
kesm 25 Posted April 26, 2019 Posted April 26, 2019 (edited) Hi, I have a small issue when library is updating : Also, Watched picture is too big for playlists : Edited April 26, 2019 by kesm
VaporTrail 66 Posted April 26, 2019 Author Posted April 26, 2019 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? 1
VaporTrail 66 Posted April 27, 2019 Author Posted April 27, 2019 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.
Happy2Play 9229 Posted April 27, 2019 Posted April 27, 2019 (edited) 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 April 27, 2019 by Happy2Play
VaporTrail 66 Posted April 28, 2019 Author Posted April 28, 2019 (edited) 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 April 28, 2019 by VaporTrail
VaporTrail 66 Posted April 28, 2019 Author Posted April 28, 2019 Updated file in original post to version 3 - played indicator icons now black to match other icon styling.
arrbee99 1675 Posted April 28, 2019 Posted April 28, 2019 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
VaporTrail 66 Posted April 29, 2019 Author Posted April 29, 2019 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. 1
kesm 25 Posted April 29, 2019 Posted April 29, 2019 playbar gradient looks very nice, like all the rest of your theme, all seems very polish.Any chance that you can stylish statistics plugin? That mix between green and red is pretty hard for eyes.Also selected item in metadata manager is green in the left partAnother point : In synchronize part, delete button is cut : Thanks for your great work, it's nice to see other themes for emby!
VaporTrail 66 Posted April 29, 2019 Author Posted April 29, 2019 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? 1
Happy2Play 9229 Posted April 29, 2019 Posted April 29, 2019 (edited) 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 April 29, 2019 by Happy2Play 1
VaporTrail 66 Posted April 29, 2019 Author Posted April 29, 2019 Awesome insights @@Happy2Play, I've been able to update with your code. Version 5 is attached to OP.
kesm 25 Posted April 30, 2019 Posted April 30, 2019 (edited) Better now, thanks!Another point : if emby is in french, some texts in the left bar are cut : Metadata Manger and Camera upload aren't fully visible Also right border is missing in menus : Edited April 30, 2019 by kesm
VaporTrail 66 Posted April 30, 2019 Author Posted April 30, 2019 (edited) 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 April 30, 2019 by VaporTrail
kesm 25 Posted April 30, 2019 Posted April 30, 2019 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
Happy2Play 9229 Posted April 30, 2019 Posted April 30, 2019 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; }
VaporTrail 66 Posted May 1, 2019 Author Posted May 1, 2019 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!
kesm 25 Posted May 6, 2019 Posted May 6, 2019 Looks fine, can't see any new missing border well done!I found 2 buttons with no style when you add a new scheduled taskAlso 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? Anyway, thank you for your previous fixes, theme looks very nice!
FirstAidPoetry 0 Posted May 6, 2019 Posted May 6, 2019 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.
VaporTrail 66 Posted May 7, 2019 Author Posted May 7, 2019 @@kesm Appreciate the kudos! Please check out version 7 now available. Got the statistics plugin styled the best I could. 1
kesm 25 Posted May 7, 2019 Posted May 7, 2019 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.
VaporTrail 66 Posted May 7, 2019 Author Posted May 7, 2019 @@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.
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now