Jump to content

Some CSS Fixes & Tweaks :)


Recommended Posts

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

 

Seems they are named after the media.type

Edited by chef
Link to post
Share on other sites

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

Link to post
Share on other sites
PenkethBoy

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 

 

5e14dd21685c1_Annotation20200107193316.j

 

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

Link to post
Share on other sites

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 by chef
Link to post
Share on other sites
PenkethBoy

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

Link to post
Share on other sites
  • 2 months later...
Happy2Play

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

 

5e703a1e28729_indicator.jpg

Link to post
Share on other sites
Happy2Play

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 by Happy2Play
Link to post
Share on other sites

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;
}
Link to post
Share on other sites
Happy2Play

 

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites
Happy2Play

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 by Happy2Play
Link to post
Share on other sites

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.

Link to post
Share on other sites
Happy2Play

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 by Happy2Play
fixed background issue
  • Like 1
Link to post
Share on other sites
Happy2Play

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 by Happy2Play
fixed background issue
  • Like 1
Link to post
Share on other sites
Emby Tower

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

 

Tested with actual stable version.

  • Like 1
Link to post
Share on other sites
Happy2Play

@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 by Happy2Play
Link to post
Share on other sites
Happy2Play

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

 

5e79de11655d5_lhs1.jpg

 

5e79de2628648_lhs2.jpg

 

5e79de528a0de_lhs3.jpg

Link to post
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...