21-01-21 Yoshe Tag Mod v4

Created Diff never expires
60 removals
Lines
Total
Removed
Words
Total
Removed
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
181 lines
227 additions
Lines
Total
Added
Words
Total
Added
To continue using this feature, upgrade to
Diffchecker logo
Diffchecker Pro
347 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-*/