Advertisement
kurodutch

Lista

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