Smoke in the Night

[mediacowboy 436]

I have modified and merged together changes from other member and some of my own work to make this. Thanks to @@bigjohn & @@Koleckai Silvestri.

 

If you decide to use this theme and have any issue's or question's please fill free to ask or say something and I will see what I can do.

/* Smoke in the Night */

/*Enable vertical scrolling on the custom css text box*/
#txtCustomCss{
   overflow-y:scroll !important;
   height: 200px !important;
}

/*Remove 'Missing Trailer' icon in metadata editor*/
img[src='css/images/editor/missingtrailer.png'] {
   display:none;
}

/* Removes Blue Edit Buttons */
.accentButton {
   display: none;
}

/* Dark Dashboard theme */
.ui-page-theme-a {
  background-color: #2a2a2a !important;
  border-color: #454545;
  color: #ccc !important;
}
.ui-page-theme-a .ui-body-inherit{
  background-color:#252525;
  border-color:#1d1d1d;
  color: #ccc !important;
}
.ui-page-theme-a .content-secondary {
  background: #2a2a2a;
}
.ui-page-theme-a .ui-btn {
  background-color: #333 !important;
  border-color: #1f1f1f !important;
  color: #ccc !important;
}
.ui-page-theme-a .ui-btn:hover {
  background-color: #373737 !important;
  border-color: #1f1f1f !important;
  color: #ccc !important;
}
.ui-page-theme-a .ui-btn.ui-btn-active {
  background-color: #38c !important;
  border-color: #38c !important;
  color: #ccc !important;
}
.ui-page-theme-a .selectedSidebarLink {
  background-color: #474747 !important;
}
.sidebarLink:hover {
  background-color: #373737;
}
.ui-page-theme-a .ui-bar-inherit {
  border-color: #555;
  background-color: #555;
  color: #ccc !important;
}
.ui-page-theme-a .sidebarLinkIcon {
  color: #ccc !important;
}
.newsItem {
  border-bottom: 1px solid #555;
}
.ui-page-theme-a .detailSectionHeader {
  background-color: #333 !important;
  border-color: #1f1f1f !important;
  color: #ccc;
}
.ui-body-a {
  background-color: #111;
  color: #ccc !important;
}
.ui-body-a .ui-btn {
  border: 1px solid #555 !important;
  background-color: #333 !important;
  color: #ccc !important;
}
.ui-body-a .ui-btn:hover {
  border: 1px solid #555 !important;
  background-color: #373737 !important;
  color: #ccc !important;
}


.activeSession:not(.playingSession) .sessionNowPlayingInnerContent {
  background-color: #252525;
  color: #ccc;
  border: 1px solid #555;
}
.warningFieldDescription {
  color: #000;
}
.remoteImageDetails{
  background:#333;
}

.ui-overlay-a {
  background-color: #252525;
}
#fldConnectInfo {
  background: #333 !important;
}

.libraryViewNav .ui-btn-active {
  border-bottom-color: #ccc;
}
.libraryViewNav a:not(.ui-btn-active):hover {
color: #454545 !important;
}
.ui-page-theme-b a:visited, html .ui-bar-b a:visited, html .ui-body-b a:visited, html body .ui-group-theme-b a:visited {
  color: #ccc !important;
}
.ui-page-theme-b a:hover, html .ui-bar-b a:hover, html .ui-body-b a:hover, html body .ui-group-theme-b a:hover {
  color: #454545;
}

/*Change 'Played' icon background to red for better visual separation */
.ui-icon-check.ui-btn-icon-notext {
  display: block;
  position: absolute;
  top: -1px;
  text-align: center;
  vertical-align: middle;
  width: 25px;
  height: 20px;
  padding-top: 3px;
  border-radius: 50%;
  color: #ccc;
  background: rgb(153,0,0);
}

/* Changes the My Media(Buttons) to match the theme and remove the color*/
.smallBackdropCard .cardText {
border-radius:4px;
background-color: #111;
color: #ccc !important;
border: 2px solid rgba(204,204,204,0.75);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(204,204,204,0.75);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(204,204,204,.6);
}

