Jump to content

Emby Theater Inspired Web Client CSS


bfir3

Recommended Posts

bfir3

So I've been working on updating my server CSS to make my web client feel more like Emby Theater. I'm not done with everything quite yet, and still have some final layout decisions to make. If there's interest I can upload the CSS for it -- and I can leave out the dark theme CSS if desired. Let me know what you guys think! The changes are only showing for browsers with >1450px resolution and reverts back to the regular style in smaller browser windows.

 

Home page

 

KfUNDy8.png

 

Resume

 

Mcibojw.png

 

Latest Items

 

0rg2GRd.png

 

Next Up

 

f7cL5HM.png

 

Movie Details

 

nvFL9zq.png

 

TV Show Details

 

EBvKtTi.png

7S43ACN.png

5klzmYo.png

 

TV Season Details

pOgWpjx.png

FnidLW8.png

 

TV Episode Details

 

qUEbXAS.png

r4bw3gt.png

  • Like 11
Link to comment
Share on other sites

That's very creative.

 

Why not just use the web version of Theater though?  Just due to not everything being finished yet?

Link to comment
Share on other sites

shorty1483

Waiting to try out the custom CSS ;) @@bfir3 Well done!

Edited by shorty1483
Link to comment
Share on other sites

bfir3

Alright guys, I'm going to post the CSS snippet below that will change the look for browser width's > 1450px. You can simply change the first line min-width to something else if you desire. Let me know if there's any problems (I do have other CSS active that may be affecting the style that I didn't include correctly). My screenshots are from Emby server 3.0.5930.

 

As for why I don't simply use Emby Theater, well, the easiest answer is that I'm not currently an Emby premiere subscriber, so I can't playback any media from there. But even still, the browsing experience in Emby Theater still has some strides to make before I would consider using it over the web client or Kodi. I've recently downgraded my Emby server version to one that gives me the best performances and my web client experience in Chrome is so snappy and responsive, everything loads instantly from cache without any problems. Until I upgrade I can't use the new Emby Theater anyway because it's not compatible with my server version, but it's not worth upgrading to be able to use it as the new web client is less responsive than what I currently use.

 

Here's the code: (the CSS isn't very clean, I did it over the course of a few hours of tv episodes in chrome inspector)

@[member="Media"] (min-width: 1450px) {
div#itemDetailPage {
    width: 100%;
    float: left;
    padding: 0px !important;
}
div#itemBackdrop {
position: absolute;
}
.detailPageContent {
    position: relative;
    top: 50px;
    width: auto;
}
.detailImageContainer {
    float: left;
    margin-top: 150px;
    margin-left: 50px;
    position: relative;
}
div.detailNameContainer>div.desktopDetails {
    margin-top: 25px !important;
}
div.detailNameContainer {
    margin-top: 20px;
}
div.primaryDetailsContainer {
    position: relative;
    left: 20px;
    float: left;
    top: 0px;
    width: auto !important;
    z-index: 1;
}
.inlineItemName {
    font-size: 32px !important;
}
.inlineItemName {
    color: #E4E4E4;
}
.starRating, .starRatingValue {
top: -4px !important;
}
h2.tagline {
    color: #54F054;
}
p.itemGenres {
    position: relative;
    min-height: 15px;
    font-size: 20px;
    top: 0px;
}
div.detailButtonsContainer {
    ;
    font-size: 120%;
    top: 0px;
    z-index: 1000;
}
div#itemDetailPage div.ui-content[data-role='content'] {
    padding-top: 0;
    top: 320px;
    z-index: 0;
    clear: both;
    position: absolute;
    width: calc(100% - 80px);
    font-size: 20px;
}
.detailPageContent {
position: relative;
max-width: none;
}
.portraitDetailImageContainer img {
    width: 200px;
}
div.detailNameContainer {
    margin-top: 50px !important;
    height: auto !important;
}
div.detailNameContainer>div:first-child {
    max-width: 1200px;
    min-width: 500px;
    height: 140px;
    overflow: hidden;
    margin-top: -45px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.detailNameContainer .desktopDetails {
    font-size: 30px;
}
.primaryDetailsContainer>.desktopDetails {
    padding-top: 0px !important;
}
.detailPageContent>.detailSection:first-child {
    margin-left: 522px;
    min-height: 230px;
    order: -3;
}
.primaryDetailsContainer>.desktopDetails {
    padding-top: 0px !important;  
}
.nextUpSection.detailSection {
    margin-left: 522px;
    min-height: 300px;
    margin-top: -60px;
    order: -2;
}
.tileContent {
    position: absolute !important;
    margin-left: 3px;
    text-align: left;
    vertical-align: top;
    overflow: hidden;
    z-index: 1000;
    left: 0px;
    bottom: 10px;
    font-size: 14px;
}
#castContent a.tileItem.smallPosterTileItem {
    width: 214px !important;
    margin: 0;
}
.smallPosterTileItem .tileImage {
    width: 100% !important;
    height: 330px !important;
    background-size: cover;
}
.smallPosterTileItem .tileContent {
    background: rgba(0,0,0,0.5);
    width: 80%;
    margin-left: 0px;
    padding: 10px;
}
.tileItem p {
    margin: 0 !important;
}
.tileItem p:first-child {
    color: #2BC253;
    font-weight: bold;
    font-size: 18px;
}
.ui-content>.detailPageContent {
    margin: 0px 30px 0px 30px;
    display: flex;
    flex-direction: column;
}
.btnPlay.detailFloatingButton {
    top: 275px;
    z-index: 1001;
    left: 1100px;
    position: absolute;
}
#childrenContent .card {
    width: 16.6%;
}
div#childrenCollapsible {
    display: block !important;
}
div#childrenCollapsible.hide {
    visibility: hidden;
}
div#castContent {
    display: flex;
    align-items: flex-end;
    flex-wrap: wrap;
}

