Jump to content
Oxide

Some CSS Fixes & Tweaks :)

Recommended Posts

chef
Posted (edited)

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

 

Seems they are named after the media.type

Edited by chef

Share this post


Link to post
Share on other sites
PenkethBoy

Ta will have a look to see if i missed that

Share this post


Link to post
Share on other sites
PenkethBoy

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

 

cant find it in the page for an episode

Share this post


Link to post
Share on other sites
chef

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

Share this post


Link to post
Share on other sites
chef

5e14d910eb03e_datatype1.png

 

5e14d929383c7_datatype2.png

Share this post


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

Share this post


Link to post
Share on other sites
chef
Posted (edited)

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

Share this post


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

Share this post


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

Share this post


Link to post
Share on other sites
Oxide

Nope, had a look last night with no joy  :(

Share this post


Link to post
Share on other sites
daedalus

:(<_<

Share this post


Link to post
Share on other sites
Luke

What css is being used now to do that?

Share this post


Link to post
Share on other sites
Happy2Play
Posted (edited)

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

Share this post


Link to post
Share on other sites
Luke

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

Share this post


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.

Share this post


Link to post
Share on other sites
Luke

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.

Share this post


Link to post
Share on other sites
Happy2Play
Posted (edited)

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

Share this post


Link to post
Share on other sites
Luke

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.

Share this post


Link to post
Share on other sites
daedalus

season view now has tiny watched icons

 

post-143-0-35907400-1584485858_thumb.png

 

the same on every change <_<

Share this post


Link to post
Share on other sites
Happy2Play
Posted (edited)

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

Share this post


Link to post
Share on other sites
Happy2Play
Posted (edited)

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

Share this post


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

Share this post


Link to post
Share on other sites
Happy2Play
Posted (edited)

@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

Share this post


Link to post
Share on other sites
daedalus

season view still has tiny watched icons

Share this post


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

Share this post


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