Advertisement
Guest User

doent work :(

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