Advertisement
althindor

New Code for MeowthxMochi

Oct 8th, 2017
227
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.37 KB | None | 0 0
  1. /* Code by AlthIndor */
  2.  
  3. html, body {
  4.  background: #000;
  5.  overflow: hidden;
  6. }
  7.  
  8. /* Fluorescent Lights Flicker
  9. From Github Gist @oddlyzen
  10. Originally from ringshia.com */
  11.  
  12. @keyframes FluorescentLights {
  13.  0% {opacity: .75;}
  14.  4% {opacity: .75;}
  15.  6% {opacity: .7;}
  16.  8% {opacity: .8;}
  17.  10% {opacity: .7;}
  18.  11% {opacity: .75;}
  19.  12% {opacity: .9;}
  20.  14% {opacity: .8;}
  21.  16% {opacity: 0.7;}
  22.  17% {opacity: .8;}
  23.  19% {opacity: .75;}
  24.  20% {opacity: .75;}
  25.  24% {opacity: .75;}
  26.  26% {opacity: 0.94;}
  27.  28% {opacity: .75;}
  28.  38% {opacity: .7;}
  29.  40% {opacity: .75;}
  30.  42% {opacity: .85;}
  31.  44% {opacity: .75;}
  32.  46% {opacity: .75;}
  33.  56% {opacity: .75;}
  34.  58% {opacity: 1;}
  35.  60% {opacity: .75;}
  36.  68% {opacity: .75;}
  37.  70% {opacity: .6;}
  38.  72% {opacity: .75;}
  39.  93% {opacity: .75;}
  40.  95% {opacity: .6;}
  41.  97% {opacity: .75;}
  42.  100% {opacity: .75;}
  43. }
  44.  
  45. /* Lights Flicker */
  46.  
  47. @keyframes WindowLights {
  48.  0% {opacity: 0;}
  49.  49.99% {opacity: 0;}
  50.  50% {opacity: 1;}
  51.  100% {opacity: 1;}
  52. }
  53.  
  54. @keyframes BarLights {
  55.  0% {opacity: 0;}
  56.  19.99% {opacity: 0;}
  57.  20% {opacity: 1;}
  58.  100% {opacity: 1;}
  59. }
  60.  
  61. @keyframes CyanLights {
  62.  0% {opacity: .7;}
  63.  20% {opacity: 1;}
  64.  40% {opacity: .9;}
  65.  60% {opacity: .6;}
  66.  80% {opacity: .8;}
  67.  100% {opacity: .7;}
  68. }
  69.  
  70. @keyframes RainMove {
  71.  from {background-position: 0 0;}
  72.  to {background-position: 0 464px;}
  73. }
  74.  
  75. /* Fonts */
  76.  
  77. @font-face {
  78.  font-family: 'Open Sans';
  79.  font-style: normal;
  80.  font-weight: 400;
  81.  src: url(https://fonts.gstatic.com/s/opensans/v13/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
  82. }
  83.  
  84. @font-face {
  85.  font-family: 'Open Sans Condensed';
  86.  font-style: normal;
  87.  font-weight: 700;
  88.  src: local('Open Sans Condensed'), local('OpenSans-Condensed'), url(https://fonts.gstatic.com/s/opensanscondensed/v10/gk5FxslNkTTHtojXrkp-xONSK5BxN3NFS4EJkViHIqo.woff) format('woff');
  89. }
  90.  
  91. @font-face {
  92.  font-family: 'Aldrich';
  93.  font-style: normal;
  94.  font-weight: 400;
  95.  src: local('Aldrich Regular'), local('Aldrich-Regular'), url(http://fonts.gstatic.com/s/aldrich/v7/Y0zWA9-hxl3_xvcxN-VXfA.woff) format('woff');
  96. }
  97.  
  98. /* Header */
  99.  
  100. #gaia_header {
  101.  background: none !important;
  102.  border-top: 1px solid transparent;
  103. }
  104.  
  105. #gaia_header #header_left, #gaia_header #header_right {
  106.  background: none !important;
  107.  font-size: 0px !important;
  108. }
  109. #gaia_header #header_right {float: right !important;}
  110.  
  111. #gaia_header li {
  112.  text-align: center;
  113.  padding: 0 5px 0 5px;
  114. }
  115. #gaia_header li.spacer {display: none !important;}
  116.  
  117. #header_left img {
  118.  background: url('https://i.imgur.com/w0Cbo9w.png') 0px 3px no-repeat !important;
  119.  width: 0px !important;
  120.  padding: 0px 37px 0px 0px !important;
  121.  margin: 0px -1px 0px 1px;
  122. }
  123.  
  124. #gaia_header a {
  125.  color: #FFFFFF !important;
  126.  font-family: 'Open Sans Condensed', sans-serif;
  127.  font-size: 11px !important;
  128.  letter-spacing: .02em;
  129.  text-transform: uppercase;
  130.  text-decoration: none;
  131.  transition: text-shadow .5s ease-in-out;
  132. }
  133. #gaia_header a:hover {text-shadow: 0 0 3px #0060FF;}
  134.  
  135. /* Columns */
  136.  
  137. #columns, #column_1, #column_2, #column_3 {
  138.  padding: 0;
  139.  margin: 0;
  140.  position: absolute;
  141. }
  142.  
  143. #columns, #column_1 {
  144.  width: 100%;
  145.  height: 100%;
  146.  top: 0;
  147.  left: 0;
  148. }
  149.  
  150. #columns {background: url('https://i.imgur.com/YczIurX.jpg') fixed top center / cover;}
  151. #column_2, #column_3 {display: none;}
  152.  
  153. /* Scrollbars */
  154.  
  155. #columns {
  156.  scrollbar-track-color: #E5E5E5;
  157.  scrollbar-arrow-color: #000000;
  158.  scrollbar-face-color: #000000;
  159.  scrollbar-shadow-color: #E5E5E5;
  160. }
  161.  
  162. #columns ::-webkit-scrollbar {
  163.  background: #E5E5E5;
  164.  width: 15px;
  165. }
  166.  
  167. #columns ::-webkit-scrollbar-thumb {
  168.  background: #000000;
  169.  width: 15px;
  170.  border: 1px solid #E5E5E5;
  171. }
  172.  
  173. /* Panels */
  174.  
  175. .panel {
  176.  background: none;
  177.  font-family: 'Open Sans', sans-serif;
  178.  padding: 0;
  179.  margin: 0;
  180.  position: absolute;
  181.  z-index: 99;
  182. }
  183.  
  184. .panel a {
  185.  color: #B01030;
  186.  font-weight: normal;
  187. }
  188.  
  189. #id_comments, #id_wishlist, #id_footprints {
  190.  background: #FFFFFF;
  191.  width: 400px;
  192.  height: 500px;
  193.  color: #000;
  194.  padding: 0 10px 0 0;
  195.  left: -500px;
  196.  top: 37px;
  197.  border: 10px solid transparent;
  198.  border-top-width: 60px;
  199.  box-shadow: 0 0 0 2px #000, 0 0 0 4px #FFFFFF;
  200.  box-sizing: border-box;
  201.  overflow-x: hidden;
  202.  overflow-y: scroll;
  203. }
  204. #id_comments:hover, #id_wishlist:hover, #id_footprints:hover {left: 58px;}
  205.  
  206. #id_comments::before, #id_wishlist::before, #id_footprints::before {
  207.  content: url('https://i.imgur.com/Twy9EKR.png');
  208.  left: 35px;
  209.  position: fixed;
  210.  z-index: 9;
  211.  opacity: 0;
  212.  pointer-events: none;
  213. }
  214. #id_comments::before {margin-top: 61px;}
  215. #id_wishlist::before {margin-top: 105px;}
  216. #id_footprints::before {margin-top: 149px;}
  217.  
  218. /* Work Around FF Render Bug */
  219.  
  220. #id_comments:hover::before, #id_wishlist:hover::before, #id_footprints:hover::before {
  221.   opacity: 1;
  222.   pointer-events: all;
  223. }
  224.  
  225. .panel h2 {
  226.  background: #000;
  227.  width: 500px;
  228.  height: 40px;
  229.  color: #FFFFFF;
  230.  font-family: 'Aldrich', sans-serif;
  231.  font-size: 30px;
  232.  letter-spacing: .05em;
  233.  line-height: 44px;
  234.  text-align: center;
  235.  text-transform: uppercase;
  236.  padding: 0;
  237.  margin: 0;
  238.  position: fixed;
  239.  top: 46px;
  240.  left: 58px;
  241.  opacity: 0;
  242.  transform: scaleX(.8);
  243.  transform-origin: top left;
  244.  pointer-events: none;
  245. }
  246.  
  247. /* Work Around FF Render Bug */
  248.  
  249. .panel:hover h2 {opacity: 1;}
  250.  
  251. .custom_panel {
  252.  width: 100%;
  253.  height: 100% !important;
  254.  top: 0;
  255.  left: 0;
  256.  z-index: 9 !important;
  257. }
  258.  
  259. #id_contact h2 {display: none;}
  260. #id_details h2 {display: none;}
  261. .media_panel h2 {display: none;}
  262. .custom_panel h2 {display: none;}
  263.  
  264. /* Things That Are Buttons */
  265.  
  266. #id_comments::after, #id_wishlist::after, #id_footprints::after, #id_contact ul:not(.buttons) li, .media_panel {
  267.  background: url('https://i.imgur.com/vcNz49l.png');
  268.  background-color: rgba(0,0,0,.8);
  269.  background-size: 34px auto;
  270.  width: 34px;
  271.  height: 34px !important;
  272.  font-size: 0px;
  273.  border-radius: 2px;
  274.  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
  275.  overflow: hidden;
  276. }
  277. #id_comments::after, #id_wishlist::after, #id_footprints::after, .media_panel {left: 7px;}
  278. .media_panel {position: absolute;}
  279.  
  280. #id_contact ul:not(.buttons) li {
  281.  position: relative;
  282.  margin-bottom: 10px;
  283. }
  284.  
  285. #id_comments::after, #id_wishlist::after, #id_footprints::after {
  286.  content: '';
  287.  position: fixed;
  288.  z-index: 8;
  289. }
  290.  
  291. #id_comments::after {
  292.  background-position: 0 -204px;
  293.  top: 166px;
  294. }
  295.  
  296. #id_wishlist::after {
  297.  background-position: 0 -306px;
  298.  top: 210px;
  299. }
  300.  
  301. #id_footprints::after {
  302.  background-position: 0 -374px;
  303.  top: 254px;
  304. }
  305.  
  306. /* Contact */
  307.  
  308. #id_contact {
  309.  position: absolute;
  310.  top: 34px;
  311.  left: 7px;
  312. }
  313.  
  314. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: 0 0;}
  315. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: 0 -34px;}
  316. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: 0 -68px;}
  317.  
  318. #id_contact ul:not(.buttons) li a {
  319.  display: block;
  320.  width: 100%;
  321.  height: 100%;
  322.  position: absolute;
  323.  top: 0;
  324.  left: 0;
  325. }
  326.  
  327. /* Details */
  328.  
  329. #id_details, #pictures_container div:first-of-type {
  330.  width: 120px;
  331.  height: 150px;
  332.  bottom: -200px;
  333.  overflow: visible;
  334.  z-index: 8;
  335. }
  336. #id_details {left: calc((100% - 120px) / 2 - 60px);}
  337. #id_details .forum_userstatus {display: none;}
  338. #id_details p:nth-of-type(n+2) {display: none;}
  339.  
  340. #pictures_container div:first-of-type {
  341.  position: fixed;
  342.  top: auto !important;
  343.  left: calc((100% - 120px) / 2 + 10px) !important;
  344. }
  345.  
  346. @media screen and (min-height: 600px) {#id_details {bottom: 15%;} #pictures_container div:first-of-type {bottom: calc(15% - 20px);}}
  347. @media screen and (min-height: 640px) {#id_details {bottom: 20%;} #pictures_container div:first-of-type {bottom: calc(20% - 20px);}}
  348. @media screen and (min-height: 780px) {#id_details {bottom: 30%;} #pictures_container div:first-of-type {bottom: calc(30% - 20px);}}
  349.  
  350. /* Avatar Shadow */
  351.  
  352. #id_details::before, #pictures_container div:first-of-type::before {
  353.  display: block;
  354.  width: 120px;
  355.  height: 150px;
  356.  position: absolute;
  357.  bottom: 4px;
  358.  left: 0;
  359.  filter: brightness(0);
  360.  transform: scaleY(-.4);
  361.  transform-origin: bottom center;
  362.  z-index: -1;
  363. }
  364.  
  365. #id_details::before {
  366.  content: url('http://a2.cdn.gaiaonline.com/dress-up/avatar/ava/dd/a1/404c4e20255a1dd_flip.png');
  367.  opacity: .4;
  368. }
  369.  
  370. #pictures_container div:first-of-type::before {
  371.  content: url('http://a2.cdn.gaiaonline.com/dress-up/avatar/ava/29/5f/bfdba1023e5f29.png');
  372.  opacity: .2;
  373. }
  374.  
  375. /* Comments */
  376.  
  377. #id_comments .deletecomment {display: none;}
  378. #id_comments #alerts_banner {display: none;}
  379. #id_comments #alert_container {padding: 0px;}
  380.  
  381. #id_comments dt {
  382.  line-height: 7px;
  383.  padding: 0;
  384.  margin: 0 0 0 58px;
  385.  position: absolute;
  386.  border: none;
  387. }
  388.  
  389. #id_comments dd {
  390.  padding-bottom: 8px;
  391.  margin-bottom: 10px;
  392.  border-bottom: 1px solid rgba(0,0,0,.1);
  393. }
  394.  
  395. #id_comments dd:last-of-type {
  396.  margin-bottom: 0;
  397.  border: none;
  398. }
  399.  
  400. #id_comments .dropBox {
  401.  background: rgba(0,0,0,.1);
  402.  width: 48px;
  403.  height: 48px;
  404.  margin: 0 10px 0 0;
  405.  border-radius: 3px;
  406.  overflow: hidden;
  407. }
  408.  
  409. #id_comments .dropBox img {
  410.  width: 120px;
  411.  height: 150px;
  412.  margin-top: -26px;
  413.  margin-left: -46px;
  414. }
  415.  
  416. #id_comments dd .postcontent {
  417.  display: table-cell;
  418.  padding-top: 10px;
  419. }
  420.  
  421. #id_comments .date {
  422.  float: left;
  423.  color: #808080;
  424.  text-align: left;
  425.  margin-left: 5px;
  426. }
  427. #id_comments .date::before {content: '•';}
  428.  
  429. #id_comments .date a {
  430.  color: #808080;
  431.  text-transform: lowercase;
  432.  padding: 0 3px 0 5px;
  433.  position: relative;
  434. }
  435.  
  436. #id_comments .date a::after {
  437.  content: '•';
  438.  display: block;
  439.  background: #FFFFFF;
  440.  position: absolute;
  441.  top: 4px;
  442.  left: calc(100% + 2px);
  443.  box-shadow: 0 0 0 3px #FFFFFF;
  444. }
  445.  
  446. /* Comment Links */
  447.  
  448. #id_comments #alert_container, #id_comments h2 ~ p {
  449.  width: 34px;
  450.  height: 12px;
  451.  line-height: 12px;
  452.  text-align: right;
  453.  position: fixed;
  454.  margin-left: 345px;
  455.  overflow: hidden;
  456. }
  457. #id_comments #alert_container {margin-top: -42px;}
  458. #id_comments h2 ~ p {margin-top: -28px;}
  459.  
  460. #id_comments #alert_container a, #id_comments p a[href*='comments'] {
  461.  color: #FFFFFF;
  462.  font-family: 'Open Sans Condensed', sans-serif;
  463.  font-size: 12px;
  464.  font-weight: bold;
  465.  text-decoration: none;
  466.  text-transform: uppercase;
  467. }
  468.  
  469. /* Wish List */
  470.  
  471. #id_wishlist {padding: 0;}
  472.  
  473. #id_wishlist .item {
  474.  background: rgba(0,0,0,.1);
  475.  height: 30px;
  476.  text-align: center;
  477.  padding: 4px;
  478.  margin: 0 7px 7px 0;
  479.  border-radius: 2px;
  480.  position: relative;
  481.  transition: background .5s ease-in-out;
  482. }
  483. #id_wishlist .item:hover {background: #B01030;}
  484.  
  485. #id_wishlist .premium_sparkle {
  486.  width: 30px;
  487.  height: 30px;
  488.  margin: 0;
  489.  top: calc(50% - 15px);
  490.  left: calc(50% - 15px);
  491. }
  492.  
  493. #equipped-list, #equipped-list ~ #equipped-item-details, #equipped-item-details_mask {display: none !important;}
  494. #equipped-list_c, #equipped-item-details_c {z-index: 999 !important;}
  495.  
  496. /* Visitors */
  497.  
  498. #id_footprints .item {padding: 3px;}
  499. #id_footprints .item:nth-of-type(even) {background: rgba(0,0,0,.05);}
  500.  
  501. /* Friends */
  502.  
  503. #id_friends {
  504.  bottom: 8px;
  505.  left: 51px;
  506. }
  507. #id_friends h2 {display: none;}
  508. #id_friends h2 ~ p {display: none;}
  509. #id_friends p {margin: 0;}
  510.  
  511. #id_friends ul:not(.buttons) li {
  512.  background: rgba(0,0,0,.8);
  513.  width: 34px;
  514.  height: 34px;
  515.  text-align: left;
  516.  margin-right: 10px;
  517.  border-radius: 2px;
  518.  box-shadow: 0 0 0 1px rgba(255,255,255,.2);
  519.  filter: grayscale(100%);
  520.  opacity: .8;
  521.  overflow: hidden;
  522.  transition: opacity 1s ease-in-out;
  523. }
  524. #id_friends ul:not(.buttons) li:hover {opacity: 1;}
  525. #id_friends ul:not(.buttons) .dropBox {margin: -8px 0 0 -8px;}
  526.  
  527. #id_friends ul:not(.buttons) li a {
  528.  width: 100%;
  529.  height: 100%;
  530.  font-size: 0;
  531.  position: absolute;
  532. }
  533.  
  534. /* Media */
  535.  
  536. .media_panel {
  537.  background-position: 0 -102px;
  538.  bottom: 8px;
  539. }
  540.  
  541. .media_panel object {
  542.  width: 480px;
  543.  height: 360px;
  544.  position: absolute;
  545.  bottom: 0;
  546.  left: -8px;
  547.  opacity: 0;
  548. }
  549.  
  550. /* Lights */
  551.  
  552. .custom_panel span, .custom_panel span::after {
  553.  display: block;
  554.  width: 100%;
  555.  height: 100%;
  556.  position: absolute;
  557.  top: 0;
  558.  left: 0;
  559.  pointer-events: none;
  560. }
  561.  
  562. .custom_panel span:nth-of-type(1) {
  563.  background: url('https://i.imgur.com/NRloyZR.png') fixed top center / cover;
  564.  animation: FluorescentLights 3s infinite linear;
  565. }
  566.  
  567. .custom_panel span:nth-of-type(2) {
  568.  background: url('https://i.imgur.com/f0H0TSW.png') fixed top center / cover;
  569.  animation: WindowLights 83s infinite linear;
  570. }
  571.  
  572. .custom_panel span:nth-of-type(3) {
  573.  background: url('https://i.imgur.com/XIOFaXP.png') fixed top center / cover;
  574.  animation: BarLights 6s infinite linear;
  575. }
  576.  
  577. .custom_panel span:nth-of-type(4) {
  578.  background: url('https://i.imgur.com/VO67xDO.png') fixed top center / cover;
  579.  animation: CyanLights 10s infinite linear;
  580. }
  581.  
  582. .custom_panel span:nth-of-type(5) {
  583.  width: 30%;
  584.  height: 40%;
  585.  top: auto;
  586.  right: 0;
  587.  bottom: 0;
  588.  left: auto;
  589.  pointer-events: all;
  590. }
  591.  
  592. .custom_panel span:nth-of-type(5)::after {
  593.  content: '';
  594.  background: url('https://i.imgur.com/UlDylod.png') fixed top center / cover;
  595.  position: fixed;
  596.  opacity: 0;
  597.  transition: opacity 1s ease-in-out;
  598. }
  599. .custom_panel span:nth-of-type(5):hover::after {opacity: 1;}
  600.  
  601. .custom_panel span:nth-of-type(6) {
  602.  background: url('https://i.imgur.com/XYmSLbx.png') repeat;
  603.  width: calc(100% + 200px);
  604.  height: calc(100% + 200px);
  605.  top: -100px;
  606.  left: -100px;
  607.  transform: rotate(5deg);
  608.  animation: RainMove .5s infinite linear;
  609.  opacity: .05;
  610. }
  611.  
  612. /* Picture Container */
  613.  
  614. #columns {z-index: 1;}
  615. #pictures_container {
  616.  width: 1px;
  617.  height: 1px;
  618.  position: absolute;
  619.  top: 50%;
  620.  left: 50%;
  621.  z-index: 2;
  622. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement