Advertisement
argui

mymal theme by Shishio-kun

Jul 7th, 2023 (edited)
955
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 25.26 KB | None | 0 0
  1. @\import "https://dl.dropboxusercontent.com/s/ed2g365i8phd180/aceface.css";
  2. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkafter";
  3.  
  4. /* BACKGROUND */
  5.  
  6. body {
  7. visibility: visible;
  8. background-color: #F1EBDF;
  9. }
  10.  
  11.  
  12. /* HEADER */
  13.  
  14. .header {
  15. visibility: visible;
  16. }
  17.  
  18. .header .header-menu {
  19. visibility: visible;
  20. background: green;
  21. }
  22.  
  23. .header .header-title {
  24. visibility: visible;
  25. }
  26.  
  27. /* SIDE MENU */
  28.  
  29. .list-menu-float {
  30. visibility: visible;
  31. }
  32.  
  33. .list-menu-float .icon-menu {
  34. visibility: visible;
  35. }
  36.  
  37. .list-menu-float .icon-menu.anime-list {
  38. visibility: visible;
  39. }
  40.  
  41. /* LIST CONTAINER */
  42.  
  43. #list-container {
  44. visibility: visible;
  45. }
  46.  
  47. /* IMAGE BLOCK */
  48.  
  49. .cover-block {
  50. visibility: visible;
  51. }
  52.  
  53. .cover-block #cover-image {
  54. /* Cover image */
  55. visibility: visible;
  56. }
  57.  
  58. .cover-block .image-container .btn-list-setting {
  59. visibility: visible;
  60. }
  61.  
  62. /* STATUS MENU */
  63.  
  64. #status-menu {
  65. visibility: visible;
  66. }
  67.  
  68. #status-menu .status-button {
  69. visibility: visible;
  70. }
  71.  
  72. #status-menu .status-button.watching {
  73. visibility: visible;
  74. }
  75.  
  76. /* SEARCH */
  77.  
  78. .status-menu-container .search-container {
  79. visibility: visible;
  80. }
  81.  
  82. /* LIST UNIT */
  83.  
  84. .list-unit {
  85. visibility: visible;
  86. }
  87.  
  88. /* STATUS TITLE */
  89.  
  90. .list-unit .list-status-title {
  91. visibility: visible;
  92. }
  93.  
  94. /* STATS */
  95.  
  96. #show-stats-button {
  97. visibility: visible;
  98. }
  99.  
  100. #advanced-options-button {
  101. visibility: visible;
  102. }
  103.  
  104. .list-unit .list-stats {
  105. visibility: visible;
  106. }
  107.  
  108. /* LIST TABLE */
  109.  
  110. /* Sort row */
  111.  
  112. .list-table .list-table-header {
  113. visibility: visible;
  114. }
  115.  
  116. .list-table .list-table-header .header-title {
  117. visibility: visible;
  118. position: fixed;
  119. left: -10%;
  120. }
  121.  
  122. .list-table .list-table-header .header-title.title {
  123. visibility: visible;
  124. }
  125.  
  126. /* Data rows */
  127.  
  128. .list-table tbody.list-item {
  129. visibility: visible;
  130. }
  131.  
  132. .list-table .list-table-data .data {
  133. visibility: visible;
  134. }
  135.  
  136. .list-table .list-table-data .data.score {
  137. visibility: visible;
  138. }
  139.  
  140. .list-table .list-table-data .data.title .link {
  141. visibility: visible;
  142. }
  143.  
  144. .add-edit-more {
  145. visibility: visible;
  146. }
  147.  
  148. /* LOADING SPACE */
  149.  
  150. .list-unit .loading-space {
  151. visibility: visible;
  152. }
  153.  
  154. /* FOOTER */
  155.  
  156. footer {
  157. visibility: visible;
  158. }
  159.  
  160.  
  161. /* MORE SEPARATION FOR INSPECT ELEMENT USERS */
  162. .list-table .list-table-header .header-title.image {
  163. visibility: visible;
  164. }
  165.  
  166. .list-table .list-table-header .header-title.number {
  167. visibility: visible;
  168. }
  169.  
  170. .list-table .list-table-header .header-title.score {
  171. visibility: visible;
  172. }
  173.  
  174. .list-table .list-table-header .header-title.type{
  175. visibility: visible;
  176. }
  177.  
  178. .list-table .list-table-header .header-title.progress{
  179. visibility: visible;
  180. }
  181.  
  182. .list-table .list-table-header .header-title.tags{
  183. visibility: visible;
  184. }
  185.  
  186. .list-table .list-table-header .header-title.rated{
  187. visibility: visible;
  188. }
  189.  
  190. .list-table .list-table-header .header-title.started{
  191. visibility: visible;
  192. }
  193.  
  194.  
  195.  
  196. .list-table .list-table-header .header-title.finished{
  197. visibility: visible;
  198. }
  199.  
  200.  
  201. .list-table .list-table-header .header-title.days{
  202. visibility: visible;
  203. }
  204.  
  205.  
  206. .list-table .list-table-header .header-title.storage{
  207. visibility: visible;
  208. }
  209.  
  210.  
  211. .list-table .list-table-header .header-title.priority{
  212. visibility: visible;
  213. }
  214.  
  215. .list-table .list-table-data .data.number{
  216. visibility: visible;
  217. }
  218.  
  219. .list-table .list-table-data .data.title{
  220. visibility: visible;
  221. }
  222.  
  223. .list-table .list-table-data .data.type{
  224. visibility: visible;
  225. }
  226.  
  227. .list-table .list-table-data .data.progress{
  228. visibility: visible;
  229. }
  230.  
  231. .list-table .list-table-data .data.rated{
  232. visibility: visible;
  233. }
  234.  
  235. .list-table .list-table-data .data.storage{
  236. visibility: visible;
  237. }
  238.  
  239. .list-table .list-table-data .data.licensor{
  240. visibility: visible;
  241. }
  242.  
  243. .list-table .list-table-data .data.studio{
  244. visibility: visible;
  245. }
  246.  
  247. .list-table .list-table-data .data.title.clearfix{
  248. visibility: visible;
  249. }
  250.  
  251. #status-menu .status-button.completed{
  252. visibility: visible;
  253. position: fixed;
  254. right: 2%;
  255. top: 16%;
  256. background: olive;
  257. width: 20%;
  258. }
  259.  
  260. #status-menu .status-button.onhold{
  261. visibility: visible;
  262. }
  263.  
  264. #status-menu .status-button.dropped{
  265. visibility: visible;
  266. }
  267.  
  268. #status-menu .status-button.plantowatch{
  269. visibility: visible;
  270. }
  271.  
  272. #status-menu .status-button.all_anime{
  273. visibility: visible;
  274. }
  275.  
  276. .list-menu-float .icon-menu.profile
  277. {
  278. visibility: visible;
  279. }
  280.  
  281. .list-menu-float .icon-menu.quick-add {
  282. visibility: visible;
  283. }
  284.  
  285.  
  286. .list-menu-float .icon-menu.anime-list {
  287. visibility: visible;
  288. }
  289.  
  290. .list-menu-float .icon-menu.manga-list{
  291. visibility: visible;
  292. }
  293.  
  294.  
  295. .list-menu-float .icon-menu.history{
  296. visibility: visible;
  297. }
  298.  
  299. .list-menu-float .icon-menu.export{
  300. visibility: visible;
  301. display: none;
  302. }
  303.  
  304. .list-menu-float .icon-menu.logout{
  305. visibility: visible;
  306. }
  307.  
  308. .list-menu-float .icon-menu.setting{
  309. visibility: visible;
  310. display: none;
  311. }
  312.  
  313. .list-menu-float .icon-menu.quick-add {
  314. visibility: visible;
  315. }
  316.  
  317. .list-table > tbody:nth-of-type(2n+1){
  318. visibility: visible;
  319. }
  320.  
  321.  
  322.  
  323.  
  324.  
  325. /* REMOVED CODES */
  326. .list-menu-float .icon-menu.export{
  327. visibility: visible;
  328. display: none;
  329. }
  330.  
  331. .list-menu-float .icon-menu.logout{
  332. visibility: visible;
  333. }
  334.  
  335. .list-menu-float .icon-menu.setting{
  336. visibility: visible;
  337. display: none;
  338. }
  339.  
  340. #status-menu .status-button.all_anime {
  341. visibility: visible;
  342. display: none;
  343. }
  344. .list-menu-float .icon-menu.logout,
  345. .list-menu-float .icon-menu.history,
  346. .list-menu-float .icon-menu.anime-list,
  347. .list-menu-float .icon-menu.manga-list {
  348. visibility: visible;
  349. display: none;
  350. }
  351. .header .header-title{
  352. display: none;
  353. }
  354. .btn-menu {
  355.  
  356. background: red;
  357. left: -100%;
  358. position: fixed;
  359. }
  360.  
  361.  
  362.  
  363.  
  364.  
  365.  
  366.  
  367.  
  368. /* TAGS*/
  369.  
  370.  
  371.  
  372.  
  373.  
  374.  
  375. /* ABOUT ME PANEL */
  376.  
  377. #advanced-options-button{
  378.  
  379. visibility: visible;
  380. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwIPvn-9Qb7UOlnWUgK8kylY);
  381. background-size: 120%;
  382. background-position: top right;
  383. background-color: transparent;
  384. WIDTH: 24%;
  385. height: 30%;
  386. position: fixed;
  387. left: 34%;
  388. top: 9%;
  389. clip-path: polygon(0 0, 70% 0, 100% 100%, 0% 100%);
  390. border: 3px black solid;
  391. font-size: 0;
  392. }
  393.  
  394.  
  395. #advanced-options-button:hover {
  396. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwKr9bGSxcAN7jdlxFAYiGoQ);
  397. WIDTH: 24%;
  398. background-color: transparent;
  399. }
  400.  
  401.  
  402.  
  403. #advanced-options-button:before{
  404. position: fixed;
  405. background-color:transparent;
  406. background-size: 70% !important;
  407. height: 40%;
  408. width: 16%;
  409. right: 55%;
  410. top: 25%;
  411. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwOM0HHnoiIcI9auRoz3C1Og);
  412. background-position: top right;
  413. background-repeat: no-repeat;
  414. content: "";
  415. pointer-events: none;
  416. background-size: contain;
  417. z-index: 10;
  418. opacity: 0;}
  419.  
  420.  
  421.  
  422.  
  423.  
  424.  
  425. #advanced-options-button:hover:before{
  426. opacity: 1;}
  427.  
  428.  
  429.  
  430. #advanced-options-button:after
  431. {
  432. position: fixed;
  433. height: 100%;
  434. width: 6px;
  435. right: 39% !important;
  436. top: 0%;
  437. content: "";
  438. display: block;
  439. background-color: black;
  440. transform: rotate(-25deg);
  441. }
  442.  
  443. #advanced-options .advanced-options-header,
  444. #advanced-options .advanced-options-button,
  445. #advanced-options .filter-widget,
  446. #advanced-options .sort-widget {
  447. display: none;
  448. }
  449.  
  450.  
  451. #advanced-options {
  452. border: solid black;
  453. z-index: 10002;
  454. height: 90%;
  455. width: 50%;
  456. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwImnURbPVCJV5wTdYoHtuSw);
  457. background-repeat: no-repeat;
  458. background-size: contain;
  459. background-position: bottom center;
  460. }
  461.  
  462.  
  463.  
  464.  
  465.  
  466. /* RECOMMENDATION/QUICK ADD PANEL */
  467. .list-menu-float .icon-menu.quick-add {
  468. visibility: visible;
  469. background-image: none;
  470. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwPLEaXvNgE7JmyUESgpmIto) !important;
  471. background-size: 100% !important;
  472. background-position: 80% bottom !important;;
  473. background-repeat: no-repeat !important;;
  474. position: fixed;
  475. left: 52%;
  476. top: 9%;
  477. background: orange;
  478. background-color: white;
  479. width: 25%;
  480. height: 30%;
  481. clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
  482. border: 3px black solid;
  483. font-size: 0;
  484. }
  485.  
  486. .list-menu-float .icon-menu.quick-add:hover{
  487. background-color: orange;
  488. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwIUPag3Jh54BMZkJEYGWzHA) !important;
  489. width: 25%;
  490. height: 30%;
  491. }
  492.  
  493. .list-menu-float .icon-menu.quick-add:after
  494. {
  495. position: fixed;
  496. height: 100%;
  497. width: 4px;
  498. right: 37.6% !important;
  499. top: 0%;
  500. content: "";
  501. display: block;
  502. background-color: black;
  503. transform: rotate(-25.5deg);
  504. }
  505.  
  506. .list-unit .list-status-title .stats{
  507. font-size: 0;
  508. }
  509.  
  510.  
  511. .list-menu-float .icon-menu:hover .text {
  512. width: 94px;
  513. opacity: 0;
  514. }
  515. .list-menu-float .icon-menu svg.icon {
  516. position: absolute;
  517. fill: #323232;
  518. display: none;
  519. }
  520.  
  521. #fancybox-outer:before{
  522. content: "";
  523. display: block;
  524. z-index: 100;
  525. position: fixed;
  526. background-repeat: no-repeat;
  527. pointer-events: none;
  528. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwNZ9gLKIWmOAfWhUaTGscG4) !important;
  529. background-color: transparent !important;
  530. background-position: bottom right;
  531. background-size: 25%;
  532. height: 100%;
  533. width: 100%;
  534. left: 0 !important;
  535. bottom:0 !important;
  536. padding-top: 30%;
  537. }
  538.  
  539.  
  540.  
  541. /* SCORE ASSISTANT PANEL */
  542.  
  543. .list-table .list-table-header .header-title.score a {
  544. visibility: visible;
  545. background: white;
  546. position: fixed !important;
  547. height: 50%;
  548. width: 20%;
  549. }
  550. .list-table .list-table-header .header-title.score a {
  551. visibility: visible;
  552. background: white;
  553. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwKVbEQEO81cLKyWA9xtBDwI);
  554. background-size: 100%, cover;
  555. background-position: bottom center !important;
  556. background-repeat: no-repeat;
  557. font-size: 0;
  558. position: fixed !important;
  559. bottom: 1%;
  560. right: 7%;
  561. height: 58%;
  562. width: 25%;
  563. border: 3px black solid;
  564.  
  565. z-index: 1000 !important;
  566. }
  567. .list-table .list-table-header .header-title.score a:after{
  568. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwDTMJQX5sDJg8NTOqE1iIUU);
  569. bottom: 45%;
  570. left: 34.5%;
  571. height: 10%;
  572. width: 24%;
  573. background-color: transparent;
  574. content: "";
  575. position: fixed;
  576. background-size: contain;
  577. background-repeat: no-repeat;
  578. }
  579.  
  580.  
  581. .list-table .list-table-header .header-title.score a:hover{
  582. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwKzGtbC7KfWIN2DearwqdbQ);
  583. background-color: rgba(243, 158, 206, 1);
  584. }
  585. .list-table .list-table-header .header-title.score a:before{
  586. position: fixed;
  587. background-color:transparent;
  588. background-size: 100% !important;
  589. height: 40%;
  590. width: 16%;
  591. right: 35%;
  592. bottom: 6%;
  593. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwPgEi1I94PJ_EjyzFDdtjtM);
  594. background-position: top right;
  595. background-repeat: no-repeat;
  596. content: "";
  597. pointer-events: none;
  598. background-size: contain;
  599. z-index: 100;
  600. opacity: 0;
  601. }
  602.  
  603. .list-table .list-table-header .header-title.score a:hover:before{
  604. opacity: 1;
  605. }
  606. .list-table .list-table-header .header-title.score a:hover:after{
  607. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwNJN2lUFF8r9rNsjHD1-vhw);
  608. transform: rotate(-15deg);
  609. margin-left: -50px !important;
  610. background-size: 100%;
  611. width: 26%;
  612. left: 36%;
  613. }
  614.  
  615.  
  616.  
  617.  
  618. .list-table .list-table-header .header-title.score a {
  619. right: 41%;
  620. }
  621.  
  622.  
  623.  
  624. /* MADOKA/EXIT PANEL */
  625. .list-menu-float .icon-menu.profile {
  626. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwN4iYRxSxh02II8h1UZ_iNE) !important;
  627. background-position: 140% 20%, top left;
  628. background-repeat: no-repeat;
  629. background-size: contain, 150%;
  630. background-color: white;
  631. font-size: 0;
  632. width: 17%;
  633. height: 24%;
  634. position: fixed !important;
  635. right: 23% !important;
  636. bottom: 1% !important;
  637. border: 3px black solid;
  638. z-index: 1 !important;
  639. }
  640.  
  641. .list-menu-float .icon-menu.profile:hover{
  642. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwHEhRwmkMQzRYZWky0631SI)!important;;
  643. background-color: rgba(171, 158, 220, 1);
  644. }
  645.  
  646. .list-menu-float .icon-menu.profile:before{
  647. position: fixed;
  648. background-color:transparent;
  649. background-size: contain !important;;
  650. height: 35%;
  651. width: 20%;
  652. right: 20%;
  653. bottom: 0;
  654. background-image: url(https://i.imgur.com/HbFXpz5.png);
  655. background-position: top left;
  656. background-repeat: no-repeat;
  657. content: "";
  658. pointer-events: none;
  659. background-size: contain;
  660. z-index: 10;
  661. opacity: 0;
  662.  
  663. }
  664.  
  665. .list-menu-float .icon-menu.profile:hover:before{
  666. opacity: 1;
  667. }
  668.  
  669. .list-menu-float .icon-menu.profile:after{
  670. position: fixed;
  671. background-color:black;
  672. background-size: contain !important;
  673. height: 2%;
  674. width: 8%;
  675. right: 32.3%;
  676. background-position: top right;
  677. background-repeat: no-repeat;
  678. content: "The exit appears!";
  679. font-size: 12px !important;
  680. color: white;
  681. pointer-events: none;
  682. background-size: contain;
  683. z-index: 10;
  684. opacity: 1;
  685.  
  686. }
  687.  
  688. .list-menu-float .icon-menu.profile:hover:after{
  689. opacity: 0;
  690. }
  691.  
  692.  
  693.  
  694.  
  695.  
  696. /* COPYRIGHT PANEL */
  697. #footer-block {
  698. position: fixed;
  699. margin: auto;
  700. right: 23%;
  701. width: 17%;
  702. bottom: 27%;
  703. height: 29%;
  704. background-color: white !important;
  705.  
  706. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwKhtbfX1xxLiqYwy84MbUj0);
  707. background-size: contain, cover;
  708. border: 3px black solid;
  709. z-index: -10;
  710. background-position: center 101%;
  711. background-repeat: no-repeat;
  712. }
  713.  
  714. #footer-block:hover{
  715. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwINeauqPcArIwhTIondOSKU), url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwHAbi_4WeYoDxRGfXgTlesg);
  716. }
  717. #copyright{
  718. color: black !important;
  719. font-size: 9px;
  720. }
  721. #copyright:after{
  722. content: "Layout by Shishio-kun, made with Photoshop and JASC Animation Shop."}
  723.  
  724.  
  725. /* STATS */
  726.  
  727. .header .header-menu .header-info{
  728. background: transparent;
  729. position: fixed;
  730. right: 0%;
  731. text-align: center;
  732. top: 7%;
  733. width: 22%;
  734. z-index: 10001;
  735. color: black;
  736. }
  737.  
  738. .header a {
  739.  
  740. font-weight: bold;
  741. color: black;
  742.  
  743. }
  744.  
  745.  
  746.  
  747.  
  748.  
  749.  
  750. /* RIGHT PANEL WITH CATEGORIES */
  751.  
  752. #status-menu .status-button.watching {
  753. visibility: visible;
  754. background: transparent;
  755. position: fixed;
  756. right: 2%;
  757. top: 10%;
  758. width: 20%;
  759. height: 10%;
  760. font-size: 0;
  761. z-index: 11111 !important;
  762. }
  763.  
  764. #status-menu .status-button.watching:after {
  765. visibility: visible;
  766. background-color: transparent;
  767. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwPzeHr4HcZycy5dRjvUky7k);
  768. background-position: left top;
  769. background-repeat: no-repeat;
  770. background-size: cover;
  771. position: fixed;
  772. left:0%;
  773. top: 0%;
  774. width: 40%;
  775. height: 100%;
  776. content: "";
  777. opacity: 0;
  778. pointer-events: none;
  779. }
  780.  
  781. #status-menu .status-button.watching:hover:after {
  782. -webkit-animation-name: slide; /* Safari 4.0 - 8.0 */
  783. -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  784. animation-name: slide;
  785. animation-duration: 1s;
  786. opacity: 1;
  787. }
  788.  
  789. @-webkit-keyframes slide {
  790. from {left: -50%}
  791. to { left:0%;}
  792. }
  793.  
  794. @keyframes slide {
  795. from {left: -50%}
  796. to { left:0%;}
  797. }
  798.  
  799.  
  800.  
  801. #status-menu .status-button.completed {
  802. visibility: visible;
  803. position: fixed;
  804. right: 2%;
  805. top: 23%;
  806. background: transparent;
  807. width: 20%;
  808. height: 10%;
  809. font-size: 0 !important;
  810. color: transparent;
  811. z-index: 100 !important;
  812. }
  813.  
  814.  
  815. #status-menu .status-button.completed:after {
  816. visibility: visible;
  817. background-color: transparent;
  818. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwJG8sK0TkWHfGlf00V0tKXE);
  819. background-position: left top;
  820. background-repeat: no-repeat;
  821. background-size: cover;
  822. position: fixed;
  823. left:0%;
  824. top: 0%;
  825. width: 40%;
  826. height: 100%;
  827. content: "";
  828. opacity: 0;
  829. font-size: 0;
  830. pointer-events: none;
  831. z-index: 100 !important;}
  832.  
  833.  
  834. #status-menu .status-button.completed:hover:after {
  835. -webkit-animation-name: slide; /* Safari 4.0 - 8.0 */
  836. -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  837. animation-name: slide;
  838. animation-duration: 1s;
  839. opacity: 1;
  840. }
  841.  
  842.  
  843. #status-menu .status-button.onhold {
  844. visibility: visible;
  845. position: fixed;
  846. right: 2%;
  847. top: 36%;
  848. background: transparent;
  849. width: 20%;
  850. height: 10%;
  851. font-size: 0;
  852. }
  853. #status-menu .status-button.onhold:after {
  854. visibility: visible;
  855. background-color: transparent;
  856. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwPXD-Xd85hU7nKptfnefKV4);
  857. background-position: left top;
  858. background-repeat: no-repeat;
  859. background-size: cover;
  860. position: fixed;
  861. left:0%;
  862. top: 0%;
  863. width: 40%;
  864. height: 100%;
  865. content: "";
  866. opacity: 0;
  867. pointer-events: none;
  868. }
  869.  
  870. #status-menu .status-button.onhold:hover:after {
  871. -webkit-animation-name: slide; /* Safari 4.0 - 8.0 */
  872. -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  873. animation-name: slide;
  874. animation-duration: 1s;
  875. opacity: 1;
  876. }
  877.  
  878.  
  879.  
  880. #status-menu .status-button.dropped {
  881. visibility: visible;
  882. position: fixed;
  883. right: 2%;
  884. top: 48%;
  885. background: transparent;
  886. width: 20%;
  887. height: 10%;
  888. font-size: 0;
  889. }
  890. #status-menu .status-button.dropped:after {
  891. visibility: visible;
  892. background-color: transparent;
  893. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwHxm_P6-3_0x3Q3QqiRi4lI);
  894. background-position: left top;
  895. background-repeat: no-repeat;
  896. background-size: cover;
  897. position: fixed;
  898. left:0%;
  899. top: 0%;
  900. width: 40%;
  901. height: 100%;
  902. content: "";
  903. opacity: 0;
  904. pointer-events: none;
  905. }
  906.  
  907. #status-menu .status-button.dropped:hover:after {
  908. -webkit-animation-name: slide; /* Safari 4.0 - 8.0 */
  909. -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  910. animation-name: slide;
  911. animation-duration: 1s;
  912. opacity: 1;
  913. }
  914.  
  915.  
  916. #status-menu .status-button.plantowatch {
  917. visibility: visible;
  918. position: fixed;
  919. right: 2%;
  920. top: 60%;
  921. background: transparent;
  922. width: 20%;
  923. height: 10%;
  924. font-size: 0;
  925. }
  926. #status-menu .status-button.plantowatch:after {
  927. visibility: visible;
  928. background-color: transparent;
  929. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwFdtKMt-Vy84PEfz6lsC-ds);
  930. background-position: left top;
  931. background-repeat: no-repeat;
  932. background-size: cover;
  933. position: fixed;
  934. left:0%;
  935. top: 0%;
  936. width: 40%;
  937. height: 100%;
  938. content: "";
  939. opacity: 0;
  940. pointer-events: none;
  941. }
  942.  
  943. #status-menu .status-button.plantowatch:hover:after {
  944. -webkit-animation-name: slide; /* Safari 4.0 - 8.0 */
  945. -webkit-animation-duration: 1s; /* Safari 4.0 - 8.0 */
  946. animation-name: slide;
  947. animation-duration: 1s;
  948. opacity: 1;
  949. }
  950.  
  951. .status-menu-container .search-container {
  952. visibility: visible;
  953. position: fixed;
  954. background: red;
  955. bottom: 10%;
  956. right: 0;
  957. width: 10%;
  958. }
  959.  
  960. .status-menu-container .search-container {
  961. visibility: visible;
  962. position: fixed;
  963. background: transparent;
  964. bottom: 1%;
  965. right: 12%;
  966. }
  967.  
  968. .status-menu-container {
  969. position: fixed;
  970. background-color: white;
  971. height: 89.5%;
  972. width: 21%;
  973. right: 1%;
  974. bottom: 1%;
  975. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwEKju5WNWzoHVs9aANc-ZoY);
  976. background-position: 100% 180%;
  977. background-repeat: no-repeat;
  978. border: 3px black solid;
  979. }
  980.  
  981. .status-menu-container:hover{
  982. background-color: rgb(199,239,241);
  983. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwMY6dBoE7GCM_KrUv8ihQoA);
  984.  
  985. }
  986.  
  987. .status-menu-container:After{
  988. position: fixed;
  989. background-color: transparent;
  990. height: 90%;
  991. width: 21%;
  992. right: 1%;
  993. bottom: 8%;
  994. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwGMI6NgUR17-0F41q3Jd9AM);
  995. background-position: bottom right;
  996. background-repeat: no-repeat;
  997. content: "";
  998. pointer-events: none;
  999. background-size: contain;
  1000. }
  1001.  
  1002.  
  1003. .status-menu-container:before{
  1004. position: fixed;
  1005. background-color: transparent;
  1006. height: 100%;
  1007. width: 21%;
  1008. right: 16%;
  1009. bottom: 18%;
  1010. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwPLNy0_k96Vby79bSkVZ1PE);
  1011. background-position: bottom right;
  1012. background-repeat: no-repeat;
  1013. content: "";
  1014. pointer-events: none;
  1015. background-size: contain;
  1016. z-index: 10;
  1017. opacity: 0;
  1018.  
  1019. }
  1020.  
  1021. .status-menu-container:hover:before{
  1022. -webkit-animation-name: A1; /* Safari 4.0 - 8.0 */
  1023. -webkit-animation-duration: 10s; /* Safari 4.0 - 8.0 */
  1024. animation-name: A1;
  1025. animation-duration: 10s;}
  1026.  
  1027.  
  1028. @-webkit-keyframes A1 {
  1029. 0% {opacity: 0}
  1030. 24% {opacity: 0;}
  1031. 25% {opacity: 1;}
  1032. 99% {opacity: 1}
  1033. 100% {opacity: 0;}
  1034. }
  1035.  
  1036. .status-menu-container .status-menu .status-button::after {
  1037. background-color: transparent;}
  1038.  
  1039. .status-menu-container.fixed {
  1040. position: fixed !important;
  1041. top: 9%;
  1042. bottom: 1% !important;
  1043. }
  1044.  
  1045.  
  1046.  
  1047.  
  1048. /* HEADING */
  1049. body[data-query*='"status":1']:before
  1050. {
  1051. background-color: #F1EBDF;
  1052. height: 6%;
  1053. padding-top: 1%;
  1054. content: "Here is Shishio's current anime, you stalker.";
  1055. font-size: 36px;
  1056. color: black;
  1057. position: fixed;
  1058. left: 0% !important;
  1059. top: 0%;
  1060. width: 100%;
  1061. text-align: center;
  1062. pointer-events: none;
  1063. display: block;
  1064. z-index: 1 !important;
  1065. }
  1066.  
  1067. body[data-query*='"status":2']:before
  1068. {
  1069. background-color: #F1EBDF;
  1070. height: 7%;
  1071. padding-top: 1%;
  1072. content: "This long list is Shishio's Completed Anime! It's ok to feel impressed and turned on, that's natural.";
  1073. font-size: 25px;
  1074. color: black;
  1075. position: fixed;
  1076. left: 0% !important;
  1077. top: 0%;
  1078. width: 100%;
  1079. text-align: center;
  1080. pointer-events: none;
  1081. display: block;
  1082. z-index: 1 !important;
  1083. }
  1084.  
  1085. body[data-query*='"status":3']:before
  1086. {
  1087. content: "Shishio's On-hold anime, but it might as well be dropped since he never goes back to these.";
  1088. background-color: #F1EBDF;
  1089. height: 6%;
  1090. padding-top: 1%;
  1091. font-size: 26px;
  1092. color: black;
  1093. position: fixed;
  1094. left: 0% !important;
  1095. top: 0%;
  1096. width: 100%;
  1097. text-align: center;
  1098. pointer-events: none;
  1099. display: block;
  1100.  
  1101. z-index: 1 !important;
  1102. }
  1103.  
  1104. body[data-query*='"status":4']:before
  1105. {
  1106. content: "Dropped anime, the worst of the worst! Prepare to be offended by our comments!";
  1107. background-color: #F1EBDF;
  1108. height: 6%;
  1109. padding-top: 1%;
  1110. font-size: 25px;
  1111. color: black;
  1112. position: fixed;
  1113. left: 0% !important;
  1114. top: 0%;
  1115. width: 100%;
  1116. text-align: center;
  1117. pointer-events: none;
  1118. display: block;
  1119.  
  1120. z-index: 1 !important;
  1121. }
  1122.  
  1123. body[data-query*='"status":6']:before
  1124. {
  1125. content: "Planned anime AKA seems-good-but-not-good-enough-to-start-right-away anime.";
  1126. background-color: #F1EBDF;
  1127. height: 6%;
  1128. padding-top: 1%;
  1129. font-size: 25px;
  1130. color: black;
  1131. position: fixed;
  1132. left: 0% !important;
  1133. top: 0%;
  1134. width: 100%;
  1135. text-align: center;
  1136. pointer-events: none;
  1137. display: block;
  1138. z-index: 1 !important;
  1139. }
  1140.  
  1141.  
  1142.  
  1143.  
  1144.  
  1145. /* FONT */
  1146.  
  1147. *{ font-family: ace, fontawesome !important;}
  1148.  
  1149.  
  1150.  
  1151.  
  1152.  
  1153.  
  1154. /* LIST LEFT TABLE SETTINGS */
  1155.  
  1156. /* COVER SIZE */
  1157. .data.image a:after{
  1158. width: 200px;
  1159. height: 300px;
  1160. }
  1161.  
  1162.  
  1163. /* COVER POSITION */
  1164. .data.image a:after{
  1165. position: fixed;
  1166. right: 0;
  1167. left: -40px;
  1168. top: 25%;
  1169. margin: auto;
  1170.  
  1171. }
  1172.  
  1173.  
  1174. /* OTHER CODES */
  1175. .data.image a:after
  1176. {content: "";
  1177. display: block !important;
  1178. background-color: rgba(0,0,0,.3);
  1179. background-position: center !important;
  1180. background-repeat: no-repeat !important;
  1181. background-size: cover;
  1182. border: 1px solid #ffffff;
  1183. box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
  1184. visibility: hidden;
  1185. opacity: 1;
  1186. pointer-events: none !important;;
  1187. transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out;
  1188. z-index: 5;}
  1189.  
  1190.  
  1191. .list-table .list-table-data:hover .data.image a:after {
  1192. visibility: visible;
  1193.  
  1194. pointer-events: none !important;;
  1195. opacity: 1;
  1196. transition: .3s ease-out;}
  1197.  
  1198.  
  1199. /* review section */
  1200.  
  1201. .list-table .list-table-data .data.tags {
  1202. position: fixed;
  1203. right: 0;
  1204. left: 0;
  1205. top: 50%;
  1206. margin: auto;
  1207. background-image: url(https://image.myanimelist.net/ui/5LYzTBVoS196gvYvw3zjwAmmNei3ftWHltBOI97xl-A);
  1208. display: inline !important;
  1209. line-height: 20px !important;
  1210. text-align:center;
  1211. pointer-events: none !important;
  1212. z-index: 6;
  1213. background-size: contain;
  1214. padding: 120px !important;
  1215. padding-top: 155px !important;;
  1216. height:450px;
  1217. width: 550px;
  1218. background-repeat: no-repeat;
  1219. background-color: transparent;
  1220. background-size: contain;
  1221. opacity: 0;
  1222. font-size: 18px;
  1223. }
  1224.  
  1225.  
  1226.  
  1227. .list-table .list-table-data .data.tags *
  1228. {
  1229. animation-name: pop;
  1230. animation-duration: 1s;
  1231. pointer-events: none !important;
  1232. color: black !important;}
  1233.  
  1234.  
  1235. .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after {
  1236. opacity: 1;
  1237. animation-name: pop;
  1238. animation-duration: 1s;
  1239. pointer-events: none !important;
  1240. }
  1241.  
  1242. @keyframes pop {
  1243. 0% { height:450px;
  1244. width: 550px;
  1245. font-size: 0px;}
  1246. 12% { height:800px;
  1247. width: 800px;
  1248. font-size: 0px;}
  1249. 26% { height:450px;
  1250. width: 550px;
  1251. font-size: 0px;
  1252. }
  1253. 27% { height:450px;
  1254. width: 550px;
  1255. font-size: 18px;
  1256. }
  1257. 100% { height:450px;
  1258. width: 550px;
  1259. font-size: 18px;}
  1260. }
  1261.  
  1262.  
  1263.  
  1264. .list-container {
  1265. position: absolute;
  1266. left: -5%;
  1267. filter: grayscale !important;
  1268. }
  1269.  
  1270. .list-table .list-table-header .header-title {
  1271. visibility: visible;
  1272. position: fixed;
  1273. left: -10%;
  1274. }
  1275.  
  1276. .list-table {
  1277. border-collapse: collapse;
  1278. width: 70%;
  1279.  
  1280. }
  1281. #list-container {
  1282. visibility: visible;
  1283. overflow: auto;
  1284. height: 96%;
  1285. width: 46%;
  1286. }
  1287.  
  1288. .list-menu-float {
  1289. border: 0;
  1290. }
  1291.  
  1292. .list-table {
  1293. width: 55%;
  1294. position: relative;
  1295. left: -20%;
  1296. }
  1297.  
  1298.  
  1299.  
  1300.  
  1301. .list-unit .list-status-title{
  1302. background-color: transparent;
  1303. position: fixed;
  1304. top: 0;
  1305. font-size: 0;
  1306. }
  1307.  
  1308.  
  1309.  
  1310. .list-table > tbody:nth-of-type(2n+1){
  1311. background: white;
  1312. }
  1313.  
  1314. .list-table .list-table-data .data{
  1315. border: none;
  1316. }
  1317.  
  1318.  
  1319. #list-container {
  1320. border: 3px black solid;
  1321. width: 32%;
  1322. top: 9%;
  1323. left: 1%;
  1324. height: 100%;
  1325. background: white;
  1326. }
  1327.  
  1328.  
  1329.  
  1330. .list-unit .list-status-title .text {
  1331. pointer-events: none;
  1332. }
  1333.  
  1334.  
  1335. #advanced-options {
  1336. z-index: 10002;
  1337.  
  1338. }
  1339.  
  1340. .list-unit {
  1341. width: 931px;
  1342.  
  1343. }
  1344.  
  1345.  
  1346. .list-table .list-table-data .data {
  1347. -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  1348. filter: grayscale(100%);
  1349. }
  1350.  
  1351.  
  1352.  
  1353. .list-table-data:hover td
  1354. {
  1355. -webkit-filter:inherit !important;;
  1356. filter: inherit !important;
  1357. background-color: whitesmoke;
  1358. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement