althindor

Pro for Tea n Waffles

Aug 19th, 2018
295
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 4.96 KB | None | 0 0
  1. /* Code by AlthIndor, Graphics by Cassiel Socks */
  2.  
  3. html, body, #gaia_header {background: url('https://images2.imgbox.com/c2/62/oE5IvZ8G_o.png') center repeat-x border-box;}
  4. #columns, #id_contact ul:not(.buttons) li, #id_comments {background: url('https://images2.imgbox.com/c3/6c/g2dZd1Fu_o.png');}
  5.  
  6. html, body {
  7.  background-color: #BFDEDA;
  8.  background-position-y: 30px;
  9. }
  10.  
  11. /* Fonts */
  12.  
  13. @font-face {
  14.  font-family: 'Lily Script One';
  15.  font-style: normal;
  16.  font-weight: 400;
  17.  src: local('Lily Script One'), local('LilyScriptOne-Regular'), url(https://fonts.gstatic.com/s/lilyscriptone/v5/LhW9MV7ZMfIPdMxeBjBvFN8SXLSIhc6i.woff2) format('woff2'), url(https://fonts.gstatic.com/s/lilyscriptone/v5/LhW9MV7ZMfIPdMxeBjBvFN8SXLSIhc6k.woff) format('woff');
  18. }
  19.  
  20. @font-face {
  21.  font-family: 'Open Sans';
  22.  font-style: normal;
  23.  font-weight: 400;
  24.  src: local('Open Sans'), local('OpenSans'), url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  25. }
  26.  
  27. /* Header */
  28.  
  29. #gaia_header {
  30.  background-position-y: bottom;
  31.  border-top: 3px solid #000000;
  32.  border-bottom: 16px solid transparent;
  33. }
  34.  
  35. #gaia_header #header_left, #gaia_header #header_right {
  36.  background: none;
  37.  color: transparent;
  38.  font: 12px/20px 'Lily Script One', cursive !important;
  39.  padding: 0 8px !important;
  40.  box-sizing: border-box;
  41. }
  42. #gaia_header #header_right {float: right;}
  43. #gaia_header .spacer {display: none !important;}
  44.  
  45. #header_left img {
  46.  background: url('https://gaia.hs.llnwd.net/e1/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 2px no-repeat;
  47.  background-size: 100% auto;
  48.  width: 0;
  49.  height: 0;
  50.  padding: 18px 38px 0 0;
  51.  margin-right: 5px;
  52. }
  53.  
  54. #gaia_header a {
  55.  color: #FFFFFF !important;
  56.  font-weight: normal !important;
  57.  text-decoration: none;
  58. }
  59.  
  60. /* Columns */
  61.  
  62. #columns, #column_1, #column_2, #column_3 {
  63.  float: none;
  64.  margin: 0;
  65.  position: absolute;
  66. }
  67.  
  68. #columns {
  69.  width: 1100px;
  70.  height: 860px;
  71.  top: 30px;
  72.  left: calc((100% - 1100px) / 2);
  73. }
  74.  
  75. #column_1, #column_2, #column_3 {
  76.  width: 1px;
  77.  height: 1px;
  78.  top: 0;
  79.  left: 0;
  80.  overflow: visible;
  81. }
  82.  
  83. /* Panels */
  84.  
  85. .panel, .panel h2 {
  86.  padding: 0;
  87.  margin: 0;
  88.  position: absolute;
  89.  box-sizing: border-box;
  90. }
  91.  
  92. .panel {
  93.  color: #FFFFFF;
  94.  font: bold 11px/1.6em 'Open Sans', sans-serif;
  95.  overflow: hidden;
  96.  z-index: 2;
  97. }
  98.  
  99. .panel a {
  100.  color: #D45854;
  101.  font-weight: normal;
  102. }
  103.  
  104. .panel:not(#id_comments), .panel h2 {background: none;}
  105. .panel:not(#id_details) h2 {display: none;}
  106.  
  107. #id_about {
  108.  width: 450px;
  109.  height: 230px;
  110.  text-align: justify;
  111.  top: 355px;
  112.  left: 620px;
  113.  padding-right: 10px;
  114.  overflow-y: scroll;
  115. }
  116.  
  117. /* Details */
  118.  
  119. #id_details {
  120.  width: 710px;
  121.  height: 500px;
  122.  left: 385px;
  123.  top: 45px;
  124.  z-index: 1;
  125. }
  126. #id_details p:nth-of-type(n+2) {display: none;}
  127. #id_details .forum_userstatus {display: none;}
  128.  
  129. #id_details h2 {
  130.  background: none;
  131.  width: 100%;
  132.  height: 150px;
  133.  color: #000000;
  134.  font: 100px/150px 'Lily Script One', cursive;
  135.  text-align: center;
  136.  text-indent: -10px;
  137.  text-shadow: -5px 0 #FFF, 5px 0 #FFF, 0 -5px #FFF, 0 5px #FFF, -4px -4px #FFF, 4px 4px #FFF, -4px 4px #FFF, 4px -4px #FFF;
  138.  text-transform: none;
  139. }
  140.  
  141. #id_details p:first-of-type {
  142.  position: absolute;
  143.  bottom: 14px;
  144.  left: 58px;
  145. }
  146.  
  147. /* Things That Are Buttons */
  148.  
  149. #id_contact ul:not(.buttons) li, #id_comments {
  150.  width: 54px;
  151.  height: 54px !important;
  152.  font-size: 0;
  153.  margin-bottom: 10px;
  154.  opacity: .01;
  155.  transition: opacity .5s ease-in-out;
  156. }
  157. #id_contact ul:not(.buttons) li:hover, #id_comments:hover {opacity: 1;}
  158.  
  159. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: right top;}
  160. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: right -54px;}
  161. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: right -108px;}
  162. #id_comments {background-position: right -162px;}
  163.  
  164. #id_contact, #id_comments {left: 317px;}
  165. #id_contact {top: 489px;}
  166. #id_comments {top: 681px;}
  167.  
  168. #id_contact a, #id_comments #alert_container, #id_comments a {
  169.  display: block;
  170.  width: 100%;
  171.  height: 100%;
  172.  font-size: 0;
  173. }
  174.  
  175. /* Comments */
  176.  
  177. #id_comments #alerts_banner {display: none;}
  178. #id_comments #alert_container {padding: 0;}
  179. #id_comments dl {display: none;}
  180. #id_comments div {height: 100%;}
  181.  
  182. /* Wish and Equipped */
  183.  
  184. #id_wishlist, #id_equipment {
  185.  display: flex;
  186.  flex-flow: row wrap;
  187.  width: 660px;
  188.  left: 410px;
  189.  overflow-y: scroll;
  190. }
  191.  
  192. #id_wishlist {
  193.  height: 90px;
  194.  top: 638px;
  195. }
  196.  
  197. #id_equipment {
  198.  height: 40px;
  199.  top: 785px;
  200. }
  201.  
  202. #id_wishlist .item, #id_equipment .item {
  203.  background: rgba(255,255,255,.5);
  204.  flex-grow: 1;
  205.  min-width: 30px;
  206.  width: 30px;
  207.  height: 30px;
  208.  text-align: center;
  209.  padding: 5px;
  210.  margin: 0 10px 10px 0;
  211.  position: relative;
  212.  border-radius: 10px;
  213.  transition: background .5s ease-in-out;
  214. }
  215. #id_wishlist .item:hover, #id_equipment .item:hover {background: #D45854}
  216.  
  217. .owner_checkmark {
  218.  margin: 0;
  219.  top: 5px;
  220.  left: calc(50% - 15px);
  221. }
  222. .premium_sparkle {display: none;}
Add Comment
Please, Sign In to add comment