Advertisement
Shishipastebin

Untitled

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