Emby Theater Inspired Web Client CSS

[Lawrage 13]

@@bfir3 this is looking really good.

 

Any chance at all this will work if we have the latest version of Server?

[Happy2Play 8241]

@@bfir3 this is looking really good.

 

Any chance at all this will work if we have the latest version of Server?

 

Shouldn't be any issues since this was created on 3.0.5930 and I have it on a test machine  running 3.1.6001.

[bennymac 47]

mini-web player, so cool.

[bfir3 113]

I like the mini player maybe you could push that to the main server on github. I have dual screens so I normally play a video on one and work on the library on the other.

 

I might be able to do that. I'd have to test to ensure that the code works fine with the latest server versions though, but I may get around to it eventually - I will definitely do it if the slowness issues with the latest builds gets resolved.

 

I've been continuing to improve the UI for my server to be a bit more to my liking. The latest "major" change I've made is to the Season details page, specifically the episode listing of the season. I always wanted to be able to see a bit more info about each episode form the Seasons page so I modified the JS to get the plot overview, premiere date, runtime, as well as information about video quality and subtitles. I only show the plot when the mouse is over an individual episode. Here's what it looks like right now:

 

 

Update: Just inverted the episode container background so that all episode backgrounds are transparent by default, and the selected one shows with a darker overlay on the background like this:

 

Edited June 25, 2016 by bfir3

[arrbee99 1551]

Am just wondering if the download in post no 23 is the latest version as I get this for the last few Dev versions.....

 

 

 

Also get this overlay effect sometimes (with the SYNC etc commands) and the arrow boxes are a bit u/s (that grey thing below the Hamburger in the top left) ...

 

 

Just thought I'd enquire, though am sure you guys are busy

[Nickbert 7]

For the white admin-menue in the latest DEV/BETA you can use:

 

.adminDrawer {

    background: #000 !important;

}

[bfir3 113]

@arrbee99: I wish I could help you but I'm not running the latest Emby server, and the CSS for my server is completely different. I've continued to improve and mod my server even more, and I don't really feel like spending my time installing a new Emby server and updating my CSS just yet. I also spent a lot of time ensuring there's no problems viewing the web UI at any resolution so it looks slick on mobile, tablets, laptops, and desktops alike. I've added so much CSS and modified so much JS at this point that I'm really not looking forward to doing an eventual upgrade, lol. 

Edited June 30, 2016 by bfir3

[arrbee99 1551]

@@Nickbert Thanks very much, works well.

 

@@bfir3 Ah well, just thought I'd mention it. Seeing as the last time I programmed anything it was in Fortran 30 years ago I don't think I could help very much.

[shorty1483 450]

@@arrbee99 the css from the post mentioned is not for actual server version. Additionally I gave up using total css overhauls. Sorry

 

Gesendet von meinem HTC One_M8 mit Tapatalk

[Nickbert 7]

The admin dashboard seems to be broken again:

 

Use:

.adminDrawer .scrollContainer  {
    background: #000 !important;
}
.collapseContent {
    background-color: #202020 !important;
}   

instead of

.adminDrawer {
    background: #000 !important;
}

[Blueeyiz702 216]

 

The admin dashboard seems to be broken again:

 

Use:

.adminDrawer .scrollContainer  {
    background: #000 !important;
}
.collapseContent {
    background-color: #202020 !important;
}   

instead of

.adminDrawer {
    background: #000 !important;
}

 

Worked perfect,thank you,

[Nickbert 7]

I removed the colored part fo the css so you can combine it with a theme from http://emby.media/community/index.php?/topic/28743-dark-theme-and-colored-highlights/page-1

 

Just import the color .css and the layout .css

@import url('https://rawgit.com/BenZuser/Emby-Web-Dark-Themes-CSS/master/BLUE%20-%20Dark%20Theme.css');
@import url('https://rawgit.com/Nickbert7/Emby-CSS/master/Layout/Theatre.css');