paper-button.more.morePeople {
    margin-bottom: 11px;
}
.portraitDetailImageContainer img {
    width: 480px;
}
.nextUpSection.detailSection.hide {
    display: block !important;
    visibility: hidden;
}
a#lnkNextItem,a#lnkPreviousItem {
    z-index: 1000;
}
.thumbDetailImageContainer img, .squareDetailImageContainer img {
    width: 478px;
}
.collectionItems .detailSection:first-child{
    margin-top: 360px;
}
#mediaInfoContent div:last-child {
    max-width: none !important;
}
.portraitCard {
    width: 14.2% !important;
}
.backdropCard {
    width: 25% !important;
}
div#scenesCollapsible {
    order: -1;
}
.listPaging {
    width: 100%;
}
.cardContent .cardFooter {
    left: 1px !important;
}
.nowPlayingBar, .nowPlayingImage img {
    min-height: 80px;
}
.criticRating {
    top: -4px !important;
}
.starRatingValue + .rottentomatoesicon {
    top: -4px !important;
}
div#criticReviewsCollapsible {
    order: -1;
    margin-top: -300px;
    margin-left: 520px;
}
}

EDIT: I just remembered I also had to edit some JS files in order to improve the render quality for posters, episode images, etc. I'll have to revisit my code to see what I changed where if people are having problems with low resolution images, let me know!

Edited by bfir3
  • Like 1
Link to comment
Share on other sites

shorty1483

Unfortunately, the CSS doesn't change anything on my WebClient (latest Dev Server) in Chrome and Firefox.

Link to comment
Share on other sites

bfir3

Unfortunately, the CSS doesn't change anything on my WebClient (latest Dev Server) in Chrome and Firefox.

 

Is your browser resolution less than 1450px wide? The sizes I've set really only look good on resolutions above that. You can probably get away with lowering the min-width at the top to maybe 1300px but I'm not sure how much lower than that will still look OK. If you are >1450px and it's still not working, then I'm not sure. Just change the code at the top here:

