Advertisement
ValerioLyndon

Takana no Hana layout Edited for xxheyamxx v2

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