Emby Dark Themes in different accent colors

[Happy2Play 9443]

Will post the temporary fixes here for now.
 
Note you will have to apply your accent colors.  These are for Blue.

/*Needs added to 3.0.6050 - Dashboard Up to Date checkbox*/
p#pUpToDate i.md-icon {
  background-color: #4285F4 !important; }

/*change for(.dialogButton) Starup-Shutdown popup*/
.promptDialogButton {
  color: #4285F4 !important;
  background-color: transparent !important; }

.promptDialogButton:hover {
  color: #9b9b9b !important;
  background-color: transparent !important; }

/*needs added Scheduled Task percentages*/
.listItem .secondary span  {
  color: #0C57D6 !important; }

[mediacowboy 438]

Looks like the changes have been merged.

[Happy2Play 9443]

Needs added but should the Header ".ui-body-a div.formDialogHeader" on Refresh be accented same as multi-select or dark like the rest of the headers?

/* Top bars */
.dashboardDocument .viewMenuBar, .viewMenuBar, .libraryViewNav, .ui-body-b .libraryViewNav, .ui-body-a div.formDialogHeader {
  background-color: rgba(16, 16, 16, 0.94); }


or


/* Home Page Selection */
div.selectionCommandsPanel, .ui-body-a div.formDialogHeader {
  background: #4285F4; }

[Ben Z 86]

 

Needs added but should the Header ".ui-body-a div.formDialogHeader" on Refresh be accented same as multi-select or dark like the rest of the headers?

/* Top bars */
.dashboardDocument .viewMenuBar, .viewMenuBar, .libraryViewNav, .ui-body-b .libraryViewNav, .ui-body-a div.formDialogHeader {
  background-color: rgba(16, 16, 16, 0.94); }


or


/* Home Page Selection */
div.selectionCommandsPanel, .ui-body-a div.formDialogHeader {
  background: #4285F4; }

 

It's intended to be accented. The default look of web client is green and for a good reason. It's a selection feature and I think a dark/black color isn't appropriate.

[drashna 47]

Looks like the changes have been merged.

 

That's why I love this method.  No changes needed. Updates get "pushed" out sooner or later.  Much less work on our end.

 

 

 

Needs added but should the Header ".ui-body-a div.formDialogHeader" on Refresh be accented same as multi-select or dark like the rest of the headers?

 

 

I'm not sure I see the difference.  

 

Either way, this is why I have a couple of addition CSS files hosted on a website I control, and have the headers set to immediately expire the files.  This way, I can add and test out changes without having to forcibly refreshing the browser.

[Happy2Play 9443]

I'm not sure I see the difference.  

 

Either way, this is why I have a couple of addition CSS files hosted on a website I control, and have the headers set to immediately expire the files.  This way, I can add and test out changes without having to forcibly refreshing the browser.

I am submitting a pull on the beta to use accented colors soon.  Right now it should still have a green header.

[Ben Z 86]

@@Happy2Play

 

I think I wasn't clear enough. I only wanted div.selectionCommandsPanel as accented header. Putting accent color on every other dialog headers isn't too flashy?

[Ben Z 86]

I'm not sure if people would like this so I'll share here.

 

I personally modified my login page like this :

 

I like to have white icons for default accounts with the accent color as background in a circle.

 

You have to replace the accent color #E81123 with the appropriate one.

/* Login Page */
div#divUsers.itemsContainer.vertical-wrap.centered .visualCardBox .cardScalable {
    background-color: #E81123 !important; /* replace the accent color #E81123 */
    border-radius: 125px !important; }

div.cardImageContainer.coveredImage.noScale {
    border-radius: 125px !important; }

div#divUsers.itemsContainer.vertical-wrap.centered .visualCardBox .cardFooter, div#divUsers.itemsContainer.vertical-wrap.centered div.cardBox.visualCardBox {
    background: transparent !important;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
    -moz-box-shadow: 0 2px 4px transparent !important;
    -ms-box-shadow: 0 2px 4px transparent !important;
    -webkit-box-shadow: 0 2px 4px transparent !important;
    box-shadow: 0 2px 4px transparent !important; }

[Happy2Play 9443]

@@Happy2Play

 

I think I wasn't clear enough. I only wanted div.selectionCommandsPanel as accented header. Putting accent color on every other dialog headers isn't too flashy?

Are you saying ui-body-a div.formDialogHeader is affecting more then just the Refresh screen header?  If so what others, because I haven't noticed any others?

 

[Ben Z 86]

Are you saying ui-body-a div.formDialogHeader is affecting more then just the Refresh screen header?  If so what others, because I haven't noticed any others?

 

 

 Yes a couple of dialogs like Emby Connect, Add to collection, Add to playlist, Subtitles, Identify and refresh.

 

EDIT: fixed

Edited August 9, 2016 by Ben Z

[Happy2Play 9443]

To me it makes since to accent them as Luke already did .ui-body-a div.formDialogHeader (Green) and .ui-body-b div.formDialogHeader (Black).  But either accented or black both look good.

 

Can you show me an example of Emby Connect?  Nothing carries to connect for me.

[Ben Z 86]

To me it makes since to accent them as Luke already did .ui-body-a div.formDialogHeader (Green) and .ui-body-b div.formDialogHeader (Black).  But either accented or black both look good.

 

Can you show me an example of Emby Connect?  Nothing carries to connect for me.

 

Because this way, some dialogs would be accented and some others black. I like when it's consistent so all accented or all black for me. 

 

Dashboard - Users - Guest + Add

[Happy2Play 9443]

Okay I see now since I have never clicked on add Guest, Emby Connect was throwing me off.  I agree it make since having them all one way.  So my first option in post 207.

[Happy2Play 9443]

New layout looks good.  Only see four areas that got dropped.

 

User Access Schedule button and Schedule pop-up

 

Easy-pin text

 

Auto-Organize Legend text

 

Advanced-Security Revoke button

 

Edited August 10, 2016 by Happy2Play

[Ben Z 86]

New layout looks good.  Only see four areas that got dropped.

 

User Access Schedule button and Schedule pop-up

 

Easy-pin text

 

Auto-Organize Legend text

 

Advanced-Security Revoke button

 

Thanks. Fixed.

[mediacowboy 438]

Yall are fast on the fixes. I wish I could help give back some way

[Shrom 6]

@Ben Z you made an amazing job here !! well done !

[Happy2Play 9443]

@@Ben Z Plugins Update needs added

 

add "#pPluginUpdates button" to this section, unless you want them different then the server "Update Now" button.

/* Individual Elements */
button#btnShutdown.raised.subdued, button#btnRestart.raised.subdued,
#btnUpdateApplication, button.raised.subdued.btnRestartContainer,
button.btnHeaderSave.accent.autoSize.emby-button

[Happy2Play 9443]

Beta update 3.1.106.0  Tab menus
 
change from .pageTabButton.is-active to button.emby-tab-button-active
 

//* 1.1.7 Others */
/* Multiple Elements */
button.emby-tab-button-active .emby-tab-button-selection-bar {
  background: #4285F4 !important; }
/* 1.2.2 Fonts */
/* Multiple Elements */
button.emby-tab-button-active{
  color: #4285F4 !important; }

So you know what tabs were updated (Dashboard sub-menus)

 

Edited August 16, 2016 by Happy2Play

[Happy2Play 9443]

Beta/dev

Looking into changes to Custom CSS text area

 

and another change to selection-bar above

[Ho2x 5]

Hello,

 

Soon an update to the latest stable version?

 

Thank's

[Happy2Play 9443]

 

Hello,

 

Soon an update to the latest stable version?

 

Thank's

 

What areas are you having issues with?  I know of ones that is fixed in beta and needs to be pushed to master now since new stable release.

[Delphi 83]

@Ben Z, @@Happy2Play, 

 

Recommend changing the github directory layout to something along the lines of 

 

\color\theme.css

 

would make for changing themes easier and removes %20 from the file names...

 

Just a thought...

[Ben Z 86]

@@Delphi

 

Good idea, I'll consider it.

[Ben Z 86]

UPDATE :

• The GitHub folder structure changed to get simpler and cleaner links. Make sure to update your CSS link HERE. Sorry for the inconvenience.