Advertisement
althindor

Code for smol neko

May 26th, 2018
227
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.59 KB | None | 0 0
  1. /* Code by AlthIndor, Graphics by SugaSharra */
  2.  
  3. html, body {
  4.  background: url('http://38.media.tumblr.com/90d14bc3c54a3daabd04bc8e61cc295a/tumblr_inline_n258ovpRe81qhwjx8.gif') #000000 fixed repeat;
  5.  cursor: url('http://31.media.tumblr.com/tumblr_m2umkqvNUT1qfamg6.gif'), auto !important;
  6. }
  7. a {text-decoration: none !important;}
  8.  
  9. #columns ::-webkit-scrollbar {
  10.  background: #404040;
  11.  width: 13px;
  12.  border-radius: 3px;
  13. }
  14.  
  15. #columns ::-webkit-scrollbar-thumb {
  16.  background: #B43838;
  17.  border: 1px solid #404040;
  18.  border-radius: 3px;
  19. }
  20.  
  21. /* Fonts */
  22.  
  23. @font-face {
  24.  font-family: 'VT323';
  25.  font-style: normal;
  26.  font-weight: 400;
  27.  src: url(https://fonts.gstatic.com/s/vt323/v7/LfMzj2MWAZU6qzlnp1MNbg.woff) format('woff');
  28. }
  29.  
  30. @font-face {
  31.  font-family: 'PT Sans';
  32.  font-style: normal;
  33.  font-weight: 400;
  34.  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0KEww.woff) format('woff');
  35. }
  36.  
  37. /* Header */
  38.  
  39. #gaia_header, #gaia_header #header_left, #gaia_header #header_right {background: #B43838 !important;}
  40. #gaia_header {border-bottom: 1px solid transparent;}
  41.  
  42. #gaia_header #header_left, #gaia_header #header_right {
  43.  font-size: 0 !important;
  44.  line-height: 26px !important;
  45.  padding: 0 4px 0 3px !important;
  46.  box-sizing: border-box;
  47. }
  48. #gaia_header #header_right {float: right !important;}
  49.  
  50. #gaia_header li {padding: 0 5px 0 5px;}
  51. #gaia_header li.spacer {display: none !important;}
  52.  
  53. #header_left img {
  54.  background: url('https://i.imgur.com/w0Cbo9w.png') 0 3px no-repeat;
  55.  width: 0px !important;
  56.  padding: 0 37px 0 0;
  57. }
  58.  
  59. #gaia_header a {
  60.  color: #FFFFFF !important;
  61.  font-size: 12px !important;
  62. }
  63.  
  64. /* Text Butons */
  65.  
  66. #gaia_header a, #column_1 .panel, #column_2 h2, #id_comments div:not(.postcontent), #id_comments p {
  67.  font-family: 'VT323';
  68.  text-transform: uppercase;
  69. }
  70.  
  71. #column_1 .panel, #column_1 .panel a, #column_2 h2 {
  72.  color: #242424;
  73.  font-size: 16px;
  74.  font-weight: bold;
  75.  line-height: 30px;
  76.  text-align: center;
  77. }
  78. #id_contact li:hover a, .media_panel:hover::after, #column_2 .panel:hover h2 {color: #FFFFFF;}
  79.  
  80. /* Columns */
  81.  
  82. #columns, #column_1, #column_2 {
  83.  position: absolute;
  84.  margin: 0;
  85. }
  86. #column_1, #column_2 {width: 100%;}
  87. #column_3 {display: none;}
  88.  
  89. #columns {
  90.  background: url('https://images2.imgbox.com/20/56/qIklC7aY_o.png');
  91.  width: 612px;
  92.  height: 455px;
  93.  top: calc(50% - 230px);
  94.  left: calc(50% - 306px);
  95. }
  96.  
  97. #column_1 {
  98.  height: 32px;
  99.  top: 109px;
  100. }
  101.  
  102. #column_2 {
  103.  height: 266px;
  104.  top: 161px;
  105.  border: 3px solid transparent;
  106.  box-sizing: border-box;
  107. }
  108.  
  109. /* Panels */
  110.  
  111. .panel, .panel h2 {
  112.  padding: 0;
  113.  margin: 0;
  114.  box-sizing: border-box;
  115. }
  116. .panel {position: absolute;}
  117. .panel ::selection {background: #808080;}
  118. .panel ::-moz-selection {background: #808080;}
  119.  
  120. #column_1 .panel {
  121.  background: none;
  122.  height: 100%;
  123. }
  124. #column_1 .panel h2 {display: none;}
  125.  
  126. #column_2 .panel {
  127.  background: #242424;
  128.  color: #E8E8E8;
  129.  font-family: 'PT Sans', sans-serif;
  130.  font-size: 12px;
  131.  line-height: 1.5em;
  132.  text-align: justify;
  133. }
  134. #column_2 .panel a {color: #B43838;}
  135.  
  136. #column_2 .panel:not(#id_details) {
  137.  overflow-x: hidden;
  138.  overflow-y: scroll;
  139. }
  140.  
  141. #id_about, #id_comments, #id_wishlist, #column_2 .custom_panel {
  142.  width: 100%;
  143.  height: 100%;
  144.  top: -300px;
  145.  border: 10px solid transparent;
  146.  z-index: 9;
  147. }
  148. #id_about, #id_comments, #column_2 .custom_panel {padding-right: 10px;}
  149. #id_about img, #id_comments .postcontent img, .custom_panel img {max-width: 100% !important;}
  150. #id_about:hover, #id_comments:hover, #id_wishlist:hover, #column_2 .custom_panel:hover {top: 0;}
  151.  
  152. /* Headers */
  153.  
  154. .panel h2 {
  155.  background: none;
  156.  height: 32px;
  157.  width: 153px;
  158.  position: fixed;
  159.  top: calc(50% - 230px + 423px);
  160. }
  161.  
  162. #id_about h2 {left: calc(50% - 306px);}
  163. #id_comments h2 {left: calc(50% - 153px);}
  164. #id_wishlist h2 {left: 50%;}
  165. .custom_panel h2 {left: calc(50% + 153px);}
  166.  
  167. /* Contact */
  168.  
  169. #id_contact {width: 75%;}
  170. #id_contact ul:not(.buttons), #id_contact ul:not(.buttons) li {height: 100%;}
  171.  
  172. #id_contact ul:not(.buttons) li {
  173.  float: left;
  174.  width: 33.33%;
  175. }
  176.  
  177. /* Media */
  178.  
  179. .media_panel {
  180.  width: 25%;
  181.  right: 0;
  182.  overflow: hidden;
  183. }
  184. .media_panel object, .media_panel::after {position: absolute;}
  185.  
  186. .media_panel object {
  187.  bottom: -1px;
  188.  left: 43px;
  189.  opacity: 0;
  190. }
  191.  
  192. .media_panel::after {
  193.  content: 'Play Music';
  194.  width: 100%;
  195.  text-indent: -20px;
  196.  left: 0;
  197.  pointer-events: none;
  198. }
  199.  
  200. /* Details */
  201.  
  202. #id_details {
  203.  width: 120px;
  204.  height: 150px;
  205.  top: calc(50% - 75px);
  206.  left: calc(50% - 155px);
  207.  z-index: 8;
  208. }
  209. #id_details h2 {display: none;}
  210. #id_details p:nth-of-type(n+2) {display: none;}
  211. #id_details .forum_userstatus {display: none;}
  212.  
  213. #id_details::before {
  214.  content: 'smol neko has been visited by:';
  215.  display: block;
  216.  width: 200px;
  217.  position: absolute;
  218.  left: 130px;
  219. }
  220.  
  221. /* Footprints */
  222.  
  223. #id_footprints {
  224.  width: 480px;
  225.  height: 125px;
  226.  top: calc(50% - 52px);
  227.  left: calc(50% - 155px);
  228.  z-index: 7;
  229. }
  230. #id_footprints h2 {display: none;}
  231. #id_footprints .item {margin-left: 130px;}
  232.  
  233. /* Comments */
  234.  
  235. #id_comments #alerts_banner {display: none;}
  236. #id_comments .deletecomment {display: none;}
  237. #id_comments dl {margin-top: 40px;}
  238. #id_comments dd {margin-bottom: 10px;}
  239. #id_comments dd:last-of-type {margin: 0;}
  240.  
  241. #id_comments dt {
  242.  padding: 0;
  243.  margin-bottom: 2px;
  244.  border-color: #404040;
  245. }
  246.  
  247. #id_comments .dropBox {
  248.  background: #B43838;
  249.  width: 48px;
  250.  height: 48px;
  251.  margin: 3px 6px 0 0;
  252.  border: 1px solid #404040;
  253.  border-radius: 3px;
  254.  overflow: hidden;
  255. }
  256.  
  257. #id_comments .dropBox img {
  258.  width: 120px;
  259.  height: 150px;
  260.  margin-top: -26px;
  261.  margin-left: -46px;
  262. }
  263.  
  264. /* Comments Buttons */
  265.  
  266. #id_comments h2 ~ div:not(.clear), #id_comments h2 ~ div span,  #id_comments h2 ~ p {
  267.  display: block;
  268.  text-align: center;
  269.  padding: 0;
  270. }
  271.  
  272. #id_comments h2 ~ div:not(.clear), #id_comments h2 ~ p {
  273.  float: left;
  274.  background: #404040;
  275.  width: calc(50% - 5px);
  276.  height: 30px;
  277.  font-size: 13px;
  278.  line-height: 30px;
  279.  margin: 0;
  280.  border-radius: 3px;
  281. }
  282. #id_comments h2 ~ div:not(.clear):hover, #id_comments h2 ~ p:hover {background: #606060;}
  283. #id_comments h2 ~ div span {width: 100%;}
  284. #id_comments h2 ~ p {margin-left: 10px;}
  285.  
  286. /* Wish List */
  287.  
  288. .owner_checkmark {
  289.  margin: 0;
  290.  bottom: 5px;
  291.  left: 5px;
  292. }
  293. .premium_sparkle {display: none;}
  294.  
  295. #id_wishlist .item {
  296.  background: #404040;
  297.  width: 30px;
  298.  height: 30px;
  299.  padding: 4px;
  300.  margin: 0 9px 9px 0;
  301.  position: relative;
  302.  border-radius: 3px;
  303. }
  304. #id_wishlist .item img {filter: saturate(0%) brightness(150%);}
  305.  
  306. #id_wishlist .item:hover {background: #B43838;}
  307. #id_wishlist .item:hover img {filter: unset;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement