API tools faq
paste
Advertisement
ValerioLyndon

Tilt Modified for jonlo987 v0

ValerioLyndon
Mar 30th, 2019
154
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 24.39 KB | None | 0 0
raw download clone embed print report
  1. /**
  2.  * "Tilt" by Valerio Lyndon
  3.  * Revision 7.2
  4.  * Modified for jonlo987
  5.  *
  6.  * = TABLE OF CONTENTS =
  7.  *
  8.  * IMPORTS
  9.  *
  10.  * OPTIMIZATIONS     : Page-wide repeated code.
  11.  *
  12.  * PAGE-BASE         : Page-wide properties & widths.
  13.  *
  14.  * HEADER
  15.  * Logo
  16.  * Nav&User-Icons
  17.  * Subnav-R
  18.  * Subnav-R-Search
  19.  * Subnav-R-Non-Owner
  20.  * Subnav-L-Sort-by
  21.  * Subnav-L-BTNs
  22.  * Log-in/Affinity
  23.  *
  24.  * COVER
  25.  *
  26.  * LIST              : Anime/manga listings.
  27.  * Status
  28.  * Image
  29.  * Title
  30.  * Add-Edit-More
  31.  * Score
  32.  * Progress
  33.  * Season-&-Studio
  34.  * Tags
  35.  * More-Info
  36.  *
  37.  * FOOTER
  38.  *
  39.  * FILTER-MENU       : Overlayed menus and iframes.
  40.  *
  41.  * MEDIA-QUERY-FIXES : Fixes for small screens.
  42.  */
  43.  
  44.  
  45.  
  46.  
  47.  
  48. /*==============================*\
  49.   !IMPORTS
  50. \*==============================*/
  51.  
  52. @\import "https://fonts.googleapis.com/css?family=Carrois+Gothic+SC|Open+Sans:400,700";
  53.  
  54.  
  55.  
  56.  
  57.  
  58. /*==============================*\
  59.   !OPTIMIZATIONS
  60. \*==============================*/
  61.  
  62. /* Left Slants */
  63.  
  64. .header:before, .header:after,
  65. .header-info:before, .header-info:after,
  66. .status-menu-container:before, .status-menu-container:after,
  67. .list-table > tbody:first-of-type:after
  68. {
  69.     content: "";
  70.     position: absolute;
  71.     bottom: 0;
  72.    
  73.     display: block;
  74.     background: #000d07;
  75.    
  76.     transform: skew(30deg);
  77.     box-shadow: -2px 1px 0 1px #d60025;
  78. }
  79.  
  80. /* Right Slants */
  81.  
  82. .header:after,
  83. .header-info:after,
  84. .status-menu-container:after
  85. {
  86.     transform: skew(-30deg);
  87.     box-shadow: 2px 1px 0 1px #d60025;
  88. }
  89.  
  90.  
  91.  
  92.  
  93.  
  94. /*==============================*\
  95.   !PAGE-BASE
  96. \*==============================*/
  97.  
  98. body { background: #000 url(http://i.imgur.com/oQ5LYfB.jpg) no-repeat center top / 2100px auto scroll !important; }
  99.  
  100. @media (min-width: 2101px) {
  101.     body { background: #000 url(http://i.imgur.com/IJrzYGP.jpg) no-repeat center top / 100% auto scroll !important; }
  102. }
  103.  
  104. .list-container {
  105.     width: 100%;
  106.     min-width: 1056px;
  107.     background: none !important;
  108.     border: none !important;
  109. }
  110.  
  111. .list-block {
  112.     background: rgba(0,0,0,0.5);
  113.     margin: 0 !important;
  114. }
  115.  
  116. .list-unit {
  117.     width: 100% !important;
  118. }
  119.  
  120. .list-table {
  121.     display: block;
  122.     width: 1056px;
  123.     border: none !important;
  124. }
  125.  
  126.  
  127. a:hover {
  128.     text-decoration: none !important;
  129. }
  130.  
  131. /* Remove Tutorial/Notices */
  132. .initialize-tutorial { display: none !important; }
  133.  
  134.  
  135.  
  136.  
  137.  
  138. /*==============================*\
  139.   !HEADER
  140. \*==============================*/
  141.  
  142. .status-menu-container {
  143.     position: fixed;
  144.     top: 0;
  145.     left: calc(50% - 522px);
  146.    
  147.     width: 1044px;
  148.     height: 64px;
  149.     border: none !important;
  150.     background: #000d07;
  151.    
  152.     box-shadow: 0 1px 0 1px #d60025;
  153.     z-index: 10;
  154. }
  155.  
  156. .status-menu-container:before, .status-menu-container:after {
  157.     width: 36px;
  158.     height: 64px;
  159. }
  160.  
  161. .status-menu-container:before { left: -18px; }
  162. .status-menu-container:after { right: -18px; }
  163.  
  164. .status-menu-container .status-menu, .list-menu-float {
  165.     display: block;
  166.     width: 346px;
  167.     height: 48px;
  168.     padding: 8px 0;
  169.     border: none;
  170.     margin: 0;
  171.    
  172.     font-size: 0;
  173.     text-align: left;
  174. }
  175.  
  176. .list-menu-float {
  177.     top: 0;
  178.     right: calc(50% - 528px);
  179.     z-index: 20;
  180. }
  181.  
  182. .status-menu-container .status-menu {
  183.     position: relative;
  184.     left: -6px;
  185. }
  186.  
  187. .status-menu-container .status-menu:before, .status-menu-container .status-menu:after, .list-menu-float:before, .list-menu-float:after {
  188.     content: "";
  189.     position: absolute;
  190.     top: 6px;
  191.    
  192.     display: block;
  193.     width: 7px;
  194.     height: 52px;
  195.     background-color: #fff600;
  196. }
  197.  
  198. .status-menu-container .status-menu:before, .list-menu-float:before { left: 116px; }
  199. .status-menu-container .status-menu:after, .list-menu-float:after { right: 116px; }
  200.  
  201. .status-menu-container .status-menu:before, .status-menu-container .status-menu:after { transform: skew(30deg); }
  202. .list-menu-float:before, .list-menu-float:after { transform: skew(-30deg); }
  203.  
  204.  
  205.  
  206. /*------------------------------*\
  207.   HEADER @Logo
  208. \*------------------------------*/
  209.  
  210. .header {
  211.     position: fixed;
  212.     top: 0;
  213.     left: calc(50% - 150px);
  214.    
  215.     width: 300px;
  216.     height: 112px;
  217.     background: #000d07;
  218.    
  219.     z-index: 15;
  220. }
  221.  
  222. .header:before, .header:after {
  223.     width: 170px;
  224.     height: 48px;
  225. }
  226.  
  227. .header:before { left: -18px; }
  228. .header:after { right: -18px; }
  229.  
  230. .header .header-title {
  231.     top: 3px;
  232.     left: -6px;
  233.    
  234.     width: 312px;
  235.     height: 120px;
  236.     background: url(http://i.imgur.com/yH5Mc3g.png) no-repeat center center / contain scroll;
  237.    
  238.     transition: transform 0.3s cubic-bezier(0.32,0.05,0.48,1);
  239.     z-index: 1;
  240. }
  241.  
  242. .header .header-title:hover {
  243.     transform: scale(0.975);
  244. }
  245.  
  246.  
  247.  
  248. /*------------------------------*\
  249.   HEADER @Nav&User-Icons
  250. \*------------------------------*/
  251.  
  252. .status-menu-container .status-menu .status-button, .list-menu-float .icon-menu {
  253.     display: inline-block;
  254.     width: 100px;
  255.     height: 18px;
  256.     padding: 3px 0;
  257.     margin: 0;
  258.     background: none !important;
  259.    
  260.     color: #fff600;
  261.     font: normal 0 "Carrois Gothic SC" !important;
  262.     text-align: center;
  263.     text-transform: uppercase;
  264.    
  265.     transition: color 0.075s cubic-bezier(0.32,0.05,0.48,1);
  266. }
  267.  
  268. .list-menu-float form {
  269.     display: inline-block;
  270. }
  271.  
  272. .status-menu-container .status-menu .status-button.on, .status-menu-container .status-menu .status-button:hover, .list-menu-float .icon-menu:hover { color: #fff; }
  273.  
  274. .status-menu-container .status-menu .status-button:not(:nth-of-type(3n)), .icon-menu:not(:nth-of-type(3n))
  275. { margin-right: 15px; }
  276. .status-menu-container .status-menu .status-button:nth-of-type(4), .icon-menu:nth-of-type(1)
  277. { margin-left: 15px; }
  278.  
  279. .status-menu-container .status-menu .status-button:nth-of-type(3n+1), .icon-menu:nth-of-type(3n+1)
  280. { text-align: right; }
  281. .status-menu-container .status-menu .status-button:nth-of-type(3n), .icon-menu:nth-of-type(3n)
  282. { text-align: left; }
  283.  
  284. .status-menu .status-button:before, .icon-menu:before { font-size: 14px; }
  285.  
  286. .status-menu .status-button.all_anime:before { content: "All Anime"; }
  287. .manga .status-menu .status-button.all_anime:before { content: "All Manga"; }
  288. .status-menu .status-button.watching:before { content: "Watching"; }
  289. .status-menu .status-button.reading:before { content: "Reading"; }
  290. .status-menu .status-button.completed:before { content: "Completed"; }
  291. .status-menu .status-button.onhold:before { content: "On Hold"; }
  292. .status-menu .status-button.dropped:before { content: "Dropped"; }
  293. .status-menu .status-button.plantowatch:before, .status-menu .status-button.plantoread:before { content: "Planned"; }
  294.  
  295. .icon-menu.profile:before { content: "Profile"; }
  296. .icon-menu.quick-add:before { content: "Quick Add"; }
  297. .icon-menu.anime-list:before { content: "Animelist"; }
  298. .icon-menu.manga-list:before { content: "Mangalist"; }
  299. .icon-menu.history:before { content: "History"; }
  300. .icon-menu.logout:before { content: "Logout"; }
  301.  
  302. .status-menu .status-button:after { display: none !important; }
  303.  
  304.  
  305.  
  306. /*------------------------------*\
  307.   HEADER @Subnav-R
  308. \*------------------------------*/
  309.  
  310. body[data-owner="1"] .icon-menu.export, body[data-owner="1"] .icon-menu.setting {
  311.     position: absolute;
  312.     top: 66px;
  313.    
  314.     width: 55px !important;
  315.     height: 22px;
  316.     margin: 0;
  317.    
  318.     color: #0cd693;
  319.     line-height: 22px !important;
  320.     text-align: center;
  321. }
  322.  
  323. body[data-owner="1"] .icon-menu.setting:hover, body[data-owner="1"] .icon-menu.export:hover { color: #fff; }
  324.  
  325. body[data-owner="1"] .icon-menu.export { left: -4px; }
  326. body[data-owner="1"] .icon-menu.export:before {
  327.     content: "Export";
  328.     font-size: 12px;
  329. }
  330.  
  331. body[data-owner="1"] .icon-menu.setting { left: 51px; }
  332. body[data-owner="1"] .icon-menu.setting:before {
  333.     content: "SETTINGS";
  334.     font-size: 12px;
  335. }
  336.  
  337. body[data-owner="1"] .icon-menu.setting .text {
  338.     position: absolute;
  339.     top: 28px !important;
  340.     right: 0 !important;
  341.     left: auto !important;
  342.    
  343.     display: block;
  344.     width: 10px !important;
  345.     height: 0 !important;
  346.    
  347.     opacity: 1 !important;
  348.     overflow: visible;
  349. }
  350.  
  351. body[data-owner="1"] .list-menu-float .icon-menu.setting .text a {
  352.     position: absolute;
  353.     left: auto !important;
  354.    
  355.     display: block !important;
  356.    
  357.     width: 100px !important;
  358.     height: 20px !important;
  359.     padding: 2px 12px 0 !important;
  360.     border: none !important;
  361.     background: #001a0e content-box !important;
  362.    
  363.     color: #0cd693 !important;
  364.     font: 11px/20px "Carrois Gothic SC" !important;
  365.     text-align: center !important;
  366.    
  367.     opacity: 0;
  368.     transition-property: opacity, color;
  369.     transition-timing-function: cubic-bezier(0.32,0.05,0.48,1);
  370.     pointer-events: none;
  371. }
  372.  
  373. body[data-owner="1"] .list-menu-float .icon-menu.setting:hover .text a {
  374.     opacity: 1;
  375.     pointer-events: auto;
  376. }
  377.  
  378. body[data-owner="1"] .list-menu-float .icon-menu.setting .text a:hover { color: #fff !important; }
  379.  
  380. body[data-owner="1"] .list-menu-float .icon-menu.setting .text a:first-of-type {
  381.     top: 0px !important;
  382.     right: 0px !important;
  383.     transition-duration: 0.15s, 0.075s;
  384. }
  385.  
  386. body[data-owner="1"] .list-menu-float .icon-menu.setting .text a:nth-of-type(2) {
  387.     top: 22px !important;
  388.     right: 12px !important;
  389.     transition-duration: 0.3s, 0.075s;
  390. }
  391.  
  392. body[data-owner="1"] .icon-menu.setting a:before, body[data-owner="1"] .icon-menu.setting a:after {
  393.     content: "";
  394.    
  395.     position: absolute;
  396.     top: 2px;
  397.    
  398.     display: block;
  399.     width: 12px;
  400.     height: 20px;
  401.     background: #001a0e !important;
  402.    
  403.     transform: skew(-30deg);
  404.     z-index: -1;
  405. }
  406.  
  407. body[data-owner="1"] .icon-menu.setting a:before {
  408.     left: 6px;
  409. }
  410.  
  411. body[data-owner="1"] .icon-menu.setting a:after {
  412.     right: 6px;
  413. }
  414.  
  415.  
  416.  
  417. /*------------------------------*\
  418.   HEADER @Subnav-R-Search
  419. \*------------------------------*/
  420.  
  421. .search-container {
  422.     position: absolute;
  423.     top: 66px;
  424.     left: 800px;
  425.    
  426.     width: 130px;
  427.     height: 28px;
  428.     background: #001a0e;
  429.     box-shadow: 0 1px 0 1px #d60025;
  430. }
  431.  
  432. .search-container:after {
  433.     content: "";
  434.    
  435.     position: absolute;
  436.     top: 0;
  437.     right: -9px;
  438.    
  439.     display: block;
  440.     width: 18px;
  441.     height: 28px;
  442.     background: #001a0e;
  443.    
  444.     transform: skew(-30deg);
  445.     box-shadow: 2px 1px 0 1px #d60025;
  446. }
  447.  
  448. .search-container:before {
  449.     content: "";
  450.     position: absolute;
  451.     top: 3px;
  452.     left: 22px;
  453.    
  454.     display: block;
  455.     width: 80px;
  456.     height: 22px;
  457.     background: #012f1a;
  458.    
  459.     transform: skew(-30deg);
  460. }
  461.  
  462. .status-menu-container .search-container #search-box {
  463.     position: absolute;
  464.     top: 0px;
  465.     left: 24px;
  466.     width: 76px !important;
  467.     height: 22px;
  468.     padding: 3px 0;
  469.     margin: 0;
  470.    
  471.     overflow: visible;
  472. }
  473.  
  474. .status-menu-container .search-container #search-box input {
  475.     padding: 1px 2px;
  476.     border: none;
  477.     background: none;
  478.    
  479.     color: #0cd693;
  480.    
  481.     z-index: 1;
  482. }
  483.  
  484. .status-menu-container .search-container #search-box input:focus { outline: none; }
  485.  
  486. .status-menu-container .search-container #search-button {
  487.     position: absolute;
  488.     top: 3px;
  489.     right: 0;
  490.    
  491.     width: 22px;
  492.     height: 22px;
  493.     margin: 0;
  494.    
  495.     color: #0cd693 !important;
  496.     font-size: 20px;
  497.    
  498.     cursor: default;
  499.     z-index: 1;
  500. }
  501.  
  502. .list-menu-float .icon-menu .icon { display: none; }
  503. .list-menu-float .icon-menu:not(.profile):hover {
  504.     width: 100px;
  505. }
  506.  
  507. .icon-menu.logout {
  508.     text-align: left;
  509.     margin: 0;
  510. }
  511.  
  512.  
  513.  
  514. /*------------------------------*\
  515.   HEADER @Subnav-R-Non-Owner
  516. \*------------------------------*/
  517.  
  518. .header .header-menu {
  519.     position: fixed;
  520.     top: 0 !important;
  521.     right: calc(50% - 528px);
  522.    
  523.     display: block;
  524.     width: 346px;
  525.     height: 48px;
  526.     padding: 8px 0;
  527.    
  528.     z-index: -1;
  529. }
  530.  
  531. .btn-menu {
  532.     position: absolute;
  533.     top: 66px;
  534.     left: -24px;
  535.    
  536.     width: 130px;
  537.     height: 28px;
  538.     background: #001a0e;
  539.     box-shadow: -1px 1px 0 1px #d60025;
  540.    
  541.     font-size: 0 !important;
  542. }
  543.  
  544. .list-menu {
  545.     position: absolute;
  546.     top: 66px !important;
  547.     left: -24px;
  548.     right: auto !important;
  549.    
  550.     display: block !important;
  551.     width: 130px;
  552.     height: 0;
  553.     border: none !important;
  554.    
  555.     box-shadow: none !important;
  556. }
  557.  
  558. .btn-menu .username, .list-menu .manga-list, .list-menu .anime-list {
  559.     position: absolute;
  560.     top: 0;
  561.    
  562.     display: block !important;
  563.     width: 55px !important;
  564.     height: 28px !important;
  565.     margin: 0 !important;
  566.    
  567.     color: #0cd693 !important;
  568.     font: normal 0/28px "Carrois Gothic SC" !important;
  569.     text-align: center !important;
  570.     text-transform: uppercase;
  571.    
  572.     cursor: pointer;
  573.     z-index: 1;
  574.     transition: color 0.075s cubic-bezier(0.32,0.05,0.48,1) !important;
  575. }
  576.  
  577. body[data-owner="1"] .btn-menu .username {
  578.     display: none !important;
  579. }
  580.  
  581. .btn-menu .username:hover, .list-menu .manga-list:hover, .list-menu .anime-list:hover {
  582.     color: #fff !important;
  583.     background: none !important;
  584. }
  585.  
  586. .btn-menu .username {
  587.     right: 55px;
  588. }
  589.  
  590. .list-menu .manga-list, .list-menu .anime-list {
  591.     right: 0;
  592. }
  593.  
  594. .btn-menu .username:before {
  595.     content: "Profile";
  596.    
  597.     font-size: 12px;
  598. }
  599.  
  600. .list-menu .icon-menu.manga-list:before {
  601.     content: "Manga";
  602.    
  603.     font-size: 12px;
  604. }
  605.  
  606. .list-menu .icon-menu.anime-list:before {
  607.     content: "Anime";
  608.    
  609.     font-size: 12px;
  610. }
  611.  
  612. .list-menu .manga-list svg, .list-menu .anime-list svg {
  613.     display: none !important;
  614. }
  615.  
  616. .btn-menu:hover .username, .btn-menu:hover ~ .list-menu .manga-list {
  617.     opacity: 1;
  618.     pointer-events: auto;
  619. }
  620.  
  621.  
  622.  
  623. /*------------------------------*\
  624.   HEADER @Subnav-L-Sort-by
  625. \*------------------------------*/
  626.  
  627. .list-table > tbody:first-of-type {
  628.     position: fixed;
  629.     top: 66px;
  630.     left: calc(50% - 288px - 55px);
  631.    
  632.     display: block !important;
  633.     width: 55px;
  634.     height: 28px;
  635.     padding-right: 8px;
  636.     background: #001a0e;
  637.    
  638.     text-align: center;
  639.    
  640.     box-shadow: 0 1px 0 1px #d60025;
  641.     z-index: 5;
  642. }
  643.  
  644. .list-table > tbody:first-of-type:before {
  645.     content: "SORT";
  646.    
  647.     color: #0cd693;
  648.     font: 12px/28px "Carrois Gothic SC";
  649.    
  650.     transition: color 0.075s cubic-bezier(0.32,0.05,0.48,1);
  651. }
  652.  
  653. .list-table > tbody:first-of-type:hover:before { color: #fff; }
  654.  
  655. .list-table > tbody:first-of-type:after {
  656.     left: -9px;
  657.    
  658.     width: 18px;
  659.     height: 28px;
  660.     background: #001a0e !important;
  661.    
  662.     z-index: -1;
  663. }
  664.  
  665. .list-table-header {
  666.     position: absolute;
  667.     top: 28px;
  668.     left: 0;
  669.    
  670.     display: block;
  671. }
  672.  
  673. .list-table-header .header-title {
  674.     position: absolute;
  675.    
  676.     display: block !important;
  677.    
  678.     width: auto !important;
  679.     height: auto !important;
  680.     padding: 2px 0 0 !important;
  681.     border: none !important;
  682.     background: none !important;
  683.    
  684.     line-height: 20px;
  685.     text-align: center !important;
  686.    
  687.     opacity: 0;
  688.     transition-property: all;
  689.     transition-timing-function: cubic-bezier(0.32,0.05,0.48,1);
  690.     pointer-events: none;
  691. }
  692.  
  693. .list-table > tbody:first-of-type:hover .header-title {
  694.     opacity: 1;
  695.     pointer-events: auto;
  696. }
  697.  
  698. .header-title.title {
  699.     top: 0px;
  700.     left: 0px;
  701.     transition-duration: 0.15s;
  702. }
  703.  
  704. .header-title.score {
  705.     top: 22px;
  706.     left: 12px;
  707.     transition-duration: 0.3s;
  708. }
  709.  
  710. .header-title.progress, .header-title.chapters {
  711.     top: 44px;
  712.     left: 24px;
  713.     transition-duration: 0.45s;
  714. }
  715.  
  716. .header-title.volumes {
  717.     top: 66px;
  718.     left: 36px;
  719.     transition-duration: 0.6s;
  720. }
  721.  
  722. .list-table-header .header-title a {
  723.     width: 100px;
  724.     height: 20px;
  725.     padding: 0 12px;
  726.     background: #001a0e content-box;
  727.    
  728.     color: #0cd693 !important;
  729.     font: normal 11px/20px "Carrois Gothic SC";
  730.     text-transform: uppercase;
  731.    
  732.     transition: color 0.075s cubic-bezier(0.32,0.05,0.48,1) !important;
  733. }
  734.  
  735. .list-table-header .header-title a:hover {
  736.     color: #fff !important;
  737. }
  738.  
  739. .list-table-header .header-title a:before, .list-table-header .header-title a:after {
  740.     content: "";
  741.    
  742.     position: absolute;
  743.     top: 0;
  744.    
  745.     display: block;
  746.     width: 12px;
  747.     height: 20px;
  748.     background: #001a0e !important;
  749.    
  750.     transform: skew(30deg);
  751.     z-index: -1;
  752. }
  753.  
  754. .list-table-header .header-title a:before { left: 6px; }
  755. .list-table-header .header-title a:after { right: 6px; }
  756.  
  757. .list-table-header .header-title.status,
  758. .list-table-header .header-title.image,
  759. .list-table-header .header-title.tags,
  760. .list-table-header .header-title.started,
  761. .list-table-header .header-title.studio,
  762. .list-table-header .header-title.days
  763. { display: none !important; }
  764.  
  765. .list-table-header .header-title a .sort-icon {
  766.     position: absolute;
  767.    
  768.     height: 12px;
  769.    
  770.     font-size: 12px;
  771.     line-height: 12px;
  772.     color: #fff600 !important;
  773. }
  774.  
  775. .sort-icon.fa-sort-asc { left: 12px; top: 6px; }
  776. .sort-icon.fa-sort-desc { right: 12px; bottom: 6px; }
  777.  
  778.  
  779.  
  780. /*------------------------------*\
  781.   HEADER @Subnav-L-BTNs
  782. \*------------------------------*/
  783.  
  784. .list-unit .list-status-title .stats {
  785.     position: fixed;
  786.     top: 66px;
  787.     left: calc(50% - 288px);
  788.    
  789.     width: 130px;
  790.     height: 28px;
  791.     background: #001a0e;
  792.    
  793.     z-index: 7;
  794.     box-shadow: 1px 1px 0 1px #d60025;
  795. }
  796.  
  797. .list-unit .list-status-title .stats a {
  798.     position: absolute;
  799.     top: 0;
  800.    
  801.     width: 55px;
  802.    
  803.     color: #0cd693;
  804.     font: 12px/28px "Carrois Gothic SC";
  805.     text-align: center;
  806.     text-transform: uppercase;
  807.    
  808.     z-index: 1;
  809.     transition: color 0.075s cubic-bezier(0.32,0.05,0.48,1);
  810. }
  811.  
  812. #show-stats-button { left: 0; }
  813. #advanced-options-button { left: 55px; }
  814.  
  815. .stats a i { display: none; }
  816.  
  817. .list-unit .list-status-title .stats a:hover {
  818.     color: #fff;
  819.     transition: color 0.075s cubic-bezier(0.32,0.05,0.48,1);
  820. }
  821.  
  822. .list-unit .list-stats {
  823.     width: 100%;
  824.     margin-top: -15px;
  825.     background: #000d07;
  826.    
  827.     color: #0cd693;
  828.     font-family: "Open Sans";
  829. }
  830.  
  831.  
  832.  
  833. /*------------------------------*\
  834.   HEADER @Log-in/Affinity
  835. \*------------------------------*/
  836.  
  837. .header .header-menu .header-info {
  838.     position: fixed;
  839.     top: calc(50% + 196px);
  840.     left: 0;
  841.    
  842.     width: 340px;
  843.     height: 24px;
  844.     background: #000d07;
  845.     box-shadow: 0px 1px 0 1px #d60025;
  846.     margin: 0;
  847.    
  848.     color: #0cd693;
  849.     font: 14px/24px "Carrois Gothic SC";
  850.     text-align: center;
  851.     vertical-align: middle;
  852.     text-transform: uppercase;
  853.    
  854.     transform: rotate(-90deg);
  855.     transform-origin: left top;
  856. }
  857.  
  858. .header-info:before, .header-info:after {
  859.     width: 13px;
  860.     height: 24px;
  861. }
  862.  
  863. .header-info:before { left: -6px; }
  864. .header-info:after { right: -6px; }
  865.  
  866. .header .header-info a {
  867.     display: inline-block;
  868.     width: auto;
  869.     height: 16px;
  870.     margin: 0px;
  871.    
  872.     color: #fff600;
  873.     font: normal 14px/16px "Carrois Gothic SC";
  874.    
  875.     transition: color 0.075s cubic-bezier(0.32, 0.05, 0.48, 1);
  876. }
  877.  
  878. .header .header-info a:hover {
  879.     color: #fff;
  880. }
  881.  
  882.  
  883.  
  884.  
  885.  
  886. /*==============================*\
  887.   !COVER
  888. \*==============================*/
  889.  
  890. .cover-block {
  891.     position: relative;
  892.    
  893.     width: 100%;
  894.     min-width: 1056px;
  895.     height: 430px;
  896.     padding-top: 64px;
  897.    
  898.     overflow: hidden;
  899. }
  900.  
  901. .image-container {
  902.     position: absolute;
  903.     left: calc(50% - 625px);
  904.    
  905.     display: block !important;
  906.     width: 1250px !important;
  907.     height: 100%;
  908.     padding: 0 !important;
  909.    
  910.     background-repeat: no-repeat;
  911.     background-size: contain;
  912.     background-position: 115px center;
  913.     background-attachment: scroll;
  914. }
  915.  
  916. body[data-query*="\"status\":7"] .image-container { background-image: url(http://i.imgur.com/2dNxOcM.png); background-position: 20px center; }
  917. body[data-query*="\"status\":1"] .image-container { background-image: url(http://i.imgur.com/aPHWdRV.png); }
  918. body[data-query*="\"status\":2"] .image-container { background-image: url(http://i.imgur.com/Dv7xyGN.png); }
  919. body[data-query*="\"status\":3"] .image-container { background-image: url(http://i.imgur.com/0HM7Vho.png); background-position: 85px center; }
  920. body[data-query*="\"status\":4"] .image-container { background-image: url(http://i.imgur.com/dh42mXP.png); background-position: 570px center; }
  921. body[data-query*="\"status\":6"] .image-container { background-image: url(http://i.imgur.com/JQlB1VA.png); background-position: 670px center; }
  922.  
  923. #cover-image, .btn-list-setting { display: none !important; }
  924.  
  925.  
  926. /* List Header */
  927.  
  928. .list-unit .list-status-title {
  929.     position: static;
  930.    
  931.     width: 100%;
  932.     min-width: 1050px;
  933.     height: 64px;
  934.     background: #000d07;
  935. }
  936.  
  937. .list-unit .list-status-title .text {
  938.     width: 100%;
  939.    
  940.     color: #fff600;
  941.     font-family: "Carrois Gothic SC";
  942.     letter-spacing: 1px;
  943. }
  944.  
  945.  
  946.  
  947.  
  948.  
  949. /*==============================*\
  950.   !LIST
  951. \*==============================*/
  952.  
  953. .list-table > tbody {
  954.     background: #001a0e;
  955. } .list-table > tbody:nth-of-type(2n+1) {
  956.     background: #000d07;
  957. }
  958.  
  959. .data:not(.status):not(.number):not(:last-child) {
  960.     padding-right: 5px !important;
  961. }
  962.  
  963.  
  964.  
  965.  
  966.  
  967. /*==============================*\
  968.   !FILTER-MENU
  969. \*==============================*/
  970.  
  971. #fancybox-overlay {
  972.     background: #000 !important;
  973.     opacity: 0.6 !important;
  974. }
  975.  
  976. #advanced-options {
  977.     width: 100%;
  978.     min-width: 1056px;
  979.     padding: 30px 0 30px 0;
  980.     background: #001a0e;
  981.     border: none;
  982.    
  983.     font-family: "Open Sans";
  984. }
  985.  
  986.  
  987. /* - - - - - - - - - - - - - - -*\
  988.   Close Button
  989. \*- - - - - - - - - - - - - - - */
  990.  
  991. #advanced-options #fancybox-close {
  992.     right: calc(50% - 375px);
  993.    
  994.     background: #0cd693;
  995.     border-radius: 50%;
  996.    
  997.     text-align: center;
  998.     line-height: 32px;
  999.    
  1000.     transition: all 0.2s cubic-bezier(0.32,0.05,0.48,1);
  1001. }
  1002.  
  1003. #advanced-options #fancybox-close:hover {
  1004.     background: #fff600;
  1005. }
  1006.  
  1007. #advanced-options #fancybox-close:before {
  1008.     content: "\f00d";
  1009.    
  1010.     color: #001a0e;
  1011.     font: 24px/30px "FontAwesome";
  1012. }
  1013.  
  1014.  
  1015. /* - - - - - - - - - - - - - - -*\
  1016.   Headers
  1017. \*- - - - - - - - - - - - - - - */
  1018.  
  1019. #advanced-options .advanced-options-header {
  1020.     border-color: #0cd693;
  1021.     border-width: 2px;
  1022.    
  1023.     color: #fff;
  1024.     font: 16px "Carrois Gothic SC";
  1025.     text-transform: uppercase;
  1026. }
  1027.  
  1028. #advanced-options .advanced-options-header .description {
  1029.     font: 12px "Open Sans";
  1030.     color: #ccc;
  1031. }
  1032.  
  1033.  
  1034. /* - - - - - - - - - - - - - - -*\
  1035.   Items
  1036. \*- - - - - - - - - - - - - - - */
  1037.  
  1038. #advanced-options .filter-widget span, #advanced-options .sort-widget span {
  1039.     color: #fff;
  1040.     font-family: "Open Sans" !important;
  1041. }
  1042.  
  1043. #advanced-options select, #advanced-options option { background-image: url(/img/pc/ownlist/icon_pulldown_triangle_disable.png); }
  1044.  
  1045. #advanced-options select, #advanced-options option, #advanced-options input[type=text] {
  1046.     background-color: #00150b;
  1047.     border-color: #0cd693;
  1048.     outline-color: #fff600;
  1049.    
  1050.     color: #0cd693;
  1051. }
  1052.  
  1053. #advanced-options select:disabled {
  1054.     opacity: 0.6;
  1055. }
  1056.  
  1057.  
  1058.  
  1059. /* Sort Labels */
  1060.  
  1061. #advanced-options .sort-widget input[type=radio] + label {
  1062.     padding: 4px 0;
  1063.     background: #0cd693 !important;
  1064.     border: none !important;
  1065.     border-radius: 5px;
  1066.     margin-right: 5px;
  1067.    
  1068.     color: #001a0e !important;
  1069.    
  1070.     transition: all 0.2s cubic-bezier(0.32,0.05,0.48,1);
  1071. }
  1072.  
  1073. #advanced-options .sort-widget input[type=radio]:disabled + label { opacity: 0.6; }
  1074.  
  1075. #advanced-options .sort-widget input[type=radio]:checked + label, #advanced-options .sort-widget input[type=radio]:not(:disabled) + label:hover {
  1076.     background: #fff600 !important;
  1077. }
  1078.  
  1079. #advanced-options .sort-widget input[type=radio]:disabled + label {
  1080.     background: #00150b !important;
  1081.    
  1082.     color: #0cd693 !important;
  1083. }
  1084.  
  1085.  
  1086. /* - - - - - - - - - - - - - - -*\
  1087.   Action Buttons
  1088. \*- - - - - - - - - - - - - - - */
  1089.  
  1090. #advanced-options .advanced-options-button {
  1091.     width: 100%;
  1092.     padding: 0;
  1093.     border-width: 0;
  1094.     background: #00150b;
  1095. }
  1096.  
  1097. #advanced-options .advanced-options-button a {
  1098.     position: relative;
  1099.    
  1100.     height: 20px;
  1101.     background: #0cd693;
  1102.     border-radius: 0;
  1103.     margin: 15px;
  1104.    
  1105.     color: #001a0e;
  1106.     text-transform: uppercase;
  1107.     font: 16px "Carrois Gothic SC";
  1108.    
  1109.     transition: all 0.2s cubic-bezier(0.32,0.05,0.48,1);
  1110. }
  1111.  
  1112. .advanced-options-button a:before, .advanced-options-button a:after {
  1113.     content: "";
  1114.    
  1115.     position: absolute;
  1116.     top: 0;
  1117.    
  1118.     display: block;
  1119.     width: 18px;
  1120.     height: 32px;
  1121.     background: #0cd693;
  1122.    
  1123.     transform: skew(-30deg);
  1124.     transition: all 0.2s cubic-bezier(0.32,0.05,0.48,1);
  1125. }
  1126.  
  1127. .advanced-options-button a:before { left: -9px; }
  1128. .advanced-options-button a:after { right: -9px; }
  1129.  
  1130. #advanced-options .advanced-options-button a:hover, .advanced-options-button a:hover:before, .advanced-options-button a:hover:after { background: #fff600; }
  1131.  
  1132.  
  1133.  
  1134.  
  1135.  
  1136. /*==============================*\
  1137.   !FOOTER
  1138. \*==============================*/
  1139.  
  1140. #footer-block {
  1141.     min-width: 1050px;
  1142.     padding: 0;
  1143.     background: #000d07;
  1144. }
  1145.  
  1146. #copyright {
  1147.     padding: 17px;
  1148.    
  1149.     color: #0cd693;
  1150.     font: 12px/16px "Open Sans";
  1151.    
  1152.     opacity: 0.5;
  1153.     transition: all 0.075s cubic-bezier(0.32, 0.05, 0.48, 1);
  1154. }
  1155.  
  1156. #copyright:hover { opacity: 1; }
  1157.  
  1158. #copyright:after { content: "List design by Valerio Lyndon."; }
  1159.  
  1160.  
  1161.  
  1162.  
  1163.  
  1164. /*==============================*\
  1165.   !MEDIA-QUERY-FIXES
  1166. \*==============================*/
  1167.  
  1168. @media (max-width: 1056px) {   
  1169.     body {
  1170.         background-position: -522px top !important;
  1171.     }
  1172.    
  1173.     .header,
  1174.     .header .header-menu,
  1175.     .status-menu-container,
  1176.     .list-menu-float,
  1177.     .list-table > tbody:first-of-type,
  1178.     .list-unit .list-status-title .stats
  1179.     { position: absolute !important; }
  1180.    
  1181.     .header {
  1182.         left: 369px;
  1183.     }
  1184.     .header .header-menu {
  1185.         left: 332px;
  1186.         right: auto;
  1187.     }
  1188.     .status-menu-container {
  1189.         top: 0 !important;
  1190.         left: -3px;
  1191.     }
  1192.     .status-menu-container:after {
  1193.         right: -15px;
  1194.         transform: none;
  1195.     }
  1196.     .list-menu-float {
  1197.         left: 701px;
  1198.     }
  1199.     .list-table > tbody:first-of-type {
  1200.         top: 66px;
  1201.         left: 176px;
  1202.     }
  1203.     .list-unit .list-status-title .stats {
  1204.         top: 66px;
  1205.         left: 231px;
  1206.     }
  1207. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!