Jump to content

Smoke in the Night


mediacowboy

Recommended Posts

mediacowboy

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 by mediacowboy
  • Like 5
Link to post
Share on other sites
mediacowboy

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.

post-348-0-97449100-1431834583_thumb.png

 

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

post-348-0-49259500-1431834598_thumb.png

 

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.

post-348-0-08008900-1431834606_thumb.png

Edited by mediacowboy
  • Like 1
Link to post
Share on other sites
Happy2Play
/*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?

Link to post
Share on other sites
mediacowboy

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

  • Like 1
Link to post
Share on other sites
Happy2Play

 

/*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.

Link to post
Share on other sites
  • 1 month later...

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 !

Link to post
Share on other sites
mediacowboy

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

 

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?

Link to post
Share on other sites
mediacowboy

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

Edited by mediacowboy
Link to post
Share on other sites
Blueeyiz702

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?

Link to post
Share on other sites
mediacowboy

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.

Link to post
Share on other sites
  • 2 weeks later...

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