Shishipastebin

Untitled

Dec 15th, 2018
505
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 61.32 KB | None | 0 0
  1. /*Layout CSS was originally made by Takana no hana, edits by Shishio-kun and Valerio_Lyndon
  2.  
  3. If you need help with it please visit our group:
  4. https://myanimelist.net/clubs.php?cid=19736
  5.  
  6.  
  7. Learn how to customize the layout here:
  8. https://myanimelist.net/forum/?topicid=1640096
  9. */
  10.  
  11. @\import "https://malscraper.azurewebsites.net/covers/auto/presets/dataimagelinkbefore";
  12. @\import "https://fonts.googleapis.com/css?family=Orbitron";
  13. @\import "https://fonts.googleapis.com/css?family=Amaranth";
  14. @\import "https://fonts.googleapis.com/css?family=Rancho";
  15. @\import "https://fonts.googleapis.com/css?family=Kaushan+Script|Tangerine";
  16.  
  17.  
  18. /*CURRENTLY WATCHING WALLPAPER
  19. To change background images: Delete what's in the parenthesis. Upload the new background to Imgur or a similar site, then copy the direct link (or Original GIF link if it's animated) and paste it into the parenthesis. Save.
  20. */
  21. body[data-query*='"status":1'] {
  22. background-image: url(http://i.imgur.com/VTrW1N1.jpg);
  23. }
  24. /*COMPLETED WALLPAPER*/
  25. body[data-query*='"status":2'] {
  26. background-image: url(http://imgur.com/96e1dQl.jpg);
  27. }
  28. /*ON HOLD WALLPAPER*/
  29. body[data-query*='"status":3'] {
  30. background-image: url(http://imgur.com/E60TqJ7.jpg);
  31. }
  32. /*DROPPED WALLPAPER*/
  33. body[data-query*='"status":4'] {
  34. background-image: url(http://imgur.com/7q879PZ.jpg);
  35. }
  36. /*PLANNED WALLPAPER*/
  37. body[data-query*='"status":6'] {
  38. background-image: url(http://imgur.com/qOGQ4wv.jpg);
  39. }
  40. /*ALL ANIME/MANGA WALLPAPERD*/
  41. body[data-query*='"status":7'] {
  42. background-image: url(http://imgur.com/QBKjMEl.jpg);
  43. }
  44.  
  45.  
  46.  
  47.  
  48. /* BANNER AVATAR */
  49. .list-table .list-table-header:after {
  50. background-image: url(http://i.imgur.com/GH6BMvr.gif);
  51. }
  52.  
  53. /* BANNER QUOTE*/
  54. .cover-block::before {
  55. content: "I won't let go of you - I'll never let go again ... This hand was finally able to catch you!"
  56. }
  57.  
  58. /* ALL ANIME BANNER BUTTON */
  59. .status-menu-container .status-menu .status-button.all_anime {
  60. background-image:url(http://i.imgur.com/DLLqSTd.png);
  61. }
  62. .status-menu-container .status-menu .status-button.all_anime:hover,
  63. .status-menu-container .status-menu .status-button.all_anime.on {
  64. background-image:url(http://i.imgur.com/aKqWN3u.gif);
  65. }
  66.  
  67.  
  68. /* CURRENTLY WATCHING BANNER BUTTON*/
  69. .status-menu-container .status-menu .status-button.watching,
  70. .status-menu-container .status-menu .status-button.reading {
  71. background-image:url(http://i.imgur.com/5pPg4ac.png);
  72. left:8px !important;
  73. }
  74. .status-menu-container .status-menu .status-button.watching:hover,
  75. .status-menu-container .status-menu .status-button.watching.on,
  76. .status-menu-container .status-menu .status-button.reading:hover,
  77. .status-menu-container .status-menu .status-button.reading.on {
  78. background-image:url(http://i.imgur.com/WESHf5N.gif);
  79. }
  80.  
  81.  
  82. /* COMPLETED BANNER BUTTON*/
  83. .status-menu-container .status-menu .status-button.completed {
  84. background-image:url(http://i.imgur.com/RlcbKxj.png);
  85. left:16px !important;
  86. }
  87. .status-menu-container .status-menu .status-button.completed:hover,
  88. .status-menu-container .status-menu .status-button.completed.on {
  89. background-image:url(http://i.imgur.com/UMovoVS.gif);
  90. }
  91.  
  92.  
  93. /* ON HOLD BANNER BUTTON */
  94. .status-menu-container .status-menu .status-button.onhold {
  95. background-image:url(http://i.imgur.com/ASPp5y9.png);
  96. left:24px !important;
  97. }
  98. .status-menu-container .status-menu .status-button.onhold:hover ,
  99. .status-menu-container .status-menu .status-button.onhold.on {
  100. background-image:url(http://i.imgur.com/ouJqNKc.gif);
  101. }
  102.  
  103.  
  104. /* DROPPED BANER BUTTON*/
  105. .status-menu-container .status-menu .status-button.dropped {
  106. background-image:url(http://i.imgur.com/aTKLiQg.png);
  107. left:32px !important;
  108. }
  109. .status-menu-container .status-menu .status-button.dropped:hover,
  110. .status-menu-container .status-menu .status-button.dropped.on {
  111. background-image:url(http://i.imgur.com/sRPU8yp.gif);
  112. }
  113.  
  114.  
  115. /* PLAN TO BANNER BUTTON */
  116. .status-menu-container .status-menu .status-button.plantowatch,
  117. .status-menu-container .status-menu .status-button.plantoread {
  118. background-image:url(http://i.imgur.com/BBHhd2Z.png);
  119. left:40px !important;
  120. }
  121. .status-menu-container .status-menu .status-button.plantowatch:hover,
  122. .status-menu-container .status-menu .status-button.plantowatch.on ,
  123. .status-menu-container .status-menu .status-button.plantoread:hover,
  124. .status-menu-container .status-menu .status-button.plantoread.on{
  125. background-image:url(http://i.imgur.com/zJYQb4x.gif);
  126. }
  127.  
  128.  
  129.  
  130.  
  131. /* CURRENTLY WATCHING BANNER BACKGROUND */
  132. .list-unit.watching .list-status-title:after,
  133. .list-unit.reading .list-status-title:after {
  134. background-image: url(http://i.imgur.com/kAGfZRq.png);
  135. }
  136.  
  137. /* COMPLETED BANNER BACKGROUND */
  138. .list-unit.completed .list-status-title:after {
  139. background-image: url(http://i.imgur.com/W6iKnWb.png);
  140. }
  141.  
  142. /* ON-HOLD BANNER BACKGROUND */
  143. .list-unit.onhold .list-status-title:after {
  144. background-image: url(http://i.imgur.com/XAbWBod.png);
  145. }
  146.  
  147. /* DROPPED BANNER BACKGROUND */
  148. .list-unit.dropped .list-status-title:after {
  149. background-image: url(http://i.imgur.com/UfIUduo.png);
  150. }
  151.  
  152. /* PLAN TO BANNER BACKGROUND */
  153. .list-unit.plantowatch .list-status-title:after,
  154. .list-unit.plantoread .list-status-title:after {
  155. background-image: url(http://i.imgur.com/pPc1BRS.png);
  156. }
  157.  
  158. /* ALL ANIME/MANGA BANNER BACKGROUND */
  159. .list-unit.all_anime .list-status-title:after {
  160. background-image: url(http://i.imgur.com/CCI8X9T.png);
  161. }
  162.  
  163.  
  164.  
  165.  
  166.  
  167.  
  168.  
  169. /* BOTTOM RENDERS (left and right) */
  170.  
  171. footer:before{
  172. left: -15%;
  173. background-image: url(http://imgur.com/gAgIkGM.png);
  174. }
  175.  
  176.  
  177. footer:after {
  178. right: -15%;
  179. background-image: url(http://imgur.com/yewORJZ.png);
  180. }
  181.  
  182.  
  183. /* ANIME/MANGA CONTAINER SETTINGS */
  184.  
  185. .list-unit {
  186. background-color: rgba(0,0,0,.4) ;
  187. }
  188.  
  189. .status-menu-container {
  190. background-color: rgba(0,0,0,.4) ;
  191. }
  192.  
  193. .list-table .list-table-data:hover {
  194. background-color: rgba(0,0,0,.4) ;
  195. }
  196.  
  197.  
  198.  
  199.  
  200.  
  201. /* GREYSCALE FOR CATEGORY BUTTONS */
  202. .status-menu-container .status-menu .status-button.watching,
  203. .status-menu-container .status-menu .status-button.reading,
  204. .status-menu-container .status-menu .status-button.completed,
  205. .status-menu-container .status-menu .status-button.onhold,
  206. .status-menu-container .status-menu .status-button.dropped,
  207. .status-menu-container .status-menu .status-button.plantowatch,
  208. .status-menu-container .status-menu .status-button.plantoread,
  209. .status-menu-container .status-menu .status-button.all_anime
  210. {
  211. filter: grayscale(100%);
  212. }
  213.  
  214.  
  215. .status-menu-container .status-menu .status-button.all_anime:hover,
  216. .status-menu-container .status-menu .status-button.all_anime.on,
  217. .status-menu-container .status-menu .status-button.plantowatch:hover,
  218. .status-menu-container .status-menu .status-button.plantowatch.on,
  219. .status-menu-container .status-menu .status-button.plantoread:hover,
  220. .status-menu-container .status-menu .status-button.plantoread.on,
  221. .status-menu-container .status-menu .status-button.dropped:hover,
  222. .status-menu-container .status-menu .status-button.dropped.on,
  223. .status-menu-container .status-menu .status-button.onhold:hover,
  224. .status-menu-container .status-menu .status-button.onhold.on,
  225. .status-menu-container .status-menu .status-button.completed:hover,
  226. .status-menu-container .status-menu .status-button.completed.on,
  227. .status-menu-container .status-menu .status-button.watching:hover,
  228. .status-menu-container .status-menu .status-button.watching.on,
  229. .status-menu-container .status-menu .status-button.reading:hover,
  230. .status-menu-container .status-menu .status-button.reading.on{
  231. filter: inherit;
  232. }
  233.  
  234.  
  235.  
  236.  
  237.  
  238.  
  239.  
  240. /* OTHER STUFF */
  241.  
  242.  
  243.  
  244.  
  245. /* Removing default cover (banner) image */
  246.  
  247. #cover-image{
  248. display: none;
  249. }
  250.  
  251.  
  252. .list-table .list-table-data{
  253. background-color: rgba(0,0,0,0);
  254. box-shadow: 0 0 2px transparent;
  255. border: 0px solid transparent;
  256. }
  257.  
  258.  
  259. .list-table .list-table-data:hover {
  260. box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important;
  261. border: 1px solid rgba(0,0,0,.3);
  262. }
  263.  
  264. footer:before{
  265. width: 50%;
  266. height: 100%;
  267. position: fixed;
  268. background-repeat: no-repeat;
  269. background-size: 100% !important;
  270. background-position:center bottom;}
  271.  
  272.  
  273. footer:after {
  274. width: 50%;
  275. height: 100%;
  276. position: fixed;
  277. background-repeat: no-repeat;
  278. background-size: 100% !important;
  279. background-position: center bottom;}
  280.  
  281.  
  282. .list-unit.watching:after, .list-unit.reading:after, .list-unit.onhold:after, .list-unit.plantowatch:after , .list-unit.plantoread:after {
  283. background-repeat: no-repeat;
  284. background-size: contain;
  285. height: 100%;
  286. background-position: right;
  287. display: inline-block !important;
  288. margin: auto !important;
  289. position: fixed !important;
  290. left: 0 !important;
  291. right: 0 !important;
  292. top: 0 !important;
  293. z-index: -5 !important;
  294. content: "";
  295. pointer-events: none;
  296. opacity: 1 !important;
  297. }
  298.  
  299. .list-unit.completed:after, .list-unit.dropped:after, .list-unit.all_anime:after {
  300. background-repeat: no-repeat;
  301. background-size: contain;
  302. height: 100%;
  303. background-position: right;
  304. display: inline-block !important;
  305. margin: auto !important;
  306. position: fixed !important;
  307. left: 0 !important;
  308. right: 0 !important;
  309. top: 0 !important;
  310. z-index: -5 !important;
  311. content: "";
  312. pointer-events: none;
  313. opacity: 1 !important;
  314. }
  315.  
  316.  
  317.  
  318. .list-unit .list-status-title .text {
  319. display: block;
  320. position:absolute;
  321. width: 1180px;
  322. height: 38px !important;
  323. font-size: 22px;
  324. color: #fff;
  325. font-family: 'Kaushan Script', cursive;
  326. text-align: center;
  327. vertical-align: middle;
  328. text-align: center;
  329. border:none;
  330. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #FFF !important;
  331. background-color: transparent;
  332. margin-top: -30px !important;
  333. z-index:10 !important;
  334. }
  335.  
  336. .list-table .list-table-header:after {
  337. position:absolute;
  338. height: 120px !important;
  339. width: 120px! important;
  340. background-repeat: no-repeat;
  341. background-size: contain;
  342. position: absolute;
  343. display:block !important;
  344. margin-left:57px;
  345. margin-top:-280px;
  346. content: "";
  347. padding: 5px;
  348. background-color:#fff;
  349. box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  350. border-radius:5px;
  351. border: #fff 2px solid;
  352. pointer-events: none;
  353. z-index: 10 !important;
  354. }
  355.  
  356. footer::after, footer::before {
  357. content: "";
  358. display: block;
  359. position: fixed;
  360. bottom: 0px;
  361. background-size: 100%;
  362. pointer-events: none;
  363. z-index: 3; }
  364.  
  365. .cover-block::after {
  366. display: none !important;
  367. }
  368.  
  369.  
  370. .list-unit.watching .list-status-title:after, .list-unit.reading .list-status-title:after {
  371. color: transparent;
  372. height: 755px !important;
  373. width: 1176px! important;
  374. background-repeat: no-repeat;
  375. background-size: contain;
  376. position: absolute !important;
  377. display: block !important;
  378. left: 0 !important;
  379. right: 0 !important;
  380. margin-top: -500px !important;
  381. content: "";
  382. z-index: 0 !important;
  383. margin-bottom: 20px !important;
  384. pointer-events: none;
  385. }
  386.  
  387.  
  388.  
  389. .list-unit.completed .list-status-title:after {
  390. color: transparent;
  391. height: 755px !important;
  392. width: 1176px! important;
  393. background-repeat: no-repeat;
  394. background-size: contain;
  395. position: absolute !important;
  396. display: block !important;
  397. left: 0 !important;
  398. right: 0 !important;
  399. margin-top: -500px !important;
  400. content: "";
  401. z-index: 0 !important;
  402. margin-bottom: 20px !important;
  403. pointer-events: none;
  404. }
  405.  
  406. .list-unit.onhold .list-status-title:after {
  407. color: transparent;
  408. height: 755px !important;
  409. width: 1176px! important;
  410. background-repeat: no-repeat;
  411. background-size: contain;
  412. position: absolute !important;
  413. display: block !important;
  414. left: 0 !important;
  415. right: 0 !important;
  416. margin-top: -500px !important;
  417. content: "";
  418. z-index: 0 !important;
  419. margin-bottom: 20px !important;
  420. pointer-events: none;
  421. }
  422.  
  423. .list-unit.dropped .list-status-title:after {
  424. color: transparent;
  425. height: 755px !important;
  426. width: 1176px! important;
  427. background-repeat: no-repeat;
  428. background-size: contain;
  429. position: absolute !important;
  430. display: block !important;
  431. left: 0 !important;
  432. right: 0 !important;
  433. margin-top: -500px !important;
  434. content: "";
  435. z-index: 0 !important;
  436. margin-bottom: 20px !important;
  437. pointer-events: none;
  438. }
  439.  
  440. .list-unit.plantowatch .list-status-title:after, .list-unit.plantoread .list-status-title:after {
  441. color: transparent;
  442. height: 755px !important;
  443. width: 1176px! important;
  444. background-repeat: no-repeat;
  445. background-size: contain;
  446. position: absolute !important;
  447. display: block !important;
  448. left: 0 !important;
  449. right: 0 !important;
  450. margin-top: -500px !important;
  451. content: "";
  452. z-index: 0 !important;
  453. margin-bottom: 20px !important;
  454. pointer-events: none;
  455. }
  456.  
  457. .list-unit.all_anime .list-status-title:after {
  458. color: transparent;
  459. height: 755px !important;
  460. width: 1176px! important;
  461. background-repeat: no-repeat;
  462. background-size: contain;
  463. position: absolute !important;
  464. display: block !important;
  465. left: 0 !important;
  466. right: 0 !important;
  467. margin-top: -500px !important;
  468. content: "";
  469. z-index: 0 !important;
  470. margin-bottom: 20px !important;
  471. pointer-events: none;
  472. }
  473.  
  474. #advanced-options {
  475. position: fixed;
  476. top: 24px;
  477. left: 0;
  478. right: 0;
  479. display: none;
  480. width: 860px;
  481. margin: 0 auto;
  482. padding: 25px 0px 30px;
  483. -moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  484. -webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  485. -o-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  486. -ms-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  487. box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  488. color: #fff;
  489. text-align: left;
  490. font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  491. z-index: 1101;
  492. border: none;
  493. background-image: url(http://i.imgur.com/xD2LRjG.png);
  494. background-color:rgba(0,0,0,.5);
  495. background-repeat: no-repeat;
  496. background-size: cover;
  497. background-position: 50% 50%;}
  498.  
  499. #advanced-options .advanced-options-header {
  500. width: 750px;
  501. margin: 0px auto;
  502. padding-bottom: 4px;
  503. border-bottom: 1px solid #fff;
  504. font-size: 16px;
  505. color:#fff !important;
  506. }
  507.  
  508.  
  509. #advanced-options .advanced-options-header .description {
  510. font-size: 12px;
  511. font-weight: normal;
  512. margin-left: 8px;
  513. color:#fff !important;
  514. }
  515.  
  516. #advanced-options .sort-widget .widget-header, #advanced-options .filter-widget .widget-header, #advanced-options .filter-widget.aired-date .text, #advanced-options .filter-widget.published-date .text {
  517. color:#fff !important;
  518. }
  519.  
  520. #advanced-options select {
  521. -ms-appearance: none;
  522. -webkit-appearance: none;
  523. -moz-appearance: none;
  524. appearance: none;
  525. background-image: url(/img/pc/ownlist/icon_pulldown_triangle.png);
  526. background-repeat: no-repeat;
  527. background-position: center right;
  528. background-size: 18px 8px;
  529. background-color: #FFFFFF;
  530. display: inline-block;
  531. height: 25px;
  532. padding: 4px 20px 4px 4px;
  533. padding-right: 4px\0;
  534. border: #BEBEBE 1px solid;
  535. border-radius: 0px;
  536. font-size: 12px;
  537. }
  538. #advanced-options select::-ms-expand {
  539. display: none;
  540. }
  541.  
  542. #advanced-options select:disabled {
  543. background-image: url(/img/pc/ownlist/icon_pulldown_triangle_disable.png);
  544. color: #9B9B9B;
  545. }
  546.  
  547. #advanced-options input[type=text] {
  548. padding: 4px;
  549. border: #BEBEBE 1px solid;
  550. }
  551.  
  552. #advanced-options input:focus {
  553. outline: none;
  554. }
  555.  
  556.  
  557. /* sort */
  558. #advanced-options .sort-widget {
  559. margin: 0px auto;
  560. padding: 12px 0px 0px;
  561. width: 750px;
  562. }
  563. #advanced-options .sort-widget:last-of-type {
  564. padding-bottom: 45px;
  565. }
  566.  
  567. #advanced-options .sort-widget select {
  568. width: 172px;
  569. margin-right: 8px;
  570. }
  571.  
  572. #advanced-options .sort-widget input[type=radio] {
  573. display: none;
  574. }
  575. #advanced-options .sort-widget input[type=radio] + label {
  576. background-color: #FFFFFF;
  577. display: inline-block;
  578. width: 56px;
  579. padding: 5px 0px;
  580. border: #BEBEBE 1px solid;
  581. border-radius: 4px;
  582. color: #323232;
  583. font-size: 12px;
  584. text-align: center;
  585. cursor: pointer;
  586. }
  587. #advanced-options .sort-widget input[type=radio]:checked + label {
  588. background-color: #244291;
  589. border: #244291 1px solid;
  590. color: #FFFFFF;
  591. }
  592. #advanced-options .sort-widget input[type=radio]:disabled + label {
  593. border: #BEBEBE 1px solid;
  594. color: #9B9B9B;
  595. }
  596. #advanced-options .sort-widget input[type=radio]:checked:disabled + label {
  597. background-color: #FFFFFF;
  598. border: #BEBEBE 1px solid;
  599. color: #9B9B9B;
  600. }
  601.  
  602. /* filter */
  603. #advanced-options .filter-widget {
  604. margin: 0px auto;
  605. padding: 12px 0px 0;
  606. width: 750px;
  607. }
  608.  
  609. #advanced-options .filter-widget select {
  610. margin-right: 8px;
  611. font-size: 12px;
  612. }
  613.  
  614. #advanced-options .filter-widget.title input[type=text] {
  615. width: 360px;
  616. }
  617.  
  618. #advanced-options .filter-widget.airing-status select,
  619. #advanced-options .filter-widget.publishing-status select {
  620. width: 152px;
  621. }
  622.  
  623. #advanced-options .filter-widget.producer select,
  624. #advanced-options .filter-widget.magazine select {
  625. width: 360px;
  626. }
  627.  
  628. #advanced-options .filter-widget.aired-date select.year,
  629. #advanced-options .filter-widget.published-date select.year {
  630. width: 80px;
  631. }
  632.  
  633. #advanced-options .filter-widget.aired-date select.month,
  634. #advanced-options .filter-widget.published-date select.month,
  635. #advanced-options .filter-widget.aired-date select.day,
  636. #advanced-options .filter-widget.published-date select.day {
  637. width: 60px;
  638. }
  639.  
  640. #advanced-options .filter-widget.aired-date .text,
  641. #advanced-options .filter-widget.published-date .text {
  642. display: inline-block;
  643. margin-right: 4px;
  644. font-size: 12px;
  645. }
  646.  
  647. #advanced-options .filter-widget.aired-season select.year {
  648. width: 80px;
  649. }
  650.  
  651. #advanced-options .filter-widget.aired-season select.season {
  652. width: 110px;
  653. }
  654.  
  655. #advanced-options .sort-widget .widget-header,
  656. #advanced-options .filter-widget .widget-header {
  657. display: inline-block;
  658. width: 110px;
  659. font-size: 12px;
  660. font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  661. }
  662.  
  663. #advanced-options .sort-widget:last-of-type,
  664. #advanced-options .filter-widget:last-of-type {
  665. padding-bottom: 40px;
  666. }
  667.  
  668. #advanced-options .advanced-options-button {
  669. width: 750px;
  670. margin: 0px auto;
  671. padding: 12px 0px 0px;
  672. border-top: 1px solid #BEBEBE;
  673. text-align: center;
  674. }
  675.  
  676. #advanced-options .btn-apply,
  677. #advanced-options .btn-clear {
  678. background-color: rgba(0,0,0, 0.8);
  679. display: inline-block;
  680. width: 135px;
  681. margin: 0 4px;
  682. padding: 6px 0px;
  683. border-radius: 4px;
  684. font-size: 12px;
  685. color: #FFFFFF;
  686. text-align: center;
  687. -moz-transition-property: all;
  688. -o-transition-property: all;
  689. -webkit-transition-property: all;
  690. transition-property: all;
  691. -moz-transition-duration: 0.3s;
  692. -o-transition-duration: 0.3s;
  693. -webkit-transition-duration: 0.3s;
  694. transition-duration: 0.3s;
  695. -moz-transition-timing-function: ease-in-out;
  696. -o-transition-timing-function: ease-in-out;
  697. -webkit-transition-timing-function: ease-in-out;
  698. transition-timing-function: ease-in-out;
  699. }
  700.  
  701. #advanced-options .btn-apply:hover,
  702. #advanced-options .btn-clear:hover {
  703. background-color: rgba(0,0,0, 0.8);
  704. }
  705.  
  706.  
  707.  
  708. /**
  709. * General Styles
  710. */
  711.  
  712.  
  713. td {
  714. line-height: 1.5em;
  715. height: 25px !important;
  716. }
  717.  
  718. a {
  719. color: #fff;
  720. text-decoration: none;
  721. }
  722. a:hover {
  723. color: #fff !important;
  724. text-decoration: none;
  725. }
  726.  
  727. #footer-block {
  728. padding: 15px 0;
  729. background-color: #244291;
  730. color: #FFFFFF;
  731. font-family: Avenir, "lucida grande", tahoma, verdana, arial, sans-serif;
  732. display:none;
  733. }
  734.  
  735. #copyright {
  736. font-size: 12px;
  737. color: #FFFFFF;
  738. padding-top: 3px;
  739. text-align: center;
  740. }
  741.  
  742. /*
  743. * Header
  744. */
  745. .header a {
  746. font-weight: bold;
  747. color: #fff !important;
  748. }
  749. .header a:hover {
  750. text-decoration: underline;
  751. }
  752.  
  753. .header {
  754. position: absolute;
  755. color: #fff;
  756. display: block;
  757. width: 100%;
  758. height: 50px;
  759. margin: 0 auto
  760. border:none;
  761. background: -webkit-linear-gradient(rgba(0,0,0,.4), transparent); /* For Safari 5.1 to 6.0 */
  762. background: -o-linear-gradient(rgba(0,0,0,.4), transparent); /* For Opera 11.1 to 12.0 */
  763. background: -moz-linear-gradient(rgba(0,0,0,.4), transparent); /* For Firefox 3.6 to 15 */
  764. background: linear-gradient(rgba(0,0,0,.4), transparent); /* Standard syntax */
  765. -moz-transition-property: all;
  766. -o-transition-property: all;
  767. -webkit-transition-property: all;
  768. transition-property: all;
  769. -moz-transition-duration: 0.3s;
  770. -o-transition-duration: 0.3s;
  771. -webkit-transition-duration: 0.3s;
  772. transition-duration: 0.3s;
  773. -moz-transition-timing-function: ease-in-out;
  774. -o-transition-timing-function: ease-in-out;
  775. -webkit-transition-timing-function: ease-in-out;
  776. transition-timing-function: ease-in-out;
  777. z-index: 40;
  778. }
  779.  
  780. .header:hover {background-color:rgba(0,0,0,.5);
  781. -moz-transition-property: all;
  782. -o-transition-property: all;
  783. -webkit-transition-property: all;
  784. transition-property: all;
  785. -moz-transition-duration: 0.3s;
  786. -o-transition-duration: 0.3s;
  787. -webkit-transition-duration: 0.3s;
  788. transition-duration: 0.3s;
  789. -moz-transition-timing-function: ease-in-out;
  790. -o-transition-timing-function: ease-in-out;
  791. -webkit-transition-timing-function: ease-in-out;
  792. transition-timing-function: ease-in-out;
  793.  
  794. }
  795.  
  796. .header .header-menu {
  797. position: absolute;
  798. top: 5px;
  799. right: 4px
  800. }
  801. .header .header-menu.other {
  802. top: 5px;
  803. }
  804.  
  805.  
  806.  
  807. .header .header-menu .header-info {
  808. font-size: 10px;
  809. margin-top: 6px;
  810. margin-right: 15px;
  811. text-align: right;
  812. }
  813.  
  814. .header .username {
  815. font-weight: bold;
  816. }
  817.  
  818. .header .header-menu .list-menu {
  819. position: absolute;
  820. top: 25px;
  821. right: -4px;
  822. background-color: rgba(255,255,255,.8);
  823. display: none;
  824. border: none !important;
  825. -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  826. -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  827. box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  828. z-index: 1;
  829. }
  830.  
  831. .header .header-menu .list-menu .icon-menu {
  832. display: block;
  833. width: 150px;
  834. height: 30px;
  835. color: #000;
  836. font-size: 14px;
  837. font-weight: bold;
  838. text-decoration: none;
  839. -moz-transition-property: all;
  840. -o-transition-property: all;
  841. -webkit-transition-property: all;
  842. transition-property: all;
  843. -moz-transition-duration: 0.3s;
  844. -o-transition-duration: 0.3s;
  845. -webkit-transition-duration: 0.3s;
  846. transition-duration: 0.3s;
  847. -moz-transition-timing-function: ease-in-out;
  848. -o-transition-timing-function: ease-in-out;
  849. -webkit-transition-timing-function: ease-in-out;
  850. transition-timing-function: ease-in-out;
  851. }
  852.  
  853. .header .header-menu .list-menu .icon-menu:hover {
  854. background-color: rgba(0,0,0,.5);
  855. }
  856.  
  857. .header .header-menu .list-menu .icon-menu svg.icon {
  858. position: absolute;
  859. fill: rgba(0,0,0,.5);
  860. left: 12px;
  861. top: 4px;
  862. }
  863.  
  864. .header .header-menu .list-menu .icon-menu:hover svg.icon {
  865. fill: rgba(255,255,255,1) !important;
  866. }
  867.  
  868. .header .header-menu .list-menu .icon-menu .text {
  869. position: absolute;
  870. left: 52px;
  871. top: 6px;
  872. }
  873.  
  874. .header .header-menu .list-menu .icon-menu:hover .text {color:rgba(255,255,255,1) !important;}
  875.  
  876. .header .header-menu .btn-menu {
  877. display: block;
  878. text-align: right;
  879. color: rgba(0,0,0,0.7) !important;
  880. font-size: 12px !important;
  881. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  882. }
  883.  
  884. #header-menu-dropdown > a {color: rgba(0,0,0,.5) !important;}
  885.  
  886. /* svg.icon.icon-manga-list {color: rgba(0,0,0,.5) !important;} */
  887.  
  888. /**
  889. * Floating Menu
  890. */
  891. /**
  892. * Floating Menu
  893. */
  894. .list-menu-float:before
  895. {content: "\f0c9";
  896. font-family: 'FontAwesome' !important;
  897. display: block;
  898. text-align: center !important;
  899. text-indent: 10px;
  900. color: #fff !important;
  901. font-size:1.5em !important;
  902. height: 50px;
  903. width: 40px;
  904. line-height: 50px;}
  905.  
  906. .list-menu-float:hover:before {
  907. font-size:1.7em !important;
  908. text-shadow: 0 0 2px #fff, 0 0 1px #fff, 1px 1px 7px #fff, 0 0 0 #fff;
  909. -moz-transition-property: all;
  910. -o-transition-property: all;
  911. -webkit-transition-property: all;
  912. transition-property: all;
  913. -moz-transition-duration: 0.3s;
  914. -o-transition-duration: 0.3s;
  915. -webkit-transition-duration: 0.3s;
  916. transition-duration: 0.3s;
  917. -moz-transition-timing-function: ease-in-out;
  918. -o-transition-timing-function: ease-in-out;
  919. -webkit-transition-timing-function: ease-in-out;
  920. transition-timing-function: ease-in-out;
  921. }
  922.  
  923. .list-menu-float
  924. {position: absolute;
  925. top: 0px;
  926. left:0px;
  927. width: 50px;
  928. border: none;
  929. opacity: 1;
  930. height: 40px !important;
  931. z-index: 100;
  932.  
  933. }
  934.  
  935. .list-menu-float .icon-menu
  936. {display: block;
  937. width: 120px;
  938. background-color: #dfdfdf;
  939. height: 30px;
  940. line-height: 30px;
  941. text-indent: 10px;
  942. opacity:0;
  943. }
  944.  
  945. .list-menu-float:hover .icon-menu
  946. {opacity:1;
  947. -moz-transition-property: all;
  948. -o-transition-property: all;
  949. -webkit-transition-property: all;
  950. transition-property: all;
  951. -moz-transition-duration: 0.3s;
  952. -o-transition-duration: 0.3s;
  953. -webkit-transition-duration: 0.3s;
  954. transition-duration: 0.3s;
  955. -moz-transition-timing-function: ease-in-out;
  956. -o-transition-timing-function: ease-in-out;
  957. -webkit-transition-timing-function: ease-in-out;
  958. transition-timing-function: ease-in-out;}
  959.  
  960. .list-menu-float .icon-menu.profile
  961. {background-image: none !important;}
  962.  
  963. .list-menu-float .icon-menu.profile:before
  964. {position:absolute;
  965. width:120px !important;
  966. content: "\f007\00a0Profile";
  967. font-family: 'FontAwesome' !important;
  968. margin-top:5px !important;
  969. margin-left:-65px !important;
  970. color: #000;
  971. text-align: center;}
  972.  
  973. .list-menu-float .icon-menu .text
  974. {opacity: 1;
  975. width: auto;
  976. left: 20px;
  977. top: 0;
  978. color: #555555;}
  979.  
  980. .list-menu-float .icon-menu:hover
  981. {width: 120px !important;
  982. background-color:rgba(0,0,0,.5) !important;}
  983.  
  984. .list-menu-float .icon-menu:hover .text, .list-menu-float .icon-menu:hover:before, .list-menu-float .icon-menu:hover:after
  985. {color: #fff;
  986. width: auto;}
  987.  
  988. .list-menu-float .icon-menu.logout
  989. {border-radius: 0 0 4px 4px;}
  990.  
  991. .list-menu-float .icon-menu.setting
  992. {display:none;}
  993.  
  994. .list-menu-float .icon-menu svg.icon
  995. {top: 7px !important;
  996. left: 5px !important;
  997. width: 15px;
  998. height: 15px;}
  999.  
  1000. .list-menu-float .icon-menu.setting svg.icon-setting {display:none;}
  1001. /**
  1002. * List Container
  1003. */
  1004.  
  1005. .list-container {
  1006. position: absolute;
  1007. background-color: transparent !important;
  1008. width: 1200px;
  1009. left: 0;
  1010. right: 0;
  1011. margin: auto;
  1012. margin-top:100px;
  1013. /* box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000; */
  1014. border:none !important;
  1015. margin-bottom:30px;
  1016. }
  1017.  
  1018. /**
  1019. * List Container - Cover Block
  1020. */
  1021. .cover-block {
  1022. position:relative;
  1023. display: block;
  1024. width: 1180px;
  1025. margin: 0 auto;
  1026. height:auto;
  1027. text-align: center;
  1028. vertical-align: middle;
  1029. box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  1030. z-index: -1 !important;
  1031. }
  1032.  
  1033. .cover-block .image-container {
  1034. display: block;
  1035. width: 1180px;
  1036. height:auto;
  1037. padding-top:0;
  1038. }
  1039.  
  1040. .cover-block .image-container.hide {
  1041. display: none;
  1042. }
  1043.  
  1044. .cover-block .image-container img {
  1045. max-width: 1180px;
  1046. height: auto;
  1047. }
  1048.  
  1049. /* cover image */
  1050.  
  1051. #cover-image{
  1052.  
  1053. margin:auto;
  1054. width:1180px !important;
  1055. height:auto;
  1056. background-color:transparent;
  1057. background-size: cover !important;
  1058. background-position: 50% 50%;
  1059. }
  1060.  
  1061. /* setting icon */
  1062. .cover-block .image-container .btn-list-setting {
  1063. display: none;
  1064. }
  1065.  
  1066. .cover-block .image-container:hover .btn-list-setting {
  1067. display: none;
  1068. position: absolute;
  1069. top: 20px;
  1070. right: 28px;
  1071. padding: 8px;
  1072. border: rgba(255,255,255,0) 1px solid;
  1073. font-size: 14px;
  1074. color: #ffffff;
  1075. font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  1076. }
  1077.  
  1078.  
  1079.  
  1080. .cover-block .image-container .btn-list-setting:hover {
  1081. position: absolute;
  1082. top: 20px;
  1083. right: 28px;
  1084. background-color: rgba(0,0,0,0.6);
  1085. padding: 8px;
  1086. border: none;
  1087. -moz-box-shadow: 0 0 4px #000000;
  1088. -webkit-box-shadow: 0 0 4px #000000;
  1089. -o-box-shadow: 0 0 4px #000000;
  1090. -ms-box-shadow: 0 0 4px #000000;
  1091. box-shadow: 0 0 4px #000000;
  1092. font-size: 14px;
  1093. color: #ffffff;
  1094. text-shadow: #323232 1px 1px 1px;
  1095.  
  1096. }
  1097.  
  1098. .cover-block .image-container .btn-list-setting .fa-camera {
  1099. font-size: 16px;
  1100. -moz-text-shadow: #000000 1px 1px 3px;
  1101. -webkit-text-shadow: #000000 1px 1px 3px;
  1102. -o-text-shadow: #000000 1px 1px 3px;
  1103. -ms-text-shadow: #000000 1px 1px 3px;
  1104. text-shadow: #000000 1px 1px 3px;
  1105. -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#000000,offx=1,offy=1)";
  1106.  
  1107. }
  1108.  
  1109. .cover-block .image-container .btn-list-setting .icon-plus-circle {
  1110. position: absolute;
  1111. top: 4px;
  1112. left: 18px;
  1113. background-color: rgba(0,0,0,0.6);
  1114. border-radius: 50%;
  1115. -moz-box-shadow: -1px 1px 0px 0px #323232;
  1116. -webkit-box-shadow: -1px 1px 0px 0px #323232;
  1117. -o-box-shadow: -1px 1px 0px 0px #323232;
  1118. -ms-box-shadow: -1px 1px 0px 0px #323232;
  1119. box-shadow: -1px 1px 0px 0px #323232;
  1120. font-size: 10px;
  1121.  
  1122. }
  1123.  
  1124. .cover-block .image-container .btn-list-setting .text {
  1125. display: none;
  1126. }
  1127.  
  1128. .cover-block .image-container .btn-list-setting:hover .text {
  1129. display: inline-block;;
  1130. margin-left: 4px;
  1131. }
  1132.  
  1133.  
  1134. /**
  1135. * List Container - Status Menu
  1136. */
  1137.  
  1138. .status-menu-container .status-menu:after {
  1139. border: 5px solid;
  1140. border-top-color: transparent;
  1141. border-right-color: rgba(0,0,0,.6);
  1142. border-bottom-color: rgba(0,0,0,.6);
  1143. border-left-color: transparent;
  1144. content: "";
  1145. height: 0;
  1146. left: 0;
  1147. margin-top: -10px;
  1148. width: 0;
  1149. position: absolute;
  1150. z-index: -2 !important;
  1151. }
  1152.  
  1153. .status-menu-container .status-menu:before {
  1154. border: 5px solid;
  1155. border-top-color: transparent;
  1156. border-right-color: transparent;
  1157. border-bottom-color: rgba(0,0,0,.6);
  1158. border-left-color: rgba(0,0,0,.6);
  1159. content: "";
  1160. height: 0;
  1161. right: 0;
  1162. margin-top: -10px;
  1163. width: 0;
  1164. position: absolute;
  1165. z-index: -2 !important;
  1166. }
  1167.  
  1168.  
  1169. .status-menu-container {
  1170. width: 1200px;
  1171. height: 80px;
  1172.  
  1173. background-image:url();
  1174. background-repeat:repeat;
  1175. border-bottom: none;
  1176. box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  1177. z-index: 2 !important;
  1178. }
  1179.  
  1180. .status-menu-container.fixed {
  1181. display: none !important;
  1182. }
  1183.  
  1184. .status-menu-container.fixed + div.list-block {
  1185. min-height:500px;
  1186. }
  1187.  
  1188. .status-menu-container .status-menu {
  1189. display: table;
  1190. margin: 0 auto;
  1191. border-collapse: separate;
  1192. border-spacing: 0px 0;
  1193. z-index:2 !important;
  1194. }
  1195.  
  1196. .status-menu-container .status-menu .status-button {
  1197. padding:0 !important;
  1198. position: relative;
  1199. display: table-cell;
  1200. font-family: 'Tangerine', cursive;
  1201. text-align: center;
  1202. vertical-align: bottom !important;
  1203. font-size: 22px;
  1204. font-weight:600 !important;
  1205. color: #fff;
  1206. width:125px;
  1207. height:74px;
  1208. z-index:10;
  1209. background-size:cover;
  1210. background-position:50% 50%;
  1211. background-repeat:no-repeat;
  1212. border-radius:5px !important;
  1213.  
  1214. top:2px;
  1215. }
  1216.  
  1217.  
  1218.  
  1219.  
  1220.  
  1221. /* */
  1222.  
  1223. .status-menu-container .status-menu .status-button.on {
  1224. color: #fff;
  1225. font-weight: bold;
  1226. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  1227. border: #fff 1px solid;
  1228. box-sizing: border-box;
  1229. box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000;
  1230. }
  1231.  
  1232. .status-menu-container .status-menu .status-button:hover {
  1233. border: #fff 1px solid;
  1234. box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000;
  1235. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  1236. box-sizing: border-box;
  1237. background-color: transparent;
  1238. color: #fff;
  1239. -moz-transition-property: all;
  1240. -o-transition-property: all;
  1241. -webkit-transition-property: all;
  1242. transition-property: all;
  1243. -moz-transition-duration: 0.3s;
  1244. -o-transition-duration: 0.3s;
  1245. -webkit-transition-duration: 0.3s;
  1246. transition-duration: 0.3s;
  1247. -moz-transition-timing-function: ease-in-out;
  1248. -o-transition-timing-function: ease-in-out;
  1249. -webkit-transition-timing-function: ease-in-out;
  1250. transition-timing-function: ease-in-out;
  1251. }
  1252.  
  1253. .status-menu-container .status-menu .status-button.on:after, .status-menu .status-button:hover:after {
  1254. opacity: 1
  1255. }
  1256.  
  1257. /* .status-menu-container .status-menu .status-button.watching:before, .status-menu-container .status-menu .status-button.reading:before {
  1258. content: "\f152\00a0\00a0";
  1259. float: left;
  1260. font-size: 1.5em;
  1261. font-family: 'FontAwesome' !important;
  1262. }
  1263.  
  1264. .status-menu-container .status-menu .status-button.completed:before {
  1265. content: "\f05d\00a0\00a0";
  1266. float: left;
  1267. font-size: 1.5em;
  1268. font-family: 'FontAwesome' !important;
  1269. }
  1270.  
  1271. .status-menu-container .status-menu .status-button.onhold:before {
  1272. content: "\f017\00a0\00a0";
  1273. float: left;
  1274. font-size: 1.5em;
  1275. font-family: 'FontAwesome' !important;
  1276. }
  1277.  
  1278. .status-menu-container .status-menu .status-button.plantowatch:before, .status-menu-container .status-menu .status-button.plantoread:before {
  1279. content: "\f073\00a0\00a0";
  1280. float: left;
  1281. font-size: 1.5em;
  1282. font-family: 'FontAwesome' !important;
  1283. }
  1284.  
  1285. .status-menu-container .status-menu .status-button.dropped:before {
  1286. content: "\f00d\00a0\00a0";
  1287. float: left;
  1288. font-size: 1.5em;
  1289. font-family: 'FontAwesome' !important;
  1290. }
  1291.  
  1292. .status-menu-container .status-menu .status-button.all_anime:before {
  1293. content: "\f022\00a0";
  1294. float: left;
  1295. font-size: 1.5em;
  1296. font-family: 'FontAwesome' !important;
  1297. }*/
  1298.  
  1299. .status-menu-container .status-menu .status-button:after {display:none !important;}
  1300.  
  1301. /*scroll bar*/
  1302.  
  1303. ::-webkit-scrollbar
  1304. {height: 5px;
  1305. width: 7px;
  1306. background-color: #f5f5f5;}
  1307. ::-webkit-scrollbar-thumb
  1308. {border: 2px solid #f5f5f5;
  1309. border-radius: 2px;
  1310. background-color: #9B9B9B;}
  1311.  
  1312. /**
  1313. * List Container - Status Menu - Search
  1314. */
  1315. .status-menu-container .search-container {
  1316. position: absolute;
  1317. right: 5px;
  1318. z-index:20;
  1319. }
  1320. .status-menu-container .search-container #search-button {
  1321. display: inline-block;
  1322. height: 22px;
  1323. margin-top: 10px;
  1324. color: #fff;
  1325. font-size: 1.6em;
  1326. vertical-align: middle;
  1327. }
  1328.  
  1329. .status-menu-container .search-container #search-box {
  1330. display: inline-block;
  1331. width: 0;
  1332. height: 22px;
  1333. overflow: hidden;
  1334. margin-top: 5px;
  1335. -webkit-transition: width 0.3s;
  1336. -moz-transition: width 0.3s;
  1337. transition: width 0.3s;
  1338. -webkit-backface-visibility: hidden;
  1339. vertical-align: middle;
  1340. }
  1341.  
  1342. .status-menu-container .search-container #search-box.open {
  1343. display: inline-block;
  1344. width: 130px;
  1345. }
  1346.  
  1347. .status-menu-container .search-container #search-box input {
  1348. width: 100%;
  1349. height: 100%;
  1350. box-sizing: border-box;
  1351. }
  1352.  
  1353.  
  1354. /**
  1355. * List Container - List Block
  1356. */
  1357. .list-block {
  1358. margin: 0;
  1359. min-height:260px;
  1360. z-index: 1 !important;
  1361. }
  1362.  
  1363. .list-unit {
  1364.  
  1365. margin: auto;
  1366. width: 1176px;
  1367. box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  1368. margin-top:15px;
  1369. z-index: 1 !important;
  1370. padding-top:500px;
  1371. }
  1372.  
  1373. /**
  1374. * List Container - List Status Title (with Stats)
  1375. */
  1376. .list-unit .list-status-title {
  1377. position: relative;
  1378. display: table-cell;
  1379. background-color: transparent;
  1380. width: 1180px;
  1381. height:0;
  1382. }
  1383.  
  1384.  
  1385. .list-unit .list-status-title .stats a.filterd {
  1386. text-shadow: 0px 0px 2px #FFF;
  1387. }
  1388.  
  1389. .list-unit .list-status-title .stats a:hover {
  1390. background:rgba(0,0,0,.5);
  1391. padding:8px;
  1392. -moz-transition-property: all;
  1393. -o-transition-property: all;
  1394. -webkit-transition-property: all;
  1395. transition-property: all;
  1396. -moz-transition-duration: 0.3s;
  1397. -o-transition-duration: 0.3s;
  1398. -webkit-transition-duration: 0.3s;
  1399. transition-duration: 0.3s;
  1400. -moz-transition-timing-function: ease-in-out;
  1401. -o-transition-timing-function: ease-in-out;
  1402. -webkit-transition-timing-function: ease-in-out;
  1403. transition-timing-function: ease-in-out;
  1404. }
  1405.  
  1406.  
  1407. .list-unit .list-stats {
  1408. background-color: rgba(255,255,255,.8);
  1409. margin-top: -500px !important;
  1410. color : #000;
  1411. height: 25px;
  1412. margin:auto;
  1413. position: absolute;
  1414. width: 1176px;
  1415. z-index: 1 !important;
  1416. }
  1417.  
  1418. .list-unit .list-status-title .stats {
  1419. position: absolute;
  1420. height: 40px;
  1421. line-height: 40px;
  1422. width:180px;
  1423. right: -55px;
  1424. margin-top: -550px;
  1425. z-index: 1;
  1426. }
  1427.  
  1428. .list-unit .list-status-title .stats a {
  1429. color: #fff;
  1430. padding:8px;
  1431. margin:0 !important;
  1432. }
  1433.  
  1434.  
  1435. /**
  1436. * List Container - List Table
  1437. */
  1438.  
  1439. .list-table {
  1440. width: 100%;
  1441. margin: auto;
  1442. border-collapse: collapse;
  1443. background-color:transparent !important;
  1444. color: #fff !important;
  1445. border:none;
  1446. }
  1447.  
  1448. /* columns background color*/
  1449.  
  1450. .list-table > tbody:nth-of-type(2n+1) {
  1451. background-color: transparent;
  1452. background-image:url();
  1453. background-repeat:repeat;
  1454.  
  1455. }
  1456.  
  1457. .list-table > tbody:nth-of-type(2n) {
  1458. background-color: transparent;
  1459. background-image:url();
  1460. background-repeat:repeat;
  1461.  
  1462. }
  1463.  
  1464. /**
  1465. * List Container - List Table - Header
  1466. */
  1467.  
  1468.  
  1469.  
  1470. .list-table .list-table-header:before {content: "\f0dc\00a0SORT";
  1471. display: block;
  1472. text-align: center !important;
  1473. font-family: 'FontAwesome' !important;
  1474. text-indent: 0px;
  1475. color: #fff !important;
  1476. font-weight: 700 !important;
  1477. width: 57px;
  1478. line-height: 40px;
  1479. height:40px;
  1480. margin-left:0px !important;
  1481. margin-top:-40px;
  1482. position:absolute;
  1483. }
  1484.  
  1485. .list-table .list-table-header:hover:before {color:#fff !important;
  1486. background-color:rgba(0,0,0,.5);}
  1487.  
  1488. .list-table .list-table-header {
  1489. position: absolute;
  1490. display: block;
  1491. margin-left:-10px;
  1492. margin-top:-515px;
  1493. z-index:200 !important;
  1494. }
  1495.  
  1496. .list-table .list-table-header .header-title {
  1497. background: #F6F6F6 url("/img/pc/ownlist/bar-table-header.png") no-repeat right 7px / 1px 22px;
  1498. display: block;
  1499. border-bottom: 0;
  1500. height: 39px;
  1501. text-align: center;
  1502. vertical-align: middle;
  1503. z-index:60 !important;
  1504. opacity:0;
  1505. }
  1506.  
  1507. .list-table .list-table-header:hover .header-title {opacity:1;
  1508. -moz-transition-property: all;
  1509. -o-transition-property: all;
  1510. -webkit-transition-property: all;
  1511. transition-property: all;
  1512. -moz-transition-duration: 0.3s;
  1513. -o-transition-duration: 0.3s;
  1514. -webkit-transition-duration: 0.3s;
  1515. transition-duration: 0.3s;
  1516. -moz-transition-timing-function: ease-in-out;
  1517. -o-transition-timing-function: ease-in-out;
  1518. -webkit-transition-timing-function: ease-in-out;
  1519. transition-timing-function: ease-in-out;}
  1520.  
  1521. .list-table .list-table-header .header-title:last-child {
  1522. background-image: none;
  1523. }
  1524.  
  1525. .list-table .list-table-header .header-title.status,.list-table .list-table-header .header-title.number,.list-table .list-table-header .header-title.image,.list-table .list-table-header .header-title.tags {
  1526. background-image: none;
  1527. display:none !important;
  1528. }
  1529.  
  1530. .list-table .list-table-header .header-title.title {
  1531. text-align: center;
  1532. width:90px;
  1533. line-height: 40px;
  1534. padding:0 !important;
  1535. }
  1536.  
  1537. .list-table .list-table-header .header-title.score {
  1538. text-align: center;
  1539. width:90px;
  1540. line-height: 40px;
  1541. padding:0 !important;
  1542. }
  1543.  
  1544. .list-table .list-table-header .header-title.type {
  1545. text-align: center;
  1546. width:90px;
  1547. line-height: 40px;
  1548. padding:0 !important;
  1549. }
  1550.  
  1551. .list-table .list-table-header .header-title.progress {
  1552. text-align: center;
  1553. width:90px;
  1554. line-height: 40px;
  1555. padding:0 !important;
  1556. }
  1557.  
  1558. .list-table .list-table-header .header-title.chapters {
  1559. text-align: center;
  1560. width:90px;
  1561. line-height: 40px;
  1562. padding:0 !important;
  1563. }
  1564.  
  1565. .list-table .list-table-header .header-title.volumes {
  1566. text-align: center;
  1567. width:90px;
  1568. line-height: 40px;
  1569. padding:0 !important;
  1570. }
  1571.  
  1572. .list-table .list-table-header .header-title.rated {
  1573. text-align: center;
  1574. width:90px;
  1575. line-height: 40px;
  1576. padding:0 !important;
  1577. }
  1578.  
  1579. .list-table .list-table-header .header-title.started {
  1580. text-align: center;
  1581. width:90px;
  1582. line-height: 40px;
  1583. padding:0 !important;
  1584. display:none;
  1585. }
  1586.  
  1587. .list-table .list-table-header .header-title.finished {
  1588. text-align: center;
  1589. width:90px;
  1590. line-height: 40px;
  1591. padding:0 !important;
  1592. }
  1593.  
  1594. .list-table .list-table-header .header-title.days {
  1595. text-align: center;
  1596. width:90px;
  1597. line-height: 40px;
  1598. padding:0 !important;
  1599. }
  1600.  
  1601. .list-table .list-table-header .header-title.storage {
  1602. text-align: center;
  1603. width:90px;
  1604. line-height: 40px;
  1605. padding:0 !important;
  1606. }
  1607.  
  1608. .list-table .list-table-header .header-title.retail {
  1609. text-align: center;
  1610. width:90px;
  1611. line-height: 40px;
  1612. padding:0 !important;
  1613. }
  1614.  
  1615. .list-table .list-table-header .header-title.priority {
  1616. text-align: center;
  1617. width:90px;
  1618. line-height: 40px;
  1619. padding:0 !important;
  1620. }
  1621.  
  1622. .list-table .list-table-header .header-title .link {
  1623. font-size: 11px;
  1624. color: #323232;
  1625. text-decoration: none
  1626. height:40px;
  1627. width:90px;
  1628. }
  1629.  
  1630. .list-table .list-table-header .header-title .link.sort {
  1631. position: relative;
  1632. display: inline-block;
  1633. color: #323232;
  1634. height:40px;
  1635. width:90px;
  1636. white-space: nowrap;
  1637. -moz-transition-property: all;
  1638. -o-transition-property: all;
  1639. -webkit-transition-property: all;
  1640. transition-property: all;
  1641. -moz-transition-duration: 0.3s;
  1642. -o-transition-duration: 0.3s;
  1643. -webkit-transition-duration: 0.3s;
  1644. transition-duration: 0.3s;
  1645. -moz-transition-timing-function: ease-in-out;
  1646. -o-transition-timing-function: ease-in-out;
  1647. -webkit-transition-timing-function: ease-in-out;
  1648. transition-timing-function: ease-in-out
  1649. }
  1650.  
  1651. .list-table .list-table-header .header-title .link.sort:hover {
  1652. color: #000;
  1653. background-color: rgba(0,0,0,.5);
  1654. height:40px;
  1655. width:90px;
  1656. }
  1657.  
  1658. .list-table .list-table-header .header-title .sort-icon {
  1659. color: #fff;
  1660. }
  1661.  
  1662.  
  1663. /* customize list */
  1664.  
  1665. .list-table .list-table-data{
  1666. }
  1667.  
  1668. .list-table .list-table-data:hover {
  1669. box-sizing: border-box;
  1670. -moz-transition-property: all;
  1671. -o-transition-property: all;
  1672. -webkit-transition-property: all;
  1673. transition-property: all;
  1674. -moz-transition-duration: 0.3s;
  1675. -o-transition-duration: 0.3s;
  1676. -webkit-transition-duration: 0.3s;
  1677. transition-duration: 0.3s;
  1678. -moz-transition-timing-function: ease-in-out;
  1679. -o-transition-timing-function: ease-in-out;
  1680. -webkit-transition-timing-function: ease-in-out;
  1681. transition-timing-function: ease-in-out;
  1682. }
  1683.  
  1684.  
  1685. .list-table .list-table-data:hover .data.title {
  1686. text-shadow: 0 0 2px #000, 0 0 1px #000, 0 1px 7px #000, 0 0 0.5px #000;
  1687. color:#fff;
  1688. transition: .1s linear;
  1689. }
  1690.  
  1691.  
  1692. .header a:hover,.list-table .list-table-data a:not(.edit-disabled):hover {
  1693. text-decoration:underline;
  1694. }
  1695.  
  1696.  
  1697. /**
  1698. * List Container - List Table - Items
  1699. */
  1700.  
  1701. .list-table .list-table-data .data {
  1702. display: table-cell;
  1703. padding: 4px 0;
  1704. text-align: center;
  1705. vertical-align: middle;
  1706. color: #fff !important;
  1707. border:none;
  1708.  
  1709. }
  1710.  
  1711. .list-table .list-table-data a:not(.edit-disabled):hover {
  1712. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  1713. color: #fff !important;
  1714. }
  1715.  
  1716. .list-table .list-table-data a.edit-disabled {
  1717. cursor: text;
  1718. color: #fff;
  1719. }
  1720.  
  1721.  
  1722.  
  1723. .list-table .list-table-data .data.title .link {
  1724. font-size: 17px !important;
  1725. text-decoration: none !important;
  1726. font-family: 'Rancho', sans-serif;
  1727. font-weight:100 !important;
  1728. transition: all 0.1s ease 0s;
  1729. /*text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important;*/
  1730. color:#fff !important;
  1731. }
  1732.  
  1733. .list-table .list-table-data:hover .data.title .link {
  1734. letter-spacing: 0.5px;
  1735. transition: all 0.1s ease 0s;
  1736. color:#fff !important;
  1737. }
  1738.  
  1739. .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 {
  1740. text-shadow: 0 0 2px #F54EE7, 0 0 1px #F54EE7, 1px 1px 7px #E32BD4, 0 0 0 #F54EE7 !important;
  1741. color: #fff !important;
  1742. font-size: 0.9em;
  1743. text-align:right !important;
  1744. vertical-align:middle !important;
  1745. width: 180px !important;
  1746. display:block;
  1747. opacity:0;
  1748. }
  1749.  
  1750.  
  1751.  
  1752. .list-table .list-table-data:hover .data.title .rewatching, .list-table .list-table-data:hover .data.title .rereading, .list-table .list-table-data:hover .data.title .content-status {
  1753. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important;
  1754. color: #fff !important;
  1755. font-size: 1.0em;
  1756. right: 4px !important;
  1757. top: 30px !important;
  1758. vertical-align:middle !important;
  1759. width: 80px !important;
  1760. text-align:right;
  1761. display:block;
  1762. opacity:1;
  1763. position:absolute;
  1764. font-weight: bold;
  1765. }
  1766.  
  1767. .list-table .list-table-data .data.season {
  1768. text-shadow: 0 0 2px #F54EE7, 0 0 1px #F54EE7, 1px 1px 7px #E32BD4, 0 0 0 #F54EE7 !important;
  1769. color: #fff !important;
  1770. font-size: 0.9em;
  1771. text-align:left !important;
  1772. vertical-align:middle !important;
  1773. width: 80px !important;
  1774. display:block;
  1775. opacity:0;
  1776. }
  1777.  
  1778. .list-table .list-table-data:hover .data.season {
  1779. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important;
  1780. color: #fff !important;
  1781. font-size: 1.0em;
  1782. left: 4px !important;
  1783. top: 30px !important;
  1784. vertical-align:middle !important;
  1785. display:block;
  1786. opacity:1;
  1787. position:absolute;
  1788. font-weight: bold;
  1789.  
  1790. }
  1791.  
  1792. .list-table .list-table-data .data.score .link {
  1793. font-size: 1.2em;
  1794. font-weight: bold
  1795. }
  1796.  
  1797. td.td1.borderRBL {
  1798. color: #fff !important;
  1799. }
  1800.  
  1801. /* */
  1802. .list-table .list-table-data .data.title .more {
  1803. position: relative;
  1804. }
  1805.  
  1806. .list-table .more-info {
  1807. display: none;
  1808. }
  1809.  
  1810. .list-table .more-info .more-content {
  1811. padding: 10px;
  1812. }
  1813.  
  1814. /* */
  1815.  
  1816. .list-table .list-table-data .data.status {
  1817. width: 4px;
  1818. z-index:9 !important;
  1819. }
  1820.  
  1821. .list-table .list-table-data .data.status .text {
  1822. display: none
  1823. }
  1824.  
  1825. .list-table .list-table-data .data.status.reading, .list-table .list-table-data .data.status.watching {
  1826. /* background-color: #2db039 */
  1827. background-color:transparent;
  1828. }
  1829.  
  1830. .list-table .list-table-data .data.status.plantoread, .list-table .list-table-data .data.status.plantowatch {
  1831. /* background-color: #c3c3c3 */
  1832. background-color:transparent;
  1833. }
  1834.  
  1835. .list-table .list-table-data .data.status.completed {
  1836. /* background-color: #26448f */
  1837. background-color:transparent;
  1838. }
  1839.  
  1840.  
  1841. .list-table .list-table-data .data.status.onhold {
  1842. /*background-color: #f1c83e*/
  1843. background-color:transparent;
  1844. }
  1845.  
  1846. .list-table .list-table-data .data.status.dropped {
  1847. /*background-color: #a12f31*/
  1848. background-color:transparent;
  1849. }
  1850.  
  1851.  
  1852.  
  1853. /*list status*/
  1854.  
  1855. /* .list-table .list-table-data:hover .data.status.completed:before, .list-table .list-table-data:hover .data.status.reading:before, .list-table .list-table-data:hover .data.status.watching:before,.list-table .list-table-data:hover .data.status.plantoread:before, .list-table .list-table-data:hover .data.status.plantowatch:before,.list-table .list-table-data:hover .data.status.onhold:before,.list-table .list-table-data:hover .data.status.dropped:before */
  1856.  
  1857. .list-table .list-table-data:hover .data.status.completed:before, .list-table .list-table-data:hover .data.status.reading:before, .list-table .list-table-data:hover .data.status.watching:before,.list-table .list-table-data:hover .data.status.plantoread:before, .list-table .list-table-data:hover .data.status.plantowatch:before,.list-table .list-table-data:hover .data.status.onhold:before,.list-table .list-table-data:hover .data.status.dropped:before {
  1858. height: 25px;
  1859. width:25px !important;
  1860. background-position:50% 50%;
  1861. background-repeat: no-repeat;
  1862. background-size:15px 17px;
  1863. display: inline-block !important;
  1864. position: relative;
  1865. left: 25px !important;
  1866. top: 0 !important;
  1867. z-index: 10 !important;
  1868. content: "";
  1869. pointer-events: none;
  1870. opacity: 1 !important; }
  1871.  
  1872. .list-table .list-table-data:hover .data.status.completed:before {
  1873. /* background-color: #26448f !important; */
  1874. color:#fff;
  1875. content: "\f05d";
  1876. font-size: 1.5em;
  1877. line-height:25px;
  1878. font-family: 'FontAwesome' !important;
  1879. }
  1880.  
  1881. .list-table .list-table-data:hover .data.status.watching:before, .list-table .list-table-data:hover .data.status.reading:before
  1882. {
  1883. /*background-color: #2db039 !important;*/
  1884. color:#fff;
  1885. content: "\f008";
  1886. font-size: 1.5em;
  1887. line-height:25px;
  1888. font-family: 'FontAwesome' !important;}
  1889.  
  1890. .list-table .list-table-data:hover .data.status.plantowatch:before, .list-table .list-table-data:hover .data.status.plantoread:before
  1891. {/*background-color: #c3c3c3 !important;*/
  1892. color:#fff;
  1893. content: "\f073";
  1894. font-size: 1.5em;
  1895. line-height:25px;
  1896. font-family: 'FontAwesome' !important;}
  1897.  
  1898. .list-table .list-table-data:hover .data.status.onhold:before
  1899. {/*background-color: #f1c83e !important;*/
  1900. color:#fff;
  1901. content: "\f017";
  1902. font-size: 1.5em;
  1903. line-height:25px;
  1904. font-family: 'FontAwesome' !important;}
  1905.  
  1906. .list-table .list-table-data:hover .data.status.dropped:before
  1907. {/*background-color: #a12f31 !important;*/
  1908. color:#fff;
  1909. content: "\f00d";
  1910. font-size: 1.5em;
  1911. line-height:25px;
  1912. font-family: 'FontAwesome' !important;}
  1913.  
  1914.  
  1915.  
  1916.  
  1917. .link.sort + a {display: none;} /* remove watch buttons */
  1918.  
  1919.  
  1920.  
  1921. /* tags */
  1922.  
  1923. .data.tags:before
  1924. {margin:0;
  1925. width: 12px !important;
  1926. padding: 5px 0 !important;
  1927. z-index: 10;}
  1928.  
  1929. data.tags:hover:before
  1930. {width: 15px;
  1931. padding: 5px 5px 5px 4px !important;
  1932. font-size: 1.1em;
  1933.  
  1934. color: #fff;
  1935. cursor: default;}
  1936.  
  1937. .data.tags:before, .data.tags:hover:before
  1938. {position: absolute;
  1939. left: 50px;
  1940. top: 0px;
  1941. height: 15px !important;}
  1942.  
  1943. .list-item:hover .data.tags:before
  1944. {opacity: 1;}
  1945.  
  1946.  
  1947.  
  1948. .data.tags
  1949. {opacity: 1;
  1950. height: 100%;
  1951. width: 0;
  1952. z-index: 25;}
  1953.  
  1954. .data.tags *
  1955. {z-index: 25;
  1956. transition: opacity .15s ease-in-out;
  1957. color:#000;
  1958. margin-top:25px;}
  1959.  
  1960. /*tags animation */
  1961.  
  1962. @-webkit-keyframes fadeIn {
  1963. from {
  1964. opacity: 0;
  1965. }
  1966.  
  1967. to {
  1968. opacity: 1;
  1969. }
  1970. }
  1971.  
  1972. @keyframes fadeIn {
  1973. from {
  1974. opacity: 0;
  1975. }
  1976.  
  1977. to {
  1978. opacity: 1;
  1979. }
  1980. }
  1981.  
  1982. .data.tags:hover *
  1983. {width: 180px;
  1984. -webkit-animation-name: fadeIn;
  1985. animation-name: fadeIn;
  1986. -webkit-animation-duration: .5s;
  1987. animation-duration: .5s;
  1988. -webkit-animation-fill-mode: both;
  1989. animation-fill-mode: both;
  1990. }
  1991.  
  1992. .data.tags a
  1993. {
  1994. text-align:left;
  1995. font-size: 1.0em;
  1996. color: #000;
  1997. white-space:nowrap;
  1998. }
  1999.  
  2000. .data.tags:before
  2001. {content: '';
  2002. border: none;
  2003. opacity: 0;
  2004. margin-top: 0px;
  2005. background-image:url(http://i.imgur.com/WC8S1cb.png);
  2006. background-size: 15px 14px;
  2007. background-repeat:no-repeat;
  2008. background-position:50% 50%;
  2009. letter-spacing: -1px;
  2010. background-color: transparent;
  2011. width: 25px !important;
  2012. height:15px !important;
  2013. display:block;}
  2014.  
  2015. .data.tags:hover:before
  2016. {content: '';
  2017. background-image:url(http://i.imgur.com/WC8S1cb.png);
  2018. background-size: 15px 14px;
  2019. background-repeat:no-repeat;
  2020. background-position:50% 50%;
  2021. letter-spacing: -1px;
  2022. color: #6ebcf4;
  2023. width: 25px !important;
  2024. height:15px !important;
  2025. display:block;}
  2026.  
  2027.  
  2028. .data.tags textarea
  2029. {position: absolute;
  2030. font-family: monospace!important;
  2031. z-index: 50;
  2032. width:180px !important;
  2033. height:200px !important;
  2034. }
  2035.  
  2036. .edit-transition.edit-leave
  2037. {display: none;}
  2038.  
  2039.  
  2040. .tags .edit
  2041. {position: absolute;
  2042. top: -25px;
  2043. left: 50px;
  2044. width: 25px !important;
  2045. height: 25px;
  2046. font-size: 0 !important;}
  2047.  
  2048. .tags .edit:hover
  2049. {width: 25px !important;}
  2050.  
  2051.  
  2052. div[class*="tags-"]
  2053. {overflow: hidden;
  2054. height: 200px;
  2055. background: rgba(255, 255, 255, 0.9);
  2056.  
  2057. }
  2058.  
  2059. .anime [href*="&tag="]
  2060. {white-space: normal !important;
  2061. text-transform: none;
  2062. pointer-events: none;}
  2063.  
  2064. /*List unit*/
  2065.  
  2066.  
  2067. .list-table
  2068. {display: table-row;}
  2069.  
  2070. .data.status, .data.image ~ td
  2071. {position: absolute;}
  2072.  
  2073. .list-table .list-table-data .data.image a
  2074. {
  2075. background-size: cover;
  2076. background-repeat: no-repeat;
  2077. background-position: center center !important;}
  2078.  
  2079. .list-item
  2080. {
  2081. margin:8px;
  2082. position: relative;
  2083. float: left;
  2084. }
  2085.  
  2086. .list-item .data
  2087. {opacity: 1;}
  2088.  
  2089. .list-item .list-table-data
  2090. {
  2091. position: absolute;}
  2092.  
  2093. .list-table .list-table-data .data
  2094. {padding: 0;
  2095. border-bottom: none;}
  2096.  
  2097. .list-item .data.image
  2098. {z-index: 0 !important;
  2099. position: absolute;}
  2100.  
  2101. .list-item .data.image img
  2102. {height: 100%; width: 100%;}
  2103.  
  2104. .list-item, .list-item .list-table-data
  2105. {width: 180px !important;
  2106. height: 283px !important;
  2107. }
  2108.  
  2109. .list-item .data.title {width: 180px !important;
  2110. height: 283px !important;}
  2111.  
  2112. .data.image{overflow:hidden;
  2113. width: 180px !important;
  2114. height: 225px !important;
  2115. margin-top:0px;
  2116. }
  2117.  
  2118. .data.image a:before
  2119. {content: "";
  2120. display: inline-block !important;
  2121. position: relative;
  2122. width: 180px;
  2123. height: 225px;
  2124. background-color: rgba(0,0,0,.3);
  2125. background-position: center !important;
  2126. background-repeat: no-repeat !important;
  2127. background-size: cover;
  2128. z-index: 5;
  2129. box-shadow: 0 0 5px black inset;
  2130. box-sizing: border-box;
  2131. transition: all .2s ease-in-out;}
  2132.  
  2133.  
  2134.  
  2135. .list-table .list-table-data:hover .data.image a:before {
  2136. transition: all .2s ease-in-out;
  2137. transform: scale(1.1);
  2138. }
  2139.  
  2140. .list-item .data.number {
  2141.  
  2142. padding-left: 7px;
  2143. text-align:left !important;
  2144. line-height:25px !important;
  2145. width:173px;
  2146. height:25px;
  2147. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  2148. background: -webkit-linear-gradient(rgba(0,0,0,.7), transparent);
  2149. background: -o-linear-gradient(rgba(0,0,0,.7), transparent);
  2150. background: -moz-linear-gradient(rgba(0,0,0,.7), transparent);
  2151. background: linear-gradient(rgba(0,0,0,.7), transparent);
  2152. z-index: 1 !important;
  2153. position: absolute;
  2154.  
  2155. }
  2156.  
  2157.  
  2158. /*data item position*/
  2159. .data.title > a
  2160. {position: absolute;
  2161. z-index: 5;
  2162. top: 230px;
  2163. height: 35px !important;
  2164. line-height: 1.05em;
  2165. text-align:center;
  2166. vertical-align:middle;
  2167. width: 100%;
  2168. overflow:hidden;}
  2169.  
  2170. .list-item .data.title
  2171. {box-sizing: border-box;
  2172. height: 200px !important;
  2173. padding: 0 !important;
  2174. }
  2175.  
  2176. .list-table .list-table-header .header-title.studio {
  2177. display:none !important;
  2178. }
  2179.  
  2180.  
  2181. .list-item .data.studio {
  2182. width: 180px;
  2183. margin:0;
  2184. height: 30px !important;
  2185. top: 195px;
  2186. z-index: 1 !important;
  2187. display: table;
  2188. background-color: transparent;
  2189. background: rgba(0,0,0,0);
  2190. background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  2191. background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.7)));
  2192. background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  2193. background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  2194. background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  2195. background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  2196. }
  2197.  
  2198. .list-item .data.studio span {
  2199. display: table-cell;
  2200. vertical-align: middle;
  2201. }
  2202.  
  2203. .list-item .data.score
  2204. {right: 5px;
  2205. width: 15px; text-align: left;
  2206. bottom: -5px !important;
  2207. }
  2208.  
  2209. .list-item .data.score a {
  2210. color:#fff;
  2211. }
  2212.  
  2213. .list-item .data.score:hover * {
  2214. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #FFF !important;
  2215. color:#fff;
  2216. }
  2217.  
  2218. .list-item .data.studio * {
  2219. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important;
  2220. font-weight: bold !important;
  2221. }
  2222.  
  2223. .score select.edit-transition
  2224. {margin-left: -5px;}
  2225.  
  2226. .data.progress, .data.volume, a[href*="%C2%9"]
  2227. {
  2228. bottom: -5px !important;
  2229. transition: opacity .15s ease-in-out;
  2230. padding-left:5px !important;}
  2231.  
  2232. .data.chapter {
  2233. bottom: -5px !important;
  2234. padding-left:70px !important;
  2235. }
  2236.  
  2237. .data.progress *, .data.volume *, .data.chapter *{
  2238. color:#fff;}
  2239.  
  2240.  
  2241. .list-item .data.type
  2242. {right: 5px !important;
  2243. width:50px !important;
  2244. top: 5px !important;
  2245. text-align:right !important;
  2246. font-size: 1em;
  2247. transition: opacity .15s ease-in-out;
  2248. font-weight:bold;
  2249. opacity: 1;
  2250. z-index:2;
  2251. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  2252. }
  2253.  
  2254.  
  2255. /* add edit more */
  2256.  
  2257. .list-table .list-table-data .data.title .add-edit-more {
  2258. top:0;
  2259. left: 75px;
  2260. font-size:0 !important;
  2261. position: absolute;
  2262. z-index: 10 !important;
  2263. text-align:center !important;
  2264. vertical-align:middle !important;
  2265. width: 25px !important;
  2266. height: 25px !important;
  2267. display:block;
  2268.  
  2269. }
  2270.  
  2271.  
  2272. .add-edit-more {
  2273. opacity: 0;
  2274. transition: all 0s ease 0s;
  2275.  
  2276. }
  2277. .list-item:hover .add-edit-more {
  2278. opacity: 1;
  2279. }
  2280.  
  2281. .list-table .list-table-data .data.title .edit a {
  2282. background-image: url(http://i.imgur.com/OT1yCLP.png);
  2283. display: block;
  2284. width: 25px;
  2285. height: 25px;
  2286. background-size: 15px 15px;
  2287. background-repeat: no-repeat;
  2288. background-color: transparent;
  2289. background-position: 50% 50%;
  2290. }
  2291.  
  2292. .list-table .list-table-data .data.title .more a {
  2293. background-image: url(http://i.imgur.com/cUAaila.png);
  2294. display: inline-block;
  2295. width: 15px;
  2296. height: 15px;
  2297. background-size: cover;
  2298. color: transparent !important;
  2299. display:none;
  2300. }
  2301.  
  2302. .list-table .list-table-data .data.title .add a {
  2303. background-image: url(http://i.imgur.com/AoTgUAL.png);
  2304. display: block;
  2305. width: 25px;
  2306. height: 25px;
  2307. background-size: 15px 15px;
  2308. background-repeat: no-repeat;
  2309. background-color: transparent;
  2310. background-position: 50% 50%;
  2311. }
  2312.  
  2313.  
  2314.  
  2315. /* */
  2316.  
  2317.  
  2318.  
  2319. .list-unit .loading-space {
  2320. margin: 0px;
  2321. height: 20px;
  2322. font-size: 20px;
  2323. text-align: center;
  2324. }
  2325.  
  2326. /*override codes*/
  2327. .header .header-info > a {color: rgba(255,255,255,1) !important;}
  2328. .header .header-info {color: rgba(255,255,255,0.8) !important;}
  2329. .header .header-menu {color: rgba(255,255,255,0.8) !important;}
  2330. .header .header-menu .btn-menu {color: rgba(255,255,255,0.8) !important;}
  2331. .username {color: rgba(255,255,255,0.8) !important;}
  2332. #header-menu-button {color: rgba(255,255,255,0.8) !important;}
  2333. .header a {
  2334. font-weight: bold;
  2335. color: #fff !important;
  2336. }
  2337.  
  2338. /*profile image & name */
  2339.  
  2340. .cover-block::after {
  2341. height: 120px !important;
  2342. width: 120px! important;
  2343. background-repeat: no-repeat;
  2344. background-size: contain;
  2345. position: absolute;
  2346. display:block !important;
  2347. margin-left:57px;
  2348. margin-top:-70px;
  2349. content: "";
  2350. padding: 5px;
  2351. background-color:#fff;
  2352. box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  2353. border-radius:5px;
  2354. border: #fff 2px solid;
  2355.  
  2356. }
  2357.  
  2358. .cover-block::before {
  2359. position: absolute;
  2360. display:block !important;
  2361. margin:auto;
  2362. bottom:5px;
  2363. width: 1200px;
  2364. text-align:center;
  2365. color: #fff !important;
  2366. font-size: 18px !important;
  2367. font-family: Rancho;
  2368. /* text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important; */
  2369. letter-spacing: 0 !important;
  2370. }
  2371.  
  2372. /* */
  2373. .header .header-title {
  2374. position: absolute;
  2375. top: 0px;
  2376. left: 40px;
  2377. background-image: url("http://i.imgur.com/39cRtfK.png");
  2378. background-position: left top;
  2379. background-repeat: no-repeat;
  2380. background-size: auto 50px;
  2381. display: block;
  2382. width: 50px !important;
  2383. height: 50px;
  2384. text-indent: -9999px;
  2385. overflow: hidden
  2386. }
  2387.  
  2388. /* customization */
  2389.  
  2390. /* The list background */
  2391.  
  2392. body[data-query*='"status":1'],
  2393. body[data-query*='"status":2'],
  2394. body[data-query*='"status":3'],
  2395. body[data-query*='"status":4'],
  2396. body[data-query*='"status":6'],
  2397. body[data-query*='"status":7'] {
  2398. background-attachment: fixed !important;
  2399. background-position: 50% 50%;
  2400. background-repeat: no-repeat !important;
  2401. background-size:cover;
  2402.  
  2403. }
  2404.  
  2405. * { cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important;}
  2406.  
  2407. /* */
  2408.  
  2409.  
  2410.  
  2411. span a[href*="&tag=!"], span a[href*="&tag=%40"], span a[href*="&tag=~"] {display: none !important;}
  2412.  
  2413. /* favorite */
  2414. @media entrytags-favorites {}
  2415. a[href$="&tag=*"]
  2416. {position: absolute;
  2417. left: 0;
  2418. width: 150px;
  2419. height: 0;
  2420. font-size: 15px;
  2421. top: 0px;
  2422. color: transparent !important;
  2423. }
  2424.  
  2425. a[href$="&tag=*"]:after
  2426. {content: '\f005';
  2427. font-family: 'FontAwesome' !important;
  2428. display: inline-block;
  2429. pointer-events: all;
  2430. /* change the position below, and add in margin-whatever if it's not enough */
  2431. position: absolute;
  2432. top: 238px;
  2433. left: 145px;
  2434. /* change the size of font */
  2435. font-size: 1.1em;
  2436. color: #fff !important;
  2437. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #fff !important;}
  2438.  
  2439.  
  2440.  
  2441. /* Intro animation */
  2442. @keyframes intro {
  2443. from {
  2444. opacity: 0;
  2445. margin-top: 100vh;
  2446. }
  2447. 16% {
  2448. opacity: 0;
  2449. margin-top: 100vh;
  2450. }
  2451. to {
  2452. opacity: 1;
  2453. margin-top: 100px;
  2454. }
  2455. }
  2456. .list-container {
  2457. animation: intro 2s;
  2458. }
  2459.  
  2460.  
  2461.  
  2462. /* */
  2463.  
  2464. footer {
  2465. position: fixed;
  2466. bottom: 0px;
  2467. left: 0px;
  2468. width: 100%;
  2469. height:30px !important;
  2470. z-index: 9998;
  2471.  
  2472. }
  2473.  
  2474. #footer-block {
  2475. display:block;
  2476. background-color: transparent;
  2477. background: rgba(0,0,0,0);
  2478. background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  2479. background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.6)));
  2480. background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  2481. background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  2482. background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  2483. background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  2484. }
  2485.  
  2486. #copyright {
  2487. color: #FFF;
  2488. letter-spacing: 1px;
  2489. text-shadow: 0px 3px 3px #000;
  2490. font-size:10px;
  2491. }
  2492.  
  2493. #copyright::after {
  2494. content: "Shelter Style V2 Layout designed by Takana no Hana"
  2495. }
  2496.  
  2497. .cover-block::after{
  2498. opacity: 0;
  2499. }
  2500.  
  2501. /* LOW RES COVER SIZE
  2502. You only see this if the import for high res covers goes down.
  2503. */
  2504. a img{
  2505. background-size: cover !important;
  2506. height: 250px !important;
  2507. width: 178px !important;
  2508. }
  2509.  
  2510. /* HD COVER SETTINGS
  2511. */
  2512. .data.image a:before
  2513. {content: "";
  2514. display: inline-block !important;
  2515. position: absolute;
  2516. width: 180px;
  2517. height: 225px;
  2518. background-color: rgba(0,0,0,.3);
  2519. background-position: center !important;
  2520. background-repeat: no-repeat !important;
  2521. background-size: cover;
  2522. z-index: 5;
  2523. box-shadow: 0 0 5px black inset;
  2524. box-sizing: border-box;
  2525. transition: all .2s ease-in-out;}
  2526.  
  2527.  
  2528. /* Other Sort Options */
  2529. .list-table .list-table-header .header-title.days, .list-table .list-table-header .header-title.licensor {
  2530. color: gray !important;
  2531. }
  2532.  
  2533. .list-table .list-table-header .header-title.licensor{
  2534. padding-top: 20px;
  2535. }
  2536.  
  2537.  
  2538. /* Banner Avatar Reset */
  2539. .list-table .list-table-header:after {
  2540. position: absolute !important;
  2541. top:150px;
  2542. }
Advertisement
Add Comment
Please, Sign In to add comment