Advertisement
Shishipastebin

Untitled

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