Some CSS Fixes & Tweaks :)

[chef 3763]

@@PenkethBoy Have you tried looking at the 'data-type' attribute of the element.

 

Seems they are named after the media.type

Edited January 7, 2020 by chef

[PenkethBoy 2066]

Ta will have a look to see if i missed that

[PenkethBoy 2066]

@@chef - could you give me an indication where you are seeing this

 

cant find it in the page for an episode

[chef 3763]

It would seem that movie card elements and episode listItem elements all have the 'data-type' attribute.

[chef 3763]

 

[PenkethBoy 2066]

Thanks but - I am trying to control the primary image size - on the index.html/item detail page

 

so although the page html is very similar its not quite the same as image is under 

 

 

but although outside that tree you can see other indications of what type of page it is - not sure how to reference those and apply the image modification etc - if its possible at all

[chef 3763]

Ah, I see. You could through the magic of intersectionObserver, or maybe a mutationObserver.

Or, go straight to the source in the detailPage.js

But, all would be lost in update.

 

EDIt: Actually, that's a really difficult one. 

Edited January 7, 2020 by chef

[PenkethBoy 2066]

Yeah - thought so - as CSS does not have a if/then implemented to pick a variable from a diff tree of divs etc

 

Thanks anyway

[Happy2Play 8845]

Anyone see a way to fix ribbon indicator check rotation as of 4.4.0.27?  I'm not currently seeing one.

 

[Oxide 139]

Nope, had a look last night with no joy 

[daedalus 430]

[Luke 37932]

What css is being used now to do that?

[Happy2Play 8845]

What css is being used now to do that?

Looks like you now combine .playedIndicator and .playedIndicator i, so there is only one element now.

code we were using. 

/*Make Played Indicator into Ribbon LHS*/
.playedIndicator i, .syncIndicator i {
font-size: 150%;
transform: rotate(45deg);
}
.card .playedIndicator, .card .countIndicator {width: 75px;
height: 25px;
border-radius: 0%;
transform: rotate(-45deg);
border-style: solid;
border-width: 1px;
border-color: rgba(255, 255, 255, 0.5);
display: flex;
align-items: center;
justify-content: center;
left: -21px;
}

Edited March 17, 2020 by Happy2Play

[Luke 37932]

You can probably figure something out with a pseudo element:

.cardPlayedIndicator {
    font-size: 150%;
    transform: rotate(45deg);
    background-color: transparent!important;
    overflow: visible;
}

.cardPlayedIndicator:before {
    width: 75px;
    height: 25px;
    border-radius: 0%;
    transform: rotate(-180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    left: -21px;
    content: ' ';
    background: red;
    z-index: -1;
    position: absolute;
    right: 0;
    top: 0;
}

[Happy2Play 8845]

 

You can probably figure something out with a pseudo element:

.cardPlayedIndicator {
    font-size: 150%;
    transform: rotate(45deg);
    background-color: transparent!important;
    overflow: visible;
}

.cardPlayedIndicator:before {
    width: 75px;
    height: 25px;
    border-radius: 0%;
    transform: rotate(-180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    left: -21px;
    content: ' ';
    background: red;
    z-index: -1;
    position: absolute;
    right: 0;
    top: 0;
}

But you can't rotate the icon without rotating the ribbon since they are one now.

[Luke 37932]

They both have different rotation values so you just have to play with it. Try removing the rotation from the icon and setting the rotation of the pseudo element to 45.

[Happy2Play 8845]

They both have different rotation values so you just have to play with it. Try removing the rotation from the icon and setting the rotation of the pseudo element to 45.

I must be doing something wrong as it rotates both equally (ribbon and icon).

Edited March 17, 2020 by Happy2Play

[Luke 37932]

Well i'm not sure what the end goal is of what you want it to look like, but based on screenshots in this thread it seems like you want the checkmark displaying straight up normally and not on an angle. So giving it a rotation of 0 plus 45 for the pseudo element does that.

[daedalus 430]

season view now has tiny watched icons

 

 

the same on every change

[Happy2Play 8845]

Okay something like this.  
 
RH Ribbon

/*Make Played Indicator into Ribbon RHS*/
.cardPlayedIndicator, .cardCountIndicator {
    overflow: visible;
}

.cardPlayedIndicator:before, .cardCountIndicator:before {
    width: 75px;
    height: 25px;
    transform: rotate(45deg);
    content: ' ';
    background: blue;
    z-index: -1;
    position: absolute;
}

LH Ribbon

/*Make Played Indicator into Ribbon LHS*/
.cardPlayedIndicator, .cardCountIndicator {
    overflow: visible;
     left: 0;
}

.cardPlayedIndicator:before, .cardCountIndicator:before {
    width: 75px;
    height: 25px;
    transform: rotate(-45deg);
    content: ' ';
    background: blue;
    z-index: -1;
    position: absolute;
}

 
No change to Folders indicator

/*Make Folder Indicator into Ribbon LHS*/
div.videoIndicator {
    transform: rotate(-45deg);
    width: 75px;
    left: -21px;
    border-radius: 0%;
    background: rgba(30,30,30,.7);
    border-style: solid;
    border-width: 1px;}
div.videoIndicator i {transform: rotate(45deg);} 

 
Haven't looked at list views yet or season list.

 

As of 4.4.0.28

Edited March 24, 2020 by Happy2Play
fixed background issue

[Happy2Play 8845]

Season RH Ribbon

/*Ribbon RH Season level*/
div.listItemImageContainer-large {overflow: hidden;}
div.indicators.listItemIndicators .playedIndicator {z-index: 0;}
div.indicators.listItemIndicators .playedIndicator:before {
    width: 75px;
    height: 25px;
    transform: rotate(45deg);
    background: blue;
    z-index: -1;
    position: absolute;
    content: "";
}

Season LH Ribbon

/*Ribbon LH Season level*/
div.listItemImageContainer-large {overflow: hidden;}
div.listItemIndicators {left: 5px;}
div.indicators.listItemIndicators .playedIndicator {z-index: 0;}
div.indicators.listItemIndicators .playedIndicator:before {
    width: 75px;
    height: 25px;
    transform: rotate(-45deg);
    background: blue;
    z-index: -1;
    position: absolute;
    content: "";
}

As of 4.4.0.28

 

List views will require different targeting altogether do to Season level overlap.

Edited March 24, 2020 by Happy2Play
fixed background issue

[Emby Tower 33]

@Happy2Play: I just tried your new ribbon code, but it doesn't work. There are stil the "dots"!

 

Tested with actual stable version.

[Happy2Play 8845]

@Happy2Play: I just tried your new ribbon code, but it doesn't work. There are stil the "dots"!

 

Tested with actual stable version.

Hmm, not sure what happened in testing but actually apply a background color instead of "background: var(--theme-primary-color)"

 

changed code about to apply specific color.

Edited March 24, 2020 by Happy2Play

[daedalus 430]

season view still has tiny watched icons

[Happy2Play 8845]

season view still has tiny watched icons

I don't know what to say as this is what I get with the code posted in post 95 and 96, no other code.

 

LHS/RHS