[CSS - Modern] 🍰 Clarity by V.L

to all CSS Master and knownledgeble out there ^_^
Please help me build my dream #AnimelistDesign

if it is possible ^_^ thanks you so much

My Imagination Planning
- want to put profile picture on the top left and hover zoom in zoom out
- want to put a hover anime picture beside of the anime profile
- want to customize by changing color of the word Score/Premiered/Studios/Days/AirDATED/Demographic/Genres/UserDates/Licensors
- want to know the code for hover background changing color - will put it on the word above ^^^
- want to customize by changing color of Season / Fall / Winter / Summer / Spring
- want to know the code for changing color of the TAGS and also how did they put a pop up msg or like a comments below TAGS
- if there is a code of any of this to appear on the table? Status: / Aired: / Producers: / Source: / Theme: / Duration:
- is it possible to customize the ratings beside of the table? like changing color/font/hover/put an img/gif
- how to put a hover gif/img on score while changing its color?

*** for shared imports, is it possible to get an easy to understand css code so that i can edit the contents. ^_^

@Zaos_10 Don't worry about asking too many questions


Unfortunately Clarity is VERY hard for me to edit since Valerio_Lyndon and I were polar opposite thinkers xD

This seems like it could work when I look at your all anime page in preview





I got a feeling it wont tho lol. Because also unfortunately the owner sees the layout differently than passerby so my code might not work for you, and in that case I'll install it myself and try ":D

@Shishio-kun it absolutely worked, tysm Shishio!

@Zaos_10

Cool, a few days later everything looks fine with that

I notice it's doing this too but guessing its just something that resolves within the day

@Shishio-kun if u'r concerned bout the misalign between watching and completed, dw, it's not related with ur solution, it's a MALFOX mod stuff, when u add any anime under a category it takes some time to refresh and rearrange and happened u just saw it at that moment, if u visit it now it's perfectly ok and i'm so happy with ur code

Going through my old posts in this forum was painful.

Back from the dead. So, I am designing a customized look of Clarity for someone, where I'm trying to add status-colored borders to the list rows. This has works on my own list, but isn't working in this case. You can check that here: SplitTongue. I tried figuring the problem out using this method Valerio mentioned,

But this didn't work. Spent a lot of time figuring out why this works on my own list but not here, but my list's stylesheet is a mess since I was playing around with it when I basically had zero knowledge of CSS and HTML (not that that much better now), so I couldn't figure out what was making it work for my list but not the new one I'm trying to style. This seems to be the code that makes the list border appear in my list:

@Legends_of_anime

Welcome back! Looks like the root thing

Your list has




A root setting for listwidth


The mod has a --listWidth root setting along with some others

width: var(--listWidth);
box-shadow: 0 0 0 1px var(--watching);
box-shadow: 0 0 0 1px var(--completed);


etc





So your friends list needs the roots for the --listWidth mod like yours has, or you set it manually with


/*--------------------------\
| List Table border |
\--------------------------*/
.data.status::before {
content: "";
position: absolute;
top: 0;
left: 0;
z-index: -1;
width: 1140px !important;;
height: 100%;
pointer-events: none;
}
.data.status.watching::before,
.data.status.reading::before {
box-shadow: 0 0 0 1px var(--watching);
}
.data.status.completed::before {
box-shadow: 0 0 0 1px var(--completed);
}
.data.status.onhold::before {
box-shadow: 0 0 0 1px var(--onhold);
}
.data.status.dropped::before {
box-shadow: 0 0 0 1px var(--dropped);
}
.data.status.plantowatch::before,
.data.status.plantoread::before {
box-shadow: 0 0 0 1px var(--plantowatch);
}