Advertisement
Guest User

Untitled

a guest
Jan 16th, 2018
318
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 48.25 KB | None | 0 0
  1. /*Layout CSS was originally made by Takana no hana, minor edits by Shishio-kun
  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 url(https://malcat-gen.appspot.com/series?preset=dataimagelinkbefore);
  11. @import url(https://fonts.googleapis.com/css?family=Rancho);
  12. @import url(https://fonts.googleapis.com/css?family=Slabo+27px|PT+Sans+Narrow);
  13.  
  14.  
  15.  
  16. /*BANNER AVATAR
  17. */
  18. .cover-block::after {background-image: url("https://pbs.twimg.com/profile_images/913564057457672193/VgZFSBfd_400x400.jpg");}
  19.  
  20. /* BANNER QUOTE
  21. */
  22. .cover-block::before {
  23. content: "It's impossible for humans to forget their emotions.";
  24. }
  25.  
  26. /*CURRENTLY WATCHING MAIN BACKGROUND*/
  27. body[data-query*='"status":1'] {
  28. background-image: url("http://images6.fanpop.com/image/photos/40600000/Assassination-Classroom-assassination-classroom-40615443-640-360.jpg");
  29. }
  30. /*COMPLETED MAIN BACKGROUND*/
  31. body[data-query*='"status":2'] {
  32. background-image: url("https://images7.alphacoders.com/849/849213.png");
  33. }
  34. /*ON HOLD MAIN BACKGROUND*/
  35. body[data-query*='"status":3'] {
  36. background-image: url("https://images.alphacoders.com/306/thumb-1920-306501.jpg");
  37. }
  38. /*DROPPED MAIN BACKGROUND*/
  39. body[data-query*='"status":4'] {
  40. background-image: url("https://images.alphacoders.com/163/163821.jpg");
  41. }
  42. /*PLANNED MAIN BACKGROUND*/
  43. body[data-query*='"status":6'] {
  44. background-image: url("https://i.ytimg.com/vi/YTUO4G9SpW8/maxresdefault.jpg");
  45. }
  46. /*ALL ANIME/MANGA MAIN BACKGROUND*/
  47. body[data-query*='"status":7'] {
  48. background-image: url("https://wallpapertag.com/wallpaper/full/6/8/4/431250-free-gurren-lagann-background-3600x1920-desktop.jpg");
  49. }
  50.  
  51.  
  52.  
  53.  
  54.  
  55.  
  56. /* OTHER CODES */
  57.  
  58. /* picture at the bottom of your list
  59. ** please note that default is a seiren picture even if you delete the image url below(it's just a sample image which you need to replace).
  60. ** if you don't want this section, just delete the image url
  61. */
  62. .list-unit .loading-space {
  63. height:250px;
  64. width:1000px;
  65. background-image:url(http://i.imgur.com/oUcAp2Y.png);
  66. }
  67.  
  68.  
  69. #advanced-options {
  70. position: fixed;
  71. top: 24px;
  72. left: 0;
  73. right: 0;
  74. background-color: rgba(255,255,255,.9);
  75. display: none;
  76. width: 860px;
  77. margin: 0 auto;
  78. padding: 25px 0px 30px;
  79. -moz-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  80. -webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  81. -o-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  82. -ms-box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  83. box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  84. color: #323232;
  85. text-align: left;
  86. font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  87. z-index: 1101;
  88. border: none;
  89. background-image: url();
  90. background-repeat: no-repeat;
  91. background-size: cover;
  92. background-position: 50% 100%; }
  93.  
  94. #advanced-options .advanced-options-header {
  95. width: 750px;
  96. margin: 0px auto;
  97. padding-bottom: 4px;
  98. border-bottom: 1px solid #BEBEBE;
  99. font-size: 16px;
  100. color:rgba(0,0,0,.6) !important;
  101. }
  102.  
  103.  
  104. #advanced-options .advanced-options-header .description {
  105. font-size: 12px;
  106. font-weight: normal;
  107. margin-left: 8px;
  108. color:rgba(0,0,0,.6) !important;
  109. }
  110.  
  111. #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 {
  112. color:rgba(0,0,0,.6) !important;
  113. }
  114.  
  115. #advanced-options select {
  116. -ms-appearance: none;
  117. -webkit-appearance: none;
  118. -moz-appearance: none;
  119. appearance: none;
  120. background-image: url(/img/pc/ownlist/icon_pulldown_triangle.png);
  121. background-repeat: no-repeat;
  122. background-position: center right;
  123. background-size: 18px 8px;
  124. background-color: #FFFFFF;
  125. display: inline-block;
  126. height: 25px;
  127. padding: 4px 20px 4px 4px;
  128. padding-right: 4px\0;
  129. border: #BEBEBE 1px solid;
  130. border-radius: 0px;
  131. font-size: 12px;
  132. }
  133. #advanced-options select::-ms-expand {
  134. display: none;
  135. }
  136.  
  137. #advanced-options select:disabled {
  138. background-image: url(/img/pc/ownlist/icon_pulldown_triangle_disable.png);
  139. color: #9B9B9B;
  140. }
  141.  
  142. #advanced-options input[type=text] {
  143. padding: 4px;
  144. border: #BEBEBE 1px solid;
  145. }
  146.  
  147. #advanced-options input:focus {
  148. outline: none;
  149. }
  150.  
  151.  
  152. /* sort */
  153. #advanced-options .sort-widget {
  154. margin: 0px auto;
  155. padding: 12px 0px 0px;
  156. width: 750px;
  157. }
  158. #advanced-options .sort-widget:last-of-type {
  159. padding-bottom: 45px;
  160. }
  161.  
  162. #advanced-options .sort-widget select {
  163. width: 172px;
  164. margin-right: 8px;
  165. }
  166.  
  167. #advanced-options .sort-widget input[type=radio] {
  168. display: none;
  169. }
  170. #advanced-options .sort-widget input[type=radio] + label {
  171. background-color: #FFFFFF;
  172. display: inline-block;
  173. width: 56px;
  174. padding: 5px 0px;
  175. border: #BEBEBE 1px solid;
  176. border-radius: 4px;
  177. color: #323232;
  178. font-size: 12px;
  179. text-align: center;
  180. cursor: pointer;
  181. }
  182. #advanced-options .sort-widget input[type=radio]:checked + label {
  183. background-color: #244291;
  184. border: #244291 1px solid;
  185. color: #FFFFFF;
  186. }
  187. #advanced-options .sort-widget input[type=radio]:disabled + label {
  188. border: #BEBEBE 1px solid;
  189. color: #9B9B9B;
  190. }
  191. #advanced-options .sort-widget input[type=radio]:checked:disabled + label {
  192. background-color: #FFFFFF;
  193. border: #BEBEBE 1px solid;
  194. color: #9B9B9B;
  195. }
  196.  
  197. /* filter */
  198. #advanced-options .filter-widget {
  199. margin: 0px auto;
  200. padding: 12px 0px 0;
  201. width: 750px;
  202. }
  203.  
  204. #advanced-options .filter-widget select {
  205. margin-right: 8px;
  206. font-size: 12px;
  207. }
  208.  
  209. #advanced-options .filter-widget.title input[type=text] {
  210. width: 360px;
  211. }
  212.  
  213. #advanced-options .filter-widget.airing-status select,
  214. #advanced-options .filter-widget.publishing-status select {
  215. width: 152px;
  216. }
  217.  
  218. #advanced-options .filter-widget.producer select,
  219. #advanced-options .filter-widget.magazine select {
  220. width: 360px;
  221. }
  222.  
  223. #advanced-options .filter-widget.aired-date select.year,
  224. #advanced-options .filter-widget.published-date select.year {
  225. width: 80px;
  226. }
  227.  
  228. #advanced-options .filter-widget.aired-date select.month,
  229. #advanced-options .filter-widget.published-date select.month,
  230. #advanced-options .filter-widget.aired-date select.day,
  231. #advanced-options .filter-widget.published-date select.day {
  232. width: 60px;
  233. }
  234.  
  235. #advanced-options .filter-widget.aired-date .text,
  236. #advanced-options .filter-widget.published-date .text {
  237. display: inline-block;
  238. margin-right: 4px;
  239. font-size: 12px;
  240. }
  241.  
  242. #advanced-options .filter-widget.aired-season select.year {
  243. width: 80px;
  244. }
  245.  
  246. #advanced-options .filter-widget.aired-season select.season {
  247. width: 110px;
  248. }
  249.  
  250. #advanced-options .sort-widget .widget-header,
  251. #advanced-options .filter-widget .widget-header {
  252. display: inline-block;
  253. width: 110px;
  254. font-size: 12px;
  255. font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  256. }
  257.  
  258. #advanced-options .sort-widget:last-of-type,
  259. #advanced-options .filter-widget:last-of-type {
  260. padding-bottom: 40px;
  261. }
  262.  
  263. #advanced-options .advanced-options-button {
  264. width: 750px;
  265. margin: 0px auto;
  266. padding: 12px 0px 0px;
  267. border-top: 1px solid #BEBEBE;
  268. text-align: center;
  269. }
  270.  
  271. #advanced-options .btn-apply,
  272. #advanced-options .btn-clear {
  273. background-color: rgba(0,0,0, 0.8);
  274. display: inline-block;
  275. width: 135px;
  276. margin: 0 4px;
  277. padding: 6px 0px;
  278. border-radius: 4px;
  279. font-size: 12px;
  280. color: #FFFFFF;
  281. text-align: center;
  282. -moz-transition-property: all;
  283. -o-transition-property: all;
  284. -webkit-transition-property: all;
  285. transition-property: all;
  286. -moz-transition-duration: 0.3s;
  287. -o-transition-duration: 0.3s;
  288. -webkit-transition-duration: 0.3s;
  289. transition-duration: 0.3s;
  290. -moz-transition-timing-function: ease-in-out;
  291. -o-transition-timing-function: ease-in-out;
  292. -webkit-transition-timing-function: ease-in-out;
  293. transition-timing-function: ease-in-out;
  294. }
  295.  
  296. #advanced-options .btn-apply:hover,
  297. #advanced-options .btn-clear:hover {
  298. background-color: rgba(0,0,0, 0.8);
  299. }
  300.  
  301.  
  302.  
  303. /**
  304. * General Styles
  305. */
  306.  
  307.  
  308. td {
  309. line-height: 1.5em;
  310. height: 35px !important;
  311. border:none !important;
  312. }
  313.  
  314. a {
  315. color: #fff;
  316. text-decoration: none;
  317. }
  318. a:hover {
  319. color: #fff !important;
  320. text-decoration: none;
  321. }
  322.  
  323. #footer-block {
  324. padding: 15px 0;
  325. background-color: #244291;
  326. color: #FFFFFF;
  327. font-family: Avenir, "lucida grande", tahoma, verdana, arial, sans-serif;
  328. display:none;
  329. }
  330.  
  331. #copyright {
  332. font-size: 12px;
  333. color: #FFFFFF;
  334. padding-top: 3px;
  335. text-align: center;
  336. }
  337.  
  338. /*
  339. * Header
  340. */
  341. .header a {
  342. font-weight: bold;
  343. color: #fff !important;
  344. }
  345. .header a:hover {
  346. text-decoration: underline;
  347. }
  348.  
  349. .header {
  350. position: absolute;
  351. color: #fff;
  352. display: block;
  353. width: 100%;
  354. height: 50px;
  355. margin: 0 auto
  356. border:none;
  357. background: -webkit-linear-gradient(rgba(0,0,0,.4), transparent); /* For Safari 5.1 to 6.0 */
  358. background: -o-linear-gradient(rgba(0,0,0,.4), transparent); /* For Opera 11.1 to 12.0 */
  359. background: -moz-linear-gradient(rgba(0,0,0,.4), transparent); /* For Firefox 3.6 to 15 */
  360. background: linear-gradient(rgba(0,0,0,.4), transparent); /* Standard syntax */
  361. -moz-transition-property: all;
  362. -o-transition-property: all;
  363. -webkit-transition-property: all;
  364. transition-property: all;
  365. -moz-transition-duration: 0.3s;
  366. -o-transition-duration: 0.3s;
  367. -webkit-transition-duration: 0.3s;
  368. transition-duration: 0.3s;
  369. -moz-transition-timing-function: ease-in-out;
  370. -o-transition-timing-function: ease-in-out;
  371. -webkit-transition-timing-function: ease-in-out;
  372. transition-timing-function: ease-in-out;
  373. z-index: 40;
  374. }
  375.  
  376. .header:hover {background-color:rgba(0,0,0,.5);
  377. -moz-transition-property: all;
  378. -o-transition-property: all;
  379. -webkit-transition-property: all;
  380. transition-property: all;
  381. -moz-transition-duration: 0.3s;
  382. -o-transition-duration: 0.3s;
  383. -webkit-transition-duration: 0.3s;
  384. transition-duration: 0.3s;
  385. -moz-transition-timing-function: ease-in-out;
  386. -o-transition-timing-function: ease-in-out;
  387. -webkit-transition-timing-function: ease-in-out;
  388. transition-timing-function: ease-in-out;
  389.  
  390. }
  391.  
  392. .header .header-menu {
  393. position: absolute;
  394. top: 5px;
  395. right: 4px
  396. }
  397. .header .header-menu.other {
  398. top: 5px;
  399. }
  400.  
  401.  
  402.  
  403. .header .header-menu .header-info {
  404. font-size: 10px;
  405. margin-top: 6px;
  406. margin-right: 15px;
  407. text-align: right;
  408. }
  409.  
  410. .header .username {
  411. font-weight: bold;
  412. }
  413.  
  414. .header .header-menu .list-menu {
  415. position: absolute;
  416. top: 25px;
  417. right: -4px;
  418. background-color: rgba(255,255,255,.8);
  419. display: none;
  420. border: none !important;
  421. -moz-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  422. -webkit-box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  423. box-shadow: rgba(0, 0, 0, 0.4) 0 0 10px;
  424. z-index: 1;
  425. }
  426.  
  427. .header .header-menu .list-menu .icon-menu {
  428. display: block;
  429. width: 150px;
  430. height: 30px;
  431. color: #000;
  432. font-size: 14px;
  433. font-weight: bold;
  434. text-decoration: none;
  435. -moz-transition-property: all;
  436. -o-transition-property: all;
  437. -webkit-transition-property: all;
  438. transition-property: all;
  439. -moz-transition-duration: 0.3s;
  440. -o-transition-duration: 0.3s;
  441. -webkit-transition-duration: 0.3s;
  442. transition-duration: 0.3s;
  443. -moz-transition-timing-function: ease-in-out;
  444. -o-transition-timing-function: ease-in-out;
  445. -webkit-transition-timing-function: ease-in-out;
  446. transition-timing-function: ease-in-out;
  447. }
  448.  
  449. .header .header-menu .list-menu .icon-menu:hover {
  450. background-color: rgba(0,0,0,.5);
  451. }
  452.  
  453. .header .header-menu .list-menu .icon-menu svg.icon {
  454. position: absolute;
  455. fill: rgba(0,0,0,.5);
  456. left: 12px;
  457. top: 4px;
  458. }
  459.  
  460. .header .header-menu .list-menu .icon-menu:hover svg.icon {
  461. fill: rgba(255,255,255,1) !important;
  462. }
  463.  
  464. .header .header-menu .list-menu .icon-menu .text {
  465. position: absolute;
  466. left: 52px;
  467. top: 6px;
  468. }
  469.  
  470. .header .header-menu .list-menu .icon-menu:hover .text {color:rgba(255,255,255,1) !important;}
  471.  
  472. .header .header-menu .btn-menu {
  473. display: block;
  474. text-align: right;
  475. color: rgba(0,0,0,0.7) !important;
  476. font-size: 12px !important;
  477. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  478. }
  479.  
  480. #header-menu-dropdown > a {color: rgba(0,0,0,.5) !important;}
  481.  
  482. /* svg.icon.icon-manga-list {color: rgba(0,0,0,.5) !important;} */
  483.  
  484. /**
  485. * Floating Menu
  486. */
  487. /**
  488. * Floating Menu
  489. */
  490. .list-menu-float:before
  491. {content: "\f0c9";
  492. font-family: 'FontAwesome' !important;
  493. display: block;
  494. text-align: center !important;
  495. text-indent: 10px;
  496. color: #fff !important;
  497. font-size:1.5em !important;
  498. height: 50px;
  499. width: 40px;
  500. line-height: 50px;}
  501.  
  502. .list-menu-float:hover:before {
  503. font-size:1.7em !important;
  504. text-shadow: 0 0 2px #fff, 0 0 1px #fff, 1px 1px 7px #fff, 0 0 0 #fff;
  505. -moz-transition-property: all;
  506. -o-transition-property: all;
  507. -webkit-transition-property: all;
  508. transition-property: all;
  509. -moz-transition-duration: 0.3s;
  510. -o-transition-duration: 0.3s;
  511. -webkit-transition-duration: 0.3s;
  512. transition-duration: 0.3s;
  513. -moz-transition-timing-function: ease-in-out;
  514. -o-transition-timing-function: ease-in-out;
  515. -webkit-transition-timing-function: ease-in-out;
  516. transition-timing-function: ease-in-out;
  517. }
  518.  
  519. .list-menu-float
  520. {position: absolute;
  521. top: 0px;
  522. left:0px;
  523. width: 50px;
  524. border: none;
  525. opacity: 1;
  526. height: 40px !important;
  527. z-index: 100;
  528.  
  529. }
  530.  
  531. .list-menu-float .icon-menu
  532. {display: block;
  533. width: 120px;
  534. background-color: #dfdfdf;
  535. height: 30px;
  536. line-height: 30px;
  537. text-indent: 10px;
  538. opacity:0;
  539. }
  540.  
  541. .list-menu-float:hover .icon-menu
  542. {opacity:1;
  543. -moz-transition-property: all;
  544. -o-transition-property: all;
  545. -webkit-transition-property: all;
  546. transition-property: all;
  547. -moz-transition-duration: 0.3s;
  548. -o-transition-duration: 0.3s;
  549. -webkit-transition-duration: 0.3s;
  550. transition-duration: 0.3s;
  551. -moz-transition-timing-function: ease-in-out;
  552. -o-transition-timing-function: ease-in-out;
  553. -webkit-transition-timing-function: ease-in-out;
  554. transition-timing-function: ease-in-out;}
  555.  
  556. .list-menu-float .icon-menu.profile
  557. {background-image: none !important;}
  558.  
  559. .list-menu-float .icon-menu.profile:before
  560. {position:absolute;
  561. width:120px !important;
  562. content: "\f007\00a0Profile";
  563. font-family: 'FontAwesome' !important;
  564. margin-top:5px !important;
  565. margin-left:-65px !important;
  566. color: #000;
  567. text-align: center;}
  568.  
  569. .list-menu-float .icon-menu .text
  570. {opacity: 1;
  571. width: auto;
  572. left: 20px;
  573. top: 0;
  574. color: #555555;}
  575.  
  576. .list-menu-float .icon-menu:hover
  577. {width: 120px !important;
  578. background-color:rgba(0,0,0,.5) !important;}
  579.  
  580. .list-menu-float .icon-menu:hover .text, .list-menu-float .icon-menu:hover:before, .list-menu-float .icon-menu:hover:after
  581. {color: #fff;
  582. width: auto;}
  583.  
  584. .list-menu-float .icon-menu.logout
  585. {border-radius: 0 0 4px 4px;}
  586.  
  587. .list-menu-float .icon-menu.setting
  588. {display:none;}
  589.  
  590. .list-menu-float .icon-menu svg.icon
  591. {top: 7px !important;
  592. left: 5px !important;
  593. width: 15px;
  594. height: 15px;}
  595.  
  596. .list-menu-float .icon-menu.setting svg.icon-setting {display:none;}
  597. /**
  598. * List Container
  599. */
  600.  
  601. .list-container {
  602. position: absolute;
  603. background-color: transparent !important;
  604. width: 1000px;
  605. left: 0;
  606. right: 0;
  607. margin: auto;
  608. margin-top:100px;
  609. box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;
  610. border:none !important;
  611. margin-bottom:30px;
  612. }
  613.  
  614. /**
  615. * List Container - Cover Block
  616. */
  617. .cover-block {
  618. position:relative;
  619. display: block;
  620. width: 1000px;
  621. margin: 0 auto;
  622. height:auto;
  623. text-align: center;
  624. vertical-align: middle;
  625. /*box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;*/
  626. padding-bottom:40px;
  627.  
  628. }
  629.  
  630. .cover-block .image-container {
  631. display: block;
  632. width: 1000px;
  633. height:auto;
  634. padding-top:0;
  635. }
  636.  
  637. .cover-block .image-container.hide {
  638. display: none;
  639. }
  640.  
  641. .cover-block .image-container img {
  642. max-width: 1000px;
  643. height: auto;
  644. }
  645.  
  646. /* cover image */
  647.  
  648. #cover-image{
  649.  
  650. margin:auto;
  651. width:1000px !important;
  652. height:auto;
  653. background-color:transparent;
  654. background-size: cover !important;
  655. background-position: 50% 50%;
  656.  
  657. }
  658.  
  659. /* setting icon */
  660. .cover-block .image-container .btn-list-setting {
  661. display: none;
  662. }
  663.  
  664. .cover-block .image-container:hover .btn-list-setting {
  665. display: block;
  666. position: absolute;
  667. top: 20px;
  668. right: 28px;
  669. padding: 8px;
  670. border: rgba(255,255,255,0) 1px solid;
  671. font-size: 14px;
  672. color: #ffffff;
  673. font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  674. }
  675.  
  676. .cover-block .image-container .btn-list-setting:hover {
  677. position: absolute;
  678. top: 20px;
  679. right: 28px;
  680. background-color: rgba(0,0,0,0.6);
  681. padding: 8px;
  682. border: none;
  683. -moz-box-shadow: 0 0 4px #000000;
  684. -webkit-box-shadow: 0 0 4px #000000;
  685. -o-box-shadow: 0 0 4px #000000;
  686. -ms-box-shadow: 0 0 4px #000000;
  687. box-shadow: 0 0 4px #000000;
  688. font-size: 14px;
  689. color: #ffffff;
  690. text-shadow: #323232 1px 1px 1px;
  691. }
  692.  
  693. .cover-block .image-container .btn-list-setting .fa-camera {
  694. font-size: 16px;
  695. -moz-text-shadow: #000000 1px 1px 3px;
  696. -webkit-text-shadow: #000000 1px 1px 3px;
  697. -o-text-shadow: #000000 1px 1px 3px;
  698. -ms-text-shadow: #000000 1px 1px 3px;
  699. text-shadow: #000000 1px 1px 3px;
  700. -ms-filter:"progid:DXImageTransform.Microsoft.DropShadow(color=#000000,offx=1,offy=1)";
  701. }
  702.  
  703. .cover-block .image-container .btn-list-setting .icon-plus-circle {
  704. position: absolute;
  705. top: 4px;
  706. left: 18px;
  707. background-color: rgba(0,0,0,0.6);
  708. border-radius: 50%;
  709. -moz-box-shadow: -1px 1px 0px 0px #323232;
  710. -webkit-box-shadow: -1px 1px 0px 0px #323232;
  711. -o-box-shadow: -1px 1px 0px 0px #323232;
  712. -ms-box-shadow: -1px 1px 0px 0px #323232;
  713. box-shadow: -1px 1px 0px 0px #323232;
  714. font-size: 10px;
  715. }
  716.  
  717. .cover-block .image-container .btn-list-setting .text {
  718. display: none;
  719. }
  720.  
  721. .cover-block .image-container .btn-list-setting:hover .text {
  722. display: inline-block;;
  723. margin-left: 4px;
  724. }
  725.  
  726.  
  727. /**
  728. * List Container - Status Menu
  729. */
  730. .status-menu-container {
  731. width: 1000px;
  732. height: 40px;
  733. background-color: rgba(255,255,255,.9);
  734. border-bottom: none;
  735. z-index: 1;
  736. margin-top:-40px;
  737. }
  738.  
  739. .status-menu-container.fixed {
  740. position: absolute;
  741. display: none !important;
  742. top: 0;
  743. }
  744.  
  745. .status-menu-container.fixed + div.list-block {
  746. margin-top: 0px;
  747. }
  748.  
  749. .status-menu-container .status-menu {
  750. display: table;
  751. margin: 0 auto;
  752. border-collapse: separate;
  753. border-spacing: 0px 0;
  754. }
  755.  
  756. .status-menu-container .status-menu .status-button {
  757. position: relative;
  758. display: table-cell;
  759. padding: 10px;
  760. left: 17px !important;
  761. font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  762. text-align: center;
  763. vertical-align: middle;
  764. padding: 1.2em 10px;
  765. line-height: 1.105em;
  766. font-size: 1.1em;
  767. color: #9B9B9B;
  768. }
  769.  
  770. .status-menu-container .status-menu .status-button.on {
  771. color: #000;
  772. font-weight: bold;
  773. }
  774.  
  775. .status-menu-container .status-menu .status-button:hover {
  776. background-color: rgba(0,0,0,.5);
  777. color: #fff;
  778. -moz-transition-property: all;
  779. -o-transition-property: all;
  780. -webkit-transition-property: all;
  781. transition-property: all;
  782. -moz-transition-duration: 0.3s;
  783. -o-transition-duration: 0.3s;
  784. -webkit-transition-duration: 0.3s;
  785. transition-duration: 0.3s;
  786. -moz-transition-timing-function: ease-in-out;
  787. -o-transition-timing-function: ease-in-out;
  788. -webkit-transition-timing-function: ease-in-out;
  789. transition-timing-function: ease-in-out;
  790. }
  791.  
  792. .status-menu-container .status-menu .status-button.on:after, .status-menu .status-button:hover:after {
  793. opacity: 1
  794. }
  795.  
  796. .status-menu-container .status-menu .status-button.watching:before, .status-menu-container .status-menu .status-button.reading:before {
  797. content: "\f152\00a0\00a0";
  798. float: left;
  799. font-size: 1.5em;
  800. font-family: 'FontAwesome' !important;
  801. }
  802.  
  803. .status-menu-container .status-menu .status-button.completed:before {
  804. content: "\f05d\00a0\00a0";
  805. float: left;
  806. font-size: 1.5em;
  807. font-family: 'FontAwesome' !important;
  808. }
  809.  
  810. .status-menu-container .status-menu .status-button.onhold:before {
  811. content: "\f017\00a0\00a0";
  812. float: left;
  813. font-size: 1.5em;
  814. font-family: 'FontAwesome' !important;
  815. }
  816.  
  817. .status-menu-container .status-menu .status-button.plantowatch:before, .status-menu-container .status-menu .status-button.plantoread:before {
  818. content: "\f073\00a0\00a0";
  819. float: left;
  820. font-size: 1.5em;
  821. font-family: 'FontAwesome' !important;
  822. }
  823.  
  824. .status-menu-container .status-menu .status-button.dropped:before {
  825. content: "\f00d\00a0\00a0";
  826. float: left;
  827. font-size: 1.5em;
  828. font-family: 'FontAwesome' !important;
  829. }
  830.  
  831. .status-menu-container .status-menu .status-button.all_anime:before {
  832. content: "\f022\00a0";
  833. float: left;
  834. font-size: 1.5em;
  835. font-family: 'FontAwesome' !important;
  836. }
  837.  
  838. .status-menu-container .status-menu .status-button:after {display:none !important;}
  839.  
  840. /*scroll bar*/
  841.  
  842. ::-webkit-scrollbar
  843. {height: 7px;
  844. width: 7px;
  845. background-color: #f5f5f5;}
  846. ::-webkit-scrollbar-thumb
  847. {border: 2px solid #f5f5f5;
  848. background-color: #9B9B9B;}
  849.  
  850. /**
  851. * List Container - Status Menu - Search
  852. */
  853. .status-menu-container .search-container {
  854. position: absolute;
  855. right: 5px;
  856. z-index:20;
  857. }
  858. .status-menu-container .search-container #search-button {
  859. display: inline-block;
  860. height: 22px;
  861. margin-top: 10px;
  862. color: #787878;
  863. font-size: 1.6em;
  864. vertical-align: middle;
  865. }
  866.  
  867. .status-menu-container .search-container #search-box {
  868. display: inline-block;
  869. width: 0;
  870. height: 22px;
  871. overflow: hidden;
  872. margin-top: 5px;
  873. -webkit-transition: width 0.3s;
  874. -moz-transition: width 0.3s;
  875. transition: width 0.3s;
  876. -webkit-backface-visibility: hidden;
  877. vertical-align: middle;
  878. }
  879.  
  880. .status-menu-container .search-container #search-box.open {
  881. display: inline-block;
  882. width: 130px;
  883. }
  884.  
  885. .status-menu-container .search-container #search-box input {
  886. width: 100%;
  887. height: 100%;
  888. box-sizing: border-box;
  889. }
  890.  
  891.  
  892. /**
  893. * List Container - List Block
  894. */
  895. .list-block {
  896. margin: 0;
  897. min-height:265px;
  898. }
  899.  
  900. .list-unit {
  901. background-color:transparent;
  902. margin: auto;
  903. width: 1000px;
  904. /*box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000;*/
  905. }
  906.  
  907. /**
  908. * List Container - List Status Title (with Stats)
  909. */
  910. .list-unit .list-status-title {
  911. position: relative;
  912. display: table-cell;
  913. background-color: transparent;
  914. width: 1000px;
  915. height:0px !important;
  916. /*background-color:rgba(127,127,127,1);*/
  917. background-color:rgba(0,0,0,.4);
  918. }
  919.  
  920. .list-unit .list-status-title .text {
  921. display: block;
  922. width: 1000px;
  923. height: 38px !important;
  924. font-size: 22px;
  925. color: #fff;
  926. text-align: center;
  927. vertical-align: middle;
  928. text-align: center;
  929. font-weight: 500;
  930. letter-spacing: 0.5px;
  931. border:none;
  932. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #FFF !important;
  933. font-style: bold;
  934. background-color: transparent;
  935. margin-top: 120px !important;
  936. }
  937.  
  938.  
  939.  
  940.  
  941. .list-unit .list-status-title .stats a.filterd {
  942. text-shadow: 0px 0px 2px #FFF;
  943. }
  944.  
  945. .list-unit .list-status-title .stats a:hover {
  946. background:rgba(0,0,0,.5);
  947. padding:8px;
  948. -moz-transition-property: all;
  949. -o-transition-property: all;
  950. -webkit-transition-property: all;
  951. transition-property: all;
  952. -moz-transition-duration: 0.3s;
  953. -o-transition-duration: 0.3s;
  954. -webkit-transition-duration: 0.3s;
  955. transition-duration: 0.3s;
  956. -moz-transition-timing-function: ease-in-out;
  957. -o-transition-timing-function: ease-in-out;
  958. -webkit-transition-timing-function: ease-in-out;
  959. transition-timing-function: ease-in-out;
  960. }
  961.  
  962.  
  963. .list-unit .list-stats {
  964. background-color: rgba(255,255,255,.8);
  965. margin-top: -155px !important;
  966. color : #000;
  967. height: 25px;
  968. margin:auto;
  969. position: absolute;
  970. width: 1000px;
  971. z-index: 1 !important;
  972. }
  973.  
  974. .list-unit .list-status-title .stats {
  975. position: absolute;
  976. height: 40px;
  977. line-height: 40px;
  978. width:180px;
  979. right: -25px;
  980. margin-top: -197px;
  981. z-index: 1;
  982. }
  983.  
  984. .list-unit .list-status-title .stats a {
  985.  
  986. color: #9B9B9B;
  987. padding:8px;
  988. margin:0 !important;
  989. }
  990.  
  991.  
  992. /**
  993. * List Container - List Table
  994. */
  995.  
  996. .list-table {
  997. width: 100%;
  998. margin: 0 auto;
  999. border-collapse: collapse;
  1000. background-color:transparent !important;
  1001. color: #fff !important;
  1002. border:none;
  1003. }
  1004.  
  1005. /* columns background color*/
  1006.  
  1007. .list-table > tbody:nth-of-type(2n+1) {
  1008. background-color: rgba(0,0,0,.3) !important;
  1009. }
  1010.  
  1011. .list-table > tbody:nth-of-type(2n) {
  1012. background-color: rgba(0,0,0,.4) !important;
  1013. }
  1014.  
  1015. /**
  1016. * List Container - List Table - Header
  1017. */
  1018.  
  1019. .list-table .list-table-header:before {content: "\f0dc\00a0SORT";
  1020. display: block;
  1021. text-align: center !important;
  1022. font-family: 'FontAwesome' !important;
  1023. text-indent: 0px;
  1024. color: #9B9B9B !important;
  1025. font-weight: 700 !important;
  1026. width: 57px;
  1027. line-height: 40px;
  1028. height:40px;
  1029. margin-left:0px !important;
  1030. }
  1031.  
  1032. .list-table .list-table-header:hover:before {color:#fff !important;
  1033. background-color:rgba(0,0,0,.5);}
  1034.  
  1035. .list-table .list-table-header {
  1036. position: absolute;
  1037. display: block;
  1038. margin-left:0;
  1039. margin-top:-198px;
  1040. z-index:200 !important;
  1041. }
  1042.  
  1043. .list-table .list-table-header .header-title {
  1044. background: #F6F6F6 url("/img/pc/ownlist/bar-table-header.png") no-repeat right 7px / 1px 22px;
  1045. display: block;
  1046. border-bottom: 0;
  1047. height: 39px;
  1048. text-align: center;
  1049. vertical-align: middle;
  1050. z-index:60 !important;
  1051. opacity:0;
  1052. }
  1053.  
  1054. .list-table .list-table-header:hover .header-title {opacity:1;
  1055. -moz-transition-property: all;
  1056. -o-transition-property: all;
  1057. -webkit-transition-property: all;
  1058. transition-property: all;
  1059. -moz-transition-duration: 0.3s;
  1060. -o-transition-duration: 0.3s;
  1061. -webkit-transition-duration: 0.3s;
  1062. transition-duration: 0.3s;
  1063. -moz-transition-timing-function: ease-in-out;
  1064. -o-transition-timing-function: ease-in-out;
  1065. -webkit-transition-timing-function: ease-in-out;
  1066. transition-timing-function: ease-in-out;}
  1067.  
  1068. .list-table .list-table-header .header-title:last-child {
  1069. background-image: none;
  1070. }
  1071.  
  1072. .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 {
  1073. background-image: none;
  1074. display:none !important;
  1075. }
  1076.  
  1077. .list-table .list-table-header .header-title.title {
  1078. text-align: center;
  1079. width:90px;
  1080. line-height: 40px;
  1081. padding:0 !important;
  1082. }
  1083.  
  1084. .list-table .list-table-header .header-title.score {
  1085. text-align: center;
  1086. width:90px;
  1087. line-height: 40px;
  1088. padding:0 !important;
  1089. }
  1090.  
  1091. .list-table .list-table-header .header-title.type {
  1092. text-align: center;
  1093. width:90px;
  1094. line-height: 40px;
  1095. padding:0 !important;
  1096. }
  1097.  
  1098. .list-table .list-table-header .header-title.progress {
  1099. text-align: center;
  1100. width:90px;
  1101. line-height: 40px;
  1102. padding:0 !important;
  1103. }
  1104.  
  1105. .list-table .list-table-header .header-title.chapters {
  1106. text-align: center;
  1107. width:90px;
  1108. line-height: 40px;
  1109. padding:0 !important;
  1110. }
  1111.  
  1112. .list-table .list-table-header .header-title.volumes {
  1113. text-align: center;
  1114. width:90px;
  1115. line-height: 40px;
  1116. padding:0 !important;
  1117. }
  1118.  
  1119. .list-table .list-table-header .header-title.rated {
  1120. text-align: center;
  1121. width:90px;
  1122. line-height: 40px;
  1123. padding:0 !important;
  1124. }
  1125.  
  1126. .list-table .list-table-header .header-title.started {
  1127. display:none;
  1128. }
  1129.  
  1130. .list-table .list-table-header .header-title.finished {
  1131. text-align: center;
  1132. width:90px;
  1133. line-height: 40px;
  1134. padding:0 !important;
  1135. }
  1136.  
  1137. .list-table .list-table-header .header-title.days {
  1138. text-align: center;
  1139. width:90px;
  1140. line-height: 40px;
  1141. padding:0 !important;
  1142. }
  1143.  
  1144. .list-table .list-table-header .header-title.storage {
  1145. text-align: center;
  1146. width:90px;
  1147. line-height: 40px;
  1148. padding:0 !important;
  1149. }
  1150.  
  1151. .list-table .list-table-header .header-title.retail {
  1152. text-align: center;
  1153. width:90px;
  1154. line-height: 40px;
  1155. padding:0 !important;
  1156. }
  1157.  
  1158. .list-table .list-table-header .header-title.priority {
  1159. text-align: center;
  1160. width:90px;
  1161. line-height: 40px;
  1162. padding:0 !important;
  1163. }
  1164.  
  1165. .list-table .list-table-header .header-title .link {
  1166. font-size: 11px;
  1167. color: #323232;
  1168. text-decoration: none
  1169. height:40px;
  1170. width:90px;
  1171. }
  1172.  
  1173. .list-table .list-table-header .header-title.studio {
  1174. display:none !important;
  1175. }
  1176.  
  1177. .list-table .list-table-header .header-title .link.sort {
  1178. position: relative;
  1179. display: inline-block;
  1180. color: #323232;
  1181. height:40px;
  1182. width:90px;
  1183. white-space: nowrap;
  1184. -moz-transition-property: all;
  1185. -o-transition-property: all;
  1186. -webkit-transition-property: all;
  1187. transition-property: all;
  1188. -moz-transition-duration: 0.3s;
  1189. -o-transition-duration: 0.3s;
  1190. -webkit-transition-duration: 0.3s;
  1191. transition-duration: 0.3s;
  1192. -moz-transition-timing-function: ease-in-out;
  1193. -o-transition-timing-function: ease-in-out;
  1194. -webkit-transition-timing-function: ease-in-out;
  1195. transition-timing-function: ease-in-out;
  1196. }
  1197.  
  1198. .list-table .list-table-header .header-title .link.sort:hover {
  1199. color: #000;
  1200. background-color: rgba(0,0,0,.5);
  1201. height:40px;
  1202. width:90px;
  1203. }
  1204.  
  1205. .list-table .list-table-header .header-title .sort-icon {
  1206. color: #fff;
  1207. }
  1208.  
  1209.  
  1210. /* customize list */
  1211.  
  1212. .list-table .list-table-data {
  1213.  
  1214. }
  1215.  
  1216.  
  1217. .list-table .list-table-data:hover {
  1218. /*box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important;*/
  1219. transition: .2s linear;
  1220. background-color:rgba(0,0,0,.3);
  1221. }
  1222.  
  1223.  
  1224. .list-table .list-table-data:hover .data.title {
  1225. text-shadow: 0 0 2px #000, 0 0 1px #000, 0 1px 7px #000, 0 0 0.5px #000;
  1226. color:#fff;
  1227. transition: .1s linear;
  1228.  
  1229. }
  1230.  
  1231.  
  1232. .header a:hover,.list-table .list-table-data a:not(.edit-disabled):hover {
  1233. text-decoration:underline;
  1234. }
  1235.  
  1236.  
  1237. /**
  1238. * List Container - List Table - Items
  1239. */
  1240.  
  1241.  
  1242. .list-table .list-table-data .data {
  1243. display: table-cell;
  1244. padding: 4px 0;
  1245. text-align: center;
  1246. vertical-align: middle;
  1247. color: #fff !important;
  1248. border:none;
  1249. }
  1250.  
  1251. .list-table .list-table-data:hover .data {
  1252. color: #fff !important;
  1253.  
  1254. }
  1255.  
  1256. .list-table .list-table-data a:not(.edit-disabled):hover {
  1257. text-decoration: underline;
  1258. color: #fff !important;
  1259. }
  1260.  
  1261. .list-table .list-table-data a.edit-disabled {
  1262. cursor: text;
  1263. color: #fff;
  1264. }
  1265.  
  1266. .list-table .list-table-data .tags .edit {
  1267. display: block;
  1268. width: 100%;
  1269. text-align: center;
  1270. color: #2db039;
  1271. font-size: 10px;
  1272. font-family: 'Helvetica neue', Helvetica, "lucida grande", tahoma, verdana, arial, sans-serif;
  1273. display:none;
  1274. }
  1275. .list-table .list-table-data .tags .edit:hover {
  1276. display:none;
  1277. }
  1278.  
  1279. .list-table .list-table-data .tags textarea {
  1280. box-sizing: border-box;
  1281. width: 100%;
  1282. height: 60px;
  1283. }
  1284.  
  1285.  
  1286. .list-table .list-table-data .data.image a {
  1287. display:inline-block!important;
  1288. }
  1289.  
  1290.  
  1291. .list-table .list-table-data .data.image {
  1292. width:4%; }
  1293.  
  1294. .list-table .list-table-data .data.image .image {
  1295. width: 30px !important;
  1296. height: 30px !important;
  1297. background-size:cover;
  1298. border:2px solid #fff;
  1299. -webkit-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  1300. -moz-box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  1301. box-shadow:2px 2px 8px -3px rgba(0,0,0,.76);
  1302. border-radius:180px;
  1303. display:inline-block!important;
  1304. }
  1305.  
  1306. .list-table .list-table-data:hover .data.image .image {
  1307. display:inline-block!important;
  1308. margin-left:-30px;
  1309. opacity: 0;
  1310. -moz-transition-duration: 0.3s ease-in-out;
  1311. -o-transition-duration: 0.3s ease-in-out;
  1312. -webkit-transition-duration: 0.3s ease-in-out;
  1313. transition-duration: 0.3s ease-in-out;
  1314. -moz-transition-timing-function: ease-in-out;
  1315. -o-transition-timing-function: ease-in-out;
  1316. -webkit-transition-timing-function: ease-in-out;
  1317. transition-timing-function: ease-in-out
  1318. -moz-transition:all .3s ease;-webkit-transition:all .3s ease;-o-transition:all .3s ease;transition:all .3s ease;
  1319. }
  1320.  
  1321.  
  1322. /* */
  1323. .list-table .list-table-data .data.season * {
  1324. color:#fff;
  1325. }
  1326.  
  1327. .list-table .list-table-data .data.title {
  1328. padding-left: 8px;
  1329. text-align: left;
  1330. width:60%;
  1331.  
  1332. }
  1333.  
  1334. .list-table .list-table-data .data.title a {
  1335. line-height:35px !important;
  1336. display: inline-block;
  1337. min-width:0;
  1338. max-width: 450px; /* the width of your titles */
  1339. white-space: nowrap;
  1340. text-overflow: ellipsis;
  1341. overflow: hidden; }
  1342.  
  1343. .list-table .list-table-data .data.title .link {
  1344. font-size: 16px !important;
  1345. text-decoration: none !important;
  1346. font-family: 'PT Sans Narrow', sans-serif;
  1347. font-weight:100 !important;
  1348. transition: all 0.3s ease 0s;
  1349. color: #fff;
  1350.  
  1351. }
  1352.  
  1353. .list-table .list-table-data:hover .data.title .link {
  1354. letter-spacing: 0.5px;
  1355. transition: all 0.3s ease 0s;
  1356. color: #fff !important;
  1357. }
  1358.  
  1359. .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 {
  1360. text-shadow: 0 0 2px #1a1aff, 0 0 1px #1a1aff, 1px 1px 7px #1a1aff, 0 0 0 #1a1aff !important;
  1361. color: #fff !important;
  1362. font-size: 0.9em !important;
  1363. margin-left:5px;
  1364. display:inline-block;
  1365. margin-top:10px !important;
  1366. position:absolute;
  1367. }
  1368.  
  1369. .list-table .list-table-data .data.score .link {
  1370. font-size: 1.1em;
  1371. font-weight: bold;
  1372. }
  1373.  
  1374. .list-table .list-table-data .data.score {
  1375. width: 21px !important;
  1376. height: 21px !important;
  1377. background-image: url(http://i.imgur.com/udzEw6G.png);
  1378. background-repeat: no-repeat;
  1379. background-size:contain;
  1380. background-position: 50% 50%;
  1381. }
  1382.  
  1383. .list-table .list-table-data:hover .data.score {
  1384. background-image: url(http://i.imgur.com/EQcGOeO.png);
  1385. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000;
  1386. }
  1387.  
  1388. .list-table .list-table-data .data.score a {color:#fff !important;}
  1389.  
  1390. td.td1.borderRBL {
  1391. color:#fff;
  1392. }
  1393.  
  1394. /*add edit */
  1395.  
  1396. .list-table .list-table-data .data.title .add-edit-more {
  1397. float: right;
  1398. margin-right: 10px;
  1399. font-size:0 !important;
  1400. margin-top:10px;
  1401. }
  1402.  
  1403.  
  1404. .add-edit-more {
  1405. opacity: 0;
  1406. transition: all 0.2s ease 0s;
  1407.  
  1408. }
  1409. .list-item:hover .add-edit-more {
  1410. opacity: 1;
  1411. transition: all 0.2s ease 0s;
  1412. }
  1413.  
  1414. .list-table .list-table-data .data.title .edit a {
  1415. background-image: url(http://i.imgur.com/OT1yCLP.png);
  1416. display: inline-block;
  1417. width: 15px;
  1418. height: 15px;
  1419. background-size: cover;
  1420. color: transparent !important;
  1421. margin-right: 7px !important;
  1422. }
  1423.  
  1424. .list-table .list-table-data .data.title .more a {
  1425. background-image: url(http://i.imgur.com/cUAaila.png);
  1426. display: inline-block;
  1427. width: 15px;
  1428. height: 15px;
  1429. background-size: cover;
  1430. color: transparent !important;
  1431. }
  1432.  
  1433. .list-table .list-table-data .data.title .add a {
  1434. background-image: url(http://i.imgur.com/AoTgUAL.png);
  1435. display: inline-block;
  1436. width: 15px;
  1437. height: 15px;
  1438. background-size: cover;
  1439. color: transparent !important;
  1440. margin-right: 7px !important;
  1441. }
  1442.  
  1443.  
  1444. /* */
  1445. .list-table .list-table-data .data.title .more {
  1446. position: relative;
  1447. }
  1448.  
  1449. .list-table .more-info {
  1450. display: none;
  1451. }
  1452.  
  1453. .list-table .more-info .more-content {
  1454. padding: 10px;
  1455. }
  1456.  
  1457. /* */
  1458. .list-table .list-table-data .data.number {
  1459. width:2% !important;
  1460. }
  1461.  
  1462. .list-table .list-table-data:hover .data.number {
  1463. opacity:0;
  1464. }
  1465.  
  1466. /* review section */
  1467.  
  1468. .list-table .list-table-data .data.tags {
  1469. position: fixed;
  1470. right: calc( 50% + 510px);
  1471. top: calc(20% + 230px);
  1472. opacity: 0;
  1473. display: inline !important;
  1474. line-height: 16px !important;
  1475. font-family: Segoe UI, Atilla, Arial, Helvetica, sans-serif;
  1476. text-align:left;
  1477. width:150px !important;
  1478. height:auto !important;
  1479. background-color:rgba(0,0,0,.5);
  1480. box-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 4px #000, 0 0 0 #000;
  1481. pointer-events: none;
  1482. /* animation */
  1483. transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;
  1484. z-index: 6;
  1485. }
  1486.  
  1487. .list-table .list-table-data .data.tags span:after {
  1488. position: fixed;
  1489.  
  1490. right: calc( 50% + 510px);
  1491. top: calc(20% + 230px);
  1492. opacity: 0;
  1493. display: block !important;
  1494. content:'';
  1495. width:150px !important;
  1496. height:auto;
  1497. pointer-events: none;
  1498. /* animation */
  1499. transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;
  1500. }
  1501.  
  1502. .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.tags span:after {
  1503. opacity: 1;
  1504. padding:5px;
  1505. box-sizing: border-box;
  1506. right: calc( 50% + 510px);
  1507. transition: opacity .3s linear, margin-left .5s ease, transform 1s ease-in-out;
  1508.  
  1509. }
  1510.  
  1511. .list-table .list-table-data .data.tags * {color: #fff !important;}
  1512.  
  1513. .list-table .list-table-header .header-title.tags {
  1514. display:none;
  1515. }
  1516.  
  1517. .link.sort + a {display: none;} /* remove watch buttons */
  1518.  
  1519. .list-table .list-table-data .data.studio {
  1520. position:fixed;
  1521. width: 150px;
  1522. text-align:center;
  1523. right: calc( 50% + 511px);
  1524. top: calc(20% + 184px);
  1525. height: 30px !important;
  1526. opacity:0;
  1527. z-index: 60 !important;
  1528. background-color: transparent;
  1529. background: rgba(0,0,0,0);
  1530. background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  1531. background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.7)));
  1532. background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  1533. background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  1534. background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  1535. background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.7) 100%);
  1536. pointer-events:none;
  1537. }
  1538.  
  1539. .list-table .list-table-data:hover .data.tags, .list-table .list-table-data:hover .data.studio {opacity:1;}
  1540.  
  1541. .list-item .data.studio * {
  1542. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important;
  1543. font-weight: bold !important;
  1544. color:#fff !important;
  1545.  
  1546. }
  1547.  
  1548. /**
  1549. * Large full-res hover images
  1550. */
  1551.  
  1552.  
  1553. .data.image a:before
  1554. {content: "";
  1555. display: block !important;
  1556. position: fixed;
  1557. top:20%;
  1558. right: calc( 50% + 530px);
  1559. width: 150px;
  1560. height: 221px;
  1561. background-color: rgba(0,0,0,.3);
  1562. background-position: center !important;
  1563. background-repeat: no-repeat !important;
  1564. background-size: cover;
  1565. border: 1px solid #ffffff;
  1566. box-shadow: 0 2px 5px rgba(0,0,0, 0.7);
  1567. visibility: hidden;
  1568. opacity: 0;
  1569. transition: opacity .8s linear, margin-left .5s ease, transform 1s ease-in-out;
  1570. z-index: 5;}
  1571.  
  1572.  
  1573.  
  1574. .list-table .list-table-data:hover .data.image a:before {
  1575. visibility: visible;
  1576. opacity: 1;
  1577. right: calc( 50% + 510px);
  1578. transition: .3s ease-out;}
  1579.  
  1580. /* */
  1581.  
  1582. .list-table .list-table-data .data.status {
  1583. width: 4px;
  1584. }
  1585.  
  1586. .list-table .list-table-data .data.status .text {
  1587. font-size:1.5em;
  1588. }
  1589.  
  1590. .list-table .list-table-data .data.status.reading, .list-table .list-table-data .data.status.watching {
  1591. /*background-color: #2db039 */
  1592. background-color:transparent;
  1593. }
  1594.  
  1595. .list-table .list-table-data .data.status.plantoread, .list-table .list-table-data .data.status.plantowatch {
  1596. /*background-color: #c3c3c3 */
  1597. background-color:transparent;
  1598. }
  1599.  
  1600. .list-table .list-table-data .data.status.completed {
  1601. /*background-color: #26448f */
  1602. background-color:transparent;
  1603. }
  1604.  
  1605. .list-table .list-table-data .data.status.onhold {
  1606. /*background-color: #f1c83e */
  1607. background-color:transparent;
  1608. }
  1609.  
  1610. .list-table .list-table-data .data.status.dropped {
  1611. /*background-color: #a12f31 */
  1612. background-color:transparent;
  1613. }
  1614.  
  1615. /* list status */
  1616. .list-table .list-table-data .data.status.completed:before, .list-table .list-table-data .data.status.reading:before, .list-table .list-table-data .data.status.watching:before,.list-table .list-table-data .data.status.plantoread:before, .list-table .list-table-data .data.status.plantowatch:before,.list-table .list-table-data .data.status.onhold:before,.list-table .list-table-data .data.status.dropped:before {
  1617. display: inline-block !important;
  1618. position: absolute;
  1619. margin-left:8px;
  1620. margin-top:-7px;
  1621. z-index: 100 !important;
  1622. content: "";
  1623. pointer-events: none;
  1624. opacity: 0;
  1625. text-align:center !important;
  1626. }
  1627.  
  1628. .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 {
  1629. opacity: 1;
  1630. text-align:center !important;
  1631. -moz-transition-property: all;
  1632. -o-transition-property: all;
  1633. -webkit-transition-property: all;
  1634. transition-property: all;
  1635. -moz-transition-duration: 0.3s;
  1636. -o-transition-duration: 0.3s;
  1637. -webkit-transition-duration: 0.3s;
  1638. transition-duration: 0.3s;
  1639. -moz-transition-timing-function: ease-in-out;
  1640. -o-transition-timing-function: ease-in-out;
  1641. -webkit-transition-timing-function: ease-in-out;
  1642. transition-timing-function: ease-in-out;
  1643. }
  1644.  
  1645. .list-table .list-table-data:hover .data.status.completed:before {
  1646. /* background-color: #26448f !important; */
  1647. color:#fff;
  1648. content: "\f05d";
  1649. font-size: 1.5em;
  1650. font-family: 'FontAwesome' !important;
  1651. }
  1652.  
  1653. .list-table .list-table-data:hover .data.status.watching:before, .list-table .list-table-data:hover .data.status.reading:before
  1654. {
  1655. /*background-color: #2db039 !important;*/
  1656. color:#fff;
  1657. content: "\f152";
  1658. font-size: 1.5em;
  1659. font-family: 'FontAwesome' !important;}
  1660.  
  1661. .list-table .list-table-data:hover .data.status.plantowatch:before, .list-table .list-table-data:hover .data.status.plantoread:before
  1662. {/*background-color: #c3c3c3 !important;*/
  1663. color:#fff;
  1664. content: "\f073";
  1665. font-size: 1.5em;
  1666. font-family: 'FontAwesome' !important;}
  1667.  
  1668. .list-table .list-table-data:hover .data.status.onhold:before
  1669. {/*background-color: #f1c83e !important;*/
  1670. color:#fff;
  1671. content: "\f017";
  1672. font-size: 1.5em;
  1673. font-family: 'FontAwesome' !important;}
  1674.  
  1675. .list-table .list-table-data:hover .data.status.dropped:before
  1676. {/*background-color: #a12f31 !important;*/
  1677. color:#fff;
  1678. content: "\f00d";
  1679. font-size: 1.5em;
  1680. font-family: 'FontAwesome' !important;}
  1681.  
  1682.  
  1683.  
  1684.  
  1685.  
  1686. /* */
  1687.  
  1688.  
  1689.  
  1690. .list-unit .loading-space {
  1691. background-color:rgba(0, 0, 0, .3);
  1692. color: #fff !important;
  1693. display: inline-block;
  1694. margin: auto;
  1695. width: 1000px;
  1696. font-size: 11px;
  1697. line-height:15px;
  1698. text-align: middle !important;
  1699. padding-top: 0px;
  1700. margin-bottom: 0px;
  1701. height:250px;
  1702. background-attachment:scroll;
  1703. background-image:url();
  1704. background-repeat: no-repeat no-repeat;
  1705. background-position: 0% 100%;
  1706. }
  1707.  
  1708. /*override codes*/
  1709. .header .header-info > a {color: rgba(255,255,255,1) !important;}
  1710. .header .header-info {color: rgba(255,255,255,0.8) !important;}
  1711. .header .header-menu {color: rgba(255,255,255,0.8) !important;}
  1712. .header .header-menu .btn-menu {color: rgba(255,255,255,0.8) !important;}
  1713. .username {color: rgba(255,255,255,0.8) !important;}
  1714. #header-menu-button {color: rgba(255,255,255,0.8) !important;}
  1715. .header a {
  1716. font-weight: bold;
  1717. color: #fff !important;
  1718. }
  1719. .icon-watch, .icon-watch-pv {display:none !important;}
  1720. /*profile image & name */
  1721.  
  1722. .cover-block::after {
  1723. height: 120px !important;
  1724. width: 120px! important;
  1725. background-repeat: no-repeat;
  1726. background-size: contain;
  1727. position: absolute;
  1728. display:block !important;
  1729. margin-left:57px;
  1730. margin-top:-70px;
  1731. content: "";
  1732. z-index: 2 !important;
  1733. padding: 5px;
  1734. background-color:#fff;
  1735. box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.3);
  1736. border-radius:5px;
  1737. border: #fff 2px solid;
  1738. }
  1739.  
  1740. .cover-block::before {
  1741. position: absolute;
  1742. display:block !important;
  1743. margin-left:200px;
  1744. bottom:40px;
  1745. width: 300px;
  1746. color: #ffffff;
  1747. font-size: 29px !important;
  1748. font-family: Rancho;
  1749. text-align: left;
  1750. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #000 !important;
  1751. letter-spacing: 0 !important;
  1752. }
  1753.  
  1754. /* */
  1755. .header .header-title {
  1756. position: absolute;
  1757. top: 0px;
  1758. left: 40px;
  1759. background-image: url("http://i.imgur.com/39cRtfK.png");
  1760. background-position: left top;
  1761. background-repeat: no-repeat;
  1762. background-size: auto 50px;
  1763. display: block;
  1764. width: 50px !important;
  1765. height: 50px;
  1766. text-indent: -9999px;
  1767. overflow: hidden
  1768. }
  1769.  
  1770. /* customization */
  1771.  
  1772. /* The list background */
  1773.  
  1774. body[data-query*='"status":1'],
  1775. body[data-query*='"status":2'],
  1776. body[data-query*='"status":3'],
  1777. body[data-query*='"status":4'],
  1778. body[data-query*='"status":6'],
  1779. body[data-query*='"status":7'] {
  1780. background-attachment: fixed !important;
  1781. background-position: center top;
  1782. background-repeat: no-repeat !important;
  1783. background-size:cover;
  1784. }
  1785.  
  1786. * {cursor: url(http://cur.cursors-4u.net/cursors/cur-11/cur1054.cur), progress !important;}
  1787.  
  1788. /* */
  1789.  
  1790.  
  1791.  
  1792. span a[href*="&tag=!"], span a[href*="&tag=%40"], span a[href*="&tag=~"] {display: none !important;}
  1793.  
  1794. /* favorite */
  1795. @media entrytags-favorites {}
  1796. a[href$="&tag=*"]
  1797. {position: absolute;
  1798. left: 0;
  1799. width: 150px;
  1800. height: 0;
  1801. font-size: 15px;
  1802. top: 0px;
  1803. color: transparent !important;
  1804.  
  1805. }
  1806.  
  1807. a[href$="&tag=*"]:after
  1808. {content: '\f005';
  1809. font-family: 'FontAwesome' !important;
  1810. display: inline-block;
  1811. pointer-events: all;
  1812. /* change the position below, and add in margin-whatever if it's not enough */
  1813. position: absolute;
  1814. top: -224px;
  1815. left: 130px;
  1816. /* change the size of font */
  1817. font-size: 1.1em;
  1818. color: #fff !important;
  1819. text-shadow: 0 0 2px #000, 0 0 1px #000, 1px 1px 7px #000, 0 0 0 #fff !important;
  1820. pointer-events:none;
  1821. }
  1822.  
  1823.  
  1824.  
  1825. /* Intro animation */
  1826. @keyframes intro {
  1827. from {
  1828. opacity: 0;
  1829. margin-top: 100vh;
  1830. }
  1831. 16% {
  1832. opacity: 0;
  1833. margin-top: 100vh;
  1834. }
  1835. to {
  1836. opacity: 1;
  1837. margin-top: 100px;
  1838. }
  1839. }
  1840. .list-container {
  1841. animation: intro 2s;
  1842. }
  1843.  
  1844.  
  1845.  
  1846. /* */
  1847.  
  1848. footer {
  1849. position: fixed;
  1850. bottom: 0px;
  1851. left: 0px;
  1852. width: 100%;
  1853. height:30px !important;
  1854. z-index: 9998;
  1855.  
  1856. }
  1857.  
  1858. #footer-block {
  1859. display:block;
  1860. background-color: transparent;
  1861. background: rgba(0,0,0,0);
  1862. background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  1863. background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(100%, rgba(0,0,0,.6)));
  1864. background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  1865. background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  1866. background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  1867. background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,.6) 100%);
  1868. }
  1869.  
  1870. #copyright {
  1871. color: #FFF;
  1872. letter-spacing: 1px;
  1873. text-shadow: 0px 3px 3px #000;
  1874. font-size:10px;
  1875. }
  1876.  
  1877. #copyright::after {
  1878. content: "ShelterStyleV3 - Layout designed by Takana no Hana"
  1879. }
  1880.  
  1881.  
  1882. /*Character renders*/
  1883.  
  1884. /*
  1885.  
  1886. .list-unit.watching:after, .list-unit.onhold:after, .list-unit.plantowatch:after {
  1887. background-image: url("http://i.imgur.com/iYbcDct.png");
  1888. background-repeat: no-repeat;
  1889. background-size: contain;
  1890. height: 100%;
  1891. background-position: right;
  1892. display: inline-block !important;
  1893. margin: auto !important;
  1894. position: fixed !important;
  1895. left: 0 !important;
  1896. right: 0 !important;
  1897. top: 0 !important;
  1898. z-index: -5 !important;
  1899. content: "";
  1900. pointer-events: none;
  1901. opacity: 1 !important;
  1902. }
  1903.  
  1904. .list-unit.completed:after, .list-unit.dropped:after, .list-unit.all_anime:after {
  1905. background-image: url("http://i.imgur.com/mX9zg7K.png");
  1906. background-repeat: no-repeat;
  1907. background-size: contain;
  1908. height: 100%;
  1909. background-position: right;
  1910. display: inline-block !important;
  1911. margin: auto !important;
  1912. position: fixed !important;
  1913. left: 0 !important;
  1914. right: 0 !important;
  1915. top: 0 !important;
  1916. z-index: -5 !important;
  1917. content: "";
  1918. pointer-events: none;
  1919. opacity: 1 !important;
  1920. }
  1921.  
  1922. */
  1923.  
  1924. /*backgrounds for each category list*/
  1925.  
  1926. /*status watching, etc background*/
  1927.  
  1928. /*
  1929. .list-unit.completed .list-status-title:after {
  1930. color: transparent;
  1931. height: 432px !important;
  1932. width: 800px! important;
  1933. background-image: url("http://i.imgur.com/zMH3u2y.png");
  1934. background-repeat: no-repeat;
  1935. background-size: contain;
  1936. position: absolute !important;
  1937. display: block !important;
  1938. left: 0 !important;
  1939. right: 0 !important;
  1940. top: 0 !important;
  1941. content: "";
  1942. z-index: -1 !important;
  1943. margin-bottom: 20px !important;
  1944. pointer-events: none;
  1945. }
  1946.  
  1947. .list-unit.watching .list-status-title:after {
  1948. color: transparent;
  1949. height: 432px !important;
  1950. width: 800px! important;
  1951. background-image: url("http://i.imgur.com/ctgGmhu.png");
  1952. background-repeat: no-repeat;
  1953. background-size: contain;
  1954. position: absolute !important;
  1955. display: block !important;
  1956. left: 0 !important;
  1957. right: 0 !important;
  1958. top: 0 !important;
  1959. content: "";
  1960. z-index: -1 !important;
  1961. margin-bottom: 20px !important;
  1962. pointer-events: none;
  1963. }
  1964.  
  1965. .list-unit.onhold .list-status-title:after {
  1966. color: transparent;
  1967. height: 432px !important;
  1968. width: 800px! important;
  1969. background-image: url("http://i.imgur.com/NrPQ2XO.png");
  1970. background-repeat: no-repeat;
  1971. background-size: contain;
  1972. position: absolute !important;
  1973. display: block !important;
  1974. left: 0 !important;
  1975. right: 0 !important;
  1976. top: 0 !important;
  1977. content: "";
  1978. z-index: -1 !important;
  1979. margin-bottom: 20px !important;
  1980. pointer-events: none;
  1981. }
  1982.  
  1983. .list-unit.dropped .list-status-title:after {
  1984. color: transparent;
  1985. height: 432px !important;
  1986. width: 800px! important;
  1987. background-image: url("http://i.imgur.com/t4n76fz.png");
  1988. background-repeat: no-repeat;
  1989. background-size: contain;
  1990. position: absolute !important;
  1991. display: block !important;
  1992. left: 0 !important;
  1993. right: 0 !important;
  1994. top: 0 !important;
  1995. content: "";
  1996. z-index: -1 !important;
  1997. margin-bottom: 20px !important;
  1998. pointer-events: none;
  1999. }
  2000.  
  2001. .list-unit.plantowatch .list-status-title:after {
  2002. color: transparent;
  2003. height: 432px !important;
  2004. width: 800px! important;
  2005. background-image: url("http://i.imgur.com/XQbL1KI.png");
  2006. background-repeat: no-repeat;
  2007. background-size: contain;
  2008. position: absolute !important;
  2009. display: block !important;
  2010. left: 0 !important;
  2011. right: 0 !important;
  2012. top: 0 !important;
  2013. content: "";
  2014. z-index: -1 !important;
  2015. margin-bottom: 20px !important;
  2016. pointer-events: none;
  2017. } */
  2018.  
  2019. /* Character render on the right list */
  2020. /* footer::after {
  2021. content: "";
  2022. display: block;
  2023. width: 20%;
  2024. height: 100%;
  2025. position: fixed;
  2026. bottom: 0px;
  2027. left: calc( 50% + 465px);
  2028. background: url(http://i.imgur.com/MO8goKt.png) no-repeat bottom left;
  2029. pointer-events: none;
  2030. z-index: 3; }
  2031.  
  2032. @media screen and (max-height: 835px) {
  2033. footer::after {
  2034. background-size: 182px 680px;
  2035. }
  2036.  
  2037. }*/
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement