New
Mar 4, 2022 2:00 PM
#7401
you didn't actually say what the problem was, I assume you don't like how wide and full of empty space that score hover description is and want it to be more like Uji_Gintoki_Bowl's I tried looking at his code but couldn't find the exact code/way he did it, but you can start with this and make whatever changes you need to a[href$="tag=-"]:before,
a[href$="tag=1"]:before,
a[href$="tag=10"]:before,
a[href$="tag=2"]:before,
a[href$="tag=3"]:before,
a[href$="tag=4"]:before,
a[href$="tag=5"]:before,
a[href$="tag=6"]:before,
a[href$="tag=7"]:before,
a[href$="tag=8"]:before,
a[href$="tag=9"]:before,
a[href$="tag=11"]:before {
content: ""!important;
position: absolute;
top: 17px!important;
left: calc(50% - 5px)!important;
z-index: 5;
display: block;
border-width: 5px;
border-style: solid;
border-color: transparent transparent var(--text-dim) transparent;
opacity: 0;
transition: opacity .15s ease;
pointer-events: none
}
a[href$="tag=-"]:after,
a[href$="tag=1"]:after,
a[href$="tag=10"]:after,
a[href$="tag=2"]:after,
a[href$="tag=3"]:after,
a[href$="tag=4"]:after,
a[href$="tag=5"]:after,
a[href$="tag=6"]:after,
a[href$="tag=7"]:after,
a[href$="tag=8"]:after,
a[href$="tag=9"]:after,
a[href$="tag=11"]:after {
content: "Story";
position: absolute;
top: 27px!important;
left: 50%!important;
z-index: 5;
display: block;
width: auto;
max-width: max-content;
height: auto;
padding: 4px 8px;
background: var(--btn-bg);
border: 1px solid var(--text-dim);
border-radius: 4px;
box-sizing: border-box;
color: var(--text);
font: 11px/15px Arial, Verdana;
text-align: left;
white-space: pre-wrap;
opacity: 0;
transition: opacity .15s ease;
transform: translateX(-50%);
pointer-events: none
} |
ShaggyZEMar 4, 2022 2:07 PM
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 4, 2022 2:04 PM
#7402
ShaggyZE said: i will try it thanksL3noX said: ShaggyZE said: @L3noX you don't add it to the code, leave the code alone, you are done with that part, you need to click Edit on the anime on your list or go to an Anime page you've completed and click Edit Details, that's where you put the tags Click the arrow to show advanced I have tons of tags in mine, but you're just going to be focusing on scores like 7, 8, 9, 7, 7 it's working but i have problem when the tag is added you didn't actually say what the problem was, I assume you don't like how wide and full of empty space that score hover description is and want it to be more like Uji_Gintoki_Bowl's I tried looking at his code but couldn't find the exact code/way he did it, but you can start with this and make whatever changes you need to a[href$="tag=-"]:before,
a[href$="tag=1"]:before,
a[href$="tag=10"]:before,
a[href$="tag=2"]:before,
a[href$="tag=3"]:before,
a[href$="tag=4"]:before,
a[href$="tag=5"]:before,
a[href$="tag=6"]:before,
a[href$="tag=7"]:before,
a[href$="tag=8"]:before,
a[href$="tag=9"]:before,
a[href$="tag=11"]:before {
content: ""!important;
position: absolute;
top: 17px!important;
left: calc(50% - 5px)!important;
z-index: 5;
display: block;
border-width: 5px;
border-style: solid;
border-color: transparent transparent var(--text-dim) transparent;
opacity: 0;
transition: opacity .15s ease;
pointer-events: none
}
a[href$="tag=-"]:after,
a[href$="tag=1"]:after,
a[href$="tag=10"]:after,
a[href$="tag=2"]:after,
a[href$="tag=3"]:after,
a[href$="tag=4"]:after,
a[href$="tag=5"]:after,
a[href$="tag=6"]:after,
a[href$="tag=7"]:after,
a[href$="tag=8"]:after,
a[href$="tag=9"]:after,
a[href$="tag=11"]:after {
content: "Plot";
position: absolute;
top: 27px!important;
left: 50%!important;
z-index: 5;
display: block;
width: auto;
max-width: max-content;
height: auto;
padding: 4px 8px;
background: var(--btn-bg);
border: 1px solid var(--text-dim);
border-radius: 4px;
box-sizing: border-box;
color: var(--text);
font: 11px/15px Arial, Verdana;
text-align: left;
white-space: pre-wrap;
opacity: 0;
transition: opacity .15s ease;
transform: translateX(-50%);
pointer-events: none
} |
Mar 5, 2022 8:21 AM
#7403
| Can i have question @Uji_Gintoki_Bowl how did you delete this hover when i delete it the hover is still there but without color ? /*-S-T-A-R-T--------------------*\ | Advanced Scoring | https://myanimelist.net/forum/?topicid=1723114&show=650#msg62080071 \*------------------------------*/ .data.tags { /* horizontal/vertical offset from left of list */ --x-offset: 500px; --y-offset: calc(40% + 17.5px); } /* add decorative score background */ .data.tags div:after { content: ""; position: absolute; top: var(--y-offset); left: var(--x-offset); width: 98px; height: 17px; --i: var(--bg); background-image: linear-gradient( to right, #60588A 0px, #60588A 18px, /* 1st box */ transparent 18px, transparent 20px, #FBCCE3 20px, #FBCCE3 38px, /* 2nd box */ transparent 38px, transparent 40px, #8CE3FE 40px, #8CE3FE 58px, /* 3rd box */ transparent 58px, transparent 60px, #B6FAA5 60px, #B6FAA5 78px, /* 4th box */ transparent 78px, transparent 80px, #C899FF 80px, #C899FF 98px /* 5th box */ ); border-radius: 8.5px; } /* reposition score tags */ .data.tags a[href$="tag=-"], .data.tags a[href$="tag=1"], .data.tags a[href$="tag=2"], .data.tags a[href$="tag=3"], .data.tags a[href$="tag=4"], .data.tags a[href$="tag=5"], .data.tags a[href$="tag=6"], .data.tags a[href$="tag=7"], .data.tags a[href$="tag=8"], .data.tags a[href$="tag=9"], .data.tags a[href$="tag=10"] { position: absolute; top: var(--y-offset); z-index: 1; width: 18px; padding: 1px 0; margin: 0; pointer-events: auto; } .data.tags a[href$="tag=-"]:hover, .data.tags a[href$="tag=1"]:hover, .data.tags a[href$="tag=2"]:hover, .data.tags a[href$="tag=3"]:hover, .data.tags a[href$="tag=4"]:hover, .data.tags a[href$="tag=5"]:hover, .data.tags a[href$="tag=6"]:hover, .data.tags a[href$="tag=7"]:hover, .data.tags a[href$="tag=8"]:hover, .data.tags a[href$="tag=9"]:hover, .data.tags a[href$="tag=10"]:hover { background: transparent !important; /* background on hover */ } .data.tags span:nth-last-child(5) a[href$="tag=-"], .data.tags span:nth-last-child(5) a[href$="tag=1"], .data.tags span:nth-last-child(5) a[href$="tag=2"], .data.tags span:nth-last-child(5) a[href$="tag=3"], .data.tags span:nth-last-child(5) a[href$="tag=4"], .data.tags span:nth-last-child(5) a[href$="tag=5"], .data.tags span:nth-last-child(5) a[href$="tag=6"], .data.tags span:nth-last-child(5) a[href$="tag=7"], .data.tags span:nth-last-child(5) a[href$="tag=8"], .data.tags span:nth-last-child(5) a[href$="tag=9"], .data.tags span:nth-last-child(5) a[href$="tag=10"] { left: var(--x-offset); border-radius: 8.5px 0 0 8.5px; color: var(--text) !important; /* box 1 colour */ } .data.tags span:nth-last-child(4) a[href$="tag=-"], .data.tags span:nth-last-child(4) a[href$="tag=1"], .data.tags span:nth-last-child(4) a[href$="tag=2"], .data.tags span:nth-last-child(4) a[href$="tag=3"], .data.tags span:nth-last-child(4) a[href$="tag=4"], .data.tags span:nth-last-child(4) a[href$="tag=5"], .data.tags span:nth-last-child(4) a[href$="tag=6"], .data.tags span:nth-last-child(4) a[href$="tag=7"], .data.tags span:nth-last-child(4) a[href$="tag=8"], .data.tags span:nth-last-child(4) a[href$="tag=9"], .data.tags span:nth-last-child(4) a[href$="tag=10"] { left: calc(var(--x-offset) + 20px); border-radius: 0; color: var(--text) !important; /* box 2 colour */ } .data.tags span:nth-last-child(3) a[href$="tag=-"], .data.tags span:nth-last-child(3) a[href$="tag=1"], .data.tags span:nth-last-child(3) a[href$="tag=2"], .data.tags span:nth-last-child(3) a[href$="tag=3"], .data.tags span:nth-last-child(3) a[href$="tag=4"], .data.tags span:nth-last-child(3) a[href$="tag=5"], .data.tags span:nth-last-child(3) a[href$="tag=6"], .data.tags span:nth-last-child(3) a[href$="tag=7"], .data.tags span:nth-last-child(3) a[href$="tag=8"], .data.tags span:nth-last-child(3) a[href$="tag=9"], .data.tags span:nth-last-child(3) a[href$="tag=10"] { left: calc(var(--x-offset) + 40px); border-radius: 0; color: var(--text) !important; /* box 3 colour */ } .data.tags span:nth-last-child(2) a[href$="tag=-"], .data.tags span:nth-last-child(2) a[href$="tag=1"], .data.tags span:nth-last-child(2) a[href$="tag=2"], .data.tags span:nth-last-child(2) a[href$="tag=3"], .data.tags span:nth-last-child(2) a[href$="tag=4"], .data.tags span:nth-last-child(2) a[href$="tag=5"], .data.tags span:nth-last-child(2) a[href$="tag=6"], .data.tags span:nth-last-child(2) a[href$="tag=7"], .data.tags span:nth-last-child(2) a[href$="tag=8"], .data.tags span:nth-last-child(2) a[href$="tag=9"], .data.tags span:nth-last-child(2) a[href$="tag=10"] { left: calc(var(--x-offset) + 60px); border-radius: 0; color: var(--text) !important; /* box 4 colour */ } .data.tags span:nth-last-child(1) a[href$="tag=-"], .data.tags span:nth-last-child(1) a[href$="tag=1"], .data.tags span:nth-last-child(1) a[href$="tag=2"], .data.tags span:nth-last-child(1) a[href$="tag=3"], .data.tags span:nth-last-child(1) a[href$="tag=4"], .data.tags span:nth-last-child(1) a[href$="tag=5"], .data.tags span:nth-last-child(1) a[href$="tag=6"], .data.tags span:nth-last-child(1) a[href$="tag=7"], .data.tags span:nth-last-child(1) a[href$="tag=8"], .data.tags span:nth-last-child(1) a[href$="tag=9"], .data.tags span:nth-last-child(1) a[href$="tag=10"] { left: calc(var(--x-offset) + 80px); border-radius: 0 8.5px 8.5px 0; color: var(--text) !important; /* box 5 colour */ } /* add description on hover & remove pseudo comma from tags */ a[href$="tag=-"]:before, a[href$="tag=1"]:before, a[href$="tag=2"]:before, a[href$="tag=3"]:before, a[href$="tag=4"]:before, a[href$="tag=5"]:before, a[href$="tag=6"]:before, a[href$="tag=7"]:before, a[href$="tag=8"]:before, a[href$="tag=9"]:before, a[href$="tag=10"]:before { content: "" !important; position: absolute; top: 17px; left: calc(50% - 5px); z-index: 5; display: block; border-width: 5px; border-style: solid; border-color: transparent transparent var(--text-dim) transparent; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } a[href$="tag=-"]:after, a[href$="tag=1"]:after, a[href$="tag=2"]:after, a[href$="tag=3"]:after, a[href$="tag=4"]:after, a[href$="tag=5"]:after, a[href$="tag=6"]:after, a[href$="tag=7"]:after, a[href$="tag=8"]:after, a[href$="tag=9"]:after, a[href$="tag=10"]:after { content: "Story"; /* box 1 description */ position: absolute; top: 27px; left: 50%; z-index: 5; display: block; width: auto; max-width: 100px; height: auto; padding: 4px 8px; background: var(--btn-bg); border: 1px solid var(--text-dim); border-radius: 4px; box-sizing: border-box; color: var(--text); font: 11px/15px Arial, Verdana; text-align: left; white-space: pre-wrap; opacity: 0; transition: opacity 0.15s ease; transform: translateX(-50%); pointer-events: none; } a[href$="tag=-"]:hover:before, a[href$="tag=1"]:hover:before, a[href$="tag=2"]:hover:before, a[href$="tag=3"]:hover:before, a[href$="tag=4"]:hover:before, a[href$="tag=5"]:hover:before, a[href$="tag=6"]:hover:before, a[href$="tag=7"]:hover:before, a[href$="tag=8"]:hover:before, a[href$="tag=9"]:hover:before, a[href$="tag=10"]:hover:before, a[href$="tag=-"]:hover:after, a[href$="tag=1"]:hover:after, a[href$="tag=2"]:hover:after, a[href$="tag=3"]:hover:after, a[href$="tag=4"]:hover:after, a[href$="tag=5"]:hover:after, a[href$="tag=6"]:hover:after, a[href$="tag=7"]:hover:after, a[href$="tag=8"]:hover:after, a[href$="tag=9"]:hover:after, a[href$="tag=10"]:hover:after { opacity: 1; } span:nth-last-child(4) a[href$="tag=-"]:after, span:nth-last-child(4) a[href$="tag=1"]:after, span:nth-last-child(4) a[href$="tag=2"]:after, span:nth-last-child(4) a[href$="tag=3"]:after, span:nth-last-child(4) a[href$="tag=4"]:after, span:nth-last-child(4) a[href$="tag=5"]:after, span:nth-last-child(4) a[href$="tag=6"]:after, span:nth-last-child(4) a[href$="tag=7"]:after, span:nth-last-child(4) a[href$="tag=8"]:after, span:nth-last-child(4) a[href$="tag=9"]:after, span:nth-last-child(4) a[href$="tag=10"]:after { content: "Animation"; /* box 2 description */ } span:nth-last-child(3) a[href$="tag=-"]:after, span:nth-last-child(3) a[href$="tag=1"]:after, span:nth-last-child(3) a[href$="tag=2"]:after, span:nth-last-child(3) a[href$="tag=3"]:after, span:nth-last-child(3) a[href$="tag=4"]:after, span:nth-last-child(3) a[href$="tag=5"]:after, span:nth-last-child(3) a[href$="tag=6"]:after, span:nth-last-child(3) a[href$="tag=7"]:after, span:nth-last-child(3) a[href$="tag=8"]:after, span:nth-last-child(3) a[href$="tag=9"]:after, span:nth-last-child(3) a[href$="tag=10"]:after { content: "Characters"; /* box 3 description */ } span:nth-last-child(2) a[href$="tag=-"]:after, span:nth-last-child(2) a[href$="tag=1"]:after, span:nth-last-child(2) a[href$="tag=2"]:after, span:nth-last-child(2) a[href$="tag=3"]:after, span:nth-last-child(2) a[href$="tag=4"]:after, span:nth-last-child(2) a[href$="tag=5"]:after, span:nth-last-child(2) a[href$="tag=6"]:after, span:nth-last-child(2) a[href$="tag=7"]:after, span:nth-last-child(2) a[href$="tag=8"]:after, span:nth-last-child(2) a[href$="tag=9"]:after, span:nth-last-child(2) a[href$="tag=10"]:after { content: "Music"; /* box 4 description */ } span:nth-last-child(1) a[href$="tag=-"]:after, span:nth-last-child(1) a[href$="tag=1"]:after, span:nth-last-child(1) a[href$="tag=2"]:after, span:nth-last-child(1) a[href$="tag=3"]:after, span:nth-last-child(1) a[href$="tag=4"]:after, span:nth-last-child(1) a[href$="tag=5"]:after, span:nth-last-child(1) a[href$="tag=6"]:after, span:nth-last-child(1) a[href$="tag=7"]:after, span:nth-last-child(1) a[href$="tag=8"]:after, span:nth-last-child(1) a[href$="tag=9"]:after, span:nth-last-child(1) a[href$="tag=10"]:after { content: "Enjoyment"; /* box 5 description */ } /*------------------------E-N-D-*/ |
Mar 5, 2022 9:01 AM
#7404
ShaggyZE said: i somehow find the solution but thanksL3noX said: Can i have question @Uji_Gintoki_Bowl how did you delete this hover when i delete it the hover is still there but without color ? then you are only deleting the color code, Uji_Gintoki_Bowl didn't remove the hover, he changed the position to be under, which is what the code above I sent does, but you can use this code to remove it, though I don't recommend it because then people have no idea what score is what. /*-S-T-A-R-T--------------------*\
| Advanced Scoring |
https://myanimelist.net/forum/?topicid=1723114&show=650#msg62080071
\*------------------------------*/
.data.tags {
/* horizontal/vertical offset from left of list */
--x-offset: 500px;
--y-offset: calc(40% + 17.5px);
}
/* add decorative score background */
.data.tags div:after {
content: "";
position: absolute;
top: var(--y-offset);
left: var(--x-offset);
width: 98px;
height: 17px;
--i: var(--bg);
background-image: linear-gradient(
to right,
#60588A 0px, #60588A 18px, /* 1st box */
transparent 18px, transparent 20px,
#FBCCE3 20px, #FBCCE3 38px, /* 2nd box */
transparent 38px, transparent 40px,
#8CE3FE 40px, #8CE3FE 58px, /* 3rd box */
transparent 58px, transparent 60px,
#B6FAA5 60px, #B6FAA5 78px, /* 4th box */
transparent 78px, transparent 80px,
#C899FF 80px, #C899FF 98px /* 5th box */
);
border-radius: 8.5px;
}
/* reposition score tags */
.data.tags a[href$="tag=-"],
.data.tags a[href$="tag=1"],
.data.tags a[href$="tag=2"],
.data.tags a[href$="tag=3"],
.data.tags a[href$="tag=4"],
.data.tags a[href$="tag=5"],
.data.tags a[href$="tag=6"],
.data.tags a[href$="tag=7"],
.data.tags a[href$="tag=8"],
.data.tags a[href$="tag=9"],
.data.tags a[href$="tag=10"] {
position: absolute;
top: var(--y-offset);
z-index: 1;
width: 18px;
padding: 1px 0;
margin: 0;
pointer-events: auto;
}
.data.tags a[href$="tag=-"]:hover,
.data.tags a[href$="tag=1"]:hover,
.data.tags a[href$="tag=2"]:hover,
.data.tags a[href$="tag=3"]:hover,
.data.tags a[href$="tag=4"]:hover,
.data.tags a[href$="tag=5"]:hover,
.data.tags a[href$="tag=6"]:hover,
.data.tags a[href$="tag=7"]:hover,
.data.tags a[href$="tag=8"]:hover,
.data.tags a[href$="tag=9"]:hover,
.data.tags a[href$="tag=10"]:hover {
background: transparent !important; /* background on hover */
}
.data.tags span:nth-last-child(5) a[href$="tag=-"],
.data.tags span:nth-last-child(5) a[href$="tag=1"],
.data.tags span:nth-last-child(5) a[href$="tag=2"],
.data.tags span:nth-last-child(5) a[href$="tag=3"],
.data.tags span:nth-last-child(5) a[href$="tag=4"],
.data.tags span:nth-last-child(5) a[href$="tag=5"],
.data.tags span:nth-last-child(5) a[href$="tag=6"],
.data.tags span:nth-last-child(5) a[href$="tag=7"],
.data.tags span:nth-last-child(5) a[href$="tag=8"],
.data.tags span:nth-last-child(5) a[href$="tag=9"],
.data.tags span:nth-last-child(5) a[href$="tag=10"] {
left: var(--x-offset);
border-radius: 8.5px 0 0 8.5px;
color: var(--text) !important; /* box 1 colour */
}
.data.tags span:nth-last-child(4) a[href$="tag=-"],
.data.tags span:nth-last-child(4) a[href$="tag=1"],
.data.tags span:nth-last-child(4) a[href$="tag=2"],
.data.tags span:nth-last-child(4) a[href$="tag=3"],
.data.tags span:nth-last-child(4) a[href$="tag=4"],
.data.tags span:nth-last-child(4) a[href$="tag=5"],
.data.tags span:nth-last-child(4) a[href$="tag=6"],
.data.tags span:nth-last-child(4) a[href$="tag=7"],
.data.tags span:nth-last-child(4) a[href$="tag=8"],
.data.tags span:nth-last-child(4) a[href$="tag=9"],
.data.tags span:nth-last-child(4) a[href$="tag=10"] {
left: calc(var(--x-offset) + 20px);
border-radius: 0;
color: var(--text) !important; /* box 2 colour */
}
.data.tags span:nth-last-child(3) a[href$="tag=-"],
.data.tags span:nth-last-child(3) a[href$="tag=1"],
.data.tags span:nth-last-child(3) a[href$="tag=2"],
.data.tags span:nth-last-child(3) a[href$="tag=3"],
.data.tags span:nth-last-child(3) a[href$="tag=4"],
.data.tags span:nth-last-child(3) a[href$="tag=5"],
.data.tags span:nth-last-child(3) a[href$="tag=6"],
.data.tags span:nth-last-child(3) a[href$="tag=7"],
.data.tags span:nth-last-child(3) a[href$="tag=8"],
.data.tags span:nth-last-child(3) a[href$="tag=9"],
.data.tags span:nth-last-child(3) a[href$="tag=10"] {
left: calc(var(--x-offset) + 40px);
border-radius: 0;
color: var(--text) !important; /* box 3 colour */
}
.data.tags span:nth-last-child(2) a[href$="tag=-"],
.data.tags span:nth-last-child(2) a[href$="tag=1"],
.data.tags span:nth-last-child(2) a[href$="tag=2"],
.data.tags span:nth-last-child(2) a[href$="tag=3"],
.data.tags span:nth-last-child(2) a[href$="tag=4"],
.data.tags span:nth-last-child(2) a[href$="tag=5"],
.data.tags span:nth-last-child(2) a[href$="tag=6"],
.data.tags span:nth-last-child(2) a[href$="tag=7"],
.data.tags span:nth-last-child(2) a[href$="tag=8"],
.data.tags span:nth-last-child(2) a[href$="tag=9"],
.data.tags span:nth-last-child(2) a[href$="tag=10"] {
left: calc(var(--x-offset) + 60px);
border-radius: 0;
color: var(--text) !important; /* box 4 colour */
}
.data.tags span:nth-last-child(1) a[href$="tag=-"],
.data.tags span:nth-last-child(1) a[href$="tag=1"],
.data.tags span:nth-last-child(1) a[href$="tag=2"],
.data.tags span:nth-last-child(1) a[href$="tag=3"],
.data.tags span:nth-last-child(1) a[href$="tag=4"],
.data.tags span:nth-last-child(1) a[href$="tag=5"],
.data.tags span:nth-last-child(1) a[href$="tag=6"],
.data.tags span:nth-last-child(1) a[href$="tag=7"],
.data.tags span:nth-last-child(1) a[href$="tag=8"],
.data.tags span:nth-last-child(1) a[href$="tag=9"],
.data.tags span:nth-last-child(1) a[href$="tag=10"] {
left: calc(var(--x-offset) + 80px);
border-radius: 0 8.5px 8.5px 0;
color: var(--text) !important; /* box 5 colour */
}
/* add description on hover & remove pseudo comma from tags */
a[href$="tag=-"]:before,
a[href$="tag=1"]:before,
a[href$="tag=2"]:before,
a[href$="tag=3"]:before,
a[href$="tag=4"]:before,
a[href$="tag=5"]:before,
a[href$="tag=6"]:before,
a[href$="tag=7"]:before,
a[href$="tag=8"]:before,
a[href$="tag=9"]:before,
a[href$="tag=10"]:before {
content: "" !important;
position: absolute;
top: 17px;
left: calc(50% - 5px);
z-index: 5;
display: none !important;
border-width: 5px;
border-style: solid;
border-color: transparent transparent var(--text-dim) transparent;
opacity: 0;
transition: opacity 0.15s ease;
pointer-events: none;
}
a[href$="tag=-"]:after,
a[href$="tag=1"]:after,
a[href$="tag=2"]:after,
a[href$="tag=3"]:after,
a[href$="tag=4"]:after,
a[href$="tag=5"]:after,
a[href$="tag=6"]:after,
a[href$="tag=7"]:after,
a[href$="tag=8"]:after,
a[href$="tag=9"]:after,
a[href$="tag=10"]:after {
content: "Story"; /* box 1 description */
position: absolute;
top: 27px;
left: 50%;
z-index: 5;
display: none !important;
width: auto;
max-width: 100px;
height: auto;
padding: 4px 8px;
background: var(--btn-bg);
border: 1px solid var(--text-dim);
border-radius: 4px;
box-sizing: border-box;
color: var(--text);
font: 11px/15px Arial, Verdana;
text-align: left;
white-space: pre-wrap;
opacity: 0;
transition: opacity 0.15s ease;
transform: translateX(-50%);
pointer-events: none;
}
a[href$="tag=-"]:hover:before,
a[href$="tag=1"]:hover:before,
a[href$="tag=2"]:hover:before,
a[href$="tag=3"]:hover:before,
a[href$="tag=4"]:hover:before,
a[href$="tag=5"]:hover:before,
a[href$="tag=6"]:hover:before,
a[href$="tag=7"]:hover:before,
a[href$="tag=8"]:hover:before,
a[href$="tag=9"]:hover:before,
a[href$="tag=10"]:hover:before,
a[href$="tag=-"]:hover:after,
a[href$="tag=1"]:hover:after,
a[href$="tag=2"]:hover:after,
a[href$="tag=3"]:hover:after,
a[href$="tag=4"]:hover:after,
a[href$="tag=5"]:hover:after,
a[href$="tag=6"]:hover:after,
a[href$="tag=7"]:hover:after,
a[href$="tag=8"]:hover:after,
a[href$="tag=9"]:hover:after,
a[href$="tag=10"]:hover:after {
opacity: 1;
}
span:nth-last-child(4) a[href$="tag=-"]:after,
span:nth-last-child(4) a[href$="tag=1"]:after,
span:nth-last-child(4) a[href$="tag=2"]:after,
span:nth-last-child(4) a[href$="tag=3"]:after,
span:nth-last-child(4) a[href$="tag=4"]:after,
span:nth-last-child(4) a[href$="tag=5"]:after,
span:nth-last-child(4) a[href$="tag=6"]:after,
span:nth-last-child(4) a[href$="tag=7"]:after,
span:nth-last-child(4) a[href$="tag=8"]:after,
span:nth-last-child(4) a[href$="tag=9"]:after,
span:nth-last-child(4) a[href$="tag=10"]:after {
content: "Animation"; /* box 2 description */
}
span:nth-last-child(3) a[href$="tag=-"]:after,
span:nth-last-child(3) a[href$="tag=1"]:after,
span:nth-last-child(3) a[href$="tag=2"]:after,
span:nth-last-child(3) a[href$="tag=3"]:after,
span:nth-last-child(3) a[href$="tag=4"]:after,
span:nth-last-child(3) a[href$="tag=5"]:after,
span:nth-last-child(3) a[href$="tag=6"]:after,
span:nth-last-child(3) a[href$="tag=7"]:after,
span:nth-last-child(3) a[href$="tag=8"]:after,
span:nth-last-child(3) a[href$="tag=9"]:after,
span:nth-last-child(3) a[href$="tag=10"]:after {
content: "Characters"; /* box 3 description */
}
span:nth-last-child(2) a[href$="tag=-"]:after,
span:nth-last-child(2) a[href$="tag=1"]:after,
span:nth-last-child(2) a[href$="tag=2"]:after,
span:nth-last-child(2) a[href$="tag=3"]:after,
span:nth-last-child(2) a[href$="tag=4"]:after,
span:nth-last-child(2) a[href$="tag=5"]:after,
span:nth-last-child(2) a[href$="tag=6"]:after,
span:nth-last-child(2) a[href$="tag=7"]:after,
span:nth-last-child(2) a[href$="tag=8"]:after,
span:nth-last-child(2) a[href$="tag=9"]:after,
span:nth-last-child(2) a[href$="tag=10"]:after {
content: "Music"; /* box 4 description */
}
span:nth-last-child(1) a[href$="tag=-"]:after,
span:nth-last-child(1) a[href$="tag=1"]:after,
span:nth-last-child(1) a[href$="tag=2"]:after,
span:nth-last-child(1) a[href$="tag=3"]:after,
span:nth-last-child(1) a[href$="tag=4"]:after,
span:nth-last-child(1) a[href$="tag=5"]:after,
span:nth-last-child(1) a[href$="tag=6"]:after,
span:nth-last-child(1) a[href$="tag=7"]:after,
span:nth-last-child(1) a[href$="tag=8"]:after,
span:nth-last-child(1) a[href$="tag=9"]:after,
span:nth-last-child(1) a[href$="tag=10"]:after {
content: "Enjoyment"; /* box 5 description */
}
/*------------------------E-N-D-*/ |
Mar 5, 2022 9:13 AM
#7406
| thanks all i what i now need is reposition this somewhere else :D |
Mar 5, 2022 9:50 AM
#7407
| can i have question about reposition this block with with arrow i am trying it in the code but all what i try do nothing where i need change this position on top of the score ? /*-S-T-A-R-T--------------------*\ | Advanced Scoring | https://myanimelist.net/forum/?topicid=1723114&show=650#msg62080071 \*------------------------------*/ .data.tags { /* horizontal/vertical offset from left of list */ --x-offset: 500px; --y-offset: calc(40% + 17.5px); } /* add decorative score background */ .data.tags div:after { content: ""; position: absolute; top: var(--y-offset); left: var(--x-offset); width: 98px; height: 17px; --i: var(--bg); background-image: linear-gradient( to right, #60588A 0px, #60588A 18px, /* 1st box */ transparent 18px, transparent 20px, #FBCCE3 20px, #FBCCE3 38px, /* 2nd box */ transparent 38px, transparent 40px, #8CE3FE 40px, #8CE3FE 58px, /* 3rd box */ transparent 58px, transparent 60px, #B6FAA5 60px, #B6FAA5 78px, /* 4th box */ transparent 78px, transparent 80px, #C899FF 80px, #C899FF 98px /* 5th box */ ); border-radius: 8.5px; } /* reposition score tags */ .data.tags a[href$="tag=-"], .data.tags a[href$="tag=1"], .data.tags a[href$="tag=2"], .data.tags a[href$="tag=3"], .data.tags a[href$="tag=4"], .data.tags a[href$="tag=5"], .data.tags a[href$="tag=6"], .data.tags a[href$="tag=7"], .data.tags a[href$="tag=8"], .data.tags a[href$="tag=9"], .data.tags a[href$="tag=10"] { position: absolute; top: var(--y-offset); z-index: 1; width: 18px; padding: 1px 0; margin: 0; pointer-events: auto; } .data.tags a[href$="tag=-"], .data.tags a[href$="tag=1"], .data.tags a[href$="tag=2"], .data.tags a[href$="tag=3"], .data.tags a[href$="tag=4"], .data.tags a[href$="tag=5"], .data.tags a[href$="tag=6"], .data.tags a[href$="tag=7"], .data.tags a[href$="tag=8"], .data.tags a[href$="tag=9"], .data.tags a[href$="tag=10"] { background: transparent !important; /* background on hover */ } .data.tags span:nth-last-child(5) a[href$="tag=-"], .data.tags span:nth-last-child(5) a[href$="tag=1"], .data.tags span:nth-last-child(5) a[href$="tag=2"], .data.tags span:nth-last-child(5) a[href$="tag=3"], .data.tags span:nth-last-child(5) a[href$="tag=4"], .data.tags span:nth-last-child(5) a[href$="tag=5"], .data.tags span:nth-last-child(5) a[href$="tag=6"], .data.tags span:nth-last-child(5) a[href$="tag=7"], .data.tags span:nth-last-child(5) a[href$="tag=8"], .data.tags span:nth-last-child(5) a[href$="tag=9"], .data.tags span:nth-last-child(5) a[href$="tag=10"] { left: var(--x-offset); border-radius: 8.5px 0 0 8.5px; color: #FFFFFF !important; /* box 1 colour */ } .data.tags span:nth-last-child(4) a[href$="tag=-"], .data.tags span:nth-last-child(4) a[href$="tag=1"], .data.tags span:nth-last-child(4) a[href$="tag=2"], .data.tags span:nth-last-child(4) a[href$="tag=3"], .data.tags span:nth-last-child(4) a[href$="tag=4"], .data.tags span:nth-last-child(4) a[href$="tag=5"], .data.tags span:nth-last-child(4) a[href$="tag=6"], .data.tags span:nth-last-child(4) a[href$="tag=7"], .data.tags span:nth-last-child(4) a[href$="tag=8"], .data.tags span:nth-last-child(4) a[href$="tag=9"], .data.tags span:nth-last-child(4) a[href$="tag=10"] { left: calc(var(--x-offset) + 20px); border-radius: 0; color: #FFFFFF !important; /* box 2 colour */ } .data.tags span:nth-last-child(3) a[href$="tag=-"], .data.tags span:nth-last-child(3) a[href$="tag=1"], .data.tags span:nth-last-child(3) a[href$="tag=2"], .data.tags span:nth-last-child(3) a[href$="tag=3"], .data.tags span:nth-last-child(3) a[href$="tag=4"], .data.tags span:nth-last-child(3) a[href$="tag=5"], .data.tags span:nth-last-child(3) a[href$="tag=6"], .data.tags span:nth-last-child(3) a[href$="tag=7"], .data.tags span:nth-last-child(3) a[href$="tag=8"], .data.tags span:nth-last-child(3) a[href$="tag=9"], .data.tags span:nth-last-child(3) a[href$="tag=10"] { left: calc(var(--x-offset) + 40px); border-radius: 0; color: #FFFFFF !important; /* box 3 colour */ } .data.tags span:nth-last-child(2) a[href$="tag=-"], .data.tags span:nth-last-child(2) a[href$="tag=1"], .data.tags span:nth-last-child(2) a[href$="tag=2"], .data.tags span:nth-last-child(2) a[href$="tag=3"], .data.tags span:nth-last-child(2) a[href$="tag=4"], .data.tags span:nth-last-child(2) a[href$="tag=5"], .data.tags span:nth-last-child(2) a[href$="tag=6"], .data.tags span:nth-last-child(2) a[href$="tag=7"], .data.tags span:nth-last-child(2) a[href$="tag=8"], .data.tags span:nth-last-child(2) a[href$="tag=9"], .data.tags span:nth-last-child(2) a[href$="tag=10"] { left: calc(var(--x-offset) + 60px); border-radius: 0; color: #FFFFFF !important; /* box 4 colour */ } .data.tags span:nth-last-child(1) a[href$="tag=-"], .data.tags span:nth-last-child(1) a[href$="tag=1"], .data.tags span:nth-last-child(1) a[href$="tag=2"], .data.tags span:nth-last-child(1) a[href$="tag=3"], .data.tags span:nth-last-child(1) a[href$="tag=4"], .data.tags span:nth-last-child(1) a[href$="tag=5"], .data.tags span:nth-last-child(1) a[href$="tag=6"], .data.tags span:nth-last-child(1) a[href$="tag=7"], .data.tags span:nth-last-child(1) a[href$="tag=8"], .data.tags span:nth-last-child(1) a[href$="tag=9"], .data.tags span:nth-last-child(1) a[href$="tag=10"] { left: calc(var(--x-offset) + 80px); border-radius: 0 8.5px 8.5px 0; color: #FFFFFF !important; /* box 5 colour */ } /* add description on hover & remove pseudo comma from tags */ a[href$="tag=-"]:before, a[href$="tag=1"]:before, a[href$="tag=2"]:before, a[href$="tag=3"]:before, a[href$="tag=4"]:before, a[href$="tag=5"]:before, a[href$="tag=6"]:before, a[href$="tag=7"]:before, a[href$="tag=8"]:before, a[href$="tag=9"]:before, a[href$="tag=10"]:before { content: "" !important; position: absolute; top: 17px; left: calc(50% - 5px); z-index: 5; display: block; border-width: 5px; border-style: solid; border-color: transparent transparent var(--text-dim) transparent; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } a[href$="tag=-"]:after, a[href$="tag=1"]:after, a[href$="tag=2"]:after, a[href$="tag=3"]:after, a[href$="tag=4"]:after, a[href$="tag=5"]:after, a[href$="tag=6"]:after, a[href$="tag=7"]:after, a[href$="tag=8"]:after, a[href$="tag=9"]:after, a[href$="tag=10"]:after { content: "Story"; /* box 1 description */ position: absolute; top: 27px; left: 50%; z-index: 5; display: block; width: auto; max-width: 75px; height: auto; padding: 4px 8px; background: var(--btn-bg); border: 1px solid var(--text-dim); border-radius: 4px; box-sizing: border-box; color: var(--text); font: 11px/15px Arial, Verdana; text-align: left; white-space: pre-wrap; opacity: 0; transition: opacity 0.15s ease; transform: translateX(-50%); pointer-events: none; } a[href$="tag=-"]:hover:before, a[href$="tag=1"]:hover:before, a[href$="tag=2"]:hover:before, a[href$="tag=3"]:hover:before, a[href$="tag=4"]:hover:before, a[href$="tag=5"]:hover:before, a[href$="tag=6"]:hover:before, a[href$="tag=7"]:hover:before, a[href$="tag=8"]:hover:before, a[href$="tag=9"]:hover:before, a[href$="tag=10"]:hover:before, a[href$="tag=-"]:hover:after, a[href$="tag=1"]:hover:after, a[href$="tag=2"]:hover:after, a[href$="tag=3"]:hover:after, a[href$="tag=4"]:hover:after, a[href$="tag=5"]:hover:after, a[href$="tag=6"]:hover:after, a[href$="tag=7"]:hover:after, a[href$="tag=8"]:hover:after, a[href$="tag=9"]:hover:after, a[href$="tag=10"]:hover:after { opacity: 1; } span:nth-last-child(4) a[href$="tag=-"]:after, span:nth-last-child(4) a[href$="tag=1"]:after, span:nth-last-child(4) a[href$="tag=2"]:after, span:nth-last-child(4) a[href$="tag=3"]:after, span:nth-last-child(4) a[href$="tag=4"]:after, span:nth-last-child(4) a[href$="tag=5"]:after, span:nth-last-child(4) a[href$="tag=6"]:after, span:nth-last-child(4) a[href$="tag=7"]:after, span:nth-last-child(4) a[href$="tag=8"]:after, span:nth-last-child(4) a[href$="tag=9"]:after, span:nth-last-child(4) a[href$="tag=10"]:after { content: "Animation"; /* box 2 description */ } span:nth-last-child(3) a[href$="tag=-"]:after, span:nth-last-child(3) a[href$="tag=1"]:after, span:nth-last-child(3) a[href$="tag=2"]:after, span:nth-last-child(3) a[href$="tag=3"]:after, span:nth-last-child(3) a[href$="tag=4"]:after, span:nth-last-child(3) a[href$="tag=5"]:after, span:nth-last-child(3) a[href$="tag=6"]:after, span:nth-last-child(3) a[href$="tag=7"]:after, span:nth-last-child(3) a[href$="tag=8"]:after, span:nth-last-child(3) a[href$="tag=9"]:after, span:nth-last-child(3) a[href$="tag=10"]:after { content: "Characters"; /* box 3 description */ } span:nth-last-child(2) a[href$="tag=-"]:after, span:nth-last-child(2) a[href$="tag=1"]:after, span:nth-last-child(2) a[href$="tag=2"]:after, span:nth-last-child(2) a[href$="tag=3"]:after, span:nth-last-child(2) a[href$="tag=4"]:after, span:nth-last-child(2) a[href$="tag=5"]:after, span:nth-last-child(2) a[href$="tag=6"]:after, span:nth-last-child(2) a[href$="tag=7"]:after, span:nth-last-child(2) a[href$="tag=8"]:after, span:nth-last-child(2) a[href$="tag=9"]:after, span:nth-last-child(2) a[href$="tag=10"]:after { content: "Music"; /* box 4 description */ } span:nth-last-child(1) a[href$="tag=-"]:after, span:nth-last-child(1) a[href$="tag=1"]:after, span:nth-last-child(1) a[href$="tag=2"]:after, span:nth-last-child(1) a[href$="tag=3"]:after, span:nth-last-child(1) a[href$="tag=4"]:after, span:nth-last-child(1) a[href$="tag=5"]:after, span:nth-last-child(1) a[href$="tag=6"]:after, span:nth-last-child(1) a[href$="tag=7"]:after, span:nth-last-child(1) a[href$="tag=8"]:after, span:nth-last-child(1) a[href$="tag=9"]:after, span:nth-last-child(1) a[href$="tag=10"]:after { content: "Enjoyment"; /* box 5 description */ } /*------------------------E-N-D-*/ I think it's somewhere there /* add description on hover & remove pseudo comma from tags */ a[href$="tag=-"]:before, a[href$="tag=1"]:before, a[href$="tag=2"]:before, a[href$="tag=3"]:before, a[href$="tag=4"]:before, a[href$="tag=5"]:before, a[href$="tag=6"]:before, a[href$="tag=7"]:before, a[href$="tag=8"]:before, a[href$="tag=9"]:before, a[href$="tag=10"]:before { content: "" !important; position: absolute; top: 17px; left: calc(50% - 5px); z-index: 5; display: block; border-width: 5px; border-style: solid; border-color: transparent transparent var(--text-dim) transparent; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } a[href$="tag=-"]:after, a[href$="tag=1"]:after, a[href$="tag=2"]:after, a[href$="tag=3"]:after, a[href$="tag=4"]:after, a[href$="tag=5"]:after, a[href$="tag=6"]:after, a[href$="tag=7"]:after, a[href$="tag=8"]:after, a[href$="tag=9"]:after, a[href$="tag=10"]:after { content: "Story"; /* box 1 description */ position: absolute; top: 27px; left: 50%; z-index: 5; display: block; width: auto; max-width: 75px; height: auto; padding: 4px 8px; background: var(--btn-bg); border: 1px solid var(--text-dim); border-radius: 4px; box-sizing: border-box; color: var(--text); font: 11px/15px Arial, Verdana; text-align: left; white-space: pre-wrap; opacity: 0; transition: opacity 0.15s ease; transform: translateX(-50%); pointer-events: none; } |
Mar 5, 2022 10:07 AM
#7408
L3noX said: Can i have question @Uji_Gintoki_Bowl how did you delete this hover when i delete it the hover is still there but without color ? /*-S-T-A-R-T--------------------*\ | Advanced Scoring | https://myanimelist.net/forum/?topicid=1723114&show=650#msg62080071 \*------------------------------*/ .data.tags { /* horizontal/vertical offset from left of list */ --x-offset: 500px; --y-offset: calc(40% + 17.5px); } /* add decorative score background */ .data.tags div:after { content: ""; position: absolute; top: var(--y-offset); left: var(--x-offset); width: 98px; height: 17px; --i: var(--bg); background-image: linear-gradient( to right, #60588A 0px, #60588A 18px, /* 1st box */ transparent 18px, transparent 20px, #FBCCE3 20px, #FBCCE3 38px, /* 2nd box */ transparent 38px, transparent 40px, #8CE3FE 40px, #8CE3FE 58px, /* 3rd box */ transparent 58px, transparent 60px, #B6FAA5 60px, #B6FAA5 78px, /* 4th box */ transparent 78px, transparent 80px, #C899FF 80px, #C899FF 98px /* 5th box */ ); border-radius: 8.5px; } /* reposition score tags */ .data.tags a[href$="tag=-"], .data.tags a[href$="tag=1"], .data.tags a[href$="tag=2"], .data.tags a[href$="tag=3"], .data.tags a[href$="tag=4"], .data.tags a[href$="tag=5"], .data.tags a[href$="tag=6"], .data.tags a[href$="tag=7"], .data.tags a[href$="tag=8"], .data.tags a[href$="tag=9"], .data.tags a[href$="tag=10"] { position: absolute; top: var(--y-offset); z-index: 1; width: 18px; padding: 1px 0; margin: 0; pointer-events: auto; } .data.tags a[href$="tag=-"]:hover, .data.tags a[href$="tag=1"]:hover, .data.tags a[href$="tag=2"]:hover, .data.tags a[href$="tag=3"]:hover, .data.tags a[href$="tag=4"]:hover, .data.tags a[href$="tag=5"]:hover, .data.tags a[href$="tag=6"]:hover, .data.tags a[href$="tag=7"]:hover, .data.tags a[href$="tag=8"]:hover, .data.tags a[href$="tag=9"]:hover, .data.tags a[href$="tag=10"]:hover { background: transparent !important; /* background on hover */ } .data.tags span:nth-last-child(5) a[href$="tag=-"], .data.tags span:nth-last-child(5) a[href$="tag=1"], .data.tags span:nth-last-child(5) a[href$="tag=2"], .data.tags span:nth-last-child(5) a[href$="tag=3"], .data.tags span:nth-last-child(5) a[href$="tag=4"], .data.tags span:nth-last-child(5) a[href$="tag=5"], .data.tags span:nth-last-child(5) a[href$="tag=6"], .data.tags span:nth-last-child(5) a[href$="tag=7"], .data.tags span:nth-last-child(5) a[href$="tag=8"], .data.tags span:nth-last-child(5) a[href$="tag=9"], .data.tags span:nth-last-child(5) a[href$="tag=10"] { left: var(--x-offset); border-radius: 8.5px 0 0 8.5px; color: var(--text) !important; /* box 1 colour */ } .data.tags span:nth-last-child(4) a[href$="tag=-"], .data.tags span:nth-last-child(4) a[href$="tag=1"], .data.tags span:nth-last-child(4) a[href$="tag=2"], .data.tags span:nth-last-child(4) a[href$="tag=3"], .data.tags span:nth-last-child(4) a[href$="tag=4"], .data.tags span:nth-last-child(4) a[href$="tag=5"], .data.tags span:nth-last-child(4) a[href$="tag=6"], .data.tags span:nth-last-child(4) a[href$="tag=7"], .data.tags span:nth-last-child(4) a[href$="tag=8"], .data.tags span:nth-last-child(4) a[href$="tag=9"], .data.tags span:nth-last-child(4) a[href$="tag=10"] { left: calc(var(--x-offset) + 20px); border-radius: 0; color: var(--text) !important; /* box 2 colour */ } .data.tags span:nth-last-child(3) a[href$="tag=-"], .data.tags span:nth-last-child(3) a[href$="tag=1"], .data.tags span:nth-last-child(3) a[href$="tag=2"], .data.tags span:nth-last-child(3) a[href$="tag=3"], .data.tags span:nth-last-child(3) a[href$="tag=4"], .data.tags span:nth-last-child(3) a[href$="tag=5"], .data.tags span:nth-last-child(3) a[href$="tag=6"], .data.tags span:nth-last-child(3) a[href$="tag=7"], .data.tags span:nth-last-child(3) a[href$="tag=8"], .data.tags span:nth-last-child(3) a[href$="tag=9"], .data.tags span:nth-last-child(3) a[href$="tag=10"] { left: calc(var(--x-offset) + 40px); border-radius: 0; color: var(--text) !important; /* box 3 colour */ } .data.tags span:nth-last-child(2) a[href$="tag=-"], .data.tags span:nth-last-child(2) a[href$="tag=1"], .data.tags span:nth-last-child(2) a[href$="tag=2"], .data.tags span:nth-last-child(2) a[href$="tag=3"], .data.tags span:nth-last-child(2) a[href$="tag=4"], .data.tags span:nth-last-child(2) a[href$="tag=5"], .data.tags span:nth-last-child(2) a[href$="tag=6"], .data.tags span:nth-last-child(2) a[href$="tag=7"], .data.tags span:nth-last-child(2) a[href$="tag=8"], .data.tags span:nth-last-child(2) a[href$="tag=9"], .data.tags span:nth-last-child(2) a[href$="tag=10"] { left: calc(var(--x-offset) + 60px); border-radius: 0; color: var(--text) !important; /* box 4 colour */ } .data.tags span:nth-last-child(1) a[href$="tag=-"], .data.tags span:nth-last-child(1) a[href$="tag=1"], .data.tags span:nth-last-child(1) a[href$="tag=2"], .data.tags span:nth-last-child(1) a[href$="tag=3"], .data.tags span:nth-last-child(1) a[href$="tag=4"], .data.tags span:nth-last-child(1) a[href$="tag=5"], .data.tags span:nth-last-child(1) a[href$="tag=6"], .data.tags span:nth-last-child(1) a[href$="tag=7"], .data.tags span:nth-last-child(1) a[href$="tag=8"], .data.tags span:nth-last-child(1) a[href$="tag=9"], .data.tags span:nth-last-child(1) a[href$="tag=10"] { left: calc(var(--x-offset) + 80px); border-radius: 0 8.5px 8.5px 0; color: var(--text) !important; /* box 5 colour */ } /* add description on hover & remove pseudo comma from tags */ a[href$="tag=-"]:before, a[href$="tag=1"]:before, a[href$="tag=2"]:before, a[href$="tag=3"]:before, a[href$="tag=4"]:before, a[href$="tag=5"]:before, a[href$="tag=6"]:before, a[href$="tag=7"]:before, a[href$="tag=8"]:before, a[href$="tag=9"]:before, a[href$="tag=10"]:before { content: "" !important; position: absolute; top: 17px; left: calc(50% - 5px); z-index: 5; display: block; border-width: 5px; border-style: solid; border-color: transparent transparent var(--text-dim) transparent; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } a[href$="tag=-"]:after, a[href$="tag=1"]:after, a[href$="tag=2"]:after, a[href$="tag=3"]:after, a[href$="tag=4"]:after, a[href$="tag=5"]:after, a[href$="tag=6"]:after, a[href$="tag=7"]:after, a[href$="tag=8"]:after, a[href$="tag=9"]:after, a[href$="tag=10"]:after { content: "Story"; /* box 1 description */ position: absolute; top: 27px; left: 50%; z-index: 5; display: block; width: auto; max-width: 100px; height: auto; padding: 4px 8px; background: var(--btn-bg); border: 1px solid var(--text-dim); border-radius: 4px; box-sizing: border-box; color: var(--text); font: 11px/15px Arial, Verdana; text-align: left; white-space: pre-wrap; opacity: 0; transition: opacity 0.15s ease; transform: translateX(-50%); pointer-events: none; } a[href$="tag=-"]:hover:before, a[href$="tag=1"]:hover:before, a[href$="tag=2"]:hover:before, a[href$="tag=3"]:hover:before, a[href$="tag=4"]:hover:before, a[href$="tag=5"]:hover:before, a[href$="tag=6"]:hover:before, a[href$="tag=7"]:hover:before, a[href$="tag=8"]:hover:before, a[href$="tag=9"]:hover:before, a[href$="tag=10"]:hover:before, a[href$="tag=-"]:hover:after, a[href$="tag=1"]:hover:after, a[href$="tag=2"]:hover:after, a[href$="tag=3"]:hover:after, a[href$="tag=4"]:hover:after, a[href$="tag=5"]:hover:after, a[href$="tag=6"]:hover:after, a[href$="tag=7"]:hover:after, a[href$="tag=8"]:hover:after, a[href$="tag=9"]:hover:after, a[href$="tag=10"]:hover:after { opacity: 1; } span:nth-last-child(4) a[href$="tag=-"]:after, span:nth-last-child(4) a[href$="tag=1"]:after, span:nth-last-child(4) a[href$="tag=2"]:after, span:nth-last-child(4) a[href$="tag=3"]:after, span:nth-last-child(4) a[href$="tag=4"]:after, span:nth-last-child(4) a[href$="tag=5"]:after, span:nth-last-child(4) a[href$="tag=6"]:after, span:nth-last-child(4) a[href$="tag=7"]:after, span:nth-last-child(4) a[href$="tag=8"]:after, span:nth-last-child(4) a[href$="tag=9"]:after, span:nth-last-child(4) a[href$="tag=10"]:after { content: "Animation"; /* box 2 description */ } span:nth-last-child(3) a[href$="tag=-"]:after, span:nth-last-child(3) a[href$="tag=1"]:after, span:nth-last-child(3) a[href$="tag=2"]:after, span:nth-last-child(3) a[href$="tag=3"]:after, span:nth-last-child(3) a[href$="tag=4"]:after, span:nth-last-child(3) a[href$="tag=5"]:after, span:nth-last-child(3) a[href$="tag=6"]:after, span:nth-last-child(3) a[href$="tag=7"]:after, span:nth-last-child(3) a[href$="tag=8"]:after, span:nth-last-child(3) a[href$="tag=9"]:after, span:nth-last-child(3) a[href$="tag=10"]:after { content: "Characters"; /* box 3 description */ } span:nth-last-child(2) a[href$="tag=-"]:after, span:nth-last-child(2) a[href$="tag=1"]:after, span:nth-last-child(2) a[href$="tag=2"]:after, span:nth-last-child(2) a[href$="tag=3"]:after, span:nth-last-child(2) a[href$="tag=4"]:after, span:nth-last-child(2) a[href$="tag=5"]:after, span:nth-last-child(2) a[href$="tag=6"]:after, span:nth-last-child(2) a[href$="tag=7"]:after, span:nth-last-child(2) a[href$="tag=8"]:after, span:nth-last-child(2) a[href$="tag=9"]:after, span:nth-last-child(2) a[href$="tag=10"]:after { content: "Music"; /* box 4 description */ } span:nth-last-child(1) a[href$="tag=-"]:after, span:nth-last-child(1) a[href$="tag=1"]:after, span:nth-last-child(1) a[href$="tag=2"]:after, span:nth-last-child(1) a[href$="tag=3"]:after, span:nth-last-child(1) a[href$="tag=4"]:after, span:nth-last-child(1) a[href$="tag=5"]:after, span:nth-last-child(1) a[href$="tag=6"]:after, span:nth-last-child(1) a[href$="tag=7"]:after, span:nth-last-child(1) a[href$="tag=8"]:after, span:nth-last-child(1) a[href$="tag=9"]:after, span:nth-last-child(1) a[href$="tag=10"]:after { content: "Enjoyment"; /* box 5 description */ } /*------------------------E-N-D-*/ As ShaggyZE mentioned, I don't recommend removing that function altogether because there's no way then to know which part is which subrating. As for moving it, I tampered with the 'top' and 'left' parameters to move it below, and moved the arrow's position to the top of each box. As for deleting the hover itself without the color change, I'm not sure how to help you. It seems like those 2 are written to be kind of linked and I don't have the skillset to separate them into 2 different things, one of which you can do without. I hope moving the box helps you with space, though! |
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Mar 5, 2022 10:09 AM
#7409
L3noX said: can i have question about reposition this block with with arrow i am trying it in the code but all what i try do nothing where i need change this position on top of the score ? /*-S-T-A-R-T--------------------*\ | Advanced Scoring | https://myanimelist.net/forum/?topicid=1723114&show=650#msg62080071 \*------------------------------*/ .data.tags { /* horizontal/vertical offset from left of list */ --x-offset: 500px; --y-offset: calc(40% + 17.5px); } /* add decorative score background */ .data.tags div:after { content: ""; position: absolute; top: var(--y-offset); left: var(--x-offset); width: 98px; height: 17px; --i: var(--bg); background-image: linear-gradient( to right, #60588A 0px, #60588A 18px, /* 1st box */ transparent 18px, transparent 20px, #FBCCE3 20px, #FBCCE3 38px, /* 2nd box */ transparent 38px, transparent 40px, #8CE3FE 40px, #8CE3FE 58px, /* 3rd box */ transparent 58px, transparent 60px, #B6FAA5 60px, #B6FAA5 78px, /* 4th box */ transparent 78px, transparent 80px, #C899FF 80px, #C899FF 98px /* 5th box */ ); border-radius: 8.5px; } /* reposition score tags */ .data.tags a[href$="tag=-"], .data.tags a[href$="tag=1"], .data.tags a[href$="tag=2"], .data.tags a[href$="tag=3"], .data.tags a[href$="tag=4"], .data.tags a[href$="tag=5"], .data.tags a[href$="tag=6"], .data.tags a[href$="tag=7"], .data.tags a[href$="tag=8"], .data.tags a[href$="tag=9"], .data.tags a[href$="tag=10"] { position: absolute; top: var(--y-offset); z-index: 1; width: 18px; padding: 1px 0; margin: 0; pointer-events: auto; } .data.tags a[href$="tag=-"], .data.tags a[href$="tag=1"], .data.tags a[href$="tag=2"], .data.tags a[href$="tag=3"], .data.tags a[href$="tag=4"], .data.tags a[href$="tag=5"], .data.tags a[href$="tag=6"], .data.tags a[href$="tag=7"], .data.tags a[href$="tag=8"], .data.tags a[href$="tag=9"], .data.tags a[href$="tag=10"] { background: transparent !important; /* background on hover */ } .data.tags span:nth-last-child(5) a[href$="tag=-"], .data.tags span:nth-last-child(5) a[href$="tag=1"], .data.tags span:nth-last-child(5) a[href$="tag=2"], .data.tags span:nth-last-child(5) a[href$="tag=3"], .data.tags span:nth-last-child(5) a[href$="tag=4"], .data.tags span:nth-last-child(5) a[href$="tag=5"], .data.tags span:nth-last-child(5) a[href$="tag=6"], .data.tags span:nth-last-child(5) a[href$="tag=7"], .data.tags span:nth-last-child(5) a[href$="tag=8"], .data.tags span:nth-last-child(5) a[href$="tag=9"], .data.tags span:nth-last-child(5) a[href$="tag=10"] { left: var(--x-offset); border-radius: 8.5px 0 0 8.5px; color: #FFFFFF !important; /* box 1 colour */ } .data.tags span:nth-last-child(4) a[href$="tag=-"], .data.tags span:nth-last-child(4) a[href$="tag=1"], .data.tags span:nth-last-child(4) a[href$="tag=2"], .data.tags span:nth-last-child(4) a[href$="tag=3"], .data.tags span:nth-last-child(4) a[href$="tag=4"], .data.tags span:nth-last-child(4) a[href$="tag=5"], .data.tags span:nth-last-child(4) a[href$="tag=6"], .data.tags span:nth-last-child(4) a[href$="tag=7"], .data.tags span:nth-last-child(4) a[href$="tag=8"], .data.tags span:nth-last-child(4) a[href$="tag=9"], .data.tags span:nth-last-child(4) a[href$="tag=10"] { left: calc(var(--x-offset) + 20px); border-radius: 0; color: #FFFFFF !important; /* box 2 colour */ } .data.tags span:nth-last-child(3) a[href$="tag=-"], .data.tags span:nth-last-child(3) a[href$="tag=1"], .data.tags span:nth-last-child(3) a[href$="tag=2"], .data.tags span:nth-last-child(3) a[href$="tag=3"], .data.tags span:nth-last-child(3) a[href$="tag=4"], .data.tags span:nth-last-child(3) a[href$="tag=5"], .data.tags span:nth-last-child(3) a[href$="tag=6"], .data.tags span:nth-last-child(3) a[href$="tag=7"], .data.tags span:nth-last-child(3) a[href$="tag=8"], .data.tags span:nth-last-child(3) a[href$="tag=9"], .data.tags span:nth-last-child(3) a[href$="tag=10"] { left: calc(var(--x-offset) + 40px); border-radius: 0; color: #FFFFFF !important; /* box 3 colour */ } .data.tags span:nth-last-child(2) a[href$="tag=-"], .data.tags span:nth-last-child(2) a[href$="tag=1"], .data.tags span:nth-last-child(2) a[href$="tag=2"], .data.tags span:nth-last-child(2) a[href$="tag=3"], .data.tags span:nth-last-child(2) a[href$="tag=4"], .data.tags span:nth-last-child(2) a[href$="tag=5"], .data.tags span:nth-last-child(2) a[href$="tag=6"], .data.tags span:nth-last-child(2) a[href$="tag=7"], .data.tags span:nth-last-child(2) a[href$="tag=8"], .data.tags span:nth-last-child(2) a[href$="tag=9"], .data.tags span:nth-last-child(2) a[href$="tag=10"] { left: calc(var(--x-offset) + 60px); border-radius: 0; color: #FFFFFF !important; /* box 4 colour */ } .data.tags span:nth-last-child(1) a[href$="tag=-"], .data.tags span:nth-last-child(1) a[href$="tag=1"], .data.tags span:nth-last-child(1) a[href$="tag=2"], .data.tags span:nth-last-child(1) a[href$="tag=3"], .data.tags span:nth-last-child(1) a[href$="tag=4"], .data.tags span:nth-last-child(1) a[href$="tag=5"], .data.tags span:nth-last-child(1) a[href$="tag=6"], .data.tags span:nth-last-child(1) a[href$="tag=7"], .data.tags span:nth-last-child(1) a[href$="tag=8"], .data.tags span:nth-last-child(1) a[href$="tag=9"], .data.tags span:nth-last-child(1) a[href$="tag=10"] { left: calc(var(--x-offset) + 80px); border-radius: 0 8.5px 8.5px 0; color: #FFFFFF !important; /* box 5 colour */ } /* add description on hover & remove pseudo comma from tags */ a[href$="tag=-"]:before, a[href$="tag=1"]:before, a[href$="tag=2"]:before, a[href$="tag=3"]:before, a[href$="tag=4"]:before, a[href$="tag=5"]:before, a[href$="tag=6"]:before, a[href$="tag=7"]:before, a[href$="tag=8"]:before, a[href$="tag=9"]:before, a[href$="tag=10"]:before { content: "" !important; position: absolute; top: 17px; left: calc(50% - 5px); z-index: 5; display: block; border-width: 5px; border-style: solid; border-color: transparent transparent var(--text-dim) transparent; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } a[href$="tag=-"]:after, a[href$="tag=1"]:after, a[href$="tag=2"]:after, a[href$="tag=3"]:after, a[href$="tag=4"]:after, a[href$="tag=5"]:after, a[href$="tag=6"]:after, a[href$="tag=7"]:after, a[href$="tag=8"]:after, a[href$="tag=9"]:after, a[href$="tag=10"]:after { content: "Story"; /* box 1 description */ position: absolute; top: 27px; left: 50%; z-index: 5; display: block; width: auto; max-width: 75px; height: auto; padding: 4px 8px; background: var(--btn-bg); border: 1px solid var(--text-dim); border-radius: 4px; box-sizing: border-box; color: var(--text); font: 11px/15px Arial, Verdana; text-align: left; white-space: pre-wrap; opacity: 0; transition: opacity 0.15s ease; transform: translateX(-50%); pointer-events: none; } a[href$="tag=-"]:hover:before, a[href$="tag=1"]:hover:before, a[href$="tag=2"]:hover:before, a[href$="tag=3"]:hover:before, a[href$="tag=4"]:hover:before, a[href$="tag=5"]:hover:before, a[href$="tag=6"]:hover:before, a[href$="tag=7"]:hover:before, a[href$="tag=8"]:hover:before, a[href$="tag=9"]:hover:before, a[href$="tag=10"]:hover:before, a[href$="tag=-"]:hover:after, a[href$="tag=1"]:hover:after, a[href$="tag=2"]:hover:after, a[href$="tag=3"]:hover:after, a[href$="tag=4"]:hover:after, a[href$="tag=5"]:hover:after, a[href$="tag=6"]:hover:after, a[href$="tag=7"]:hover:after, a[href$="tag=8"]:hover:after, a[href$="tag=9"]:hover:after, a[href$="tag=10"]:hover:after { opacity: 1; } span:nth-last-child(4) a[href$="tag=-"]:after, span:nth-last-child(4) a[href$="tag=1"]:after, span:nth-last-child(4) a[href$="tag=2"]:after, span:nth-last-child(4) a[href$="tag=3"]:after, span:nth-last-child(4) a[href$="tag=4"]:after, span:nth-last-child(4) a[href$="tag=5"]:after, span:nth-last-child(4) a[href$="tag=6"]:after, span:nth-last-child(4) a[href$="tag=7"]:after, span:nth-last-child(4) a[href$="tag=8"]:after, span:nth-last-child(4) a[href$="tag=9"]:after, span:nth-last-child(4) a[href$="tag=10"]:after { content: "Animation"; /* box 2 description */ } span:nth-last-child(3) a[href$="tag=-"]:after, span:nth-last-child(3) a[href$="tag=1"]:after, span:nth-last-child(3) a[href$="tag=2"]:after, span:nth-last-child(3) a[href$="tag=3"]:after, span:nth-last-child(3) a[href$="tag=4"]:after, span:nth-last-child(3) a[href$="tag=5"]:after, span:nth-last-child(3) a[href$="tag=6"]:after, span:nth-last-child(3) a[href$="tag=7"]:after, span:nth-last-child(3) a[href$="tag=8"]:after, span:nth-last-child(3) a[href$="tag=9"]:after, span:nth-last-child(3) a[href$="tag=10"]:after { content: "Characters"; /* box 3 description */ } span:nth-last-child(2) a[href$="tag=-"]:after, span:nth-last-child(2) a[href$="tag=1"]:after, span:nth-last-child(2) a[href$="tag=2"]:after, span:nth-last-child(2) a[href$="tag=3"]:after, span:nth-last-child(2) a[href$="tag=4"]:after, span:nth-last-child(2) a[href$="tag=5"]:after, span:nth-last-child(2) a[href$="tag=6"]:after, span:nth-last-child(2) a[href$="tag=7"]:after, span:nth-last-child(2) a[href$="tag=8"]:after, span:nth-last-child(2) a[href$="tag=9"]:after, span:nth-last-child(2) a[href$="tag=10"]:after { content: "Music"; /* box 4 description */ } span:nth-last-child(1) a[href$="tag=-"]:after, span:nth-last-child(1) a[href$="tag=1"]:after, span:nth-last-child(1) a[href$="tag=2"]:after, span:nth-last-child(1) a[href$="tag=3"]:after, span:nth-last-child(1) a[href$="tag=4"]:after, span:nth-last-child(1) a[href$="tag=5"]:after, span:nth-last-child(1) a[href$="tag=6"]:after, span:nth-last-child(1) a[href$="tag=7"]:after, span:nth-last-child(1) a[href$="tag=8"]:after, span:nth-last-child(1) a[href$="tag=9"]:after, span:nth-last-child(1) a[href$="tag=10"]:after { content: "Enjoyment"; /* box 5 description */ } /*------------------------E-N-D-*/ I think it's somewhere there /* add description on hover & remove pseudo comma from tags */ a[href$="tag=-"]:before, a[href$="tag=1"]:before, a[href$="tag=2"]:before, a[href$="tag=3"]:before, a[href$="tag=4"]:before, a[href$="tag=5"]:before, a[href$="tag=6"]:before, a[href$="tag=7"]:before, a[href$="tag=8"]:before, a[href$="tag=9"]:before, a[href$="tag=10"]:before { content: "" !important; position: absolute; top: 17px; left: calc(50% - 5px); z-index: 5; display: block; border-width: 5px; border-style: solid; border-color: transparent transparent var(--text-dim) transparent; opacity: 0; transition: opacity 0.15s ease; pointer-events: none; } a[href$="tag=-"]:after, a[href$="tag=1"]:after, a[href$="tag=2"]:after, a[href$="tag=3"]:after, a[href$="tag=4"]:after, a[href$="tag=5"]:after, a[href$="tag=6"]:after, a[href$="tag=7"]:after, a[href$="tag=8"]:after, a[href$="tag=9"]:after, a[href$="tag=10"]:after { content: "Story"; /* box 1 description */ position: absolute; top: 27px; left: 50%; z-index: 5; display: block; width: auto; max-width: 75px; height: auto; padding: 4px 8px; background: var(--btn-bg); border: 1px solid var(--text-dim); border-radius: 4px; box-sizing: border-box; color: var(--text); font: 11px/15px Arial, Verdana; text-align: left; white-space: pre-wrap; opacity: 0; transition: opacity 0.15s ease; transform: translateX(-50%); pointer-events: none; } yea that's the right section, I sent you that code above.. here it is again but in full, you can adjust the top: of both to make it lower
/*-S-T-A-R-T--------------------*\
| Advanced Scoring |
https://myanimelist.net/forum/?topicid=1723114&show=650#msg62080071
\*------------------------------*/
.data.tags {
/* horizontal/vertical offset from left of list */
--x-offset: 500px;
--y-offset: calc(40% + 17.5px);
}
/* add decorative score background */
.data.tags div:after {
content: "";
position: absolute;
top: var(--y-offset);
left: var(--x-offset);
width: 98px;
height: 17px;
--i: var(--bg);
background-image: linear-gradient(
to right,
#60588A 0px, #60588A 18px, /* 1st box */
transparent 18px, transparent 20px,
#FBCCE3 20px, #FBCCE3 38px, /* 2nd box */
transparent 38px, transparent 40px,
#8CE3FE 40px, #8CE3FE 58px, /* 3rd box */
transparent 58px, transparent 60px,
#B6FAA5 60px, #B6FAA5 78px, /* 4th box */
transparent 78px, transparent 80px,
#C899FF 80px, #C899FF 98px /* 5th box */
);
border-radius: 8.5px;
}
/* reposition score tags */
.data.tags a[href$="tag=-"],
.data.tags a[href$="tag=1"],
.data.tags a[href$="tag=2"],
.data.tags a[href$="tag=3"],
.data.tags a[href$="tag=4"],
.data.tags a[href$="tag=5"],
.data.tags a[href$="tag=6"],
.data.tags a[href$="tag=7"],
.data.tags a[href$="tag=8"],
.data.tags a[href$="tag=9"],
.data.tags a[href$="tag=10"] {
position: absolute;
top: var(--y-offset);
z-index: 1;
width: 18px;
padding: 1px 0;
margin: 0;
pointer-events: auto;
}
.data.tags a[href$="tag=-"],
.data.tags a[href$="tag=1"],
.data.tags a[href$="tag=2"],
.data.tags a[href$="tag=3"],
.data.tags a[href$="tag=4"],
.data.tags a[href$="tag=5"],
.data.tags a[href$="tag=6"],
.data.tags a[href$="tag=7"],
.data.tags a[href$="tag=8"],
.data.tags a[href$="tag=9"],
.data.tags a[href$="tag=10"] {
background: transparent !important; /* background on hover */
}
.data.tags span:nth-last-child(5) a[href$="tag=-"],
.data.tags span:nth-last-child(5) a[href$="tag=1"],
.data.tags span:nth-last-child(5) a[href$="tag=2"],
.data.tags span:nth-last-child(5) a[href$="tag=3"],
.data.tags span:nth-last-child(5) a[href$="tag=4"],
.data.tags span:nth-last-child(5) a[href$="tag=5"],
.data.tags span:nth-last-child(5) a[href$="tag=6"],
.data.tags span:nth-last-child(5) a[href$="tag=7"],
.data.tags span:nth-last-child(5) a[href$="tag=8"],
.data.tags span:nth-last-child(5) a[href$="tag=9"],
.data.tags span:nth-last-child(5) a[href$="tag=10"] {
left: var(--x-offset);
border-radius: 8.5px 0 0 8.5px;
color: #FFFFFF !important; /* box 1 colour */
}
.data.tags span:nth-last-child(4) a[href$="tag=-"],
.data.tags span:nth-last-child(4) a[href$="tag=1"],
.data.tags span:nth-last-child(4) a[href$="tag=2"],
.data.tags span:nth-last-child(4) a[href$="tag=3"],
.data.tags span:nth-last-child(4) a[href$="tag=4"],
.data.tags span:nth-last-child(4) a[href$="tag=5"],
.data.tags span:nth-last-child(4) a[href$="tag=6"],
.data.tags span:nth-last-child(4) a[href$="tag=7"],
.data.tags span:nth-last-child(4) a[href$="tag=8"],
.data.tags span:nth-last-child(4) a[href$="tag=9"],
.data.tags span:nth-last-child(4) a[href$="tag=10"] {
left: calc(var(--x-offset) + 20px);
border-radius: 0;
color: #FFFFFF !important; /* box 2 colour */
}
.data.tags span:nth-last-child(3) a[href$="tag=-"],
.data.tags span:nth-last-child(3) a[href$="tag=1"],
.data.tags span:nth-last-child(3) a[href$="tag=2"],
.data.tags span:nth-last-child(3) a[href$="tag=3"],
.data.tags span:nth-last-child(3) a[href$="tag=4"],
.data.tags span:nth-last-child(3) a[href$="tag=5"],
.data.tags span:nth-last-child(3) a[href$="tag=6"],
.data.tags span:nth-last-child(3) a[href$="tag=7"],
.data.tags span:nth-last-child(3) a[href$="tag=8"],
.data.tags span:nth-last-child(3) a[href$="tag=9"],
.data.tags span:nth-last-child(3) a[href$="tag=10"] {
left: calc(var(--x-offset) + 40px);
border-radius: 0;
color: #FFFFFF !important; /* box 3 colour */
}
.data.tags span:nth-last-child(2) a[href$="tag=-"],
.data.tags span:nth-last-child(2) a[href$="tag=1"],
.data.tags span:nth-last-child(2) a[href$="tag=2"],
.data.tags span:nth-last-child(2) a[href$="tag=3"],
.data.tags span:nth-last-child(2) a[href$="tag=4"],
.data.tags span:nth-last-child(2) a[href$="tag=5"],
.data.tags span:nth-last-child(2) a[href$="tag=6"],
.data.tags span:nth-last-child(2) a[href$="tag=7"],
.data.tags span:nth-last-child(2) a[href$="tag=8"],
.data.tags span:nth-last-child(2) a[href$="tag=9"],
.data.tags span:nth-last-child(2) a[href$="tag=10"] {
left: calc(var(--x-offset) + 60px);
border-radius: 0;
color: #FFFFFF !important; /* box 4 colour */
}
.data.tags span:nth-last-child(1) a[href$="tag=-"],
.data.tags span:nth-last-child(1) a[href$="tag=1"],
.data.tags span:nth-last-child(1) a[href$="tag=2"],
.data.tags span:nth-last-child(1) a[href$="tag=3"],
.data.tags span:nth-last-child(1) a[href$="tag=4"],
.data.tags span:nth-last-child(1) a[href$="tag=5"],
.data.tags span:nth-last-child(1) a[href$="tag=6"],
.data.tags span:nth-last-child(1) a[href$="tag=7"],
.data.tags span:nth-last-child(1) a[href$="tag=8"],
.data.tags span:nth-last-child(1) a[href$="tag=9"],
.data.tags span:nth-last-child(1) a[href$="tag=10"] {
left: calc(var(--x-offset) + 80px);
border-radius: 0 8.5px 8.5px 0;
color: #FFFFFF !important; /* box 5 colour */
}
/* add description on hover & remove pseudo comma from tags */
a[href$="tag=-"]:before,
a[href$="tag=1"]:before,
a[href$="tag=10"]:before,
a[href$="tag=2"]:before,
a[href$="tag=3"]:before,
a[href$="tag=4"]:before,
a[href$="tag=5"]:before,
a[href$="tag=6"]:before,
a[href$="tag=7"]:before,
a[href$="tag=8"]:before,
a[href$="tag=9"]:before,
a[href$="tag=11"]:before {
content: ""!important;
position: absolute;
top: 27px !important;
left: calc(50% - 5px) !important;
z-index: 5;
display: block;
border-width: 5px;
border-style: solid;
border-color: transparent transparent var(--text-dim) transparent;
opacity: 0;
transition: opacity .15s ease;
pointer-events: none
}
a[href$="tag=-"]:after,
a[href$="tag=1"]:after,
a[href$="tag=10"]:after,
a[href$="tag=2"]:after,
a[href$="tag=3"]:after,
a[href$="tag=4"]:after,
a[href$="tag=5"]:after,
a[href$="tag=6"]:after,
a[href$="tag=7"]:after,
a[href$="tag=8"]:after,
a[href$="tag=9"]:after,
a[href$="tag=11"]:after {
content: "Story"; /* box 1 description */
position: absolute;
top: 31px !important;
left: 50% !important;
z-index: 5;
display: block;
width: auto;
max-width: max-content !important;
height: auto;
padding: 4px 8px;
background: var(--btn-bg);
border: 1px solid var(--text-dim);
border-radius: 4px;
box-sizing: border-box;
color: var(--text);
font: 11px/15px Arial, Verdana;
text-align: left;
white-space: pre-wrap;
opacity: 0;
transition: opacity .15s ease;
transform: translateX(-50%);
pointer-events: none
}
a[href$="tag=-"]:hover:before,
a[href$="tag=1"]:hover:before,
a[href$="tag=2"]:hover:before,
a[href$="tag=3"]:hover:before,
a[href$="tag=4"]:hover:before,
a[href$="tag=5"]:hover:before,
a[href$="tag=6"]:hover:before,
a[href$="tag=7"]:hover:before,
a[href$="tag=8"]:hover:before,
a[href$="tag=9"]:hover:before,
a[href$="tag=10"]:hover:before,
a[href$="tag=-"]:hover:after,
a[href$="tag=1"]:hover:after,
a[href$="tag=2"]:hover:after,
a[href$="tag=3"]:hover:after,
a[href$="tag=4"]:hover:after,
a[href$="tag=5"]:hover:after,
a[href$="tag=6"]:hover:after,
a[href$="tag=7"]:hover:after,
a[href$="tag=8"]:hover:after,
a[href$="tag=9"]:hover:after,
a[href$="tag=10"]:hover:after {
opacity: 1;
}
span:nth-last-child(4) a[href$="tag=-"]:after,
span:nth-last-child(4) a[href$="tag=1"]:after,
span:nth-last-child(4) a[href$="tag=2"]:after,
span:nth-last-child(4) a[href$="tag=3"]:after,
span:nth-last-child(4) a[href$="tag=4"]:after,
span:nth-last-child(4) a[href$="tag=5"]:after,
span:nth-last-child(4) a[href$="tag=6"]:after,
span:nth-last-child(4) a[href$="tag=7"]:after,
span:nth-last-child(4) a[href$="tag=8"]:after,
span:nth-last-child(4) a[href$="tag=9"]:after,
span:nth-last-child(4) a[href$="tag=10"]:after {
content: "Animation"; /* box 2 description */
}
span:nth-last-child(3) a[href$="tag=-"]:after,
span:nth-last-child(3) a[href$="tag=1"]:after,
span:nth-last-child(3) a[href$="tag=2"]:after,
span:nth-last-child(3) a[href$="tag=3"]:after,
span:nth-last-child(3) a[href$="tag=4"]:after,
span:nth-last-child(3) a[href$="tag=5"]:after,
span:nth-last-child(3) a[href$="tag=6"]:after,
span:nth-last-child(3) a[href$="tag=7"]:after,
span:nth-last-child(3) a[href$="tag=8"]:after,
span:nth-last-child(3) a[href$="tag=9"]:after,
span:nth-last-child(3) a[href$="tag=10"]:after {
content: "Characters"; /* box 3 description */
}
span:nth-last-child(2) a[href$="tag=-"]:after,
span:nth-last-child(2) a[href$="tag=1"]:after,
span:nth-last-child(2) a[href$="tag=2"]:after,
span:nth-last-child(2) a[href$="tag=3"]:after,
span:nth-last-child(2) a[href$="tag=4"]:after,
span:nth-last-child(2) a[href$="tag=5"]:after,
span:nth-last-child(2) a[href$="tag=6"]:after,
span:nth-last-child(2) a[href$="tag=7"]:after,
span:nth-last-child(2) a[href$="tag=8"]:after,
span:nth-last-child(2) a[href$="tag=9"]:after,
span:nth-last-child(2) a[href$="tag=10"]:after {
content: "Music"; /* box 4 description */
}
span:nth-last-child(1) a[href$="tag=-"]:after,
span:nth-last-child(1) a[href$="tag=1"]:after,
span:nth-last-child(1) a[href$="tag=2"]:after,
span:nth-last-child(1) a[href$="tag=3"]:after,
span:nth-last-child(1) a[href$="tag=4"]:after,
span:nth-last-child(1) a[href$="tag=5"]:after,
span:nth-last-child(1) a[href$="tag=6"]:after,
span:nth-last-child(1) a[href$="tag=7"]:after,
span:nth-last-child(1) a[href$="tag=8"]:after,
span:nth-last-child(1) a[href$="tag=9"]:after,
span:nth-last-child(1) a[href$="tag=10"]:after {
content: "Enjoyment"; /* box 5 description */
}
/*------------------------E-N-D-*/ |
ShaggyZEMar 5, 2022 10:18 AM
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 5, 2022 10:14 AM
#7410
Uji_Gintoki_Bowl said: As ShaggyZE mentioned, I don't recommend removing that function altogether because there's no way then to know which part is which subrating. As for moving it, I tampered with the 'top' and 'left' parameters to move it below, and moved the arrow's position to the top of each box. As for deleting the hover itself without the color change, I'm not sure how to help you. It seems like those 2 are written to be kind of linked and I don't have the skillset to separate them into 2 different things, one of which you can do without. I hope moving the box helps you with space, though! how did you change the arrow to point up instead of right? I couldn't figure that part out. |
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 5, 2022 11:13 AM
#7411
ShaggyZE said: (I lost my formatted css and my entire code just a text block now, so I don't mess with it anymore since it was a personal project and it's just about done being tampered with now except a tag addition if I need)Uji_Gintoki_Bowl said: As ShaggyZE mentioned, I don't recommend removing that function altogether because there's no way then to know which part is which subrating. As for moving it, I tampered with the 'top' and 'left' parameters to move it below, and moved the arrow's position to the top of each box. As for deleting the hover itself without the color change, I'm not sure how to help you. It seems like those 2 are written to be kind of linked and I don't have the skillset to separate them into 2 different things, one of which you can do without. I hope moving the box helps you with space, though! how did you change the arrow to point up instead of right? I couldn't figure that part out. I actually had no idea for a while. I've been looking around inspect element since I saw the message, and I think I found it! This is the part of the code that controls the arrow: /* add description on hover & remove pseudo comma from tags */
a[href$="tag=-"]:before,
a[href$="tag=1"]:before,
a[href$="tag=10"]:before,
a[href$="tag=2"]:before,
a[href$="tag=3"]:before,
a[href$="tag=4"]:before,
a[href$="tag=5"]:before,
a[href$="tag=6"]:before,
a[href$="tag=7"]:before,
a[href$="tag=8"]:before,
a[href$="tag=9"]:before,
a[href$="tag=11"]:before {
content: ""!important;
position: absolute;
top: 27px !important;
left: calc(50% - 5px) !important;
z-index: 5;
display: block;
border-width: 5px;
border-style: solid;
border-color: transparent transparent var(--text-dim) transparent;
opacity: 0;
transition: opacity .15s ease;
pointer-events: noneIt weird, because the arrow isn't actually an element. It's an aspect of the border properties of a point with no features (because it says content: ""). It seems to have a width of 5px, so essentially this is a 10x10 square defined by the borders. When there are 4 parameters, they describe subsequent sides in the border (top, right, bottom, left, in that order), like in border-color. The intersections of borders are overlapping, so the code assigns half of the interlap to one side of the border, and the other half to the other side. Here, the entire square is made up of borders, this forms the triangles that we see. In L3NOX's code, we see the following: The 4th border color parameter is the only non transparent one, so the block only has its left triangle filled in. In my code, the only non transparent side of the border is the top one, as shown below: To illustrate this is general, I treid assigning all the values of the border colors different colors and it works as shown below: I actually know nothing about CSS and all my work until now has been trial and error like this, and getting help from others (I'm pretty sure this must've been a coded in function when I got it, because I'm only realizing this now. In fact, the code you have codes for a bottom triangle like mine. The other person was using different parameters). I'm not 100% that this is the best and most formal way to explain it, but I hope it helps! |
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Mar 5, 2022 11:21 AM
#7412
| @Uji_Gintoki_Bowl I see, I thought that's where it was, but was confused with content: "" and then thought maybe it was in V.L's Theme.css, also thought it might have been done that way, but didn't try changing the colors to check, thanks for the explanation. |
ShaggyZEMar 5, 2022 11:28 AM
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 5, 2022 12:39 PM
#7413
ShaggyZE said: My pleasure! I'm actually glad to be working these things out because through my not knowing any css, I'm only gaining exp by playing around with things like this.@Uji_Gintoki_Bowl I see, I thought that's where it was, but was confused with content: "" and then thought maybe it was in V.L's Theme.css, also thought it might have been done that way, but didn't try changing the colors to check, thanks for the explanation. |
Please sign up for MangAlert! It's a little project I made that I'd really like to see the light of day and some users. MangAlert! (please sign up!) GitHub Repo (please star!) |
Mar 6, 2022 6:47 AM
#7414
| Hi, is there a way to remove this dark box when I hover over comments: |
Mar 6, 2022 1:39 PM
#7415
tbody[class*="list-item"]:hover,
.list-table tbody:nth-of-type(2n+1):hover {background-color:transparent !important;}
tr.list-table-data:hover {
background-color: rgba(0,0,0,.5) !important;
} |
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 9, 2022 9:46 AM
#7416
| my friend @purplepinapples wants to fix their list a little they use modern style, unchanged. the column titles are incredibly bunched up, like wsefhuawefhukjaefhujiklawefhujilawefhilawfehui they have all columns enabled in the settings due to wanting to scrape data so the goal is to make the list look like the standard modern style, with less columns enabled. hiding the unused, or lesser used ones but without interfering with the scraping of data advice? thx in advance |
Mar 9, 2022 10:55 AM
#7417
mtsRhea said: my friend @purplepinapples wants to fix their list a little they use modern style, unchanged. the column titles are incredibly bunched up, like wsefhuawefhukjaefhujiklawefhujilawefhilawfehui they have all columns enabled in the settings due to wanting to scrape data so the goal is to make the list look like the standard modern style, with less columns enabled. hiding the unused, or lesser used ones but without interfering with the scraping of data advice? thx in advance If they are ok with a wider list and have a wide screen, you could play around with this which I've used before to space the table info on my own list (my manga list has all columns atm). Their list can also probably be centered with the larger width if they wanna use it (or an even larger width if someone sets it higher than what I posted). I've been wanting to make a version of the default that makes the list wider, centers it for all and spaces out the info when all the columns are used cuz its a flaw of the default but it won't be anytime soon Would also need the code that control the row background so its not transparent and takes off the list border which cuts thru the row, not able to look that up atm .list-table{ width: 1450px; } .list-table .list-table-header .header-title.title { width: 320px !important; max-width: 320px !important; } original version is this for more advanced stuff, if its what I think it is it should widen the list as well but allow it to be useable on the smaller screens but I haven't tested it on their layout so I'm not sure (my layout is supposed to have this feature). For a default it also needs some touch-ups like the above I can't look into now but in theory maybe it would be a solution for them they would use but with the proper fixing after /* Table Structure */ .list-container{ width: 99%; } .list-block { position: absolute; left: 300px; padding-bottom: 50px; margin-top:-40px; } .list-table{ width: 1550px; } .list-table .list-table-header .header-title.title { width: 320px !important; max-width: 320px !important; } .list-table .list-table-data:after{ opacity: 0; content:"HERE";} |
Shishio-kunMar 9, 2022 11:05 AM
Mar 9, 2022 5:11 PM
#7418
mtsRhea said: my friend @purplepinapples wants to fix their list a little they use modern style, unchanged. the column titles are incredibly bunched up, like wsefhuawefhukjaefhujiklawefhujilawefhilawfehui they have all columns enabled in the settings due to wanting to scrape data so the goal is to make the list look like the standard modern style, with less columns enabled. hiding the unused, or lesser used ones but without interfering with the scraping of data advice? thx in advance it looks like the scraping of data is done with load.js, so they could literally just do display: none; on any column, they don't want to be shown. th.header-title.storage, td.data.storage {
display: none !important;
}
th.header-title.priority, td.data.priority {
display: none !important;
}
etc..since they are not scraping from the web page of their list itself. or visibility: hidden would work (not sure if either affects web scraping) or he could use Jikan API https://api.jikan.moe/v3/user/purplepinapples/animelist/all |
ShaggyZEMar 9, 2022 5:35 PM
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 13, 2022 5:17 PM
#7419
ShaggyZE said: it looks like the scraping of data is done with load.js, so they could literally just do display: none; on any column, they don't want to be shown. th.header-title.storage, td.data.storage {
display: none !important;
}
th.header-title.priority, td.data.priority {
display: none !important;
}
etc..since they are not scraping from the web page of their list itself. or visibility: hidden would work (not sure if either affects web scraping) or he could use Jikan API https://api.jikan.moe/v3/user/purplepinapples/animelist/all Am actually one of the devs on Jikan, but the animelist/all is just a restructured load.json response, it cant fetch more info if the user doesn't have the columns enabled on their user list. Disabling the stuff in CSS doesn't impact load.json at all, but not everything is public so can't scrape it with Jikan, need to be logged in in a browser, as all described in the readme Anyways, hiding columns with display none makes sense, I was able to fix it with:
.days,
.genre,
.demographic,
.magazine,
.retail,
.season,
.licensor,
.storage,
.publish,
.airing-started,
.airing-finished,
th.header-title:nth-child(13),
th.header-title:nth-child(14),
th.header-title:nth-child(15)
{
display: none !important;
}
Thanks :) |
purplepinapplesMar 13, 2022 5:27 PM
Mar 14, 2022 6:29 AM
#7420
purplepinapples said: the animelist/all is just a restructured load.json response, it cant fetch more info if the user doesn't have the columns enabled on their user list. but not everything is public so can't scrape it with Jikan, need to be logged in in a browser, as all described in the readme yea, I know about all that, obviously if they don't have the columns enabled even web scraping their list will be limited as for the things not public, needing to be logged in and using export you/he could also add MAL's API even though it's a pain in the ass to authenticate. |
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 18, 2022 6:27 AM
#7421
| Hi ! I tried customizing a pretty simple layout but some problems appeared and some were already there when I installed it... First, my bacground covers the screen all the way down to the bottom of my list instead of being at the right side and having its position move relatively to where I am on the list. Second, the stats on the filter overlap each other weirdly. Third, same thing with the icons at the top right and also the icons are almost white on a white border and I have trouble finding where is the code to change the color to black. Finally, the layout adds decimal for the scores but I don't want them, can I remove them ? Thanks in advanve for the help, sorry if I'm not clear I'll explain better if needed :D |
Mar 20, 2022 1:54 PM
#7422
Sagirem said: Hi ! I tried customizing a pretty simple layout but some problems appeared and some were already there when I installed it... First, my bacground covers the screen all the way down to the bottom of my list instead of being at the right side and having its position move relatively to where I am on the list. Second, the stats on the filter overlap each other weirdly. Third, same thing with the icons at the top right and also the icons are almost white on a white border and I have trouble finding where is the code to change the color to black. Finally, the layout adds decimal for the scores but I don't want them, can I remove them ? Thanks in advanve for the help, sorry if I'm not clear I'll explain better if needed :D I did not understand your point about white on white, but I fixed the rest. Simply replace wour code with what is in this pastebin https://pastebin.com/XnC3CzXP |
Mar 21, 2022 8:01 AM
#7423
| Heya there Shishio, I have been using the custom list of modern re:zero (https://myanimelist.net/forum/?topicid=1735768) but the images have been removed from imgur now. Do you still happen to have a backup of those images on your pc? And yeah I have tried wayback machine and google search, but most of them are not archived anywhere. I would really like to keep using this theme:) |
Mar 21, 2022 11:43 AM
#7424
Hycyntria said: Heya there Shishio, I have been using the custom list of modern re:zero (https://myanimelist.net/forum/?topicid=1735768) but the images have been removed from imgur now. Do you still happen to have a backup of those images on your pc? And yeah I have tried wayback machine and google search, but most of them are not archived anywhere. I would really like to keep using this theme:) I use that theme too, but I combined mine with ShelterStyleV3 list designed by Takana no Hana and modified it a lot, anyway I'm sure Shishio-kun will need to update those dropbox css files, but here you go in the meantime.
.status-menu-container .status-menu .status-button {
background-image: url(https://dl.dropboxusercontent.com/s/sf1tjhmkirlazgw/f9665an.png) !important;
}
.status-menu-container .status-menu .status-button:after {
background-image: url(https://dl.dropboxusercontent.com/s/sf1tjhmkirlazgw/f9665an.png) !important;
}
.list-menu-float .icon-menu {
background-image: url(https://dl.dropboxusercontent.com/s/gw2tok63wc9zz2d/xFG0Av3.png);
}
.header .header-menu .header-info a[href*="/login"],
.header .header-menu .header-info a[href*="/register"] {
background-image: url(https://dl.dropboxusercontent.com/s/gw2tok63wc9zz2d/xFG0Av3.png) !important;
}
.header .header-menu .list-menu .icon-menu {
background-image: url(https://dl.dropboxusercontent.com/s/gw2tok63wc9zz2d/xFG0Av3.png) !important;
}
.list-unit .list-status-title {
background-image: url(https://dl.dropboxusercontent.com/s/n8nen7akwgk2jmj/a1tKgXz.png) !important;
}
|
ShaggyZEMar 21, 2022 11:49 AM
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 22, 2022 7:30 AM
#7425
Pico-tan said: I did not understand your point about white on white, but I fixed the rest. Simply replace wour code with what is in this pastebin https://pastebin.com/XnC3CzXP Thanks ! You really fixed almost all my problems ! There's just one that didn't get fixed because i wasn't clear enough. I'm talking about these icons and borders : The icons are transparents and the border is white so I don't see them. Also, the two bars are overlapping each other a bit. Thanks again for the help ! I hope I was clearer this time |
Mar 22, 2022 1:41 PM
#7426
@Hycyntria should be all fixed in the new source code https://myanimelist.net/forum/?topicid=1735768 |
Mar 22, 2022 8:12 PM
#7427
Mar 23, 2022 3:00 AM
#7428
Aguileitus said: Hi all, For my anime list I was using a very cool Steins;Gate layout but it looks like all the original imgur images are no longer available and I was not able to find that layout in the list, what happened? :c I have the same issue, and it looks like the code is import from dropbox, so I don't know if we can fix it, here it a link to the layout: https://myanimelist.net/forum/?topicid=671463%3E |
Mar 23, 2022 4:07 AM
#7429
zestro371 said: Aguileitus said: Hi all, For my anime list I was using a very cool Steins;Gate layout but it looks like all the original imgur images are no longer available and I was not able to find that layout in the list, what happened? :c I have the same issue, and it looks like the code is import from dropbox, so I don't know if we can fix it, here it a link to the layout: https://myanimelist.net/forum/?topicid=671463%3E its an easy fix, just wait for Shishio-kun to update his dropbox as he should have the original images. |
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 23, 2022 4:28 AM
#7430
ShaggyZE said: zestro371 said: Aguileitus said: Hi all, For my anime list I was using a very cool Steins;Gate layout but it looks like all the original imgur images are no longer available and I was not able to find that layout in the list, what happened? :c I have the same issue, and it looks like the code is import from dropbox, so I don't know if we can fix it, here it a link to the layout: https://myanimelist.net/forum/?topicid=671463%3E its an easy fix, just wait for Shishio-kun to update his dropbox as he should have the original images. Unfortunately it's not an easy fix for me actually cuz I don't know where the images go as its not my layout and its also not my Dropbox so I can't send changes directly to the user :( Hahaido has control of that But I will look into repairing it in the source code here today with new image links turned into MAL server links which should be more reliable to all of us. I do have all the codes and images for many layouts and PSDs in an external cloud drive in case of disasters :D also I will try to organize some volunteers to help repair all the broken layouts (there may be something like 30-40 broken in all). |
Mar 23, 2022 4:59 AM
#7431
Shishio-kun said: ShaggyZE said: zestro371 said: Aguileitus said: Hi all, For my anime list I was using a very cool Steins;Gate layout but it looks like all the original imgur images are no longer available and I was not able to find that layout in the list, what happened? :c I have the same issue, and it looks like the code is import from dropbox, so I don't know if we can fix it, here it a link to the layout: https://myanimelist.net/forum/?topicid=671463%3E its an easy fix, just wait for Shishio-kun to update his dropbox as he should have the original images. Unfortunately it's not an easy fix for me actually cuz I don't know where the images go as its not my layout and its also not my Dropbox so I can't send changes directly to the user :( Hahaido has control of that But I will look into repairing it in the source code here today with new image links turned into MAL server links which should be more reliable to all of us. I do have all the codes and images for many layouts and PSDs in an external cloud drive in case of disasters :D also I will try to organize some volunteers to help repair all the broken layouts (there may be something like 30-40 broken in all). ah, I assumed it was your dropbox and you had the files since you repaired it several times already, but yea hopefully someone and obviously Hahaido has the original images, which hopefully still makes it an easy fix, just may take a bit longer, this is why I backup the images I use for themes so I can host them myself. |
ShaggyZEMar 23, 2022 5:51 AM
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 23, 2022 6:29 AM
#7432
Aguileitus said: Hi all, For my anime list I was using a very cool Steins;Gate layout but it looks like all the original imgur images are no longer available and I was not able to find that layout in the list, what happened? :c zestro371 said: Aguileitus said: Hi all, For my anime list I was using a very cool Steins;Gate layout but it looks like all the original imgur images are no longer available and I was not able to find that layout in the list, what happened? :c I have the same issue, and it looks like the code is import from dropbox, so I don't know if we can fix it, here it a link to the layout: https://myanimelist.net/forum/?topicid=671463%3E https://myanimelist.net/forum/?topicid=671463 I've fixed the source code, you have to to copy and paste the new code from the opening post (linked above) into your list CSS. It seems the animation was stuttering too, but I've added an update to make it smooth again |
Mar 23, 2022 11:55 AM
#7433
Shishio-kun said: Aguileitus said: Hi all, For my anime list I was using a very cool Steins;Gate layout but it looks like all the original imgur images are no longer available and I was not able to find that layout in the list, what happened? :c zestro371 said: Aguileitus said: Hi all, For my anime list I was using a very cool Steins;Gate layout but it looks like all the original imgur images are no longer available and I was not able to find that layout in the list, what happened? :c I have the same issue, and it looks like the code is import from dropbox, so I don't know if we can fix it, here it a link to the layout: https://myanimelist.net/forum/?topicid=671463%3E https://myanimelist.net/forum/?topicid=671463 I've fixed the source code, you have to to copy and paste the new code from the opening post (linked above) into your list CSS. It seems the animation was stuttering too, but I've added an update to make it smooth again It worked, thanks! |
Mar 23, 2022 2:11 PM
#7434
| hello after my magi layout style broke down a few days ago and all the images was removed from imgur i took allready existing layout and changed couple stuff with it the only thing i don't know how to change is how to make progress letters biggers tried changing various stuff and looked all but it always stays the same how to make bigger progress tag aka how much chapters i currently finished for manga(number tag as its very small) my layout : https://pastebin.com/6jKwEPcM |
Mar 24, 2022 2:24 AM
#7435
Sagirem said: Huh, that doesn't show up for me. So I can't help you with that one... Sorry :/Pico-tan said: I did not understand your point about white on white, but I fixed the rest. Simply replace wour code with what is in this pastebin https://pastebin.com/XnC3CzXP Thanks ! You really fixed almost all my problems ! There's just one that didn't get fixed because i wasn't clear enough. I'm talking about these icons and borders : The icons are transparents and the border is white so I don't see them. Also, the two bars are overlapping each other a bit. Thanks again for the help ! I hope I was clearer this time |
Mar 24, 2022 4:44 AM
#7436
Sagirem said: Pico-tan said: I did not understand your point about white on white, but I fixed the rest. Simply replace wour code with what is in this pastebin https://pastebin.com/XnC3CzXP Thanks ! You really fixed almost all my problems ! There's just one that didn't get fixed because i wasn't clear enough. I'm talking about these icons and borders : The icons are transparents and the border is white so I don't see them. Also, the two bars are overlapping each other a bit. Thanks again for the help ! I hope I was clearer this time at the bottom of your code is .list-menu-float {
background: white;.list-menu-float {
background: transparent; |
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 24, 2022 3:45 PM
#7437
ShaggyZE said: at the bottom of your code is .list-menu-float {
background: white;.list-menu-float {
background: transparent;Thanks, it solved my last problem, my list's perfect now ! |
Mar 28, 2022 10:43 AM
#7438
Using this for image transition on the side of the list. But no image is turning up when I hover over any row???
/* IMAGE TRANSISTIONS */
.data.image .image {
opacity: 1;
display: none;
}
.data.image a:before {
content: "";
display: block !important;
position: fixed;
top:20%;
right: calc( 50% + 530px);
width: 96px;
height: 136px;
background-color: rgba(0,0,0,.3);
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover;
border: 1px solid #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
visibility: hidden;
opacity: 0;
transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out;
z-index: 5;
}
.list-table .list-table-data:hover .data.image a:before {
visibility: visible;
opacity: 1;
right: calc( 50% + 510px);
transition: .3s ease-out;
}
I removed the .data.image .image {
opacity: 1;
display: none;
}and still nothing works. Is it also possible to make it so that when I hover over title alone the image will turn up. Instead of the entire row. ------ Image to show what I mean + is there a way to make the image align with what I am hovering over?? (hovering over demon slayer s2 and the image is way up on top despite the entry being on the bottom) |
NextUniverseMar 28, 2022 10:59 AM
Mar 28, 2022 12:15 PM
#7439
NextUniverse said: Using this for image transition on the side of the list. But no image is turning up when I hover over any row???
/* IMAGE TRANSISTIONS */
.data.image .image {
opacity: 1;
display: none;
}
.data.image a:before {
content: "";
display: block !important;
position: fixed;
top:20%;
right: calc( 50% + 530px);
width: 96px;
height: 136px;
background-color: rgba(0,0,0,.3);
background-position: center !important;
background-repeat: no-repeat !important;
background-size: cover;
border: 1px solid #ffffff;
box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
visibility: hidden;
opacity: 0;
transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out;
z-index: 5;
}
.list-table .list-table-data:hover .data.image a:before {
visibility: visible;
opacity: 1;
right: calc( 50% + 510px);
transition: .3s ease-out;
}
I removed the .data.image .image {
opacity: 1;
display: none;
}and still nothing works. Is it also possible to make it so that when I hover over title alone the image will turn up. Instead of the entire row. Image to show what I mean + is there a way to make the image align with what I am hovering over?? (hovering over demon slayer s2 and the image is way up on top despite the entry being on the bottom) you might be missing something like this code at the top of your list's CSS @\import "https://malscraper.azurewebsites.net/covers/anime/NextUniverse/presets/dataimagelinkbefore"; and the cover position code your using is fixed, so ofcourse it's not going to be relative to what your hovering over. if you set your list to public it will make it possible for me to look at the entire source and test it out on your list live. |
ShaggyZEMar 28, 2022 12:29 PM
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 28, 2022 12:20 PM
#7440
| @ShaggyZE I've opened it now. ShaggyZE said: Sorry, I am not entirely sure what this means. I got this CSS from another user. I am just adding a few extras here and there from other lists and what not.and the cover position code your using is fixed, so ofcourse it's not going to be relative to what your hovering over. ----- I will prolly ask again later, but I will leave it be for the time being. Thank you for the help. |
NextUniverseMar 28, 2022 1:04 PM
Mar 28, 2022 1:46 PM
#7441
NextUniverse said: @ShaggyZE I've opened it now. ShaggyZE said: Sorry, I am not entirely sure what this means. I got this CSS from another user. I am just adding a few extras here and there from other lists and what not.and the cover position code your using is fixed, so ofcourse it's not going to be relative to what your hovering over. ----- I will prolly ask again later, but I will leave it be for the time being. Thank you for the help. This is as close as I could get to what you wanted, not sure how to make the image only show up from title hover as everything I tried didn't work, you may have to adjust the left: -185px; for your screen. https://pastebin.com/FdUpAUnk |
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Mar 28, 2022 1:53 PM
#7442
ShaggyZE said: Oh snap, it runs well. Thank you very much for your help! NextUniverse said: @ShaggyZE I've opened it now. ShaggyZE said: and the cover position code your using is fixed, so ofcourse it's not going to be relative to what your hovering over. ----- I will prolly ask again later, but I will leave it be for the time being. Thank you for the help. This is as close as I could get to what you wanted, not sure how to make the image only show up from title hover as everything I tried didn't work, you may have to adjust the left: -185px; for your screen. https://pastebin.com/FdUpAUnk |
Mar 31, 2022 2:26 AM
#7443
Mar 31, 2022 6:00 AM
#7444
Pico-tan said: Hi, The style for my Manga lsit refuses to show up, which annoys me to no end. When inspecting in Firefox I find the stylesheet and all the rules but none of them are applied... Does anyone have any idea what to do? I'm guessing you need to change the http to https and/or to change the url import style to parenthesis, the codes below will get you started I went over it in part c, but maybe more fixes are needed after so let me know how it goes https://myanimelist.net/forum/?topicid=439897 @\import "https://dl.dropbox.com/s/jhwl0tuqq7unsz2/ef%20-%20a%20fairy%20tale%20of%20the%20two%20M.css"; @\import "https://dl.dropbox.com/s/dom0ycwyqr26190/TabContent.css"; @\import "https://dl.dropbox.com/s/lpz3w22fcxlxf2w/TopMenu.css"; @\import "https://dl.dropbox.com/s/3imoxu9zlh0j81b/CategoryMenu.css"; @\import "https://dl.dropbox.com/u/49469857/MAL/premade/manga.css"; #copyright { visibility: visible;} Such a cute layout! 😍 |
Mar 31, 2022 6:13 AM
#7445
| How do I add a link (to my profile) to my Banner Avatar of my css list? Like the All Anime or the Currently Watching tab just to my profile? |
Mar 31, 2022 12:37 PM
#7446
Hellreaver said: How do I add a link (to my profile) to my Banner Avatar of my css list? Like the All Anime or the Currently Watching tab just to my profile? I don't fully understand your post since there's several ways to interpret it, I think you want: Go to add links to images https://myanimelist.net/forum/?topicid=496203 Use the URL from the address bar of the page you want the image to link to, for example this is currently watching page: https://myanimelist.net/animelist/Hellreaver?status=1 All Anime https://myanimelist.net/animelist/Hellreaver?status=7 The opposite, a profile link on the anime list, is possible but super complicated |
Apr 3, 2022 1:51 AM
#7447
| Couldnt see a discord to send an image to make it easier. The "MAL" Icon that took me back to homepage has suddenly disappeared from the top left of my lists. no chrome update or anything, I was updating my list, refreshed and its vanished. I assume its just an image? I don't know as I can still click the spot and it works, its just invisible. The image is still up when i incognito (logged out) and check my list, the image is still there for a friend using the same type of design. Chrome. Version 100.0.4896.60 (Official Build) (64-bit) EDIT: I'll just edit the same message so its in 1 place. I disabled all the extensions / addons and it didnt fix it, I think its probably safe to assume it's easier to just ignore it since its only on my end. That extra code got 1 of the icons back, ill make do :) |
Swiper00Apr 3, 2022 8:23 AM
Apr 3, 2022 2:23 AM
#7448
Swiper00 said: Couldnt see a discord to send an image to make it easier. The "MAL" Icon that took me back to homepage has suddenly disappeared from the top left of my lists. no chrome update or anything, I was updating my list, refreshed and its vanished. I assume its just an image? I don't know as I can still click the spot and it works, its just invisible. The image is still up when i incognito (logged out) and check my list, the image is still there for a friend using the same type of design. Chrome. Version 100.0.4896.60 (Official Build) (64-bit) it is just an image, you can upload a screenshot using thousands of websites like imgur, dropbox, puush.me, ShareX makes it easy if on PC. you can also right-click and inspect it and watch Shishio-kun's videos on inspecting elements. The MAL logo appears fine for me both viewing your list and applying your code to my lists. I can only assume it's a plugin, extension, script or browser (though I also use chrome) if it's working fine for me and your friend, it's something on your end that has nothing to do with the theme or since your theme does have a lot of data-owner= code.. that could be oddly causing it. |
ShaggyZEApr 3, 2022 2:36 AM
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
Apr 3, 2022 2:31 AM
#7449
| No clue honestly, only thing i did was- go to list > update a show > hit f5 and then its been gone since. I Just grabbed the theme from here ages back so no idea how it works. I didn't do anything else so not sure how I could've broken it, but it seems to be my end with no fix currently |
Apr 3, 2022 2:43 AM
#7450
Swiper00 said: go to list > update a show > hit f5 and then its been gone since I imagine a lot more happened before, in between, and after that time neither me, you or anyone really was aware of that could have possibly caused it, but worst case scenario you can have someone with CSS knowledge teamview to your PC to figure out what's causing it if Shishio-kun doesn't figure it out when he sees this. if I was you I'd start with disabling some addons and extensions. |
![]() My Userscripts - Themes - Userstyles - Extensions (Chrome/Firefox) [API CSS] MAL-Scraper-API Cover/CSS Generator |
More topics from this board
Sticky: » 💚 [REPAIR STICKY] Repair/speed up layouts + Request layout fixes ( 1 2 )Shishio-kun - Nov 17, 2023 |
53 |
by Gokudera94
»»
Dec 19, 7:30 PM |
|
» [CSS- MODERN] ⭐ Minimal Dashboard layout by 5cm ~ Compact and convenient! ( 1 2 3 )Shishio-kun - Sep 4, 2020 |
133 |
by Shishio-kun
»»
Dec 2, 10:24 AM |
|
» ⭐Ready to be amazed? View the Bunkasai graphic and list design contest (VOTE YOUR FAVES!)Shishio-kun - Nov 22 |
3 |
by Shishio-kun
»»
Nov 28, 9:02 PM |
|
Sticky: » [ BBCODE ] All 2023 BBcodes, Guides, and Templates ( 1 2 )Shishio-kun - Feb 16, 2023 |
65 |
by F124N
»»
Nov 11, 1:31 AM |
|
» ✳️[9-7-24] New even higher quality Cover Imports! + Fixes for Takana Grids and moreShishio-kun - Sep 7, 2024 |
37 |
by Shishio-kun
»»
Oct 30, 4:42 AM |
