Advertisement
althindor

Pro for 36Transformations

Jul 13th, 2021 (edited)
1,650
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.21 KB | None | 0 0
  1. /* Layout by Mule of CD-ARIAx3 */
  2. /* + Profile Code by AlthIndor */
  3.  
  4. :root {
  5.   --color-primary: plum;
  6.   --color-secndry: #FF8000;
  7. }
  8.  
  9. html, body {
  10.   background: url('https://i.imgur.com/XqhXg32.jpg') top center / cover #000;
  11.   min-height: 1300px;
  12.   overflow-x: hidden;
  13. }
  14. body {position: relative;}
  15.  
  16. body a {
  17.   text-decoration: none !important;
  18.   transition: color .5s ease-in-out, text-shadow .5s ease-in-out, filter .5s ease-in-out;
  19. }
  20.  
  21. ::selection {
  22.   background: rebeccapurple;
  23.   color: #FFFFFF;
  24. }
  25.  
  26. #columns, .custom_panel .clear {background: url('https://i.imgur.com/zSh8iCt.png');}
  27. .custom_panel .clear {background-position: -381px -1290px;}
  28.  
  29. /* Fonts */
  30.  
  31. @font-face {
  32.   font-family: 'Yellowtail';
  33.   font-style: normal;
  34.   font-weight: 400;
  35.   src: local('Yellowtail'), local('Yellowtail-Regular'), url(https://fonts.gstatic.com/s/yellowtail/v11/OZpGg_pnoDtINPfRIlLohlvHwQ.woff2) format('woff2');
  36. }
  37.  
  38. @font-face {
  39.   font-family: 'Scheherazade';
  40.   font-style: normal;
  41.   font-weight: 400;
  42.   src: local('Scheherazade'), local('Scheherazade-Regular'), url(https://fonts.gstatic.com/s/scheherazade/v20/YA9Ur0yF4ETZN60keViq1kQQsJmp.woff2) format('woff2');
  43. }
  44.  
  45. @font-face {
  46.   font-family: 'Scheherazade';
  47.   font-style: normal;
  48.   font-weight: 700;
  49.   src: local('Scheherazade Bold'), local('Scheherazade-Bold'), url(https://fonts.gstatic.com/s/scheherazade/v20/YA9Lr0yF4ETZN60keViq1kQYC7y8idfU.woff2) format('woff2');
  50. }
  51.  
  52. /* Header */
  53.  
  54. #gaia_header, #header_left, #header_right {box-sizing: border-box;}
  55. #gaia_header li.spacer {display: none !important;}
  56.  
  57. #viewer #gaia_header {
  58.   background: none;
  59.   position: absolute !important;
  60. }
  61.  
  62. #gaia_header #header_left, #gaia_header #header_right {
  63.   background: #000000B2 !important;
  64.   width: auto !important;
  65.   height: 35px !important;
  66.   font: 0/38px 'Scheherazade', serif !important;
  67.   padding: 0 10px !important;
  68.   margin: 10px !important;
  69.   border-radius: 5px;
  70.   box-shadow: 4px 4px #0000005A;
  71. }
  72. #gaia_header #header_right {float: right;}
  73.  
  74. #gaia_header img {
  75.   background: url('https://i.imgur.com/5FTB40o.png') 0 2px no-repeat;
  76.   width: 0;
  77.   padding: 0 37px 0 0;
  78. }
  79. #header_left li:nth-of-type(2) a:hover {filter: drop-shadow(0 0 5px #FFFFFF);}
  80.  
  81. #gaia_header a {
  82.   color: #FFFFFF !important;
  83.   font-size: 18px !important;
  84.   font-weight: 400;
  85.   letter-spacing: .025em;
  86.   text-transform: uppercase;
  87. }
  88. #gaia_header a:hover {text-shadow: 0 0 5px #FFFFFF, 0 0 10px #FFFFFF;}
  89.  
  90. #header_left li:nth-of-type(n+3)::before, #header_right li:nth-of-type(n+2)::before {
  91.   content: '❖';
  92.   color: #8080A0;
  93.   font-size: 14px !important;
  94.   margin: 0 6px;
  95. }
  96.  
  97. #header_right a[href*='report'], #header_right a[href*='edit'] {font-size: 0 !important;}
  98. #header_right a[href*='report']::before, #header_right a[href*='edit']::before {font-size: 18px !important;}
  99. #header_right a[href*='report']::before {content: 'Report';}
  100. #header_right a[href*='edit']::before {content: 'Edit Profile';}
  101.  
  102. /* Columns */
  103.  
  104. #columns {
  105.   width: 1600px;
  106.   height: 1280px;
  107.   top: 0;
  108.   left: calc(50% - 800px);
  109. }
  110.  
  111. #columns .column {
  112.   float: none;
  113.   display: block;
  114.   margin: 0;
  115.   position: absolute;
  116.   overflow: visible;
  117. }
  118. #column_2 {width: unset;}
  119. #column_3 {display: none !important;}
  120.  
  121. #column_1, .custom_panel, .custom_panel h2 + div, .custom_panel ul {
  122.   width: 100%;
  123.   height: 100% !important;
  124. }
  125.  
  126. /* Scrollbars */
  127.  
  128. #columns ::-webkit-scrollbar {
  129.   background: #FFFFFF40;
  130.   width: 6px;
  131. }
  132. #columns ::-webkit-scrollbar-thumb {background: plum;}
  133.  
  134. .panel, #id_comments dl {
  135.   scrollbar-color: plum #FFFFFF40;
  136.   scrollbar-width: thin;
  137. }
  138.  
  139. /* Panels */
  140.  
  141. .panel, #id_comments dl {
  142.   box-sizing: border-box;
  143.   overflow: hidden;
  144. }
  145.  
  146. .panel {
  147.   background: none;
  148.   color: #FFFFFF;
  149.   font: 400 17px/1.3 'Scheherazade', serif;
  150.   text-align: justify;
  151.   padding: 0;
  152.   margin: 0;
  153.   position: absolute;
  154. }
  155. .panel h2 {display: none;}
  156.  
  157. .panel a {color: var(--color-primary);}
  158. .panel a:hover {color: var(--color-secndry);}
  159.  
  160. #id_about, #id_comments dl, #id_wishlist {overflow-y: scroll;}
  161. #id_about, #id_comments dl {padding-right: 15px;}
  162. #id_about img, #id_comments .postcontent img {max-width: 100%;}
  163.  
  164. .panel:not(.media_panel) iframe {max-width: 100%;}
  165.  
  166. .smilies {
  167.   background-position-y: calc(50% - 2px) !important;
  168.   padding-bottom: 0 !important;
  169. }
  170.  
  171. /* Details */
  172.  
  173. #id_details {
  174.   top: 356px;
  175.   left: 427px;
  176. }
  177. #id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}
  178. #id_details p {margin: 0;}
  179.  
  180. /* Contact */
  181.  
  182. #id_contact {
  183.   width: 189px;
  184.   top: 677px;
  185.   left: 221px;
  186. }
  187.  
  188. #id_contact li, #id_contact li * {
  189.   display: block;
  190.   width: 100%;
  191.   height: 49px;
  192. }
  193.  
  194. #id_contact li {
  195.   text-align: center;
  196.   margin: 0 0 15px 0;
  197.   border-radius: 24px;
  198.   overflow: hidden;
  199. }
  200.  
  201. #id_contact li * {
  202.   color: #FFFFFF;
  203.   font-size: 0;
  204.   font-weight: 400;
  205.   line-height: 54px;
  206.   text-shadow: 0 0 10px #0080FF, 0 0 20px #0080FF, 2px 2px #00008080;
  207.   transition: all .5s ease-in-out;
  208.   filter: drop-shadow(0 0 1px #FFFFFF);
  209. }
  210. #id_contact li *:hover {text-shadow: 0 0 10px var(--color-secndry), 0 0 20px var(--color-secndry), 2px 2px #00008080;}
  211.  
  212. #id_contact li *::before {font-size: 29px;}
  213. #id_contact li:nth-of-type(1) *::before {content: 'ADD FRIEND';}
  214. #id_contact li:nth-of-type(2) *::before {content: 'P. MESSAGE';}
  215. #id_contact li:nth-of-type(3) *::before {content: 'OPEN TRADE';}
  216.  
  217. /* About Me */
  218.  
  219. #id_about {
  220.   width: 300px;
  221.   height: 264px;
  222.   top: 678px;
  223.   left: 458px;
  224. }
  225.  
  226. /* Comments */
  227.  
  228. #id_comments {
  229.   width: 300px;
  230.   height: 350px;
  231.   text-align-last: center;
  232.   top: 765px;
  233.   left: 863px;
  234. }
  235.  
  236. #id_comments #alerts_banner, #id_comments h2 + div .clear, #id_comments .dropBox {display: none;}
  237. #id_comments h2 ~ p, #id_comments .deletecomment, #id_comments dd:last-of-type {margin: 0;}
  238. #id_comments dl {height: 310px;}
  239.  
  240. #id_comments dt {
  241.   height: unset;
  242.   line-height: 1.2;
  243.   text-align: revert;
  244.   padding: 0 0 3px 0;
  245.   margin: 0 0 3px 0;
  246.   border-bottom: 1px dotted #FFFFFFC0;
  247. }
  248. #id_comments .username {float: none;}
  249. #id_comments .date {color: #FFFFFFC0;}
  250. #id_comments .date a {font-weight: 400;}
  251.  
  252. #id_comments dd {
  253.   display: grid;
  254.   margin: 0 0 20px 0;
  255. }
  256. #id_comments .postcontent {grid-row: 1;}
  257.  
  258. /* Delete Comment Link */
  259.  
  260. #id_comments .deletecomment {
  261.   float: none;
  262.   display: grid;
  263.   grid-auto-flow: column;
  264.   justify-content: center;
  265.   padding-top: 3px;
  266.   margin-top: 3px;
  267.   border-top: 1px dotted #FFFFFFC0;
  268. }
  269. #id_comments .deletecomment a[href*='addcomment'] {font-size: 0;}
  270.  
  271. #id_comments .deletecomment a[href*='addcomment']::before {
  272.   content: 'Reply';
  273.   font-size: 17px;
  274. }
  275.  
  276. #id_comments .deletecomment::before {
  277.   content: ' or ';
  278.   grid-column: 2;
  279.   white-space: pre;
  280. }
  281.  
  282. /* Main Comment Links */
  283.  
  284. #id_comments h2 + div, #id_comments h2 ~ p {
  285.   position: absolute;
  286.   bottom: 0;
  287.   mix-blend-mode: color-dodge;
  288. }
  289. #id_comments h2 + div {left: 57px;}
  290. #id_comments h2 ~ p {right: 0;}
  291.  
  292. #id_comments h2 + div a::before, #id_comments h2 ~ p a {font: 400 18px/1 'Yellowtail', cursive;}
  293. #id_comments h2 + div a {font-size: 0;}
  294. #id_comments h2 + div a::before {content: 'post new comment';}
  295.  
  296. #id_comments h2 + div a, #id_comments h2 ~ p a {
  297.   color: #F0F0F0;
  298.   letter-spacing: .05em;
  299.   text-transform: lowercase;
  300.   text-shadow: 0 0 10px plum, 2px 2px #00000080;
  301. }
  302. #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {color: #FFFFFF;}
  303.  
  304. #alert_container {
  305.   float: none;
  306.   padding: 0;
  307. }
  308.  
  309. /* Wish List */
  310.  
  311. #id_wishlist {
  312.   width: 376px;
  313.   height: 38px;
  314.   text-align: center;
  315.   top: 428px;
  316.   left: 635px;
  317.   scroll-snap-type: y mandatory;
  318. }
  319. .premium_sparkle {display: none;}
  320.  
  321. #id_wishlist .item {
  322.   background: #FFFFFF40;
  323.   width: 30px;
  324.   height: 30px;
  325.   padding: 4px;
  326.   margin: 0 8px 0 0;
  327.   position: relative;
  328.   border-radius: 10px;
  329.   overflow: hidden;
  330.   transition: all .5s ease-in-out;
  331.   scroll-snap-align: start;
  332. }
  333. #id_wishlist .item:hover {background: #FFFFFF;}
  334. #id_wishlist .item:nth-of-type(8n) {margin-right: 0;}
  335. #id_wishlist .item:nth-of-type(n+9) {margin-top: 8px;}
  336.  
  337. #id_wishlist .item a {
  338.   width: 100%;
  339.   height: 100%;
  340.   position: absolute;
  341.   padding-top: 4px;
  342.   top: 0;
  343.   left: 0;
  344. }
  345.  
  346. .owner_checkmark {
  347.   margin: 0;
  348.   bottom: 4px;
  349.   left: 4px;
  350. }
  351.  
  352. /* Media */
  353.  
  354. .media_panel {
  355.   background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat #00000080;
  356.   width: 40px;
  357.   height: 40px !important;
  358.   top: 625px;
  359.   left: 946px;
  360.   border: 1px dashed #FFFFFF80;
  361.   border-radius: 50%;
  362.   box-shadow: 0 0 0 2px #00000080, 4px 4px 0 2px #0000005A;
  363. }
  364.  
  365. .media_panel iframe {
  366.   width: 200px;
  367.   height: 200px;
  368.   position: absolute;
  369.   bottom: 0;
  370.   left: -12px;
  371.   transform-origin: bottom left;
  372.   transform: scale(1.1);
  373.   opacity: .001;
  374. }
  375.  
  376. /* Snow Animation */
  377.  
  378. @keyframes FallSnow {
  379.   from {background-position: 0 0, 0 0;}
  380.   to {background-position: -500px 2000px, 500px 2000px;}
  381. }
  382.  
  383. .custom_panel ul {margin: 0 !important;}
  384. .custom_panel br {display: none;}
  385. .custom_panel * {position: absolute;}
  386.  
  387. .custom_panel li:nth-of-type(1), .custom_panel i, .custom_panel .clear {
  388.   width: 858px;
  389.   height: 510px;
  390.   top: 0;
  391. }
  392. .custom_panel li:nth-of-type(1), .custom_panel .clear {left: 381px;}
  393.  
  394. .custom_panel li:nth-of-type(1) {
  395.  -webkit-mask: linear-gradient(to bottom, #000, #0000);
  396.   mask: linear-gradient(to bottom, #000, #0000);
  397. }
  398.  
  399. .custom_panel i {
  400.   left: 1px;
  401.   animation: FallSnow 50s linear infinite;
  402. }
  403.  
  404. .custom_panel i:nth-of-type(1) {
  405.   background: url('https://i.imgur.com/ETrG7YK.png') 0 0 / 250px auto, url('https://i.imgur.com/JsxDJBy.png') 0 0 / 250px auto;
  406.   animation-duration: 50s;
  407. }
  408.  
  409. .custom_panel i:nth-of-type(2) {
  410.   background: url('https://i.imgur.com/hiymLjO.png') 0 0 / 250px auto, url('https://i.imgur.com/MRo92zN.png') 0 0 / 250px auto;
  411.   animation-duration: 40s;
  412. }
  413.  
  414. .custom_panel i:nth-of-type(3) {
  415.   background: url('https://i.imgur.com/yeYZHj7.png') 0 0 / 500px auto, url('https://i.imgur.com/S93KRrp.png') 0 0 / 500px auto;
  416.   animation-duration: 30s;
  417. }
  418.  
  419. /* Picture Carousel */
  420.  
  421. @keyframes ImageOpacity {
  422.   0% {opacity: 0;}
  423.   100% {opacity: 1;}
  424. }
  425.  
  426. @keyframes SwitchImage {
  427.   0% {background-position-y: 0;}
  428.   33.3332% {background-position-y: 0;}
  429.   33.3333% {background-position-y: -200px;}
  430.   66.6665% {background-position-y: -200px;}
  431.   66.6666% {background-position-y: -400px;}
  432.   100% {background-position-y: -400px;}
  433. }
  434.  
  435. .custom_panel li:nth-of-type(2) {
  436.   width: 300px;
  437.   height: 200px;
  438.   top: 983px;
  439.   left: 458px;
  440. }
  441.  
  442. .custom_panel b {
  443.   background: url('https://i.imgur.com/CtPPKp2.jpg');
  444.   width: 90px;
  445.   height: 100%;
  446.   top: 0;
  447.   animation: ImageOpacity 3s ease-in-out infinite alternate, SwitchImage 18s linear infinite;
  448. }
  449.  
  450. .custom_panel b:nth-of-type(1) {
  451.   background-position-x: 0;
  452.   left: 0;
  453. }
  454.  
  455. .custom_panel b:nth-of-type(2) {
  456.   background-position-x: -90px;
  457.   left: 100px;
  458.   animation-delay: 1s, 1s;
  459. }
  460.  
  461. .custom_panel b:nth-of-type(3) {
  462.   background-position-x: -180px;
  463.   left: 200px;
  464.   animation-delay: 2s, 2s;
  465. }
  466.  
  467. /* Misc */
  468.  
  469. #pictures_container, #texts_container {
  470.   width: 0;
  471.   height: 0;
  472.   position: absolute;
  473.   top: 0;
  474.   left: 50%;
  475.   overflow: visible;
  476. }
  477.  
  478. #equipped-item-details_mask:nth-of-type(2), #avatar_menu + div + div {display: none !important;}
  479. #id_aquarium {display: none;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement