Guest User

Untitled

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