API tools faq
paste
Shishipastebin

Water and Sun Breathing Layout

Shishipastebin
Mar 14th, 2023 (edited)
300
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 53.83 KB | None | 0 0
raw download clone embed print report
  1. {IMPORTANT:
  2. For full and sharp preview pics, change "USERNAME" in the two imports below to your username. They start with
  3. @/import
  4.  
  5. If needed, fix preview pics and layout problems with this topic:
  6. https://myanimelist.net/forum/?topicid=439897
  7. }
  8.  
  9.  
  10. @\import "https://malscraper.azurewebsites.net/covers/anime/USERNAME/presets/dataimagelink";
  11.  
  12. @\import "https://malscraper.azurewebsites.net/covers/manga/USERNAME/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.  
  19.  
  20. /* BANNER IMAGE AND COLOR (WATER)
  21. 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.
  22.  
  23. Adjust the background position with the right and top (replace them with center, left, bottom, etc) or percentages.
  24.  
  25. Remove Keyframes codes to remove the opening animation. Remove the opacity codes if you don't want to see the secondary background pop up.
  26.  
  27. Change the colors by replacing colors with the color you want.
  28. https://htmlcolorcodes.com/
  29. */
  30.  
  31. .header {
  32. background-image: url(https://i.imgur.com/CLnl67g.png);
  33. background-color: white !important;
  34. background-repeat: no-repeat;
  35. background-position: right top;
  36. background-size: ;
  37. animation: WATER 4s linear 1;
  38. opacity: 1;
  39. }
  40.  
  41.  
  42. @keyframes WATER {
  43. 0% { background-position: left top; opacity: 1;}
  44. 75% { background-position: right top; opacity: 1;}
  45. 87% { background-position: right top; opacity: 0;}
  46. 100% { background-position: right top; opacity: 1;}
  47. }
  48.  
  49.  
  50. /* SECONDARY BACKGROUND (FIRE)
  51. Only seen in the intro briefly. Will show up behind the banner if you make it transparent or opacity: .5.
  52. */
  53. body:before{
  54. content:"";
  55. background-image: url(https://i.imgur.com/rjYDvaS.jpg);
  56. background-position: bottom right;
  57. background-color: white !important;
  58. pointer-events: none !important;
  59. content: "";
  60. display: block;
  61. left: 0;
  62. top: 0;
  63. width: 100%;
  64. height: 480px;
  65. position: absolute;
  66. z-index: -2;
  67. }
  68.  
  69.  
  70. /* CHARACTER
  71. */
  72.  
  73. body:after{
  74. background-image: url(https://i.imgur.com/mwHR9hj.png);
  75. background-color: transparent !important;
  76. background-repeat: no-repeat;
  77. background-position: left top;
  78. background-size: 30%;
  79. pointer-events: none !important;
  80. content: "";
  81. display: block;
  82. left: 0;
  83. top: 0;
  84. width: 100%;
  85. height: 480px;
  86. position: absolute;
  87. animation: TANJIROU 2.5s linear 1;
  88. opacity: 1;
  89. }
  90.  
  91. @keyframes TANJIROU {
  92. 0% { background-position: -100% top; }
  93. 100% { background-position: left top; }
  94. }
  95.  
  96.  
  97. /* BANNER QUOTE
  98. The words after content control the quote text. You may have to adjust the width, top, left, color, box shadow, etc to customize the quote.
  99. Color and box shadow help:
  100. https://htmlcolorcodes.com/
  101. https://html-css-js.com/css/generator/box-shadow/
  102. */
  103.  
  104. .header:before{
  105. 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!";
  106. display: block;
  107. font-size: 20px;
  108. font-style: italic;
  109. text-align: center;
  110. left: 35%;
  111. top: 30%;
  112. height:55px;
  113. width: 600px;
  114. color: ;
  115. text-align: left;
  116. position: absolute;
  117. z-index: 7 !important;
  118. animation: QUOTE 4.5s 1;
  119. opacity: 1;
  120. -webkit-box-shadow: 0px 0px 11px 12px #1E3B83;
  121. box-shadow: 0px 0px 11px 12px #1E3B83;
  122. background-color:#1E3B83;
  123. }
  124.  
  125. @keyframes QUOTE {
  126. 0% { opacity: 0; }
  127. 90% { opacity: 0;}
  128. 100% { opacity: 1;}
  129. }
  130.  
  131.  
  132.  
  133. /* FALLING BLOSSOMS
  134. Remove this section to remove the blossoms. Incrase the z index to 6 to move it front of the banner.
  135. Change the color with the number after filter.
  136. */
  137.  
  138.  
  139. .list-container:after{
  140. filter: hue-rotate(250deg);
  141. position: fixed;
  142. left: 0;
  143. top: 0;
  144. content: '';
  145. width: 100%;
  146. height: 100%;
  147. background-image: url(https://i.imgur.com/QqP0mWL.png),
  148. url(https://i.imgur.com/Io1Lzgf.png),
  149. url(https://i.imgur.com/Ulp6xjS.png);
  150. animation: SAKURA 10s linear infinite;
  151. pointer-events: none;
  152. z-index: -3;
  153. -webkit-mask-image: linear-gradient(to top, transparent 20%, black);
  154. mask-image: linear-gradient(to top, transparent 20%, black);
  155. }
  156. @keyframes SAKURA {
  157. 0% { background-position: 0 0, 0 0, 0 0; }
  158. 100% { background-position: 500px 1000px, 400px 400px, 300px 300px; }
  159. }
  160.  
  161.  
  162. /* BANNER AVATAR
  163. 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.
  164.  
  165. */
  166.  
  167. #status-menu .status-menu:before {
  168. background: center/cover url(https://i.imgur.com/KkOG50L.gif);
  169. }
  170.  
  171.  
  172. /* BANNER TEXT COLOR
  173. Change the color and fill (color for icons) by replacing #999 with the color you want.
  174.  
  175. Get color codes here:
  176. https://htmlcolorcodes.com/
  177. */
  178.  
  179.  
  180. .list-menu-float .icon-menu svg.icon,.list-menu-float .icon-menu.profile:before{
  181. color: white !important;
  182. fill: white !important;
  183.  
  184. }
  185.  
  186. .header .header-menu .header-info a,#header-menu-button,.header .header-menu .list-menu .icon-menu .text,
  187. #status-menu .status-button.on,.header .username,.header .header-menu.other .btn-menu,#header-menu-button{
  188. color: white !important;
  189. fill: white !important;
  190.  
  191. }
  192.  
  193.  
  194. .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{
  195. color: white !important;
  196. fill: white !Important;
  197. }
  198.  
  199. .header .header-menu .header-info a,#header-menu-button,.header .header-menu .list-menu .icon-menu .text,
  200. #status-menu .status-button.on,.header .username,.header .header-menu.other .btn-menu,#header-menu-button
  201. {text-shadow:1px 0 0 black,0 1px 0 black,-1px 0 0 black,0 -1px 0 black;}
  202.  
  203.  
  204. #search-box input {
  205. background-image: url() !important;
  206. background-color: white !important;
  207. color: black !important;
  208. }
  209.  
  210.  
  211. .status-menu-container .search-container #search-button .fa {
  212. display: inherit !important;
  213. color: #999 !important;
  214. position: absolute;
  215. left: 8px;
  216. font-size: 14px;
  217. }
  218.  
  219.  
  220.  
  221. /* CATEGORY BAR COLOR
  222. 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.
  223.  
  224. Get color codes here:
  225. https://htmlcolorcodes.com/
  226. */
  227.  
  228. #status-menu, .status-menu-container.fixed,#status-menu .status-button {
  229. background-color: #243E84 ;
  230. }
  231.  
  232. #status-menu .status-button.on::after{
  233. border-top: 20px solid #243E84 ;}
  234.  
  235.  
  236.  
  237. /* CATEGORY LINK COLORS
  238. 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.
  239.  
  240. Get color codes here:
  241. https://htmlcolorcodes.com/
  242. */
  243.  
  244. #status-menu .status-button.on{
  245. color: #10e0f9 !important;
  246. }
  247.  
  248. #status-menu .status-button{
  249. color: white !important;
  250. }
  251.  
  252.  
  253. #status-menu .status-button:not(.on):hover {
  254. background: #1b0133 ;
  255. }
  256.  
  257. #status-menu .status-button:hover{
  258. color: white !important;
  259. }
  260.  
  261.  
  262. /* SORT BY AND LINKS COLORS
  263. First color is for the strip behind the sort links.
  264. Second color is for Sort By: and third color is for the following links on the right of it (Anime Title, Score, etc).
  265. Fourth color is the background behind the links on hover.
  266.  
  267. Get color codes here:
  268. https://htmlcolorcodes.com/
  269. */
  270.  
  271. .list-table-header{
  272. background: #243E84 !important;
  273. }
  274.  
  275. .list-table-header::before {
  276. color: white;
  277. }
  278.  
  279. .list-unit .list-status-title .stats a,
  280. #advanced-options-button, .list-table .list-table-header .header-title .link.sort{
  281. color: white !important;
  282. }
  283.  
  284.  
  285. .list-unit .list-status-title .stats a:hover,
  286. #advanced-options-button:hover, .list-table .list-table-header .header-title .link.sort:hover {
  287. background: #1b0133;
  288. color: white !important;
  289. }
  290.  
  291.  
  292.  
  293.  
  294. /* WALLPAPER
  295. 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.
  296.  
  297. To change the color, switch #0C162A with the color you want like "black" or another color code and save.
  298.  
  299. Get color codes here:
  300. https://htmlcolorcodes.com/
  301. */
  302. body{
  303. background-image: url() !important;
  304. background-color: #0C162A !important;
  305. background-attachment: fixed;
  306. background-size: cover;
  307. }
  308.  
  309.  
  310.  
  311.  
  312.  
  313. /* DECIMAL SCORES
  314. 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.
  315.  
  316. Change the decimal amount with the number after content.
  317. */
  318.  
  319. .data.title a[href^="/anime/5525"] ~ .add-edit-more:before { content:".5"; }
  320.  
  321. .data.title a[href^="/anime/48"] ~ .add-edit-more:before { content:".5"; }
  322.  
  323.  
  324. .data.title a[href^="/anime/ID"] ~ .add-edit-more:before { content:".5"; }
  325.  
  326.  
  327. .data.title a[href^="anime/ID"] ~ .add-edit-more:before { content:".5"; }
  328.  
  329.  
  330. .data.title a[href^="/anime/ID"] ~ .add-edit-more:before { content:".5"; }
  331.  
  332.  
  333.  
  334. /* DECIMAL SCORES SETTINGS
  335. Change the text color here.
  336. */
  337.  
  338. .data.title .add-edit-more:before {
  339. color: black;
  340.  
  341. position: absolute;
  342. top: 0px;
  343. left: 175px;
  344. display: block;
  345. width: 12px;
  346. height: 20px;
  347. font-weight: bold;
  348. font-size: 12px;
  349. pointer-events: none;
  350. }
  351.  
  352.  
  353.  
  354. /* SCORES TAG COLORS
  355. Change the color code after background to the one you want. Get color codes from this page:
  356. https://htmlcolorcodes.com/
  357.  
  358. The codes below are for each category's tag and decimal tag (you can make the decimals different tag colors).
  359. */
  360.  
  361.  
  362.  
  363. .list-table .list-table-data .data.status.reading ~ .data.score .link,
  364. .status.reading ~ .title .add-edit-more::before,
  365. .list-table .list-table-data .data.status.watching ~ .data.score .link,
  366. .status.watching ~ .title .add-edit-more::before {
  367. background: #cfe88d;
  368. }
  369.  
  370. .list-table .list-table-data .data.status.completed ~ .data.score .link,
  371. .status.completed ~ .title .add-edit-more::before {
  372. background: #ffff92;
  373. }
  374.  
  375. .list-table .list-table-data .data.status.onhold ~ .data.score .link,
  376. .status.onhold ~ .title .add-edit-more::before {
  377. background: #afb8e2;
  378. }
  379.  
  380. .list-table .list-table-data .data.status.dropped ~ .data.score .link,
  381. .status.dropped ~ .title .add-edit-more::before {
  382. background: #fc7671;
  383. }
  384.  
  385.  
  386.  
  387. /* LIST FONT COLORS
  388.  
  389. Change the color code after background to the one you want. Get color codes from this page:
  390. https://www.hexcolortool.com/
  391. */
  392.  
  393. body,
  394. .list-table .list-table-data .data.volume a,
  395. .list-table .list-table-data .data.progress,
  396. .list-table .list-table-data .data.chapter a,
  397. .list-table .list-table-data .data.studio,
  398. .list-table .list-table-data .data.licensor,
  399. .list-table .list-table-data .data.progress a,
  400. .list-table .list-table-data .data.magazine a,
  401. .list-table .list-table-data .data.studio a,
  402. .list-table .list-table-data .data.licensor a,
  403. .list-table .list-table-data .data.tags a,
  404. .list-table .list-table-data .tags .edit
  405. {
  406. color: black !important;
  407. }
  408.  
  409.  
  410. body
  411. {
  412. font: 300 11px Open Sans;
  413. }
  414.  
  415.  
  416. /* TEXT OUTSIDE COVERS*/
  417.  
  418. .list-table .list-table-data .data.season a,
  419. .list-table .list-table-data .data.season,
  420. .list-table .list-table-data .data a,
  421. .list-table .list-table-data .data.title a,
  422. .list-table .list-table-data .data.rated,
  423. .list-table .list-table-data .data.started,
  424. .list-table .list-table-data .data.finished,
  425. .list-table .list-table-data .data.airing-started,
  426. .list-table .list-table-data .data.airing-finished
  427. {
  428. color: black !important;
  429. }
  430.  
  431. .list-table .list-table-data .data.priority
  432. {
  433. color: white !important;
  434. }
  435. .list-table .list-table-data:hover .data .add a,
  436. .list-table .list-table-data:hover .data .edit a
  437. {
  438. color: black !important;
  439. text-decoration: none;
  440. }
  441.  
  442. .list-table .list-table-data:hover .data.season a{
  443. color: black !important;
  444. }
  445.  
  446.  
  447.  
  448. .list-table .list-table-data .data.title .notes .text {
  449. color: white !important;
  450. }
  451.  
  452. .list-table .list-table-data:hover .data.title .notes .text{
  453. color: black !important;
  454. }
  455.  
  456. .list-table .list-table-data:hover .data.title .notes .edit{
  457. color: white !important;
  458. }
  459.  
  460. .list-table .list-table-data .data.storage{
  461. color: white !important;
  462. }
  463.  
  464.  
  465.  
  466. /* ANIME TITLE */
  467. .list-table .list-table-data .data.title .link{
  468. color: #333 !important;
  469. }
  470.  
  471. /* LINKS ON HOVER*/
  472. .list-table .list-table-data .data a:not(.edit-disabled):hover{
  473. color: !important;
  474. }
  475.  
  476.  
  477.  
  478. /* PAGE BOTTOM TEXT*/
  479.  
  480. .list-unit .list-stats{
  481. color: #777 !important;
  482. }
  483.  
  484. #copyright{
  485. color: #777 !important;
  486. }
  487.  
  488. .list-unit .list-stats {
  489. background-color: #243E84 !important;
  490. color: white !important;
  491. }
  492.  
  493. /* COVER OVERLAY
  494. Normally, its white with sligth transparency, but you can change it here.
  495. Change the color code after background to the RGBA colors you want. Get new RGBA codes with an RGBA CSS generator:
  496. https://www.hexcolortool.com/
  497. */
  498. .list-table .list-table-data:hover .data.title {
  499. background: rgba(255,255,255,0.8);
  500. outline: 3px solid white;
  501. }
  502.  
  503.  
  504. /* FOOTER */
  505. #footer-block {
  506. background: transparent !important;
  507. margin-top: 20px;
  508. }
  509.  
  510.  
  511. /* OTHER CODES*/
  512.  
  513.  
  514.  
  515.  
  516. .list-table .list-table-data:hover .data .edit a{
  517. font-size: 11px;
  518. color: ;
  519. }
  520. *:not(a:hover):not(input) {
  521. cursor: default;
  522. }
  523. a:link, a:active, a:visited {
  524. color: black;
  525. }
  526. .header .header-title, .header .header-menu .btn-menu, #header-menu-dropdown svg,[data-work="anime"] .icon-menu.anime-list, [data-work="manga"] .icon-menu.manga-list,[data-owner=""] .list-menu-float,.list-menu-float .icon-menu.setting, form[action],.list-menu-float .icon-menu .text,.list-unit .list-status-title .text, .list-table .list-table-header .header-title.status,.list-table .list-table-data .data.status, .list-table .list-table-data .data.status.plantowatch ~ .data.score, .cover-block,i.fa:not([class*=sort]):not([class$=circle]), .icon-watch.ml4{
  527. display: none;
  528. }
  529. .header {
  530. width: 100%;
  531. height: 480px;
  532. }
  533. .header .header-menu.other {
  534. position: static;
  535. color: #999;
  536. text-align: left;
  537. text-transform: uppercase;
  538. }
  539. .header .header-menu.other .btn-menu {
  540. font: 700 25px Open Sans;
  541. color: #999;
  542. display: inline-block;
  543. overflow: hidden;
  544. text-indent: -116px;
  545. position: relative;
  546. top: 13px;
  547. left: 18px;
  548. }
  549. .header .header-menu .header-info {
  550. position: absolute;
  551. top: 17px;
  552. right: 257px;
  553. font-size: 0;
  554. }
  555. .header .username {
  556. font-weight: 700;
  557. }
  558. .header a, #header-menu-dropdown a {
  559. width: auto;
  560. height: auto;
  561. font-weight: 400;
  562. color: #999 !important;
  563. transition: none;
  564. }
  565. .header .header-menu .header-info a, #header-menu-dropdown a {
  566. font-size: 11px;
  567. margin: 0 15px;
  568. }
  569. .header .header-menu .header-info a:hover, #header-menu-dropdown a:hover {
  570. background: none;
  571. text-decoration: none;
  572. }
  573. #header-menu-dropdown {
  574. display: block!important;
  575. top: 23px;
  576. right: 182px;
  577. background: none;
  578. border: 0;
  579. box-shadow: none;
  580. }
  581. .list-menu-float {
  582. position: absolute;
  583. top: 23px;
  584. right: 185px;
  585. width: auto;
  586. border: 0;
  587. }
  588. .list-menu-float .icon-menu {
  589. display: inline-block;
  590. width: 16px;
  591. height: 16px;
  592. background: none !important;
  593. margin: 0 5px;
  594. }
  595. .list-menu-float .icon-menu svg.icon {
  596. position: static;
  597. width: 16px;
  598. height: 16px;
  599. fill: #aaa;
  600. }
  601. .list-menu-float .icon-menu:hover svg.icon, .header .header-menu .list-menu .icon-menu .text {
  602. position: static;
  603. fill: #ef8577;
  604. }
  605. .list-menu-float .icon-menu:not(.profile):hover {
  606. width: auto;
  607. background: none;
  608. }
  609. .list-menu-float .icon-menu.profile {
  610. background: none !important;
  611. }
  612. .list-menu-float .icon-menu.profile:before {
  613. content: '\f007';
  614. font: 16px FontAwesome;
  615. color: #aaa;
  616. line-height: 15px;
  617. position: absolute;
  618. right: 2px;
  619. }
  620. .list-menu-float .icon-menu.profile:hover:before {
  621. color: #ef8577;
  622. }
  623. .list-container {
  624. background: none !important;
  625. width: 100%;
  626. border: 0;
  627. }
  628. #status-menu, .status-menu-container.fixed {
  629. width: 100%;
  630. height: auto;
  631. border: 0;
  632. position: static;
  633. }
  634. #status-menu .status-menu {
  635. width: 100%;
  636. border-spacing: 0;
  637. text-align: center;
  638. }
  639. #status-menu .status-menu:before {
  640. content: '';
  641. display: inline-block;
  642. width: 90px;
  643. height: 90px;
  644. border-radius: 50%;
  645. position: absolute;
  646. margin-top: -20px;
  647. }
  648. #status-menu .status-button {
  649. display: inline-block;
  650. font: 300 13px Open Sans;
  651. color: white;
  652. letter-spacing: 1px;
  653. text-transform: uppercase;
  654. padding: 15px 20px;
  655. }
  656. #status-menu .status-button:first-child {
  657. margin-left: 100px;
  658. }
  659. #header-menu-button, #status-menu .status-button.on {
  660. cursor: default;
  661. font-weight: 700;
  662. text-decoration: none;
  663. }
  664. #status-menu .status-button::after {
  665. background: none;
  666. }
  667. #status-menu .status-button.on::after {
  668. background: none;
  669. left: calc(50% - 20px);
  670. bottom: -19px;
  671. width: 0;
  672. height: 0;
  673. border-left: 20px solid transparent;
  674. border-right: 20px solid transparent;
  675. }
  676. #status-menu .search-container {
  677. top: -475px;
  678. right: 20px;
  679. }
  680. #status-menu #search-box {
  681. width: 150px;
  682. height: auto;
  683. }
  684. #search-box input {
  685. background: white 3px 50%/20px no-repeat url(https://image.myanimelist.net/ui/ueQLRyZL_yQZxD14iYLZC_gLr-mtem_jVqxnLpUY6LHlp_sr_ZwRrhNpbh7nV5sCeo7Sp3-sdxOAu1kTqLeHfW7i3YHTvUNvkDS5qKJPeIQyZ4XG2BGDzLdXX1QvKlrJ);
  686. font: 300 11px Open Sans;
  687. color: #999;
  688. padding: 4px 12px 6px 25px;
  689. border: 1px solid #ddd;
  690. border-radius: 10px;
  691. }
  692. .list-block, .status-menu-container.fixed + div.list-block {
  693. margin-top: 30px;
  694. min-height: 0;
  695. }
  696. .list-unit {
  697. width: 80%;
  698. }
  699. .list-unit .list-status-title {
  700. display: inline-block;
  701. width: calc(100% - 30px);
  702. height: 0;
  703. background: none;
  704. text-align: right;
  705. margin: auto;
  706. }
  707. .list-unit .list-status-title .stats {
  708. height: 0;
  709. line-height: 100%;
  710. top: 128px !important;
  711. left: 900px !important;
  712. position: relative;
  713. color: black !important;
  714. }
  715. .list-unit .list-stats {
  716. position: absolute;
  717. display: block;
  718. bottom: 0px;
  719. width: 80%;
  720. height: auto;
  721. background: none;
  722. font: normal 11px Open Sans;
  723. color: #777;
  724. text-transform: uppercase;
  725. }
  726. .list-table .list-table-header .header-title .link.sort {
  727. font-weight: normal;
  728. color: #999;
  729. text-transform: uppercase;
  730. padding: 4px 6px;
  731. z-index: 1;
  732. }
  733. .list-table > tbody:nth-of-type(2n+1):first-of-type {
  734. display: block;
  735. Width: 100%;
  736. height: auto;
  737. margin: 20px;
  738. background: none;
  739. text-transform: uppercase;
  740. z-index: 3;
  741. }
  742. .list-table-header {
  743. display: inline-block;
  744. width: 100%;
  745. }
  746. .list-table-header:before {
  747. content: 'Sort by:';
  748. position: relative;
  749. top: 2px;
  750. margin-right: 12px;
  751. }
  752. .list-table .list-table-header .header-title {
  753. display: inline-block;
  754. width: auto !important;
  755. height: auto;
  756. background: none;
  757. border: 0;
  758. padding: 0 !important;
  759. margin: 0 15px;
  760. }
  761. .list-table .list-table-header .header-title .link.sort:hover, #advanced-options-button:hover {
  762. color: #999;
  763. }
  764. .list-table .list-table-header .header-title .sort-icon {
  765. color: rgba(239,133,119,.65);
  766. font-size: 18px;
  767. position: relative;
  768. line-height: 0;
  769. }
  770. .fa-sort-asc {
  771. top: 6px;
  772. }
  773. .fa-sort-desc {
  774. top: -2px;
  775. }
  776. .fa-plus-circle::before {
  777. content: '+' !important;
  778. margin-left: 1px;
  779. }
  780. .list-table {
  781. border: 0;
  782. text-align: center;
  783. }
  784. .list-item, .list-table > tbody:nth-of-type(2n+1):not(:first-child) {
  785. width: 200px;
  786. height: 290px;
  787. display: inline-block;
  788. background: none;
  789. margin: 15px;
  790. }
  791. .list-table .list-table-data .data {
  792. position: absolute;
  793. width: 200px;
  794. height: 280px;
  795. border: 0;
  796. padding: 0;
  797. }
  798. .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{
  799. opacity: 0;
  800. }
  801. .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{
  802. opacity: 1;
  803. visibility: visible !important;
  804. }
  805. .list-table .list-table-data .data.title {
  806. letter-spacing: 0;
  807. padding: 0;
  808. }
  809. .list-table .list-table-data .data.title .link {
  810. position: absolute;
  811. left: 13px;
  812. bottom: 43px;
  813. width: 160px;
  814. z-index: 51 !important;
  815. opacity: 0;
  816. font-size: 20px;
  817. line-height: 22px;
  818. text-transform: upper;
  819. }
  820. .list-table .list-table-data .data.score {
  821. text-align: right;
  822. z-index: ;
  823. }
  824. .list-table .list-table-data .data.score .link {
  825. font-weight: 700;
  826. text-align: right!important;
  827. margin-right: 10px;
  828. padding: 4px 6px;
  829. word-spacing: -3px;
  830. }
  831. .list-table .list-table-data .data.score .link:after {
  832. content: ;
  833. }
  834. .progress div:before {
  835. content: 'Progress: ';
  836. position: absolute;
  837. font-size: 12px;
  838. margin-top: -15px;
  839. margin-left: 0px;
  840. padding-right:5px;
  841. }
  842. .list-table .list-table-data .data.progress {
  843. width: auto;
  844. position: absolute;
  845. height: auto;
  846. margin-top: 255px;
  847. margin-left: 13px;
  848. font: italic 18px Open Sans;
  849. word-spacing: -3px;
  850. opacity: 0;
  851. }
  852. .data.chapter div:before {
  853. content: 'Chapters: ';
  854. position: absolute;
  855. font-size: 12px;
  856. margin-top: -15px;
  857. margin-left: 0px;
  858. padding-right:5px;
  859. }
  860. .list-table .list-table-data .data.chapter{
  861. position: absolute;
  862. margin-top: 244px;
  863. margin-left: 5px;
  864. width: auto;
  865. position: absolute;
  866. height: auto;
  867. margin-top: 255px;
  868. font: italic 18px Open Sans;
  869. word-spacing: -3px;
  870. opacity: 0;
  871. }
  872. .data.volume div:before {
  873. content: 'Volumes: ';
  874. position: absolute;
  875. font-size: 12px;
  876. margin-top: -15px;
  877. margin-left: 0px;
  878. padding-right:5px;
  879. }
  880. .list-table .list-table-data .data.volume{
  881. position: absolute;
  882. margin-top: 255px;
  883. margin-left: 65px;
  884. width: auto;
  885. position: absolute;
  886. height: auto;
  887. font: italic 18px Open Sans;
  888. word-spacing: 0px;
  889. opacity: 0;
  890. }
  891. .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 {
  892. position: absolute;
  893. top: 2px;
  894. left: 20px;
  895. font: 600 9px Open Sans;
  896. color: #444;
  897. border: 1px solid #555;
  898. padding: 2px 4px;
  899. opacity: 0;
  900. text-transform: uppercase;
  901. }
  902. .list-table .list-table-data .data.title .add-edit-more {
  903. font-size: 0;
  904. float: none;
  905. z-index: 5;
  906. position: relative;
  907. top: 0;
  908. left: 5px;
  909. }
  910. .list-table .list-table-data .data.image a {
  911. width: 200px;
  912. height: 280px;
  913. background-size: contain;
  914. background-position: center;
  915. background-repeat: no-repeat;
  916. }
  917. .list-table .list-table-data .data a, .list-table .list-table-data a.edit-disabled {
  918. color: black !important;
  919. }
  920. #copyright {
  921. font: 400 8px Open Sans;
  922. letter-spacing: 1px;
  923. color: #777;
  924. text-transform: uppercase;
  925. }
  926. .list-table .list-table-data .data.score .link:after {
  927. content: ".0"
  928. }
  929. .list-table .list-table-data .data.tags{
  930. margin-top: 60px;
  931. visibility: hidden;
  932. width: 180px;
  933. padding-left: 10px;
  934. }
  935. .list-table .list-table-data .data.tags a{
  936. position: relative;
  937. z-index: 10000 !important;
  938. }
  939. .list-table .list-table-data .data.studio a{
  940. top: 0px !important;
  941. left: 0px;
  942. position: relative;
  943. }
  944. .list-table .list-table-data .data.studio{
  945. position: absolute;
  946. height: 10px !important;
  947. }
  948. .list-table .list-table-data .data.priority {
  949. margin-top: -20px;
  950. }
  951. .list-table .list-table-data .data.priority:after {
  952. content: " Priority";
  953. }
  954. .list-table .list-table-data:hover .data.priority {
  955. opacity: 0;
  956. }
  957. .list-table .list-table-data .data.studio {
  958. position: absolute !important;
  959. height: 10px !important;
  960. margin-top: 18px;
  961. margin-left: 0;
  962. z-index: 10000 !important;
  963. }
  964. .list-table .list-table-data .data.licensor,.list-table .list-table-data .data.magazine{
  965. position: absolute;
  966. height: 10px !important;
  967. margin-top: 40px;
  968. margin-left: 0px;
  969. text-align: center;
  970. z-index: 10000 !important;
  971. }
  972. .list-table .list-table-data .data.storage{
  973. position: absolute;
  974. margin-top: -35px;
  975. margin-left: -65px;
  976. }
  977. .list-table .list-table-data .data.number {
  978. margin-left: -92px;
  979. position: absolute;
  980. margin-top: 0px;
  981. opacity: 0;
  982. z-index: 100 !important;
  983. pointer-events: none !important;
  984. }
  985. .list-table .list-table-data:hover .data.number {
  986. opacity: 1 !important;
  987. }
  988. .list-table .list-table-data .data.title .content-status{
  989. margin-left: 50px;
  990. }
  991. .list-table .rereading{
  992. margin-left: 50px;
  993. }
  994. .list-table .list-table-data:hover .data .edit a{
  995. background: transparent;
  996. content:"";
  997. height: 240px;
  998. width: 100%;
  999. left:0;
  1000. top:0;
  1001. position: absolute;
  1002. display: block;
  1003. z-index: 50 !important;
  1004. }
  1005. .list-table .list-table-data .data.title .add-edit-more{
  1006. margin-left: -7px;
  1007. }
  1008. .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{
  1009. cursor: pointer;
  1010. }
  1011. .list-container a.List_LightBox:link{
  1012. width: 220px !important;
  1013. height: 310px !important;
  1014. padding-right: 0px;
  1015. padding-bottom: 00px;
  1016. top: -20px !important;
  1017. position: absolute;
  1018. font-size: 12px;
  1019. }
  1020. .list-table .list-table-data .tags .edit{
  1021. position: relative !important;
  1022. margin-left: -5px;
  1023. pointer-events: auto !important;
  1024. padding: 5px;
  1025. }
  1026. .list-table .list-table-data .tags .edit:after{
  1027. content: " Tags"
  1028. }
  1029. .list-table .list-table-data .data.progress .fa{
  1030. font-size: 22px !important;
  1031. position: absolute;
  1032. z-index: 1000 !important;
  1033. padding: 10px;
  1034. top: -10px;
  1035. margin-left: -5px;
  1036. }
  1037. .list-table .list-table-data .data.chapter .fa,.list-table .list-table-data .data.volume .fa{
  1038. font-size: 22px !important;
  1039. position: absolute;
  1040. z-index: 1000 !important;
  1041. padding: 2px;
  1042. top: -3px;
  1043. margin-left: 2px;
  1044. }
  1045. .fa:hover{
  1046. }
  1047. .list-table .list-table-data .data.chapter span,.list-table .list-table-data .data.volume span,.list-table .list-table-data .data.progress span{
  1048. z-index: 1000 !important;
  1049. position: relative !important;
  1050. }
  1051. .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{
  1052. position: absolute;
  1053. content: "";
  1054. left: -20px;
  1055. top: -0px;
  1056. padding: 10px;
  1057. }
  1058. .list-table .list-table-data .data.progress .fa:hover,.list-table .list-table-data .data.chapter .fa:hover,.list-table .list-table-data .data.volume .fa:hover{
  1059. color: blue;
  1060. text-decoration: underline;
  1061. }
  1062. .list-table .list-table-header .header-title.number,.list-table .list-table-header .header-title.image,.list-table .list-table-header .header-title.tags,.list-table .list-table-header .header-title.days,.list-table .list-table-header .header-title.storage,.list-table .list-table-header .header-title.studio,.list-table .list-table-header .header-title.licensor,.list-table .list-table-header .header-title.started{
  1063. display: none;
  1064. }
  1065. #recaptcha-terms {
  1066. display: none;
  1067. }
  1068. .status-menu-container.fixed {
  1069. position: fixed !important;
  1070. display: block !important;
  1071. top: 0 !important;
  1072. z-index: 10 !important;
  1073. }
  1074. .status-menu-container.fixed .status-menu:before{
  1075. display: none !important;
  1076. }
  1077. .status-menu-container,.status-menu:before{
  1078. z-index: 10 !important;
  1079. }
  1080. .header .header-menu .header-info,.list-menu-float,#header-menu-dropdown,.header .header-menu.other .btn-menu,#status-menu .search-container {
  1081. z-index: 100 !important;
  1082. }
  1083. .list-table .list-table-data .data.licensor a,.list-table .list-table-data .data.magazine a,.list-table .list-table-data .data.studio a,.list-table .list-table-data .data.licensor,.list-table .list-table-data .data.magazine,.list-table .list-table-data .data.studio,.list-table .list-table-data .data.title .link,.list-table .list-table-data .data.tags a,.list-table .list-table-data .data a,.list-table .list-table-data a.edit-disabled{
  1084. z-index: 6 !important;
  1085. }
  1086. .list-table .list-table-data .data.title .add-edit-more{
  1087. margin-left: -5px;
  1088. }
  1089. .list-unit .list-status-title .stats{
  1090. z-index: 5 !important;
  1091. position: absolute;
  1092. left: 0%;
  1093. right: 0%;
  1094. margin: 0 auto;
  1095. width: 100px !important;
  1096. margin-top: -102px;
  1097. left: 940px !important;
  1098. z-index: 6 !important;
  1099. }
  1100. .list-unit .list-stats {
  1101. display: none;
  1102. width: 1024px;
  1103. height: 30px;
  1104. line-height: 30px;
  1105. text-align: center;
  1106. position: fixed;
  1107. bottom: 0;
  1108. left: 0;
  1109. right: 0;
  1110. margin: auto;
  1111. z-index: 2000 !important;
  1112. }
  1113. body {
  1114. overflow-x: hidden;
  1115. /* Hide horizontal scrollbar */
  1116. }
  1117. #qc-cmp2-container,.qc-cmp-button,.qc-cmp-ui,.qc-cmp-ui .qc-cmp-main-messaging,.qc-cmp-ui .qc-cmp-messaging,.qc-cmp-ui .qc-cmp-beta-messaging,.qc-cmp-ui .qc-cmp-title,.qc-cmp-ui .qc-cmp-sub-title,.qc-cmp-ui .qc-cmp-purpose-info,.qc-cmp-ui .qc-cmp-table,.qc-cmp-ui .qc-cmp-table-header,.qc-cmp-ui .qc-cmp-vendor-list,.qc-cmp-ui .qc-cmp-vendor-list-title,.qc-cmp-publisher-purposes-table .qc-cmp-table-header,.qc-cmp-publisher-purposes-table .qc-cmp-table-row,.qc-cmp-button.qc-cmp-secondary-button,#qc-cmp2-container *{
  1118. display: none !important;
  1119. pointer-events: none !important;
  1120. visibility: hidden !important;
  1121. opacity: 0 !important;
  1122. }
  1123. .list-table .list-table-data .data.storage {
  1124. position: absolute;
  1125. margin-top: 235px;
  1126. margin-left: 10px;
  1127. }
  1128. .list-table .list-table-data .data.title .content-status,.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 {
  1129. margin: 0 auto;
  1130. position: absolute;
  1131. left: 0px;
  1132. right: 0px;
  1133. width: 80px;
  1134. text-align: center;
  1135. }
  1136. .list-table .list-table-data .data.chapter * {
  1137. font-size: 14px;
  1138. }
  1139. .list-table .list-table-data .data.volume * {
  1140. font-size: 14px;
  1141. }
  1142. .list-table .list-table-data .data.volume {
  1143. margin-left: 85px;
  1144. }
  1145. .list-table .list-table-data .data.retail{
  1146. margin-top: 23px;
  1147. }
  1148. .list-table .list-table-data .data.retail{
  1149. opacity: 0;
  1150. }
  1151. .list-table .list-table-data:hover .data.retail{
  1152. opacity: 1;
  1153. }
  1154. .list-table .list-table-data .data.retail:after{
  1155. content: "copies owned";
  1156. }
  1157. .list-table .list-table-header .header-title.magazine,.list-table .list-table-header .header-title.retail{
  1158. display: none;
  1159. }
  1160. .list-table .list-table-data .data.title .content-status,.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 {
  1161. top: 0;
  1162. }
  1163. .list-table .list-table-data .studio{
  1164. margin-top: 24px !important;
  1165. }
  1166. .list-table .list-table-data .data.licensor,.list-table .list-table-data .data.magazine{
  1167. margin-top: 44px !important;
  1168. }
  1169. .list-table .list-table-data .data.tags{
  1170. margin-top: 68px !important;
  1171. }
  1172. .list-table .list-table-data .data.studio span,.list-table .list-table-data .data.licensor ,.list-table .list-table-data .data.magazine{
  1173. height: 20px !important;
  1174. overflow:hidden;
  1175. white-space:initial;
  1176. }
  1177. .list-container a.List_LightBox:link{
  1178. text-decoration: none !important;
  1179. }
  1180. .list-table .list-table-data .data.score .link {
  1181. Z-INDEX: 1000 !important;
  1182. position: relative;
  1183. pointer-events: inherit;
  1184. }
  1185. /* NEW ADDITIONS*/
  1186. .list-table .list-table-data .data.genre span {
  1187. color: transparent;
  1188. }
  1189. .list-table .list-table-data .icon-watch2 a.mal-icon {
  1190. position: absolute !important;
  1191. top: 25px;
  1192. left: 168px;
  1193. z-index: 100 !important;
  1194. opacity: 0;
  1195. }
  1196. .list-table .list-table-data .icon-watch2 a.mal-icon:hover {
  1197. background: rgba(0,255,0,.5);
  1198. }
  1199. .list-table .list-table-data:hover .icon-watch2 a.mal-icon {
  1200. opacity: 1;
  1201. }
  1202. .data.title .add-edit-more:before {
  1203. margin-left: -1px;
  1204. padding-left: 0px;
  1205. }
  1206. .data.title .add-edit-more {
  1207. z-index: 10000 !important;
  1208. }
  1209. .list-table .list-table-data:hover .data .edit a:hover{
  1210. text-decoration: underline !important;
  1211. }
  1212. .list-container a.List_LightBox:link{
  1213. width: 50px !Important;
  1214. height: 25px !important;
  1215. margin-left: 85px !important;
  1216. }
  1217. #fancybox-overlay,#fancybox-wrap {
  1218. z-index: ;
  1219. }
  1220. .list-table .list-table-data .icon-add-episode {
  1221. margin-left: 5px;
  1222. z-index: 1000 !important;
  1223. }
  1224. .list-table .list-table-data .icon-add-episode {
  1225. margin-left: 5px;
  1226. color: green !important;
  1227. z-index: 1000 !important;
  1228. cursor: pointer;
  1229. }
  1230. .list-table .list-table-data .icon-add-episode .fa-solid:hover {
  1231. text-decoration: underline;
  1232. z-index: 1000 !important;
  1233. cursor: pointer;
  1234. }
  1235. .list-table .list-table-data .data.tags,.list-table .list-table-data .data.days,.list-table .list-table-data .data.storage,.list-table .list-table-data .data.demographic{
  1236. height: 0;
  1237. }
  1238. .list-table .list-table-data .data.score:after{
  1239. }
  1240. .list-table .list-table-data .data.score:before{
  1241. }
  1242. .list-table .list-table-data .data.title .add-edit-more{
  1243. width: 0px;
  1244. margin-left: 35px;
  1245. background: red;
  1246. margin-top: 0px;
  1247. }
  1248. .data.title .add-edit-more:before {
  1249. margin-left: -41px;
  1250. }
  1251. .list-table .list-table-data:hover .data.demographic a,.list-table .list-table-data:hover .data.genre {
  1252. opacity: 1;
  1253. width: 105px !important;
  1254. font-size: 12px !important;
  1255. }
  1256. .list-table .list-table-data a[href*="&demographic"] a,.list-table .list-table-data .data.demographic a{
  1257. opacity: 0;
  1258. font-size: 0;
  1259. position: absolute !important;
  1260. width: 0px !important;
  1261. height: 20px !important;
  1262. text-align:left;
  1263. top: -12px !important;
  1264. left: 200px !Important;
  1265. padding-left: 5px;
  1266. background: #ffff92;
  1267. }
  1268. .list-table .list-table-data .data.genre {
  1269. width:0 !important;
  1270. font-size: 0px !important;
  1271. opacity: 0;
  1272. }
  1273. .list-table .list-table-data:hover .data.genre {
  1274. width: 75px !important;
  1275. font-size: 12px !important;
  1276. opacity: 1;
  1277. height: 140px;
  1278. text-align: left;
  1279. margin-left: 200px !Important;
  1280. margin-top: 5px;
  1281. padding-left: 5px;
  1282. z-index: 100;
  1283. padding-right: 30px;
  1284. position: absolute;
  1285. background: #ffff92;
  1286. }
  1287. .list-table .list-table-data .data.genre a {
  1288. z-index: 100;
  1289. text-align: left !important;
  1290. display: inline;
  1291. padding-right: 15px;
  1292. }
  1293. .list-table .list-table-data .data.genre span {
  1294. text-align: left !important;
  1295. }
  1296. .list-table .list-table-data .data.season a{
  1297. }
  1298. .list-table .list-table-data .data.season span{
  1299. }
  1300. .list-table .list-table-data .data.genre {
  1301. width:0 !important;
  1302. font-size: 0px !important;
  1303. opacity: 0;
  1304. }
  1305. .list-table .list-table-data .data.season {
  1306. width:0 !important;
  1307. font-size: 0px !important;
  1308. opacity: 0;
  1309. height: 0 !important;
  1310. }
  1311. .list-table .list-table-data:hover .data.season{
  1312. opacity: 1 !important;
  1313. position: absolute !important;
  1314. width: 105px !important;
  1315. height: 20px !important;
  1316. text-align:left;
  1317. margin-top: 125px !important;
  1318. margin-left: 200px !Important;
  1319. padding-left: 5px;
  1320. background: #ffff92;
  1321. z-index: 2000 !important;
  1322. font-size: 12px !important;
  1323. }
  1324. .list-table .list-table-data .airing-started:before{
  1325. content: "Debuted: ";
  1326. }
  1327. .list-table .list-table-data .airing-finished:before{
  1328. content: "Ended: ";
  1329. }
  1330. .list-table .list-table-data .airing-started, .list-table .list-table-data .airing-finished{
  1331. width:0 !important;
  1332. font-size: 0px !important;
  1333. opacity: 0;
  1334. }
  1335. .list-table .list-table-data:hover .data.airing-started{
  1336. opacity: 1 !important;
  1337. position: absolute !important;
  1338. width: 105px !important;
  1339. height: 20px !important;
  1340. text-align:left;
  1341. margin-top: 145px !important;
  1342. margin-left: 200px !Important;
  1343. padding-left: 5px;
  1344. background: #ffff92;
  1345. z-index: 2000 !important;
  1346. font-size: 12px !important;
  1347. }
  1348. .list-table .list-table-data:hover .data.airing-finished{
  1349. opacity: 1 !important;
  1350. position: absolute !important;
  1351. width: 105px !important;
  1352. height: 20px !important;
  1353. text-align:left;
  1354. margin-top: 165px !important;
  1355. margin-left: 200px !Important;
  1356. padding-left: 5px;
  1357. background: #ffff92;
  1358. z-index: 2000 !important;
  1359. font-size: 12px !important;
  1360. }
  1361. .list-table .list-table-data .data.started, .list-table .list-table-data .data.finished{
  1362. width:0 !important;
  1363. font-size: 0px !important;
  1364. opacity: 0;
  1365. }
  1366. .list-table .list-table-data .data.started:before{
  1367. content: "Started: ";
  1368. }
  1369. .list-table .list-table-data .data.finished:before{
  1370. content: "Finished: "
  1371. }
  1372. .list-table .list-table-data:hover .data.started{
  1373. opacity: 1 !important;
  1374. position: absolute !important;
  1375. width: 105px !important;
  1376. height: 20px !important;
  1377. text-align:left;
  1378. margin-top: 185px !important;
  1379. margin-left:200px !Important;
  1380. padding-left: 5px;
  1381. background: #ffff92;
  1382. z-index: 2000 !important;
  1383. font-size: 12px !important;
  1384. }
  1385. .list-table .list-table-data:hover .data.finished {
  1386. opacity: 1 !important;
  1387. position: absolute !important;
  1388. width: 105px !important;
  1389. height: 20px !important;
  1390. text-align:left;
  1391. margin-top: 205px !important;
  1392. margin-left:200px !Important;
  1393. padding-left: 5px;
  1394. background: #ffff92;
  1395. z-index: 2000 !important;
  1396. font-size: 12px !important;
  1397. }
  1398. .list-table .list-table-data .data.days{
  1399. width:0 !important;
  1400. er font-size: 0px !important;
  1401. opacity: 0;
  1402. }
  1403. .list-table .list-table-data .data.days:after{
  1404. content: " days to finish"
  1405. }
  1406. .list-table .list-table-data:hover .data.days{
  1407. opacity: 1 !important;
  1408. position: absolute !important;
  1409. width: 105px !important;
  1410. height: 20px !important;
  1411. text-align:left;
  1412. margin-top: 225px !important;
  1413. margin-left: 200px !Important;
  1414. padding-left: 5px;
  1415. background: #ffff92;
  1416. z-index: 2000 !important;
  1417. font-size: 12px !important;
  1418. }
  1419. .list-table .list-table-data .score:before{
  1420. content:"1343";
  1421. font-size: 10px;
  1422. opacity: 0;
  1423. font-size: 11px;
  1424. text-align: left;
  1425. position: relative;
  1426. top:242px;
  1427. left: 121px;
  1428. display: inline;
  1429. display: non;
  1430. width: 100px;
  1431. overflow:visible;
  1432. }
  1433. .list-table .list-table-data .data.type , .list-table .list-table-data .data.rated {
  1434. content:"1343";
  1435. font-size: 10px;
  1436. opacity: 0;
  1437. font-size: 11px;
  1438. text-align: left;
  1439. position: relative;
  1440. top:242px;
  1441. left: 130px;
  1442. display: inline;
  1443. display: non;
  1444. width: 100px;
  1445. overflow:visible;
  1446. }
  1447. .list-table .list-table-data .data.rated{
  1448. padding-left: 5px;
  1449. }
  1450. .list-container a.List_LightBox:link {
  1451. width: 80px !Important;
  1452. height: 22px !important;
  1453. margin-top: 280px;
  1454. text-align: left !important;
  1455. font-size: 11px !important;
  1456. padding-bottom: 20px;
  1457. padding-left: 15px;
  1458. padding-right: 15px;
  1459. }
  1460. .list-container a.List_LightBox:link:after {
  1461. content: "";
  1462. }
  1463. .list-table .list-table-data .data.studio{
  1464. margin-top: 0px !important;
  1465. }
  1466. .list-table .list-table-data .data.licensor{
  1467. margin-top: 25px !important;
  1468. }
  1469. .list-table .list-table-data .data.tags{
  1470. margin-top: 50px !important;
  1471. }
  1472. .list-table .list-table-data .data.progress{
  1473. margin-top: 239px !important;
  1474. }
  1475. .list-table .list-table-header .header-title.genre, .list-table .list-table-header .header-title.demographic{
  1476. display: none;
  1477. }
  1478. .list-table .list-table-data .data.priority {
  1479. margin-top:-38px !important;
  1480. }
  1481. .list-table .list-table-data:hover .data.priority {
  1482. opacity: 1 !important;
  1483. ;
  1484. }
  1485. .list-table .list-table-header .header-title .link.sort {
  1486. z-index: 1;
  1487. }
  1488. .list-table > tbody:nth-of-type(2n+1):first-of-type {
  1489. z-index: 3;
  1490. }
  1491. .list-table .list-table-data .data.title .link {
  1492. z-index: 1 !important;
  1493. }
  1494. .data.title .add-edit-more {
  1495. z-index: 1005 !important;
  1496. }
  1497. .list-unit .list-status-title .stats a {
  1498. margin-right: 2px;
  1499. color: #FFF;
  1500. }
  1501. .status-menu-container .search-container #search-box input {
  1502. width: 80%;
  1503. margin-left: 30px;
  1504. }
  1505. #status-menu, .status-menu-container.fixed{
  1506. z-index: 1000 !important;
  1507. }
  1508. .list-table .list-table-data .icon-watch2 a.mal-icon {
  1509. z-index: 100 !important;
  1510. }
  1511. .list-table .list-table-data .data.studio{
  1512. z-index: 5 !important;
  1513. }
  1514. .list-table .list-table-data .data.genre a[href*="&genre=1"] {
  1515. padding-right:30px;
  1516. }
  1517. .list-table .list-table-data .data.genre a[href*="&genre=24"] {
  1518. padding-right:30px;
  1519. }
  1520. .list-table .list-table-data .data.genre a[href*="&genre=36"] {
  1521. padding-right:10px;
  1522. }
  1523. .list-table .list-table-data .data.genre a[href*="&genre=5"] {
  1524. padding-right:0px;
  1525. }
  1526. .list-table .list-table-data .data.priority{
  1527. pointer-events: none !important;
  1528. }
  1529. .list-table .list-table-data .data.title .add-edit-more {
  1530. width: 0px;
  1531. }
  1532. .list-table .list-table-data .data.score:after{
  1533. }
  1534. .list-table .list-table-data .data.storage {
  1535. }
  1536. .list-table .list-table-data .data.retail {
  1537. margin-top: 23px;
  1538. position: absolute;
  1539. }
  1540. .list-table .list-table-data .data.retail {
  1541. }
  1542. .list-table .list-table-data:hover .data.retail {
  1543. position: absolute;
  1544. margin-top: 270px;
  1545. margin-left: 10px;
  1546. pointer-events: none !important;
  1547. }
  1548. .list-table .list-table-data .data.magazine{
  1549. margin-top: 20px !important;
  1550. }
  1551. .list-table .list-table-data .data.volume {
  1552. margin-left:80px;
  1553. word-spacing: 0px;
  1554. }
  1555. .list-table .list-table-data .data.chapter {
  1556. margin-left:5px;
  1557. word-spacing: 0px;
  1558. }
  1559. .list-table .list-table-data .data.chapter * {
  1560. font-size: 12px;
  1561. }
  1562. .list-table .list-table-data .data.volume * {
  1563. font-size: 12px;
  1564. background: transparent;
  1565. }
  1566. .list-table .list-table-data .data.chapter .fa-circle-plus {
  1567. font-size: 16px;
  1568. }
  1569. .list-table .list-table-data .data.volume .fa-circle-plus {
  1570. font-size: 16px;
  1571. }
  1572. .list-table .list-table-data .data.chapter .fa-circle-plus:hover {
  1573. cursor: pointer;
  1574. text-decoration: underline;
  1575. }
  1576. .list-table .list-table-data .data.volume .fa-circle-plus:hover {
  1577. cursor: pointer;
  1578. text-decoration: underline;
  1579. }
  1580. .list-table .list-table-data .data.chapter {
  1581. font-size: 16px;
  1582. z-index: 10000 !important;
  1583. }
  1584. .list-table .list-table-data .data.volume {
  1585. font-size: 16px;
  1586. }
  1587. .list-table .list-table-data .data.chapter span, .list-table .list-table-data .data.volume span {
  1588. z-index: inherit !important;
  1589. }
  1590. .list-table .list-table-data .data.volume * {
  1591. background: transparent;
  1592. }
  1593. .list-table .list-table-data .data.chapter{
  1594. font-size:11px !important;
  1595. }
  1596. .list-table .list-table-data .data.chapter *{
  1597. font-size:11px !important;
  1598. }
  1599. .list-table .list-table-data .data.chapter span{
  1600. top: -12px;
  1601. left: 62px;
  1602. position: absolute;
  1603. word-spacing: -2px;
  1604. }
  1605. .data.chapter div::before {
  1606. content: 'Chapters: ';
  1607. position: absolute;
  1608. font-size:11px;
  1609. margin-top: -12px;
  1610. margin-left: 8px;
  1611. padding-right: 5px;
  1612. }
  1613. .list-table .list-table-data .data.chapter .fa-circle-plus {
  1614. font-size: 14px !important;
  1615. position: absolute;
  1616. margin-left: 64px;
  1617. margin-top: -11px;
  1618. padding-left: 3px;
  1619. }
  1620. .list-table .list-table-data .data.volume{
  1621. font-size: 11px !important;
  1622. }
  1623. .list-table .list-table-data .data.volume *{
  1624. font-size: 11px !important;
  1625. }
  1626. .list-table .list-table-data .data.volume span{
  1627. top: 8px;
  1628. left: -14px;
  1629. position: absolute;
  1630. word-spacing: -2px;
  1631. font-size: 11px !important;
  1632. }
  1633. .data.volume div::before {
  1634. content: 'Volumes: ';
  1635. position: absolute;
  1636. font-size: 11px !important;
  1637. margin-top: 8px;
  1638. margin-left: -66px;
  1639. padding-right: 5px;
  1640. }
  1641. .list-table .list-table-data .data.volume .fa-circle-plus {
  1642. font-size: 14px !important;
  1643. position: absolute;
  1644. margin-left:-12px;
  1645. margin-top: 9px;
  1646. padding-left: 3px;
  1647. }
  1648. .list-container a.List_LightBox:link {
  1649. width: 80px !Important;
  1650. height: 22px !important;
  1651. margin-top: 284px;
  1652. text-align: left !important;
  1653. font-size: 11px !important;
  1654. padding-bottom: 20px;
  1655. padding-left: 15px;
  1656. padding-right: 15px;
  1657. }
  1658. .list-container a.List_LightBox:link {
  1659. width: 50px !Important;
  1660. height: 25px !important;
  1661. margin-left: 75px !important;
  1662. font-family: Helvetica !important;
  1663. font-weight: light !important;
  1664. }
  1665. .fas, .fa-solid{
  1666. padding-bottom: 20px;
  1667. padding-left: 10px;
  1668. padding-right: 10px;
  1669. }
  1670. .list-table .list-table-data .data.progress a.link{
  1671. padding-bottom: 20px;
  1672. }
  1673. .list-table .list-table-data .data.progress a.link:after{
  1674. padding-bottom: 44px;
  1675. padding-left: 10px;
  1676. content: "";
  1677. position: absolute;
  1678. }
  1679. .list-table .list-table-data .data.progress a.link:before{
  1680. padding-bottom: 35px;
  1681. padding-left: 5px;
  1682. content: "";
  1683. position: absolute;
  1684. margin-left: 5px
  1685. }
  1686. .list-table .list-table-data .data.score:after{
  1687. content: "";
  1688. top: 250px;
  1689. left: -3px;
  1690. position: absolute;
  1691. height: 52px;
  1692. width: 210px !important;
  1693. }
  1694. .list-table .list-table-data .icon-watch2 a.mal-icon {
  1695. position: absolute !important;
  1696. top: 25px;
  1697. left: 168px;
  1698. z-index: 100 !important;
  1699. opacity: 0;
  1700. }
  1701. .list-table .list-table-data .data.progress .fa-circle-plus {
  1702. margin-left: -10px !important;
  1703. }
  1704. .list-unit .list-status-title .stats {
  1705. width: 200px !important;
  1706. }
  1707. .status-menu-container .search-container #search-box input {
  1708. width: 80%;
  1709. margin-left: 30px;
  1710. }
  1711. .list-table .list-table-data .data.chapter .fa-solid{
  1712. padding-bottom: 5px;
  1713. }
  1714. .list-table .list-table-data .icon-watch2 a.mal-icon {
  1715. left: 169px;
  1716. }
  1717. #status-menu #search-box {
  1718. width: 115px !important;
  1719. height: auto;
  1720. }
  1721. .status-menu-container .search-container #search-box input {
  1722. width: 100%;
  1723. margin-left: 0px;
  1724. }
  1725. .list-unit .list-stats {
  1726. z-index: 2000 !important;
  1727. }
  1728. #status-menu, .status-menu-container.fixed {
  1729. z-index: 2000 !important;
  1730. }
  1731. /* NUMBER */
  1732. .list-table .list-table-data .data.number{
  1733. font-size: 12px !important;
  1734. font-family: Helvetica !important;
  1735. font-weight: light !important;
  1736. }
  1737. /* TAGS */
  1738. .list-table .list-table-data .data.tags a {
  1739. font-size: 12px !important;
  1740. font-family: Helvetica !important;
  1741. font-weight: light !important;
  1742. }
  1743. .list-table .list-table-data .tags a.edit {
  1744. font-size: 9px !important;
  1745. font-family: Helvetica !important;
  1746. font-weight: light !important;
  1747. margin-top: -3px;
  1748. margin-left: 60px !;
  1749. }
  1750. /* USER STARTED AND ENDING DATES*/
  1751. .list-table .list-table-data .data.started{
  1752. font-size: 12px !important;
  1753. font-family: Helvetica !important;
  1754. font-weight: light !important;
  1755. }
  1756. .list-table .list-table-data .data.finished{
  1757. font-size: 12px !important;
  1758. font-family: Helvetica !important;
  1759. font-weight: light !important;
  1760. }
  1761. /* DAYS */
  1762. .list-table .list-table-data .data.days{
  1763. font-size: 12px !important;
  1764. font-family: Helvetica !important;
  1765. font-weight: light !important;
  1766. }
  1767. /* SEASON */
  1768. .list-table .list-table-data .data.season a{
  1769. font-size: 12px !important;
  1770. font-family: Helvetica !important;
  1771. font-weight: light !important;
  1772. }
  1773. /* AIRING START AND END DATES */
  1774. .list-table .list-table-data .data.airing-started{
  1775. font-size: 12px !important;
  1776. font-family: Helvetica !important;
  1777. font-weight: light !important;
  1778. }
  1779. .list-table .list-table-data .data.airing-finished{
  1780. font-size: 12px !important;
  1781. font-family: Helvetica !important;
  1782. font-weight: light !important;
  1783. }
  1784. /* STUDIO */
  1785. .list-table .list-table-data .data.studio a{
  1786. font-size: 12px !important;
  1787. font-family: Helvetica !important;
  1788. font-weight: light !important;
  1789. }
  1790. /* LICENSOR*/
  1791. .list-table .list-table-data .data.magazine a, .list-table .list-table-data .data.licensor a{
  1792. font-size: 12px !important;
  1793. font-family: Helvetica !important;
  1794. font-weight: light !important;
  1795. }
  1796. /* STORAGE */
  1797. .list-table .list-table-data .data.storage{
  1798. font-size: 12px !important;
  1799. font-family: Helvetica !important;
  1800. font-weight: light !important;
  1801. }
  1802. /* PRIORITY */
  1803. .list-table .list-table-data .data.priority {
  1804. font-size: 12px !important;
  1805. font-family: Helvetica !important;
  1806. font-weight: light !important;
  1807. }
  1808. .list-table .list-table-data .data.demographic{
  1809. font-size: 12px !important;
  1810. font-family: Helvetica !important;
  1811. font-weight: light !important;
  1812. }
  1813. .list-table .list-table-data .data.genre a{
  1814. font-size: 12px !important;
  1815. font-family: Helvetica !important;
  1816. font-weight: light !important;
  1817. }
  1818. .list-table .list-table-data .data.rated{
  1819. font-size: 12px !important;
  1820. font-family: Helvetica !important;
  1821. font-weight: light !important;
  1822. }
  1823. .list-table .list-table-data .data.type{
  1824. font-size: 12px !important;
  1825. font-family: Helvetica !important;
  1826. font-weight: light !important;
  1827. }
  1828. .list-table .list-table-data .data.image .image{
  1829. width: 175px;
  1830. height: 270px;
  1831. background-size: 100% !important;
  1832. z-index: -1 !important;
  1833. left: 10px;
  1834. top: 5px;
  1835. }
  1836. .list-table .list-table-data .data.image .image{
  1837. position: absolute !important;
  1838. z-index: -1 !important;
  1839. }
  1840. .list-table .list-table-data .data.title .notes .text {
  1841. top: 280px;
  1842. left: 0px;
  1843. position: absolute;
  1844. font-size: 12px;
  1845. color: white;
  1846. background: transparent;
  1847. font-family: arial;
  1848. z-index: 1000 !important;
  1849. overflow: hidden;
  1850. text-align: center;
  1851. width: 190px;
  1852. height: 15px;
  1853. z-index: 100 !important;
  1854. }
  1855. .list-table .list-table-data:hover .data.title .notes .text:first-line{
  1856. top: -200px;
  1857. display: block;
  1858. }
  1859. .list-table .list-table-data:hover .data.title .notes .text{
  1860. position: absolute;
  1861. font-size: 11px;
  1862. color: black;
  1863. background: #FFFF92;
  1864. font-family: arial;
  1865. z-index: 1005 !important;
  1866. overflow: none;
  1867. transition: ease-in;
  1868. cursor: text;
  1869. overflow: initial !important;
  1870. height: auto;
  1871. width: 186px;
  1872. overflow: hidden !important;
  1873. max-width: 190px;
  1874. max-height: 325px;
  1875. top: 280px;
  1876. padding-left: 10px;
  1877. padding-right: 10px;
  1878. left: -3px;
  1879. }
  1880. .list-table .list-table-data .data.title .notes .text:hover {
  1881. }
  1882. .list-table .list-table-data .data.score .link {
  1883. Z-INDEX: 100 !important;
  1884. }
  1885. .list-table .list-table-data .data.title .notes * {
  1886. top: 280px;
  1887. left: 0px;
  1888. position: absolute;
  1889. height: 50px;
  1890. z-index: 50000 !important;
  1891. }
  1892. .list-table .list-table-data .data.title .notes .edit{
  1893. top: 280px;
  1894. text-align: center;
  1895. width: 205px;
  1896. padding-top: 2px;
  1897. height: 20px;
  1898. position: absolute;
  1899. z-index: 50000 !important;
  1900. }
  1901. .list-table .list-table-data .data.title .notes .edit{
  1902. color: transparent;
  1903. }
  1904. .list-table .list-table-data:hover .data.title .notes .edit{
  1905. color: white;
  1906. cursor:pointer;
  1907. }
  1908. .mal-modal .mal-modal-dialog .mal-modal-content {
  1909. font-size: 24px;
  1910. font-family: arial;
  1911. z-index: 10000 !important;
  1912. }
  1913. .list-table .list-table-data .data.storage {
  1914. position: absolute;
  1915. font-size: 10px !important;
  1916. margin-top: -36px;
  1917. margin-left: -79px;
  1918. }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!