althindor

Pro for Pretty Twink

Jan 13th, 2021 (edited)
134
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Layout by Mule of CD-ARIAx3 */
  2. /* + Profile Code by AlthIndor */
  3.  
  4. html, body {
  5.   background: url('https://i.imgur.com/W5z426b.jpg') center / cover;
  6.   min-height: 980px;
  7. }
  8.  
  9. body a {
  10.   text-decoration: none !important;
  11.   transition: background-color .5s ease-in-out, color .5s ease-in-out;
  12. }
  13.  
  14. #panel-details, #panel-details .hd, #columns, #columns::before, #column_2, #id_contact a, .custom_panel b::before {background: url('https://images2.imgbox.com/ac/86/FcFMT1mR_o.png');}
  15. #panel-details, #panel-details .hd, #columns::before, #id_contact a, .custom_panel b::before {background-position-y: -980px;}
  16. #panel-details {background-position-x: -435px;}
  17. #panel-details .hd {background-position-x: -975px;}
  18. #column_2 {background-position-x: -1200px;}
  19.  
  20. /* Fonts */
  21.  
  22. @font-face {
  23.   font-family: 'PT Serif';
  24.   font-style: normal;
  25.   font-weight: 400;
  26.   src: local('PT Serif'), local('PTSerif-Regular'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRVQgYoZZY2vCFuvAFWzr8.woff2) format('woff2');
  27. }
  28.  
  29. @font-face {
  30.   font-family: 'PT Serif';
  31.   font-style: normal;
  32.   font-weight: 700;
  33.   src: local('PT Serif Bold'), local('PTSerif-Bold'), url(https://fonts.gstatic.com/s/ptserif/v11/EJRSQgYoZZY2vCFuvAnt66qSVys.woff2) format('woff2');
  34. }
  35.  
  36. @font-face {
  37.   font-family: 'Montserrat';
  38.   font-style: normal;
  39.   font-weight: 400;
  40.   src: local('Montserrat Regular'), local('Montserrat-Regular'), url(https://fonts.gstatic.com/s/montserrat/v14/JTUSjIg1_i6t8kCHKm459Wlhyw.woff2) format('woff2');
  41. }
  42.  
  43. @font-face {
  44.   font-family: 'Montserrat';
  45.   font-style: normal;
  46.   font-weight: 700;
  47.   src: local('Montserrat Bold'), local('Montserrat-Bold'), url(https://fonts.gstatic.com/s/montserrat/v14/JTURjIg1_i6t8kCHKm45_dJE3gnD_g.woff2) format('woff2');
  48. }
  49.  
  50. /* Header */
  51.  
  52. #viewer #gaia_header {
  53.   background: repeating-linear-gradient(-45deg, #FFF4 0px, #FFF4 1px, #0000 2px, #0000 5px, #FFF4 6px) #c88756;
  54.   background-blend-mode: overlay, normal;
  55.   height: 20px !important;
  56.   border-bottom: 2px solid #FFFFFF;
  57.   filter: drop-shadow(0 0 3px #402000);
  58. }
  59. #gaia_header li.spacer {display: none !important;}
  60. #gaia_header li {margin: 0 4px;}
  61.  
  62. #gaia_header #header_left, #gaia_header #header_right {
  63.   background: none;
  64.   font: 700 0/42px 'Montserrat', sans-serif !important;
  65.   padding: 0 4px !important;
  66.   box-sizing: border-box;
  67. }
  68. #gaia_header #header_right {float: right;}
  69.  
  70. #gaia_header img {
  71.   background: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 3px;
  72.   width: 0;
  73.   padding: 0px 34px 0 0;
  74.   filter: invert(100%);
  75.   transition: filter .5s ease-in-out;
  76. }
  77. #header_left li:nth-of-type(2) a:hover img {filter: invert(0%);}
  78.  
  79. #gaia_header a {
  80.   background: #402C1C;
  81.   color: #FFFFFF !important;
  82.   font-size: 11px !important;
  83.   letter-spacing: .1em;
  84.   text-transform: uppercase;
  85.   padding: 3px 6px 3px calc(6px + .1em);
  86.   border: 2px solid #FFFFFF;
  87.   border-radius: 5px;
  88. }
  89.  
  90. #gaia_header a:hover {
  91.   background: #FFFFFF;
  92.   color: #000 !important;
  93. }
  94.  
  95. /* Columns */
  96.  
  97. #panel-details, #columns, #columns .column {position: absolute;}
  98. #columns {left: calc(50% - 600px);}
  99. #column_2 {pointer-events: none;}
  100. #column_3 {overflow: visible;}
  101.  
  102. #panel-details {
  103.   width: 530px;
  104.   height: 196px;
  105.   top: 268px;
  106.   left: calc(50% - 600px + 322px);
  107.   transform: translateZ(0);
  108. }
  109.  
  110. #columns, #columns .column {
  111.   float: none;
  112.   width: 1200px;
  113.   top: 0;
  114.   margin: 0;
  115. }
  116. #columns, #column_1, #column_2 {height: 980px;}
  117.  
  118. /* Scrollbars */
  119.  
  120. #columns ::-webkit-scrollbar {
  121.   background: #20100040;
  122.   width: 0;
  123.   height: 6px;
  124. }
  125. #columns ::-webkit-scrollbar-thumb {background: #FFF;}
  126.  
  127. #id_wishlist {
  128.   scrollbar-color: #FFF #20100040;
  129.   scrollbar-width: thin;
  130. }
  131. #id_about ol, #id_comments dl {scrollbar-width: none;}
  132.  
  133. /* Panels */
  134.  
  135. .panel {
  136.   background: none;
  137.   font: 10px/1.65 'PT Serif', serif;
  138.   text-align: center;
  139.   padding: 0;
  140.   margin: 0;
  141.   position: absolute;
  142. }
  143. .panel h2 {display: none;}
  144.  
  145. .panel a {color: saddlebrown;}
  146. .panel a:hover {color: #005488;}
  147.  
  148. .panel, #id_about ol, #id_comments dl {box-sizing: border-box;}
  149. #id_about ol, #id_comments dl, #id_wishlist {overflow: hidden;}
  150. #id_about img, #id_comments .postcontent img {max-width: 100%;}
  151.  
  152. #id_about h2 ~ ol:last-of-type, #id_comments dl {
  153.  -webkit-backdrop-filter: blur(10px);
  154.   backdrop-filter: blur(10px);
  155.   width: 100%;
  156.   height: 100%;
  157.   border: 10px solid transparent;
  158.   box-shadow: 0 0 2px #000;
  159.   opacity: .001;
  160.   overflow-y: scroll;
  161.   transition: opacity .5s ease-in-out;
  162. }
  163. #id_about h2 ~ ol:last-of-type:hover, #id_comments dl:hover {opacity: 1;}
  164.  
  165. /* Details */
  166.  
  167. #id_details {
  168.   top: 426px;
  169.   right: 42px;
  170.   filter: drop-shadow(0 0 5px #FFF);
  171. }
  172. #id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}
  173. #id_details p {margin: 0;}
  174.  
  175. /* Contact */
  176.  
  177. #id_contact {
  178.   width: 79px;
  179.   height: 266px;
  180.   top: 564px;
  181.   left: 208px;
  182. }
  183. #id_contact span, #id_contact li:nth-of-type(3) {display: none;}
  184. #id_contact li::before, #id_contact a {position: absolute;}
  185.  
  186. #id_contact li::before {
  187.   width: max-content;
  188.   color: #FFFFFF;
  189.   font: 400 8px/1 'Montserrat', sans-serif;
  190.   letter-spacing: .2em;
  191.   text-shadow: 1px 1px 1px #000;
  192. }
  193.  
  194. #id_contact a {
  195.   font-size: 0;
  196.   filter: drop-shadow(0 0 5px #FFF);
  197.   opacity: .001;
  198.   transition: opacity .5s ease-in-out;
  199. }
  200. #id_contact a:hover {opacity: 1;}
  201.  
  202. #id_contact li:nth-of-type(1) a {
  203.   background-position-x: -1515px;
  204.   width: 46px;
  205.   height: 62px;
  206.   bottom: 0;
  207.   right: 0;
  208. }
  209.  
  210. #id_contact li:nth-of-type(1)::before {
  211.   content: 'LET’S BE FRIENDS?';
  212.   bottom: -15px;
  213.   right: -40px;
  214. }
  215.  
  216. #id_contact li:nth-of-type(2) a {
  217.   background-position-x: -1570px;
  218.   width: 50px;
  219.   height: 39px;
  220.   top: 0;
  221.   left: 0;
  222. }
  223.  
  224. #id_contact li:nth-of-type(2)::before {
  225.   content: 'SEND ME A NOTE?';
  226.   top: -15px;
  227.   left: -22px;
  228. }
  229.  
  230. /* About and Comments Links */
  231.  
  232. #id_about ol:first-of-type a, #id_comments h2 + div a::after, #id_comments h2 ~ p a::after {font: 700 8px/1 'Montserrat', sans-serif;}
  233.  
  234. #id_about ol:first-of-type a, #id_comments h2 + div a, #id_comments h2 ~ p a {
  235.   background: #FCEADAD0;
  236.   color: #605040;
  237.   text-transform: uppercase;
  238.   padding: 5px 8px;
  239.   border-radius: 5px;
  240.   box-shadow: 0 2px 1px #0008;
  241.   transition: all .5s ease-in-out;
  242. }
  243.  
  244. #id_about ol:first-of-type a:hover, #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {
  245.   background: #FFFFFF;
  246.   color: indianred;
  247. }
  248.  
  249. #id_comments h2 + div a, #id_comments h2 ~ p a {
  250.   width: 38%;
  251.   font-size: 0;
  252.   position: absolute;
  253.   bottom: -30px;
  254. }
  255. #id_comments h2 + div a {left: 0;}
  256. #id_comments h2 ~ p a {right: 0;}
  257.  
  258. #id_comments h2 + div a::after {content: 'Post New';}
  259. #id_comments h2 ~ p a::after {content: 'View All';}
  260.  
  261. /* About Me */
  262.  
  263. #id_about {
  264.   width: 228px;
  265.   height: 301px;
  266.   top: 507px;
  267.   right: 204px;
  268.   transform: rotate(-3.2deg);
  269. }
  270. #id_about h2 ~ br {display: none;}
  271.  
  272. #id_about h2 ~ ol:first-of-type {
  273.   display: flex;
  274.   flex-flow: row nowrap;
  275.   justify-content: space-between;
  276.   width: 100%;
  277.   position: absolute;
  278.   top: -70px;
  279.   overflow: visible;
  280. }
  281. #id_about h2 ~ ol:first-of-type br {display: none;}
  282.  
  283. #id_about h2 ~ ol:last-of-type {
  284.   background: #FFFFFF30;
  285.   border-width: 11px 10px;
  286. }
  287.  
  288. /* Comments */
  289.  
  290. #id_comments {
  291.   width: 178px;
  292.   height: 259px;
  293.   top: 537px;
  294.   left: 482px;
  295.   transform: rotate(4deg);
  296. }
  297.  
  298. #id_comments #alerts_banner, #id_comments .dropBox, #id_comments dl + div {display: none;}
  299. #id_comments #alert_container {padding: 0;}
  300. #id_comments h2 ~ p, #id_comments dd:last-of-type {margin: 0;}
  301. #id_comments dd {margin: 0 0 20px 0;}
  302.  
  303. #id_comments dt {
  304.   height: auto;
  305.   line-height: inherit;
  306.   text-align: inherit;
  307.   padding: 0 0 4px 0;
  308.   margin: 0 0 2px 0;
  309.   border-bottom: 1px dotted sienna;
  310. }
  311. #id_comments .username {float: none;}
  312.  
  313. /* Wish List */
  314.  
  315. #id_wishlist {
  316.   display: grid;
  317.   grid-auto-flow: column dense;
  318.   grid-template-rows: 40px 40px;
  319.   gap: 10px;
  320.   width: 90px;
  321.   height: 108px;
  322.   top: 470px;
  323.   left: 310px;
  324.   overflow-x: scroll;
  325.   scroll-snap-type: x mandatory;
  326. }
  327. #id_wishlist .clear, .premium_sparkle {display: none;}
  328.  
  329. .owner_checkmark {
  330.   margin: 0;
  331.   bottom: 5px;
  332.   left: 5px;
  333.   mix-blend-mode: multiply;
  334. }
  335.  
  336. #id_wishlist .item {
  337.  -webkit-backdrop-filter: blur(3px);
  338.   backdrop-filter: blur(3px);
  339.   background: #60A0B8C0;
  340.   width: 30px;
  341.   height: 30px;
  342.   padding: 5px;
  343.   position: relative;
  344.   border-radius: 5px;
  345.   transition: background .5s ease-in-out;
  346.   scroll-snap-align: start;
  347. }
  348. #id_wishlist .item:hover {background: #FFFFFF;}
  349.  
  350. /* Media */
  351.  
  352. .media_panel {
  353.   background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat;
  354.   width: 30px;
  355.   height: 30px !important;
  356.   top: 349px;
  357.   left: 499px;
  358.   filter: invert(80%);
  359.   mix-blend-mode: color-burn;
  360.   overflow: hidden;
  361. }
  362.  
  363. .media_panel iframe {
  364.   width: 300px;
  365.   height: 200px;
  366.   position: absolute;
  367.   bottom: -2px;
  368.   left: -14px;
  369.   opacity: .001;
  370. }
  371.  
  372. /* Misc */
  373.  
  374. #pictures_container, #texts_container {
  375.  width: 1px;
  376.  height: 1px;
  377.  position: absolute;
  378.  top: 0;
  379.  left: 50%;
  380.  overflow: visible;
  381. }
  382. #equipped-item-details_mask:nth-of-type(2), #avatar_menu + div + div {display: none !important;}
  383. #id_aquarium {display: none;}
  384.  
  385. /* Floating Art Animation */
  386.  
  387. @keyframes FloatArt {
  388.   from {transform: translateY(-5px);}
  389.   to {transform: translateY(15px);}
  390. }
  391.  
  392. #columns::before {
  393.   content: '';
  394.   width: 425px;
  395.   height: 466px;
  396.   position: absolute;
  397.   top: 452px;
  398.   left: 47px;
  399.   animation: FloatArt 3s ease-in-out infinite alternate;
  400. }
  401.  
  402. /* Clouds Animation */
  403.  
  404. @keyframes MoveClouds {
  405.   from {background-position-x: 0;}
  406.   to {background-position-x: 2048px;}
  407. }
  408.  
  409. @keyframes BlinkStars {
  410.   from {background-position-x: -10px, 10px;}
  411.   to {background-position-x: 30px, 50px;}
  412. }
  413.  
  414. #panel-details div, #panel-details h2 {
  415.   width: 100%;
  416.   height: 100%;
  417.   position: absolute;
  418.   top: 0;
  419. }
  420.  
  421. #panel-details .bd {
  422.   background: url('https://images2.imgbox.com/f0/87/9ItiEDTn_o.png') left center / 2048px auto;
  423.   opacity: .2;
  424.   animation: MoveClouds 150s linear infinite;
  425.   z-index: 1;
  426. }
  427.  
  428. #panel-details .hd {
  429.   mix-blend-mode: color-dodge;
  430.   z-index: 2;
  431. }
  432.  
  433. #panel-details .hd h2 {
  434.   background: radial-gradient(circle at center, #000 8px, #0000 16px), radial-gradient(circle at center, #000 8px, #0000 16px);
  435.   background-size: 40px 40px, 40px 40px;
  436.   background-position: -10px -10px, 10px 10px;
  437.   animation: BlinkStars 3s linear infinite;
  438. }
  439.  
  440. /* Starshine Glitter */
  441.  
  442. @keyframes ScaleStars {
  443.   from {transform: scale(1); opacity: 1;}
  444.   to {transform: scale(0); opacity: 0;}
  445. }
  446.  
  447. @keyframes SpinStars {
  448.   from {transform: rotate(0turn);}
  449.   to {transform: rotate(1turn);}
  450. }
  451.  
  452. .custom_panel {
  453.   width: 280px;
  454.   height: 200px !important;
  455.   top: 260px;
  456.   left: 150px;
  457.   filter: drop-shadow(0 0 5px cadetblue);
  458.   mix-blend-mode: hard-light;
  459. }
  460.  
  461. .custom_panel b, .custom_panel b::before {position: absolute;}
  462. .custom_panel b {animation: ScaleStars 3s ease-in-out infinite alternate;}
  463.  
  464. .custom_panel b:nth-of-type(3n-2) {
  465.   background-position-x: -1630px;
  466.   width: 30px;
  467.   height: 30px;
  468. }
  469.  
  470. .custom_panel b:nth-of-type(3n-1) {
  471.   background-position-x: -1670px;
  472.   width: 20px;
  473.   height: 20px;
  474. }
  475.  
  476. .custom_panel b:nth-of-type(3n-0) {
  477.   background-position-x: -1700px;
  478.   width: 10px;
  479.   height: 10px;
  480. }
  481.  
  482. .custom_panel b::before {
  483.   content: '';
  484.   background-position-x: inherit;
  485.   width: 100%;
  486.   height: 100%;
  487.   left: 0;
  488.   animation: SpinStars 2s linear infinite;
  489.   animation-delay: inherit;
  490. }
  491.  
  492. .custom_panel b:nth-of-type(01) {top: 015px; left: 155px; animation-delay: -0.8s;}
  493. .custom_panel b:nth-of-type(02) {top: 009px; left: 057px; animation-delay: -0.1s;}
  494. .custom_panel b:nth-of-type(03) {top: 029px; left: 210px; animation-delay: -0.4s;}
  495. .custom_panel b:nth-of-type(04) {top: 122px; left: 014px; animation-delay: -2.1s;}
  496. .custom_panel b:nth-of-type(05) {top: 052px; left: 228px; animation-delay: -1.5s;}
  497. .custom_panel b:nth-of-type(06) {top: 169px; left: 217px; animation-delay: -0.5s;}
  498. .custom_panel b:nth-of-type(07) {top: 106px; left: 153px; animation-delay: -0.1s;}
  499. .custom_panel b:nth-of-type(08) {top: 147px; left: 099px; animation-delay: -0.5s;}
  500. .custom_panel b:nth-of-type(09) {top: 032px; left: 125px; animation-delay: -0.8s;}
  501. .custom_panel b:nth-of-type(10) {top: 087px; left: 163px; animation-delay: -2.4s;}
  502. .custom_panel b:nth-of-type(11) {top: 058px; left: 148px; animation-delay: -0.0s;}
  503. .custom_panel b:nth-of-type(12) {top: 006px; left: 084px; animation-delay: -2.7s;}
  504. .custom_panel b:nth-of-type(13) {top: 152px; left: 007px; animation-delay: -2.4s;}
  505. .custom_panel b:nth-of-type(14) {top: 087px; left: 244px; animation-delay: -0.2s;}
  506. .custom_panel b:nth-of-type(15) {top: 144px; left: 158px; animation-delay: -2.0s;}
RAW Paste Data