Advertisement
Shishipastebin

Untitled

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