TV guide borders bits

[arrbee99 1712]

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

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

 

[Luke 40077]

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

[Happy2Play 9441]

@arrbee99 Have you tried adding this?

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

 

Edited August 20, 2022 by Happy2Play

[arrbee99 1712]

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

[arrbee99 1712]

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

[arrbee99 1712]

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.

[arrbee99 1712]

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

[arrbee99 1712]

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

 

[Guest]

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.

Edited August 20, 2022 by CarlosLima

[arrbee99 1712]

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.

[Guest]

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.

[arrbee99 1712]

So it completely blank, like the picture you posted ?

I have this now -

[Guest]

Exactly like the picture I posted above. Completely blank.

[Happy2Play 9441]

@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
    }
}

 

[Guest]

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.

[arrbee99 1712]

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

I guess CarlosLima answer above means yes ?

[Happy2Play 9441]

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

to

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

[Guest]

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

to

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

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)

[Happy2Play 9441]

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?

[Guest]

8 minutes ago, Happy2Play said:

Possibly, do you have it enabled in Show Indicators?

I believe it is here.

[Happy2Play 9441]

@CarlosLima Must be guide data then as you have "Ao vivo" enabled.

[Guest]

Yeah. Thanks

[Happy2Play 9441]

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

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.

[arrbee99 1712]

Yes it does. Excellent. Thank you.

(need to make it 3px btw..)

[arrbee99 1712]

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