Skip to content

Instantly share code, notes, and snippets.

@qgustavor
Last active July 20, 2018 18:53
Show Gist options
  • Save qgustavor/d5b4e520d37c4016d073e1be755fc535 to your computer and use it in GitHub Desktop.
Save qgustavor/d5b4e520d37c4016d073e1be755fc535 to your computer and use it in GitHub Desktop.
Display the source blob
Display the rendered blob
Raw
<svg xmlns="http://www.w3.org/2000/svg"><text x="50%" y="50%" style="fill:white;font:5em sans-serif" dominant-baseline="central" text-anchor="middle">Moved to AniList.co</text></svg>
.initialize-tutorial {
display: none!important;
}
html, body {
overflow-x: hidden;
}
body {
background: radial-gradient(ellipse at center, #f9f9f9 0%, #cbcbcb 100%) 50% fixed !important;
overflow-y: hidden;
}
body::before {
content: '';
position: fixed;
width: 236px;
bottom: 3em;
left: 3em;
height: 251px;
z-index: -5;
background: url(https://vgy.me/p1vMcS.png) no-repeat;
animation: 4s steps(1, end) 0s infinite chii-blink;
pointer-events: none;
}
@keyframes chii-blink {
0%, 95% {
background-position: 0 0;
}
95%, 100% { background-position: 0 100%; }
}
@keyframes bg-video {
0% { background-position: 0 100%; }
100% { background-position: 0 0; }
}
.cover-block::after {
content: '';
position: fixed;
width: 236px;
bottom: 3em;
left: 3em;
height: 251px;
z-index: 0;
}
.cover-block .image-container.hide {
display: block;
overflow: hidden;
height: 0;
width: 0;
padding: 0;
}
.cover-block:hover .image-container::before,
.cover-block:hover .image-container::after,
.cover-block:hover::before,
.cover-block:hover + .status-menu-container::after {
content: '';
background: url(https://vgy.me/Ss5R5E.jpg) 0 100%/100% auto;
width: 50vw;
height: 50vh;
left: 0;
top: 0;
position: fixed;
z-index: -10;
transform-origin: right bottom;
animation: 2.15s steps(28, end) 0s infinite alternate bg-video;
}
.cover-block:hover .image-container::after {
transform: scaleX(-1) scaleY(-1);
}
.cover-block:hover::before {
transform: scaleY(-1);
}
.cover-block:hover + .status-menu-container::after {
transform: scaleX(-1);
}
a, .header .header-menu {
color: #244F31;
}
.header .header-menu .btn-menu,
.header .header-info {
text-align: left;
}
.list-unit .list-status-title {
background: none;
}
.list-menu-float {
position: absolute;
top: 9px;
right: 0;
left: 0;
width: 860px;
margin: 0 3em 0 auto;
margin: 0 10vw 0 auto;
}
.header {
width: 860px;
margin: 0 3em 0 auto;
margin: 0 10vw 0 auto;
}
.header .header-title {
left: 2em;
}
.list-menu-float .icon-menu {
float: right;
background: none;
}
.list-unit .list-status-title .stats a {
color: #244F31;
}
.status-menu-container.fixed {
position: static;
display: block;
}
.status-menu-container.fixed + div.list-block {
margin-top: 16px !important;
}
.header .header-menu {
right: auto;
left: 240px;
}
.header, .list-container {
background: none;
}
.list-container::before {
background: rgba(255, 255, 255, 0.5);
content: '';
position: absolute;
left: 0;
right: 0;
z-index: -3;
bottom: -5em;
top: -10em;
}
.list-table,
.list-menu-float,
.list-container,
.status-menu-container,
.list-unit .list-status-title,
.list-table .list-table-header .header-title,
.list-table .list-table-data .data {
border: none;
}
.status-menu-container {
padding-right: 12em;
box-sizing: border-box;
width: 100%;
}
.status-menu-container .status-menu {
position: relative;
}
.list-status-title {
position: absolute!important;
top: 0.5em;
width: 13em!important;
right: 0.5em;
}
.status-menu-container,
.list-table &gt; tbody:nth-of-type(2n+1),
.list-table .list-table-header .header-title {
background: none;
}
.status-menu-container .status-menu .status-button::after,
.list-unit .list-stats,
.list-menu-float .icon-menu:hover:not(.profile) {
background: #244F31;
}
.list-menu-float .icon-menu:hover:not(.profile) {
background: #244F31;
margin-right: -95px;
}
.list-table .list-table-data .data.status,
.list-table .list-table-header .header-title.status{
width: 0px;
background: none !important;
}
.list-unit .list-status-title .text,
.icon-watch {
display: none!important;
}
.header, .list-container {
background: none;
width: 860px;
margin: 0 10vw 0 auto;
}
.list-unit .list-stats,
.list-unit {
width: 100%;
}
.status-menu-container .status-menu .status-button.watching,
.status-menu-container .status-menu .status-button.reading,
a[href="/register.php"],
a.link[href*="/anime/5114/"] {
font-size: 0px!important;
}
.status-menu-container .status-menu .status-button.watching::before {
content: 'Watching';
font-size: 17.6px!important;
}
.status-menu-container .status-menu .status-button.reading::before {
content: 'Reading';
font-size: 17.6px!important;
}
a[href="/register.php"]::before {
content: 'Register';
font-size: 11px!important;
}
/* It's quite hard listening the narrator say something different from what is on the list.
I can't change the narrator, so I change the list */
a.link[href*="/anime/5114/"]::before {
content: 'Hagane no Renkinjutsushi: Fullmetal Alchemist';
font-size: 12.1px!important;
}
#footer-block {
background-color: #1c647e;
width: 860px;
margin: 0 3em 0 auto;
margin: 0 10vw 0 auto;
}
#copyright {
color: white;
}
.data.tags&gt;div {
font-size: 0px;
}
.data.tags&gt;div, .data.tags&gt;div a{
display:inline-block;
}
.data.tags&gt;div a::first-letter {
font-size: 11px;
color: #639;
}
.list-item:hover .data.tags&gt;div,
.list-item:hover .data.tags&gt;div a::first-letter{
font-size: 11px;
}
.list-table .list-table-data .tags .edit {display: none;}
.list-table .list-table-data:hover .tags .edit {
width: auto;
display: inline-block;
}
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://image.myanimelist.net/ui/aZAuFIhSIGLbRRPj4yIsKtE9Lhpes-5pq7M36jX7U9w4EKdXscKXndfevY6OdZvnfM4P55IaFFx-7Hey3uPS1LK0xYWHTUDNk3KeE1vnkvuT6upt-Q03zrBbD6QCDvbB) format('woff2');
}
.data.tags a[href*="tag="]::before{
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 18px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-moz-font-feature-settings: 'liga';
-moz-osx-font-smoothing: grayscale;
width: 1.2em;
text-align: center;
font-size-adjust: 0.5;
}
.data.tags a[href*="tag=annoying-lens-flare"]::before{content:"\eb46"}
.data.tags a[href*="tag=english-subtitles"]::before{content:"\e048"}
.data.tags a[href*="tag=polyglot"]::before{content:"\e894"}
.data.tags a[href*="tag=hard-to-find"]::before{content:"\e8b6"}
.data.tags a[href*="tag=irl-recommended"]::before{content:"\e625"}
.data.tags a[href*="tag=live"]::before{content:"\e639"}
.data.tags a[href*="tag=maybe-later"]::before{content:"\e8b5"}
.data.tags a[href*="tag=music-caught"]::before{content:"\e063"}
.data.tags a[href*="tag=not-fanreleased"]::before{content:"\e2c1"}
.data.tags a[href*="tag=official-stream"]::before{content:"\e8e8"}
.data.tags a[href*="tag=plan-to-rewatch"]::before{content:"\e8b3"}
.data.tags a[href*="tag=plan-to-reread"]::before{content:"\e8b3"}
.data.tags a[href*="tag=raw"]::before{content:"\e80e"}
.data.tags a[href*="tag=releases-paused"]::before{content:"\e615"}
.data.tags a[href*="tag=source-disappeared"]::before{content:"\e000"}
.data.tags a[href*="tag=tv"]::before{content:"\e333"}
.data.tags a[href*="tag=waiting-releases"]::before{content:"\e616"}
.data.tags a[href*="tag=wrong-order"]::before{content:"\e915"}
.data.tags a[href*="tag=next-to-watch"]::before{content:"\e903"}
.data.tags a[href*="tag=next-to-read"]::before{content:"\e903"}
.data.tags a[href*="tag=imouto"]::before{content:"\e545"}
.data.tags a[href*="tag=low-priority"]::before{content:"\e16d"}
.data.tags a[href*="tag=gif-caught"]::before{content:"\e62e"}
.data.tags a[href*="tag=horrible"]::before{content:"\e2c0"}
body[data-query*="\"tag\":"] .list-block::before {
text-align: center;
display: block;
background: #cadcf8;
padding: 0.5em 0;
font-size: 1.5em;
}
body[data-query*="\"tag\":\"annoying-lens-flare\""] .list-block::before {
content: "Collection of anime what I waited for BD because HDTV censorship.";
}
body[data-query*="\"tag\":\"english-subtitles\""] .list-block::before {
content: "Collection of anime that I watched in a language other than Portuguese (often English).";
}
body[data-query*="\"tag\":\"polyglot\""] .list-block::before {
content: "Collection of anime or manga that I watched or read in a language other than Portuguese.";
}
body[data-query*="\"tag\":\"hard-to-find\""] .list-block::before {
content: "Things that I can't find online.";
}
body[data-query*="\"tag\":\"irl-recommended\""] .list-block::before {
content: "Things recommended by someone from people I know personally.";
}
body[data-query*="\"tag\":\"live\""] .list-block::before {
content: "Anime I watched exactly when it was being aired on Japan (most of those via streaming).";
}
body[data-query*="\"tag\":\"maybe-later\""] .list-block::before {
content: "Things that I will watch or read later... or not.";
}
body[data-query*="\"tag\":\"music-caught\""] .list-block::before {
content: "Anime I wanted to watch because I liked the music.";
}
body[data-query*="\"tag\":\"not-fanreleased\""] .list-block::before {
content: "Things that only Japanese people watched or readed.";
}
body[data-query*="\"tag\":\"official-stream\""] .list-block::before {
content: "Anime that I watched by a a official stream (NicoNicoDouga, YouTube, etc)";
}
body[data-query*="\"tag\":\"plan-to-rewatch\""] .list-block::before {
content: "Anime that I will watch again some day.";
}
body[data-query*="\"tag\":\"plan-to-reread\""] .list-block::before {
content: "Anime that I will read again some day.";
}
body[data-query*="\"tag\":\"raw\""] .list-block::before {
content: "Things that I watched or readed without any kind of translation";
}
body[data-query*="\"tag\":\"releases-paused\""] .list-block::before {
content: "Things without new episodes or chapters released.";
}
body[data-query*="\"tag\":\"source-disappeared\""] .list-block::before {
content: "Things that disappeared from the internet.";
}
body[data-query*="\"tag\":\"tv\""] .list-block::before {
content: "Anime that I watched in OTA/Cable TV.";
}
body[data-query*="\"tag\":\"waiting-releases\""] .list-block::before {
content: "Things that made me learn more about be calm and wait.";
}
body[data-query*="\"tag\":\"wrong-order\""] .list-block::before {
content: "Things that I watched or readed in the wrong order.";
}
body[data-query*="\"tag\":\"next-to-watch\""] .list-block::before {
content: "Anime that I will watch soon.";
}
body[data-query*="\"tag\":\"next-to-read\""] .list-block::before {
content: "Manga that I will read soon.";
}
body[data-query*="\"tag\":\"imouto\""] .list-block::before {
content: "Things recommended by my otaku sister";
}
body[data-query*="\"tag\":\"low-priority\""] .list-block::before {
content: "Things that I will only watch if I don't have anything more to do";
}
body[data-query*="\"tag\":\"gif-caught\""] .list-block::before {
content: "Anime that I wanted to watch after watching a short animation of it (usually a gif)";
}
body[data-query*="\"tag\":\"horrible\""] .list-block::before {
content: "Anime that I watched via horrible means";
}
.list-table .list-table-data .data.title {
position: relative;
}
.content-status {
position: absolute;
right: 8em;
background: #244f31;
padding: 0 0.5em;
border-radius: 1em;
color: white!important;
}
.data.tags a[href*="tag=hard-to-find"]::after,
.data.tags a[href*="tag=not-fanreleased"]::after,
.data.tags a[href*="tag=releases-paused"]::after,
.data.tags a[href*="tag=waiting-releases"]::after,
.data.tags a[href*="tag=source-disappeared"]::after {
content: '';
position: absolute;
bottom: 0;
left: -738px;
top: 0;
right: 0;
background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.3) 10px, rgba(255, 255, 255, 0.3) 20px), linear-gradient(90deg, yellow, orange calc(50vw - 529px), orange calc(50vw + 529px), yellow);
background-attachment: scroll, fixed;
z-index: -1;
opacity: 0.75;
}
.data.tags a[href*="tag=hard-to-find"]::after,
.data.tags a[href*="tag=releases-paused"]::after,
.data.tags a[href*="tag=not-fanreleased"]::after {
background-image: repeating-linear-gradient( 45deg, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2) 10px, rgba(255, 255, 255, 0.3) 10px, rgba(255, 255, 255, 0.3) 20px), linear-gradient(90deg, red, #E5A2A2 calc(50vw - 529px), #E5A2A2 calc(50vw + 529px), red);
}
.data.tags {
position: relative;
}
body[data-query*='"status":7'] .status { position: relative; }
body[data-query*='"status":7'] .data.status:before {
display: block;
right: 2px;
line-height: 2em;
font-size: 1.5em;
text-indent: 10px;
white-space: nowrap;
text-align: right;
position: absolute;
border-bottom: 1px solid #26448f;
padding-right: 0.6em;
top: 0;
border-right: 5px solid #26448f;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5));
}
body[data-query*='"order":'] .data.status:before,
body[data-query*='"tag":'] .data.status:before,
body[data-query*='"s":'] .data.status:before {
display: none;
}
.list-table-data {
border: 0 dotted #FFF;
border-width: 1px 0;
}
/* give a hint about the easter egg and about how I don't like Google Chrome */
#copyright::after {
content: "It may not work well in Internet Explorer, Google Chrome and Lynx. Try Edge, Opera or Firefox.\APlease, be gentle with the cat.";
display: block;
opacity: 0.5;
white-space: pre-wrap;
}
.list-stats {
height: auto!important;
line-height: 1.5em!important;
padding: 5px;
box-sizing: border-box;
}
.anime .list-stats::after {
content: "For better stats check: https://qgustavor.tk/anime/";
opacity: 0.75;
display: block;
white-space: pre-wrap;
}
.anime .list-stats:hover::after {
content: "For better stats check: https://qgustavor.tk/anime/\A(myanimelist don't let me put a link here, you need to type it in address bar, sorry)";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment