-
-
Save gtkatakura/e08d92bc78eac21989e317741f26ea3d to your computer and use it in GitHub Desktop.
Superovoce is at it again!
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* ANILIST MODIFIERS */ | |
{ANILIST-COVERS=LRG} | |
/* ACTUAL CASCADING STYLE SHEETS -- Explore it all to find DISABLED FEATURES you might want enabled (or not, what do I know) */ | |
@import "http://fonts.googleapis.com/css?family=Maven+Pro"; /* Custom font, feel free to delete if you don't want it */ | |
body { | |
background-color: #333; | |
background: url(http://www.imgweave.com/view/5881.png) fixed center / cover; /* This is where you set the background picture! */ | |
font-family: Maven Pro; /* Making use of the imported font -- delete this too if you deleted the font @import */ | |
overflow-x: hidden!important | |
} | |
h3 { | |
color: #fff!important; /* List heading color */ | |
background: rgba(0,0,0,.6); | |
//text-align: center; | |
//text-transform: lowercase!important; | |
vertical-align: bottom; | |
font-weight: 100; | |
font-size: 1.8em!important; | |
letter-spacing: .1em; | |
height: 50px | |
} | |
/* Adds icons before list headings */ | |
#watching h3::before, #reading h3::before { | |
margin-left: 10px; | |
font-family: FontAwesome; | |
content: "\f144 " | |
} | |
#completed h3::before { | |
margin-left: 10px; | |
font-family: FontAwesome; | |
content: "\f058 " | |
} | |
#plantowatch h3::before, #plantoread h3::before { | |
margin-left: 10px; | |
font-family: FontAwesome; | |
content: "\f055 " | |
} | |
#onhold h3::before { | |
margin-left: 10px; | |
font-family: FontAwesome; | |
content: "\f059 " | |
} | |
#dropped h3::before { | |
margin-left: 10px; | |
font-family: FontAwesome; | |
content: "\f057 " | |
} | |
/* Okay, enough icons */ | |
.list_wrapper { | |
width: 85%; | |
margin-left: 8%; | |
margin-top: 38px | |
} | |
/* ORDERING -- Change the order numbers to reorder your lists */ | |
#lists { | |
display: flex; | |
flex-direction: column | |
} | |
#watching { | |
order: 0 | |
} | |
#completed { | |
order: 1 | |
} | |
#plantowatch { | |
order: 2 | |
} | |
#onhold { | |
order: 3 | |
} | |
#dropped { | |
order: 4 | |
} | |
/* CARDS -- Styling of the animu/mango cards */ | |
#watching thead { | |
display: none!important | |
} | |
thead { | |
//display: none!important; | |
height: 30px!important | |
} | |
thead tr { | |
background: transparent; | |
float: right; | |
width: 110px; | |
height: 0!important; | |
margin-top: -207px | |
} | |
th.header__progress { | |
display: none | |
} | |
th.header__status { | |
display: none | |
} | |
thead th { | |
border: none; | |
width: 40px!important | |
} | |
thead tr th.header__title { | |
display: inline-block; | |
position: relative; | |
top: -62px; | |
left: -154px; | |
color: #fff; | |
width: 200px!important | |
} | |
thead tr th.header__title:before { | |
content: "Sort by: "; | |
opacity: .8; | |
padding-right: 10px; | |
color: #fff | |
} | |
thead tr th:hover { | |
color: hsl(210,100%,65%) | |
} | |
thead tr th:hover:before { | |
color: #fff | |
} | |
table { | |
background: transparent; | |
color: #2f343c; | |
padding-left: 7px; | |
padding-right: 7px; | |
box-shadow: none!important | |
} | |
td.row__status.sml_col.cap { | |
display: none!important | |
} | |
tr { | |
background-color: rgba(0,0,0,.6); /* Card bg color */ | |
background-repeat: no-repeat; | |
background-position: 0 0; | |
background-size: 158px 200px; | |
padding-top: 200px; | |
height: 240px; | |
width: 158px; | |
border-radius: 3px; | |
float: left; | |
margin: 7px; | |
border-bottom-color: rgba(0,0,0,.3) | |
} | |
/* COLORING -- Enable this to alter list accent colors -> Default: Red dropped BG and gradient for watching title bar */ | |
/* DELETE THIS LINE to enable | |
#dropped tr,#dropped h3,#dropped .hover_icon a { | |
background-color: hsla(355,100%,36%,.7) | |
} | |
#dropped thead tr { | |
background: transparent | |
} | |
#watching h3 { | |
background: linear-gradient(to left,transparent,transparent,rgba(0,0,0,.6)) | |
} | |
tr:last-of-type { | |
border-bottom: rgba(0,0,0,.3) 1px solid | |
} | |
thead * { | |
border-bottom: none!important | |
} | |
AND THIS ONE*/ | |
/* WATCHING BIG -- Enable this if you watch big anime like me (makes the cards in watching list bigger, that's all) */ | |
/* DELETE THIS LINE to enable | |
@media screen and (min-width: 766px) { | |
#watching tr { | |
background-size: 225px 310px; | |
width: 225px; | |
height: 360px | |
} | |
#watching .hover_icon span[class*="tag"] { | |
width: 225px | |
} | |
#watching td.hover_icon a { | |
bottom: -10px; | |
width: 225px; | |
padding: 10px; | |
font-size: 1.2em; | |
line-height: 1.4em | |
} | |
#watching .sml_col { | |
bottom: -17px; | |
width: 225px; | |
font-size: 1.6em; | |
letter-spacing: 3px | |
} | |
#watching .hint--notes { | |
width: 225px!important | |
} | |
#watching .hint:hover { | |
min-height: 310px; | |
max-height: 9001% | |
} | |
} | |
AND THIS ONE*/ | |
td.hover_icon { | |
position: relative; | |
display: inline-block; | |
padding: 0 316px 0 0; | |
line-height: 1.25em; | |
//color: #2f343c; | |
color: #fff; /* Anime title color */ | |
text-align: center; | |
height: 100px!important; | |
width: 158px!important | |
} | |
td.hover_icon a { | |
position: absolute; | |
width: 158px; | |
padding: 5px 7px; | |
bottom: 100px; | |
background: rgba(0,0,0,.6); | |
z-index: 0!important | |
} | |
@media screen and (min-width: 766px) { | |
td.hover_icon a:hover { | |
opacity: 0; | |
transform: translateY(4px) | |
} | |
td.hover_icon a:hover ~ span[class*="tag"] { | |
opacity: 0 | |
} | |
.list__tag * { | |
background-color: #333; | |
width: 20px; | |
height: 20px; | |
border-radius: 20px; | |
padding: 1px; | |
line-height: 20px | |
} | |
.tag_re,.tag_notes { | |
position: absolute; | |
z-index: 2; | |
color: #fff; | |
opacity: .9; | |
top: 5px; | |
left: 5px | |
} | |
.tag_re { | |
left: 113px; | |
width: 40px; | |
top: 5px; | |
text-align: left; | |
padding-left: 5px | |
} | |
.hint--re { | |
top: 5px!important; | |
left: 130px; | |
min-height: 0!important; | |
display: block; | |
opacity: 1; | |
background: none | |
} | |
.hint--notes { | |
border-radius: 3px 3px 0 0; | |
width: 158px!important; | |
min-height: 0; | |
max-height: 40px; | |
overflow: hidden; | |
position: absolute; | |
top: 3px; | |
left: 0!important; | |
padding: 7px; | |
background-color: rgba(0,0,0,.8); | |
color: #fff; | |
display: block; | |
transition: all .2s ease | |
} | |
.hint:hover { | |
min-height: 200px; | |
max-height: 9001% | |
} | |
.hover_icon span[class*="tag"] { | |
position: absolute; | |
color: #2f343c; | |
opacity: 1; | |
top: -200px; | |
width: 158px; | |
left: 0; | |
background: rgba(0,0,0,.6); | |
color: #fff; | |
transition: opacity .2s | |
} | |
} | |
.sml_col { | |
position: relative; | |
bottom: 97px; | |
height: 35px; | |
line-height: 15px; | |
width: 158px; | |
color: #fff; | |
//background: rgba(255,255,255,.7) | |
} | |
.row__score { | |
font-size: 1.6em; | |
//width: 20px | |
} | |
#lists div:not(#completed) .row__score { | |
display: none | |
} | |
/*#lists .row__episodes::before { | |
content: "\f0c9"; | |
font-family: FontAwesome | |
} */ | |
.row__type { | |
display: none | |
} | |
/* CARDS END */ | |
/* | |
EDIT POP-UP -- This is not a real pop-up and thus likes to hide behind some card elements in some browsers. | |
If you like your classic pop-up, add {ANILIST-POPUP} to the top of this CSS. | |
I use this one because the classic one CRASHES the page on some browsers like Safari on iPad. | |
*/ | |
.update { | |
height: 220px!important; | |
width: 100%!important; | |
position: fixed; | |
bottom: 0; | |
left: 0; | |
border-radius: 0; | |
margin: 0!important; | |
background: rgba(255,255,255,.95); | |
z-index: 999!important | |
} | |
.update > td { | |
position: absolute; | |
left: 0; | |
right: 0; | |
top: 0; | |
margin: auto | |
} | |
/* AT MEDIA SCREEN AND MAX WIDTH OF 765 PIXELS! -- Making the list usable on mobile */ | |
@media screen and (max-width: 765px) { | |
thead { | |
display: none | |
} | |
.list_wrapper { | |
width: 100%; | |
margin-left: 0; | |
padding-left: 0; | |
padding-right: 0 | |
} | |
h3 { | |
text-shadow: none; | |
text-align: center; | |
text-transform: uppercase!important; | |
font-size: 2em!important; | |
letter-spacing: .1em; | |
width: 100%; | |
height: 50px; | |
background: rgba(38,47,62,.6) | |
} | |
h3:first-child { | |
margin-top: 60px | |
} | |
tr { | |
padding-left: 158px; | |
padding-top: 0; | |
height: 200px; | |
width: 100%; | |
border-radius: 0; | |
margin: 10px 0 | |
} | |
td.hover_icon { | |
padding: 0; | |
text-align: initial; | |
height: 200px!important; | |
width: 100%!important | |
} | |
td.hover_icon a { | |
width: initial; | |
font-size: 1.7em; | |
padding: 10px 20px; | |
line-height: 1.2em; | |
background: none; | |
top: 0 | |
} | |
.sml_col { | |
position: relative; | |
float: right; | |
bottom: 50px; | |
right: 10px; | |
background: none; | |
text-shadow: none; | |
height: 50px; | |
line-height: 20px; | |
font-size: 20px; | |
width: 80px | |
} | |
.row__score { | |
font-size: 30px | |
} | |
.row__type { | |
display: none | |
} | |
.tag_re,.tag_notes { | |
position: absolute; | |
font-size: 2em; | |
z-index: 2; | |
opacity: .9; | |
top: 150px; | |
left: 10px; | |
color: #fff | |
} | |
.tag_re { | |
top: 109px | |
} | |
.hint { | |
border-radius: 0; | |
width: 100vw!important; | |
min-height: 200px; | |
position: absolute; | |
top: -10px; | |
left: -160px!important; | |
padding: 15px; | |
font-size: 1.3em!important | |
} | |
.update { | |
height: 100vh!important; | |
width: 95%!important; | |
position: fixed | |
} | |
.update > td { | |
margin-top: 0 | |
} | |
.update .fa-times { | |
position: absolute; | |
bottom: -30px; | |
left: 20px; | |
font-size: 1.5em | |
} | |
.plus { | |
opacity: 1!important; | |
user-select: none | |
} | |
#list_header { | |
width: 10px!important | |
} | |
} | |
/* | |
* HEADER SECTION START | |
* | |
* TO SWAP THIS NEW HEADER FOR THE OLD TRANSFORMING ONE, DELETE ALL THE #list_header CODE IN THIS SECTION BELOW, THEN GET THE OLD CODE FROM: | |
* http://pastebin.com/raw.php?i=xRBbd1nh | |
* AND PASTE IT INSIDE THIS SECTION | |
* | |
* TO GET BACK THE NORMAL HEADER, JUST DELETE ALL THE #list_header CODE IN THIS SECTION BELOW AND LEAVE IT EMPTY. | |
* | |
* | | |
* V | |
*/ | |
#list_header { | |
position: absolute; | |
width: 155px; | |
top: 25px; | |
//right: 0; | |
//left: -55px; | |
margin: auto; | |
background: none; | |
box-shadow: none | |
} | |
#list_header a:not(.display_name) { | |
display: none | |
} | |
.display_name { | |
font-size: 1.8em!important | |
} | |
#filter { | |
position: fixed; | |
top: 15px; | |
right: 20px; | |
padding-right: 10px!important; | |
text-align: right; | |
font-size: 1.3em; | |
cursor: pointer | |
} | |
#filter::-webkit-input-placeholder::after {font-family: FontAwesome; content: " \f0b0"} | |
#filter::-webkit-input-placeholder { | |
color: white; | |
} | |
#filter:-moz-placeholder { | |
color: white; | |
} | |
#filter:-moz-placeholder::after {font-family: FontAwesome; content: " \f0b0"} | |
#filter::-moz-placeholder { | |
color: white; | |
} | |
#filter:-ms-input-placeholder { | |
color: white; | |
} | |
div.img_crop { | |
width: 50px!important; | |
height: 50px!important; | |
border-radius: 50%!important; | |
background-color: rgba(0,0,0,.6); | |
background-size: 40px!important; | |
background-position: center | |
} | |
@media screen and (max-width: 765px) { | |
#list_header { | |
width: 185px; | |
height: 60px; | |
line-height: 40px; | |
font-size: 1.4em; | |
transition: none; | |
margin: auto | |
} | |
div.img_crop { | |
width: 60px!important; | |
height: 60px!important | |
} | |
} | |
/* | |
* HEADER SECTION END | |
* | |
* CODE FOR THE HEADER SHOULD BE ABOVE | |
*/ | |
@media screen and (min-width: 766px) { | |
nav a:hover, #list_header a:hover { | |
color: hsl(210,100%,65%); | |
} | |
/* NAV MENU TUNING -- No hydraulics and underglows, but at least makes the nav perform faster. Oh, and styling, too. */ | |
nav { | |
background: transparent; /* DELETE this if your background image makes the icons hard to see */ | |
-webkit-transform: translate3d(0, 0, 0); | |
} | |
nav a {color: #eee;} | |
nav:hover { | |
background: rgba(0,0,0, .7); | |
width: 170px; | |
} | |
nav:hover ~ #container-main { | |
margin-left: 50px !important; | |
} | |
/* This makes the notifications tall and all */ | |
.noti { | |
margin-left: -0px; | |
margin-top: -140px; | |
height: 100vh; | |
border-radius: 0; | |
} | |
.nav__footer {background: none !important} | |
/* SCREW SCROLLBARS */ | |
::-webkit-scrollbar { width: 0 !important; height: 0 !important } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment