Advertisement
althindor

Pro for I3UNNEY

Aug 26th, 2018
824
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 7.27 KB | None | 0 0
  1. /* Code by AlthIndor, Graphics by Cassiel Socks */
  2.  
  3. html, body {background: url('https://images2.imgbox.com/47/4c/R5NaJfa0_o.jpg') fixed center / cover;}
  4. #columns::before, #id_contact ul:not(.buttons) li, .media_panel, .custom_panel a, #id_friends h2 ~ p a::before{background: url('https://images2.imgbox.com/dc/50/fdPl8cXn_o.png');}
  5.  
  6. @keyframes HaloBounce {
  7.  from {top: 56px;}
  8.  to {top: 60px;}
  9. }
  10.  
  11. /* Fonts */
  12.  
  13. @font-face {
  14.  font-family: 'Open Sans Condensed';
  15.  font-style: normal;
  16.  font-weight: 700;
  17.  src: local('Open Sans Condensed'), local('OpenSans-Condensed'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
  18. }
  19.  
  20. /* Header */
  21.  
  22. #gaia_header, #header_left, #header_right {background: none !important;}
  23. #gaia_header #header_right {float: right;}
  24. #gaia_header .spacer {display: none !important;}
  25.  
  26. #gaia_header #header_left, #gaia_header #header_right {
  27.  color: transparent !important;
  28.  font: 13px/28px 'Open Sans Condensed', sans-serif !important;
  29.  padding: 0 7px !important;
  30.  box-sizing: border-box;
  31. }
  32.  
  33. #header_left img {
  34.  background: url('https://gaia.hs.llnwd.net/e1/images/gaia_global/gaia_header/br_gaia_logo_header.png') 0 100% no-repeat;
  35.  background-size: auto 200%;
  36.  width: 0;
  37.  height: 18px;
  38.  padding: 0 38px 0 0;
  39.  margin-right: 7px;
  40. }
  41.  
  42. #gaia_header a {
  43.  color: #FFFFFF !important;
  44.  text-transform: uppercase;
  45.  text-decoration: none;
  46.  opacity: .7;
  47. }
  48. #gaia_header a:hover {opacity: 1;}
  49.  
  50. /* Scrollbars */
  51.  
  52. #columns {
  53.  scrollbar-arrow-color: #FFFFFF;
  54.  scrollbar-track-color: #000080;
  55.  scrollbar-face-color: #FFFFFF;
  56.  scrollbar-shadow-color: #000080;
  57. }
  58.  
  59. #columns ::-webkit-scrollbar {
  60.  background: #000080;
  61.  width: 13px;
  62.  border-radius: 3px;
  63. }
  64.  
  65. #columns ::-webkit-scrollbar-thumb {
  66.  background: #FFFFFF;
  67.  border: 1px solid #000080;
  68.  border-radius: 3px;
  69. }
  70.  
  71. /* Columns */
  72.  
  73. #columns, #column_1, #column_2, #column_3 {
  74.  float: none;
  75.  margin: 0;
  76.  position: absolute;
  77. }
  78.  
  79. #columns {
  80.  background: url('https://images2.imgbox.com/23/1f/2LZFn0qB_o.png') no-repeat, url('https://images2.imgbox.com/96/84/hX8SrUH4_o.png') no-repeat, url('https://images2.imgbox.com/dc/50/fdPl8cXn_o.png');
  81.  background-position: 545px 143px, 784px 600px, 0 0;
  82.  width: 1320px;
  83.  height: 900px;
  84.  top: calc(50% - 450px + 10px);
  85.  left: calc(50% - 660px);
  86. }
  87.  
  88. body {overflow: hidden;}
  89. @media screen and (max-height: 800px) {
  90.  body {overflow-y: scroll;}
  91.  #columns {top: 0;}
  92. }
  93.  
  94. #column_1, #column_2, #column_3 {
  95.  width: 1px;
  96.  height: 1px;
  97.  top: 0;
  98.  left: 0;
  99.  overflow: visible;
  100. }
  101.  
  102. /* Halo Animation */
  103.  
  104. #columns::before {
  105.  content: '';
  106.  display: block;
  107.  background-position: bottom right;
  108.  width: 177px;
  109.  height: 45px;
  110.  position: absolute;
  111.  top: 56px;
  112.  left: calc((100% - 177px) / 2);
  113.  animation: HaloBounce .5s linear infinite alternate;
  114. }
  115.  
  116. /* Panels */
  117.  
  118. .panel, .panel a {color: #000040;}
  119. .panel:not(.media_panel) {background: none;}
  120. .panel a {text-decoration: none;}
  121.  
  122. .panel {
  123.  font: 13px 'Open Sans Condensed', sans-serif;
  124.  text-shadow: 0 0 3px #FFFFFF;
  125.  text-transform: uppercase;
  126.  padding: 0;
  127.  margin: 0;
  128.  position: absolute;
  129.  box-sizing: border-box;
  130.  overflow: hidden;
  131. }
  132. .panel h2 {display: none;}
  133.  
  134. #id_friends, #id_wishlist {
  135.  width: 400px;
  136.  height: 400px;
  137.  top: 297px;
  138.  border: 10px solid transparent;
  139.  overflow-y: scroll;
  140. }
  141.  
  142. #id_friends {
  143.  direction: rtl;
  144.  padding-left: 10px;
  145.  left: 160px;
  146. }
  147.  
  148. #id_wishlist {
  149.  padding-right: 10px;
  150.  left: 760px;
  151. }
  152.  
  153. /* Buttons */
  154.  
  155. #id_contact ul:not(.buttons) li, .media_panel, .custom_panel a {
  156.  width: 102px;
  157.  height: 97px !important;
  158.  font-size: 0;
  159.  position: absolute;
  160.  border-radius: 50%;
  161.  opacity: .01;
  162. }
  163. #id_contact ul:not(.buttons) li:hover, .media_panel:hover, .custom_panel a:hover {opacity: 1;}
  164.  
  165. #id_contact, .media_panel {top: 98px;}
  166. #id_contact ul:not(.buttons) li:nth-of-type(odd) {bottom: 0;}
  167.  
  168. #id_contact {
  169.  width: 1102px;
  170.  height: 167px;
  171.  left: 109px;
  172.  z-index: 1;
  173. }
  174.  
  175. #id_contact a {
  176.  display: block;
  177.  width: 100%;
  178.  height: 100%;
  179. }
  180.  
  181. .media_panel {
  182.  background-position: -1320px -484px;
  183.  background-origin: border-box;
  184.  left: 1019px;
  185.  border: 32px solid transparent;
  186.  z-index: 2;
  187. }
  188.  
  189. #id_contact ul:not(.buttons) li:nth-of-type(1) {
  190.  background-position: -1320px -194px;
  191.  left: 0;
  192. }
  193.  
  194. #id_contact ul:not(.buttons) li:nth-of-type(2) {
  195.  background-position: -1320px -291px;
  196.  top: 0;
  197.  left: 90px;
  198. }
  199.  
  200. #id_contact ul:not(.buttons) li:nth-of-type(3) {
  201.  background-position: -1320px -388px;
  202.  right: 0;
  203. }
  204.  
  205. .custom_panel {
  206.  width: 806px;
  207.  height: 97px !important;
  208.  top: 706px;
  209.  left: 257px;
  210. }
  211.  
  212. .custom_panel a[href*='instagram'] {
  213.  background-position: -1320px 0;
  214.  top: 0;
  215. }
  216.  
  217. .custom_panel a[href*='facebook'] {
  218.  background-position: -1320px -97px;
  219.  right: 0;
  220. }
  221.  
  222. /* Media */
  223.  
  224. .media_panel object {
  225.  position: absolute;
  226.  bottom: 0;
  227.  left: -7px;
  228.  opacity: .01;
  229. }
  230.  
  231. /* Friends and WishList */
  232.  
  233. #id_friends h2 ~ p a, #id_friends ul:not(.buttons) li, #id_wishlist .item {
  234.  background: rgba(255,255,255,.7);
  235.  float: none;
  236.  width: 100%;
  237.  height: 50px;
  238.  position: relative;
  239.  box-sizing: border-box;
  240. }
  241. #id_friends h2 ~ p, #id_friends li:nth-last-of-type(n+2), #id_wishlist .item:nth-last-of-type(n+3) {margin: 0 0 10px 0;}
  242.  
  243. #id_friends ul:not(.buttons) li, #id_friends h2 ~ p a, #id_friends .dropBox, #id_wishlist .item, #id_wishlist img[src*='thumbnails'] {border-radius: 3px;}
  244. #id_friends ul:not(.buttons) li, #id_wishlist .item, #id_wishlist img[src*='thumbnails'] {padding: 5px;}
  245. #id_friends .dropBox, #id_wishlist .item img[src*='thumbnails'] {background: #FF40A8;}
  246.  
  247. #id_friends a, #id_wishlist a::before {
  248.  display: flex;
  249.  flex-flow: row nowrap;
  250.  align-items: center;
  251. }
  252.  
  253. #id_friends ul a, #id_wishlist a::before {
  254.  width: calc(100% - 60px);
  255.  height: calc(100% - 10px);
  256.  position: absolute;
  257. }
  258.  
  259. #id_friends h2 ~ p a:hover, #id_friends ul:not(.buttons) li:hover, #id_wishlist .item:hover {background: #FF40A8;}
  260. #id_friends li:hover .dropBox, #id_wishlist .item:hover img[src*='thumbnails'] {background: #FFFFFF;}
  261. #id_friends h2 ~ p a:hover::before, #id_friends li:hover .dropBox {border-color: #FFFFFF;}
  262. #id_friends h2 ~ p a:hover, #id_friends li:hover a, #id_wishlist .item:hover a {color: #FFFFFF; text-shadow: none;}
  263.  
  264. /* Friends */
  265.  
  266. #id_friends h2 ~ div {display: none;}
  267. #id_friends p {margin: 0;}
  268. #id_friends ul {direction: ltr;}
  269.  
  270. #id_friends h2 ~ p a::before, #id_friends .dropBox {
  271.  width: 40px;
  272.  height: 40px;
  273.  border: 1px solid #FF40A8;
  274.  box-sizing: border-box;
  275. }
  276.  
  277. #id_friends h2 ~ p a::before {
  278.  content: '';
  279.  display: block;
  280.  background-color: #FF40A8;
  281.  background-position: -1320px -582px;
  282.  margin: 0 5px 0 10px;
  283.  border-radius: 3px;
  284. }
  285.  
  286. #id_friends .dropBox {
  287.  float: right;
  288.  overflow: hidden;
  289. }
  290. #id_friends .dropBox img {margin: -6px 0 0 -8px;}
  291.  
  292. #id_friends ul a {
  293.  font-size: 0;
  294.  justify-content: flex-end;
  295. }
  296.  
  297. #id_friends ul a::before {
  298.  content: attr(title);
  299.  width: 100%;
  300.  font-size: 13px;
  301.  text-align: right;
  302.  right: 55px;
  303. }
  304.  
  305. /* Wish List */
  306.  
  307. #id_wishlist .item a::before {
  308.  content: attr(title);
  309.  top: 5px;
  310.  left: 55px;
  311. }
  312.  
  313. .owner_checkmark {
  314.  margin: 0;
  315.  bottom: 10px;
  316.  left: 10px;
  317.  filter: invert(100%) hue-rotate(45deg) brightness(500%);
  318. }
  319. #id_wishlist .item:hover .owner_checkmark {filter: none;}
  320. .premium_sparkle {display: none;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement