Advertisement
Shishipastebin

Untitled

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