New
Jul 3, 2019 2:44 PM
#151
cateapillar said: hey, i'm back here again. this time, i tried adding tags to my manga list on hover, but words are cut off in the tags section. this doesn't happen for my anime list however, so i'm confused about how to fix this. any ideas to fix this issue? thanks! You might need to have a separate CSS on your anime and manga list if you haven't to apply this fix. Replace your manga list code: https://pastebin.com/PzAdEza1 |
Jul 10, 2019 12:41 PM
#152
So didn't touch my list design for years now and today out of the blue all the image covers are missing. I tried all the imports suggested in step 4 (was already using the 1st one of them) but none worked. |
Jul 10, 2019 1:57 PM
#153
MuFeR said: Looks like the cover generator is having some issues, I am unsure why. For now, you could use this manually-maintained file if you wish to update it right this second. These can also be found on the main post, under "back up solutions". Just use it in place of the MalScraper link. There are two different imports, one for anime and one for manga. Anime:So didn't touch my list design for years now and today out of the blue all the image covers are missing. I tried all the imports suggested in step 4 (was already using the 1st one of them) but none worked. @\import "https://dl.dropboxusercontent.com/s/r89y41zqmt8waaz/animelist_more.css"; @\import "https://dl.dropboxusercontent.com/s/b86evgmqh9h6b1p/mangalist_more.css"; Make sure you only use the import that matches the list you are using. If you use both at once, you will end up with incorrect pictures as the manga and anime imports will conflict. You may have to use two different CSS styles, one for anime and one for manga, with the respective imports at the top. |
Valerio_LyndonJul 10, 2019 2:24 PM
Jul 10, 2019 2:22 PM
#154
Hello, Thank again for this tutorial. I just went throught the first 10 - 15 steps, and the import : @\import "https://dl.dropboxusercontent.com/s/m1z4trsw0vuet03/more.css"; JUST FIXED IT ! |
Jul 14, 2019 1:59 AM
#155
Hi, ive downloaded one of the premade layouts and everything seemed fine in the preview but when i cant see the background on the site and its just white. How do i fix this problem? |
-Fall3nAngel-Jul 14, 2019 2:07 AM
Jul 14, 2019 1:33 PM
#156
-Fall3nAngel- said: Hi, ive downloaded one of the premade layouts and everything seemed fine in the preview but when i cant see the background on the site and its just white. How do i fix this problem? seems fine to me atm |
Jul 22, 2019 6:09 AM
#157
It's amazing! But..I have a problem. It works to change the photos,images,GIFs and stuff, but even if I press ,,save,, down my anime list doesn't change (it ramains at the Kimi no na wa one, not like I customized it). I think isn't normal cause' when I press on ``preview`` it shows me exactly how i customize it . Is there a way to fix that? (╥﹏╥) Thank you! (0 3 0) |
Jul 22, 2019 12:10 PM
#158
Sori-chan_xD said: It's amazing! But..I have a problem. It works to change the photos,images,GIFs and stuff, but even if I press ,,save,, down my anime list doesn't change (it ramains at the Kimi no na wa one, not like I customized it). I think isn't normal cause' when I press on ``preview`` it shows me exactly how i customize it . Is there a way to fix that? (╥﹏╥) Thank you! (0 3 0) Make sure the theme you're making is the same theme you have shaded the bubble next to anime. If you don't understand- shade the bubble next to anime on the first theme, click the Save button, then customize the first theme and save that. https://myanimelist.net/ownlist/style |
Jul 24, 2019 6:57 PM
#159
Jul 24, 2019 7:03 PM
#160
Punkero said: You appear to be using the wrong preset for the cover generator. You also have a broken import, which explains why you can see covers when others can't. I recommend firstly deleting both of these lines, they're near the top of your CSS:So, recently I was made aware by a friend that other users (and myself when logged out) can't see cover pics when browsing my list, I don't know when this started, I tried the imports in step 4 as well as the solution in post #157 but nothing changes. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/animetitlebefore"; @import "https://dl.dropboxusercontent.com/s/6n4qtowp2xtgjpr/data%20image%20link%20before.css"; Then, insert this line in place of the old ones: @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; |
Jul 27, 2019 10:13 AM
#161
This is incredibly odd. I can't see the anime covers when I'm logged in. When I'm NOT, tho, I can clearly see them. Can someone help me? Thanks. |
Jul 27, 2019 2:42 PM
#162
RayResembool said: Are you using different browsers while comparing? Especially, are you using Firefox?This is incredibly odd. I can't see the anime covers when I'm logged in. When I'm NOT, tho, I can clearly see them. Can someone help me? Thanks. |
Jul 27, 2019 4:48 PM
#163
Valerio_Lyndon said: RayResembool said: Are you using different browsers while comparing? Especially, are you using Firefox?This is incredibly odd. I can't see the anime covers when I'm logged in. When I'm NOT, tho, I can clearly see them. Can someone help me? Thanks. Nope, I'm using Chrome. I used the incognito mode to see the comparison between logged in or not. |
Jul 27, 2019 5:17 PM
#164
RayResembool said: Valerio_Lyndon said: RayResembool said: This is incredibly odd. I can't see the anime covers when I'm logged in. When I'm NOT, tho, I can clearly see them. Can someone help me? Thanks. Nope, I'm using Chrome. I used the incognito mode to see the comparison between logged in or not. If you see the covers in Incognito mode, then maybe something in your normal Chrome is blocking the import then? |
Jul 27, 2019 6:26 PM
#165
Shishio-kun said: uMatrix and other privacy extensions are especially susceptible to causing this.RayResembool said: If you see the covers in Incognito mode, then maybe something in your normal Chrome is blocking the import then? Nope, I'm using Chrome. I used the incognito mode to see the comparison between logged in or not. |
Jul 27, 2019 10:07 PM
#166
Shishio-kun said: RayResembool said: Valerio_Lyndon said: RayResembool said: Are you using different browsers while comparing? Especially, are you using Firefox?This is incredibly odd. I can't see the anime covers when I'm logged in. When I'm NOT, tho, I can clearly see them. Can someone help me? Thanks. Nope, I'm using Chrome. I used the incognito mode to see the comparison between logged in or not. If you see the covers in Incognito mode, then maybe something in your normal Chrome is blocking the import then? Deactivated uBlock Origin. Problem solved. |
Aug 25, 2019 7:45 PM
#167
Can I make a request? If so, could anyone check the About Me section on my profile page? I've been decreasing the pixels of it's width - but still it's broken. (I'm assuming I have to create a tall image for About Me... I don't know.) Help, please. :| |
Aug 25, 2019 8:19 PM
#168
Annyxtopheles said: Can I make a request? If so, could anyone check the About Me section on my profile page? I've been decreasing the pixels of it's width - but still it's broken. (I'm assuming I have to create a tall image for About Me... I don't know.) Help, please. :| You can make it as tall or short as you want it looks way to wide, I think it needs to be under 800px width total. I'm referring to the original graphic before you split it up. My tutorial videos on making a profile graphic should have the right width. |
Aug 25, 2019 8:25 PM
#169
Shishio-kun said: Annyxtopheles said: Can I make a request? If so, could anyone check the About Me section on my profile page? I've been decreasing the pixels of it's width - but still it's broken. (I'm assuming I have to create a tall image for About Me... I don't know.) Help, please. :| You can make it as tall or short as you want it looks way to wide, I think it needs to be under 800px width total. I'm referring to the original graphic before you split it up. My tutorial videos on making a profile graphic should have the right width. I decreased it to 720px. Before that 798. Still the same problem. |
Aug 25, 2019 9:00 PM
#170
Annyxtopheles said: Shishio-kun said: Annyxtopheles said: Can I make a request? If so, could anyone check the About Me section on my profile page? I've been decreasing the pixels of it's width - but still it's broken. (I'm assuming I have to create a tall image for About Me... I don't know.) Help, please. :| You can make it as tall or short as you want it looks way to wide, I think it needs to be under 800px width total. I'm referring to the original graphic before you split it up. My tutorial videos on making a profile graphic should have the right width. I decreased it to 720px. Before that 798. Still the same problem. Hmm whats the original graphic and what are you trying to do with it? Like how will it look when it's not broken. It looks like it's supposed to be like this But that's unlikely with the current size of the pieces. You'd have to resize and make the original graphic 798px or less, then split it up. This way you get smaller pieces, which I think is what you need (not sure). I think your pieces have to be under 398px at the most. |
Shishio-kunAug 25, 2019 9:19 PM
Aug 25, 2019 9:12 PM
#171
@Annyxtopheles If you're using Imgur you should also use the original type of link too, the others can resize the pieces to make them too large. You should also post your profile BBcode here if you continue to have problems so we can look at it. |
Aug 26, 2019 6:05 AM
#172
@Shishio-kun It worked - after as you said to make the pieces be less than 398px and I did. Thank you so much! You helped me again, I watched most of your YouTube tutorials since I started using list layouts and delving into other stuff related. And I'll keep learning, keep attempting, and progressing. Thank you again! You, and everyone in this community! |
Aug 27, 2019 12:59 AM
#173
Annyxtopheles said: @Shishio-kun It worked - after as you said to make the pieces be less than 398px and I did. Thank you so much! You helped me again, I watched most of your YouTube tutorials since I started using list layouts and delving into other stuff related. And I'll keep learning, keep attempting, and progressing. Thank you again! You, and everyone in this community! :D the profile looks cool |
Sep 8, 2019 4:26 AM
#174
Cover generators are not able to generate more than three thousand cover links ? malscraper generates only 2816 (occasionally 2700) https://malscraper.azurewebsites.net/covers/anime/Hiruzawa/presets/datatitlebefore "Mal it!" exactly 3000 (also datatitlelinkbefore preset = dataimagelinkafter) UPD: tried today and malscraper gave me all cover links "Mal it!" still only 3000 |
HiruzawaSep 10, 2019 1:45 AM
Sep 8, 2019 3:50 PM
#175
Hello everyone I noticed my anime list cover generator stopped working, somewhat. It lost the covers for each entry. Can someone help? |
Sep 8, 2019 4:01 PM
#176
F_E_A_R said: Hello everyone I noticed my anime list cover generator stopped working, somewhat. It lost the covers for each entry. Can someone help? update your CSS with the cover generators in the OP @\import "https://malscraper.azurewebsites.net/covers/auto/presets/more"; |
Sep 10, 2019 2:23 AM
#178
Hiruzawa said: I'm not quite sure. MalScraper definitely seems to have issues with lists that are longer. You're not the first to have reported issues with lists of several thousand entries. I'm unsure what causes it and I am unsure if the creator of MalScraper does either. It's highly inconsistent. One day, it will generate 2800, other days it will generate over 3000. All on the same list. I can't say I know much about Mal It. If you find you're having issues with the generators, the best alternative is to use a static import: [Link].Cover generators are not able to generate more than three thousand cover links ? malscraper generates only 2816 (occasionally 2700) https://malscraper.azurewebsites.net/covers/anime/Hiruzawa/presets/datatitlebefore "Mal it!" exactly 3000 (also datatitlelinkbefore preset = dataimagelinkafter) |
Sep 10, 2019 10:03 PM
#179
Sep 10, 2019 11:31 PM
#180
evilcorn said: I think the creator's Tinypic account may have been deleted or something. Looks like all the pictures on their layouts are dead. Hopefully they still have them around to restore them, but it really depends on how thoroughly the creator backed up their content (if at all). This is the original thread here: https://myanimelist.net/forum/?topicid=618961 If any updates happen, they'll probably happen here.Hi! The Steins;Gate theme I was using totally broke! Lots of missing tinypics! |
Sep 11, 2019 2:17 AM
#181
Sep 17, 2019 11:41 AM
#182
I'm currently having some issues with this layout design: High School DXD X Darling in the Franxxx layout. I can't figure out how to generate the content of the popup box after hovering over the anime cover. I've found out where in the code the box is at, so I'm able to disable it. But if possible, I'd like to generate the stuff that's supposed to go inside of it. Would it be possible for anyone to help me out with this? I'll go ahead and re-enable the popup box though, just in case it can help someone out. Thank you! |
Sep 17, 2019 3:17 PM
#183
Cry5talz said: The original theme author has instructions here: https://myanimelist.net/forum/?topicid=1544259&show=0#post9I'm currently having some issues with this layout design: High School DXD X Darling in the Franxxx layout. I can't figure out how to generate the content of the popup box after hovering over the anime cover. I've found out where in the code the box is at, so I'm able to disable it. But if possible, I'd like to generate the stuff that's supposed to go inside of it. Would it be possible for anyone to help me out with this? I'll go ahead and re-enable the popup box though, just in case it can help someone out. Thank you! |
Sep 18, 2019 1:18 AM
#184
Sep 26, 2019 12:12 PM
#185
sorry my english is not good, but i give my best... Hello, I search all List design data... from Oreimo Design image.myanimelist.net/ui/OK6W_koKDTO… myanimelist.net/forum/?topicid… Tinypic goes closed... can you please me all Pics from this Design... Thank you so much |
Sep 26, 2019 5:50 PM
#186
kaitokid187 said: sorry my english is not good, but i give my best... Hello, I search all List design data... from Oreimo Design image.myanimelist.net/ui/OK6W_koKDTO… myanimelist.net/forum/?topicid… Tinypic goes closed... can you please me all Pics from this Design... Thank you so much Your links are incomplete and don't work If it's the layout I'm thinking of, we have to repair it manually at some point in the future. We left some instructions in the thread for SylakentH's layout on how to repair a layout yourself with the internet wayback machine website. https://myanimelist.net/forum/?topicid=618961 Just copy the layout's image links into the wayback machine and it will find them from a past screenshot https://archive.org/web/ Otherwise, you'll have to wait for one of us to repair it but you'll be mass messaged in the future when the layouts from that topic are repaired. |
Sep 28, 2019 2:30 PM
#187
Shishio-kun said: kaitokid187 said: sorry my english is not good, but i give my best... Hello, I search all List design data... from Oreimo Design image.myanimelist.net/ui/OK6W_koKDTO… myanimelist.net/forum/?topicid… Tinypic goes closed... can you please me all Pics from this Design... Thank you so much Your links are incomplete and don't work Sorry this is selv text on twitter... here complete Links: >> https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAt4K0QoGsw3ChNH6j5i3vvA Forum Tread >> https://myanimelist.net/forum/?topicid=318587#msg37397387 and Oreimo Design ist not by SylakentH's Thread I can Waiting, for Repair. Can you Time schedule for repair ~~~~ 2weeks or 4weeks or 2Month +more??? |
Sep 28, 2019 3:35 PM
#188
kaitokid187 said: Shishio-kun said: kaitokid187 said: sorry my english is not good, but i give my best... Hello, I search all List design data... from Oreimo Design image.myanimelist.net/ui/OK6W_koKDTO… myanimelist.net/forum/?topicid… Tinypic goes closed... can you please me all Pics from this Design... Thank you so much Your links are incomplete and don't work Sorry this is selv text on twitter... here complete Links: >> https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAt4K0QoGsw3ChNH6j5i3vvA Forum Tread >> https://myanimelist.net/forum/?topicid=318587#msg37397387 and Oreimo Design ist not by SylakentH's Thread I can Waiting, for Repair. Can you Time schedule for repair ~~~~ 2weeks or 4weeks or 2Month +more??? OK It's a HolyPotato layout then. Post the CSS code to the layout here, and I can look into repairing it in the near future. |
Sep 29, 2019 4:16 PM
#189
Shishio-kun said: kaitokid187 said: Shishio-kun said: kaitokid187 said: sorry my english is not good, but i give my best... Hello, I search all List design data... from Oreimo Design image.myanimelist.net/ui/OK6W_koKDTO… myanimelist.net/forum/?topicid… Tinypic goes closed... can you please me all Pics from this Design... Thank you so much Your links are incomplete and don't work Sorry this is selv text on twitter... here complete Links: >> https://image.myanimelist.net/ui/OK6W_koKDTOqqqLDbIoPAt4K0QoGsw3ChNH6j5i3vvA Forum Tread >> https://myanimelist.net/forum/?topicid=318587#msg37397387 and Oreimo Design ist not by SylakentH's Thread I can Waiting, for Repair. Can you Time schedule for repair ~~~~ 2weeks or 4weeks or 2Month +more??? OK It's a HolyPotato layout then. Post the CSS code to the layout here, and I can look into repairing it in the near future. Thankyou very much, can your me Private Messege to finish repair Background is from me, i saved for many Years CSS: body { background-attachment:fixed !important; background-image:url(https://abload.de/img/14weomw51k4j.jpg); background-size:cover; } #list_surround { background-attachment:scroll; background-color:transparent; background-position:50% 50px; background-repeat:no-repeat no-repeat; font-size:81.25%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:50px; width:63.6%; } body { font-family:'Comic Sans MS'; color:#FFF; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFF; text-decoration:initial; text-shadow:none; } a:hover { color:#FF0000; text-shadow:none; } .status_not_selected, .status_selected { border:0 none !important; height:auto !important; padding:0 8px; text-align:center !important; width:16.667% !important; } .status_not_selected a, .status_selected a { background-color:#FF9900; border:1px solid rgba(255, 255, 255, 0.498039); border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; color:#FFFFFF; display:block !important; font-weight:bold; padding:18px; text-shadow:rgba(0, 0, 0, 0.0980392) 0 1px; } .status_selected a { background-color:#FF301A; border-color:rgba(255, 255, 255, 0.498039); } .status_not_selected a:hover { background-color:#FFB300; box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px; text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .status_selected a:hover { background-color:#FF1A00; box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px; text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .table_header { background-color:#FF301A; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:20px; border-top-right-radius:0; } .table_header:nth-of-type(2) { text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:20px; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FFB300; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FFB300; } tr:hover [class^="td"] { background-color:#FF9900; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:30px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FF301A; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:0; border-top-right-radius:0; color:#FFF; text-align:center; } null { } [class^="header_"] * { font-size:19px; height:60px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { content:' CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info.'; } .header_cw { background-color:transparent; background-image:url(http://i46.tinypic.com/8ygisy.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:215px; margin-bottom:0; } .header_completed { background-color:transparent; background-image:url(http://i47.tinypic.com/6oivxl.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:220px; margin-bottom:0; } .header_onhold { background-color:transparent; background-image:url(http://i47.tinypic.com/2r4ph20.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:210px; margin-bottom:0; } .header_dropped { background-color:transparent; background-image:url(http://i47.tinypic.com/16bg5fn.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:190px; margin-bottom:0; } .header_ptw { background-color:transparent; background-image:url(http://i50.tinypic.com/2s00074.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:190px; margin-bottom:0; } .header_title { background-color:transparent !important; } tbody { background-color:transparent; background-image:none; } .header_title { color:transparent !important; font-size:0 !important; } #list_surround { left:20px !important; position:absolute !important; } |
Shishio-kunSep 29, 2019 8:23 PM
Sep 29, 2019 8:24 PM
#190
@kaitokid187 OK This should be the repaired CSS. Try it out and let me know if it works out well :D body { background-attachment:fixed !important; background-image:url(https://i.imgur.com/4pNAGAN.jpg); background-size:cover; } #list_surround { background-attachment:scroll; background-color:transparent; background-position:50% 50px; background-repeat:no-repeat no-repeat; font-size:81.25%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:50px; width:63.6%; } body { font-family:'Comic Sans MS'; color:#FFF; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFF; text-decoration:initial; text-shadow:none; } a:hover { color:#FF0000; text-shadow:none; } .status_not_selected, .status_selected { border:0 none !important; height:auto !important; padding:0 8px; text-align:center !important; width:16.667% !important; } .status_not_selected a, .status_selected a { background-color:#FF9900; border:1px solid rgba(255, 255, 255, 0.498039); border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; color:#FFFFFF; display:block !important; font-weight:bold; padding:18px; text-shadow:rgba(0, 0, 0, 0.0980392) 0 1px; } .status_selected a { background-color:#FF301A; border-color:rgba(255, 255, 255, 0.498039); } .status_not_selected a:hover { background-color:#FFB300; box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px; text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .status_selected a:hover { background-color:#FF1A00; box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px; text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .table_header { background-color:#FF301A; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:20px; border-top-right-radius:0; } .table_header:nth-of-type(2) { text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:20px; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FFB300; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FFB300; } tr:hover [class^="td"] { background-color:#FF9900; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:30px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FF301A; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:0; border-top-right-radius:0; color:#FFF; text-align:center; } null { } [class^="header_"] * { font-size:19px; height:60px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { content:' CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info.'; } .header_cw { background-color:transparent; background-image:url(https://i.imgur.com/TPFBCHp.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:215px; margin-bottom:0; } .header_completed { background-color:transparent; background-image:url(https://i.imgur.com/iuGKFCj.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:220px; margin-bottom:0; } .header_onhold { background-color:transparent; background-image:url(https://i.imgur.com/VaHZoAA.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:210px; margin-bottom:0; } .header_dropped { background-color:transparent; background-image:url(https://i.imgur.com/kWXTPLL.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:190px; margin-bottom:0; } .header_ptw { background-color:transparent; background-image:url(https://i.imgur.com/y34M4pb.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:190px; margin-bottom:0; } .header_title { background-color:transparent !important; } tbody { background-color:transparent; background-image:none; } .header_title { color:transparent !important; font-size:0 !important; } #list_surround { left:20px !important; position:absolute !important; } |
Sep 30, 2019 3:36 PM
#191
Shishio-kun said: @kaitokid187 OK This should be the repaired CSS. Try it out and let me know if it works out well :D body { background-attachment:fixed !important; background-image:url(https://i.imgur.com/4pNAGAN.jpg); background-size:cover; } #list_surround { background-attachment:scroll; background-color:transparent; background-position:50% 50px; background-repeat:no-repeat no-repeat; font-size:81.25%; line-height:1; margin:0 auto; padding-bottom:10px; padding-top:50px; width:63.6%; } body { font-family:'Comic Sans MS'; color:#FFF; } a { -webkit-transition:all 0.25s ease-in-out 0s; color:#FFF; text-decoration:initial; text-shadow:none; } a:hover { color:#FF0000; text-shadow:none; } .status_not_selected, .status_selected { border:0 none !important; height:auto !important; padding:0 8px; text-align:center !important; width:16.667% !important; } .status_not_selected a, .status_selected a { background-color:#FF9900; border:1px solid rgba(255, 255, 255, 0.498039); border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:20px; border-top-right-radius:20px; color:#FFFFFF; display:block !important; font-weight:bold; padding:18px; text-shadow:rgba(0, 0, 0, 0.0980392) 0 1px; } .status_selected a { background-color:#FF301A; border-color:rgba(255, 255, 255, 0.498039); } .status_not_selected a:hover { background-color:#FFB300; box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px; text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .status_selected a:hover { background-color:#FF1A00; box-shadow:rgba(0, 0, 0, 0.0980392) 0 1px 1px; text-shadow:rgba(0, 0, 0, 0.298039) 0 1px; } .table_header { background-color:#FF301A; } .table_header:first-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:20px; border-top-right-radius:0; } .table_header:nth-of-type(2) { text-align:left; } .table_header:last-of-type { border-bottom-left-radius:0; border-bottom-right-radius:0; border-top-left-radius:0; border-top-right-radius:20px; } .td1 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FFB300; } .td2 { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FFB300; } tr:hover [class^="td"] { background-color:#FF9900; } .td1:nth-of-type(2), .td2:nth-of-type(2) { text-align:left; } .table_header, .td1, .td2, .status_selected, .status_not_selected, .category_totals { border:0; padding:4px; text-align:center; vertical-align:middle; } .table_header, .td1, .td2, .category_totals { line-height:30px; } .borderRBL { line-height:normal !important; } [cellspacing="0"] { line-height:17px; } .category_totals { -webkit-transition:all 0.25s ease-in-out 0s; background-color:#FF301A; border-bottom-left-radius:20px; border-bottom-right-radius:20px; border-top-left-radius:0; border-top-right-radius:0; color:#FFF; text-align:center; } null { } [class^="header_"] * { font-size:19px; height:60px; line-height:24px; padding-bottom:4px; text-align:right; vertical-align:bottom; } .header_title { border-bottom-left-radius:4px; border-bottom-right-radius:4px; border-top-left-radius:4px; border-top-right-radius:4px; color:#FFFFFF; display:inline-block; font-style:italic; height:auto; padding:0 8px 0 0; text-shadow:rgba(0, 0, 0, 0.14902) 0 1px 1px; } #grand_totals { background-color:rgba(0, 0, 0, 0); border:0 none; border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#FFFFFF; line-height:20px; min-height:20px; padding:8px; text-align:center; vertical-align:middle; } #copyright { background-color:rgba(180, 32, 48, 0.6); border-bottom-left-radius:3px; border-bottom-right-radius:3px; border-top-left-radius:3px; border-top-right-radius:3px; color:#EEEEEE; line-height:17px; margin-top:10px; padding:8px; text-align:center; } #copyright::after { content:' CSS by Kyouhansha. Edits by TheHolyPotato. Google 'Shishio's Custom Lists' for more designs and info.'; } .header_cw { background-color:transparent; background-image:url(https://i.imgur.com/TPFBCHp.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:215px; margin-bottom:0; } .header_completed { background-color:transparent; background-image:url(https://i.imgur.com/iuGKFCj.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:220px; margin-bottom:0; } .header_onhold { background-color:transparent; background-image:url(https://i.imgur.com/VaHZoAA.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:210px; margin-bottom:0; } .header_dropped { background-color:transparent; background-image:url(https://i.imgur.com/kWXTPLL.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:190px; margin-bottom:0; } .header_ptw { background-color:transparent; background-image:url(https://i.imgur.com/y34M4pb.png); background-position:0 0; background-repeat:no-repeat no-repeat; height:190px; margin-bottom:0; } .header_title { background-color:transparent !important; } tbody { background-color:transparent; background-image:none; } .header_title { color:transparent !important; font-size:0 !important; } #list_surround { left:20px !important; position:absolute !important; } @Shishio-kun Thankyou Design is Wonderfull |
Oct 26, 2019 9:39 PM
#192
Yo! Thank you for making this For Dummies guide for me lol! But I seem to have a problem my good man. My mouse seems to be invisible while I hover across my list screen. When I right click it appears so that's how I'm currently dealing with it. Could you kindly check my list out? I love your custom list man. Please help me out when you can! :) |
Oct 26, 2019 10:37 PM
#193
shippykaiyaymf said: Yo! Thank you for making this For Dummies guide for me lol! But I seem to have a problem my good man. My mouse seems to be invisible while I hover across my list screen. When I right click it appears so that's how I'm currently dealing with it. Could you kindly check my list out? I love your custom list man. Please help me out when you can! :) Thanks :D Hmm unfortunately I can't recreate the same error (I see the cursor) so I can't fix it, maybe. What browser are you using? Maybe if we take out or override the cursor codes in the CSS, that will set it to normal. You saw cursors on other anime lists and before you used this layout, right? First try this code, paste it to the bottom of your CSS, and save, and see if you can see the cursor again. This could override the cursor changes on this layout and set them to normal. *{ cursor: inherit !important; } |
Oct 26, 2019 11:47 PM
#194
Shishio-kun said: Thanks :D Hmm unfortunately I can't recreate the same error (I see the cursor) so I can't fix it, maybe. What browser are you using? Maybe if we take out or override the cursor codes in the CSS, that will set it to normal. You saw cursors on other anime lists and before you used this layout, right? First try this code, paste it to the bottom of your CSS, and save, and see if you can see the cursor again. This could override the cursor changes on this layout and set them to normal. *{ cursor: inherit !important; } Bro youre so helpful! Thank you for taking the time to reply quickly! I am using Microsoft Edge and omg you solved it! Thank you so much! I was checking out most of your videos dude. You got talent. I love your custom lists so much I wanted to ask you something. I specifically love romance stories. And Ive been obsessed with romance tagged content in anime/manga for close to a decade. But I've always disliked inconclusive or rather harem/shounen ones where nothing concludes in terms of the romance progression. There so many nice people who made their own blog sites like this: https://www.romancecheck.com/en/kimi-no-na-wa-en/#more-1835 where they basically spoil the romance aspect of the title and save people like me time from watching 12+ eps to confirm it myself lol I always wanted to make one but don't know how so I was wondering if theres a way to make that style of spoiler buttons on a list? I know people use the "Tags" section to write their mini reviews/thoughts But is there a way to make a list version of that site I just shared? AND HEY! If not, its cool! lol Ive been meaning to ask you this but thought of not bothering you haha. But Id appreciate your input! Thanks you once again!!! |
Oct 27, 2019 7:13 AM
#195
I used the import statement in step 2, and the images are loading. However, my CSS is lagging like hell. Is there any fix for this? Here's my link: My Anime List Here's my code: @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap'); /*Layout CSS was originally made by Takana no hana, edits by Shishio-kun and Valerio_lyndon If you need help with it please visit our group: https://myanimelist.net/clubs.php?cid=19736 Learn how to customize the layout here: https://myanimelist.net/forum/?topicid=1640096 */ /*@import url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore);*/ @import url(https://fonts.googleapis.com/css?family=Rancho); @import url(https://fonts.googleapis.com/css?family=Slabo+27px|PT+Sans+Narrow); @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; /*BANNER AVATAR */ .cover-block::after {background-image: url(https://i.imgur.com/5Puhv5B.jpg); } /* BANNER QUOTE */ .cover-block::before { content: "There's no advantage to hurrying in life."; } /* BANNER BACKGROUND */ .list-unit .list-status-title:after { background-image: url(https://i.imgur.com/6ikybXG.png); } /* BANNER OPACITY */ .list-unit .list-status-title:after { opacity: 1; } /*CURRENTLY WATCHING MAIN BACKGROUND*/ body[data-query*='"status":1'] { background-image: url(https://i.imgur.com/yOCQApo.jpg); } /*COMPLETED MAIN BACKGROUND*/ body[data-query*='"status":2'] { background-image: url(https://i.imgur.com/R8AkJFT.jpg); } /*ON HOLD MAIN BACKGROUND*/ body[data-query*='"status":3'] { background-image: url(https://i.imgur.com/oqUmEJv.png); } /*DROPPED MAIN BACKGROUND*/ body[data-query*='"status":4'] { background-image: url(https://i.imgur.com/6ttUkuK.png); } /*PLANNED MAIN BACKGROUND*/ body[data-query*='"status":6'] { background-image: url(https://i.imgur.com/aRa7jbM.jpg); } /*ALL ANIME/MANGA MAIN BACKGROUND*/ body[data-query*='"status":7'] { background-image: url(https://i.imgur.com/E69yymM.jpg); } /* ANIME/MANGA CONTAINER SETTINGS */ .list-table > tbody:nth-of-type(2n+1) { background-color: rgba(0,0,0,.8) !important; } .list-table > tbody:nth-of-type(2n) { background-color: rgba(0,0,0,.7) !important; } .list-unit .list-status-title { background-color:rgba(0,0,0,.3) !important; } /* OTHER CODES */ /* Removing default cover (banner) image */ #cover-image{ display: none; } .list-unit .list-status-title { position: relative; display: table-cell; background-color: transparent; width: 1000px; height:400px !important; /*background-color:rgba(127,127,127,1);*/ background: transparent; } /* picture at the bottom of your list ** please note that default is a seiren picture even if you delete the image url below(it's just a sample image which you need to replace). ** if you don't want this section, just delete the image url */ .list-unit .loading-space { height:250px; width:1000px; background-image:url(http://i.imgur.com/oUcAp2Y.png); } #advanced-options { position: fixed; top: 24px; left: 0; right: 0; background-color: rgba(255,255,255,.9); display: none; width: 860px; margin: 0 auto; padding: 25px 0px 30px; -moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); -o-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); -ms-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); color: #323232; text-align: left; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; z-index: 1101; border: none; background-image: url(); background-repeat: no-repeat; background-size: cover; background-position: 50% 100%; } #advanced-options .advanced-options-header { width: 750px; margin: 0px auto; padding-bottom: 4px; border-bottom: 1px solid #BEBEBE; font-size: 16px; color:rgba(0,0,0,.6) !important; } #advanced-options .advanced-options-header .description { font-size: 12px; font-weight: normal; margin-left: 8px; color:rgba(0,0,0,.6) !important; } #advanced-options .sort-widget .widget-header, #advanced-options .filter-widget .widget-header, #advanced-options .filter-widget.aired-date .text, #advanced-options .filter-widget.published-date .text { color:rgba(0,0,0,.6) !important; } #advanced-options select { -ms-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(/img/pc/ownlist/icon_pulldown_triangle.png); background-repeat: no-repeat; background-position: center right; background-size: 18px 8px; background-color: #FFFFFF; display: inline-block; height: 25px; padding: 4px 20px 4px 4px; padding-right: 4px\0; border: #BEBEBE 1px solid; border-radius: 0px; font-size: 12px; } #advanced-options select::-ms-expand { display: none; } #advanced-options select:disabled { background-image: url(/img/pc/ownlist/icon_pulldown_triangle_disable.png); color: #9B9B9B; } #advanced-options input[type=text] { padding: 4px; border: #BEBEBE 1px solid; } #advanced-options input:focus { outline: none; } /* sort */ #advanced-options .sort-widget { margin: 0px auto; padding: 12px 0px 0px; width: 750px; } #advanced-options .sort-widget:last-of-type { padding-bottom: 45px; } #advanced-options .sort-widget select { width: 172px; margin-right: 8px; } #advanced-options .sort-widget input[type=radio] { display: none; } #advanced-options .sort-widget input[type=radio] + label { background-color: #FFFFFF; display: inline-block; width: 56px; padding: 5px 0px; border: #BEBEBE 1px solid; border-radius: 4px; color: #323232; font-size: 12px; text-align: center; cursor: pointer; } #advanced-options .sort-widget input[type=radio]:checked + label { background-color: #244291; border: #244291 1px solid; color: #FFFFFF; } #advanced-options .sort-widget input[type=radio]:disabled + label { border: #BEBEBE 1px solid; color: #9B9B9B; } #advanced-options .sort-widget input[type=radio]:checked:disabled + label { background-color: #FFFFFF; border: #BEBEBE 1px solid; color: #9B9B9B; } /* filter */ #advanced-options .filter-widget { margin: 0px auto; padding: 12px 0px 0; width: 750px; } #advanced-options .filter-widget select { margin-right: 8px; font-size: 12px; } #advanced-options .filter-widget.title input[type=text] { width: 360px; } #advanced-options .filter-widget.airing-status select, #advanced-options .filter-widget.publishing-status select { width: 152px; } #advanced-options .filter-widget.producer select, #advanced-options .filter-widget.magazine select { width: 360px; } #advanced-options .filter-widget.aired-date select.year, #advanced-options .filter-widget.published-date select.year { width: 80px; } #advanced-options .filter-widget.aired-date select.month, #advanced-options .filter-widget.published-date select.month, #advanced-options .filter-widget.aired-date select.day, #advanced-options .filter-widget.published-date select.day { width: 60px; } #advanced-options .filter-widget.aired-date .text, #advanced-options .filter-widget.published-date .text { display: inline-block; margin-right: 4px; font-size: 12px; } #advanced-options .filter-widget.aired-season select.year { width: 80px; } #advanced-options .filter-widget.aired-season select.season { width: 110px; } #advanced-options .sort-widget .widget-header, #advanced-options .filter-widget .widget-header { display: inline-block; width: 110px; font-size: 12px; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; } #advanced-options .sort-widget:last-of-type, #advanced-options .filter-widget:last-of-type { padding-bottom: 40px; } #advanced-options .advanced-options-button { width: 750px; margin: 0px auto; padding: 12px 0px 0px; border-top: 1px solid #BEBEBE; text-align: center; } #advanced-options .btn-apply, #advanced-options .btn-clear { background-color: rgba(0,0,0, 0.8); display: inline-block; width: 135px; margin: 0 4px; padding: 6px 0px; border-radius: 4px; font-size: 12px; color: #FFFFFF; text-align: center; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #advanced-options .btn-apply:hover, #advanced-options .btn-clear:hover { background-color: rgba(0,0,0, 0.8); } /** * General Styles */ td { line-height: 1.5em; height: 35px !important; border:none !important; } a { color: #fff; text-decoration: none; } a:hover { color: #fff !important; text-decoration: none; } #footer-block { padding: 15px 0; background-color: #244291; color: #FFFFFF; font-family: Avenir, "lucida grande", tahoma, verdana, arial, sans-serif; display:none; } #copyright { font-size: 12px; color: #FFFFFF; padding-top: 3px; text-align: center; } /* * Header */ .header a { font-weight: bold; color: #fff !important; } .header a:hover { text-decoration: underline; } .header { position: absolute; color: #fff; display: block; width: 100%; height: 50px; margin: 0 auto border:none; background: -webkit-linear-gradient(rgba(0,0,0,.4), transparent); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(rgba(0,0,0,.4), transparent); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(rgba(0,0,0,.4), transparent); /* For Firefox 3.6 to 15 */ background: linear-gradient(rgba(0,0,0,.4), transparent); /* Standard syntax */ -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; z-index: 40; } .header:hover {background-color:rgba(0,0,0,.5); -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .header .header-menu { position: absolute; top: 5px; right: 4px } .header .header-menu.other { top: 5px; } .header .header-menu .header-info { font-size: 10px; margin-top: 6px; margin-right: 15px; text-align: right; } .header .username { font-weight: bold; } .header .header-menu .list-menu { position: absolute; top: 25px; right: -4px; background-color: rgba(255,255,255,.8); display: none; border: none !important; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px; box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px; z-index: 1; } .header .header-menu .list-menu .icon-menu { display: block; width: 150px; height: 30px; color: #000; font-size: 14px; font-weight: bold; text-decoration: none; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .header .header-menu .list-menu .icon-menu:hover { background-color: rgba(0,0,0,.5); } .header .header-menu .list-menu .icon-menu svg.icon { position: absolute; fill: rgba(0,0,0,.5); left: 12px; top: 4px; } .header .header-menu .list-menu .icon-menu:hover svg.icon { fill: rgba(255,255,255,1) !important; } .header .header-menu .list-menu .icon-menu .text { position: absolute; left: 52px; top: 6px; } .header .header-menu .list-menu .icon-menu:hover .text {color:rgba(255,255,255,1) !important;} .header .header-menu .btn-menu { display: block; text-align: right; color: rgba(0,0,0,0.7) !important; font-size: 12px !important; text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000; } #header-menu-dropdown > a {color: rgba(0,0,0,.5) !important;} /* svg.icon.icon-manga-list {color: rgba(0,0,0,.5) !important;} */ /** * Floating Menu */ /** * Floating Menu */ .list-menu-float:before {content: "\f0c9"; font-family: 'FontAwesome' !important; display: block; text-align: center !important; text-indent: 10px; color: #fff !important; font-size:1.5em !important; height: 50px; width: 40px; line-height: 50px;} .list-menu-float:hover:before { font-size:1.7em !important; text-shadow: 0 0 2px #fff, 0 0 1px #fff, 1px 1px 7px #fff, 0 0 0 #fff; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .list-menu-float {position: absolute; top: 0px; left:0px; width: 50px; border: none; opacity: 1; height: 40px !important; z-index: 100; } .list-menu-float .icon-menu {display: block; width: 120px; background-color: #dfdfdf; height: 30px; line-height: 30px; text-indent: 10px; opacity:0; } .list-menu-float:hover .icon-menu {opacity:1; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;} .list-menu-float .icon-menu.profile {background-image: none !important;} .list-menu-float .icon-menu.profile:before {position:absolute; width:120px !important; content: "\f007\00a0Profile"; font-family: 'FontAwesome' !important; margin-top:5px !important; margin-left:-65px !important; color: #000; text-align: center;} .list-menu-float .icon-menu .text {opacity: 1; width: auto; left: 20px; top: 0; color: #555555;} .list-menu-float .icon-menu:hover {width: 120px !important; background-color:rgba(0,0,0,.5) !important;} .list-menu-float .icon-menu:hover .text, .list-menu-float .icon-menu:hover:before, .list-menu-float .icon-menu:hover:after {color: #fff; width: auto;} .list-menu-float .icon-menu.logout {border-radius: 0 0 4px 4px;} .list-menu-float .icon-menu.setting {display:none;} .list-menu-float .icon-menu svg.icon {top: 7px !important; left: 5px !important; width: 15px; height: 15px;} .list-menu-float .icon-menu.setting svg.icon-setting {display:none;} /** * List Container */ .list-container { position: absolute; background-color: transparent !important; width: 1000px; left: 0; right: 0; margin: auto; margin-top:100px; box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000; border:none !important; margin-bottom:30px; } /** * List Container - Cover Block */ .cover-block { position:relative; display: block; width: 1000px; margin: 0 auto; height:auto; text-align: center; vertical-align: middle; /*box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;*/ padding-bottom:40px; } .cover-block .image-container { display: block; width: 1000px; height:auto; padding-top:0; } .cover-block .image-container.hide { display: none; } .cover-block .image-container img { max-width: 1000px; height: auto; } /* cover image */ #cover-image{ margin:auto; width:1000px !important; height:auto; background-color:transparent; background-size: cover !important; background-position: 50% 50%; } /* setting icon */ .cover-block .image-container .btn-list-setting { display: none; } .cover-block .image-container:hover .btn-list-setting { display: block; position: absolute; top: 20px; right: 28px; padding: 8px; border: rgba(255,255,255,0) 1px solid; font-size: 14px; color: #ffffff; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; } .cover-block .image-container .btn-list-setting:hover { position: absolute; top: 20px; right: 28px; background-color: rgba(0,0,0,0.6); padding: 8px; border: none; -moz-box-shadow: 0 0 4px #000000; -webkit-box-shadow: 0 0 4px #000000; -o-box-shadow: 0 0 4px #000000; -ms-box-shadow: 0 0 4px #000000; box-shadow: 0 0 4px #000000; font-size: 14px; color: #ffffff; text-shadow: #323232 1px 1px 1px; } .cover-block .image-container .btn-list-setting .fa-camera { font-size: 16px; -moz-text-shadow: #000000 1px 1px 3px; -webkit-text-shadow: #000000 1px 1px 3px; -o-text-shadow: #000000 1px 1px 3px; -ms-text-shadow: #000000 1px 1px 3px; text-shadow: #000000 1px 1px 3px; -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#000000,offx=1,offy=1)"; } .cover-block .image-container .btn-list-setting .icon-plus-circle { position: absolute; top: 4px; left: 18px; background-color: rgba(0,0,0,0.6); border-radius: 50%; -moz-box-shadow: -1px 1px 0px 0px #323232; -webkit-box-shadow: -1px 1px 0px 0px #323232; -o-box-shadow: -1px 1px 0px 0px #323232; -ms-box-shadow: -1px 1px 0px 0px #323232; box-shadow: -1px 1px 0px 0px #323232; font-size: 10px; } .cover-block .image-container .btn-list-setting .text { display: none; } .cover-block .image-container .btn-list-setting:hover .text { display: inline-block;; margin-left: 4px; } /** * List Container - Status Menu */ .status-menu-container { width: 1000px; height: 40px; background-color: rgba(255,255,255,.9); border-bottom: none; z-index: 1; margin-top:-40px; } .status-menu-container.fixed { position: absolute; display: none !important; top: 0; } .status-menu-container.fixed + div.list-block { margin-top: 0px; } .status-menu-container .status-menu { display: table; margin: 0 auto; border-collapse: separate; border-spacing: 0px 0; } .status-menu-container .status-menu .status-button { position: relative; display: table-cell; padding: 10px; left: 17px !important; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; text-align: center; vertical-align: middle; padding: 1.2em 10px; line-height: 1.105em; font-size: 1.1em; color: #9B9B9B; } .status-menu-container .status-menu .status-button.on { color: #000; font-weight: bold; } .status-menu-container .status-menu .status-button:hover { background-color: rgba(0,0,0,.5); color: #fff; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .status-menu-container .status-menu .status-button.on:after, .status-menu .status-button:hover:after { opacity: 1 } .status-menu-container .status-menu .status-button.watching:before, .status-menu-container .status-menu .status-button.reading:before { content: "\f152\00a0\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button.completed:before { content: "\f05d\00a0\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button.onhold:before { content: "\f017\00a0\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button.plantowatch:before, .status-menu-container .status-menu .status-button.plantoread:before { content: "\f073\00a0\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button.dropped:before { content: "\f00d\00a0\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button.all_anime:before { content: "\f022\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button:after {display:none !important;} /*scroll bar*/ ::-webkit-scrollbar {height: 7px; width: 7px; background-color: #f5f5f5;} ::-webkit-scrollbar-thumb {border: 2px solid #f5f5f5; background-color: #9B9B9B;} /** * List Container - Status Menu - Search */ .status-menu-container .search-container { position: absolute; right: 5px; z-index:20; } .status-menu-container .search-container #search-button { display: inline-block; height: 22px; margin-top: 10px; color: #787878; font-size: 1.6em; vertical-align: middle; } .status-menu-container .search-container #search-box { display: inline-block; width: 0; height: 22px; overflow: hidden; margin-top: 5px; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; vertical-align: middle; } .status-menu-container .search-container #search-box.open { display: inline-block; width: 130px; } .status-menu-container .search-container #search-box input { width: 100%; height: 100%; box-sizing: border-box; } /** * List Container - List Block */ .list-block { margin: 0; min-height:265px; background: transparent; } .list-unit { background-color:transparent; margin: auto; width: 1000px; /*box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;*/ background: transparent; } /** * List Container - List Status Title (with Stats) */ .list-unit .list-status-title .text { display: block; width: 1000px; height: 38px !important; font-size: 22px; color: #fff; text-align: center; vertical-align: middle; text-align: center; font-weight: 500; letter-spacing: 0.5px; border:none; text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #FFF !important; font-style: bold; background-color: transparent; margin-top: 363px !important; background-color: transparent; } .list-unit .list-status-title .stats a.filterd { text-shadow: 0px 0px 2px #FFF; } .list-unit .list-status-title .stats a:hover { background:rgba(0,0,0,.5); padding:8px; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .list-unit .list-stats { background-color: rgba(255,255,255,.8); margin-top: -155px !important; color : #000; height: 25px; margin:auto; position: absolute; width: 1000px; z-index: 1 !important; } .list-unit .list-status-title .stats { position: absolute; height: 40px; line-height: 40px; width:180px; right: -25px; margin-top: -441px; z-index: 1; background-color: transparent; } .list-unit .list-status-title .stats a { color: #9B9B9B; padding:8px; margin:0 !important; } /** * List Container - List Table */ .list-table { width: 100%; margin: 0 auto; border-collapse: collapse; background-color:transparent !important; color: #fff !important; border:none; } /** * List Container - List Table - Header */ .list-table .list-table-header:before {content: "\f0dc\00a0SORT"; display: block; text-align: center !important; font-family: 'FontAwesome' !important; text-indent: 0px; color: #9B9B9B !important; font-weight: 700 !important; width: 57px; line-height: 40px; height:40px; margin-left:0px !important; } .list-table .list-table-header:hover:before {color:#fff !important; background-color:rgba(0,0,0,.5);} .list-table .list-table-header { position: absolute; display: block; margin-left:0; margin-top:-440px; z-index:200 !important; } .list-table .list-table-header .header-title { background: #F6F6F6 url("/img/pc/ownlist/bar-table-header.png") no-repeat right 7px / 1px 22px; display: block; border-bottom: 0; height: 39px; text-align: center; vertical-align: middle; z-index:60 !important; opacity:0; } .list-table .list-table-header:hover .header-title {opacity:1; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;} .list-table .list-table-header .header-title:last-child { background-image: none; } .list-table .list-table-header .header-title.status,.list-table .list-table-header .header-title.number,.list-table .list-table-header .header-title.image,.list-table .list-table-header .header-title.tags { background-image: none; display:none !important; } .list-table .list-table-header .header-title.title { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.score { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.type { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.progress { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.chapters { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.volumes { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.rated { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.started { display:none; } .list-table .list-table-header .header-title.finished { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.days { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.storage { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.retail { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.priority { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title .link { font-size: 11px; color: #323232; text-decoration: none height:40px; width:90px; } .list-table .list-table-header .header-title.studio { display:none !important; } .list-table .list-table-header .header-title .link.sort { position: relative; display: inline-block; color: #323232; height:40px; width:90px; white-space: nowrap; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .list-table .list-table-header .header-title .link.sort:hover { color: #000; background-color: rgba(0,0,0,.5); height:40px; width:90px; } .list-table .list-table-header .header-title .sort-icon { color: #fff; } /* customize list */ .list-table .list-table-data { } .list-table .list-table-data:hover { /*box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important;*/ transition: .2s linear; background-color:rgba(0,0,0,.3); } .list-table .list-table-data:hover .data.title { text-shadow: 0 0 2px #000, 0 0 1px #000, 0 1px 7px #000, 0 0 0.5px #000; color:#fff; transition: .1s linear; } .header a:hover,.list-table .list-table-data a:not(.edit-disabled):hover { text-decoration:underline; } /** * List Container - List Table - Items */ .list-table .list-table-data .data { display: table-cell; padding: 4px 0; text-align: center; vertical-align: middle; color: #fff !important; border:none; } .list-table .list-table-data:hover .data { color: #fff !important; } .list-table .list-table-data a:not(.edit-disabled):hover { text-decoration: underline; color: #fff !important; } .list-table .list-table-data a.edit-disabled { cursor: text; color: #fff; } .list-table .list-table-data .tags .edit { display: block; width: 100%; text-align: center; color: #2db039; font-size: 10px; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; display:none; } .list-table .list-table-data .tags .edit:hover { display:none; } .list-table .list-table-data .tags textarea { box-sizing: border-box; width: 100%; height: 60px; } .list-table .list-table-data .data.image a { display:inline-block!important; } .list-table .list-table-data .data.image { width:4%; } .list-table .list-table-data .data.image .image { width: 30px !important; height: 30px !important; background-size:cover; border:2px solid #fff; -webkit-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76); -moz-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76); box-shadow:2px 2px 8px -3px rgba(0,0,0,.76); border-radius:180px; display:inline-block!important; } .list-table .list-table-data:hover .data.image .image { display:inline-block!important; margin-left:-30px; opacity: 0; -moz-transition-duration: 0.3s ease-in-out; -o-transition-duration: 0.3s ease-in-out; -webkit-transition-duration: 0.3s ease-in-out; transition-duration: 0.3s ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out -moz-transition:all .3s ease;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease; } /* */ .list-table .list-table-data .data.season * { color:#fff; } .list-table .list-table-data .data.title { padding-left: 8px; text-align: left; width:60%; } .list-table .list-table-data .data.title a { line-height:35px !important; display: inline-block; min-width:0; max-width: 450px; /* the width of your titles */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .list-table .list-table-data .data.title .link { font-size: 16px !important; text-decoration: none !important; font-family: 'PT Sans Narrow', sans-serif; font-weight:100 !important; transition: all 0.3s ease 0s; color: #fff; } .list-table .list-table-data:hover .data.title .link { letter-spacing: 0.5px; transition: all 0.3s ease 0s; color: #fff !important; } .list-table .list-table-data .data.title .rewatching, .list-table .list-table-data .data.title .rereading, .list-table .list-table-data .data.title .content-status { text-shadow: 0 0 2px #1a1aff, 0 0 1px #1a1aff, 1px 1px 7px #1a1aff, 0 0 0 #1a1aff !important; color: #fff !important; font-size: 0.9em !important; margin-left:5px; display:inline-block; margin-top:10px !important; position:absolute; } .list-table .list-table-data .data.score .link { font-size: 1.1em; font-weight: bold; } .list-table .list-table-data .data.score { width: 21px !important; height: 21px !important; background-image: url(http://i.imgur.com/udzEw6G.png); background-repeat: no-repeat; background-size:contain; background-position: 50% 50%; } .list-table .list-table-data:hover .data.score { background-image: url(http://i.imgur.com/EQcGOeO.png); text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; } .list-table .list-table-data .data.score a {color:#fff !important;} td.td1.borderRBL { color:#fff; } /*add edit */ .list-table .list-table-data .data.title .add-edit-more { float: right; margin-right: 10px; font-size:0 !important; margin-top:10px; } .add-edit-more { opacity: 0; transition: all 0.2s ease 0s; } .list-item:hover .add-edit-more { opacity: 1; transition: all 0.2s ease 0s; } .list-table .list-table-data .data.title .edit a { background-image: url(http://i.imgur.com/OT1yCLP.png); display: inline-block; width: 15px; height: 15px; background-size: cover; color: transparent !important; margin-right: 7px !important; } .list-table .list-table-data .data.title .more a { background-image: url(http://i.imgur.com/cUAaila.png); display: inline-block; width: 15px; height: 15px; background-size: cover; color: transparent !important; } .list-table .list-table-data .data.title .add a { background-image: url(http://i.imgur.com/AoTgUAL.png); display: inline-block; width: 15px; height: 15px; background-size: cover; color: transparent !important; margin-right: 7px !important; } /* */ .list-table .list-table-data .data.title .more { position: relative; } .list-table .more-info { display: none; } .list-table .more-info .more-content { padding: 10px; } /* */ .list-table .list-table-data .data.number { width:2% !important; } .list-table .list-table-data:hover .data.number { opacity:0; } /* review section */ .list-table .list-table-data .data.tags { position: fixed; right: calc( 50% + 510px); top: calc(20% + 230px); opacity: 0; display: inline !important; line-height: 16px !important; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; text-align:left; width:150px !important; height:auto !important; background-color:rgba(0,0,0,.5); box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; pointer-events: none; /* animation */ transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out; z-index: 6; } .list-table .list-table-data .data.tags span:after { position: fixed; right: calc( 50% + 510px); top: calc(20% + 230px); opacity: 0; display: block !important; content:''; width:150px !important; height:auto; pointer-events: none; /* animation */ transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out; } .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after { opacity: 1; padding:5px; box-sizing: border-box; right: calc( 50% + 510px); transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out; } .list-table .list-table-data .data.tags * {color: #fff !important;} .list-table .list-table-header .header-title.tags { display:none; } .link.sort + a {display: none;} /* remove watch buttons */ .list-table .list-table-data .data.studio { position:fixed; width: 150px; text-align:center; right: calc( 50% + 511px); top: calc(20% + 184px); height: 30px !important; opacity:0; z-index: 60 !important; background-color: transparent; background: rgba(0,0,0,0); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.7))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); pointer-events:none; } .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.studio {opacity:1;} .list-item .data.studio * { text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important; font-weight: bold !important; color:#fff !important; } /** * Large full-res hover images */ .data.image a:before {content: ""; display: block !important; position: fixed; top:20%; right: calc( 50% + 530px); width: 150px; height: 221px; background-color: rgba(0,0,0,.3); background-position: center !important; background-repeat: no-repeat !important; background-size: cover; border: 1px solid #ffffff; box-shadow: 0 2px 5px rgba(0,0,0, 0.7); visibility: hidden; opacity: 0; transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out; z-index: 5;} .list-table .list-table-data:hover .data.image a:before { visibility: visible; opacity: 1; right: calc( 50% + 510px); transition: .3s ease-out;} /* */ .list-table .list-table-data .data.status { width: 4px; } .list-table .list-table-data .data.status .text { font-size:1.5em; } .list-table .list-table-data .data.status.reading, .list-table .list-table-data .data.status.watching { /*background-color: #2db039 */ background-color:transparent; } .list-table .list-table-data .data.status.plantoread, .list-table .list-table-data .data.status.plantowatch { /*background-color: #c3c3c3 */ background-color:transparent; } .list-table .list-table-data .data.status.completed { /*background-color: #26448f */ background-color:transparent; } .list-table .list-table-data .data.status.onhold { /*background-color: #f1c83e */ background-color:transparent; } .list-table .list-table-data .data.status.dropped { /*background-color: #a12f31 */ background-color:transparent; } /* list status */ .list-table .list-table-data .data.status.completed:before, .list-table .list-table-data .data.status.reading:before, .list-table .list-table-data .data.status.watching:before,.list-table .list-table-data .data.status.plantoread:before, .list-table .list-table-data .data.status.plantowatch:before,.list-table .list-table-data .data.status.onhold:before,.list-table .list-table-data .data.status.dropped:before { display: inline-block !important; position: absolute; margin-left:8px; margin-top:-7px; z-index: 100 !important; content: ""; pointer-events: none; opacity: 0; text-align:center !important; } .list-table .list-table-data:hover .data.status.completed:before, .list-table .list-table-data:hover .data.status.reading:before, .list-table .list-table-data:hover .data.status.watching:before,.list-table .list-table-data:hover .data.status.plantoread:before, .list-table .list-table-data:hover .data.status.plantowatch:before,.list-table .list-table-data:hover .data.status.onhold:before,.list-table .list-table-data:hover .data.status.dropped:before { opacity: 1; text-align:center !important; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .list-table .list-table-data:hover .data.status.completed:before { /* background-color: #26448f !important; */ color:#fff; content: "\f05d"; font-size: 1.5em; font-family: 'FontAwesome' !important; } .list-table .list-table-data:hover .data.status.watching:before, .list-table .list-table-data:hover .data.status.reading:before { /*background-color: #2db039 !important;*/ color:#fff; content: "\f152"; font-size: 1.5em; font-family: 'FontAwesome' !important;} .list-table .list-table-data:hover .data.status.plantowatch:before, .list-table .list-table-data:hover .data.status.plantoread:before {/*background-color: #c3c3c3 !important;*/ color:#fff; content: "\f073"; font-size: 1.5em; font-family: 'FontAwesome' !important;} .list-table .list-table-data:hover .data.status.onhold:before {/*background-color: #f1c83e !important;*/ color:#fff; content: "\f017"; font-size: 1.5em; font-family: 'FontAwesome' !important;} .list-table .list-table-data:hover .data.status.dropped:before {/*background-color: #a12f31 !important;*/ color:#fff; content: "\f00d"; font-size: 1.5em; font-family: 'FontAwesome' !important;} /* */ .list-unit .loading-space { background-color:rgba(0, 0, 0, .3); color: #fff !important; display: inline-block; margin: auto; width: 1000px; font-size: 11px; line-height:15px; text-align: middle !important; padding-top: 0px; margin-bottom: 0px; height:250px; background-attachment:scroll; background-image:url(); background-repeat: no-repeat no-repeat; background-position: 0% 100%; } /*override codes*/ .header .header-info > a {color: rgba(255,255,255,1) !important;} .header .header-info {color: rgba(255,255,255,0.8) !important;} .header .header-menu {color: rgba(255,255,255,0.8) !important;} .header .header-menu .btn-menu {color: rgba(255,255,255,0.8) !important;} .username {color: rgba(255,255,255,0.8) !important;} #header-menu-button {color: rgba(255,255,255,0.8) !important;} .header a { font-weight: bold; color: #fff !important; } .icon-watch, .icon-watch-pv {display:none !important;} /*profile image & name */ .cover-block::after { height: 120px !important; width: 120px! important; background-repeat: no-repeat; background-size: contain; position: absolute; display:block !important; margin-left:57px; margin-top:-70px; content: ""; z-index: 2 !important; padding: 5px; background-color:#fff; box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); border-radius:5px; border: #fff 2px solid; } .cover-block::before { position: absolute; display:block !important; margin-left:200px; bottom:40px; width: 300px; color: #ffffff; font-size: 29px !important; font-family: Rancho; text-align: left; text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important; letter-spacing: 0 !important; } /* */ .header .header-title { position: absolute; top: 0px; left: 40px; background-image: url("http://i.imgur.com/39cRtfK.png"); background-position: left top; background-repeat: no-repeat; background-size: auto 50px; display: block; width: 50px !important; height: 50px; text-indent: -9999px; overflow: hidden } /* customization */ /* The list background */ body[data-query*='"status":1'], body[data-query*='"status":2'], body[data-query*='"status":3'], body[data-query*='"status":4'], body[data-query*='"status":6'], body[data-query*='"status":7'] { background-attachment: fixed !important; background-position: center top; background-repeat: no-repeat !important; background-size:cover; } * {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important;} /* */ span a[href*="&tag=!"], span a[href*="&tag=%40"], span a[href*="&tag=~"] {display: none !important;} /* favorite */ @media entrytags-favorites {} a[href$="&tag=*"] {position: absolute; left: 0; width: 150px; height: 0; font-size: 15px; top: 0px; color: transparent !important; } a[href$="&tag=*"]:after {content: '\f005'; font-family: 'FontAwesome' !important; display: inline-block; pointer-events: all; /* change the position below, and add in margin-whatever if it's not enough */ position: absolute; top: -224px; left: 130px; /* change the size of font */ font-size: 1.1em; color: #fff !important; text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #fff !important; pointer-events:none; } /* Intro animation */ @keyframes intro { from { opacity: 0; margin-top: 100vh; } 16% { opacity: 0; margin-top: 100vh; } to { opacity: 1; margin-top: 100px; } } .list-container { animation: intro 2s; } /* */ footer { position: fixed; bottom: 0px; left: 0px; width: 100%; height:30px !important; z-index: 9998; } #footer-block { display:block; background-color: transparent; background: rgba(0,0,0,0); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.6))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); } #copyright { color: #FFF; letter-spacing: 1px; text-shadow: 0px 3px 3px #000; font-size:10px; } #copyright::after { content: "ShelterStyleV3 - Layout originally designed by Takana no Hana" } .list-unit .list-status-title:after { color: transparent; height: 365px !important; width: 1000px !important; background-repeat: no-repeat; background-size: cover; position: absolute !important; display: block !important; left: 0 !important; right: 0 !important; top: 0px !important; content: ""; z-index: 1 !important; pointer-events: none; } .list-table .list-table-data .data.title .link { font-family: Pacifico !important; font-weight: bold; font-size: 16px; } body{ font-family: Roboto Slab !important; font-size: 11px; font-weight: bold; } } |
Shishio-kunOct 27, 2019 1:08 PM
Oct 27, 2019 1:09 PM
#196
shippykaiyaymf said: Shishio-kun said: Thanks :D Hmm unfortunately I can't recreate the same error (I see the cursor) so I can't fix it, maybe. What browser are you using? Maybe if we take out or override the cursor codes in the CSS, that will set it to normal. You saw cursors on other anime lists and before you used this layout, right? First try this code, paste it to the bottom of your CSS, and save, and see if you can see the cursor again. This could override the cursor changes on this layout and set them to normal. *{ cursor: inherit !important; } Bro youre so helpful! Thank you for taking the time to reply quickly! I am using Microsoft Edge and omg you solved it! Thank you so much! I was checking out most of your videos dude. You got talent. I love your custom lists so much I wanted to ask you something. I specifically love romance stories. And Ive been obsessed with romance tagged content in anime/manga for close to a decade. But I've always disliked inconclusive or rather harem/shounen ones where nothing concludes in terms of the romance progression. There so many nice people who made their own blog sites like this: https://www.romancecheck.com/en/kimi-no-na-wa-en/#more-1835 where they basically spoil the romance aspect of the title and save people like me time from watching 12+ eps to confirm it myself lol I always wanted to make one but don't know how so I was wondering if theres a way to make that style of spoiler buttons on a list? I know people use the "Tags" section to write their mini reviews/thoughts But is there a way to make a list version of that site I just shared? AND HEY! If not, its cool! lol Ive been meaning to ask you this but thought of not bothering you haha. But Id appreciate your input! Thanks you once again!!! I don't know, I haven't designed a website in like ten years. I'm sure there's some blog making site out there with something like that or you could just make videos and let ppl know about the spoilers ahead of time to warn them :D |
Oct 27, 2019 1:12 PM
#197
Koustubh said: I used the import statement in step 2, and the images are loading. However, my CSS is lagging like hell. Is there any fix for this? Here's my link: My Anime List Here's my code: @import url('https://fonts.googleapis.com/css?family=Pacifico&display=swap'); @import url('https://fonts.googleapis.com/css?family=Roboto+Slab&display=swap'); /*Layout CSS was originally made by Takana no hana, edits by Shishio-kun and Valerio_lyndon If you need help with it please visit our group: https://myanimelist.net/clubs.php?cid=19736 Learn how to customize the layout here: https://myanimelist.net/forum/?topicid=1640096 */ /*@import url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore);*/ @import url(https://fonts.googleapis.com/css?family=Rancho); @import url(https://fonts.googleapis.com/css?family=Slabo+27px|PT+Sans+Narrow); @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore"; /*BANNER AVATAR */ .cover-block::after {background-image: url(https://i.imgur.com/5Puhv5B.jpg); } /* BANNER QUOTE */ .cover-block::before { content: "There's no advantage to hurrying in life."; } /* BANNER BACKGROUND */ .list-unit .list-status-title:after { background-image: url(https://i.imgur.com/6ikybXG.png); } /* BANNER OPACITY */ .list-unit .list-status-title:after { opacity: 1; } /*CURRENTLY WATCHING MAIN BACKGROUND*/ body[data-query*='"status":1'] { background-image: url(https://i.imgur.com/yOCQApo.jpg); } /*COMPLETED MAIN BACKGROUND*/ body[data-query*='"status":2'] { background-image: url(https://i.imgur.com/R8AkJFT.jpg); } /*ON HOLD MAIN BACKGROUND*/ body[data-query*='"status":3'] { background-image: url(https://i.imgur.com/oqUmEJv.png); } /*DROPPED MAIN BACKGROUND*/ body[data-query*='"status":4'] { background-image: url(https://i.imgur.com/6ttUkuK.png); } /*PLANNED MAIN BACKGROUND*/ body[data-query*='"status":6'] { background-image: url(https://i.imgur.com/aRa7jbM.jpg); } /*ALL ANIME/MANGA MAIN BACKGROUND*/ body[data-query*='"status":7'] { background-image: url(https://i.imgur.com/E69yymM.jpg); } /* ANIME/MANGA CONTAINER SETTINGS */ .list-table > tbody:nth-of-type(2n+1) { background-color: rgba(0,0,0,.8) !important; } .list-table > tbody:nth-of-type(2n) { background-color: rgba(0,0,0,.7) !important; } .list-unit .list-status-title { background-color:rgba(0,0,0,.3) !important; } /* OTHER CODES */ /* Removing default cover (banner) image */ #cover-image{ display: none; } .list-unit .list-status-title { position: relative; display: table-cell; background-color: transparent; width: 1000px; height:400px !important; /*background-color:rgba(127,127,127,1);*/ background: transparent; } /* picture at the bottom of your list ** please note that default is a seiren picture even if you delete the image url below(it's just a sample image which you need to replace). ** if you don't want this section, just delete the image url */ .list-unit .loading-space { height:250px; width:1000px; background-image:url(http://i.imgur.com/oUcAp2Y.png); } #advanced-options { position: fixed; top: 24px; left: 0; right: 0; background-color: rgba(255,255,255,.9); display: none; width: 860px; margin: 0 auto; padding: 25px 0px 30px; -moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); -webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); -o-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); -ms-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); color: #323232; text-align: left; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; z-index: 1101; border: none; background-image: url(); background-repeat: no-repeat; background-size: cover; background-position: 50% 100%; } #advanced-options .advanced-options-header { width: 750px; margin: 0px auto; padding-bottom: 4px; border-bottom: 1px solid #BEBEBE; font-size: 16px; color:rgba(0,0,0,.6) !important; } #advanced-options .advanced-options-header .description { font-size: 12px; font-weight: normal; margin-left: 8px; color:rgba(0,0,0,.6) !important; } #advanced-options .sort-widget .widget-header, #advanced-options .filter-widget .widget-header, #advanced-options .filter-widget.aired-date .text, #advanced-options .filter-widget.published-date .text { color:rgba(0,0,0,.6) !important; } #advanced-options select { -ms-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(/img/pc/ownlist/icon_pulldown_triangle.png); background-repeat: no-repeat; background-position: center right; background-size: 18px 8px; background-color: #FFFFFF; display: inline-block; height: 25px; padding: 4px 20px 4px 4px; padding-right: 4px\0; border: #BEBEBE 1px solid; border-radius: 0px; font-size: 12px; } #advanced-options select::-ms-expand { display: none; } #advanced-options select:disabled { background-image: url(/img/pc/ownlist/icon_pulldown_triangle_disable.png); color: #9B9B9B; } #advanced-options input[type=text] { padding: 4px; border: #BEBEBE 1px solid; } #advanced-options input:focus { outline: none; } /* sort */ #advanced-options .sort-widget { margin: 0px auto; padding: 12px 0px 0px; width: 750px; } #advanced-options .sort-widget:last-of-type { padding-bottom: 45px; } #advanced-options .sort-widget select { width: 172px; margin-right: 8px; } #advanced-options .sort-widget input[type=radio] { display: none; } #advanced-options .sort-widget input[type=radio] + label { background-color: #FFFFFF; display: inline-block; width: 56px; padding: 5px 0px; border: #BEBEBE 1px solid; border-radius: 4px; color: #323232; font-size: 12px; text-align: center; cursor: pointer; } #advanced-options .sort-widget input[type=radio]:checked + label { background-color: #244291; border: #244291 1px solid; color: #FFFFFF; } #advanced-options .sort-widget input[type=radio]:disabled + label { border: #BEBEBE 1px solid; color: #9B9B9B; } #advanced-options .sort-widget input[type=radio]:checked:disabled + label { background-color: #FFFFFF; border: #BEBEBE 1px solid; color: #9B9B9B; } /* filter */ #advanced-options .filter-widget { margin: 0px auto; padding: 12px 0px 0; width: 750px; } #advanced-options .filter-widget select { margin-right: 8px; font-size: 12px; } #advanced-options .filter-widget.title input[type=text] { width: 360px; } #advanced-options .filter-widget.airing-status select, #advanced-options .filter-widget.publishing-status select { width: 152px; } #advanced-options .filter-widget.producer select, #advanced-options .filter-widget.magazine select { width: 360px; } #advanced-options .filter-widget.aired-date select.year, #advanced-options .filter-widget.published-date select.year { width: 80px; } #advanced-options .filter-widget.aired-date select.month, #advanced-options .filter-widget.published-date select.month, #advanced-options .filter-widget.aired-date select.day, #advanced-options .filter-widget.published-date select.day { width: 60px; } #advanced-options .filter-widget.aired-date .text, #advanced-options .filter-widget.published-date .text { display: inline-block; margin-right: 4px; font-size: 12px; } #advanced-options .filter-widget.aired-season select.year { width: 80px; } #advanced-options .filter-widget.aired-season select.season { width: 110px; } #advanced-options .sort-widget .widget-header, #advanced-options .filter-widget .widget-header { display: inline-block; width: 110px; font-size: 12px; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; } #advanced-options .sort-widget:last-of-type, #advanced-options .filter-widget:last-of-type { padding-bottom: 40px; } #advanced-options .advanced-options-button { width: 750px; margin: 0px auto; padding: 12px 0px 0px; border-top: 1px solid #BEBEBE; text-align: center; } #advanced-options .btn-apply, #advanced-options .btn-clear { background-color: rgba(0,0,0, 0.8); display: inline-block; width: 135px; margin: 0 4px; padding: 6px 0px; border-radius: 4px; font-size: 12px; color: #FFFFFF; text-align: center; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } #advanced-options .btn-apply:hover, #advanced-options .btn-clear:hover { background-color: rgba(0,0,0, 0.8); } /** * General Styles */ td { line-height: 1.5em; height: 35px !important; border:none !important; } a { color: #fff; text-decoration: none; } a:hover { color: #fff !important; text-decoration: none; } #footer-block { padding: 15px 0; background-color: #244291; color: #FFFFFF; font-family: Avenir, "lucida grande", tahoma, verdana, arial, sans-serif; display:none; } #copyright { font-size: 12px; color: #FFFFFF; padding-top: 3px; text-align: center; } /* * Header */ .header a { font-weight: bold; color: #fff !important; } .header a:hover { text-decoration: underline; } .header { position: absolute; color: #fff; display: block; width: 100%; height: 50px; margin: 0 auto border:none; background: -webkit-linear-gradient(rgba(0,0,0,.4), transparent); /* For Safari 5.1 to 6.0 */ background: -o-linear-gradient(rgba(0,0,0,.4), transparent); /* For Opera 11.1 to 12.0 */ background: -moz-linear-gradient(rgba(0,0,0,.4), transparent); /* For Firefox 3.6 to 15 */ background: linear-gradient(rgba(0,0,0,.4), transparent); /* Standard syntax */ -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; z-index: 40; } .header:hover {background-color:rgba(0,0,0,.5); -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .header .header-menu { position: absolute; top: 5px; right: 4px } .header .header-menu.other { top: 5px; } .header .header-menu .header-info { font-size: 10px; margin-top: 6px; margin-right: 15px; text-align: right; } .header .username { font-weight: bold; } .header .header-menu .list-menu { position: absolute; top: 25px; right: -4px; background-color: rgba(255,255,255,.8); display: none; border: none !important; -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px; -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px; box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px; z-index: 1; } .header .header-menu .list-menu .icon-menu { display: block; width: 150px; height: 30px; color: #000; font-size: 14px; font-weight: bold; text-decoration: none; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .header .header-menu .list-menu .icon-menu:hover { background-color: rgba(0,0,0,.5); } .header .header-menu .list-menu .icon-menu svg.icon { position: absolute; fill: rgba(0,0,0,.5); left: 12px; top: 4px; } .header .header-menu .list-menu .icon-menu:hover svg.icon { fill: rgba(255,255,255,1) !important; } .header .header-menu .list-menu .icon-menu .text { position: absolute; left: 52px; top: 6px; } .header .header-menu .list-menu .icon-menu:hover .text {color:rgba(255,255,255,1) !important;} .header .header-menu .btn-menu { display: block; text-align: right; color: rgba(0,0,0,0.7) !important; font-size: 12px !important; text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000; } #header-menu-dropdown > a {color: rgba(0,0,0,.5) !important;} /* svg.icon.icon-manga-list {color: rgba(0,0,0,.5) !important;} */ /** * Floating Menu */ /** * Floating Menu */ .list-menu-float:before {content: "\f0c9"; font-family: 'FontAwesome' !important; display: block; text-align: center !important; text-indent: 10px; color: #fff !important; font-size:1.5em !important; height: 50px; width: 40px; line-height: 50px;} .list-menu-float:hover:before { font-size:1.7em !important; text-shadow: 0 0 2px #fff, 0 0 1px #fff, 1px 1px 7px #fff, 0 0 0 #fff; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .list-menu-float {position: absolute; top: 0px; left:0px; width: 50px; border: none; opacity: 1; height: 40px !important; z-index: 100; } .list-menu-float .icon-menu {display: block; width: 120px; background-color: #dfdfdf; height: 30px; line-height: 30px; text-indent: 10px; opacity:0; } .list-menu-float:hover .icon-menu {opacity:1; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;} .list-menu-float .icon-menu.profile {background-image: none !important;} .list-menu-float .icon-menu.profile:before {position:absolute; width:120px !important; content: "\f007\00a0Profile"; font-family: 'FontAwesome' !important; margin-top:5px !important; margin-left:-65px !important; color: #000; text-align: center;} .list-menu-float .icon-menu .text {opacity: 1; width: auto; left: 20px; top: 0; color: #555555;} .list-menu-float .icon-menu:hover {width: 120px !important; background-color:rgba(0,0,0,.5) !important;} .list-menu-float .icon-menu:hover .text, .list-menu-float .icon-menu:hover:before, .list-menu-float .icon-menu:hover:after {color: #fff; width: auto;} .list-menu-float .icon-menu.logout {border-radius: 0 0 4px 4px;} .list-menu-float .icon-menu.setting {display:none;} .list-menu-float .icon-menu svg.icon {top: 7px !important; left: 5px !important; width: 15px; height: 15px;} .list-menu-float .icon-menu.setting svg.icon-setting {display:none;} /** * List Container */ .list-container { position: absolute; background-color: transparent !important; width: 1000px; left: 0; right: 0; margin: auto; margin-top:100px; box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000; border:none !important; margin-bottom:30px; } /** * List Container - Cover Block */ .cover-block { position:relative; display: block; width: 1000px; margin: 0 auto; height:auto; text-align: center; vertical-align: middle; /*box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;*/ padding-bottom:40px; } .cover-block .image-container { display: block; width: 1000px; height:auto; padding-top:0; } .cover-block .image-container.hide { display: none; } .cover-block .image-container img { max-width: 1000px; height: auto; } /* cover image */ #cover-image{ margin:auto; width:1000px !important; height:auto; background-color:transparent; background-size: cover !important; background-position: 50% 50%; } /* setting icon */ .cover-block .image-container .btn-list-setting { display: none; } .cover-block .image-container:hover .btn-list-setting { display: block; position: absolute; top: 20px; right: 28px; padding: 8px; border: rgba(255,255,255,0) 1px solid; font-size: 14px; color: #ffffff; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; } .cover-block .image-container .btn-list-setting:hover { position: absolute; top: 20px; right: 28px; background-color: rgba(0,0,0,0.6); padding: 8px; border: none; -moz-box-shadow: 0 0 4px #000000; -webkit-box-shadow: 0 0 4px #000000; -o-box-shadow: 0 0 4px #000000; -ms-box-shadow: 0 0 4px #000000; box-shadow: 0 0 4px #000000; font-size: 14px; color: #ffffff; text-shadow: #323232 1px 1px 1px; } .cover-block .image-container .btn-list-setting .fa-camera { font-size: 16px; -moz-text-shadow: #000000 1px 1px 3px; -webkit-text-shadow: #000000 1px 1px 3px; -o-text-shadow: #000000 1px 1px 3px; -ms-text-shadow: #000000 1px 1px 3px; text-shadow: #000000 1px 1px 3px; -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#000000,offx=1,offy=1)"; } .cover-block .image-container .btn-list-setting .icon-plus-circle { position: absolute; top: 4px; left: 18px; background-color: rgba(0,0,0,0.6); border-radius: 50%; -moz-box-shadow: -1px 1px 0px 0px #323232; -webkit-box-shadow: -1px 1px 0px 0px #323232; -o-box-shadow: -1px 1px 0px 0px #323232; -ms-box-shadow: -1px 1px 0px 0px #323232; box-shadow: -1px 1px 0px 0px #323232; font-size: 10px; } .cover-block .image-container .btn-list-setting .text { display: none; } .cover-block .image-container .btn-list-setting:hover .text { display: inline-block;; margin-left: 4px; } /** * List Container - Status Menu */ .status-menu-container { width: 1000px; height: 40px; background-color: rgba(255,255,255,.9); border-bottom: none; z-index: 1; margin-top:-40px; } .status-menu-container.fixed { position: absolute; display: none !important; top: 0; } .status-menu-container.fixed + div.list-block { margin-top: 0px; } .status-menu-container .status-menu { display: table; margin: 0 auto; border-collapse: separate; border-spacing: 0px 0; } .status-menu-container .status-menu .status-button { position: relative; display: table-cell; padding: 10px; left: 17px !important; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; text-align: center; vertical-align: middle; padding: 1.2em 10px; line-height: 1.105em; font-size: 1.1em; color: #9B9B9B; } .status-menu-container .status-menu .status-button.on { color: #000; font-weight: bold; } .status-menu-container .status-menu .status-button:hover { background-color: rgba(0,0,0,.5); color: #fff; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .status-menu-container .status-menu .status-button.on:after, .status-menu .status-button:hover:after { opacity: 1 } .status-menu-container .status-menu .status-button.watching:before, .status-menu-container .status-menu .status-button.reading:before { content: "\f152\00a0\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button.completed:before { content: "\f05d\00a0\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button.onhold:before { content: "\f017\00a0\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button.plantowatch:before, .status-menu-container .status-menu .status-button.plantoread:before { content: "\f073\00a0\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button.dropped:before { content: "\f00d\00a0\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button.all_anime:before { content: "\f022\00a0"; float: left; font-size: 1.5em; font-family: 'FontAwesome' !important; } .status-menu-container .status-menu .status-button:after {display:none !important;} /*scroll bar*/ ::-webkit-scrollbar {height: 7px; width: 7px; background-color: #f5f5f5;} ::-webkit-scrollbar-thumb {border: 2px solid #f5f5f5; background-color: #9B9B9B;} /** * List Container - Status Menu - Search */ .status-menu-container .search-container { position: absolute; right: 5px; z-index:20; } .status-menu-container .search-container #search-button { display: inline-block; height: 22px; margin-top: 10px; color: #787878; font-size: 1.6em; vertical-align: middle; } .status-menu-container .search-container #search-box { display: inline-block; width: 0; height: 22px; overflow: hidden; margin-top: 5px; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; transition: width 0.3s; -webkit-backface-visibility: hidden; vertical-align: middle; } .status-menu-container .search-container #search-box.open { display: inline-block; width: 130px; } .status-menu-container .search-container #search-box input { width: 100%; height: 100%; box-sizing: border-box; } /** * List Container - List Block */ .list-block { margin: 0; min-height:265px; background: transparent; } .list-unit { background-color:transparent; margin: auto; width: 1000px; /*box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;*/ background: transparent; } /** * List Container - List Status Title (with Stats) */ .list-unit .list-status-title .text { display: block; width: 1000px; height: 38px !important; font-size: 22px; color: #fff; text-align: center; vertical-align: middle; text-align: center; font-weight: 500; letter-spacing: 0.5px; border:none; text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #FFF !important; font-style: bold; background-color: transparent; margin-top: 363px !important; background-color: transparent; } .list-unit .list-status-title .stats a.filterd { text-shadow: 0px 0px 2px #FFF; } .list-unit .list-status-title .stats a:hover { background:rgba(0,0,0,.5); padding:8px; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .list-unit .list-stats { background-color: rgba(255,255,255,.8); margin-top: -155px !important; color : #000; height: 25px; margin:auto; position: absolute; width: 1000px; z-index: 1 !important; } .list-unit .list-status-title .stats { position: absolute; height: 40px; line-height: 40px; width:180px; right: -25px; margin-top: -441px; z-index: 1; background-color: transparent; } .list-unit .list-status-title .stats a { color: #9B9B9B; padding:8px; margin:0 !important; } /** * List Container - List Table */ .list-table { width: 100%; margin: 0 auto; border-collapse: collapse; background-color:transparent !important; color: #fff !important; border:none; } /** * List Container - List Table - Header */ .list-table .list-table-header:before {content: "\f0dc\00a0SORT"; display: block; text-align: center !important; font-family: 'FontAwesome' !important; text-indent: 0px; color: #9B9B9B !important; font-weight: 700 !important; width: 57px; line-height: 40px; height:40px; margin-left:0px !important; } .list-table .list-table-header:hover:before {color:#fff !important; background-color:rgba(0,0,0,.5);} .list-table .list-table-header { position: absolute; display: block; margin-left:0; margin-top:-440px; z-index:200 !important; } .list-table .list-table-header .header-title { background: #F6F6F6 url("/img/pc/ownlist/bar-table-header.png") no-repeat right 7px / 1px 22px; display: block; border-bottom: 0; height: 39px; text-align: center; vertical-align: middle; z-index:60 !important; opacity:0; } .list-table .list-table-header:hover .header-title {opacity:1; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out;} .list-table .list-table-header .header-title:last-child { background-image: none; } .list-table .list-table-header .header-title.status,.list-table .list-table-header .header-title.number,.list-table .list-table-header .header-title.image,.list-table .list-table-header .header-title.tags { background-image: none; display:none !important; } .list-table .list-table-header .header-title.title { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.score { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.type { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.progress { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.chapters { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.volumes { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.rated { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.started { display:none; } .list-table .list-table-header .header-title.finished { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.days { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.storage { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.retail { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title.priority { text-align: center; width:90px; line-height: 40px; padding:0 !important; } .list-table .list-table-header .header-title .link { font-size: 11px; color: #323232; text-decoration: none height:40px; width:90px; } .list-table .list-table-header .header-title.studio { display:none !important; } .list-table .list-table-header .header-title .link.sort { position: relative; display: inline-block; color: #323232; height:40px; width:90px; white-space: nowrap; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .list-table .list-table-header .header-title .link.sort:hover { color: #000; background-color: rgba(0,0,0,.5); height:40px; width:90px; } .list-table .list-table-header .header-title .sort-icon { color: #fff; } /* customize list */ .list-table .list-table-data { } .list-table .list-table-data:hover { /*box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important;*/ transition: .2s linear; background-color:rgba(0,0,0,.3); } .list-table .list-table-data:hover .data.title { text-shadow: 0 0 2px #000, 0 0 1px #000, 0 1px 7px #000, 0 0 0.5px #000; color:#fff; transition: .1s linear; } .header a:hover,.list-table .list-table-data a:not(.edit-disabled):hover { text-decoration:underline; } /** * List Container - List Table - Items */ .list-table .list-table-data .data { display: table-cell; padding: 4px 0; text-align: center; vertical-align: middle; color: #fff !important; border:none; } .list-table .list-table-data:hover .data { color: #fff !important; } .list-table .list-table-data a:not(.edit-disabled):hover { text-decoration: underline; color: #fff !important; } .list-table .list-table-data a.edit-disabled { cursor: text; color: #fff; } .list-table .list-table-data .tags .edit { display: block; width: 100%; text-align: center; color: #2db039; font-size: 10px; font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif; display:none; } .list-table .list-table-data .tags .edit:hover { display:none; } .list-table .list-table-data .tags textarea { box-sizing: border-box; width: 100%; height: 60px; } .list-table .list-table-data .data.image a { display:inline-block!important; } .list-table .list-table-data .data.image { width:4%; } .list-table .list-table-data .data.image .image { width: 30px !important; height: 30px !important; background-size:cover; border:2px solid #fff; -webkit-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76); -moz-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76); box-shadow:2px 2px 8px -3px rgba(0,0,0,.76); border-radius:180px; display:inline-block!important; } .list-table .list-table-data:hover .data.image .image { display:inline-block!important; margin-left:-30px; opacity: 0; -moz-transition-duration: 0.3s ease-in-out; -o-transition-duration: 0.3s ease-in-out; -webkit-transition-duration: 0.3s ease-in-out; transition-duration: 0.3s ease-in-out; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out -moz-transition:all .3s ease;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease; } /* */ .list-table .list-table-data .data.season * { color:#fff; } .list-table .list-table-data .data.title { padding-left: 8px; text-align: left; width:60%; } .list-table .list-table-data .data.title a { line-height:35px !important; display: inline-block; min-width:0; max-width: 450px; /* the width of your titles */ white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .list-table .list-table-data .data.title .link { font-size: 16px !important; text-decoration: none !important; font-family: 'PT Sans Narrow', sans-serif; font-weight:100 !important; transition: all 0.3s ease 0s; color: #fff; } .list-table .list-table-data:hover .data.title .link { letter-spacing: 0.5px; transition: all 0.3s ease 0s; color: #fff !important; } .list-table .list-table-data .data.title .rewatching, .list-table .list-table-data .data.title .rereading, .list-table .list-table-data .data.title .content-status { text-shadow: 0 0 2px #1a1aff, 0 0 1px #1a1aff, 1px 1px 7px #1a1aff, 0 0 0 #1a1aff !important; color: #fff !important; font-size: 0.9em !important; margin-left:5px; display:inline-block; margin-top:10px !important; position:absolute; } .list-table .list-table-data .data.score .link { font-size: 1.1em; font-weight: bold; } .list-table .list-table-data .data.score { width: 21px !important; height: 21px !important; background-image: url(http://i.imgur.com/udzEw6G.png); background-repeat: no-repeat; background-size:contain; background-position: 50% 50%; } .list-table .list-table-data:hover .data.score { background-image: url(http://i.imgur.com/EQcGOeO.png); text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; } .list-table .list-table-data .data.score a {color:#fff !important;} td.td1.borderRBL { color:#fff; } /*add edit */ .list-table .list-table-data .data.title .add-edit-more { float: right; margin-right: 10px; font-size:0 !important; margin-top:10px; } .add-edit-more { opacity: 0; transition: all 0.2s ease 0s; } .list-item:hover .add-edit-more { opacity: 1; transition: all 0.2s ease 0s; } .list-table .list-table-data .data.title .edit a { background-image: url(http://i.imgur.com/OT1yCLP.png); display: inline-block; width: 15px; height: 15px; background-size: cover; color: transparent !important; margin-right: 7px !important; } .list-table .list-table-data .data.title .more a { background-image: url(http://i.imgur.com/cUAaila.png); display: inline-block; width: 15px; height: 15px; background-size: cover; color: transparent !important; } .list-table .list-table-data .data.title .add a { background-image: url(http://i.imgur.com/AoTgUAL.png); display: inline-block; width: 15px; height: 15px; background-size: cover; color: transparent !important; margin-right: 7px !important; } /* */ .list-table .list-table-data .data.title .more { position: relative; } .list-table .more-info { display: none; } .list-table .more-info .more-content { padding: 10px; } /* */ .list-table .list-table-data .data.number { width:2% !important; } .list-table .list-table-data:hover .data.number { opacity:0; } /* review section */ .list-table .list-table-data .data.tags { position: fixed; right: calc( 50% + 510px); top: calc(20% + 230px); opacity: 0; display: inline !important; line-height: 16px !important; font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif; text-align:left; width:150px !important; height:auto !important; background-color:rgba(0,0,0,.5); box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000; pointer-events: none; /* animation */ transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out; z-index: 6; } .list-table .list-table-data .data.tags span:after { position: fixed; right: calc( 50% + 510px); top: calc(20% + 230px); opacity: 0; display: block !important; content:''; width:150px !important; height:auto; pointer-events: none; /* animation */ transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out; } .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after { opacity: 1; padding:5px; box-sizing: border-box; right: calc( 50% + 510px); transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out; } .list-table .list-table-data .data.tags * {color: #fff !important;} .list-table .list-table-header .header-title.tags { display:none; } .link.sort + a {display: none;} /* remove watch buttons */ .list-table .list-table-data .data.studio { position:fixed; width: 150px; text-align:center; right: calc( 50% + 511px); top: calc(20% + 184px); height: 30px !important; opacity:0; z-index: 60 !important; background-color: transparent; background: rgba(0,0,0,0); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.7))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%); pointer-events:none; } .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.studio {opacity:1;} .list-item .data.studio * { text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important; font-weight: bold !important; color:#fff !important; } /** * Large full-res hover images */ .data.image a:before {content: ""; display: block !important; position: fixed; top:20%; right: calc( 50% + 530px); width: 150px; height: 221px; background-color: rgba(0,0,0,.3); background-position: center !important; background-repeat: no-repeat !important; background-size: cover; border: 1px solid #ffffff; box-shadow: 0 2px 5px rgba(0,0,0, 0.7); visibility: hidden; opacity: 0; transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out; z-index: 5;} .list-table .list-table-data:hover .data.image a:before { visibility: visible; opacity: 1; right: calc( 50% + 510px); transition: .3s ease-out;} /* */ .list-table .list-table-data .data.status { width: 4px; } .list-table .list-table-data .data.status .text { font-size:1.5em; } .list-table .list-table-data .data.status.reading, .list-table .list-table-data .data.status.watching { /*background-color: #2db039 */ background-color:transparent; } .list-table .list-table-data .data.status.plantoread, .list-table .list-table-data .data.status.plantowatch { /*background-color: #c3c3c3 */ background-color:transparent; } .list-table .list-table-data .data.status.completed { /*background-color: #26448f */ background-color:transparent; } .list-table .list-table-data .data.status.onhold { /*background-color: #f1c83e */ background-color:transparent; } .list-table .list-table-data .data.status.dropped { /*background-color: #a12f31 */ background-color:transparent; } /* list status */ .list-table .list-table-data .data.status.completed:before, .list-table .list-table-data .data.status.reading:before, .list-table .list-table-data .data.status.watching:before,.list-table .list-table-data .data.status.plantoread:before, .list-table .list-table-data .data.status.plantowatch:before,.list-table .list-table-data .data.status.onhold:before,.list-table .list-table-data .data.status.dropped:before { display: inline-block !important; position: absolute; margin-left:8px; margin-top:-7px; z-index: 100 !important; content: ""; pointer-events: none; opacity: 0; text-align:center !important; } .list-table .list-table-data:hover .data.status.completed:before, .list-table .list-table-data:hover .data.status.reading:before, .list-table .list-table-data:hover .data.status.watching:before,.list-table .list-table-data:hover .data.status.plantoread:before, .list-table .list-table-data:hover .data.status.plantowatch:before,.list-table .list-table-data:hover .data.status.onhold:before,.list-table .list-table-data:hover .data.status.dropped:before { opacity: 1; text-align:center !important; -moz-transition-property: all; -o-transition-property: all; -webkit-transition-property: all; transition-property: all; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; -webkit-transition-duration: 0.3s; transition-duration: 0.3s; -moz-transition-timing-function: ease-in-out; -o-transition-timing-function: ease-in-out; -webkit-transition-timing-function: ease-in-out; transition-timing-function: ease-in-out; } .list-table .list-table-data:hover .data.status.completed:before { /* background-color: #26448f !important; */ color:#fff; content: "\f05d"; font-size: 1.5em; font-family: 'FontAwesome' !important; } .list-table .list-table-data:hover .data.status.watching:before, .list-table .list-table-data:hover .data.status.reading:before { /*background-color: #2db039 !important;*/ color:#fff; content: "\f152"; font-size: 1.5em; font-family: 'FontAwesome' !important;} .list-table .list-table-data:hover .data.status.plantowatch:before, .list-table .list-table-data:hover .data.status.plantoread:before {/*background-color: #c3c3c3 !important;*/ color:#fff; content: "\f073"; font-size: 1.5em; font-family: 'FontAwesome' !important;} .list-table .list-table-data:hover .data.status.onhold:before {/*background-color: #f1c83e !important;*/ color:#fff; content: "\f017"; font-size: 1.5em; font-family: 'FontAwesome' !important;} .list-table .list-table-data:hover .data.status.dropped:before {/*background-color: #a12f31 !important;*/ color:#fff; content: "\f00d"; font-size: 1.5em; font-family: 'FontAwesome' !important;} /* */ .list-unit .loading-space { background-color:rgba(0, 0, 0, .3); color: #fff !important; display: inline-block; margin: auto; width: 1000px; font-size: 11px; line-height:15px; text-align: middle !important; padding-top: 0px; margin-bottom: 0px; height:250px; background-attachment:scroll; background-image:url(); background-repeat: no-repeat no-repeat; background-position: 0% 100%; } /*override codes*/ .header .header-info > a {color: rgba(255,255,255,1) !important;} .header .header-info {color: rgba(255,255,255,0.8) !important;} .header .header-menu {color: rgba(255,255,255,0.8) !important;} .header .header-menu .btn-menu {color: rgba(255,255,255,0.8) !important;} .username {color: rgba(255,255,255,0.8) !important;} #header-menu-button {color: rgba(255,255,255,0.8) !important;} .header a { font-weight: bold; color: #fff !important; } .icon-watch, .icon-watch-pv {display:none !important;} /*profile image & name */ .cover-block::after { height: 120px !important; width: 120px! important; background-repeat: no-repeat; background-size: contain; position: absolute; display:block !important; margin-left:57px; margin-top:-70px; content: ""; z-index: 2 !important; padding: 5px; background-color:#fff; box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3); border-radius:5px; border: #fff 2px solid; } .cover-block::before { position: absolute; display:block !important; margin-left:200px; bottom:40px; width: 300px; color: #ffffff; font-size: 29px !important; font-family: Rancho; text-align: left; text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important; letter-spacing: 0 !important; } /* */ .header .header-title { position: absolute; top: 0px; left: 40px; background-image: url("http://i.imgur.com/39cRtfK.png"); background-position: left top; background-repeat: no-repeat; background-size: auto 50px; display: block; width: 50px !important; height: 50px; text-indent: -9999px; overflow: hidden } /* customization */ /* The list background */ body[data-query*='"status":1'], body[data-query*='"status":2'], body[data-query*='"status":3'], body[data-query*='"status":4'], body[data-query*='"status":6'], body[data-query*='"status":7'] { background-attachment: fixed !important; background-position: center top; background-repeat: no-repeat !important; background-size:cover; } * {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important;} /* */ span a[href*="&tag=!"], span a[href*="&tag=%40"], span a[href*="&tag=~"] {display: none !important;} /* favorite */ @media entrytags-favorites {} a[href$="&tag=*"] {position: absolute; left: 0; width: 150px; height: 0; font-size: 15px; top: 0px; color: transparent !important; } a[href$="&tag=*"]:after {content: '\f005'; font-family: 'FontAwesome' !important; display: inline-block; pointer-events: all; /* change the position below, and add in margin-whatever if it's not enough */ position: absolute; top: -224px; left: 130px; /* change the size of font */ font-size: 1.1em; color: #fff !important; text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #fff !important; pointer-events:none; } /* Intro animation */ @keyframes intro { from { opacity: 0; margin-top: 100vh; } 16% { opacity: 0; margin-top: 100vh; } to { opacity: 1; margin-top: 100px; } } .list-container { animation: intro 2s; } /* */ footer { position: fixed; bottom: 0px; left: 0px; width: 100%; height:30px !important; z-index: 9998; } #footer-block { display:block; background-color: transparent; background: rgba(0,0,0,0); background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.6))); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%); } #copyright { color: #FFF; letter-spacing: 1px; text-shadow: 0px 3px 3px #000; font-size:10px; } #copyright::after { content: "ShelterStyleV3 - Layout originally designed by Takana no Hana" } .list-unit .list-status-title:after { color: transparent; height: 365px !important; width: 1000px !important; background-repeat: no-repeat; background-size: cover; position: absolute !important; display: block !important; left: 0 !important; right: 0 !important; top: 0px !important; content: ""; z-index: 1 !important; pointer-events: none; } .list-table .list-table-data .data.title .link { font-family: Pacifico !important; font-weight: bold; font-size: 16px; } body{ font-family: Roboto Slab !important; font-size: 11px; font-weight: bold; } } There's alternative imports linked in the opening post which you could use instead of the malscraper one, maybe they won't lag? |
Nov 4, 2019 7:46 AM
#198
Nov 4, 2019 3:30 PM
#199
masterpax1 said: Hey there, I used your first lay-out but for some reason there is a white space underneath one of the GIFs. Also, I don't know if it is the background quality of the picture or if it is something else but it doesn't seem like it is sharp but more faded. You could add this code to the CSS to center and fill in the banner avatar. .list-table .list-table-header:after { background-size: cover !important; background-position: center center; } I don't understand what you mean by the second thing, I don't see any problem? |
Apr 5, 2020 10:06 AM
#200
My anime display covers are blurry for no reason. They were all HD/HQ for the entirety of 2020 (and part of 2019) and I've never edited or changed anything at all and yet, they're somehow blurry even without me have touched them. How does that even happen...? |
Webtoons, anime, & manga fuel my soul |
More topics from this board
Sticky: » 💚 [REPAIR STICKY] Repair/speed up a design + Request a layout fixShishio-kun - Nov 17, 2023 |
17 |
by Shishio-kun
»»
Sep 25, 9:28 AM |
|
Sticky: » [ USERSTYLES & DARK THEMES ] All MyAnimeList themesShishio-kun - Jan 28, 2023 |
19 |
by is_peque
»»
Sep 23, 12:11 AM |
|
» ❓ Ask for help here + See Frequently Asked Questions ( 1 2 3 4 5 ... Last Page )Shishio-kun - Apr 15, 2010 |
7863 |
by ShaggyZE
»»
Sep 22, 9:40 AM |
|
» [CSS - Modern] 🍰 Clarity by V.L ( 1 2 3 4 5 ... Last Page )Valerio_Lyndon - Apr 19, 2018 |
1222 |
by laBelphe
»»
Sep 20, 3:16 PM |
|
» [CLASSIC CSS] ⭐️Space Layout by nblur/U531355 ✨RESTORED AND UPSCALED✨Shishio-kun - Nov 17, 2023 |
7 |
by Recon911
»»
Sep 20, 4:43 AM |