Jump to content

TV guide borders bits


arrbee99

Recommended Posts

arrbee99

Am wondering if anyone might know how to tidy this kind of thing up in the TV guide -

1520911064_EmbyTVGuideborders.jpg.82e4bf3ab674ca705f6f47c1fa2b3162.jpg

When sideways scrolling the time bar, as you can see, goes over the top of the channels list instead of underneath. Also the programs do go underneath the channels but I get a bit of it showing through down the left hand side.

This is hopefully the TV guide css bit (the bit in bold is supposed to let a bit of the picture (marine dinosaur thing) through while making it blurry to stop the program names showing through -

/* TV Guide */


/* Add backdrop to guide and centre */
div.tabContent.flex.flex-direction-column.flex-grow.padded-top-page.is-active {background-image: url("https://allhdwallpapers.com/wp-content/uploads/2015/05/Jurassic-World-9.jpg");}
div.tabContent.flex.flex-direction-column.flex-grow.padded-top-page.is-active {background-size: cover; background-position: center; }

/* Make top centre tabs bolder and whiter */
button.emby-tab-button.main-tab-button.emby-button.emby-button-backdropfilter {font-weight:bold; color: white;}

/* Make guide date drop down bolder, whiter and bigger */
span.btnDateText.btnDateText-main {font-weight:bold; color: white; font-size:120%;}

/* Make program cells transparent to show picture */
div.programCellInner {background-color: rgba(0, 0, 0, 0.2);}

/* Make All Channels transparent but blurry to let picture show but mostly hide programs showing through */
div.channelCellInner {background-color: rgba(0, 0, 0, 0.2);}
div.channelCellInner {backdrop-filter: blur(3.0em);}

/* Adjust colour and width of current time indicator */
div.guide-currentTimeIndicatorDot {width: 1px;}
div.guide-currentTimeIndicatorDot {background: var(--myhighlight);}

/* Remove current time indicator arrow */
div.guide-currentTimeIndicatorDot.guideHeader-currentTimeIndicatorDot::before {display: none;}

/* Make program text bigger */
div.guideProgramNameText {font-size: 125% !important;}

/* Make premiere new etc MyColour */
div.mediaInfoProgramAttribute.mediaInfoItem {background-color: var(--mycolour);}
span.premiereTvProgram.guideProgramIndicator {background-color: var(--mycolour);}

/* Add border to program cells - vertical only */
.programCell {
    border-width: 0px 2px 0px 2px !important;
    border-color: rgba(0,0,0,0) !important;
}

/* Make TV guide time slots bolder, whiter and bigger */
div.timeslotHeader {font-weight:bold; color: white; font-size:120%;}

/* Make TV guide rows shallower */
div.virtualScrollItem.epgRow {height: 60px;}

/* Remove channel logo */
div.guideChannelImage {display: none;}

/* Make channel name bolder, whiter and bigger */
div.guideChannelText.secondaryText {font-weight: bold; color: white; font-size: 120% !important;}

/* Make top left empty box wider */
div.channelCell.firstChannelCell {width: 240px !important;}

/* Make channels column wider */
button.channelCell.itemAction {width: 240px !important;}
button.channelCell.itemAction {
    border-width: 0px 2px 0px 2px!important;
    border-color: rgba(0,0,0,0.25) !important;}

/* Re-align Timeline to correct position */
div.guide-currentTimeIndicatorDot.guideEpg-currentTimeIndicatorDot {margin-left: 16.5em;}

/* Remove top portion of Timeline */
div.guide-currentTimeIndicatorDot.guideHeader-currentTimeIndicatorDot {display: none;}

/* Make TV play recording dialog box shallower */
div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {height: 560px;}

/* Make TV play recording dialog box narrower */
div.focuscontainer.dialog.dialog-fixedSize.dialog-small.formDialog.recordingDialog.opened {width: 800px;}


/* TV guide alternate rows */
/*table > tbody > tr:nth-child(even) {background-color:#FDFDDF; }*/
/* table > tbody > tr:nth-child(odd) {background-color:#DFE6FD; }*/

/* You can do some fancy math as well for every third row */
/*li:nth-child(3n - 2) { }*/


/* TV guide alternate rows black but transparent*/
div.virtualScrollItem.epgRow:nth-child(even) {background-color:black; }
div.virtualScrollItem.epgRow:nth-child(even) {background-color: rgba(0, 0, 0, 0.3);}

 

Link to comment
Share on other sites

If you're willing to drop transparency in the channel cells then you won't see anything behind them.

Link to comment
Share on other sites

Happy2Play

@arrbee99 Have you tried adding this?

div.guideEpg-currentTimeIndicatorDot {z-index: 0;}

 

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

arrbee99
24 minutes ago, Luke said:

If you're willing to drop transparency in the channel cells then you won't see anything behind them.

Thanks. It does, just not sure about that column being the only non transparent bit of the guide...

Link to comment
Share on other sites

arrbee99
24 minutes ago, Happy2Play said:

@arrbee99 Have you tried adding this?

div.guideEpg-currentTimeIndicatorDot {z-index: 0;}

 

Thanks. Works well. Makes the line a bit fainter everywhere though. Still, can't have everything...

Link to comment
Share on other sites

arrbee99

Any thoughts maybe about those tiny bits down the left hand side ? They do tend to draw the eye. Don't know if its some kind of border thing ? Also looking closely, maybe I'm going for the wrong css command as things aren't quite lining up.

Link to comment
Share on other sites

arrbee99

Also, would anyone happen to know why Chrome, on the left, has un-blurry programs showing through, while Firefox, on the right, doesn't.

Same position in the guide for each...

235904571_EmbyTVGuide1.thumb.JPG.802882d404273f87c891158de58a22e1.JPG

Link to comment
Share on other sites

arrbee99

I was hoping something like this would help to just apply it to Firefox and Edge, but it does nothing. I think the syntax is wrong but can't find any useful examples anywhere -

div.channelCellInner {-moz-background-color: rgba(0, 0, 0, 0.2);}
div.channelCellInner {-moz-backdrop-filter: blur(3.0em);}


div.channelCellInner {-ms-background-color: rgba(0, 0, 0, 0.2);}
div.channelCellInner {-ms-backdrop-filter: blur(3.0em);}

 

Link to comment
Share on other sites

CarlosLima

Hi,
I have tried the shared codes and have approved most of them. For me removing the channel logo works but the channel name is not displayed. Thanks for a tip.

Screenshot.png

Edited by CarlosLima
Link to comment
Share on other sites

arrbee99

So you have just channel name and number displayed. Jolly good. I just added this to put them on different lines if you're interested. -

/* Put channel name and number on separate lines */
span.guideChannelName {display: flex;
  align-items: center;
  justify-content: center;}

Hope its actually correct.

Link to comment
Share on other sites

CarlosLima

Thanks for your help.
This last code has not changed for me, that is, the channel name is not displayed in the field where the logo would be.

Link to comment
Share on other sites

Happy2Play

@arrbee99 looks resolution based what happens if you shrink you window height?

@CarlosLima Are you talking about the channel name autohide?

default code

@media all and (max-height:50em) {
    .guideChannelText-autohide {
        display: none
    }
}

to something like this

@media all and (max-height:50em) {
    div.guideChannelText-autohide {
        display: block
    }
}

 

Link to comment
Share on other sites

CarlosLima
4 minutes ago, Happy2Play said:

@arrbee99 looks resolution based what happens if you shrink you window height?

@CarlosLima Are you talking about the channel name autohide?

default code

@media all and (max-height:50em) {
    .guideChannelText-autohide {
        display: none
    }
}

to something like this

@media all and (max-height:50em) {
    div.guideChannelText-autohide {
        display: block
    }
}

 

Thanks a lot, that worked now.
So I'm going to adjust the field width because it seems to need more width.

Screenshot.png

Link to comment
Share on other sites

arrbee99

Are you meaning there might not be enough height to display the logo ?

I guess CarlosLima answer above means yes ?

Link to comment
Share on other sites

Happy2Play
12 minutes ago, arrbee99 said:

Are you meaning there might not be enough height to display the logo ?

Would appear the entire table sort of scales.

@CarlosLima Note guideProgramSecondaryInfo is doing the same thing.

	
@media all and (max-height:40em) {
    .guideProgramSecondaryInfo {
        display: none
    }
}

image.png.f7529711f4ad26f35a55a2f718975144.png

to

	
@media all and (max-height:40em) {
    div.guideProgramSecondaryInfo {
        display: block
    }
}

image.png.a6c6e56befdc82fedb901c501b20fdde.png

Link to comment
Share on other sites

CarlosLima
4 minutes ago, Happy2Play said:

Would appear the entire table sort of scales.

@CarlosLima Note guideProgramSecondaryInfo is doing the same thing.

	
@media all and (max-height:40em) {
    .guideProgramSecondaryInfo {
        display: none
    }
}

image.png.f7529711f4ad26f35a55a2f718975144.png

to

	
@media all and (max-height:40em) {
    div.guideProgramSecondaryInfo {
        display: block
    }
}

image.png.a6c6e56befdc82fedb901c501b20fdde.png

Hmn, I applied this code and it doesn't display the red label.
I believe that the guide for Brazil does not provide this feature (from the live programs)

Link to comment
Share on other sites

Happy2Play
2 minutes ago, CarlosLima said:

Hmn, I applied this code and it doesn't display the red label.
I believe that the guide for Brazil does not provide this feature (from the live programs)

Possibly, do you have it enabled in Show Indicators?

Link to comment
Share on other sites

CarlosLima
8 minutes ago, Happy2Play said:

Possibly, do you have it enabled in Show Indicators?

I believe it is here.

Screenshot.png

Link to comment
Share on other sites

Happy2Play
22 hours ago, arrbee99 said:

Also, would anyone happen to know why Chrome, on the left, has un-blurry programs showing through, while Firefox, on the right, doesn't.

Same position in the guide for each...

235904571_EmbyTVGuide1.thumb.JPG.802882d404273f87c891158de58a22e1.JPG

Looks like another quirk in FF but does this correct the issue?

button.channelCell {inset-inline-start: -2px;}

But @Lukethis can be reproduced without any custom css in FF, not seen in Edge/Chrome.  Sort of hard to catch with console open.

  • Like 1
Link to comment
Share on other sites

arrbee99

Though technically that fix just above apples to the picture in the first post, not the one you quoted.

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