Emby Dark Themes in different accent colors

[Luke 38979]

It's tricky because of resource loading order. All of the various pieces of the app are not going to load their resources until needed, but your css is loaded at the beginning when the app starts.

[Ben Z 86]

OP edited:

• The way you implement the dark theme is now way easier ( thank you @Nickbert ). Just copy the text as usual, it imports an url. It means there are no more manual fixes needed to be made by you (if I keep it up to date of course).

[Nickbert 7]

I just found out, that there might be an issue with rawgit as cdn provider:

https://github.com/rgrove/rawgit/wiki/Frequently-Asked-Questions#how-long-does-the-cdn-cache-files-how-can-i-make-it-refresh-my-file

If I understand that right, changes on an file will not be applied to the cdn.

 

But with gitcdn.link it should be possible to get the latest version of the css file. (I'll check that tomorrow)

https://github.com/schme16/gitcdn.xyz#how-is-this-different-from-rawgitcom-and-githackcom

 

So maybe you should use

https://gitcdn.xyz/repo/BenZuser/Emby-Web-Dark-Themes-CSS/master/GREEN%20-%20Dark%20Theme.css

Edited July 28, 2016 by Nickbert

[Ben Z 86]

I just found out, that there might be an issue with rawgit as cdn provider:

https://github.com/rgrove/rawgit/wiki/Frequently-Asked-Questions#how-long-does-the-cdn-cache-files-how-can-i-make-it-refresh-my-file

If I understand that right, changes on an file will not be applied to the cdn.

That's right. That's why I'm using the url just right of it, which is the URL for development. It update new changes by itself. I'm not using the cdn.

[drashna 47]

The @import "cleanup" is awesome. Makes things super simple on everyone, I think. 

 

But sad to hear that you only plan on doing the green theme until the theming engine is completely retrofitted...

 

[Ben Z 86]

The @import "cleanup" is awesome. Makes things super simple on everyone, I think. 

 

But sad to hear that you only plan on doing the green theme until the theming engine is completely retrofitted...

 

I know right. I loved my red theme. I just don't feel like fixing everything on something that is getting old. With green, well you know, the default one is already green.   So, almost no accent color problems.

[Happy2Play 9225]

Well the web client isn't going anywhere.

[Ben Z 86]

Well the web client isn't going anywhere.

I know, I just wait until it's retrofitted before continuing the other colors.

[drashna 47]

I know right. I loved my red theme. I just don't feel like fixing everything on something that is getting old. With green, well you know, the default one is already green.   So, almost no accent color problems.

 

What, don't want the nickname "Sisyphus"?

 

Well, I totally understand.  Easier to wait until the changes are complete than to fight every release.

 

Hopefully the team can get it done sooner rather than later! (though no rush)

 

 

 

Tested it out anyways, and while the green is annoying, it's in the server settings only, so I don't really mind it. 

But I've cheated, using my webserver to host the modified CSS for myself.

Edited July 28, 2016 by drashna

[Happy2Play 9225]

If I get it right, we can't overwrite elements with already !important ?

 

Like the admin drawer

.adminDrawer .sidebarLink.selectedSidebarLink {
    background: #E81123 !important;
    color: #fff !important;
}

I ended up using selector.

body > div.mainDrawerPanel > div.mainDrawer.transition.touch-menu-la.adminDrawer > div > div > a.sidebarLink.selectedSidebarLink

[Happy2Play 9225]

@@Ben Z

 

Here you go this works also and more toward what you want.  Nothing like Trial and Error.

.drawerContent a.sidebarLink.selectedSidebarLink {
    background: #4285F4 !important;}

[Happy2Play 9225]

Also magnify glass specific to Select Directory.

/*Magnify Glass in Dashboard to Select Directory*/
[is=paper-icon-button-light][title="Select Directory"] {color: #4285F4 !important;}

 

 

Side note Home Screen Glow borders needs updated.

 

 

 

/*OLD*/
div[data-itemtype="CollectionFolder"] .cardContent,
div[data-itemtype="UserView"] .cardContent,
div[data-itemtype="PlaylistsFolder"] .cardContent, 
div[data-itemtype="Channel"] .cardContent {border: 1px solid rgba(82,181,75,.5);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,181,75,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(82,181,75,.6);}

/*NEW*/
/*Glow for userview cards */
.itemsContainer.homeTopViews .cardContent {
  border: 1px solid rgba(0,94,243,.5);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(0,94,243,.6);
}

Edited July 28, 2016 by Happy2Play

[Happy2Play 9225]

Some clean up options for "Pop-up & other rectangle buttons".

/*Help Page Buttons*/
#aboutPage [data-role="button"]

/*Scheduled Tasks Added*/
#popupAddTrigger button       or       #popupAddTrigger [type="submit"], #popupAddTrigger [type="button"]

/*Security Revoke Button*/
#serverSecurityPage button    or       #serverSecurityPage [title="Revoke"]

/*DLNA Profile Buttons*/
#dlnaProfilePage button /*note this covers all buttons on page but affect colored ones also (Save button)*/

     Or these three

#dlnaProfilePage [data-icon="check"]
#dlnaProfilePage [type="button"]
#dlnaProfilePage [data-role="button"]


/*Parental Controls add Schedule Button*/
#userParentalControlPage [type="button"]
#popupSchedule button         or       #popupSchedule [type="submit"], #popupSchedule [type="button"]

.ui-popup.ui-body-a {background: #010101 !important;}

Edited July 28, 2016 by Happy2Play

[Delphi 83]

sass or less could be used to change the colors and output the appropriate files off of just one base .css

Edited July 28, 2016 by Delphi

[Ben Z 86]

@@Delphi

 

The problem is not there. I try to avoid any future accent color fixes. Maybe it's no longer a problem because of @@Happy2Play.

[Ben Z 86]

OP edited:

 

I added the other themes finally.

 

The web app is getting older and start being retro-fitted to adopt the newer techniques of Emby Theater. 

 

It means that there are more fixes needed on every update. As long as we can't install themes as plugins just like Emby Theater, I can't guarantee perfection with future updates, sorry for the inconvenience.

[Happy2Play 9225]

Grabbed Blue from Git and had issues with .countIndicator needs added and Logs needed updating.

Needs Added
/* --- 1.2 : Details --- */
/* --- Icons & Indicators --- */
/* Home Page */
.countIndicator

/*Logs*/
.listItemIcon {background-color: #4285F4 !important;}
.mdl-checkbox__input:focus + span + .mdl-checkbox__focus-helper {background-color: transparent;}

 

 

Hard to catch it but the cancel button for installing new updates.

button.raised.cancelDark.mini

 

Duplicate data (OLD)

div[data-itemtype="CollectionFolder"] .cardContent {
  border: 1px solid rgba(66, 133, 244, 0.5);
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(66, 133, 244, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(66, 133, 244, 0.6); }

Edited July 28, 2016 by Happy2Play

[Happy2Play 9225]

More code that can be removed (highlighted Red)
 

 

Edited July 28, 2016 by Happy2Play

[Happy2Play 9225]

What happened to

/*Pop-up for Restart and Shutdown*/
.dialog .buttons button {color: #4285F4 !important;}
.dialog .buttons button:focus {background-color: #080808 !important;}

Sorry this should be !important, copied original from browser. 

/*background highlight for Debug logging check box*/
.mdl-checkbox__input:focus + span + .mdl-checkbox__focus-helper {
  background-color: transparent !important; }

Edited July 28, 2016 by Happy2Play

[Ben Z 86]

 

What happened to

/*Pop-up for Restart and Shutdown*/
.dialog .buttons button {color: #4285F4 !important;}
.dialog .buttons button:focus {background-color: #080808 !important;}

 

I dont't know really but I updated it.

[Happy2Play 9225]

Colored line bottom of CSS input window

 

[Happy2Play 9225]

Looks like we are back to where we started, unless anyone sees and area that I missed.

[drashna 47]

Fantastic!

 

You guys rock!

[Happy2Play 9225]

I don't use it but Auto-Organize Legend text is black.

 

 

 .legend need added here to make it visible.

/* --- Fonts --- */
/* Dashboard */
select, input, h1, h2, h3, .paper-checkbox-0 #checkboxLabel.paper-checkbox, p#appVersionNumber, p#pUpToDate, p#ports, p.localUrl, p.externalUrl, div#appVersionNumber, div.detailSectionHeader, table.tblApiKeys.stripedTable.ui-responsive.table-stroke.ui-table.ui-table-reflow, textarea#textarea.style-scope.iron-autogrow-textarea, div.ui-collapsible-content.ui-body-inherit, table.tblOrganizationResults.stripedTable.ui-responsive.table-stroke.ui-table.ui-table-reflow, table#movie-table.ui-responsive.ui-table.ui-table-reflow, .legend {
  color: #FFFFFF !important; }

Edited July 29, 2016 by Happy2Play

[Ben Z 86]

Looks like we are back to where we started, unless anyone sees and area that I missed.

awesome