API tools faq
paste
Advertisement
ValerioLyndon

Patch for Vanilla by Ryukan 19-04-09

ValerioLyndon
Apr 9th, 2019
258
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.45 KB | None | 0 0
raw download clone embed print report
  1. body.ownlist {background: url(https://image.myanimelist.net/ui/3Fd0ksKOuBQc_vtDSgWyipSzV9ILq0BrxAnfgcf-fRQcFRq4t42W26Zo933UHDoyopbOfVKOVE0q2rx6d2VZCDvaadQYgoBOcJ0tTGFXFzo) fixed #eaeaea !important;}
  2. /* main header */
  3. .header .header-title {opacity: 0 !important;}
  4.  
  5. body {
  6. font-family: Segoe UI !important;
  7. text-transform: none !important;}
  8.  
  9. a, a:visited {color: #404040; text-decoration: none;}
  10.  
  11. /* all hover effects */
  12. .list-table .list-table-data .data.title .link:hover, .list-table .list-table-data a:not(.edit-disabled):hover {color: #6bbfe3 !important;text-decoration: none !important;}
  13. .list-table .list-table-header .header-title .link.sort:hover {color: #fff !important;}
  14. .list-table .list-table-data .data.image .image:hover {opacity: 0.8 !important; transition: 0.5s;}
  15.  
  16. /* menu */
  17. .list-menu-float .icon-menu.profile {background-size: cover;background-position: center;}
  18. .list-menu-float {position: fixed;display: block;top: 20%;width: 50px;border: #EBEBEB 1px solid;z-index: 2}
  19. .list-menu-float .icon-menu {
  20. position: relative;
  21. background-color: #f6f6f6;
  22. display: block;
  23. width: 50px;
  24. height: 50px;
  25. opacity: 1;
  26. -moz-transition-property: all;
  27. -o-transition-property: all;
  28. -webkit-transition-property: all;
  29. transition-property: all;
  30. -moz-transition-duration: 0.3s;
  31. -o-transition-duration: 0.3s;
  32. -webkit-transition-duration: 0.3s;
  33. transition-duration: 0.3s;
  34. -moz-transition-timing-function: ease-in-out;
  35. -o-transition-timing-function: ease-in-out;
  36. -webkit-transition-timing-function: ease-in-out;
  37. transition-timing-function: ease-in-out;
  38. }
  39. /* SVG */
  40. .list-menu-float .icon-menu svg.icon {position: absolute;fill: #323232;}
  41. .list-menu-float .icon-menu:hover svg.icon {position: absolute;fill: #ffffff;}
  42.  
  43. .list-menu-float .icon-menu.quick-add svg.icon-quick-add {left: 13px;top: 12px;}
  44. .list-menu-float .icon-menu.anime-list svg.icon-anime-list {left: 13px;top: 12px;}
  45. .list-menu-float .icon-menu.manga-list svg.icon-manga-list {left: 13px;top: 12px;}
  46. .list-menu-float .icon-menu.history svg.icon-history {left: 13px;top: 12px;}
  47. .list-menu-float .icon-menu.export svg.icon-export {left: 13px;top: 12px;}
  48. .list-menu-float .icon-menu.login svg.icon-login {left: 13px;top: 12px;}
  49. .list-menu-float .icon-menu.logout svg.icon-logout {left: 13px;top: 14px;}
  50. .list-menu-float .icon-menu.setting svg.icon-setting {left: 13px;top: 13px;}
  51.  
  52. .list-menu-float .icon-menu .text {
  53. position: absolute;
  54. top: 14px;
  55. left: 50px;
  56. width: 0;
  57. display: inline-block;
  58. color: #ffffff;
  59. font-size: 1.4em;
  60. font-family: segoe ui !important;
  61. text-align: center;
  62. vertical-align: middle;
  63. overflow: hidden;
  64. white-space: nowrap;
  65. opacity: 0;
  66. -moz-transition-property: all;
  67. -o-transition-property: all;
  68. -webkit-transition-property: all;
  69. transition-property: all;
  70. -moz-transition-duration: 0.3s;
  71. -o-transition-duration: 0.3s;
  72. -webkit-transition-duration: 0.3s;
  73. transition-duration: 0.3s;
  74. -moz-transition-timing-function: ease-in-out;
  75. -o-transition-timing-function: ease-in-out;
  76. -webkit-transition-timing-function: ease-in-out;
  77. transition-timing-function: ease-in-out
  78. }
  79.  
  80. .list-menu-float .icon-menu:not(.profile):hover {background-color: #e8608c !important;width: 145px;}
  81. .list-menu-float .icon-menu:hover .text {width: 94px;opacity: 1;}
  82.  
  83. /* setting */
  84. .list-menu-float .icon-menu.setting .text {
  85. top: 0px;
  86. width: 0px;
  87. height: 100px;
  88. opacity: 0;
  89. -moz-transition-property: all;
  90. -o-transition-property: all;
  91. -webkit-transition-property: all;
  92. transition-property: all;
  93. -moz-transition-duration: 0.3s;
  94. -o-transition-duration: 0.3s;
  95. -webkit-transition-duration: 0.3s;
  96. transition-duration: 0.3s;
  97. -moz-transition-timing-function: ease-in-out;
  98. -o-transition-timing-function: ease-in-out;
  99. -webkit-transition-timing-function: ease-in-out;
  100. transition-timing-function: ease-in-out
  101. }
  102. .list-menu-float .icon-menu.setting:hover .text {top: 0px;width: 114px;height: 100px;opacity: 1;}
  103. .list-menu-float .icon-menu.setting .text .link-list-setting,.list-menu-float .icon-menu.setting .text .link-style-setting {display: block;opacity: 0;}
  104. .list-menu-float .icon-menu.setting:hover .text .link-list-setting,.list-menu-float .icon-menu.setting:hover .text .link-style-setting {position: absolute;background-color: #e8608c !important;display: block;width: 110px;height: 50px;line-height: 50px;text-decoration: none;color: #ffffff;opacity: 1;}
  105. .list-menu-float .icon-menu.setting:hover .text .link-list-setting {top: 0px;}
  106. .list-menu-float .icon-menu.setting:hover .text .link-style-setting {border-top: #EBEBEB 1px solid;top: 50px;}
  107.  
  108. /* status fixed, headers on top */
  109. .status-menu-container {width: 1058px;height: 46px;background-color: #FFF;border-bottom: 2px solid #e0dee0 !important; border-radius: 4px;z-index: 1;}
  110. .status-menu-container.fixed {position: fixed; display: block;top: 0;}
  111. .status-menu-container.fixed + div.list-block { margin-top: 62px;}
  112. .status-menu-container .status-menu {
  113. display: table;
  114. margin: 0 auto;
  115. border-collapse: separate;
  116. border-spacing: 40px 0;}
  117. .status-menu-container .status-menu .status-button {
  118. position: relative;display: table-cell;
  119. padding: 13px 0;
  120. font-family: segoe UI !important; font-style: normal; letter-spacing: 1px;
  121. text-align: center; vertical-align: middle; font-size: 15px !important; color: #404040;}
  122. .status-menu-container .status-menu .status-button.on {color: #606060; font-weight: bold;}
  123. .status-menu-container .status-menu .status-button:after {position: absolute;bottom: 0px;left: 0px;background-color: #fff;display: block;width: 100%;height: 4px;content: '';opacity: 0;}
  124. .status-menu-container .status-menu .status-button.on:after, .status-menu .status-button:hover:after {opacity: 1}
  125. .status-menu-container .status-button.watching.on, .status-menu-container .status-button.watching{font-size: 0px !important;top: 11px !important; left: 3px !important;width: 16.667% !important;}
  126. .status-menu-container .status-button.watching.on:before, .status-menu-container .status-button.watching:before {content:"Watching";font-size: 15px;position:absolute;top: 2px !important;left: 0;}
  127. .status-menu-container .status-button.watching.on, .status-menu-container .status-button.reading{font-size: 0px !important;top: 11px !important; left: 3px !important;width: 16.667% !important;}
  128. .status-menu-container .status-button.reading.on:before, .status-menu-container .status-button.reading:before {content:"Reading";font-size: 15px;position:absolute;top: 2px !important;left: 0;}
  129. .status-menu-container .status-menu .status-button.on:after, .status-menu .status-button:hover:after {opacity: 0}
  130. .status-menu-container .status-button.plantowatch {font-size: 0 !important;}
  131. .status-menu-container .status-button.plantowatch:before {content:"Planned"; width: 75px !important; font-size: 15px !important;}
  132. .status-menu-container .status-button.plantoread {font-size: 0 !important;}
  133. .status-menu-container .status-button.plantoread:before {content:"Planned"; width: 75px !important; font-size: 15px !important;}
  134. a.status-button.all_anime {width: 16.667% !important;}
  135. a.status-button.completed {width: 16.667% !important;}
  136. a.status-button.onhold {width: 16.667% !important;}
  137. a.status-button.dropped {width: 16.667% !important;}
  138. a.status-button.plantowatch {width: 16.667% !important;}
  139. a.status-button.plantoread {width: 16.667% !important;}
  140. a.status-button.watching.on {color: #6bc8ae !important;}
  141. a.status-button.reading.on {color: #6bc8ae !important;}
  142. a.status-button.completed.on {color: #6bbfe3 !important;}
  143. a.status-button.onhold.on {color: #ffbc68 !important;}
  144. a.status-button.dropped.on {color: #e8608c !important;}
  145. a.status-button.plantowatch.on {color: #8c80ca !important;}
  146. a.status-button.plantoread.on {color: #8c80ca !important;}
  147.  
  148. /* anime cover */
  149. .list-table .list-table-data .data.image .image {width: 58px !important;height: 80px !important;border: #fff 3px solid;background-size: cover !important;background-position: center !important;box-shadow: 0 0 1px rgba(65,65,65,0.5) !important;border-radius: 3px;}
  150.  
  151. /* colors for watching, completed, etc */
  152. .list-table .list-table-data .data.status.reading, .list-table .list-table-data .data.status.watching {background-color: #6bc8ae;}
  153. .list-table .list-table-data .data.status.plantoread, .list-table .list-table-data .data.status.plantowatch {background-color: #8c80ca;}
  154. .list-table .list-table-data .data.status.completed {background-color: #6bbfe3;}
  155. .list-table .list-table-data .data.status.onhold {background-color: #ffbc68;}
  156. .list-table .list-table-data .data.status.dropped {background-color: #e8608c;}
  157.  
  158. /* add, edit buttons */
  159. .list-table .list-table-data .data.title .add-edit-more {font-size: 10px !important; color: #818181 !important;}
  160.  
  161. /* list surround */
  162. .list-table .list-table-data .data {display: table-cell;padding: 6px 0;vertical-align: middle !important;border-top: 1px solid #e4e4e4 !important;}
  163. .list-container {position: relative;background-color: #ffffff;border: #fff 1px solid;width: 1058px;margin-bottom: 0;margin-right: auto;margin-left: auto;text-align: left;border-radius: 18px !important;}
  164. .list-table > tbody:nth-of-type(2n+1), .list-table > tbody:nth-of-type(2n+2) {border-top: 1px solid #e4e4e4 !important;border-bottom: 1px solid #e4e4e4 !important; background-color: #FFFFFF !important}
  165. .list-table .list-table-header .header-title .sort-icon {color: #fff;}
  166.  
  167. /* header number */
  168. .list-table .list-table-data .data.number {
  169.     display: block;
  170.     width: 30px;
  171.     height: 30px;
  172.     background: #6bbfe3;
  173.     padding: 0;
  174.     margin: 34px 7px 0 7px;
  175.     border: none !important;
  176.     border-radius: 100%;
  177.    
  178.     color: #fff;
  179.     font-size: 13px;
  180.     line-height: 30px;
  181.     font-weight: bold !important;
  182.     text-align: center;
  183. }
  184.  
  185. .list-table .list-table-header .header-title.status {border-radius: 8px 0 0 0;}
  186.  
  187. /* score link */
  188. .list-table .list-table-data .data.score .link {font-weight: bold;font-style: normal; color: #585858; width: 15px !important;letter-spacing: 1px;transition: 0.2s;}
  189.  
  190. /* anime title */
  191. .list-table .list-table-data .data.title {
  192.     min-width: 200px;
  193.     padding-top: 18px;
  194.     padding-bottom: 18px;
  195. }
  196.  
  197. /* anime title links */
  198. .list-table .list-table-data .data.title .link {
  199.     display: inline-block;
  200.     max-width: calc(100% - 28px);
  201.     max-height: 4.5em;
  202.     margin-left: 4px;
  203.     margin-top: 2px;
  204.     overflow: hidden;
  205.    
  206.     color: #606060 !important;
  207.     font-size: 13px;
  208.     font-style: italic;
  209.     font-weight: bold;
  210.    
  211.     transition: 0.2s;
  212. }
  213.  
  214. /* pv icon */
  215. a.icon-watch {
  216.     float: left;
  217.     margin: -14px -18px 0 0;
  218. }
  219.  
  220. /* airing status */
  221. .list-table .list-table-data .data.title .rewatching,
  222. .list-table .list-table-data .data.title .rereading {
  223.     display: none;
  224. }
  225.  
  226. .list-table .list-table-data .data.title .content-status {
  227.     width: 6px;
  228.     height: 18px;
  229.     background: url(https://image.myanimelist.net/ui/6V7QKUJVIHV_MZVcmB7FIjYItb6ShSfD9MUh9iy1unkx3qr0iZAp0oEwU6Z_gibe) 0px 8.5px / auto no-repeat;
  230.     margin-left: -5px;
  231.     margin-right: -1px;
  232.     float: left;
  233.    
  234.     text-indent: -9999px;
  235. }
  236.  
  237. /* table border fix */
  238. .list-table {border: none !important; }
  239.  
  240. /* header title */
  241. .list-table .list-table-header .header-title {background: #6bbfe3 !important;font-size: 15px !important;height: 40px !important;border: none !important; color: #fff !important;border-bottom: 2px solid #e0dee0 !important;font-weight: normal !important;}
  242. .list-table .list-table-header .header-title:last-child {border-bottom: 2px solid #e0dee0 !important; background-image: none !important; border-radius: 0 8px 0 0;}
  243. .list-table .list-table-header .header-title.number, .list-table .list-table-header .header-title .link {font-size: 15px !important; font-family: segoe ui !important; color: #fff !important; font-weight: normal !important;}
  244. .list-table .list-table-header .header-title.title {text-align: center !important;}
  245. .list-table .list-table-header .header-title.title a {text-align: center !important;}
  246. .list-table .list-table-header .header-title.image a {color: #6bbfe3 !important;}
  247.  
  248. /* currently watching, completed, etc headers */
  249. .list-unit .list-status-title {background: #f0f8fc; margin-bottom: 12px;transition: all 0.3s ease 0s;border-radius: 3px;}
  250. .list-unit .list-status-title:hover {box-shadow: 0 0 5px rgba(107, 191, 227, 0.75); transition: all 0.3s ease 0s;}
  251. .list-unit .list-status-title .text { color: #404140;cursor: default;font: 300 18px "Roboto",sans-serif;text-transform: uppercase;}
  252. .list-unit .list-status-title .stats a {font-size: 0 !important;}
  253. .list-unit .list-status-title a#show-stats-button:before {content:"\f080"; font-size: 12px !important;font-family: FontAwesome !important;color: #aeaeae !important;}
  254. .list-unit .list-status-title a#advanced-options-button:before {content:"\f0b0"; font-size: 12px !important;font-family: FontAwesome !important;color: #aeaeae !important;}
  255. .list-unit .list-stats {background: #f4f4f4 !important; color: #aeaeae !important;border-radius: 3px;font-size: 10px !important; letter-spacing: 1px !important;margin-bottom: 2px !important;margin-top: -11px !important;text-transform: uppercase;}
  256.  
  257. /* effects on other data in the table like type, score, etc */
  258. .list-table .list-table-data .data {color: #323232;font-size: 13px;font-family: segoe ui !important;font-weight: normal !important;}
  259.  
  260. /* edit, more BUTTONS */
  261. .list-table .list-table-data .data.title .add-edit-more {
  262.     width: 24px;
  263.     margin-right: -6px;
  264.     margin-top: 4px;
  265.    
  266.     color: transparent !important;
  267.     font-size: 11px !important;
  268.     text-transform: lowercase;
  269.    
  270.     opacity: 0;
  271.     transition: 0.2s;
  272. }
  273. .list-table .list-table-data .data.title .add-edit-more:hover {opacity: 1;}
  274. .list-table-data a.List_LightBox {color: #606060 !important;font-size: 0 !important;}
  275. .list-table-data a.List_LightBox:before {content: "\f040";font-size: 11px !important;font-family: FontAwesome !important;}
  276. .list-table .list-table-data .data.title .more {font-size: 0 !important;}
  277. .list-table-data .more a:before {content: "\f129";font-size: 11px !important;font-family: FontAwesome !important;}
  278.  
  279. /* tags */
  280. .list-table .list-table-data .data.tags {word-wrap: break-word;text-transform: none;font-size: 11px;font-weight: 400 !important;width: 250px !important;text-align: left;transition: none !important;}
  281. /* tags edit button */
  282. .list-table .list-table-data .tags .edit {font-family: segoe ui !important;font-size: 0 !important;position: absolute;transition: 0.2s;display: inline-flex !important;width: 13% !important;opacity: 0;}
  283. .list-table .list-table-data .tags .edit:hover {opacity: 1 !important;}
  284. .list-table .list-table-data .tags .edit:before {content: "\f044";position: absolute;color: #6bbfe3; font-size: 15px;font-family: FontAwesome !important;}
  285.  
  286. /* borderrbl more */
  287. td.td1.borderRBL, td.td2.borderRBL {color: #aeaeae;font-size: 10px !important; letter-spacing: 1px !important;transition: 0.2s;}
  288. td.td1.borderRBL a:hover, td.td2.borderRBL a:hover {color: #6bbfe3 !important;transition: 0.2s;}
  289.  
  290. /* episodes */
  291. .fa-plus-circle::before {content: "+";font-size: 12px !important;margin-top: -11px;opacity: 0;color: #404040 !important;}
  292. .fa-plus-circle:hover:before {;opacity: 1;}
  293.  
  294. /* footer, copyright */
  295. #footer-block {background: #f0f8fc; opacity: 0;transition: 0.6s;font-size: 12px !important;font-style: normal !important;font-weight: normal !important;letter-spacing: 1px;}
  296. #footer-block:hover {opacity: 0.9;transition:0.3s;}
  297. #copyright {color: #818081 !important;}
  298.  
  299. .status-menu-container .search-container #search-box input {font-family: Segoe UI !important;box-shadow: inset 0 1px 2px rgba(65,65,65,0.1);border: 1px solid #e0e0e0 !important; border-radius: 3px;}
  300. .list-table .list-table-header .header-title.type {width: 75px !important;}
  301. .list-table .list-table-header .header-title.score {width: 75px !important;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!