Newser

Untitled

Dec 15th, 2015
51
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.87 KB | None | 0 0
  1. /* NAVBAR */
  2. @import"https://dl.dropbox.com/s/um618q4x7o8v4xh/NAVBAR.css";
  3. /* COVERS */
  4. @import url(https://googledrive.com/host/0BxjwQr0BBXs-MVlzYkRVc0k0Q0k);
  5. /* FONTS */
  6. @import "http://fonts.googleapis.com/css?family=Carrois+Gothic+SC";
  7.  
  8. #inlineContent {
  9. background: url("http://images2.alphacoders.com/224/224760.jpg") center no-repeat;
  10. background-size: cover;
  11. display: inline-block !important;
  12. height: 100% ;
  13. left: 0px ;
  14. position: fixed ;
  15. right: 0 ;
  16. top: 0 ;
  17. width: 100% ;
  18. z-index: -1 ;}
  19.  
  20. #list_surround {
  21. font-size: 97%;
  22. font-weight: normal;
  23. line-height: 1;
  24. padding-bottom: 15px;
  25. padding-top: 25px;
  26. padding-left: 150px;
  27. width: 720px;
  28. }
  29.  
  30.  
  31. /* FONT */
  32. body {
  33. font-family: 'Carrois Gothic SC';
  34. text-transform: uppercase;
  35. color: #FFFFFF;
  36. }
  37.  
  38.  
  39. /* LINKS */
  40. a {
  41. -moz-transition: all 0.25s ease-in-out 0s;
  42. -webkit-transition: all 0.25s ease-in-out 0s;
  43. -o-transition: all 0.25s ease-in-out 0s;
  44. transition: all 0.25s ease-in-out 0s;
  45. color: #EEEEEE;
  46. text-decoration: none;
  47. text-shadow: none;
  48. }
  49. a:hover {
  50. color: #EEEEEE;
  51. text-shadow: 0 1px rgba(255, 255, 255, 0.15);
  52. }
  53.  
  54.  
  55. /* CATEGORY LINKS */
  56. .status_not_selected a {
  57. background-color: rgba(64, 60, 90, 0.6);
  58. border-color: rgba(48, 44, 64, 0.5);
  59. border-radius: 2px 2px 2px 2px;
  60. border-style: solid;
  61. border-width: 2px;
  62. color: #FFFFFF;
  63. display: block ;
  64. font-weight: normal;
  65. padding: 8px;
  66. text-shadow: 0 1px rgba(0, 0, 0, 0.1);
  67. }
  68. .status_selected a {
  69. background-color: #403C5A;
  70. border-color: rgba(48, 44, 64, 0.5);
  71. border-radius: 2px 2px 2px 2px;
  72. border-style: solid;
  73. border-width: 2px;
  74.  
  75.  
  76. }
  77. .status_not_selected a:hover {
  78. background-color: #403C5A;
  79. border-color: #201C3A;
  80. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  81. text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  82. }
  83. .status_selected a:hover {
  84. background-color: #403C5A;
  85. border-color: #201C3A;
  86. box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  87. text-shadow: 0 1px rgba(0, 0, 0, 0.3);
  88. }
  89.  
  90.  
  91. /* HEADER */
  92. .table_header {
  93. color: #FFFFFF;
  94. font-size: 110%;
  95. background-color: rgba(64, 60, 90, 0.6);
  96. text-align: center;
  97.  
  98. }
  99. .table_header:first-of-type {
  100. border-radius: 12px 0 0 0;
  101. }
  102. .table_header:nth-of-type(2) {
  103. text-align: center;
  104. }
  105. .table_header:last-of-type {
  106. border-radius: 0 12px 0 0;
  107. }
  108.  
  109.  
  110.  
  111. /* ROWS COLOR */
  112. .td1 {
  113. -moz-transition: all 0.25s ease-in-out 0s;
  114. -webkit-transition: all 0.25s ease-in-out 0s;
  115. -o-transition: all 0.25s ease-in-out 0s;
  116. transition: all 0.25s ease-in-out 0s;
  117. background-color: rgba(0, 0, 0, 0.6);
  118. text-align: center;
  119. }
  120. .td2 {
  121. -moz-transition: all 0.25s ease-in-out 0s;
  122. -webkit-transition: all 0.25s ease-in-out 0s;
  123. -o-transition: all 0.25s ease-in-out 0s;
  124. transition: all 0.25s ease-in-out 0s;
  125. background-color: rgba(0, 0, 0, 0.8);
  126. text-align: center;
  127. }
  128.  
  129. .animetitle + small {
  130. text-transform: lowercase;
  131. }
  132.  
  133. /* ROWS HOVER */
  134. tr:hover [class^="td"] {
  135. background-color: rgba(72, 64, 74, 0.6);z
  136. }
  137. .td1:nth-of-type(2), .td2:nth-of-type(2) {
  138. text-align: center;
  139. }
  140.  
  141. /* LIST SETTINGS */
  142. .table_header, .td1, .td2, .category_totals {
  143. padding: 4px;
  144. text-align: center;
  145. vertical-align: middle;
  146. }
  147. .table_header, .td1, .td2, .category_totals {
  148. line-height: 30px;
  149. }
  150. .borderRBL{
  151. line-height: normal ;
  152. }
  153. [cellspacing="0"] {
  154. line-height: 14px;
  155. }
  156. [class^="header_"] +{
  157. border-collapse: separate ;
  158. }
  159.  
  160.  
  161. /* CATEGORY TOTALS */
  162. .category_totals {
  163. -moz-transition: all 0.25s ease-in-out 0s;
  164. -webkit-transition: all 0.25s ease-in-out 0s;
  165. -o-transition: all 0.25s ease-in-out 0s;
  166. transition: all 0.25s ease-in-out 0s;
  167. background-color: rgba(72, 64, 87, 0);
  168. border-radius: 0 0 12px 12px;
  169. color: rgba(51, 51, 51, 0);
  170. text-align: center;
  171. font-style: italic;
  172. }
  173. .category_totals:hover {
  174. background-color: rgba(72, 64, 74, 0.6);
  175. color: #EEEEEE;
  176. font-size: small;
  177. }
  178.  
  179.  
  180. /* HEADER TEXT AND DIMENSIONS */
  181. [class^="header_"] * {
  182. font-size: 17px;
  183. background-color: rgba(0, 0, 0, 0);
  184. border-radius: 3px 3px 3px 3px;
  185. color: #EEEEEE;
  186. text-shadow: 2px 2px 2px #000000;
  187. line-height: 17px;
  188. margin-top: 10px;
  189. padding: 8px;
  190. text-align: left;
  191. }
  192.  
  193. .header_cw {
  194.     background-color: transparent;
  195.     background-image: url("http://i41.tinypic.com/qp4ewj.png");
  196.     background-position: 50% 0;
  197.     background-repeat: no-repeat no-repeat;
  198.     height: 200px;
  199. }
  200. .header_completed {
  201.     background-color: transparent;
  202.     background-image: url("http://i41.tinypic.com/2iha269.png");
  203.     background-position: 50% 0;
  204.     background-repeat: no-repeat no-repeat;
  205.     height: 200px;
  206.     z-index: 0;
  207. }
  208. .header_onhold {
  209.     background-color: transparent;
  210.     background-image: url("http://i39.tinypic.com/5fhwkz.png");
  211.     background-position: 50% 0;
  212.     background-repeat: no-repeat no-repeat;
  213.     height: 200px;
  214. }
  215. .header_dropped {
  216.     background-color: transparent;
  217.     background-image: url("http://i42.tinypic.com/f2n50y.png");
  218.     background-position: 50% 0;
  219.     background-repeat: no-repeat no-repeat;
  220.     height: 200px;
  221. }
  222. .header_ptw {
  223.     background-color: transparent;
  224.     background-image: url("http://i39.tinypic.com/2ahh7t.png");
  225.     background-position: 50% 0;
  226.     background-repeat: no-repeat no-repeat;
  227.     height: 200px;
  228. }
  229. .header_title {
  230. display: inline-block;
  231. font-family: Blackoak Std;
  232. font-size: 17px;
  233. height: auto;
  234. padding: 0 8px 0 0;
  235. text-shadow: 2px 2px 4px black;
  236. opacity: 0;
  237. pointer-events: none;
  238. }
  239.  
  240.  
  241. /* BOTTOM OF LIST */
  242. #grand_totals {
  243. background-color: rgba(0, 0, 0, 0.5);
  244. border-radius: 3px 3px 3px 3px;
  245. color: #EEEEEE;
  246. line-height: 20px;
  247. min-height: 20px;
  248. padding: 8px;
  249. text-align: center;
  250. vertical-align: middle;
  251. font-style: italic;
  252. font-size: small;
  253. }
  254. #copyright {
  255. color: black;
  256. font-size: 10px;
  257. position: fixed;
  258. bottom: 0px;
  259. right: 10px;
  260.  -webkit-text-stroke: 1px black;
  261. clear: both;
  262. }
  263.  
  264. @-webkit-keyframes tada {
  265.     0% {-webkit-transform: scale(1);}
  266.     10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
  267.     30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
  268.     40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
  269.     100% {-webkit-transform: scale(1) rotate(0);}
  270. }
  271. @-moz-keyframes tada {
  272.     0% {-webkit-transform: scale(1);}
  273.     10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
  274.     30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
  275.     40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
  276.     100% {-webkit-transform: scale(1) rotate(0);}
  277. }
  278. @keyframes tada {
  279.     0% {transform: scale(1);}
  280.     10%, 20% {transform: scale(0.9) rotate(-3deg);}
  281.     30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
  282.     40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
  283.     100% {transform: scale(1) rotate(0);}
  284. }
  285. #mal_cs_otherlinks strong  a:hover {
  286. background-color: transparent !important;
  287.     -webkit-animation-name: tada;
  288.     -moz-animation-name: tada;
  289.     animation-name: tada;
  290. -webkit-animation-duration: 1s;
  291. -moz-animation-duration: 1s;
  292.     animation-duration: 1s;
  293.     -webkit-animation-fill-mode: both;
  294.     -moz-animation-fill-mode: both;
  295.     animation-fill-mode: both;
  296. }
  297.  
  298.  
  299.  
  300. /* COVERS */
  301. .animetitle:before {
  302. content: "";
  303. left:-150px;
  304. height: 0px;
  305. width: 0px;
  306. margin-left:0;
  307. margin-top:10px;
  308. display:inline-block !important;
  309. position: absolute;
  310. background-size: contain;
  311. }
  312.  
  313. tr:hover .animetitle:before {
  314. content: "";
  315. left:-150px;
  316. margin-top: 10px;
  317. border-bottom-left-radius:7px;
  318. border-bottom-right-radius:7px;
  319. border-top-left-radius:7px;
  320. border-top-right-radius:7px;
  321. box-shadow:rgba(63, 52, 60, 0.55) 0 0 8px 8px;
  322. padding-right:150px;
  323. padding-top:220px !important;
  324. background-color:transparent;
  325. background-repeat:no-repeat no-repeat;
  326. background-size:cover;
  327. position:absolute;
  328. z-index:1;
  329. }
  330.  
  331. /*Centre panel to line*/
  332. .animetitle:before {
  333.     -ms-transform: translateY(-78px); /* IE 9 */
  334.     -webkit-transform: translateY(-78px); /* Chrome, Safari, Opera */
  335.     -moz-transform: translateY(-78px); /* Firefox */
  336.     transform: translateY(-78px);
  337. }
  338.  
  339. @-webkit-keyframes Covers {
  340.   from {
  341.     left: -150px;
  342.   }
  343.   to {
  344.     left: 5px;
  345.   }
  346. }
  347. @-moz-keyframes Covers {
  348.   from {
  349.     left: -150px;
  350.   }
  351.   to {
  352.     left: 5px;
  353.   }
  354. }
  355. @keyframes Covers {
  356.   from {
  357.     left: -150px;
  358.   }
  359.   to {
  360.     left: 5px;
  361.   }
  362. }
  363.  
  364. /* Show panel when name hovered over */
  365. tr:hover .animetitle:before {
  366. -webkit-animation: Covers 0.7s ease-out;
  367. -webkit-animation-fill-mode: forwards;
  368. -moz-animation: Covers 0.7s ease-out;
  369. -moz-animation-fill-mode: forwards;
  370. animation: Covers 0.7s ease-out;
  371. animation-fill-mode: forwards;
  372. z-index:1;
  373. }
  374.  
  375. /*
  376. CODES (REPLACEMENT FOR "CSS FOR FOXGIRLS" IMPORT)
  377. Used to remove the "more" button (which no longer works after using the code above to show covers). Also helps with settings for the tag hover option if you use that.
  378. */
  379.  
  380. #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(3),
  381. #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(4),
  382. #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(5),
  383. #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(6),
  384. #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(7),
  385. #list_surround tab\le:nth-of-type(n+4):hover td:nth-of-type(8) {
  386.     display: tab\le-cell;
  387. }
  388.  
  389. .animetitle + small {
  390.     visibility: visible ;
  391. }
  392.  
  393. #list_surround a[href*="http://myanimelist.net/panel.php?go=edit"],
  394. #list_surround a[href*="http://myanimelist.net/editlist.php?type="],
  395. #list_surround a[href*="http://myanimelist.net/panel.php?go=add"] {
  396.     visibility: visible ;
  397.     margin-right: 10px
  398. }
  399.  
  400. .td1:nth-of-type(6) small, .td2:nth-of-type(6) small,
  401. .td1:nth-of-type(5) small, .td2:nth-of-type(5) small,
  402. .td1:nth-of-type(4) small, .td2:nth-of-type(4) small {
  403.     visibility: visible ;
  404. }
  405.  
  406. .td1:nth-of-type(6) small:hover, .td2:nth-of-type(6) small:hover,
  407. .td1:nth-of-type(5) small:hover, .td2:nth-of-type(5) small:hover,
  408. .td1:nth-of-type(4) small:hover, .td2:nth-of-type(4) small:hover{
  409.     text-decoration: underline;
  410. }
  411.  
  412. #mal_cs_links > div:nth-child(1) {
  413.    display:-footer-group; }
Advertisement
Add Comment
Please, Sign In to add comment