Advertisement
althindor

Pro for im the real mewberry

May 22nd, 2020
2,891
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.77 KB | None | 0 0
  1. /* Layout by CD-ARIAx3 */
  2. /* + Code by AlthIndor */
  3.  
  4. html, body {
  5.  background: repeating-linear-gradient(to bottom, #F2F8FF 0px, #F2F8FF 10px, transparent 10px, transparent 20px),
  6.    repeating-linear-gradient(to right, #DCF0FF 0px, #DCF0FF 10px, #D2E8F8 10px, #D2E8F8 20px);
  7.  background-blend-mode: multiply, normal;
  8.  height: 100vh;
  9.  min-height: 970px;
  10. }
  11.  
  12. body {
  13.  cursor: url('https://i.imgur.com/00UOcYd.png'), default;
  14.  position: relative;
  15.  overflow-x: hidden;
  16. }
  17.  
  18. body a {
  19.  text-decoration: none !important;
  20.  transition: all .5s ease-in-out;
  21. }
  22.  
  23. #column_2, #column_2::after, #column_3, #id_contact ul:not(.buttons) li, .custom_panel div *, .custom_panel .clear {background: url('https://images2.imgbox.com/88/f2/sYC9ZTJA_o.png');}
  24. #column_1 .custom_panel .clear {background-position: calc(50% - 2px) -1300px;}
  25. #column_3 {background-position-x: -1500px;}
  26.  
  27. /* Fonts */
  28.  
  29. @font-face {
  30.  font-family: 'Quicksand';
  31.  font-style: normal;
  32.  font-weight: 500;
  33.  src: url(https://fonts.gstatic.com/s/quicksand/v20/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkM0o58a-wg.woff2) format('woff2');
  34. }
  35.  
  36. @font-face {
  37.  font-family: 'Quicksand';
  38.  font-style: normal;
  39.  font-weight: 700;
  40.  src: url(https://fonts.gstatic.com/s/quicksand/v20/6xK-dSZaM9iE8KbpRA_LJ3z8mH9BOJvgkBgv58a-wg.woff2) format('woff2');
  41. }
  42.  
  43. @font-face {
  44.  font-family: 'Open Sans';
  45.  font-style: normal;
  46.  font-weight: 400;
  47.  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  48. }
  49.  
  50. @font-face {
  51.  font-family: 'Open Sans';
  52.  font-style: normal;
  53.  font-weight: 700;
  54.  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  55. }
  56.  
  57. /* Header */
  58.  
  59. #gaia_header, #gaia_header #header_left, #gaia_header #header_right {background: none;}
  60. #gaia_header {filter: drop-shadow(0 0 5px #FFFFFF) drop-shadow(0 2px .5px #00000040);}
  61. #gaia_header li.spacer {display: none !important;}
  62. #gaia_header li {margin: 0 3px;}
  63.  
  64. #gaia_header #header_left, #gaia_header #header_right {
  65.  font-size: 0 !important;
  66.  padding: 0 4px !important;
  67.  box-sizing: border-box;
  68. }
  69. #gaia_header #header_right {float: right;}
  70.  
  71. #gaia_header img {
  72.  background: url('https://i.imgur.com/cGGVY2x.png') 0 5px no-repeat;
  73.  width: 0 !important;
  74.  padding: 0 34px 0 0;
  75.  filter: invert(100%);
  76. }
  77.  
  78. #gaia_header a {
  79.  background: teal;
  80.  color: #FFFFFF !important;
  81.  font: 700 12px/20px 'Quicksand', 'Open Sans', sans-serif !important;
  82.  text-transform: lowercase;
  83.  padding: 15px 7px 5px 7px;
  84.  position: relative;
  85.  top: 0;
  86.  border: 1px solid transparent;
  87.  border-radius: 0 0 5px 5px;
  88.  box-shadow: 0 0 0 1px #FFFFFF inset;
  89. }
  90.  
  91. #gaia_header a:hover {
  92.  background: #FF6288;
  93.  top: 5px;
  94. }
  95.  
  96. /* Columns */
  97.  
  98. #columns, #column_1, #column_2, #column_3 {
  99.  float: none;
  100.  margin: 0;
  101.  position: absolute;
  102.  top: 0;
  103. }
  104. #column_1, #column_3 {pointer-events: none;}
  105.  
  106. #columns, #column_1 {
  107.  width: 100%;
  108.  height: 100%;
  109. }
  110.  
  111. #column_2, #column_3 {
  112.  width: 1500px;
  113.  height: 970px;
  114.  left: calc(50% - 750px);
  115. }
  116. #column_2 {transform: translateZ(0);}
  117.  
  118. /* Scrollbars */
  119.  
  120. #columns ::-webkit-scrollbar {
  121.  background: #0080FF20;
  122.  width: 7px;
  123. }
  124. #columns ::-webkit-scrollbar-thumb {background: teal;}
  125.  
  126. #columns * {
  127.  scrollbar-color: teal #0080FF20;
  128.  scrollbar-width: thin;
  129. }
  130.  
  131. /* Panels */
  132.  
  133. .panel {
  134.  background: none;
  135.  color: #605040;
  136.  font: 11px/1.65 'Open Sans', sans-serif;
  137.  padding: 0;
  138.  margin: 0;
  139.  position: absolute;
  140.  box-sizing: border-box;
  141.  overflow: hidden;
  142. }
  143. .panel h2 {display: none;}
  144. .panel img {max-width: 100% !important;}
  145.  
  146. .panel a {color: steelblue;}
  147. .panel a:hover {color: inherit;}
  148.  
  149. #id_about, #id_comments, #id_wishlist {overflow-y: scroll;}
  150. #id_about, #id_comments {padding-right: 10px;}
  151.  
  152. .custom_panel br {display: none;}
  153.  
  154. /* Details */
  155.  
  156. #id_details {
  157.  width: 120px;
  158.  height: 150px;
  159.  top: 575px;
  160.  left: 325px;
  161.  overflow: visible;
  162.  z-index: 1;
  163. }
  164. #id_details p:nth-of-type(n+2) {display: none;}
  165. #id_details .forum_userstatus {display: none;}
  166.  
  167. #id_details::before {
  168.  content: '';
  169.  background: lightblue;
  170.  width: 140px;
  171.  height: 20px;
  172.  border-radius: 50%;
  173.  position: absolute;
  174.  bottom: -11px;
  175.  left: -11px;
  176.  border: 1px dashed #FFFFFF;
  177.  box-shadow: -1px 2px lightgreen;
  178.  z-index: -1;
  179. }
  180.  
  181. /* Contact */
  182.  
  183. @keyframes ContactOver {
  184.  from {background-position: 0 -1225px;}
  185.  to {background-position: -1330px -1225px;}
  186. }
  187.  
  188. #id_contact {
  189.  top: 280px;
  190.  left: 630px;
  191. }
  192.  
  193. #id_contact ul:not(.buttons) li {
  194.  float: left;
  195.  background-position-y: -976px;
  196.  width: 70px;
  197.  height: 54px;
  198.  margin: 0 23px;
  199.  position: relative;
  200. }
  201. #id_contact span {display: none;}
  202.  
  203. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position-x: -1500px;}
  204. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position-x: -1570px;}
  205. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position-x: -1640px;}
  206.  
  207. #id_contact ul:not(.buttons) li:hover {
  208.  animation: ContactOver 3s steps(20, jump-none) infinite;
  209.  box-shadow: 0 -2px brown inset;
  210. }
  211.  
  212. #id_contact ul:not(.buttons) a {
  213.  width: 100%;
  214.  height: 100%;
  215.  font-size: 0;
  216.  position: absolute;
  217.  top: 0;
  218.  left: 0;
  219. }
  220.  
  221. /* Custom Buttons */
  222.  
  223. #column_2 .custom_panel {
  224.  top: 485px;
  225.  left: 590px;
  226.  filter: contrast(120%);
  227.  overflow: visible;
  228. }
  229.  
  230. #column_2 .custom_panel a {
  231.  display: block;
  232.  float: left;
  233.  background-size: 2400px auto;
  234.  background-position-y: -780px;
  235.  width: 41px;
  236.  height: 39px;
  237.  font-size: 0;
  238.  margin-right: 16px;
  239.  border-radius: 10px;
  240.  box-shadow: 0 0 0 2px pink;
  241. }
  242. #column_2 .custom_panel a:hover {opacity: .5;}
  243.  
  244. #column_2 .custom_panel a[href*='twitch'] {background-position-x: -1412px;}
  245. #column_2 .custom_panel a[href*='discord'] {background-position-x: -1454px;}
  246. #column_2 .custom_panel a[href*='youtube'] {background-position-x: -1495px;}
  247.  
  248. /* About */
  249.  
  250. #id_about {
  251.  width: 315px;
  252.  height: 145px;
  253.  text-align: center;
  254.  top: 550px;
  255.  left: 470px;
  256. }
  257.  
  258. /* Comments */
  259.  
  260. #id_comments {
  261.  width: 220px;
  262.  height: 110px;
  263.  text-align: right;
  264.  top: 760px;
  265.  left: 920px;
  266. }
  267.  
  268. #id_comments #alerts_banner, #id_comments .date a, #id_comments .dropBox {display: none;}
  269. #id_comments .deletecomment {margin: 0 0 0 10px;}
  270. #id_comments dd {margin: 0 0 15px 0;}
  271. #id_comments dd:last-of-type {margin: 0;}
  272.  
  273. #id_comments dt {
  274.  height: auto;
  275.  line-height: normal;
  276.  padding: 0 0 2px 0;
  277.  margin:  0 0 2px 0;
  278.  border-bottom: 1px dotted skyblue;
  279. }
  280. #id_comments .username {float: none;}
  281.  
  282. #id_comments .date {
  283.  display: inline-block;
  284.  text-indent: -.5em;
  285.  overflow: hidden;
  286. }
  287.  
  288. /* Comments Links */
  289.  
  290. #id_comments h2 + div, #id_comments h2 ~ p {
  291.  position: fixed;
  292.  width: 130px;
  293.  height: 20px;
  294.  font: 11px 'Quicksand', 'Open Sans', sans-serif;
  295.  letter-spacing: .1em;
  296.  text-align: center;
  297.  text-transform: lowercase;
  298.  transform: rotate(-17deg);
  299. }
  300. #id_comments h2 + div a, #id_comments h2 ~ p a {font-weight: 500;}
  301. #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {color: #FF6288;}
  302.  
  303. #id_comments #alert_container {
  304.  float: none;
  305.  padding: 0;
  306. }
  307.  
  308. #id_comments h2 + div {
  309.  top: 718px;
  310.  left: 883px;
  311. }
  312.  
  313. #id_comments h2 ~ p {
  314.  top: 730px;
  315.  left: 888px;
  316. }
  317.  
  318. /* Wish List */
  319.  
  320. #id_wishlist {
  321.  width: 250px;
  322.  height: 40px;
  323.  top: 822px;
  324.  left: 494px;
  325.  scroll-snap-type: y mandatory;
  326. }
  327. .premium_sparkle {display: none;}
  328.  
  329. #id_wishlist .item {
  330.  background: pink;
  331.  width: 30px;
  332.  height: 30px;
  333.  padding: 4px;
  334.  margin: 0 8px 8px 0;
  335.  position: relative;
  336.  border: 1px solid transparent;
  337.  border-radius: 50%;
  338.  box-shadow: 0 0 0 1px #FFFFFF inset;
  339.  outline: 1px dotted skyblue;
  340.  outline-offset: -4px;
  341.  transition: all .5s ease-in-out;
  342.  scroll-snap-align: start;
  343.  scroll-snap-stop: always;
  344. }
  345.  
  346. #id_wishlist .item:hover {
  347.  background-color: skyblue;
  348.  outline-color: steelblue;
  349. }
  350.  
  351. .owner_checkmark {
  352.  margin: 0;
  353.  bottom: 3px;
  354.  left: 3px;
  355.  filter: invert(100%);
  356. }
  357.  
  358. /* Media */
  359.  
  360. .media_panel {
  361.  width: 70px;
  362.  height: 32px !important;
  363.  top: 374px;
  364.  left: 633px;
  365. }
  366.  
  367. .media_panel iframe {
  368.  width: 400px;
  369.  height: 300px;
  370.  position: absolute;
  371.  bottom: -2px;
  372.  left:-22px;
  373.  opacity: .001;
  374. }
  375.  
  376. /* Misc */
  377.  
  378. #pictures_container, #texts_container {
  379.  width: 1px;
  380.  height: 1px;
  381.  position: absolute;
  382.  top: 0;
  383.  left: 50%;
  384.  overflow: visible;
  385.  z-index: 99;
  386. }
  387.  
  388. /* Enter Button */
  389.  
  390. #texts_container .spoiler-wrapper, #texts_container .spoiler-control {border: none;}
  391. #texts_container .spoiler-control-hide, #texts_container .spoiler-control span {display: none !important;}
  392. #texts_container .spoiler-wrapper {padding: 0;}
  393. #texts_container .spoiler-control {outline: none;}
  394.  
  395. #texts_container .spoiler-control-show {
  396.  background: url('https://i.imgur.com/20ppzc0.png') no-repeat center #EBF6FF;
  397.  width: 100%;
  398.  height: 100%;
  399.  position: fixed;
  400.  top: 0;
  401.  left: 0;
  402. }
  403.  
  404. /* Animations */
  405.  
  406. @keyframes BounceName {
  407.  from {transform: translateY(-5px);}
  408.  to {transform: translateY(15px);}
  409. }
  410.  
  411. #column_1 .custom_panel, #column_1 .custom_panel div {width: 100%;}
  412. #column_1 .custom_panel, #column_1 .custom_panel div[id*='content'] {height: 100% !important;}
  413. #column_1 .custom_panel .clear {background-position: calc(50% - 2px) -1300px; height: 43px;}
  414. #column_1 .custom_panel * {position: absolute;}
  415.  
  416. #column_2::after {
  417.  content: '';
  418.  background-position: 0 -975px;
  419.  width: 706px;
  420.  height: 247px;
  421.  position: absolute;
  422.  top: 25px;
  423.  left: 375px;
  424.  animation: BounceName 2s ease-in-out infinite alternate;
  425. }
  426.  
  427. @keyframes FallObjects {
  428.  from {top: -140px;}
  429.  to {top: 100%;}
  430. }
  431.  
  432. @keyframes RotateObjects {
  433.  from {transform: rotate(0deg) scale(.6);}
  434.  to {transform: rotate(360deg) scale(.6);}
  435. }
  436.  
  437. #column_1 b, #column_1 i {
  438.  background-position-y: -975px;
  439.  animation: FallObjects 8s linear infinite, RotateObjects 5s linear infinite;
  440. }
  441. #column_1 b:nth-of-type(2n), #column_1 i:nth-of-type(2n) {animation-direction: normal, reverse;}
  442.  
  443. #column_1 b {
  444.  background-position-x: -2774px;
  445.  width: 101px;
  446.  height: 136px;
  447. }
  448.  
  449. #column_1 i {
  450.  background-position-x: right;
  451.  width: 113px;
  452.  height: 111px;
  453. }
  454.  
  455. #column_1 div[id*='content'] *:nth-child(01) {left: 67%; animation-duration: 11s, 5s; animation-delay: -6.6s, -0.2s;}
  456. #column_1 div[id*='content'] *:nth-child(02) {left: 64%; animation-duration: 08s, 5s; animation-delay: -5.3s, -1.9s;}
  457. #column_1 div[id*='content'] *:nth-child(03) {left: 23%; animation-duration: 08s, 5s; animation-delay: -6.3s, -4.5s;}
  458. #column_1 div[id*='content'] *:nth-child(04) {left: 82%; animation-duration: 08s, 5s; animation-delay: -3.8s, -4.6s;}
  459. #column_1 div[id*='content'] *:nth-child(05) {left: 40%; animation-duration: 09s, 5s; animation-delay: -8.8s, -2.2s;}
  460. #column_1 div[id*='content'] *:nth-child(06) {left: 84%; animation-duration: 08s, 5s; animation-delay: -7.1s, -0.0s;}
  461. #column_1 div[id*='content'] *:nth-child(07) {left: 48%; animation-duration: 09s, 5s; animation-delay: -4.9s, -3.0s;}
  462. #column_1 div[id*='content'] *:nth-child(08) {left: 89%; animation-duration: 11s, 5s; animation-delay: -2.3s, -3.2s;}
  463. #column_1 div[id*='content'] *:nth-child(09) {left: 09%; animation-duration: 10s, 5s; animation-delay: -8.8s, -2.6s;}
  464. #column_1 div[id*='content'] *:nth-child(10) {left: 41%; animation-duration: 09s, 5s; animation-delay: -8.0s, -1.9s;}
  465. #column_1 div[id*='content'] *:nth-child(11) {left: 65%; animation-duration: 10s, 5s; animation-delay: -5.6s, -1.5s;}
  466. #column_1 div[id*='content'] *:nth-child(12) {left: 06%; animation-duration: 10s, 5s; animation-delay: -7.8s, -2.2s;}
  467. #column_1 div[id*='content'] *:nth-child(13) {left: 05%; animation-duration: 09s, 5s; animation-delay: -2.4s, -2.6s;}
  468. #column_1 div[id*='content'] *:nth-child(14) {left: 54%; animation-duration: 11s, 5s; animation-delay: -7.1s, -3.1s;}
  469. #column_1 div[id*='content'] *:nth-child(15) {left: 05%; animation-duration: 10s, 5s; animation-delay: -5.3s, -2.2s;}
  470. #column_1 div[id*='content'] *:nth-child(16) {left: 43%; animation-duration: 08s, 5s; animation-delay: -3.0s, -1.3s;}
  471. #column_1 div[id*='content'] *:nth-child(17) {left: 72%; animation-duration: 08s, 5s; animation-delay: -6.8s, -1.8s;}
  472. #column_1 div[id*='content'] *:nth-child(18) {left: 17%; animation-duration: 11s, 5s; animation-delay: -5.5s, -0.4s;}
  473. #column_1 div[id*='content'] *:nth-child(19) {left: 48%; animation-duration: 10s, 5s; animation-delay: -7.4s, -1.5s;}
  474. #column_1 div[id*='content'] *:nth-child(20) {left: 51%; animation-duration: 10s, 5s; animation-delay: -9.9s, -3.9s;}
  475. #column_1 div[id*='content'] *:nth-child(21) {left: 44%; animation-duration: 08s, 5s; animation-delay: -4.8s, -3.4s;}
  476. #column_1 div[id*='content'] *:nth-child(22) {left: 63%; animation-duration: 10s, 5s; animation-delay: -0.7s, -1.2s;}
  477. #column_1 div[id*='content'] *:nth-child(23) {left: 80%; animation-duration: 09s, 5s; animation-delay: -4.6s, -4.1s;}
  478. #column_1 div[id*='content'] *:nth-child(24) {left: 73%; animation-duration: 09s, 5s; animation-delay: -8.3s, -3.3s;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement