Jump to content

Emby Dark Themes in different accent colors


Ben Z

Recommended Posts

Happy2Play

Need to add to Fonts-Dashboard do to dark text on dark background.

 

DLNA Subtitles Profile and XML Settings

/* --- Fonts --- */
/* Dashboard */
.subtitleProfileList, .xmlDocumentAttributeList

Haven't looked closely by in DLNA but Containers, Codecs, and Responses is missing background-color modification, compared to the others.

 

Okay here you go, these need added to /* Panels */ section that contains "div.directPlayProfiles, div.transcodingProfiles".

.containerProfiles, .codecProfiles, .mediaProfiles

I guess if you look hard enough there is always something.

Link to comment
Share on other sites

Happy2Play

I created a pull request for a few fixes:

This is going to be interesting to see how this is going to work with personal customizations that everyone may not want. 

 

I know it is personal preference but I don't think changing all the Home Screen-My Media buttons to one color looks very good.  But it will only affect people that actually use it.

 

I was looking at the Reports page and know Luke has mentions that it is going to get an overhaul but don't know when, and the choice of what other color should be used for viewed links since unviewed ones contain theme color.  Personally I would probably force one color whether viewed or not.

 

That dark color wouldn't work for me.

 

579b30d12f7fe_Reports.jpg

Edited by Happy2Play
Link to comment
Share on other sites

Nickbert
For my taste, the buttons were a bit too colorful for a 2-color-theme.
 
But it is only a suggestion for Ben Z.
If he does't want to implement it, I can still do it manually :)

 

You're right. It was a bit too dark ...

Better or do you have other suggestions?

 

579b3702549e5_29072016125350.png

Link to comment
Share on other sites

Happy2Play

That does look better. 
 
As for the Check Mark in the center of your screen in that screenshot, here is the fix for if. 
 

/*Fix Reports Checkmarks*/
#tblReport .ui-btn-icon-notext:after, .ui-btn-icon-top:after, .ui-btn-icon-bottom:after, ul[data-role="listview"] a + a:after {
    left: auto;
    margin-left: 11px;
}
#tblReport .ui-btn-icon-notext:after, .ui-btn-icon-left:after, .ui-btn-icon-right:after, ul[data-role="listview"] a + a:after {
    top: auto;
    margin-top: auto;
}

I guess this could be added as a misc fix, to me it is a reported known bug.

Link to comment
Share on other sites

Ben Z

@@Nickbert @@Happy2Play

 

It's interesting how ...

/* Visited report links */
.ui-body-b a:visited {
color: #404040; }

doesn't do anything for me. Anyway, I kinda prefer not to highlight visited elements. I think it's not a must, isn't it?

 

As for the home page media buttons, I always thought about adding different color shades something like this...

579bb8156397e_927a8dbe557d11e6828a572cc1

 

I don't know if it's a good idea. I don't even use them myself. I prefer artworks.

 

I should share the base file I use. I'm using sass to generate all the color themes with it now, so you could pull requests on it.

Link to comment
Share on other sites

Happy2Play

It's interesting how ...

With pull request that could make changes not everyone will want.

 

Anyway, I kinda prefer not to highlight visited elements. I think it's not a must, isn't it?

I set mine to one color so viewed and unviewed remain the same.  Might think about a softer color though.

 

I don't know if it's a good idea. I don't even use them myself. I prefer artworks

Same here, to me having them all one color just doesn't look very good.  But that is just me.

Link to comment
Share on other sites

Ben Z

@@Nickbert

 

I'm not sure if I should use the urls for icons? Should I implement it directly in the theme or as option? Maybe people would prefer having those files locally? I don't know...

 

EDIT: You can see there are still a default green icon under this one.

579bd727a42dd_icon.png

Edited by Ben Z
Link to comment
Share on other sites

Ben Z

OP edited:

  • You no longer need to worry about logos and icons. It is now implemented automatically with the theme.
  • Like 2
Link to comment
Share on other sites

mediacowboy

I am seeing a strange issue when using the gray theme. I have what looks like the green from the emby logo showing behind the gray logo from your theme. I had to zoom in to verify.

 

579d075de771a_greenborder.png

Link to comment
Share on other sites

Happy2Play

@@Ben Z

 

Why not this instead?

.lnkMediaFolder div:first-child {background-image: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/BLUE/mblogoicon.png) !important;}
Link to comment
Share on other sites

Ben Z

 

@@Ben Z

 

Why not this instead?