.visualCardBox {
border-radius:4px;
background-color: #111;
color: #ccc !important;
border: 2px solid rgba(204,204,204,0.75);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(204,204,204,0.75);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(204,204,204,.6);
}

.sidebarLinkText{
color: #ccc !important;
}

.libraryMenuButtonText {
color: #ccc !important;
}

.headerButton {
color: #ccc !important;
}

.cardImage{
background-position: center center !important;
}

.paper-input {
color: #ccc !important;
}

*Updated to make it match more of then theme. Also had to adjust a few things to make it work with the newer server. If you want the old please download the attached file.

Smoke in the Night V1.txt

Edited July 27, 2015 by mediacowboy

[mediacowboy 436]

Here are some screen snipping's.

 

First is the main screen you see when select media. It shows the my buttons change the red status indicator and the reason I call it smoke in the night.

 

Second is the dashboard and how I removed all the color to keep it constant. This also shows the dark theme to the dashboard.

 

Also had to fix the plugins, users, and other pages as they were showing a white background. So I made them look like the button's.

Edited May 17, 2015 by mediacowboy

[bigjohn 590]

Looks good man.

[mediacowboy 436]

Thanks

[Koleckai Silvestri 1084]

Nice changes.

[Happy2Play 4250]

/*Change 'Played' icon background to red for better visual separation */ 
.ui-icon-check.ui-btn-icon-notext

How can I reverse this, making un-played red while leaving played green?

[mediacowboy 436]

Give this a try and let me know.

.ui-icon-check.ui-btn-icon-notext {
  display: block;
  position: absolute;
  top: -1px;
  text-align: center;
  vertical-align: middle;
  width: 25px;
  height: 20px;
  padding-top: 3px;
  border-radius: 50%;
  color: #fff;
  background: rgba(82,181,75,.8);
}

.playedIndicator {
  display: block;
  position: absolute;
  top: -1px;
  text-align: center;
  vertical-align: middle;
  width: 25px;
  height: 20px;
  padding-top: 3px;
  border-radius: 50%;
  color: #fff;
  background: rgb(153,0,0);
}

[Happy2Play 4250]

 

/*Change 'Played' icon background to red for better visual separation */
.ui-icon-check.ui-btn-icon-notext

 

Only side effect of this is you loose the movies "Select" button for creating playlist/grouping/collections.

[lokiii 0]

I'm trying your theme and I have to say it's pretty great ! =)

Just one thing: my left menu under the administration panel is written in black on black (but the emby menu with folders, etc... is white)

Do you an idea ?

Thanks !

[mediacowboy 436]

@@lokiii, here is the fix just add to the bottom. I am trying to figure out to change the icons back to white but this adjust the text. Once I get everything fixed I will update the main post.

.sidebarLinkText{
color: #fff;
}

[lokiii 0]

nice, thanks a lot =)

[mediacowboy 436]

Not a problem

[Blueeyiz702 197]

 

I have modified and merged together changes from other member and some of my own work to make this. Thanks to @@bigjohn & @@Koleckai Silvestri.

 

If you decide to use this theme and have any issue's or question's please fill free to ask or say something and I will see what I can do.

/* Smoke in the Night */

/*Enable vertical scrolling on the custom css text box*/
#txtCustomCss{
   overflow-y:scroll;
}

/*Remove 'Missing Trailer' icon in metadata editor*/
img[src='css/images/editor/missingtrailer.png'] {
   display:none;
}

/* Removes Blue Edit Buttons */
.accentButton {
   display: none;
}

