Advertisement
Guest User

Untitled

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