Guest User

Untitled

a guest
Dec 12th, 2019
345
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 10.72 KB | None | 0 0
  1. /* List design by 5cm */
  2.  
  3. @\import "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700";
  4. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelink";
  5.  
  6. body {
  7. background: url(https://image.myanimelist.net/ui/fkLITaJTefafxFKPGRznglNnufcAvn5pOQqmKwnxF4MEGjNRtCIn1TT-_7JXz8nZ),
  8. url(https://image.myanimelist.net/ui/uf6p6rEk2dlZoh8DIyYQTScPXcYWVkorZzR5QFff8DyDzTdbJYJwzH3R2lWVJkHOdP4y55c06A4fZbPXJpqYDvLuhyaebcSPnK6QLHBED7-o-ClTkn_bsnshpfBLGgPZjMiKMrXcb1iI6PR717oIPNFRI5v-1r-20IDrpHAdy8KmO4zdFnmomZ_ySnrHu1cr4VmTEJbm7Xv2ihRc4y3k9ljwhkaai7BkFFcWo-qGkHg) !important;
  9. font: 300 11px Open Sans; color: black !important;}
  10.  
  11. *:not(a:hover):not(input) {
  12. cursor: default;}
  13.  
  14. a:link, a:active, a:visited {color: black;}
  15.  
  16. .header .header-title, .header .header-menu .btn-menu,
  17. #header-menu-dropdown svg, [data-work="anime"] .icon-menu.anime-list, [data-work="manga"] .icon-menu.manga-list,
  18. [data-owner=""] .list-menu-float, .list-menu-float .icon-menu.setting, form[action],
  19. .list-menu-float .icon-menu .text,
  20. .list-unit .list-status-title .text, #show-stats-button,
  21. .list-table .list-table-header .header-title.status,
  22. .list-table .list-table-header .header-title.number, .list-table .list-table-header .header-title.image,
  23. .list-table .list-table-header .header-title.progress ~ th,
  24. .list-table .list-table-data .data.status, .list-table .list-table-data .data.number,
  25. .list-table .list-table-data .data.status.plantowatch ~ .data.score,
  26. .list-table .list-table-data .data.progress ~ td,
  27. .cover-block, i.fa:not([class*=sort]):not([class$=circle]), img, .icon-watch.ml4, .more,
  28. [data-owner=""] .add-edit-more {display: none;}
  29.  
  30. .header {
  31. background: #fbf3de no-repeat center 60% url(https://image.myanimelist.net/ui/fkLITaJTefafxFKPGRzngiJt9TfQwEcrDzdmp7jwHEbrQs1UV_K2gpEevyEZdHV1);
  32. width: 100%; height: 480px;}
  33.  
  34. .header .header-menu.other {
  35. position: static; color: #999; text-align: left; text-transform: uppercase;}
  36.  
  37. .header .header-menu.other .btn-menu {
  38. font: 700 25px Open Sans; color: #999;
  39. display: inline-block; overflow: hidden; text-indent: -116px;
  40. position: relative; top: 13px; left: 18px;}
  41.  
  42. .header .header-menu .header-info {
  43. position: absolute; top: 17px; right: 257px; font-size: 0;}
  44.  
  45. .header .username {
  46. font-weight: 700;}
  47.  
  48. .header a, #header-menu-dropdown a {
  49. width: auto; height: auto;
  50. font-weight: 400; color: #999 !important; transition: none;}
  51.  
  52. .header .header-menu .header-info a, #header-menu-dropdown a {
  53. font-size: 11px; margin: 0 15px;}
  54.  
  55. .header .header-menu .header-info a:hover, #header-menu-dropdown a:hover {
  56. background: none; color: #ef8577 !important; text-decoration: none;}
  57.  
  58. #header-menu-dropdown {
  59. display: block!important; top: 23px; right: 182px;
  60. background: none; border: 0; box-shadow: none;}
  61.  
  62. body[data-owner="1"]:before {
  63. content: ''; background: top left/contain url(https://image.myanimelist.net/ui/rQNXG68HsXXb8OommKJ2LPMHpYNdlAd8VpkDuVKS_mvC8NpFPkT0xkTDsGLzhcVl);
  64. width: 130px; height: 250px; position: absolute; top: 10px; left: 10px; z-index: 1;}
  65.  
  66. .list-menu-float {
  67. position: absolute; top: 23px; right: 185px;
  68. width: auto; border: 0;}
  69.  
  70. .list-menu-float .icon-menu {
  71. display: inline-block; width: 16px; height: 16px;
  72. background: none !important; margin: 0 5px;}
  73.  
  74. .list-menu-float .icon-menu svg.icon {
  75. position: static; width: 16px; height: 16px; fill: #aaa;}
  76.  
  77. .list-menu-float .icon-menu:hover svg.icon, .header .header-menu .list-menu .icon-menu .text {
  78. position: static; fill: #ef8577;}
  79.  
  80. .list-menu-float .icon-menu:not(.profile):hover {
  81. width: auto; background: none;}
  82.  
  83. .list-menu-float .icon-menu.profile {
  84. background: none !important;}
  85.  
  86. .list-menu-float .icon-menu.profile:before {
  87. content: '\f007'; font: 16px FontAwesome; color: #aaa; line-height: 15px;
  88. position: absolute; right: 2px;}
  89.  
  90. .list-menu-float .icon-menu.profile:hover:before {
  91. color: #ef8577;}
  92.  
  93. .list-container {
  94. background: none !important; width: 100%; border: 0;}
  95.  
  96. #status-menu, .status-menu-container.fixed {
  97. width: 100%; height: auto;
  98. background: #ef8577; border: 0; position: static;}
  99.  
  100. #status-menu .status-menu {
  101. width: 100%; border-spacing: 0; text-align: center;}
  102.  
  103. #status-menu .status-menu:before {
  104. content: ''; display: inline-block; width: 90px; height: 90px; border-radius: 50%;
  105. background: center/cover url(https://image.myanimelist.net/ui/FvTouLv2tbXNvntQBGK5zTYRmfY3RS6UaMqsugOFuUKKorUtFjU_h3Db42eL4tb7lwytJVRRhXuI26bxkL9CR790Xdoit1NJV0r-JcCCx7TtYQY5D3cwyVYJSeaVbVPT);
  106. position: absolute; margin-top: -20px;}
  107.  
  108. #status-menu .status-button {
  109. background: #ef8577; display: inline-block; font: 300 13px Open Sans;
  110. color: white; letter-spacing: 1px; text-transform: uppercase; padding: 15px 20px;}
  111.  
  112. #status-menu .status-button:first-child {
  113. margin-left: 100px;}
  114.  
  115. #header-menu-button, #status-menu .status-button.on {
  116. cursor: default; font-weight: 700; text-decoration: none;}
  117.  
  118. #status-menu .status-button:not(.on):hover {
  119. background: #f6a8a0;}
  120.  
  121. #status-menu .status-button::after {
  122. background: none;}
  123.  
  124. #status-menu .status-button.on::after {
  125. background: none; left: calc(50% - 20px); bottom: -19px;
  126. width: 0; height: 0;
  127. border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 20px solid #ef8577;}
  128.  
  129. #status-menu .search-container {
  130. top: -475px; right: 20px;}
  131.  
  132. #status-menu #search-box {
  133. width: 150px; height: auto;}
  134.  
  135. #search-box input {
  136. background: white 3px 50%/20px no-repeat url(https://image.myanimelist.net/ui/ueQLRyZL_yQZxD14iYLZC_gLr-mtem_jVqxnLpUY6LHlp_sr_ZwRrhNpbh7nV5sCeo7Sp3-sdxOAu1kTqLeHfW7i3YHTvUNvkDS5qKJPeIQyZ4XG2BGDzLdXX1QvKlrJ);
  137. font: 300 11px Open Sans; color: #999;
  138. padding: 4px 12px 6px 25px; border: 1px solid #ddd; border-radius: 10px;}
  139.  
  140. .list-block, .status-menu-container.fixed + div.list-block {
  141. margin-top: 30px; min-height: 0;}
  142.  
  143. .list-unit {
  144. width: 80%;}
  145.  
  146. .list-unit .list-status-title {
  147. display: inline-block; width: calc(100% - 30px); height: 0;
  148. background: none; text-align: right; margin: auto;}
  149.  
  150. .list-unit .list-status-title .stats {
  151. height: 0; line-height: 100%; top: 26px;}
  152.  
  153. .list-unit .list-stats {
  154. position: absolute; display: block; bottom: 0px; width: 80%; height: auto; background: none;
  155. font: normal 11px Open Sans; color: #777; text-transform: uppercase;}
  156.  
  157. #advanced-options-button, .list-table .list-table-header .header-title .link.sort {
  158. font-weight: normal; color: #999; text-transform: uppercase; padding: 4px 6px; z-index: 1;}
  159.  
  160. .list-table > tbody:nth-of-type(2n+1):first-of-type {
  161. display: block; Width: 100%; height: auto; margin: 20px;
  162. background: none; text-transform: uppercase; z-index: 3;}
  163.  
  164. .list-table-header {
  165. display: inline-block; width: 100%;}
  166.  
  167. .list-table-header:before {
  168. content: 'Sort by:'; position: relative; top: 2px; margin-right: 12px;}
  169.  
  170. .list-table .list-table-header .header-title {
  171. display: inline-block; width: auto !important; height: auto;
  172. background: none; border: 0; padding: 0 !important; margin: 0 15px;}
  173.  
  174. .list-table .list-table-header .header-title .link.sort:hover, #advanced-options-button:hover {
  175. background: #fbf3de; color: #999;}
  176.  
  177. .list-table .list-table-header .header-title .sort-icon {
  178. color: rgba(239,133,119,.65); font-size: 18px; position: relative; line-height: 0;}
  179.  
  180. .fa-sort-asc {top: 6px;}
  181.  
  182. .fa-sort-desc {top: -2px;}
  183.  
  184. .fa-plus-circle::before {content: '+' !important; margin-left: 1px;}
  185.  
  186. .list-table {border: 0; text-align: center;}
  187.  
  188. .list-item, .list-table > tbody:nth-of-type(2n+1):not(:first-child) {
  189. width: 200px; height: 290px; display: inline-block; background: none; margin: 15px;}
  190.  
  191. .list-table .list-table-data .data {
  192. position: absolute; width: 200px; height: 280px; border: 0; padding: 0;}
  193.  
  194. .list-table .list-table-data:hover .data.title {
  195. background: rgba(255,255,255,0.8); outline: 3px solid white;}
  196.  
  197. .list-table .list-table-data:hover .data.title .link,
  198. .list-table .list-table-data:hover .data.progress,
  199. .list-table .list-table-data:hover .data.type,
  200. .list-table .list-table-data:hover .data .edit a:after,
  201. .list-table .list-table-data:hover .data.title span {
  202. opacity: 1;}
  203.  
  204. .list-table .list-table-data .data.title {
  205. letter-spacing: 0; padding: 0;}
  206.  
  207. .list-table .list-table-data .data.title .link {
  208. position: absolute; left: 20px; bottom: 45px; width: 160px; z-index: 2; opacity: 0;
  209. font-size: 20px; color: #333 !important; line-height: 22px; text-transform: upper;}
  210.  
  211. .list-table .list-table-data .data.score {
  212. text-align: right;}
  213.  
  214. .list-table .list-table-data .data.score .link {
  215. font-weight: 700; text-align: right!important;
  216. margin-right: 10px; padding: 4px 6px; word-spacing: -3px;}
  217.  
  218. .list-table .list-table-data .data.score .link:after {
  219. content: ".0"}
  220.  
  221. .list-table .list-table-data .data.status.watching ~ .data.score .link {background: #cfe88d;}
  222. .list-table .list-table-data .data.status.completed ~ .data.score .link {background: #ffff92;}
  223. .list-table .list-table-data .data.status.onhold ~ .data.score .link {background: #afb8e2;}
  224. .list-table .list-table-data .data.status.dropped ~ .data.score .link {background: #fc7671;}
  225.  
  226. .list-table .list-table-data .data.progress {
  227. width: auto; height: auto; margin-top: 250px; margin-left: 20px;
  228. font: italic 11px Open Sans; text-transform: lowercase; word-spacing: -3px; opacity: 0;}
  229.  
  230. .list-table .list-table-data .data.type {
  231. width: 35px; height: auto; margin-left: 145px; opacity: 0;
  232. margin-top: 250px; font-size: 11px; text-align: right;}
  233.  
  234. .progress div:after {
  235. content: 'episodes'; margin-left: 3px;}
  236.  
  237. .list-table .list-table-data .data.title .rewatching,
  238. .list-table .list-table-data .data.title .rereading,
  239. .list-table .list-table-data .data.title .content-status {
  240. position: absolute; top: 20px; left: 20px; font: 600 9px Open Sans;
  241. color: #444; border: 1px solid #555; padding: 2px 4px; opacity: 0; text-transform: uppercase;}
  242.  
  243. [data-owner="1"] .list-table .list-table-data .data.title span:not([style]) {
  244. left: 30px;}
  245.  
  246. .list-table .list-table-data .data.title .add-edit-more {
  247. font-size: 0; float: none; z-index: 5; position: relative; top: 19px; left: 15px}
  248.  
  249. .edit a:after {
  250. content: '\f142'; font: 18px FontAwesome;
  251. color: #888; opacity: 0;}
  252.  
  253. .list-table .list-table-data .data.image a {
  254. width: 200px; height: 280px; background-size: contain; background-position: center; background-repeat: no-repeat;}
  255.  
  256. .list-table .list-table-data .data a, .list-table .list-table-data a.edit-disabled {
  257. color: black !important;}
  258.  
  259. .list-table .list-table-data .data a:not(.edit-disabled):hover {
  260. color: #888 !important;}
  261.  
  262. #footer-block {
  263. background: #fbf3de; margin-top: 20px;}
  264.  
  265. #copyright {
  266. font: 400 8px Open Sans; letter-spacing: 1px; color: #777; text-transform: uppercase;}
Advertisement
Add Comment
Please, Sign In to add comment