├── .gitignore ├── images ├── add.png ├── faq.png ├── na.png ├── anime.png ├── export.png ├── forum.png ├── header.jpg ├── home.png ├── login.png ├── logout.png ├── manga.png ├── shared.png ├── user.png ├── history.png ├── profile.png ├── register.png ├── useranime.png └── usermanga.png ├── TemplateOverrides ├── styleRDC.css ├── styleNDMOR.css └── styleNDOR.css ├── styleOR.css ├── README.md └── styleMAL.css /.gitignore: -------------------------------------------------------------------------------- 1 | OLD/ -------------------------------------------------------------------------------- /images/add.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/add.png -------------------------------------------------------------------------------- /images/faq.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/faq.png -------------------------------------------------------------------------------- /images/na.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/na.png -------------------------------------------------------------------------------- /images/anime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/anime.png -------------------------------------------------------------------------------- /images/export.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/export.png -------------------------------------------------------------------------------- /images/forum.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/forum.png -------------------------------------------------------------------------------- /images/header.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/header.jpg -------------------------------------------------------------------------------- /images/home.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/home.png -------------------------------------------------------------------------------- /images/login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/login.png -------------------------------------------------------------------------------- /images/logout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/logout.png -------------------------------------------------------------------------------- /images/manga.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/manga.png -------------------------------------------------------------------------------- /images/shared.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/shared.png -------------------------------------------------------------------------------- /images/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/user.png -------------------------------------------------------------------------------- /images/history.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/history.png -------------------------------------------------------------------------------- /images/profile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/profile.png -------------------------------------------------------------------------------- /images/register.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/register.png -------------------------------------------------------------------------------- /images/useranime.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/useranime.png -------------------------------------------------------------------------------- /images/usermanga.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme/HEAD/images/usermanga.png -------------------------------------------------------------------------------- /TemplateOverrides/styleRDC.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /*Profile Liststyle created for MyAnimeList.com by Rafael De Jongh - www.myanimelist.net/profile/RafaelDeJongh - https://github.com/RafaelDeJongh/MyAnimeList 3 | Remove Dropped and All Anime 4 | ---------------------------*/ 5 | #list_surround > table:first-of-type tbody tr td:last-of-type, #list_surround > table:first-of-type tbody tr td:nth-of-type(4){display:none} -------------------------------------------------------------------------------- /TemplateOverrides/styleNDMOR.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /*Profile Liststyle created for MyAnimeList.com by Rafael De Jongh - www.myanimelist.net/profile/RafaelDeJongh - https://github.com/RafaelDeJongh/MyAnimeList 3 | No Datum Manga Overrides 4 | ---------------------------*/ 5 | .td1 a:not([title="Anime Information"]) + small, .td2 a:not([title="Anime Information"]) + small{top:28px;width:100%} 6 | .td1 a:not([title="Anime Information"]) + small:after, .td2 a:not([title="Anime Information"]) + small:after{display:none} -------------------------------------------------------------------------------- /TemplateOverrides/styleNDOR.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /*Profile Liststyle created for MyAnimeList.com by Rafael De Jongh - www.myanimelist.net/profile/RafaelDeJongh - https://github.com/RafaelDeJongh/MyAnimeList 3 | No Datum Anime Overrides 4 | ---------------------------*/ 5 | .td1 a[title="Anime Information"] + small, .td2 a[title="Anime Information"] + small {width:100%;left:0} 6 | .td1 a[title="Anime Information"] + small:before, .td2 a[title="Anime Information"] + small:before, .td1 a[title="Anime Information"] + small:after, .td2 a[title="Anime Information"] + small:after {display:none} -------------------------------------------------------------------------------- /styleOR.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /*Profile Liststyle created for MyAnimeList.com by Rafael De Jongh - www.myanimelist.net/profile/RafaelDeJongh - Do NOT use or MODIFY without PERMISSION! 3 | Manga Overwrites 4 | ------------------*/ 5 | .table_header:nth-of-type(5){display: none} 6 | .td1:nth-of-type(6), .td2:nth-of-type(6){ 7 | left: 0; 8 | top: 28px; 9 | width: 33.33333%; 10 | min-width: 70px; 11 | min-height: 22px; 12 | } 13 | .td1:nth-of-type(7), .td2:nth-of-type(7){ 14 | right: 0!important; 15 | left: auto!important; 16 | top: 28px; 17 | width: 33.33333%; 18 | min-width: 70px; 19 | min-height: 22px; 20 | } 21 | .td1:nth-of-type(6):after, .td2:nth-of-type(6):after{ 22 | content:""; 23 | display: inline-block; 24 | position: absolute; 25 | top: 0; 26 | left: 100%; 27 | width: 0; 28 | height: 0; 29 | border-top: 28px solid rgba(0,0,0,.5); 30 | border-right: 1.5rem solid transparent; 31 | } 32 | .td1:nth-of-type(7):before, .td2:nth-of-type(7):before{ 33 | content:""; 34 | display:inline-block; 35 | position:absolute; 36 | top:0; 37 | right:100%; 38 | width:0; 39 | height:0; 40 | border-top:28px solid rgba(0,0,0,.5); 41 | border-left:1.5rem solid transparent; 42 | } 43 | .td1:nth-of-type(7):after, .td2:nth-of-type(7):after{ 44 | content:""; 45 | display:none 46 | } 47 | .td1 a:not([title="Anime Information"]) + small, .td2 a:not([title="Anime Information"]) + small{ 48 | top: 56px; 49 | left: 0; 50 | height: 17px; 51 | width: calc(33.33333% - 1.5rem); 52 | font-size: 10px; 53 | } 54 | .td1 a:not([title="Anime Information"]) + small:after, .td2 a:not([title="Anime Information"]) + small:after{ 55 | content:""; 56 | display: inline-block; 57 | position: absolute; 58 | top: 0; 59 | left: 100%; 60 | width: 0; 61 | height: 0; 62 | border-top: 28px solid rgba(0,0,0,.5); 63 | border-right: 1.5rem solid transparent; 64 | } -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![Description](http://files.gamebanana.com/bitpit/description_e1c38.png) 2 | 3 | This is a minimalistic flat designed List Style which focuses around showing the Anime's cover in a nice grid like structure, to be used on the website: MyAnimeList.net 4 | 5 | You can find a newer updated version for the modern version of the MAL Style Design here: https://github.com/RafaelDeJongh/MyAnimeList-Modern-RDJ-Theme 6 | 7 | ![Preview](http://files.gamebanana.com/bitpit/preview_67ec1.png) 8 | 9 | ![AnimeListPreview](http://www.rafaeldejongh.com/wp-content/uploads/2016/08/MyAnimeList.jpg) 10 | 11 | ![Features](http://files.gamebanana.com/bitpit/features_38a9e.png) 12 | 13 | This list style offer various features: 14 | 15 | - Fully responsive layout, works on desktop and mobile seamlessly 16 | - Flat, metro like design for an easy overview 17 | - Custom Header Image 18 | - Full cover generation with MAL-IMAGE 19 | - Overrides for specific list settings 20 | 21 | ![Installation](http://files.gamebanana.com/bitpit/installation_b6439.png) 22 | 23 | As this is a list style was made before the list style update, you have to make sure your Template settings is set to "Classic". 24 | 25 | ![Classic](http://files.gamebanana.com/bitpit/classic.png) 26 | 27 | After the template settings has been set, you can now add the following code to your Advanced CSS List Design. 28 | 29 | ### The code used for the Anime List: 30 | 31 | 
/*Designed by Rafael De Jongh*/
32 | @import url("//malcat-gen.appspot.com/series?preset=more&user=ENTERUSERNAMEHERE&list=anime");
33 | @import url("//rafaeldejongh.github.io/MyAnimeList-Classic-RDJ-Theme/styleMAL.css");
34 | License{/*Profile Liststyle created for MyAnimeList.com by Rafael De Jongh - https://github.com/RafaelDeJongh/MyAnimeList*/}
35 | 36 | ### And the code for the Manga List: 37 | 38 | 
/*Designed by Rafael De Jongh*/
39 | @import url("//malcat-gen.appspot.com/series?preset=more&user=ENTERUSERNAMEHERE&list=manga");
40 | @import url("//rafaeldejongh.github.io/MyAnimeList-Classic-RDJ-Theme/styleMAL.css");
41 | @import url("//rafaeldejongh.github.io/MyAnimeList-Classic-RDJ-Theme/styleOR.css");
42 | License{/*Profile Liststyle created for MyAnimeList.com by Rafael De Jongh - https://github.com/RafaelDeJongh/MyAnimeList-Classic-RDJ-Theme*/}
43 | 44 | **Make sure to change the "ENTERMALUSERNAME" of the first import link to make the cover generator work properly!** 45 | 46 | ### This list is developed with the following List Settings: 47 | 48 | **Anime** 49 | 50 | - Numbers 51 | - Score 52 | - Type 53 | - Episodes 54 | - Rating 55 | - Start/End Dates 56 | - Priority 57 | 58 | **Manga** 59 | 60 | - Numbers 61 | - Score 62 | - Chapters 63 | - Volumes 64 | - Start/End Dates 65 | 66 | **If you do not want to make use of the Start/End Dates, then you can use the Template overrides mentioned below.** 67 | 68 | ### To change the banner image please add the following code under the license line: 69 | 70 | 
#list_surround:before{background-image:url(//URLTOIMAGE.JPG)}
71 | 72 | ### Using Template Overrides 73 | 74 | There are currently two template overrides: 75 | 76 | - No Datum Anime Overrides 77 | - No Datum Manga Overrides 78 | 79 | Both fix/disable the usage of the date attribute for your list. 80 | 81 | You can add these overrides to your list style by importing these overrides styles after the main style has been loaded by adding another import url: 82 | 83 | 
@import url("//rafaeldejongh.github.io/MyAnimeList-Classic-RDJ-Theme/TemplateOverrides/styleNDOR.css");
84 | -------------------------------------------------------------------------------- /styleMAL.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | /*Profile Liststyle created for MyAnimeList.com by Rafael De Jongh - www.myanimelist.net/profile/RafaelDeJongh - https://github.com/RafaelDeJongh/MyAnimeList 3 | Content Table: 4 | -------------- 5 | - Reset 6 | - Body 7 | - HeaderBar 8 | - ListIcons 9 | - Search 10 | - ListSurround 11 | - Titles 12 | - HeaderImage 13 | - Tables 14 | - Triangles 15 | - FancyBox 16 | - MediaQueries 17 | - Links 18 | - Scrollbar 19 | - Selection 20 | Reset 21 | ------------------*/ 22 | html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}nav ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}ins{background-color:#ff9;color:#000;text-decoration:none}mark{background-color:#ff9;color:#000;font-style:italic;font-weight:bold}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle} 23 | /*Body 24 | ------------------*/ 25 | html{ 26 | height:100%; 27 | -webkit-box-sizing:border-box; 28 | -moz-box-sizing:border-box; 29 | box-sizing:border-box; 30 | -moz-background-clip:padding-box !important; 31 | -webkit-background-clip:padding-box !important; 32 | background-clip:padding-box !important; 33 | } 34 | body{ 35 | font-family:"Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; 36 | font-size:14px; 37 | line-height:1.6; 38 | color:#bbb; 39 | background-color:#1a1a1a; 40 | height:100%; 41 | } 42 | /*HeaderBar 43 | ------------------*/ 44 | #mal_control_strip{ 45 | width:100% !important; 46 | height:46px; 47 | margin:auto !important; 48 | max-width:100% !important; 49 | background:#17171a !important; 50 | border-bottom:1px solid #990000; 51 | position:fixed; 52 | top:0; 53 | z-index:99999; 54 | } 55 | #mal_control_strip tbody{ 56 | position:relative; 57 | left:0; 58 | margin:auto; 59 | display:block; 60 | padding:0 1.5%; 61 | } 62 | .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table{ 63 | position:fixed; 64 | top:10px; 65 | right:260px; 66 | width:320px; 67 | z-index:99999; 68 | } 69 | #mal_control_strip div{ 70 | margin:0!important; 71 | font-size:0!important; 72 | padding:0!important; 73 | float:left; 74 | } 75 | #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links, #mal_cs_otherlinks{padding:0!important;width:auto!important;} 76 | #mal_cs_pic, #mal_cs_listinfo, #mal_cs_links{border-right-style:none!important } 77 | #mal_cs_pic{ 78 | position:absolute; 79 | top:11px; 80 | left:11px; 81 | } 82 | td#mal_cs_pic{ display:none } 83 | #mal_cs_listinfo div a, #mal_cs_links div a, #mal_cs_otherlinks div a{ 84 | display:inline-block; 85 | float:left; 86 | position:relative; 87 | top:10px; 88 | width:36px; 89 | height:25px; 90 | line-height:25px; 91 | overflow:hidden; 92 | white-space:nowrap; 93 | text-overflow:ellipsis; 94 | font-weight:bold; 95 | text-align:center; 96 | text-decoration:none; 97 | color:transparent; 98 | font-size:0!important; 99 | } 100 | /*ListIcons 101 | ------------------*/ 102 | #mal_cs_listinfo div:first-of-type a:before{ background-image:url(images/profile.png) } 103 | #mal_cs_listinfo div:last-of-type a:before{ background-image:url(images/logout.png) } 104 | #mal_cs_links div:first-of-type a:first-of-type:before{ background-image:url(images/add.png) } 105 | #mal_cs_links div:last-of-type a:first-of-type:before{ background-image:url(images/anime.png) } 106 | #mal_cs_links div:last-of-type a:last-of-type:before{ background-image:url(images/manga.png) } 107 | #mal_cs_links div:first-of-type a:last-of-type:before{ background-image:url(images/home.png) } 108 | #mal_cs_otherlinks div:first-of-type a:before{ background-image:url(images/user.png) } 109 | #mal_cs_otherlinks div a[href*="/forum/"]:before{ background-image:url(images/forum.png) } 110 | #mal_cs_otherlinks div a[href*="/mangalist/"]:before{ background-image:url(images/usermanga.png) } 111 | #mal_cs_otherlinks div a[href*="/animelist/"]:before{ background-image:url(images/useranime.png) } 112 | #mal_cs_otherlinks div a[href*="/login.php"]:before{ background-image:url(images/login.png) } 113 | #mal_cs_otherlinks div a[href*="/history/"]:before{ background-image:url(images/history.png) } 114 | #mal_cs_otherlinks div a[href*="/register.php"]:before{ background-image:url(images/register.png) } 115 | #mal_cs_otherlinks div a[href*="/panel.php?go=export"]:before{ background-image:url(images/export.png) } 116 | #mal_cs_otherlinks div a[href*="/shared"]:before{ background-image:url(images/shared.png) } 117 | #mal_cs_otherlinks div a[href*="/modules.php?go=faq"]:before{ background-image:url(images/faq.png) } 118 | #mal_control_strip td{float:left} 119 | #mal_cs_listinfo div a:before, #mal_cs_links div a:before, #mal_cs_otherlinks div a:before{ 120 | position:absolute; 121 | top:0; 122 | left:0; 123 | width:25px; 124 | height:25px; 125 | content:""; 126 | background-position:center center; 127 | background-repeat:no-repeat; 128 | background-size:100%; 129 | opacity:0.8; 130 | -webkit-transition:opacity .2s ease; 131 | -moz-transition:opacity .2s ease; 132 | -o-transition:opacity .2s ease; 133 | transition:opacity .2s ease; 134 | } 135 | #mal_cs_listinfo div a:hover:before, #mal_cs_links div a:hover:before, #mal_cs_otherlinks div a:hover:before{opacity:1} 136 | /*Search 137 | ------------------*/ 138 | #mal_cs_powered{ 139 | top:10px !important; 140 | right:2% !important; 141 | left:auto !important; 142 | } 143 | #mal_cs_powered img{display:none} 144 | #searchBox{ 145 | padding:4px 8px; 146 | width:200px !important; 147 | height:15px; 148 | font-size:12px !important; 149 | text-align:right; 150 | border:none; 151 | outline:none; 152 | color:#555; 153 | -webkit-border-radius:1px; 154 | -moz-border-radius:1px; 155 | border-radius:1px; 156 | } 157 | /*ListSurround 158 | ------------------*/ 159 | #list_surround > table:nth-of-type(n+4) ~ .header_cw + table, #list_surround > table:nth-of-type(n+4) ~ .header_completed + table, #list_surround > table:nth-of-type(n+4) ~ .header_onhold + table, #list_surround > table:nth-of-type(n+4) ~ .header_dropped + table, #list_surround > table:nth-of-type(n+4) ~ .header_ptw + table{ display:none } 160 | .table_header{width:auto} 161 | .table_header:first-of-type, .table_header:nth-of-type(n+7){display:none} 162 | .table_headerLink{ 163 | display:inline-block; 164 | padding:3px 7px; 165 | height:15px; 166 | text-align:center; 167 | font-size:0.9em; 168 | white-space:nowrap; 169 | } 170 | #list_surround > table:first-of-type{ 171 | text-align:center; 172 | margin:auto; 173 | width:auto; 174 | font-size:13px; 175 | font-weight:bold; 176 | background-color:#1a1a1a; 177 | display:block; 178 | } 179 | #list_surround > table:first-of-type tbody{ display:inline-block } 180 | .status_selected, .status_not_selected{ 181 | width:auto; 182 | white-space:nowrap; 183 | } 184 | .status_selected a, .status_not_selected a{ 185 | display:block; 186 | padding:0px 22px; 187 | line-height:42px; 188 | } 189 | .status_not_selected a, .status_not_selected a:visited{ color:#bbb } 190 | .status_not_selected a:hover, .status_not_selected a:active{ color:#fff } 191 | .status_selected a{ 192 | color:#fff; 193 | background-color:#171717; 194 | } 195 | /*Titles 196 | ------------------*/ 197 | .hide{ 198 | background-image:url(images/na.png); 199 | background-size:cover; 200 | display:inline-block!important; 201 | } 202 | .header_title{ 203 | font-size:22px; 204 | font-weight:bold; 205 | text-align:center; 206 | background-color:#232324; 207 | padding:6px; 208 | } 209 | #list_surround{ 210 | height:100%; 211 | width:100%; 212 | } 213 | /*HeaderImage 214 | ------------------*/ 215 | #list_surround:before{ 216 | content:""; 217 | display:block; 218 | background-image:url(images/header.jpg); 219 | background-repeat:repeat; 220 | background-position:center 46px; 221 | background-attachment:fixed; 222 | background-size:1920px 420px; 223 | height:420px; 224 | width:100%; 225 | overflow:hidden; 226 | z-index:-1; 227 | } 228 | #list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide{ 229 | float:left; 230 | position:relative; 231 | } 232 | #list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw){ z-index:1 } 233 | .hide{ 234 | background-position:center; 235 | opacity:1; 236 | -webkit-transition:opacity .1s ease-in-out; 237 | -moz-transition:opacity .1s ease-in-out; 238 | -o-transition:opacity .1s ease-in-out; 239 | transition:opacity .1s ease-in-out; 240 | } 241 | table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw):hover + .hide{ opacity:.75 } 242 | /*Tables 243 | ------------------*/ 244 | .animetitle, .td1, .td2, .td1 a[title="Anime Information"] + small, .td2 a[title="Anime Information"] + small, .td1 a:not([title="Anime Information"]) + small, .td2 a:not([title="Anime Information"]) + small{ 245 | background-color:rgba(0,0,0,.5); 246 | color:#fefefe; 247 | } 248 | .animetitle{ 249 | display:block; 250 | visibility:visible; 251 | position:absolute; 252 | left:0; 253 | bottom:28px; 254 | width:90%; 255 | padding:2% 5% 1%; 256 | overflow:hidden; 257 | text-align:center; 258 | font-size:13px; 259 | font-weight:bold; 260 | } 261 | .td1, .td2{ 262 | position:absolute; 263 | padding:3px 0; 264 | } 265 | .td1:nth-of-type(2), .td2:nth-of-type(2){ 266 | visibility:hidden; 267 | padding:0; 268 | width:100%; 269 | height:100%; 270 | } 271 | .td1:first-of-type:before, .td2:first-of-type:before{ content:"#" } 272 | .td1:first-of-type, .td2:first-of-type{ 273 | top:0; 274 | left:0; 275 | width:33.33333%; 276 | height:22px; 277 | z-index:1; 278 | } 279 | .td1 a[title="Anime Information"] + small, .td2 a[title="Anime Information"] + small{ 280 | display:block; 281 | visibility:visible; 282 | position:absolute; 283 | top:28px; 284 | left:33.33333%; 285 | width:33.33333%; 286 | left:calc(33.33333% + 1.5rem); 287 | width:calc(33.33333% - 3rem); 288 | padding:5.5px 0; 289 | font-size:11px; 290 | text-align:center; 291 | word-wrap:break-word; 292 | } 293 | .td1:nth-of-type(4)[width="50"], .td2:nth-of-type(4)[width="50"]{ 294 | top:0; 295 | right:0; 296 | width:33.33333%; 297 | height:22px; 298 | } 299 | td[width="70"] + .td1:nth-of-type(5):before, [width="70"] + .td2:nth-of-type(5):before{ content:"Volumes:" } 300 | td[width="70"] + .td1:nth-of-type(5), td[width="70"] + .td2:nth-of-type(5){ 301 | top:0; 302 | right:0; 303 | width:62.66666%; 304 | text-align:right; 305 | padding-right:4%; 306 | } 307 | .td1 a:not([title="Anime Information"]) + small, .td2 a:not([title="Anime Information"]) + small{ 308 | display:block; 309 | visibility:visible; 310 | position:absolute; 311 | top:28px; 312 | right:33.33333%; 313 | width:33.33333%; 314 | height:22px; 315 | padding:5.5px 0; 316 | font-size:11px; 317 | text-align:center; 318 | word-wrap:break-word; 319 | } 320 | .td1:nth-of-type(3):before, .td2:nth-of-type(3):before{ content:"Score:" } 321 | .td1:nth-of-type(3), .td2:nth-of-type(3){ 322 | left:0; 323 | bottom:0; 324 | /*width:28.33333%;*/ 325 | width:28.35%; 326 | text-align:left; 327 | padding-left:5%; 328 | } 329 | td[width="50"] + .td1:nth-of-type(5):before, [width="50"] + .td2:nth-of-type(5):before{ content:"Episodes:" } 330 | td[width="50"] + .td1:nth-of-type(5), td[width="50"] + .td2:nth-of-type(5){ 331 | right:0; 332 | bottom:0; 333 | width:61.66666%; 334 | text-align:right; 335 | padding-right:5%; 336 | } 337 | .td1:nth-of-type(4)[width="70"]:before, .td2:nth-of-type(4)[width="70"]:before{ content:"Chapters:" } 338 | .td1:nth-of-type(4)[width="70"], .td2:nth-of-type(4)[width="70"]{ 339 | bottom:0; 340 | right:0; 341 | width:61.66666%; 342 | text-align:right; 343 | padding-right:5%; 344 | } 345 | .td1:nth-of-type(6), .td2:nth-of-type(6){ 346 | left:33.33333%; 347 | top:0; 348 | /*width:33.33333%;*/ 349 | width:33.34%; 350 | height:22px; 351 | min-height:22px; 352 | } 353 | .td1:nth-of-type(8), .td2:nth-of-type(8){ 354 | right:0; 355 | top:28px; 356 | width:33.33333%; 357 | min-width:70px; 358 | min-height:22px; 359 | } 360 | .td1:nth-of-type(7), .td2:nth-of-type(7){ 361 | left:0 !important; 362 | top:28px; 363 | width:33.33333%; 364 | min-width:70px; 365 | min-height:22px; 366 | } 367 | /*Triangles 368 | ------------------*/ 369 | .td1:nth-of-type(7):after, .td2:nth-of-type(7):after{ 370 | content:""; 371 | display:inline-block; 372 | position:absolute; 373 | top:0; 374 | left:100%; 375 | width:0; 376 | height:0; 377 | border-top:28px solid rgba(0,0,0,.5); 378 | border-right:1.5rem solid transparent; 379 | } 380 | .td1:nth-of-type(8):before, .td2:nth-of-type(8):before{ 381 | content:""; 382 | display:inline-block; 383 | position:absolute; 384 | top:0; 385 | right:100%; 386 | width:0; 387 | height:0; 388 | border-top:28px solid rgba(0,0,0,.5); 389 | border-left:1.5rem solid transparent; 390 | } 391 | .td1 a[title="Anime Information"] + small:before, .td2 a[title="Anime Information"] + small:before{ 392 | content:""; 393 | display:inline-block; 394 | position:absolute; 395 | top:0; 396 | right:100%; 397 | width:0; 398 | height:0; 399 | border-bottom:28px solid rgba(0,0,0,.5); 400 | border-left:1.5rem solid transparent; 401 | z-index:-1; 402 | } 403 | .td1 a[title="Anime Information"] + small:after, .td2 a[title="Anime Information"] + small:after{ 404 | content:""; 405 | display:inline-block; 406 | position:absolute; 407 | top:0; 408 | left:100%; 409 | width:0; 410 | height:0; 411 | border-bottom:28px solid rgba(0,0,0,.5); 412 | border-right:1.5rem solid transparent; 413 | z-index:-1; 414 | } 415 | #list_surround > table:hover .td1[width="125"], #list_surround > table:hover .td2[width="125"]{ display:block } 416 | #list_surround .List_LightBox{ 417 | display:block; 418 | visibility:visible; 419 | position:absolute; 420 | top:0; 421 | left:0; 422 | width:100%; 423 | height:100%; 424 | font-size:0; 425 | } 426 | input[type=text]{ 427 | width:100%; 428 | text-align:right; 429 | border:none; 430 | outline:0; 431 | padding:6px 3px 6px 0; 432 | margin-left:-6px; 433 | -webkit-border-radius:1px; 434 | -moz-border-radius:1px; 435 | border-radius:1px; 436 | } 437 | input[value=Go]{display:none} 438 | .category_totals{ 439 | padding:16%; 440 | text-align:center; 441 | white-space:pre-line; 442 | background-color:#232324; 443 | text-transform:uppercase; 444 | color:#eee; 445 | } 446 | .category_totals:before{ 447 | display:block; 448 | content:"Totals:"; 449 | text-align:center; 450 | font-weight:bold; 451 | } 452 | #grand_totals, #copyright{ 453 | clear:both; 454 | position:relative; 455 | padding:11px 0px; 456 | text-align:center; 457 | margin:0!important; 458 | background-color:#17171a; 459 | border-top:1px solid #990000; 460 | } 461 | #list_surround > br{display:none} 462 | /*FancyBox 463 | ------------------*/ 464 | #fancybox-outer{ 465 | background-color:#1a1a1a !important; 466 | box-shadow:1px 2px 6px rgba(0,0,0, 0.5); 467 | -moz-box-shadow:1px 2px 6px rgba(0,0,0, 0.5); 468 | -webkit-box-shadow:1px 2px 6px rgba(0,0,0, 0.5); 469 | border:1px solid #990000; 470 | -webkit-border-radius:3px; 471 | -moz-border-radius:3px; 472 | border-radius:3px; 473 | margin-top:-1%; 474 | height:109%!important; 475 | min-height:75px!important; 476 | } 477 | #fancybox-inner{ 478 | bottom:10px; 479 | width:98%!important; 480 | height:auto!important; 481 | overflow:hidden!important; 482 | } 483 | #fancybox-frame{ 484 | background-color:#fff; 485 | -webkit-border-radius:3px; 486 | -moz-border-radius:3px; 487 | border-radius:3px; 488 | -moz-box-shadow:0 0 3px #5e5e5e, inset 0 0 2px #000; 489 | -webkit-box-shadow:0 0 3px #5e5e5e, inset 0 0 2px #000; 490 | box-shadow:0 0 3px #5e5e5e, inset 0 0 2px #000; 491 | } 492 | #fancybox-wrap{ 493 | position:fixed !important; 494 | top:0 !important; 495 | bottom:0; 496 | left:0!important; 497 | right:0!important; 498 | width:100%!important; 499 | max-height:100%; 500 | max-width:900px; 501 | margin:auto!important; 502 | } 503 | .spaceit, div#fancybox-inner div{ 504 | color:#eee; 505 | font-weight:700; 506 | margin:auto; 507 | padding-bottom:6px; 508 | } 509 | #fancybox-inner input[type="button"]{ 510 | -webkit-appearance:button; 511 | cursor:pointer; 512 | background:#990000; 513 | border:none; 514 | outline:none; 515 | background-clip:padding-box; 516 | border-radius:3px; 517 | box-shadow:inset 0 -4px 0 rgba(0, 0, 0, 0.5); 518 | color:#fff; 519 | position:relative; 520 | font-weight:600; 521 | text-shadow:0 1px 0 rgba(0, 0, 0, 0.45); 522 | -webkit-transition:all .05s ease; 523 | transition:all 0.1s ease-in-out; 524 | padding:6px 10px 10px; 525 | } 526 | #fancybox-inner input[type="button"]:hover{background:#b30000;} 527 | #fancybox-inner input[type="button"]:focus{ 528 | background:#b30000; 529 | box-shadow:inset 0 -2px 0 rgba(0, 0, 0, 0.45); 530 | text-shadow:0 1px 0 rgba(0, 0, 0, 0.45); 531 | top:1px; 532 | } 533 | /*FancyBox Only Discuss*/ 534 | #fancybox-inner input[type="button"]:not(:nth-of-type(1)){display:none} 535 | #fancybox-inner input[type="button"]:nth-of-type(-n+2){ 536 | width:25%; 537 | margin:auto; 538 | display:inline-block; 539 | } 540 | #fancybox-inner input[type="button"]:nth-of-type(1){margin-left:20px} 541 | /*MediaQueries 542 | ------------------*/ 543 | @media screen and (min-width:1812px){ 544 | #list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide{ 545 | width:12.5%; 546 | height:17.5vw; 547 | } 548 | .hide{ margin-left:-12.5% } 549 | } 550 | @media screen and (max-width:1811px){ 551 | #list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide{ 552 | width:14.28571%; 553 | height:20vw; 554 | } 555 | .hide{ margin-left:-14.28571% } 556 | } 557 | @media screen and (max-width:1586px){ 558 | #list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide{ 559 | width:16.66666%; 560 | height:22vw; 561 | } 562 | .hide{ margin-left:-16.66666% } 563 | } 564 | @media screen and (max-width:1361px){ 565 | #list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide{ 566 | width:20%; 567 | height:28vw; 568 | } 569 | .hide{ margin-left:-20% } 570 | } 571 | @media screen and (max-width:1136px){ 572 | #list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide{ 573 | width:25%; 574 | height:34vw; 575 | } 576 | .hide{ margin-left:-25% } 577 | .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table{ right:245px } 578 | } 579 | @media screen and (max-width:945px){ 580 | #mal_control_strip{ height:72px } 581 | .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table{ 582 | right:1%; 583 | top:40px; 584 | } 585 | #searchBox{ width:286px!important } 586 | } 587 | @media screen and (max-width:911px){ 588 | #list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide{ 589 | width:33.33333%; 590 | height:50vw; 591 | } 592 | .hide{ margin-left:-33.33333% } 593 | } 594 | @media screen and (max-width:740px){ 595 | #mal_cs_powered{ display:none } 596 | .header_cw + table, .header_completed + table, .header_onhold + table, .header_dropped + table, .header_ptw + table{ 597 | left:auto; 598 | right:auto; 599 | top:40px; 600 | width:100%; 601 | } 602 | .header_cw + table tbody, .header_completed + table tbody, .header_onhold + table tbody, .header_dropped + table tbody, .header_ptw + table tbody{ 603 | position:relative; 604 | margin:auto; 605 | display:table; 606 | text-align:center; 607 | } 608 | #mal_control_strip tbody{ 609 | position:relative; 610 | margin:auto; 611 | display:table; 612 | } 613 | } 614 | @media screen and (max-width:685px){ 615 | #list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide{ 616 | width:50%; 617 | height:80vw; 618 | } 619 | .hide{ margin-left:-50% } 620 | .category_totals{ font-size:3.5vw } 621 | } 622 | @media screen and (max-width:630px){ 623 | #list_surround > table:first-of-type tbody{ 624 | display:table; 625 | width:100%; 626 | } 627 | #list_surround > table:first-of-type tbody tr td{ 628 | display:inline-block; 629 | float:left; 630 | clear:both; 631 | text-align:center; 632 | width:100%; 633 | font-size:1.5em; 634 | } 635 | #mal_control_strip tbody{ 636 | position:relative; 637 | margin:auto; 638 | display:table; 639 | } 640 | } 641 | @media screen and (max-width:510px){ 642 | #list_surround > table:nth-of-type(n+4):not(.header_cw):not(.header_completed):not(.header_onhold):not(.header_dropped):not(.header_ptw), .hide{ 643 | width:100%; 644 | height:150vw; 645 | } 646 | .hide{ margin-left:-100% } 647 | .category_totals{ font-size:6.4vw } 648 | #mal_control_strip tbody{ 649 | position:relative; 650 | margin:auto; 651 | display:table; 652 | } 653 | } 654 | /*Links 655 | ------------------*/ 656 | a,a:visited{ 657 | color:#eee; 658 | text-decoration:none; 659 | -webkit-transition:all .2s ease; 660 | -moz-transition:all .2s ease; 661 | -o-transition:all .2s ease; 662 | transition:all .2s ease; 663 | } 664 | a:active, a:hover{color:#fff} 665 | /*Scrollbar 666 | ------------------*/ 667 | ::-webkit-scrollbar{width:12px;height:12px;background-color:#121212} 668 | ::-webkit-scrollbar-corner{background-color:#0e0e0e} 669 | ::-webkit-scrollbar-track{background-color:#121212} 670 | ::-webkit-scrollbar-thumb{background:#990000} 671 | ::-webkit-scrollbar:horizontal{height:12px} 672 | /*Selection 673 | ------------------*/ 674 | ::selection{color:#fff;background-color:#990000} 675 | ::-moz-selection{color:#fff;background-color:#990000} --------------------------------------------------------------------------------