API tools faq
paste
Advertisement
Shishipastebin

5cm Simple animations with backgrounds

Shishipastebin
Jun 2nd, 2021 (edited)
761
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 35.30 KB | None | 0 0
raw download clone embed print report
  1. {IMPORTANT:
  2. Change "SpaceCowboy" and
  3. "DateYutaka" to your MyAnimeList username in the next two imports under this section. That will personalize HD preview pics and you should get a faster/smoother load time. The two imports begin with
  4. @/import and are at lines 10 and 12 below.
  5.  
  6. If needed, fix preview pics and layout problems with this topic:
  7. https://myanimelist.net/forum/?topicid=439897
  8. }
  9.  
  10. @\import "https://malscraper.azurewebsites.net/covers/anime/SpaceCowboy/presets/dataimagelink";
  11.  
  12. @\import "https://malscraper.azurewebsites.net/covers/manga/DateYutaka/presets/dataimagelink";
  13.  
  14. /* List design by 5cm with changes by Shishio-kun and Valerio_Lyndon*/
  15.  
  16. @\import "https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700";
  17.  
  18. /* BANNER IMAGE AND COLOR
  19. To change background images: Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.
  20.  
  21. Adjust the background position with the percentages.
  22.  
  23. Change the colors by replacing color names and numbers with the color you want.
  24. https://htmlcolorcodes.com/
  25. */
  26.  
  27. .header {
  28. background-image: url(https://i.imgur.com/R8CH4iS.jpg) ;
  29. background-color: transparent !important;
  30.  
  31. background-repeat: no-repeat;
  32. background-position: center 20%;
  33. background-size: 100%;
  34. }
  35.  
  36. /* CHARACTER 1
  37. */
  38.  
  39. body:after{
  40. background-image: url(https://i.imgur.com/mwHR9hj.png);
  41. background-color: transparent !important;
  42. background-repeat: no-repeat;
  43. background-position:left top;
  44. background-size: 30%;
  45. pointer-events: none !important;
  46. content: "";
  47. display: block;
  48. left: 30%;
  49. top: 0;
  50. width: 100%;
  51. height: 480px;
  52. position: absolute;
  53. animation: TANJIRO 2.5s linear 1;
  54. opacity: 1;
  55. }
  56.  
  57. @keyframes TANJIRO {
  58. 0% { left: -100%; }
  59. 100% { left: 30%; }
  60. }
  61.  
  62.  
  63. /* CHARACTER 2
  64. */
  65. .list-container:before{
  66. background-image: url(https://i.imgur.com/7KAM1zo.png);
  67. background-color: transparent !important;
  68. background-repeat: no-repeat;
  69. background-position:left top;
  70. background-size: 30%;
  71. pointer-events: none !important;
  72. content: "";
  73. display: block;
  74. right: -60%;
  75. top: -480px;
  76. width: 100%;
  77. height: 480px;
  78. position: absolute;
  79. animation: NEZUKO 2.5s linear 1;
  80. opacity: 1;
  81. }
  82.  
  83. @keyframes NEZUKO {
  84. 0% { right: -100%; }
  85. 100% { right: -60%;}
  86. }
  87.  
  88.  
  89.  
  90.  
  91. /* WALLPAPER
  92. To change background images: Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.
  93.  
  94. To change the color, switch #f5f5f5 with the color you want like "black" or another color code and save.
  95.  
  96. Get color codes here:
  97. https://htmlcolorcodes.com/
  98. */
  99. body{
  100. background-image: url(https://i.imgur.com/VEOpMrG.jpg) !important;
  101. background-color: #f5f5f5;
  102. background-size: cover;
  103. background-attachment: fixed;
  104. }
  105.  
  106.  
  107. /* BANNER QUOTES
  108. The words after content control the quote text.
  109. */
  110.  
  111. .header:before{
  112. content:"I can do it. I know I can do it. I'm the guy who gets it done, broken bones or not. No matter what, I can do it! I can fight!";
  113. display: block;
  114. font-size: 20px;
  115. font-style: italic;
  116. left: 0px;
  117. padding-top: 200px !important;
  118. height: 300px;
  119. width: 30%;
  120. opacity: 1 !important;
  121. color: whitesmoke;
  122. text-align: center;
  123. position: absolute;
  124. pointer-events: none;
  125. text-shadow:1px 0 0 black,0 1px 0 black,-1px 0 0 black,0 -1px 0 black;
  126. }
  127.  
  128. .header:after{
  129. content:"";
  130. font-size: 20px;
  131. font-style: italic;
  132. right: 0px !important;;
  133. padding-top: 200px !important;
  134. top: 0 !important;
  135. position: absolute;
  136. height: 300px;
  137. width: 25%;
  138. opacity: 1 !important;
  139. color: black;
  140. text-align: center;
  141. display: block;
  142. pointer-events: none;
  143. text-shadow:1px 0 0 black,0 1px 0 black,-1px 0 0 black,0 -1px 0 black;
  144. }
  145.  
  146. /* BANNER AVATAR
  147. To change the background image: Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.
  148.  
  149. */
  150.  
  151. #status-menu .status-menu:before {
  152. background: center/cover url(https://i.imgur.com/KkOG50L.gif);
  153. }
  154.  
  155.  
  156. /* BANNER TEXT COLOR
  157. Change the color and fill (color for icons) by replacing color names and numbers with the color you want.
  158.  
  159. Get color codes here:
  160. https://htmlcolorcodes.com/
  161. */
  162.  
  163. .list-menu-float .icon-menu svg.icon,.list-menu-float .icon-menu.profile:before{
  164. color: white !important;
  165. fill: white !important;
  166.  
  167. }
  168.  
  169. .header .header-menu .header-info a,#header-menu-button,.header .header-menu .list-menu .icon-menu .text,
  170. #status-menu .status-button.on,.header .username,.header .header-menu.other .btn-menu,#header-menu-button{
  171. color: white !important;
  172. fill: white !important;
  173.  
  174. }
  175.  
  176.  
  177. .header .header-menu .header-info a:hover, #header-menu-dropdown a:hover,.header .header-menu .header-info a:hover,.header .header-menu .list-menu .icon-menu .text:hover,.list-menu-float .icon-menu svg.icon:hover,.list-menu-float .icon-menu.profile:hover:before{
  178. color: #00CCFF !important;
  179. fill: #00CCFF !Important;
  180. }
  181.  
  182. .header .header-menu .header-info a,#header-menu-button,.header .header-menu .list-menu .icon-menu .text,
  183. #status-menu .status-button.on,.header .username,.header .header-menu.other .btn-menu,#header-menu-button
  184. {text-shadow:1px 0 0 black,0 1px 0 black,-1px 0 0 black,0 -1px 0 black;}
  185.  
  186.  
  187. #search-box input {
  188. background-image: url() !important;
  189. background-color: white !important;
  190. color: black !important;
  191. }
  192.  
  193.  
  194. .status-menu-container .search-container #search-button .fa {
  195. display: inherit !important;
  196. color: #999 !important;
  197. position: absolute;
  198. left: 8px;
  199. font-size: 14px;
  200. }
  201.  
  202.  
  203. /* CATEGORY BAR COLOR
  204. Change the colors by replacing #ef8577 with the color you want. First color is for the category bar, and second color is for triangle under the category bar.
  205.  
  206. Get color codes here:
  207. https://htmlcolorcodes.com/
  208. */
  209.  
  210. #status-menu, .status-menu-container.fixed,#status-menu .status-button {
  211. background-color: #052ea4;
  212. }
  213.  
  214. #status-menu .status-button.on::after{
  215. border-top: 20px solid #052ea4;}
  216.  
  217.  
  218.  
  219. /* CATEGORY LINK COLORS
  220. Change the colors by replacing #999 or white with the color you want. First color is for the category being used, and second color is for other categories.
  221.  
  222. Get color codes here:
  223. https://htmlcolorcodes.com/
  224. */
  225.  
  226. #status-menu .status-button.on{
  227. color: white !important;
  228. }
  229.  
  230. #status-menu .status-button{
  231. color: white !important;
  232. }
  233.  
  234.  
  235. #status-menu .status-button:not(.on):hover {
  236. background: ;}
  237.  
  238.  
  239. #status-menu .status-button:hover{
  240. color: !important;
  241. }
  242.  
  243.  
  244.  
  245. /* SORT BY AND LINKS COLORS
  246. First color is for the strip behind the sort links.
  247. Second color is for Sort By: and third color is for the following links on the right of it (Anime Title, Score, etc).
  248. Fourth color is the background behind the links on hover.
  249.  
  250. Get color codes here:
  251. https://htmlcolorcodes.com/
  252. */
  253.  
  254. .list-table-header{
  255. background: #052ea4 !important;
  256. }
  257.  
  258. .list-table-header::before {
  259. color: white;
  260. }
  261.  
  262. .list-unit .list-status-title .stats a,
  263. #advanced-options-button, .list-table .list-table-header .header-title .link.sort
  264. {
  265. color: white !important;
  266. }
  267.  
  268.  
  269. .list-unit .list-status-title .stats a:hover,
  270. #advanced-options-button:hover, .list-table .list-table-header .header-title .link.sort:hover{
  271. background: ;
  272. color: !important;
  273. }
  274.  
  275.  
  276.  
  277.  
  278.  
  279.  
  280.  
  281.  
  282.  
  283. /* CHERRY BLOSSOMS
  284. To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.
  285. Change the color with the number after filter.
  286. */
  287. body:before{
  288. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwBAS62lleijrhGHB-Tx5_KQ);
  289. filter: hue-rotate(290deg);
  290.  
  291. content: "";
  292. width: 100% !important;
  293. height: 100% !important;
  294. display: block;
  295. top: 0 !important;
  296. left: 0 !important;
  297. position: absolute;
  298. pointer-events: none;
  299. }
  300.  
  301.  
  302. /* DECIMAL SCORES
  303. Replace the number or ID with the number that appears in the URL for the anime you want to add decimal scores to. For manga, also change anime to manga.
  304.  
  305. Change the decimal amount with the number after content.
  306. */
  307.  
  308. .data.title a[href^="/anime/5525"] ~ .add-edit-more:before { content:".5"; }
  309.  
  310. .data.title a[href^="/anime/48"] ~ .add-edit-more:before { content:".5"; }
  311.  
  312.  
  313. .data.title a[href^="/anime/ID"] ~ .add-edit-more:before { content:".5"; }
  314.  
  315.  
  316. .data.title a[href^="anime/ID"] ~ .add-edit-more:before { content:".5"; }
  317.  
  318.  
  319. .data.title a[href^="/anime/ID"] ~ .add-edit-more:before { content:".5"; }
  320.  
  321.  
  322.  
  323. /* DECIMAL SCORES SETTINGS
  324. Change the text color here.
  325. */
  326.  
  327. .data.title .add-edit-more:before {
  328. color: black;
  329.  
  330. position: absolute;
  331. top: 0px;
  332. left: 175px;
  333. display: block;
  334. width: 12px;
  335. height: 20px;
  336. font-weight: bold;
  337. font-size: 12px;
  338. pointer-events: none;
  339. }
  340.  
  341.  
  342.  
  343. /* SCORES TAG COLORS
  344. Change the color code after background to the one you want. Get color codes from this page:
  345. https://htmlcolorcodes.com/
  346.  
  347. The codes below are for each category's tag and decimal tag (you can make the decimals different tag colors).
  348. */
  349.  
  350.  
  351. .list-table .list-table-data .data.status.reading ~ .data.score .link,
  352. .status.reading ~ .title .add-edit-more::before,
  353. .list-table .list-table-data .data.status.watching ~ .data.score .link,
  354. .status.watching ~ .title .add-edit-more::before {
  355. background: #cfe88d;
  356. }
  357.  
  358. .list-table .list-table-data .data.status.completed ~ .data.score .link,
  359. .status.completed ~ .title .add-edit-more::before {
  360. background: #ffff92;
  361. }
  362.  
  363. .list-table .list-table-data .data.status.onhold ~ .data.score .link,
  364. .status.onhold ~ .title .add-edit-more::before {
  365. background: #afb8e2;
  366. }
  367.  
  368. .list-table .list-table-data .data.status.dropped ~ .data.score .link,
  369. .status.dropped ~ .title .add-edit-more::before {
  370. background: #fc7671;
  371. }
  372.  
  373.  
  374.  
  375. /* LIST FONT COLORS
  376.  
  377. Change the color code after background to the one you want. Get color codes from this page:
  378. https://www.hexcolortool.com/
  379. */
  380.  
  381. body,
  382. .list-table .list-table-data .data.volume a,
  383. .list-table .list-table-data .data.progress,
  384. .list-table .list-table-data .data.chapter a,
  385. .list-table .list-table-data .data.studio,
  386. .list-table .list-table-data .data.licensor,
  387. .list-table .list-table-data .data.progress a,
  388. .list-table .list-table-data .data.magazine a,
  389. .list-table .list-table-data .data.studio a,
  390. .list-table .list-table-data .data.licensor a,
  391. .list-table .list-table-data .data.tags a,
  392. .list-table .list-table-data .tags .edit
  393. {
  394. color: black !important;
  395. }
  396.  
  397.  
  398. body
  399. {
  400. font: 300 11px Open Sans;
  401. }
  402.  
  403.  
  404. /* TEXT OUTSIDE COVERS*/
  405.  
  406. .list-table .list-table-data .data.season a,
  407. .list-table .list-table-data .data.season,
  408. .list-table .list-table-data .data a,
  409. .list-table .list-table-data .data.title a,
  410. .list-table .list-table-data .data.rated,
  411. .list-table .list-table-data .data.started,
  412. .list-table .list-table-data .data.finished,
  413. .list-table .list-table-data .data.airing-started,
  414. .list-table .list-table-data .data.airing-finished,
  415. .list-table .list-table-data .data.priority
  416. {
  417. color: white !important;
  418. }
  419.  
  420. .list-table .list-table-data:hover .data .add a,
  421. .list-table .list-table-data:hover .data .edit a
  422. {
  423. color: white !important;
  424. text-decoration: none;
  425. }
  426.  
  427. .list-table .list-table-data:hover .data.season a{
  428. color: white !important;
  429. }
  430.  
  431.  
  432. /* ANIME TITLE */
  433. .list-table .list-table-data .data.title .link{
  434. color: #333 !important;
  435. }
  436.  
  437. /* PAGE BOTTOM TEXT*/
  438.  
  439. .list-unit .list-stats{
  440. color: #777 !important;
  441. }
  442.  
  443. #copyright{
  444. color: white !important;
  445. }
  446.  
  447. .list-unit .list-stats {
  448. background-color: #ef8577 !important;
  449. color: white !important;
  450. }
  451.  
  452.  
  453. /* COVER OVERLAY
  454. Normally, its white with sligth transparency, but you can change it here.
  455. Change the color code after background to the RGBA colors you want. Get new RGBA codes with an RGBA CSS generator:
  456. https://www.hexcolortool.com/
  457. */
  458. .list-table .list-table-data:hover .data.title {
  459. background: rgba(255,255,255,0.8);
  460. outline: 3px solid white;
  461. }
  462.  
  463. /* FOOTER */
  464. #footer-block {
  465. background: transparent !important;
  466. margin-top: 20px;
  467. }
  468.  
  469.  
  470.  
  471. /* OTHER CODES*/
  472.  
  473.  
  474.  
  475. .list-table .list-table-data:hover .data .edit a{
  476. font-size: 11px;
  477. color: ;
  478. }
  479. *:not(a:hover):not(input) {
  480. cursor: default;
  481. }
  482. a:link, a:active, a:visited {
  483. color: black;
  484. }
  485. .header .header-title, .header .header-menu .btn-menu,#header-menu-dropdown svg,
  486. [data-work="anime"] .icon-menu.anime-list, [data-work="manga"] .icon-menu.manga-list,[data-owner=""] .list-menu-float,
  487. .list-menu-float .icon-menu.setting, form[action],.list-menu-float .icon-menu .text,
  488. .list-unit .list-status-title .text,
  489. .list-table .list-table-header .header-title.status,
  490. .list-table .list-table-data .data.status,.list-table .list-table-data .data.status.plantowatch ~ .data.score,.cover-block,
  491.  
  492. i.fa:not([class*=sort]):not([class$=circle]), img, .icon-watch.ml4{
  493. display: none;
  494. }
  495. .header {
  496. width: 100%;
  497. height: 480px;
  498. }
  499. .header .header-menu.other {
  500. position: static;
  501. color: #999;
  502. text-align: left;
  503. text-transform: uppercase;
  504. }
  505. .header .header-menu.other .btn-menu {
  506. font: 700 25px Open Sans;
  507. color: #999;
  508. display: inline-block;
  509. overflow: hidden;
  510. text-indent: -116px;
  511. position: relative;
  512. top: 13px;
  513. left: 18px;
  514. }
  515. .header .header-menu .header-info {
  516. position: absolute;
  517. top: 17px;
  518. right: 257px;
  519. font-size: 0;
  520. }
  521. .header .username {
  522. font-weight: 700;
  523. }
  524. .header a, #header-menu-dropdown a {
  525. width: auto;
  526. height: auto;
  527. font-weight: 400;
  528. color: #999 !important;
  529. transition: none;
  530. }
  531. .header .header-menu .header-info a, #header-menu-dropdown a {
  532. font-size: 11px;
  533. margin: 0 15px;
  534. }
  535. .header .header-menu .header-info a:hover, #header-menu-dropdown a:hover {
  536. background: none;
  537. text-decoration: none;
  538. }
  539. #header-menu-dropdown {
  540. display: block!important;
  541. top: 23px;
  542. right: 182px;
  543. background: none;
  544. border: 0;
  545. box-shadow: none;
  546. }
  547. .list-menu-float {
  548. position: absolute;
  549. top: 23px;
  550. right: 185px;
  551. width: auto;
  552. border: 0;
  553. }
  554. .list-menu-float .icon-menu {
  555. display: inline-block;
  556. width: 16px;
  557. height: 16px;
  558. background: none !important;
  559. margin: 0 5px;
  560. }
  561. .list-menu-float .icon-menu svg.icon {
  562. position: static;
  563. width: 16px;
  564. height: 16px;
  565. fill: #aaa;
  566. }
  567. .list-menu-float .icon-menu:hover svg.icon, .header .header-menu .list-menu .icon-menu .text {
  568. position: static;
  569. fill: #ef8577;
  570. }
  571. .list-menu-float .icon-menu:not(.profile):hover {
  572. width: auto;
  573. background: none;
  574. }
  575. .list-menu-float .icon-menu.profile {
  576. background: none !important;
  577. }
  578. .list-menu-float .icon-menu.profile:before {
  579. content: '\f007';
  580. font: 16px FontAwesome;
  581. color: #aaa;
  582. line-height: 15px;
  583. position: absolute;
  584. right: 2px;
  585. }
  586. .list-menu-float .icon-menu.profile:hover:before {
  587. color: #ef8577;
  588. }
  589. .list-container {
  590. background: none !important;
  591. width: 100%;
  592. border: 0;
  593. }
  594. #status-menu, .status-menu-container.fixed {
  595. width: 100%;
  596. height: auto;
  597. border: 0;
  598. position: static;
  599. }
  600. #status-menu .status-menu {
  601. width: 100%;
  602. border-spacing: 0;
  603. text-align: center;
  604. }
  605. #status-menu .status-menu:before {
  606. content: '';
  607. display: inline-block;
  608. width: 90px;
  609. height: 90px;
  610. border-radius: 50%;
  611. position: absolute;
  612. margin-top: -20px;
  613. }
  614. #status-menu .status-button {
  615. display: inline-block;
  616. font: 300 13px Open Sans;
  617. color: white;
  618. letter-spacing: 1px;
  619. text-transform: uppercase;
  620. padding: 15px 20px;
  621. }
  622. #status-menu .status-button:first-child {
  623. margin-left: 100px;
  624. }
  625. #header-menu-button, #status-menu .status-button.on {
  626. cursor: default;
  627. font-weight: 700;
  628. text-decoration: none;
  629. }
  630. #status-menu .status-button::after {
  631. background: none;
  632. }
  633. #status-menu .status-button.on::after {
  634. background: none;
  635. left: calc(50% - 20px);
  636. bottom: -19px;
  637. width: 0;
  638. height: 0;
  639. border-left: 20px solid transparent;
  640. border-right: 20px solid transparent;
  641. }
  642. #status-menu .search-container {
  643. top: -475px;
  644. right: 20px;
  645. }
  646. #status-menu #search-box {
  647. width: 150px;
  648. height: auto;
  649. }
  650. #search-box input {
  651. background: white 3px 50%/20px no-repeat url(https://image.myanimelist.net/ui/ueQLRyZL_yQZxD14iYLZC_gLr-mtem_jVqxnLpUY6LHlp_sr_ZwRrhNpbh7nV5sCeo7Sp3-sdxOAu1kTqLeHfW7i3YHTvUNvkDS5qKJPeIQyZ4XG2BGDzLdXX1QvKlrJ);
  652. font: 300 11px Open Sans;
  653. color: #999;
  654. padding: 4px 12px 6px 25px;
  655. border: 1px solid #ddd;
  656. border-radius: 10px;
  657. }
  658. .list-block, .status-menu-container.fixed + div.list-block {
  659. margin-top: 30px;
  660. min-height: 0;
  661. }
  662. .list-unit {
  663. width: 80%;
  664. }
  665. .list-unit .list-status-title {
  666. display: inline-block;
  667. width: calc(100% - 30px);
  668. height: 0;
  669. background: none;
  670. text-align: right;
  671. margin: auto;
  672. }
  673. .list-unit .list-status-title .stats {
  674. height: 0;
  675. line-height: 100%;
  676. top: 128px !important;
  677. left: 900px !important;
  678. position: relative;
  679. color: black !important;
  680. }
  681. .list-unit .list-stats {
  682. position: absolute;
  683. display: block;
  684. bottom: 0px;
  685. width: 80%;
  686. height: auto;
  687. background: none;
  688. font: normal 11px Open Sans;
  689. color: #777;
  690. text-transform: uppercase;
  691. }
  692. .list-table .list-table-header .header-title .link.sort {
  693. font-weight: normal;
  694. color: #999;
  695. text-transform: uppercase;
  696. padding: 4px 6px;
  697. z-index: 1;
  698. }
  699. .list-table > tbody:nth-of-type(2n+1):first-of-type {
  700. display: block;
  701. Width: 100%;
  702. height: auto;
  703. margin: 20px;
  704. background: none;
  705. text-transform: uppercase;
  706. z-index: 3;
  707. }
  708. .list-table-header {
  709. display: inline-block;
  710. width: 100%;
  711. }
  712. .list-table-header:before {
  713. content: 'Sort by:';
  714. position: relative;
  715. top: 2px;
  716. margin-right: 12px;
  717. }
  718. .list-table .list-table-header .header-title {
  719. display: inline-block;
  720. width: auto !important;
  721. height: auto;
  722. background: none;
  723. border: 0;
  724. padding: 0 !important;
  725. margin: 0 15px;
  726. }
  727. .list-table .list-table-header .header-title .link.sort:hover, #advanced-options-button:hover {
  728. color: #999;
  729. }
  730. .list-table .list-table-header .header-title .sort-icon {
  731. color: rgba(239,133,119,.65);
  732. font-size: 18px;
  733. position: relative;
  734. line-height: 0;
  735. }
  736. .fa-sort-asc {
  737. top: 6px;
  738. }
  739. .fa-sort-desc {
  740. top: -2px;
  741. }
  742. .fa-plus-circle::before {
  743. content: '+' !important;
  744. margin-left: 1px;
  745. }
  746. .list-table {
  747. border: 0;
  748. text-align: center;
  749. }
  750. .list-item, .list-table > tbody:nth-of-type(2n+1):not(:first-child) {
  751. width: 200px;
  752. height: 290px;
  753. display: inline-block;
  754. background: none;
  755. margin: 15px;
  756. }
  757. .list-table .list-table-data .data {
  758. position: absolute;
  759. width: 200px;
  760. height: 280px;
  761. border: 0;
  762. padding: 0;
  763. }
  764.  
  765. .list-table .list-table-data .data.finished,.list-table .list-table-data .data.started,.list-table .list-table-data .data.storage,.list-table .list-table-data .data.airing-finished,.list-table .list-table-data .data.airing-started,.list-table .list-table-data .data.rated ,.list-table .list-table-data .data.licensor,.list-table .list-table-data .data.season,.list-table .list-table-data .data.studio,.list-table .list-table-data .data.title .link,.list-table .list-table-data .data.progress,.list-table .list-table-data .data.type,.list-table .list-table-data .data .edit a:after,.list-table .list-table-data .data.title span,.list-table .list-table-data .data.season,.list-table .list-table-data .data.days,.list-table .list-table-data .data.studio,.list-table .list-table-data .data.magazine,.list-table .list-table-data .data.chapter,.list-table .list-table-data .data.volume{
  766. opacity: 0;
  767. }
  768. .list-table .list-table-data:hover .data.finished,.list-table .list-table-data:hover .data.started,.list-table .list-table-data:hover .data.storage,.list-table .list-table-data:hover .data.airing-finished,.list-table .list-table-data:hover .data.airing-started,.list-table .list-table-data:hover .data.rated ,.list-table .list-table-data:hover .data.licensor,.list-table .list-table-data:hover .data.title .link,.list-table .list-table-data:hover .data.progress,.list-table .list-table-data:hover .data.type,.list-table .list-table-data:hover .data .edit a:after,.list-table .list-table-data:hover .data.title span,.list-table .list-table-data:hover .data.tags,.list-table .list-table-data:hover .data.days,.list-table .list-table-data:hover .data.season,.list-table .list-table-data:hover .data.studio,.list-table .list-table-data:hover .data.magazine,.list-table .list-table-data:hover .data.chapter,.list-table .list-table-data:hover .data.volume{
  769. opacity: 1;
  770. visibility: visible !important;
  771. }
  772. .list-table .list-table-data .data.title {
  773. letter-spacing: 0;
  774. padding: 0;
  775. }
  776. .list-table .list-table-data .data.title .link {
  777. position: absolute;
  778. left: 13px;
  779. bottom: 43px;
  780. width: 160px;
  781. z-index: 51 !important;
  782. opacity: 0;
  783. font-size: 20px;
  784. line-height: 22px;
  785. text-transform: upper;
  786. }
  787. .list-table .list-table-data .data.score {
  788. text-align: right;
  789. }
  790. .list-table .list-table-data .data.score .link {
  791. font-weight: 700;
  792. text-align: right!important;
  793. margin-right: 10px;
  794. padding: 4px 6px;
  795. word-spacing: -3px;
  796. }
  797. .list-table .list-table-data .data.score .link:after {
  798. content: ;
  799. }
  800. .progress div:before {
  801. content: 'Progress: ';
  802. position: absolute;
  803. font-size: 12px;
  804. margin-top: -15px;
  805. margin-left: 0px;
  806. padding-right:5px;
  807. }
  808. .list-table .list-table-data .data.progress {
  809. width: auto;
  810. position: absolute;
  811. height: auto;
  812. margin-top: 255px;
  813. margin-left: 13px;
  814. font: italic 18px Open Sans;
  815. word-spacing: -3px;
  816. opacity: 0;
  817. }
  818. .data.chapter div:before {
  819. content: 'Chapters: ';
  820. position: absolute;
  821. font-size: 12px;
  822. margin-top: -15px;
  823. margin-left: 0px;
  824. padding-right:5px;
  825. }
  826. .list-table .list-table-data .data.chapter{
  827. position: absolute;
  828. margin-top: 244px;
  829. margin-left: 5px;
  830. width: auto;
  831. position: absolute;
  832. height: auto;
  833. margin-top: 255px;
  834. font: italic 18px Open Sans;
  835. word-spacing: -3px;
  836. opacity: 0;
  837. }
  838. .data.volume div:before {
  839. content: 'Volumes: ';
  840. position: absolute;
  841. font-size: 12px;
  842. margin-top: -15px;
  843. margin-left: 0px;
  844. padding-right:5px;
  845. }
  846. .list-table .list-table-data .data.volume{
  847. position: absolute;
  848. margin-top: 255px;
  849. margin-left: 65px;
  850. width: auto;
  851. position: absolute;
  852. height: auto;
  853. font: italic 18px Open Sans;
  854. word-spacing: -3px;
  855. opacity: 0;
  856. }
  857. .list-table .list-table-data .data.type {
  858. width: 100px;
  859. text-align: right;
  860. height: auto;
  861. margin-left: 125px;
  862. opacity: 0;
  863. margin-top: 245px;
  864. font-size: 11px;
  865. text-align: center;
  866. }
  867. .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 {
  868. position: absolute;
  869. top: 2px;
  870. left: 20px;
  871. font: 600 9px Open Sans;
  872. color: #444;
  873. border: 1px solid #555;
  874. padding: 2px 4px;
  875. opacity: 0;
  876. text-transform: uppercase;
  877. }
  878. .list-table .list-table-data .data.title .add-edit-more {
  879. font-size: 0;
  880. float: none;
  881. z-index: 5;
  882. position: relative;
  883. top: 0;
  884. left: 5px;
  885. }
  886. .list-table .list-table-data .data.image a {
  887. width: 200px;
  888. height: 280px;
  889. background-size: contain;
  890. background-position: center;
  891. background-repeat: no-repeat;
  892. }
  893. .list-table .list-table-data .data a, .list-table .list-table-data a.edit-disabled {
  894. color: black !important;
  895. }
  896.  
  897.  
  898.  
  899.  
  900. #copyright {
  901. font: 400 8px Open Sans;
  902. letter-spacing: 1px;
  903. color: #777;
  904. text-transform: uppercase;
  905. }
  906. .list-table .list-table-data .data.score .link:after {
  907. content: ".0"
  908. }
  909. .list-table .list-table-data .data.tags{
  910. margin-top: 60px;
  911. visibility: hidden;
  912. width: 180px;
  913. padding-left: 10px;
  914. }
  915. .list-table .list-table-data .data.tags a{
  916. position: relative;
  917. z-index: 10000 !important;
  918. }
  919. .list-table .list-table-data .data.studio a{
  920. top: 0px !important;
  921. left: 0px;
  922. position: relative;
  923. }
  924. .list-table .list-table-data .data.studio{
  925. position: absolute;
  926. height: 10px !important;
  927. }
  928. .list-table .list-table-data .data.season a{
  929. top: 260px !important;
  930. position: relative;
  931. }
  932. .list-table .list-table-data .data.season{
  933. position: absolute;
  934. height: 10px !important;
  935. margin-left: 0px;
  936. margin-top: -279px;
  937. font: italic 11px Open Sans;
  938. }
  939. .list-table .list-table-data .data.priority {
  940. margin-top: -20px;
  941. }
  942. .list-table .list-table-data .data.priority:after {
  943. content: " Priority";
  944. }
  945. .list-table .list-table-data:hover .data.priority {
  946. opacity: 0;
  947. }
  948. .list-table .list-table-data .data.studio {
  949. position: absolute !important;
  950. height: 10px !important;
  951. margin-top: 18px;
  952. margin-left: 0;
  953. z-index: 10000 !important;
  954. }
  955. .list-table .list-table-data .data.licensor,.list-table .list-table-data .data.magazine{
  956. position: absolute;
  957. height: 10px !important;
  958. margin-top: 40px;
  959. margin-left: 0px;
  960. text-align: center;
  961. z-index: 10000 !important;
  962. }
  963. .list-table .list-table-data .data.rated {
  964. position: absolute;
  965. height: 10px !important;
  966. margin-top: -20px;
  967. margin-left: 80px;
  968. }
  969. .list-table .list-table-data .data.airing-started{
  970. position: absolute;
  971. height: 10px !important;
  972. margin-top: -35px;
  973. margin-left: -40px;
  974. }
  975. .list-table .list-table-data .data.airing-finished{
  976. position: absolute;
  977. height: 10px !important;
  978. margin-top: -35px;
  979. margin-left: 35px;
  980. }
  981. .list-table .list-table-data .data.storage{
  982. position: absolute;
  983. margin-top: -35px;
  984. margin-left: -65px;
  985. }
  986. .list-table .list-table-data .data.started{
  987. position: absolute;
  988. margin-top:285px;
  989. margin-left: -55px;
  990. }
  991. .list-table .list-table-data .data.started:before{
  992. content: "Started: ";
  993. }
  994. .list-table .list-table-data .data.finished{
  995. position: absolute;
  996. margin-top: 285px;
  997. margin-left: 55px;
  998. }
  999. .list-table .list-table-data .data.finished:before{
  1000. content: "Finished: "
  1001. }
  1002. .list-table .list-table-data .data.number {
  1003. margin-left: -92px;
  1004. position: absolute;
  1005. margin-top: 0px;
  1006. opacity: 0;
  1007. z-index: 100 !important;
  1008. pointer-events: none !important;
  1009. }
  1010. .list-table .list-table-data:hover .data.number {
  1011. opacity: 1 !important;
  1012. }
  1013. .list-table .list-table-data .data.days{
  1014. position: absolute;
  1015. margin-top: 264px;
  1016. margin-left: 80px;
  1017. }
  1018. .list-table .list-table-data .data.days:after{
  1019. content: " days"
  1020. }
  1021. .list-table .list-table-data .data.title .content-status{
  1022. margin-left: 50px;
  1023. }
  1024. .list-table .rereading{
  1025. margin-left: 50px;
  1026. }
  1027. .list-table .list-table-data:hover .data .edit a{
  1028. background: transparent;
  1029. content:"";
  1030. height: 240px;
  1031. width: 100%;
  1032. left:0;
  1033. top:0;
  1034. position: absolute;
  1035. display: block;
  1036. z-index: 50 !important;
  1037. }
  1038. .list-table .list-table-data .data.title .add-edit-more{
  1039. margin-left: -7px;
  1040. }
  1041. .header .header-menu .header-info a:hover, #header-menu-dropdown a:hover,.header .header-menu .header-info a:hover,.header .header-menu .list-menu .icon-menu .text:hover,.list-menu-float .icon-menu svg.icon:hover,.list-menu-float .icon-menu.profile:hover:before{
  1042. cursor: pointer;
  1043. }
  1044. .list-container a.List_LightBox:link{
  1045. width: 220px !important;
  1046. height: 310px !important;
  1047. padding-right: 0px;
  1048. padding-bottom: 00px;
  1049. top: -20px !important;
  1050. position: absolute;
  1051. font-size: 12px;
  1052. }
  1053. .list-table .list-table-data .tags .edit{
  1054. position: relative !important;
  1055. margin-left: -5px;
  1056. pointer-events: auto !important;
  1057. padding: 5px;
  1058. }
  1059. .list-table .list-table-data .tags .edit:after{
  1060. content: " Tags"
  1061. }
  1062. .list-table .list-table-data .data.progress .fa{
  1063. font-size: 22px !important;
  1064. position: absolute;
  1065. z-index: 10000 !important;
  1066. padding: 10px;
  1067. top: -10px;
  1068. margin-left: -5px;
  1069. }
  1070. .list-table .list-table-data .data.chapter .fa,.list-table .list-table-data .data.volume .fa{
  1071. font-size: 22px !important;
  1072. position: absolute;
  1073. z-index: 10000 !important;
  1074. padding: 2px;
  1075. top: -3px;
  1076. margin-left: 2px;
  1077. }
  1078. .fa:hover{
  1079.  
  1080. }
  1081. .list-table .list-table-data .data.chapter span,.list-table .list-table-data .data.volume span,.list-table .list-table-data .data.progress span{
  1082. z-index: 10000 !important;
  1083. position: relative !important;
  1084. }
  1085. .list-table .list-table-data .data.chapter span a:before,.list-table .list-table-data .data.volume span a:before,.list-table .list-table-data .data.progress span a:before{
  1086. position: absolute;
  1087. content: "";
  1088. left: -20px;
  1089. top: -0px;
  1090. padding: 10px;
  1091. }
  1092.  
  1093. .list-table .list-table-data .data.progress .fa:hover,
  1094. .list-table .list-table-data .data.chapter .fa:hover,
  1095. .list-table .list-table-data .data.volume .fa:hover
  1096. {
  1097. color: blue;
  1098. text-decoration: underline;
  1099.  
  1100. }
  1101.  
  1102. .list-table .list-table-header .header-title.number,
  1103. .list-table .list-table-header .header-title.image,
  1104. .list-table .list-table-header .header-title.tags,
  1105. .list-table .list-table-header .header-title.days,
  1106. .list-table .list-table-header .header-title.storage,
  1107. .list-table .list-table-header .header-title.studio,
  1108. .list-table .list-table-header .header-title.licensor,
  1109. .list-table .list-table-header .header-title.started
  1110. {
  1111. display: none;
  1112.  
  1113. }
  1114.  
  1115. #recaptcha-terms {
  1116. display: none;
  1117. }
  1118.  
  1119.  
  1120. .status-menu-container.fixed {
  1121. position: fixed !important;
  1122. display: block !important;
  1123. top: 0 !important;
  1124. z-index: 10 !important;
  1125. }
  1126.  
  1127. .status-menu-container.fixed .status-menu:before{
  1128. display: none !important;
  1129. }
  1130.  
  1131. .status-menu-container,
  1132. .status-menu:before{
  1133. z-index: 10 !important;
  1134. }
  1135.  
  1136.  
  1137. .header .header-menu .header-info,
  1138. .list-menu-float,
  1139. #header-menu-dropdown,
  1140. .header .header-menu.other .btn-menu,
  1141. #status-menu .search-container {
  1142. z-index: 100 !important;
  1143.  
  1144. }
  1145. .list-table .list-table-data .data.licensor a,
  1146. .list-table .list-table-data .data.magazine a,
  1147. .list-table .list-table-data .data.studio a,
  1148. .list-table .list-table-data .data.licensor,
  1149. .list-table .list-table-data .data.magazine,
  1150. .list-table .list-table-data .data.studio,
  1151. .list-table .list-table-data .data.title .link,
  1152. .list-table .list-table-data .data.tags a,
  1153. .list-table .list-table-data .data a,
  1154. .list-table .list-table-data a.edit-disabled{
  1155. z-index: 6 !important;
  1156. }
  1157.  
  1158.  
  1159.  
  1160.  
  1161.  
  1162.  
  1163. .list-table .list-table-data .data.title .add-edit-more{
  1164. margin-left: -5px;
  1165. }
  1166.  
  1167. .list-unit .list-status-title .stats{
  1168. z-index: 5 !important;
  1169. position: absolute;
  1170. left: 0%;
  1171. right: 0%;
  1172. margin: 0 auto;
  1173. width: 100px !important;
  1174. margin-top: -101px;
  1175. left: 840px !important;
  1176. z-index: 6 !important;
  1177. }
  1178.  
  1179.  
  1180.  
  1181. .list-unit .list-stats {
  1182. display: none;
  1183. width: 1024px;
  1184. height: 30px;
  1185. line-height: 30px;
  1186. text-align: center;
  1187. position: fixed;
  1188. bottom: 0;
  1189. left: 0;
  1190. right: 0;
  1191. margin: auto;
  1192. z-index: 10;
  1193. }
  1194.  
  1195. body {
  1196. overflow-x: hidden; /* Hide horizontal scrollbar */
  1197. }
  1198.  
  1199. #qc-cmp2-container,
  1200. .qc-cmp-button,
  1201. .qc-cmp-ui,
  1202. .qc-cmp-ui .qc-cmp-main-messaging,
  1203. .qc-cmp-ui .qc-cmp-messaging,
  1204. .qc-cmp-ui .qc-cmp-beta-messaging,
  1205. .qc-cmp-ui .qc-cmp-title,
  1206. .qc-cmp-ui .qc-cmp-sub-title,
  1207. .qc-cmp-ui .qc-cmp-purpose-info,
  1208. .qc-cmp-ui .qc-cmp-table,
  1209. .qc-cmp-ui .qc-cmp-table-header,
  1210. .qc-cmp-ui .qc-cmp-vendor-list,
  1211. .qc-cmp-ui .qc-cmp-vendor-list-title,
  1212. .qc-cmp-publisher-purposes-table .qc-cmp-table-header,
  1213. .qc-cmp-publisher-purposes-table .qc-cmp-table-row,
  1214. .qc-cmp-button.qc-cmp-secondary-button,
  1215. #qc-cmp2-container *{
  1216. display: none !important;
  1217. pointer-events: none !important;
  1218. visibility: hidden !important;
  1219. opacity: 0 !important;
  1220. }
  1221.  
  1222. .list-table .list-table-data .data.storage {
  1223. position: absolute;
  1224. margin-top: 235px;
  1225. margin-left: 10px;
  1226. }
  1227.  
  1228. .list-table .list-table-data .data.type {
  1229. margin-top: 240px;
  1230. }
  1231.  
  1232.  
  1233. .list-table .list-table-data .data.days {
  1234. margin-top: 261px;
  1235. }
  1236.  
  1237.  
  1238. .list-unit .list-status-title .stats{
  1239. left: 920px !important;
  1240. margin-top: -102px;
  1241. }
  1242.  
  1243.  
  1244. .list-table .list-table-data .data.title .content-status,
  1245. .list-table .list-table-data .data.title .rewatching,
  1246. .list-table .list-table-data .data.title .rereading,
  1247. .list-table .list-table-data .data.title .content-status {
  1248.  
  1249. margin: 0 auto;
  1250. position: absolute;
  1251. left: 0px;
  1252. right: 0px;
  1253. width: 80px;
  1254. text-align: center;
  1255.  
  1256. }
  1257.  
  1258.  
  1259.  
  1260. .list-table .list-table-data .data.chapter * {
  1261. font-size: 14px;
  1262. }
  1263.  
  1264. .list-table .list-table-data .data.volume * {
  1265. font-size: 14px;
  1266. }
  1267.  
  1268. .list-table .list-table-data .data.volume {
  1269. margin-left: 85px;}
  1270.  
  1271. .list-table .list-table-data .data.retail{
  1272. margin-top: 23px;
  1273. }
  1274.  
  1275.  
  1276. .list-table .list-table-data .data.retail{
  1277. opacity: 0;
  1278. }
  1279.  
  1280. .list-table .list-table-data:hover .data.retail{
  1281. opacity: 1;
  1282. }
  1283.  
  1284. .list-table .list-table-data .data.retail:after{
  1285. content: "copies owned";
  1286. }
  1287.  
  1288. .list-table .list-table-header .header-title.magazine,
  1289. .list-table .list-table-header .header-title.retail{
  1290. display: none;
  1291. }
  1292.  
  1293. .list-table .list-table-data .data.title .content-status,
  1294. .list-table .list-table-data .data.title .rewatching,
  1295. .list-table .list-table-data .data.title .rereading,
  1296. .list-table .list-table-data .data.title .content-status {
  1297. top: 0;
  1298. }
  1299.  
  1300.  
  1301. .list-table .list-table-data .studio{
  1302. margin-top: 24px !important;
  1303. }
  1304.  
  1305. .list-table .list-table-data .data.licensor,
  1306. .list-table .list-table-data .data.magazine{
  1307. margin-top: 44px !important;
  1308.  
  1309. }
  1310.  
  1311. .list-table .list-table-data .data.tags{
  1312. margin-top: 68px !important;
  1313. }
  1314.  
  1315.  
  1316. .list-table .list-table-data .airing-started:before{
  1317. content: "Debuted: ";
  1318. }
  1319.  
  1320.  
  1321. .list-table .list-table-data .airing-finished:before{
  1322. content: "Ended: ";
  1323. }
  1324.  
  1325. .list-table .list-table-data .airing-started{
  1326. margin-left: -55px !important;
  1327. }
  1328.  
  1329. .list-table .list-table-data .airing-finished{
  1330. margin-left: 60px !important;
  1331. }
  1332.  
  1333. .list-table .list-table-data .data.studio span,
  1334. .list-table .list-table-data .data.licensor ,
  1335. .list-table .list-table-data .data.magazine{height: 20px !important;overflow:hidden;white-space:initial;}
  1336.  
  1337. .list-container a.List_LightBox:link{
  1338. text-decoration: none !important;
  1339. }
  1340.  
  1341. .list-table .list-table-data .data.score .link {
  1342. Z-INDEX: 1000 !important;
  1343. position: relative;
  1344. pointer-events: inherit;
  1345. }
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!