Advertisement
RPGX_Omega

MAL List Style Design - Advanced CSS File

Feb 26th, 2020
457
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 7.04 KB | None | 0 0
  1. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/more";
  2. /*
  3. // Self-explanatory
  4. */
  5. BODY
  6. {
  7.  
  8. background-image: url(http://myanimelist.net/images/userwalls/1508191.jpg);
  9. background-attachment:fixed;
  10. background-position:center;
  11. background-repeat: repeat-n;
  12. background-size: 100%;
  13. background-color: #3b3b3b;
  14. opacity:0.8;
  15. filter:alpha(opacity=80); /* For IE8 and earlier */
  16. color: #000000;
  17. font-size: 15px;
  18. font-family: Verdana, Arial;
  19. }
  20.  
  21. /*
  22. // Determines the positioning of your list
  23. */
  24.  
  25. #list_surround
  26. {
  27. margin: 0 2.5%;
  28. width: 95%;
  29. }
  30.  
  31. /*
  32. // All links on your list
  33. */
  34.  
  35. a
  36. {
  37. color: #ff0000;
  38. text-decoration: none;
  39. }
  40.  
  41. a:visited
  42. {
  43. color: #ff0000;
  44. text-decoration: none;
  45. }
  46.  
  47. a:hover
  48. {
  49. color: #0000ee;
  50. text-decoration: underline;
  51. }
  52.  
  53. /*
  54. // Alternating row color 1
  55. */
  56. .td1
  57. {
  58. color: #FFFFFF;
  59. border-width: 0px 1px 1px 0px;
  60. border-style: solid;
  61. border-color: #000000;
  62. padding: 2px;
  63. background-color: #2b2b2b;
  64. opacity:0.85;
  65. filter:alpha(opacity=85); /* For IE8 and earlier */
  66. }
  67.  
  68. /*
  69. // Alternating row color 2
  70. */
  71.  
  72. .td2
  73. {
  74.  
  75. color: #FFFFFF;
  76. border-width: 0px 1px 1px 0px;
  77. border-style: solid;
  78. border-color: #000000;
  79. padding: 2px;
  80. background-color: #2b2b2b;
  81. opacity:0.85;
  82. filter:alpha(opacity=85); /* For IE8 and earlier */
  83. }
  84.  
  85. .td1 a
  86. {
  87. font-weight:bold;
  88. background-color: #000000;
  89. color: #f393a0;
  90. }
  91.  
  92. .td2 a
  93. {
  94. font-weight:bold;
  95. background-color: #000000;
  96. color: #f393a0;
  97. }
  98.  
  99. .td1 a:hover
  100. {
  101. color: #00BFFF;
  102. text-decoration: underline;
  103. }
  104.  
  105. .td2 a:hover
  106. {
  107. color: #00BFFF;
  108. text-decoration: underline;
  109. }
  110.  
  111. /*
  112. // This represents the "Anime Title", "Score", "# Eps" columns
  113. */
  114.  
  115. .table_header
  116. {
  117. background-color: #000000;
  118. color: #000000;
  119. border-width: 1px 1px 1px 0px;
  120. border-style: solid;
  121. border-color: #000000;
  122. padding: 2px;
  123. opacity:0.9;
  124. filter:alpha(opacity=90); /* For IE8 and earlier */
  125. }
  126.  
  127. /*
  128. // headerLink represents the color of the links inside the_header
  129. */
  130.  
  131. .table_headerLink
  132. {
  133. color: ;
  134. }
  135.  
  136. .table_headerLink:Visited
  137. {
  138. color: ;
  139. }
  140.  
  141. .table_headerLink:Hover
  142. {
  143. color: ;
  144. }
  145.  
  146. /*
  147. // Controls the select form decoration (the drop down select box)
  148. */
  149.  
  150. .form
  151. {
  152. border-width: 1px 1px 1px 1px;
  153. border-color: #FFFFFF;
  154. border-style: solid;
  155. color: #000000;
  156. padding: 2px;
  157. font-size: 11.00px;
  158. font-family: Verdana, Arial;
  159. }
  160.  
  161.  
  162. /* Which 'status' up top is selected? */
  163.  
  164. .status_selected
  165. {
  166.  
  167. color: #FFFFFF;
  168. border-width: 0px 1px 1px 0px;
  169. border-style: solid;
  170. border-color: #000000;
  171. padding: 2px;
  172. background-color: #3b3b3b;
  173. }
  174.  
  175. .status_not_selected
  176. {
  177.  
  178. color: #FFFFFF;
  179. border-width: 0px 1px 1px 0px;
  180. border-style: solid;
  181. border-color: #000000;
  182. padding: 2px;
  183. background-color: #1c1c1c;
  184. }
  185.  
  186. /*
  187. Header classes for Currently Watching, Completed, Dropped, etc...
  188. */
  189.  
  190. .header_cw
  191. {
  192. text-align: center;
  193. color: #00FF00;
  194. }
  195.  
  196. .header_completed
  197. {
  198. text-align: center;
  199. color: #880000;
  200. }
  201.  
  202. .header_onhold
  203. {
  204. text-align: center;
  205. color: #dddddd;
  206. }
  207.  
  208. .header_dropped
  209. {
  210. text-align: center;
  211. color: #251a1a;
  212. }
  213.  
  214. .header_ptw
  215. {
  216. text-align: center;
  217. color: #0066FF;
  218. }
  219.  
  220. .header_title {
  221. font-size: 14px;
  222. font-weight: bold;
  223. }
  224.  
  225.  
  226. .category_totals
  227. {
  228. background-color: #3b3b3b;
  229. opacity:0.8;
  230. filter:alpha(opacity=80); /* For IE8 and earlier */
  231. color: #FFD700;
  232. }
  233.  
  234. #grand_totals
  235. {
  236. text-align: center;
  237. background-color: #3b3b3b;
  238. opacity:0.8;
  239. filter:alpha(opacity=80); /* For IE8 and earlier */
  240. color: #FFD700;
  241. }
  242.  
  243. /* header_al is thesurrounding "User's Anime List" at the top */
  244.  
  245. .header_al
  246. {
  247. font-weight: bold;
  248. font-size: 16px;
  249. }
  250.  
  251. /* header_al_links is thewith your "Profile" and "MyAnimeList home" links */
  252. .header_al_links
  253. {
  254.  
  255. }
  256.  
  257. /* controls what styles you can give to all the anime titles in your list */
  258. .animetitle
  259. {
  260. font-weight: bold;
  261. }
  262.  
  263. span
  264. {
  265. margin: 1%;
  266. padding: -5% 1%;
  267. }
  268.  
  269. small
  270. {
  271. margin: auto;
  272. padding: auto;
  273. }
  274.  
  275. /*
  276. copyright contains the "Producted by Garrett Gyssler" text
  277. DO NOT REMOVE OR HIDE THIS DIV
  278. IF FOUND TO BE REMOVED, YOUR LIST WILL BE REMOVED TOO
  279. */
  280.  
  281. #copyright
  282. {
  283. padding-top: 6px;
  284. text-align: center;
  285. margin: 0 auto;
  286. width: 920px;
  287. }
  288.  
  289. /* THUMBNAIL SETTINGS
  290. Settings for the thumbnails of covers seen on your list. Height and width control the size, while margin-left and top can be added or taken away to change the position. Change the border size, type, or color, with the first border code.*/
  291. .hide {
  292. height:155px;
  293. width:5%;
  294. margin-left:2.6%;
  295. margin-top:-160px;
  296. padding-right:50px;
  297. border:1px solid #FFFFFF;
  298. background-color:rgba(248, 162, 200, 0.7);
  299. background-position:50% 50%;
  300. background-repeat:no-repeat no-repeat;
  301. background-size:cover;
  302. display:inline-block !important;
  303. position: absolute;
  304. }
  305.  
  306. /*THUMBNAIL HOVER SETTING
  307. This is the setting for the cover when you point to a thumbnail. Move the cover's position with the margin codes. Change its size with the padding codes. */
  308. .hide:hover {
  309. margin-left:4.6%;
  310. margin-top:-160px;
  311. padding-right:150px;
  312. padding-top:220px !important;
  313. background-color:transparent;
  314. background-repeat:no-repeat no-repeat;
  315. background-size:cover;
  316. border-bottom-left-radius:20px;
  317. border-bottom-right-radius:20px;
  318. border-top-left-radius:20px;
  319. border-top-right-radius:20px;
  320. box-shadow:rgba(63, 52, 60, 0.55) 0 0 8px 8px;
  321. position:absolute;
  322. z-index:1;
  323. }
  324.  
  325.  
  326. /*THUMBNAIL HOVER FLICKER FIX
  327. If you reposition your covers, and notice flickering, color this red, then reload your layout. Notice where the red bar appears when you point to your covers. Move that box with this code, over the parts where you point and see flickering. Then change it back to transparent!
  328. */
  329. .hide:hover:after {
  330. background: transparent;
  331. content: " ";
  332. height: 75px;
  333. left: 0;
  334. position: absolute;
  335. top: 0;
  336. width: 210px;
  337. z-index: 20;
  338. }
  339.  
  340.  
  341. /*ANIMATION FOR ZOOM
  342. Change the timing of how long it takes for it zoom out here! Its set to .25 seconds by default.
  343. */
  344. * {
  345. -webkit-transition:all 0.25s ease-in-out;
  346. transition:all 0.25s ease-in-out;
  347. }
  348.  
  349.  
  350. /*ROW WIDTH AND SPACING
  351. This will increase the height of your rows and move the anime title to the left. It might look funny on some layouts so you'll have to adjust it or ask for help! Height is the height, padding left is the space the anime title moves from the left.
  352. */
  353. .td1:nth-of-type(2), .td2:nth-of-type(2) {
  354. height: 160px;
  355. padding: 0%;
  356. padding-left: 10%;
  357. padding-right: 10%;
  358. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement