Jump to content

Emby Dark Themes in different accent colors


Ben Z

Recommended Posts

Happy2Play

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; }
Link to comment
Share on other sites

Happy2Play

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; }
Link to comment
Share on other sites

Ben Z

 

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.

  • Like 1
Link to comment
Share on other sites

drashna

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

Link to comment
Share on other sites

Happy2Play

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.

Link to comment
Share on other sites

Ben Z

@@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?

Link to comment
Share on other sites

Ben Z

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

 

I personally modified my login page like this :

57a96fd813ba0_login.png

 

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; }
Link to comment
Share on other sites

Happy2Play

@@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?

 

57a9886abdcb9_refresh.jpg

Link to comment
Share on other sites

Ben Z

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 by Ben Z
Link to comment
Share on other sites

Happy2Play

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.

Link to comment
Share on other sites

Ben Z

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

57aa220bd8d99_embyconnect.png

Link to comment
Share on other sites

Happy2Play

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.

Link to comment
Share on other sites

Happy2Play

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

 

User Access Schedule button and Schedule pop-up

57aa793e2a23c_access.jpg

 

Easy-pin text

57aa7954b619a_easypin.jpg

 

Auto-Organize Legend text

57aa79b48d7a1_legend1.jpg

 

Advanced-Security Revoke button

57aa7af805594_revoke.jpg

 

Edited by Happy2Play
Link to comment
Share on other sites

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

 

User Access Schedule button and Schedule pop-up

57aa793e2a23c_access.jpg

 

Easy-pin text

57aa7954b619a_easypin.jpg

 

Auto-Organize Legend text

57aa79b48d7a1_legend1.jpg

 

Advanced-Security Revoke button

57aa7af805594_revoke.jpg

 

Thanks. Fixed.

  • Like 1
Link to comment
Share on other sites

Happy2Play

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

57b27d72aa520_pluginsupdate.jpg

Link to comment
Share on other sites

Happy2Play

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)

 

57b2c3e003edc_tabs.jpg

Edited by Happy2Play
Link to comment
Share on other sites

Happy2Play

Beta/dev

Looking into changes to Custom CSS text area

 

and another change to selection-bar above

Link to comment
Share on other sites

Happy2Play

 

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.

Link to comment
Share on other sites

Delphi

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

  • Like 2
Link to comment
Share on other sites

UPDATE :

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

 

  • Like 2
Link to comment
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...