21-01-21 Yoshe Tag Mod v4
181 lines
/*-S-T-A-R-T--------------------*\
/*-S-T-A-R-T--------------------*\
| Tag Tweaks for YoshePlays |
| Tag Tweaks for YoshePlays |
https://myanimelist.net/forum/?topicid=1723114&show=600#msg61718769
https://myanimelist.net/forum/?topicid=1723114&show=600#msg61718769
\*------------------------------*/
\*------------------------------*/
/* styling to make things look similar to horizontal tags */
/* styling to make things look similar to horizontal tags */
.list-table-data {
.list-table-data {
padding-bottom: 11px;
padding-bottom: 11px;
}
}
/* add decorative score background */
/* add decorative score background */
.data.tags div::before {
.data.tags div:after {
content: "";
content: "";
position: absolute;
position: absolute;
bottom: 4px;
bottom: 4px;
left: 80px;
left: 80px;
width: 98px;
width: 98px;
height: 17px;
height: 17px;
background-image: linear-gradient(
background-image: linear-gradient(
to right,
to right,
#212121 0px, #212121 18px, /* 1st box */
#212121 0px, #212121 18px, /* 1st box */
transparent 18px, transparent 20px,
transparent 18px, transparent 20px,
#212121 20px, #212121 38px, /* 2nd box */
#212121 20px, #212121 38px, /* 2nd box */
transparent 38px, transparent 40px,
transparent 38px, transparent 40px,
#212121 40px, #212121 58px, /* 3rd box */
#212121 40px, #212121 58px, /* 3rd box */
transparent 58px, transparent 60px,
transparent 58px, transparent 60px,
#212121 60px, #212121 78px, /* 4th box */
#212121 60px, #212121 78px, /* 4th box */
transparent 78px, transparent 80px,
transparent 78px, transparent 80px,
#212121 80px, #212121 98px /* 5th box */
#212121 80px, #212121 98px /* 5th box */
);
);
border-radius: 8.5px;
border-radius: 8.5px;
}
}
/* reposition score tags */
/* reposition score tags */
.data.tags a[href$="tag=-"],
.data.tags a[href$="tag=-"],
.data.tags a[href$="tag=1"],
.data.tags a[href$="tag=1"],
.data.tags a[href$="tag=2"],
.data.tags a[href$="tag=2"],
.data.tags a[href$="tag=3"],
.data.tags a[href$="tag=3"],
.data.tags a[href$="tag=4"],
.data.tags a[href$="tag=4"],
.data.tags a[href$="tag=5"],
.data.tags a[href$="tag=5"],
.data.tags a[href$="tag=6"],
.data.tags a[href$="tag=6"],
.data.tags a[href$="tag=7"],
.data.tags a[href$="tag=7"],
.data.tags a[href$="tag=8"],
.data.tags a[href$="tag=8"],
.data.tags a[href$="tag=9"],
.data.tags a[href$="tag=9"],
.data.tags a[href$="tag=10"] {
.data.tags a[href$="tag=10"] {
position: absolute;
position: absolute;
bottom: 4px;
bottom: 4px;
left: 80px;
width: 18px;
width: 18px;
padding: 1px 0;
padding: 1px 0;
margin: 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 {
cursor: default; /* resets cursor - delete this line to restore pointer cursor */
background: transparent !important; /* background on hover */
}
.tags span:nth-last-child(5) a[href$="tag=-"],
.tags span:nth-last-child(5) a[href$="tag=1"],
.tags span:nth-last-child(5) a[href$="tag=2"],
.tags span:nth-last-child(5) a[href$="tag=3"],
.tags span:nth-last-child(5) a[href$="tag=4"],
.tags span:nth-last-child(5) a[href$="tag=5"],
.tags span:nth-last-child(5) a[href$="tag=6"],
.tags span:nth-last-child(5) a[href$="tag=7"],
.tags span:nth-last-child(5) a[href$="tag=8"],
.tags span:nth-last-child(5) a[href$="tag=9"],
.tags span:nth-last-child(5) a[href$="tag=10"] {
left: 80px;
border-radius: 8.5px 0 0 8.5px;
color: var(--text) !important; /* box 1 colour */
color: var(--text) !important; /* box 1 colour */
}
}
.data.tags span:nth-last-child(4) a[href$="tag=-"],
.tags span:nth-last-child(4) a[href$="tag=-"],
.data.tags span:nth-last-child(4) a[href$="tag=1"],
.tags span:nth-last-child(4) a[href$="tag=1"],
.data.tags span:nth-last-child(4) a[href$="tag=2"],
.tags span:nth-last-child(4) a[href$="tag=2"],
.data.tags span:nth-last-child(4) a[href$="tag=3"],
.tags span:nth-last-child(4) a[href$="tag=3"],
.data.tags span:nth-last-child(4) a[href$="tag=4"],
.tags span:nth-last-child(4) a[href$="tag=4"],
.data.tags span:nth-last-child(4) a[href$="tag=5"],
.tags span:nth-last-child(4) a[href$="tag=5"],
.data.tags span:nth-last-child(4) a[href$="tag=6"],
.tags span:nth-last-child(4) a[href$="tag=6"],
.data.tags span:nth-last-child(4) a[href$="tag=7"],
.tags span:nth-last-child(4) a[href$="tag=7"],
.data.tags span:nth-last-child(4) a[href$="tag=8"],
.tags span:nth-last-child(4) a[href$="tag=8"],
.data.tags span:nth-last-child(4) a[href$="tag=9"],
.tags span:nth-last-child(4) a[href$="tag=9"],
.data.tags span:nth-last-child(4) a[href$="tag=10"] {
.tags span:nth-last-child(4) a[href$="tag=10"] {
left: 100px;
left: 100px;
border-radius: 0;
border-radius: 0;
color: var(--text) !important; /* box 2 colour */
color: var(--text) !important; /* box 2 colour */
}
}
.data.tags span:nth-last-child(3) a[href$="tag=-"],
.tags span:nth-last-child(3) a[href$="tag=-"],
.data.tags span:nth-last-child(3) a[href$="tag=1"],
.tags span:nth-last-child(3) a[href$="tag=1"],
.data.tags span:nth-last-child(3) a[href$="tag=2"],
.tags span:nth-last-child(3) a[href$="tag=2"],
.data.tags span:nth-last-child(3) a[href$="tag=3"],
.tags span:nth-last-child(3) a[href$="tag=3"],
.data.tags span:nth-last-child(3) a[href$="tag=4"],
.tags span:nth-last-child(3) a[href$="tag=4"],
.data.tags span:nth-last-child(3) a[href$="tag=5"],
.tags span:nth-last-child(3) a[href$="tag=5"],
.data.tags span:nth-last-child(3) a[href$="tag=6"],
.tags span:nth-last-child(3) a[href$="tag=6"],
.data.tags span:nth-last-child(3) a[href$="tag=7"],
.tags span:nth-last-child(3) a[href$="tag=7"],
.data.tags span:nth-last-child(3) a[href$="tag=8"],
.tags span:nth-last-child(3) a[href$="tag=8"],
.data.tags span:nth-last-child(3) a[href$="tag=9"],
.tags span:nth-last-child(3) a[href$="tag=9"],
.data.tags span:nth-last-child(3) a[href$="tag=10"] {
.tags span:nth-last-child(3) a[href$="tag=10"] {
left: 120px;
left: 120px;
border-radius: 0;
border-radius: 0;
color: var(--text) !important; /* box 3 colour */
color: var(--text) !important; /* box 3 colour */
}
}
.data.tags span:nth-last-child(2) a[href$="tag=-"],
.tags span:nth-last-child(2) a[href$="tag=-"],
.data.tags span:nth-last-child(2) a[href$="tag=1"],
.tags span:nth-last-child(2) a[href$="tag=1"],
.data.tags span:nth-last-child(2) a[href$="tag=2"],
.tags span:nth-last-child(2) a[href$="tag=2"],
.data.tags span:nth-last-child(2) a[href$="tag=3"],
.tags span:nth-last-child(2) a[href$="tag=3"],
.data.tags span:nth-last-child(2) a[href$="tag=4"],
.tags span:nth-last-child(2) a[href$="tag=4"],
.data.tags span:nth-last-child(2) a[href$="tag=5"],
.tags span:nth-last-child(2) a[href$="tag=5"],
.data.tags span:nth-last-child(2) a[href$="tag=6"],
.tags span:nth-last-child(2) a[href$="tag=6"],
.data.tags span:nth-last-child(2) a[href$="tag=7"],
.tags span:nth-last-child(2) a[href$="tag=7"],
.data.tags span:nth-last-child(2) a[href$="tag=8"],
.tags span:nth-last-child(2) a[href$="tag=8"],
.data.tags span:nth-last-child(2) a[href$="tag=9"],
.tags span:nth-last-child(2) a[href$="tag=9"],
.data.tags span:nth-last-child(2) a[href$="tag=10"] {
.tags span:nth-last-child(2) a[href$="tag=10"] {
left: 140px;
left: 140px;
border-radius: 0;
border-radius: 0;
color: var(--text) !important; /* box 4 colour */
color: var(--text) !important; /* box 4 colour */
}
}
.data.tags span:nth-last-child(1) a[href$="tag=-"],
.tags span:nth-last-child(1) a[href$="tag=-"],
.data.tags span:nth-last-child(1) a[href$="tag=1"],
.tags span:nth-last-child(1) a[href$="tag=1"],
.data.tags span:nth-last-child(1) a[href$="tag=2"],
.tags span:nth-last-child(1) a[href$="tag=2"],
.data.tags span:nth-last-child(1) a[href$="tag=3"],
.tags span:nth-last-child(1) a[href$="tag=3"],
.data.tags span:nth-last-child(1) a[href$="tag=4"],
.tags span:nth-last-child(1) a[href$="tag=4"],
.data.tags span:nth-last-child(1) a[href$="tag=5"],
.tags span:nth-last-child(1) a[href$="tag=5"],
.data.tags span:nth-last-child(1) a[href$="tag=6"],
.tags span:nth-last-child(1) a[href$="tag=6"],
.data.tags span:nth-last-child(1) a[href$="tag=7"],
.tags span:nth-last-child(1) a[href$="tag=7"],
.data.tags span:nth-last-child(1) a[href$="tag=8"],
.tags span:nth-last-child(1) a[href$="tag=8"],
.data.tags span:nth-last-child(1) a[href$="tag=9"],
.tags span:nth-last-child(1) a[href$="tag=9"],
.data.tags span:nth-last-child(1) a[href$="tag=10"] {
.tags span:nth-last-child(1) a[href$="tag=10"] {
left: 160px;
left: 160px;
border-radius: 0 50% 50% 0;
border-radius: 0 8.5px 8.5px 0;
color: var(--text) !important; /* box 5 colour */
color: var(--text) !important; /* box 5 colour */
}
}
/* remove pseudo comma from tags */
/* add description on hover & remove pseudo comma from tags */
.data.tags a[href$="tag=-"]::before,
a[href$="tag=-"]:before,
.data.tags a[href$="tag=1"]::before,
a[href$="tag=1"]:before,
.data.tags a[href$="tag=2"]::before,
a[href$="tag=2"]:before,
.data.tags a[href$="tag=3"]::before,
a[href$="tag=3"]:before,
.data.tags a[href$="tag=4"]::before,
a[href$="tag=4"]:before,
.data.tags a[href$="tag=5"]::before,
a[href$="tag=5"]:before,
.data.tags a[href$="tag=6"]::before,
a[href$="tag=6"]:before,
.data.tags a[href$="tag=7"]::before,
a[href$="tag=7"]:before,
.data.tags a[href$="tag=8"]::before,
a[href$="tag=8"]:before,
.data.tags a[href$="tag=9"]::before,
a[href$="tag=9"]:before,
.data.tags a[href$="tag=10"]::before {
a[href$="tag=10"]:before {
content: none;
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: 340px;
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: "Sound"; /* 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 */
}
}
/* reposition & restyle season & studio */
/* reposition & restyle season & studio */
.data.season, .data.studio {
.data.season, .data.studio {
position: absolute;
position: absolute;
bottom: 4px;
bottom: 4px;
height: 15px;
height: 15px;
background: #212121;
background: #212121;
border-radius: 8.5px;
border-radius: 8.5px;
}
}
.data.season {
.data.season {
left: 182px;
left: 182px;
padding: 1px 0 !important;
padding: 1px 0 !important;
line-height: 15px;
line-height: 15px;
}
}
.data.season::before {
.data.season:before {
content: none;
content: none;
}
}
/* reposition & restyle studio */
/* reposition & restyle studio */
.data.studio {
.data.studio {
left: 278px;
left: 278px;
width: auto;
width: auto;
padding: 1px 8px !important;
padding: 1px 8px !important;
white-space: nowrap;
white-space: nowrap;
}
}
.data.studio span {
.data.studio span {
display: inline;
display: inline;
font-size: 11px !important;
font-size: 11px !important;
}
}
.data.studio a {
.data.studio a {
display: inline;
display: inline;
background: none !important;
background: none !important;
}
}
.data.studio:empty:before {
white-space: nowrap;
}
.list-table .list-table-data .studio span a:hover {
.list-table .list-table-data .studio span a:hover {
color: var(--text-h) !important;
color: var(--text-h) !important;
}
}
/*------------------------E-N-D-*/
/*------------------------E-N-D-*/