Advertisement
althindor

Pro for Muneca

Dec 14th, 2022
987
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 15.25 KB | None | 0 0
  1. /* Glitch by Nezumimousey */
  2. /* And Coded by AlthIndor */
  3.  
  4. :root {
  5.   --aqua-full: #00FFFFFF;
  6.   --aqua-part: #00FFFF80;
  7.   --pink-full: #FF68B4FF;
  8.   --pink-part: #FF68B440;
  9. }
  10.  
  11. html, body {
  12.   background: url('https://i.ibb.co/YTnX1yK/animated.webp') no-repeat bottom center / cover;
  13.   overflow: hidden;
  14. }
  15.  
  16. body a {
  17.   text-decoration: none !important;
  18.   transition: all .5s ease-in-out;
  19. }
  20.  
  21. /* Atlas Control */
  22.  
  23. #viewer #gaia_header ul, #column_2, #column_2 .custom_panel, #id_store a, #id_contact li *, #column_3::before {background: url('https://i.ibb.co/r4Xs6kp/layout-new.png') no-repeat border-box;}
  24. #viewer #gaia_header ul {background-position: bottom left;}
  25. #column_3::before {background-position: -388px bottom;}
  26.  
  27. #column_2 .custom_panel, #id_store a, #id_contact li * {background-position-x: right;}
  28. #column_2 .custom_panel:nth-of-type(4) {background-position-y: -39px;}
  29. #column_2 .custom_panel:nth-of-type(6) {background-position-y: -78px;}
  30. #column_2 .custom_panel:nth-of-type(8) {background-position-y: -117px;}
  31. #id_store a {background-position-y: -156px;}
  32. #id_contact li:nth-of-type(1) * {background-position-y: -195px;}
  33. #id_contact li:nth-of-type(2) * {background-position-y: -234px;}
  34. #id_contact li:nth-of-type(3) * {background-position-y: -273px;}
  35.  
  36. /* Fonts */
  37.  
  38. @font-face {
  39.   font-family: 'Open Sans';
  40.   font-style: normal;
  41.   font-weight: 400;
  42.   src: local('Open Sans'), local('OpenSans-Regular'), url('https://fonts.gstatic.com/s/opensans/v34/memvYaGs126MiZpBA-UvWbX2vVnXBbObj2OVTS-muw.woff2') format('woff2');
  43. }
  44.  
  45. @font-face {
  46.   font-family: 'Open Sans';
  47.   font-style: normal;
  48.   font-weight: 700;
  49.   src: local('Open Sans Bold'), local('OpenSans-Bold'), url('https://fonts.gstatic.com/s/opensans/v34/memSYaGs126MiZpBA-UvWbX2vVnXBbObj2OVZyOOSr4dVJWUgsg-1x4gaVI.woff2') format('woff2');
  50. }
  51.  
  52. @font-face {
  53.   font-family: 'Font Awesome 5 Free';
  54.   font-style: normal;
  55.   font-weight: 900;
  56.   src: url('https://ka-f.fontawesome.com/releases/v5.15.4/webfonts/free-fa-solid-900.woff2') format('woff2');
  57. }
  58.  
  59. /* Header */
  60.  
  61. #gaia_header {background: none !important;}
  62. #gaia_header li.spacer {display: none !important;}
  63. #gaia_header li {margin: 0 5px;}
  64.  
  65. #gaia_header ul {
  66.   width: 378px !important;
  67.   height: 53px !important;
  68.   font: 0/52px 'Open Sans', sans-serif !important;
  69.   padding: 0 15px !important;
  70.   margin: 10px !important;
  71.   box-sizing: border-box !important;
  72. }
  73.  
  74. #gaia_header #header_right {
  75.   float: right;
  76.   display: flex !important;
  77.   justify-content: end;
  78. }
  79. #gaia_header #header_right li:nth-of-type(n+2) {order: 1;}
  80. #gaia_header #header_right li:nth-of-type(4) {order: 0;}
  81.  
  82. #header_left li:nth-of-type(2) a, #header_left img {transition: all .5s ease-in-out;}
  83. #header_left li:nth-of-type(2) a {filter: drop-shadow(0 0 8px var(--aqua-full));}
  84. #header_left li:nth-of-type(2) a:hover {filter: drop-shadow(0 0 8px var(--pink-full));}
  85.  
  86. #header_left img {
  87.   -webkit-mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  88.   mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  89.   background: currentColor;
  90.   width: 0 !important;
  91.   padding: 0 37px 0 0;
  92. }
  93.  
  94. #gaia_header a {
  95.   color: #FFFFFF !important;
  96.   text-shadow: 0 0 10px var(--aqua-full);
  97.   text-transform: uppercase;
  98. }
  99.  
  100. #gaia_header a:hover {
  101.   color: var(--pink-full) !important;
  102.   text-shadow: 0 0 10px var(--pink-full);
  103. }
  104.  
  105. #gaia_header a, #gaia_header a::before {font-size: 12px;}
  106. #header_right a[href*='edit'], #header_right a[href*='report'] {font-size: 0;}
  107. #header_right a[href*='edit']::before {content: 'Edit Mine';}
  108. #header_right a[href*='report']::before {content: 'Report Profile';}
  109.  
  110. /* Columns */
  111.  
  112. #columns {display: contents;}
  113. #column_2, #column_3::before {position: absolute;}
  114.  
  115. #columns .column {
  116.   float: none;
  117.   display: block;
  118.   font-size: 0;
  119. }
  120.  
  121. #column_1, #column_3 {
  122.   width: 100%;
  123.   margin: 0;
  124.   position: fixed;
  125.   top: 0;
  126.   left: 0;
  127. }
  128. #column_1 {height: 100%;}
  129. #column_3 {height: 50%;}
  130.  
  131. #column_2, #column_3 {
  132.   opacity: 0;
  133.   transition: opacity .5s ease-in-out;
  134. }
  135. #column_2:hover, #column_2:hover ~ #column_3 {opacity: 1;}
  136.  
  137. #column_2 {
  138.   width: 828px;
  139.   height: 203px;
  140.   margin: 172px 0 0 0;
  141.   left: calc(50% - 414px);
  142.   border: 7px solid transparent;
  143.   box-sizing: border-box;
  144.   contain: layout;
  145. }
  146.  
  147. /* Username */
  148.  
  149. #column_3::before {
  150.   content: '';
  151.   width: 452px;
  152.   height: 60px;
  153.   top: 20%;
  154.   left: calc(50% - 226px);
  155.   filter: drop-shadow(3px 0 var(--pink-full)) drop-shadow(-3px 0 var(--aqua-full));
  156. }
  157.  
  158. /* Scrollbars */
  159.  
  160. #columns ::-webkit-scrollbar {
  161.   background: var(--pink-part);
  162.   width: 8px;
  163. }
  164. #columns ::-webkit-scrollbar-thumb {background: var(--pink-full);}
  165.  
  166. .panel {
  167.   scrollbar-color: var(--pink-full) var(--pink-part);
  168.   scrollbar-width: thin;
  169. }
  170.  
  171. /* Panels */
  172.  
  173. .panel, .panel h2 {
  174.   background: none;
  175.   color: #FFFFFF;
  176.   font: 12px/1.6 'Open Sans', sans-serif;
  177.   margin: 0;
  178.   padding: 0;
  179.   box-sizing: border-box;
  180.   overflow: hidden;
  181. }
  182. .panel {position: absolute;}
  183.  
  184. .panel a {
  185.   color: var(--aqua-full);
  186.   text-shadow: 0 0 10px currentColor;
  187. }
  188. .panel a:hover {color: var(--pink-full);}
  189.  
  190. #id_wishlist, #id_comments, #id_footprints, .media_panel {
  191.   background: rgba(0, 192, 255, .2);
  192.   width: 464px;
  193.   height: 100% !important;
  194.   text-shadow: 0 0 10px var(--aqua-full);
  195.   bottom: -100%;
  196.   left: 175px;
  197.   border: 19px solid transparent;
  198.   opacity: 0;
  199.   transition: opacity .5s ease-in-out, bottom 0s linear .5s;
  200.   z-index: 1;
  201. }
  202.  
  203. #id_wishlist:hover, #id_comments:hover, #id_footprints:hover, .media_panel:hover {
  204.   bottom: 0;
  205.   opacity: 1;
  206.   transition: opacity .5s ease-in-out, bottom 0s linear 0s;
  207. }
  208.  
  209. #id_comments, #id_wishlist, #id_footprints {
  210.   padding-right: 15px;
  211.   overflow-y: scroll;
  212. }
  213.  
  214. /* Buttons */
  215.  
  216. #column_2 :where(h2, .custom_panel), #id_store a, #id_contact li * {
  217.   width: 164px;
  218.   height: 39px !important;
  219.   font-size: 0;
  220. }
  221. #column_1 h2, #id_store h2, #id_contact h2 {display: none;}
  222. #id_store a, #id_contact li * {display: block;}
  223.  
  224. .panel h2 {position: fixed;}
  225. .panel:hover h2 {width: 180px;}
  226.  
  227. #column_2 :where(h2, .custom_panel) {left: 0;}
  228. .custom_panel:nth-of-type(2), .panel:nth-of-type(1) h2 {top: 0;}
  229. .custom_panel:nth-of-type(4), .panel:nth-of-type(3) h2 {top: 50px;}
  230. .custom_panel:nth-of-type(6), .panel:nth-of-type(5) h2 {top: 100px;}
  231. .custom_panel:nth-of-type(8), .panel:nth-of-type(7) h2 {top: 150px;}
  232.  
  233. #column_2 .custom_panel, #id_store a, #id_contact a {
  234.   filter: drop-shadow(0 0 var(--pink-full)) drop-shadow(0 0 var(--aqua-full));
  235.   transition: filter .5s ease-in-out;
  236. }
  237. #column_2 .panel:hover + .custom_panel, #id_store a:hover, #id_contact a:hover {filter: drop-shadow(2px 0 var(--pink-full)) drop-shadow(-2px 0 var(--aqua-full));}
  238.  
  239. #id_store, #id_contact {right: 0;}
  240. #id_contact {bottom: 0;}
  241.  
  242. #id_store :is(h3, div, p:first-of-type) {display: none;}
  243. #id_store p:last-of-type {display: contents;}
  244. #id_contact li:nth-last-of-type(n+2) {margin-bottom: 11px;}
  245.  
  246. /* Comments */
  247.  
  248. #id_comments {
  249.   display: flex;
  250.   flex-flow: row wrap;
  251.   justify-content: right;
  252. }
  253.  
  254. #id_comments #alerts_banner, #id_comments h2 + div .clear {display: none;}
  255. #id_comments h2 + div, #id_comments h2 ~ p, #id_comments #alert_container {display: contents;}
  256. #id_comments dt, #id_comments .postcontent {text-align: left !important;}
  257. #id_comments .postcontent img {max-width: 100% !important;}
  258.  
  259. #id_comments dt {
  260.   display: flex;
  261.   align-items: baseline;
  262.   padding: 1px 0 0 67px;
  263.   height: 0;
  264.   line-height: inherit;
  265.   position: relative;
  266.   border: none;
  267. }
  268.  
  269. #id_comments .date {
  270.   flex-grow: 1;
  271.   display: inline-flex;
  272.   flex-flow: row-reverse nowrap;
  273.   justify-content: space-between;
  274.   font-size: 10px;
  275. }
  276.  
  277. #id_comments .username {
  278.   float: none;
  279.   display: revert;
  280.   margin-right: .3em;
  281. }
  282.  
  283. #id_comments dd {
  284.   display: grid;
  285.   grid-template-columns: 52px calc(100% - 52px - 15px);
  286.   gap: 0 15px;
  287.   margin: 0 0 20px 0;
  288.   overflow: visible;
  289. }
  290. #id_comments dd:last-of-type {margin: 0 0 5px 0;}
  291.  
  292. #id_comments .dropBox {
  293.   background: #FFFFFF;
  294.   width: 48px;
  295.   height: 48px;
  296.   margin: -1px 15px 0 0;
  297.   border: 2px solid var(--aqua-full);
  298.   border-radius: 50%;
  299.   overflow: hidden;
  300. }
  301.  
  302. #id_comments .dropBox img {
  303.   width: 120px;
  304.   height: 150px;
  305.   margin: -30px 0 0 -47px;
  306. }
  307.  
  308. #id_comments .postcontent::before {
  309.   content: ' ';
  310.   display: block;
  311.   white-space: pre;
  312.   margin: 5px 0;
  313.   border-bottom: 1px dotted var(--aqua-part);
  314. }
  315.  
  316. #id_comments .deletecomment {
  317.   display: flex;
  318.   grid-area: 2/2/3/3;
  319.   margin: 5px 0 0 0;
  320.   padding: 5px 0 0 0;
  321.   border-top: 1px dotted var(--aqua-part);
  322. }
  323. #id_comments .deletecomment a:last-of-type {order: 3;}
  324. #id_comments .deletecomment br {display: none;}
  325.  
  326. #id_comments .deletecomment::after {
  327.   content: ' or ';
  328.   order: 2;
  329.   white-space: pre;
  330. }
  331.  
  332. /* Comments Links */
  333.  
  334. #id_comments h2 + div a, #id_comments h2 ~ p a {
  335.   display: block;
  336.   background: var(--aqua-full);
  337.   width: 39px;
  338.   height: 39px;
  339.   color: #FFFFFF;
  340.   font-size: 0;
  341.   text-align: center;
  342.   text-shadow: none;
  343.   margin-bottom: 15px;
  344.   border-radius: 5px;
  345. }
  346. #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {background: var(--pink-full);}
  347. #id_comments h2 + div a {margin-right: 11px;}
  348.  
  349. #id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font: 20px/39px 'Font Awesome 5 Free';}
  350. #id_comments h2 + div a::before {content: '';}
  351. #id_comments h2 ~ p a::before {content: '';}
  352.  
  353. /* Wish List */
  354.  
  355. #id_wishlist {
  356.   display: grid;
  357.   grid-template-columns: repeat(8, 49px);
  358.   grid-auto-rows: 49px;
  359.   gap: 1px;
  360.   scroll-snap-type: y mandatory;
  361. }
  362. #id_wishlist .clear, .premium_sparkle {display: none;}
  363.  
  364. #id_wishlist .item, #id_wishlist .item a {
  365.   display: flex;
  366.   justify-content: center;
  367.   align-items: center;
  368. }
  369.  
  370. #id_wishlist .item {
  371.   position: relative;
  372.   scroll-snap-align: start;
  373. }
  374.  
  375. #id_wishlist a {
  376.   background: #FFFFFF20;
  377.   width: 37px;
  378.   height: 37px;
  379.   border: 1px solid var(--aqua-full);
  380.   border-radius: 5px;
  381. }
  382.  
  383. #id_wishlist a:hover {
  384.   background: #FFFFFF;
  385.   border-color: var(--pink-full);
  386. }
  387.  
  388. .owner_checkmark {
  389.   margin: 0;
  390.   bottom: 10px;
  391.   left: 10px;
  392.   filter: brightness(500%) hue-rotate(30deg);
  393.   pointer-events: none;
  394. }
  395.  
  396. /* Visitors */
  397.  
  398. #id_footprints .item {
  399.   display: grid;
  400.   grid-auto-flow: column;
  401.   justify-content: start;
  402.   line-height: 2.1;
  403.   padding: 0 0 0 5px;
  404. }
  405.  
  406. #id_footprints .item::before {
  407.   content: ' visited ';
  408.   grid-column: 2;
  409.   white-space: pre;
  410. }
  411. #id_footprints .item::after {content: '.';}
  412.  
  413. /* Media */
  414.  
  415. .media_panel iframe {
  416.   width: 100%;
  417.   height: 100%;
  418.   border-radius: 5px;
  419. }
  420.  
  421. /* Avatar */
  422.  
  423. @keyframes FadeAvi {
  424.   from {opacity: 0;}
  425.   to {opacity: 1;}
  426. }
  427.  
  428. #id_details {
  429.   width: 140px;
  430.   height: 375px;
  431.   left: calc(50% - 70px);
  432.   overflow: visible;
  433.   animation: FadeAvi 5s 30s ease-in-out 1 both;
  434. }
  435. #id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}
  436. #id_details p {margin: 0;}
  437.  
  438. #id_details img {
  439.   position: relative;
  440.   filter: drop-shadow(0 0 10px powderblue);
  441. }
  442.  
  443. #id_details::before {
  444.   content: '';
  445.   background: #FFFFFF;
  446.   width: 100%;
  447.   height: 20px;
  448.   position: absolute;
  449.   top: 138px;
  450.   left: 0;
  451.   border-radius: 50%;
  452.   box-shadow: 0 0 15px pink;
  453. }
  454.  
  455. /* Falling Feathers */
  456.  
  457. @keyframes DropFeather {
  458.   000% {transform: translateY(000vh) rotate(-30deg); animation-timing-function: ease-in-out;}
  459.   010% {transform: translateY(010vh) rotate(+30deg); animation-timing-function: ease-in-out;}
  460.   020% {transform: translateY(020vh) rotate(-30deg); animation-timing-function: ease-in-out;}
  461.   030% {transform: translateY(030vh) rotate(+30deg); animation-timing-function: ease-in-out;}
  462.   040% {transform: translateY(040vh) rotate(-30deg); animation-timing-function: ease-in-out;}
  463.   050% {transform: translateY(050vh) rotate(+30deg); animation-timing-function: ease-in-out;}
  464.   060% {transform: translateY(060vh) rotate(-30deg); animation-timing-function: ease-in-out;}
  465.   070% {transform: translateY(070vh) rotate(+30deg); animation-timing-function: ease-in-out;}
  466.   080% {transform: translateY(080vh) rotate(-30deg); animation-timing-function: ease-in-out;}
  467.   090% {transform: translateY(090vh) rotate(+30deg); animation-timing-function: ease-in-out;}
  468.   100% {transform: translateY(100vh) rotate(-30deg);}
  469. }
  470. @keyframes BonusMotion {from {translate: 0 -200px;} to {translate: 0 200px;}}
  471.  
  472. #column_1 .custom_panel, #column_1 .custom_panel div {
  473.   width: 1200px;
  474.   height: 100% !important;
  475.   top: 0;
  476. }
  477.  
  478. #column_1 .custom_panel {
  479.   left: calc(50% - 600px);
  480.   overflow: visible;
  481. }
  482.  
  483. #column_1 b {
  484.   background: url('https://i.imgur.com/9tdPlho.png');
  485.   position: absolute;
  486.   transform-origin: center -100px;
  487.   animation: DropFeather 45s ease-in-out infinite, BonusMotion 45s ease-out infinite;
  488. }
  489. @media (prefers-reduced-motion) {#column_1 b {animation-play-state: paused;}}
  490.  
  491. #column_1 b:nth-of-type(7n+1) {
  492.   width: 74px;
  493.   height: 50px;
  494. }
  495.  
  496. #column_1 b:nth-of-type(7n+2) {
  497.   background-position-x: -84px;
  498.   width: 75px;
  499.   height: 36px;
  500. }
  501.  
  502. #column_1 b:nth-of-type(7n+3) {
  503.   background-position-x: -169px;
  504.   width: 77px;
  505.   height: 43px;
  506. }
  507.  
  508. #column_1 b:nth-of-type(7n+4) {
  509.   background-position-x: -256px;
  510.   width: 78px;
  511.   height: 47px;
  512. }
  513.  
  514. #column_1 b:nth-of-type(7n+5) {
  515.   background-position-x: -344px;
  516.   width: 89px;
  517.   height: 44px;
  518. }
  519.  
  520. #column_1 b:nth-of-type(7n+6) {
  521.   background-position-x: -443px;
  522.   width: 90px;
  523.   height: 39px;
  524. }
  525.  
  526. #column_1 b:nth-of-type(7n+7) {
  527.   background-position-x: -543px;
  528.   width: 95px;
  529.   height: 40px;
  530. }
  531.  
  532. #column_1 b:nth-of-type(01) {left: 1073px; animation-duration: 42s, 42s; animation-delay: -09s, -09s;}
  533. #column_1 b:nth-of-type(02) {left: 0375px; animation-duration: 43s, 43s; animation-delay: -34s, -34s;}
  534. #column_1 b:nth-of-type(03) {left: 0864px; animation-duration: 41s, 41s; animation-delay: -25s, -25s;}
  535. #column_1 b:nth-of-type(04) {left: 0637px; animation-duration: 45s, 45s; animation-delay: -18s, -18s;}
  536. #column_1 b:nth-of-type(05) {left: 0612px; animation-duration: 40s, 40s; animation-delay: -02s, -02s;}
  537. #column_1 b:nth-of-type(06) {left: 0891px; animation-duration: 43s, 43s; animation-delay: -19s, -19s;}
  538. #column_1 b:nth-of-type(07) {left: 0486px; animation-duration: 45s, 45s; animation-delay: -31s, -31s;}
  539. #column_1 b:nth-of-type(08) {left: 0648px; animation-duration: 48s, 48s; animation-delay: -30s, -30s;}
  540. #column_1 b:nth-of-type(09) {left: 0025px; animation-duration: 49s, 49s; animation-delay: -20s, -20s;}
  541. #column_1 b:nth-of-type(10) {left: 0410px; animation-duration: 49s, 49s; animation-delay: -28s, -28s;}
  542. #column_1 b:nth-of-type(11) {left: 0272px; animation-duration: 41s, 41s; animation-delay: -36s, -36s;}
  543. #column_1 b:nth-of-type(12) {left: 0801px; animation-duration: 45s, 45s; animation-delay: -20s, -20s;}
  544. #column_1 b:nth-of-type(13) {left: 0109px; animation-duration: 43s, 43s; animation-delay: -38s, -38s;}
  545. #column_1 b:nth-of-type(14) {left: 0158px; animation-duration: 44s, 44s; animation-delay: -18s, -18s;}
  546.  
  547. /* Misc */
  548.  
  549. #pictures_container, #texts_container {
  550.   width: 0;
  551.   height: 375px;
  552.   position: absolute;
  553.   left: calc(50% - 414px);
  554. }
  555. .bbcode-swapping-image {background: url('https://i.imgur.com/Fk5mUXF.png');}
  556.  
  557. #id_details, #column_2, #pictures_container, #texts_container {bottom: 14px;}
  558. @media (min-height: 720px) {#id_details, #column_2, #pictures_container, #texts_container {top: calc(50% - 30px);}}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement