Advertisement
ValerioLyndon

Takana no Hana layout Edited for xxheyamxx

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