/* Dark Dashboard theme */
.ui-page-theme-a {
  background-color: #252525;
  border-color: #454545;
  color: #fff;
}
.ui-page-theme-a .ui-body-inherit{
  background-color:#2a2a2a;
  border-color:#1d1d1d;
  color: #fff;
}
.ui-page-theme-a .content-secondary {
  background: #2a2a2a;
}
.ui-page-theme-a .ui-btn {
  background-color: #333 !important;
  border-color: #1f1f1f !important;
  color: #fff !important;
}
.ui-page-theme-a .ui-btn:hover {
  background-color: #373737 !important;
  border-color: #1f1f1f !important;
  color: #fff !important;
}
.ui-page-theme-a .ui-btn.ui-btn-active {
  background-color: #38c !important;
  border-color: #38c !important;
  color: #fff !important;
}
.ui-page-theme-a .selectedSidebarLink {
  background-color: #474747 !important;
}
.sidebarLink:hover {
  background-color: #373737;
}
.ui-page-theme-a .ui-bar-inherit {
  border-color: #555;
  background-color: #555;
  color: #fff;
}
.ui-page-theme-a .sidebarLinkIcon {
  color: #fff;
}
.newsItem {
  border-bottom: 1px solid #555;
}
.ui-page-theme-a .detailSectionHeader {
  background-color: #333 !important;
  border-color: #1f1f1f !important;
  color: #fff;
}
.ui-body-a {
  background-color: #111;
  color: #fff;
}
.ui-body-a .ui-btn {
  border: 1px solid #555 !important;
  background-color: #333 !important;
  color: #fff !important;
}
.ui-body-a .ui-btn:hover {
  border: 1px solid #555 !important;
  background-color: #373737 !important;
  color: #fff !important;
}


.activeSession:not(.playingSession) .sessionNowPlayingInnerContent {
  background-color: #252525;
  color: #fff;
  border: 1px solid #555;
}
.warningFieldDescription {
  color: #000;
}
.remoteImageDetails{
  background:#333;
}

.ui-overlay-a {
  background-color: #252525;
}
#fldConnectInfo {
  background: #333 !important;
}

.libraryViewNav .ui-btn-active {
  border-bottom-color: #fff;
}
.libraryViewNav a:not(.ui-btn-active):hover {
color: #454545 !important;
}
.ui-page-theme-b a:visited, html .ui-bar-b a:visited, html .ui-body-b a:visited, html body .ui-group-theme-b a:visited {
  color: #454545;
}
.ui-page-theme-b a:hover, html .ui-bar-b a:hover, html .ui-body-b a:hover, html body .ui-group-theme-b a:hover {
  color: #454545;
}

/*Sets the Icon's in the Dashboard to White*/
.sidebarLinkIcon:before{
   color: #fff;
}

/*Change 'Played' icon background to red for better visual separation */
.ui-icon-check.ui-btn-icon-notext {
  display: block;
  position: absolute;
  top: -1px;
  text-align: center;
  vertical-align: middle;
  width: 25px;
  height: 20px;
  padding-top: 3px;
  border-radius: 50%;
  color: #fff;
  background: rgb(153,0,0);
}

/* Changes the My Media(Buttons) to match the theme and remove the color*/
.smallBackdropCard .cardText {
border-radius:4px;
background-color: #111;
color: #fff;
border: 2px solid rgba(255,255,255,0.75);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,255,255,.6);
}

.visualCardBox {
border-radius:4px;
background-color: #111;
color: #fff;
border: 2px solid rgba(255,255,255,0.75);
  -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,255,255,0.75);
  box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(255,255,255,.6);
}

thats wierd,i just copy and pasted this to my css,and pow,nothing changed?what the hay happen,any ideas mediacowboy why this would happen?

[mediacowboy 436]

Did you refresh the page? What part are you expecting to change?

Edited July 23, 2015 by mediacowboy

[Blueeyiz702 197]

Did you refresh the page? What part are you expecting to change?

yes refreshed page and restarted and the sever side didnt change at all?

[mediacowboy 436]

I don't know then. I have re done my server s few times and it works. Can you copy your custom css and paste it here or upload a text and I'll take a look.

[Blueeyiz702 197]

i got it to work mediacowboy,i had left out a part. thanks

[mediacowboy 436]

No problem glad all is working.

[Blueeyiz702 197]

Your theme,with disparity icons,good stuff.