.lnkMediaFolder div:first-child {background-image: url(https://cdn.rawgit.com/BenZuser/Emby-Dark-Themes-Resources/master/images/logos-and-icons/BLUE/mblogoicon.png) !important;}

 

Because I always forget !important  :P

Link to comment
Share on other sites

Happy2Play

No your way you get double image as shown before.  My way you are switching at "background-image" not overwriting with "content".  My way listed above works in all browsers also.

  • Like 1
Link to comment
Share on other sites

mediacowboy

Noticed this today on the web interface. It looks like the progress bar on item is green. Is this by design or just something that got missed. I am using the red theme is how I caught it.

 

579ec6b8b54a3_progressbar.png

Link to comment
Share on other sites

Ben Z

Noticed this today on the web interface. It looks like the progress bar on item is green. Is this by design or just something that got missed. I am using the red theme is how I caught it.

 

579ec6b8b54a3_progressbar.png

 

I don't have this problem. You're probably not using google chrome, isn't it? I know each browser have specific elements for progress bars. I presume it's broken for let's say firefox I will guess.

Edited by Ben Z
Link to comment
Share on other sites

in the latest beta they are no longer progress elements, so it will be more consistent now.

  • Like 1
Link to comment
Share on other sites

Happy2Play

in the latest beta they are no longer progress elements, so it will be more consistent now.

@Luke  I was still forced to use this for some areas since the indicators are in 5 areas (Home screen, Dashboard, Library, and Scheduled Tasks and of course Itemdetails).  @@Ben Z it is on the beta and I will submit a pull request later after more testing.

/* Chrome Progress bar */
progress::-webkit-progress-value {background: #4285F4 !important; }

/* Firefox Progress bar */
progress::-moz-progress-bar {background: #4285F4 !important; }

.itemProgressBarForeground {background-color: #4285F4 !important; }
Link to comment
Share on other sites

mediacowboy

@@Happy2Play, I run development I will copy to the bottom and test. @@Luke, I will check what all screens this is on still. I am running dev 3.1.6056.25389.

Link to comment
Share on other sites

mediacowboy

I don't have this problem. You're probably not using google chrome, isn't it? I know each browser have specific elements for progress bars. I presume it's broken for let's say firefox I will guess.

I am on chrome. Maybe I need to do a crtl+f5. Would this be cached?

Link to comment
Share on other sites

mediacowboy

@@Happy2Play & @@Ben Z,

After I added the following code with the correct color code. Everything is red.

progress::-webkit-progress-value {background: #E81123 !important; }

/* Firefox Progress bar */
progress::-moz-progress-bar {background: #E81123 !important; }

.itemProgressBarForeground {background-color: #E81123 !important; }

Below is all the branding I am running.

/*Dark Theme with Red Highlights*/
@import url('https://rawgit.com/BenZuser/Emby-Web-Dark-Themes-CSS/master/RED%20-%20Dark

%20Theme.css'); 

/*----------------------------------------------------------------------*/

/*Frontend Tweaks*/
/*Center Card Footer*/
.innerCardFooter {width: 100%; text-align: center !important;}

/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {font-size: 150%; transform: rotate(45deg);}
.card .playedIndicator, .card .countIndicator {width: 75px; height: 25px; border-radius: 0%; 

transform: rotate(-45deg); border-style: solid; border-width: 1px; border-color: rgba(255, 255, 

255, 0.5); display: flex; align-items: center; justify-content: center;}
.card .indicators {right: initial !important; top: -1px !important; left: 61px;}

/*Move Overlay Button to top right*/
.cardOverlayButton {bottom: initial !important; top: 5px !important;}

/*Fixed Navigation Arrows In Place*/
.lnkSibling {position: fixed; top: 25%;}

/*Backend Fixes*/
/*Fix Dasboard Menu Bar Showing Progress Bars*/
.dashboardDocument .viewMenuBar {z-index: 1000;}

/*Reports Filter Menu Fix*/
.ui-panel-inner {position: static !important; background: #222;}
.ui-panel.ui-panel-open {position: absolute !important;}
.ui-body-b.ui-panel {height: initial; min-height: initial; bottom: initial;}

/*----------------------------------------------------------------------*/

/*Emby Theater Inspired Web Client CSS*/
@import url('https://rawgit.com/Nickbert7/Emby-CSS/master/Layout/Theatre.css');

/*----------------------------------------------------------------------*/
/*Manual*/
progress::-webkit-progress-value {background: #E81123 !important; }

/* Firefox Progress bar */
progress::-moz-progress-bar {background: #E81123 !important; }

.itemProgressBarForeground {background-color: #E81123 !important; }
Link to comment
Share on other sites

mediacowboy

@@Luke,

 I am still seeing the progress  bar on the following screen's:

Episode Screen

Season Screen

TV

Home Screen

Edited by mediacowboy
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...