Advertisement
althindor

Code for FAT H0PE

May 5th, 2018
246
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 6.04 KB | None | 0 0
  1. /* Code by AlthIndor, Graphics by SugaSharra */
  2.  
  3. html, body {background: linear-gradient(to bottom, rgba(255,192,204,.9), rgba(255,224,240,.9)) fixed, url('https://images2.imgbox.com/cb/a9/lqckG8Wu_o.png') center;}
  4. #columns, #columns::after, #id_contact ul:not(.buttons) li, #columns .media_panel {background: url('https://images2.imgbox.com/5a/5b/3OEbx6wF_o.png') no-repeat;}
  5.  
  6. /* Fonts */
  7.  
  8. @font-face {
  9.  font-family: 'Cookie';
  10.  font-style: normal;
  11.  font-weight: 400;
  12.  src: local('Cookie-Regular'), url(https://fonts.gstatic.com/s/cookie/v8/syky-y18lb0tSbf9kgqU.woff) format('woff');
  13. }
  14.  
  15. @font-face {
  16.  font-family: 'PT Sans';
  17.  font-style: normal;
  18.  font-weight: 400;
  19.  src: local('PT Sans'), local('PTSans-Regular'), url(https://fonts.gstatic.com/s/ptsans/v9/jizaRExUiTo99u79D0KEww.woff) format('woff');
  20. }
  21.  
  22. /* Header */
  23.  
  24. #gaia_header {
  25.  background: purple;
  26.  border-bottom: 2px solid transparent;
  27.  box-shadow: 0 1px 0 rgba(0,0,0,.3);
  28. }
  29.  
  30. #gaia_header #header_left, #gaia_header #header_right {
  31.  background: none;
  32.  color: transparent;
  33.  font-family: 'PT Sans', script, serif;
  34.  font-size: 11px !important;
  35.  line-height: 26px !important;
  36.  padding: 0 7px 0 7px !important;
  37.  box-sizing: border-box;
  38. }
  39. #gaia_header #header_right {float: right;}
  40. #gaia_header li.spacer {display: none !important;}
  41.  
  42. #header_left img {
  43.  background: url('https://i.imgur.com/w0Cbo9w.png') 0 3px no-repeat;
  44.  width: 0px !important;
  45.  padding: 0 42px 0 0;
  46. }
  47.  
  48. #gaia_header a {
  49.  color: #FFFFFF !important;
  50.  letter-spacing: .05em;
  51.  text-decoration: none;
  52.  text-transform: uppercase;
  53. }
  54.  
  55. /* Columns */
  56.  
  57. #columns, #column_1, #column_2, #column_3 {
  58.  padding: 0;
  59.  margin: 0;
  60.  position: absolute;
  61. }
  62.  
  63. #columns {
  64.  width: 830px;
  65.  height: 840px;
  66.  top: 40px;
  67.  left: calc(50% - 415px);
  68. }
  69. @media screen and (min-height: 800px) {#columns {top: calc(50% - 400px);}}
  70.  
  71. #column_1, #column_2, #column_3 {
  72.  width: 1px;
  73.  height: 1px;
  74.  overflow: visible;
  75. }
  76.  
  77. #columns::after {
  78.  content: '';
  79.  background-position: bottom right;
  80.  width: 500px;
  81.  height: 500px;
  82.  position: absolute;
  83.  bottom: 14px;
  84.  right: 0;
  85.  pointer-events: none;
  86. }
  87.  
  88. #columns ::-webkit-scrollbar {
  89.  background: purple;
  90.  width: 13px;
  91.  border-radius: 3px;
  92. }
  93.  
  94. #columns ::-webkit-scrollbar-thumb {
  95.  background: #FFFFFF;
  96.  border: 1px solid purple;
  97.  border-radius: 3px;
  98. }
  99.  
  100. /* Panels */
  101.  
  102. .panel {
  103.  color: #404050;
  104.  font-family: 'PT Sans', sans-serif;
  105.  font-size: 12px;
  106.  padding: 0;
  107.  margin: 0;
  108.  position: absolute;
  109.  box-sizing: border-box;
  110. }
  111. .panel h2 {display: none;}
  112.  
  113. .panel a {
  114.  color: purple;
  115.  font-weight: normal;
  116.  text-decoration: none;
  117. }
  118.  
  119. #id_about, #id_comments, #id_wishlist, #id_footprints {
  120.  background: #F2F0F4;
  121.  line-height: 1.5em;
  122.  border: 8px solid transparent;
  123.  border-radius: 3px;
  124.  box-shadow: 0 0 0 1px rgba(0,0,0,.3);
  125.  overflow-x: hidden;
  126.  overflow-y: scroll;
  127.  opacity: .2;
  128.  transition: opacity .5s ease-in-out;
  129. }
  130. #id_about:hover, #id_comments:hover, #id_wishlist:hover, #id_footprints:hover {opacity: 1;}
  131.  
  132. /* About and Comments */
  133.  
  134. #id_about, #id_comments {
  135.  width: 499px;
  136.  height: 188px;
  137.  text-align: justify;
  138.  left: 301px;
  139.  padding: 0 8px 0 0;
  140. }
  141. #id_about {top: 168px;}
  142. #id_comments {top:398px;}
  143. #id_about img, #id_comments .message img {max-width: 100% !important;}
  144.  
  145. /* Comments */
  146.  
  147. #id_comments #alerts_banner {display: none;}
  148. #id_comments .deletecomment {display: none;}
  149. #id_comments dd {padding-bottom: 7px;}
  150. #id_comments dd:last-of-type {margin-bottom: 0;}
  151. #id_comments p {margin: 0;}
  152.  
  153. #id_comments dt {
  154.  padding: 0 0 2px 0;
  155.  margin: 0 0 2px 0;
  156.  border-bottom: 2px dotted rgba(0,0,0,.2);
  157. }
  158.  
  159. #id_comments .dropBox {
  160.  width: 48px;
  161.  height: 60px;
  162.  margin: 6px 8px 0 0;
  163.  border: 1px solid purple;
  164.  overflow: hidden;
  165. }
  166.  
  167. #id_comments .dropBox img {
  168.  width: 120px;
  169.  height: 150px;
  170.  margin-top: -26px;
  171.  margin-left: -46px;
  172. }
  173.  
  174. #id_comments h2 ~ div a, #id_comments h2 ~ p a {
  175.  font-family: 'Cookie', script, serif;
  176.  font-size: 18px;
  177. }
  178. #id_comments h2 ~ div {float: left;}
  179. #id_comments #alert_container {padding: 0;}
  180.  
  181. #id_comments #alert_container::after {
  182.  content: ' • ';
  183.  letter-spacing: .3em;
  184. }
  185.  
  186. /* Contact and Media */
  187.  
  188. #id_contact, .media_panel {
  189.  width: 42px;
  190.  left: 32px;
  191. }
  192.  
  193. #id_contact {
  194.  background: none;
  195.  height: auto;
  196.  top: 169px;
  197. }
  198.  
  199. #id_contact ul:not(.buttons) li, #id_contact ul:not(.buttons) li a {
  200.  display: block;
  201.  width: 100%;
  202.  height: 42px;
  203.  font-size: 0;
  204. }
  205.  
  206. #id_contact ul:not(.buttons) li {
  207.  position: relative;
  208.  margin-bottom: 6px;
  209. }
  210. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: -830px 0;}
  211. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: -830px -42px;}
  212. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: -830px -84px;}
  213.  
  214. #id_contact ul:not(.buttons) li, .media_panel {
  215.  opacity: 0;
  216.  transition: opacity .5s ease-in-out;
  217. }
  218. #id_contact ul:not(.buttons) li:hover, .media_panel:hover {opacity: 1;}
  219.  
  220. /* Media */
  221.  
  222. .media_panel {
  223.  background-position: -830px -126px !important;
  224.  background-origin: border-box !important;
  225.  height: 42px !important;
  226.  top: 313px;
  227.  border: 4px solid transparent;
  228.  overflow: hidden;
  229. }
  230.  
  231. .media_panel object {
  232.  position: absolute;
  233.  bottom: 0;
  234.  left: -8px;
  235.  opacity: 0;
  236. }
  237.  
  238. /* Details */
  239.  
  240. #id_details {
  241.  background: none;
  242.  width: 120px;
  243.  height: 150px;
  244.  top: 632px;
  245.  left: 33px;
  246. }
  247. #id_details p:nth-of-type(n+2) {display: none;}
  248. #id_details .forum_userstatus {display: none;}
  249.  
  250. /* Visitors and Wish List */
  251.  
  252. #id_footprints, #id_wishlist {
  253.  width: 229px;
  254.  height: 158px;
  255.  text-align: center;
  256.  top: 628px;
  257. }
  258. #id_footprints {left: 301px;}
  259. #id_wishlist {left: 571px;}
  260.  
  261. /* Wish List */
  262.  
  263. .owner_checkmark {
  264.  margin: 0;
  265.  bottom: 5px;
  266.  left: 5px;
  267. }
  268. .premium_sparkle {display: none;}
  269.  
  270. #id_wishlist .item {
  271.  background: #F47498;
  272.  height: 30px;
  273.  width: 30px;
  274.  padding: 4px;
  275.  margin: 2px 6px 4px 0;
  276.  position: relative;
  277.  border: 2px solid rgba(255,255,255,.5);
  278.  border-radius: 5px;
  279.  transition: all .5s ease-in-out;
  280. }
  281.  
  282. #id_wishlist .item:hover {
  283.  background: #92D7D5;
  284.  border-color: rgba(0,0,0,.5);
  285. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement