Advertisement
Shishipastebin

Untitled

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