[Blueeyiz702 216]

what css do you use to get rid of the green episodes button and the black play buttons.

[Psy 6]

I finally made my own version inspired from emby theater, you can see here,

http://emby.media/community/index.php?/topic/38364-netflix-inspiration-web-client-css-in-progress/

Edited September 3, 2016 by Psy

[shorty1483 450]

Don't want to open another thread so I will hijack this @@bfir3 since it fits in here 

 

Made some small modifications to just the detail page, perhaps anyone can use it. tested against my beta server.

/*-------------------------Modified Details--------------------------------*/

h1.itemName {
    font-size: 300% !important;
}
div.detailSectionContent {
font-size: 130% !important;
}
div.itemMiscInfo.itemMiscInfo-primary {
font-size: 130% !important;
}
div.mainDetailButtons {
font-size: 130% !important;
}
h1.tagline {
    font-size: 1.1em !important;
}
p#awardSummary {
font-size: 130% !important;
}
div#criticRatingSummary.paperlist {
font-size: 130% !important;
}
div#mediaInfoContent.mediaInfoContent {
font-size: 130% !important;
}

.detailImageContainer {
    width: 400px !important;
    margin-top: -0.4em !important;
}
.itemDetailImage {
    margin-top: 2em !important;
}
.itemDetailImage.loaded {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
}
.detailLogo {
    top: 25% !important;
    right: 5% !important;
}

[Luke 37004]

Bravo !

[adamstewiegreen 147]

 

Replaced the Title on the Series and Movies pages with the item Logo, in addition to adding the clearArt on the right side of the details/play button. Also modified a few lines of one of the JS files to add a mini-web player function so that the web client can be browsed normally while playing a video in the bottom right corner of the screen. I can provide the code and files I modified if they are desired, but as I'm using an older server version I cannot guarantee 100% compatibility. Also, if people are having issues with image quality for the larger image items with the new CSS, I can provide the JS that I modified on my server to improve the quality. However, as is the case with all JS modifications, you will have to re-apply them after any update.

Hey @@bfir3 could you post both those modifications?  I'm stretching my posters right now and even though it's not much, the decline in quality is still noticeable.

 

thanks

[CyberPoison 32]

On 1/25/2017 at 5:05 PM, shorty1483 said:

Don't want to open another thread so I will hijack this @@bfir3 since it fits in here 

 

Made some small modifications to just the detail page, perhaps anyone can use it. tested against my beta server.

/*-------------------------Modified Details--------------------------------*/

h1.itemName {
    font-size: 300% !important;
}
div.detailSectionContent {
font-size: 130% !important;
}
div.itemMiscInfo.itemMiscInfo-primary {
font-size: 130% !important;
}
div.mainDetailButtons {
font-size: 130% !important;
}
h1.tagline {
    font-size: 1.1em !important;
}
p#awardSummary {
font-size: 130% !important;
}
div#criticRatingSummary.paperlist {
font-size: 130% !important;
}
div#mediaInfoContent.mediaInfoContent {
font-size: 130% !important;
}

.detailImageContainer {
    width: 400px !important;
    margin-top: -0.4em !important;
}
.itemDetailImage {
    margin-top: 2em !important;
}
.itemDetailImage.loaded {
    -moz-box-shadow: none !important;
    -webkit-box-shadow: none !important;
    box-shadow: none !important;
    border: none !important;
}
.detailLogo {
    top: 25% !important;
    right: 5% !important;
}

How did you get the IMDB,TheMovieDb, .... Links on Movies and TVshows ? 

[Happy2Play 8241]

2 hours ago, CyberPoison said:

How did you get the IMDB,TheMovieDb, .... Links on Movies and TVshows ? 

What do you mean?  They are there but Luke moved them to almost the bottom of the page. There are a couple topics about this.  

4.3.1.0 moved IMDB / TMDB links lower down?  - General/Windows - Emby Community

Have to edit the html page to move them back.