@[member="Media"] (min-width: 1450px) {

I might have not grabbed the right CSS although I thought that I did. I'm almost done running my chapter image extraction on server 3.0.5782.0, and once that is done I'm gonna upgrade my newest server installation to dev to test the performance improvements. When I do that I will test the CSS and get back to you if it's not working.

Edited by bfir3
Link to comment
Share on other sites

shorty1483

Is your browser resolution less than 1450px wide? The sizes I've set really only look good on resolutions above that. You can probably get away with lowering the min-width at the top to maybe 1300px but I'm not sure how much lower than that will still look OK. If you are >1450px and it's still not working, then I'm not sure. Just change the code at the top here:

@[member="Media"] (min-width: 1450px) {

I might have not grabbed the right CSS although I thought that I did. I'm almost done running my chapter image extraction on server 3.0.5782.0, and once that is done I'm gonna upgrade my newest server installation to dev to test the performance improvements. When I do that I will test the CSS and get back to you if it's not working.

 

 

Browser window width: 1680 Browser window height: 925

 

I already checked lowering the CSS value, but it doesn't do anything, unfortunately...

Link to comment
Share on other sites

dcrdev

That's very creative.

 

Why not just use the web version of Theater though?  Just due to not everything being finished yet?

 

I imagine because there are people (like myself) who don't want to use their server via a third party address. I've got emby running on a subdomain via a reverse proxy, so it really makes no sense to use emby connect or emby theatre in this fashion - why not make emby theatre the default frontend for the server itself?

Link to comment
Share on other sites

bfir3

Well I'm going to repost the CSS code here because I assume I accidentally entered in something that is causing an error in my last post, I don't know why no changes would show at all otherwise.

 

Here's the corrected CSS for new server releases: https://paste2.org/nXMcvJgz Please confirm that it works.

 

@dcrdev: That's another big reason I don't use it. Like you, I run emby on a reverse proxy on its separate domain. Don't wanna lose that.

  • Like 1
Link to comment
Share on other sites

Blueeyiz702

Just tried corrected Css and it still not working.

Link to comment
Share on other sites

bfir3

:( I'll have to bring my other server installation online to see what I'm missing. I will comb through the code one more time to see if I spot another error.

 

edit: No errors that I could find, I just went to my server install and copied the CSS out of the branding.xml again. I noticed that it looks different from what I posted here before so I might have gotten mixed up the first time I posted. In any case, here's the CSS I pulled straight from the branding:

 

https://paste2.org/NsbMOhJD

 

Please let it work for you guys!

Edited by bfir3
  • Like 1
Link to comment
Share on other sites

Blueeyiz702

just tried again with Css straight from branding,and everything is king size in tv series episode and the other parts dont wotk, and 6 th line of css is padding supposed to be 200000 pix?572ef5f9cf8bf_screenshotlocalhost8096201

Link to comment
Share on other sites

bfir3

No that padding is commented out on the 6th line. The first time I posted the CSS I removed all the lines that were commented out manually. This time I left them in to avoid introducing an error. As for the details appearing over the poster, I reviewed the CSS and noticed that the code from the branding used > for the >, so I've replaced those now and the CSS should be functional...famous last words. hahah

 

https://paste2.org/eYUXA6kf

  • Like 1
Link to comment
Share on other sites

Happy2Play

No that padding is commented out on the 6th line. The first time I posted the CSS I removed all the lines that were commented out manually. This time I left them in to avoid introducing an error. As for the details appearing over the poster, I reviewed the CSS and noticed that the code from the branding used > for the >, so I've replaced those now and the CSS should be functional...famous last words. hahah

 

https://paste2.org/eYUXA6kf

This last version works on my test machine.

Link to comment
Share on other sites

Happy2Play

Comparison for movie

 

Default

572fb8d5de365_default.jpg

 

Custom

572fb844d45f7_custom.jpg

Edited by Happy2Play
Link to comment
Share on other sites

shorty1483

Working well here too now @@bfir3 Suggestion: The episode images are still small in a season page.

 

 

 

BTW: I'm trying and trying but I don't get it to work :D . Do you have a short CSS snippet for just having the large poster beside the plot without the touching everything else (size)?

Edited by shorty1483
Link to comment
Share on other sites

Happy2Play

@@shorty1483, looks like you can adjust it here.

#childrenContent .card {
    width: 16.6%;
}

57310d8f5daec_seasons.jpg

  • Like 1
Link to comment
Share on other sites

shorty1483

I incorporated @@bfir3 's theme with the dark theme originally created by @@Ben Z with some modifications by myself. All props to the two guys!

 

I know the code needs some cleanup in medium term...unfortunately I don't have time to code all the doubled stuff out atm. But on my 1680x1050 Display, it looks nice for now.

Perhaps someone is willing and has fun to bring some perfection into it or port it with fitting dimensions to tablet browser css sizes (e.g. 1024px width)  :D

GREEN - Dark Theme Theater.txt

Edited by shorty1483
  • Like 1
Link to comment
Share on other sites

bfir3

Just wanted to show off the latest changes I've made for my server. One picture will take care of everything:

 

f7oz3dX.png

 

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.

  • Like 4
Link to comment
Share on other sites

mediacowboy

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.

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