Advertisement
althindor

Pro for StarryCelestial

Mar 21st, 2022
1,098
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.88 KB | None | 0 0
  1. /* Profile by AlthIndor */
  2.  
  3. :root {
  4.   --color-panelbg: #FEFEFE;
  5.   --color-primary: #746458;
  6.   --color-text: #404040;
  7.   --top-offset: 100px;
  8. }
  9.  
  10. html, body {
  11.   background: url('https://i.ibb.co/QppMycn/wallpaper.png') top center #F4F2F0;
  12.   height: unset;
  13.   min-height: 100vh;
  14. }
  15.  
  16. ::selection {
  17.   background: var(--color-primary);
  18.   color: #FFFFFF;
  19. }
  20.  
  21. #columns, #id_contact a {background: url('https://i.ibb.co/KjdCJ0f/Starry-Celestial-main.png') 0 0 no-repeat;}
  22. #id_contact a {background-position-x: -840px;}
  23.  
  24. /* Fonts */
  25.  
  26. @font-face {
  27.   font-family: 'Open Sans';
  28.   font-style: normal;
  29.   font-weight: 400;
  30.   src: local('Open Sans'), local('Open Sans Regular'), local('OpenSans-Regular'), url('https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2') format('woff2');
  31. }
  32.  
  33. @font-face {
  34.   font-family: 'Open Sans';
  35.   font-style: normal;
  36.   font-weight: 600;
  37.   src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url('https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhp.woff2') format('woff2');
  38. }
  39.  
  40. @font-face {
  41.   font-family: 'Open Sans';
  42.   font-style: normal;
  43.   font-weight: 700;
  44.   src: local('Open Sans Bold'), local('OpenSans-Bold'), url('https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2') format('woff2');
  45. }
  46.  
  47. /* Header */
  48.  
  49. #gaia_header, #gaia_header #header_left, #gaia_header #header_right {background: none;}
  50. #gaia_header li, #header_left::after {margin: 0 5px;}
  51. #gaia_header li.spacer {display: none !important;}
  52. #header_left::after {content: 'profile by althindor';}
  53.  
  54. #gaia_header #header_left, #gaia_header #header_right {
  55.   font-size: 0 !important;
  56.   padding: 0 5px !important;
  57.   box-sizing: border-box;
  58. }
  59. #gaia_header #header_right {float: right;}
  60.  
  61. #gaia_header img {
  62.  -webkit-mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  63.   mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  64.   background: var(--color-text);
  65.   width: 0 !important;
  66.   padding: 0 38px 0 0;
  67.   margin-right: -1px;
  68. }
  69.  
  70. #gaia_header a, #header_left::after {
  71.   color: var(--color-text) !important;
  72.   font: 600 11px/31px 'Open Sans', sans-serif !important;
  73.   text-transform: uppercase;
  74. }
  75.  
  76. #gaia_header a {
  77.   text-decoration: none;
  78.   text-underline-offset: 4px;
  79. }
  80. #gaia_header a:hover {text-decoration: 1px solid underline #808080;}
  81.  
  82. /* Columns */
  83.  
  84. #columns, #columns .column {
  85.   float: none;
  86.   display: flex;
  87. }
  88.  
  89. #columns {
  90.   gap: 16px;
  91.   justify-content: center;
  92.   width: 840px;
  93.   padding: 590px 0 20px 0;
  94.   top: var(--top-offset);
  95.   left: calc(50% - 420px);
  96.   contain: content;
  97. }
  98.  
  99. #columns .column {
  100.   flex-direction: column;
  101.   font-size: 0;
  102.   margin: 0;
  103.   overflow: visible;
  104. }
  105. #column_2 {width: 180px;}
  106. #column_3 {width: 420px;}
  107.  
  108. #column_1 {
  109.   width: 100%;
  110.   position: absolute;
  111.   top: 0;
  112.   left: 0;
  113. }
  114.  
  115. /* Scrollbars */
  116.  
  117. #columns ::-webkit-scrollbar {
  118.   background: #00000020;
  119.   width: 8px;
  120. }
  121. #columns ::-webkit-scrollbar-thumb {background: #808080;}
  122.  
  123. .panel {
  124.   scrollbar-color: #808080 #00000020;
  125.   scrollbar-width: thin;
  126. }
  127.  
  128. /* Panels */
  129.  
  130. .panel, .panel h2 {
  131.   background: none;
  132.   color: var(--color-text);
  133.   padding: 0;
  134.   margin: 0;
  135.   box-sizing: border-box;
  136. }
  137.  
  138. .panel {
  139.   font: 10px/1.6 'Open Sans', sans-serif;
  140.   text-align: justify;
  141. }
  142. #column_1 .panel {position: absolute;}
  143.  
  144. .panel a {
  145.   color: var(--color-primary);
  146.   text-underline-offset: 2px;
  147. }
  148.  
  149. #id_wishlist, #id_about, #id_footprints {padding: 15px;}
  150.  
  151. #id_wishlist, #id_about {padding-top: 0;}
  152. #id_wishlist {border-top: 55px solid transparent;}
  153. #id_about {border-top: 50px solid transparent;}
  154. #id_about img {max-width: 100%;}
  155.  
  156. #id_wishlist, #id_about {
  157.   background: linear-gradient(to bottom, transparent 40px, var(--color-panelbg) 40px) border-box;
  158.   box-shadow: 1px 1px #808080, -1px 1px #808080;
  159. }
  160.  
  161. #id_footprints {
  162.   background: var(--color-panelbg);
  163.   margin-top: 16px;
  164.   box-shadow: 0 0 0 1px #808080;
  165. }
  166.  
  167. /* Panel Headers */
  168.  
  169. .panel h2 {
  170.   height: 25px;
  171.   line-height: 10px;
  172.   margin-bottom: 10px;
  173.   border-bottom: 1px dashed #00000040;
  174. }
  175. #column_1 h2 {display: none;}
  176.  
  177. #id_wishlist h2, #id_footprints h2 {font-size: 14px;}
  178. #id_about h2 {font-size: 0;}
  179.  
  180. #id_wishlist h2, #id_about h2 {
  181.   position: fixed;
  182.   top: 605px;
  183. }
  184. #id_wishlist h2 {width: 150px;}
  185. #id_about h2 {width: 390px;}
  186.  
  187. #id_about h2::before, #id_about h2::after {
  188.   content: 'ABOUT ME';
  189.   font-size: 14px;
  190.   position: absolute;
  191.   left: 0;
  192. }
  193.  
  194. #id_about h2::before {
  195.   color: #FEFEFE;
  196.   -webkit-text-stroke: 4px #FFFFFF;
  197. }
  198.  
  199. /* Details */
  200.  
  201. #id_details {
  202.   top: 302px;
  203.   left: 120px;
  204. }
  205. #id_details p:nth-of-type(n+2), .forum_userstatus {display: none;}
  206.  
  207. /* Contact Buttons */
  208.  
  209. #id_contact {
  210.   top: 330px;
  211.   left: 596px;
  212. }
  213. #id_contact span {display: none;}
  214.  
  215. #id_contact :is(li, a) {
  216.   width: 130px;
  217.   height: 35px;
  218. }
  219. #id_contact li {margin-bottom: 8px;}
  220. #id_contact li:nth-of-type(1) a {background-position-y: 0;}
  221. #id_contact li:nth-of-type(2) a {background-position-y: -43px;}
  222. #id_contact li:nth-of-type(3) a {background-position-y: -86px;}
  223.  
  224. #id_contact a {
  225.   display: block;
  226.   font-size: 0;
  227.   opacity: 0;
  228. }
  229. #id_contact li:hover a {opacity: 1;}
  230.  
  231. /* Wish List */
  232.  
  233. #id_wishlist {
  234.   flex-basis: 0;
  235.   flex-grow: 1;
  236.   display: grid;
  237.   grid-template-columns: repeat(3, 1fr);
  238.   grid-auto-rows: 40px;
  239.   gap: 10px;
  240.   text-align: center;
  241.   overflow-y: auto;
  242. }
  243. #id_wishlist :is(.premium_sparkle, .clear) {display: none;}
  244.  
  245. #id_wishlist .item {
  246.   background: #00000010;
  247.   flex-grow: 1;
  248.   width: 100%;
  249.   height: 30px;
  250.   padding: 5px 0;
  251.   position: relative;
  252.   border-radius: 5px;
  253. }
  254. #id_wishlist .item:hover {background: none;}
  255.  
  256. .owner_checkmark {
  257.   margin: 0;
  258.   bottom: 5px;
  259.   left: 5px;
  260. }
  261.  
  262. /* Visitors */
  263.  
  264. #id_footprints .item {
  265.   display: grid;
  266.   grid-auto-flow: column;
  267.   justify-content: start;
  268. }
  269.  
  270. #id_footprints .item::before {
  271.   content: ' visited ';
  272.   grid-column: 2;
  273.   white-space: pre;
  274. }
  275. #id_footprints .item::after {content: '.';}
  276.  
  277. /* Animated Stars */
  278.  
  279. .custom_panel, .custom_panel * {
  280.   width: 100%;
  281.   height: 440px;
  282. }
  283.  
  284. .custom_panel {pointer-events: none;}
  285. .custom_panel .clear {display: none;}
  286.  
  287. @keyframes BlinkStars {
  288.   from {opacity: 0;}
  289.   to {opacity: 1;}
  290. }
  291.  
  292. .custom_panel b {
  293.   background: url('https://i.ibb.co/FKk9S6K/Starry-Celestial-stars.png');
  294.   position: absolute;
  295.   top: 0;
  296.   left: 0;
  297.   animation: BlinkStars 2s ease-in-out infinite alternate both;
  298. }
  299.  
  300. .custom_panel b:nth-of-type(01) {clip-path: inset(057px 645px 359px 175px); animation-duration: 1.3s; animation-delay: 0.4s;}
  301. .custom_panel b:nth-of-type(02) {clip-path: inset(053px 516px 364px 304px); animation-duration: 1.0s; animation-delay: 0.4s;}
  302. .custom_panel b:nth-of-type(03) {clip-path: inset(042px 191px 352px 608px); animation-duration: 2.7s; animation-delay: 0.5s;}
  303. .custom_panel b:nth-of-type(04) {clip-path: inset(083px 652px 337px 169px); animation-duration: 2.8s; animation-delay: 1.8s;}
  304. .custom_panel b:nth-of-type(05) {clip-path: inset(080px 130px 337px 690px); animation-duration: 1.9s; animation-delay: 1.5s;}
  305. .custom_panel b:nth-of-type(06) {clip-path: inset(100px 454px 294px 346px); animation-duration: 2.3s; animation-delay: 2.1s;}
  306. .custom_panel b:nth-of-type(07) {clip-path: inset(109px 134px 308px 686px); animation-duration: 2.6s; animation-delay: 0.2s;}
  307. .custom_panel b:nth-of-type(08) {clip-path: inset(162px 400px 257px 422px); animation-duration: 1.3s; animation-delay: 0.1s;}
  308. .custom_panel b:nth-of-type(09) {clip-path: inset(191px 579px 226px 240px); animation-duration: 1.1s; animation-delay: 0.4s;}
  309. .custom_panel b:nth-of-type(10) {clip-path: inset(188px 268px 224px 547px); animation-duration: 2.5s; animation-delay: 2.4s;}
  310. .custom_panel b:nth-of-type(11) {clip-path: inset(201px 724px 208px 085px); animation-duration: 1.3s; animation-delay: 0.1s;}
  311. .custom_panel b:nth-of-type(12) {clip-path: inset(210px 543px 193px 262px); animation-duration: 1.0s; animation-delay: 0.6s;}
  312. .custom_panel b:nth-of-type(13) {clip-path: inset(232px 388px 162px 412px); animation-duration: 1.4s; animation-delay: 0.8s;}
  313. .custom_panel b:nth-of-type(14) {clip-path: inset(234px 317px 168px 488px); animation-duration: 1.8s; animation-delay: 1.3s;}
  314. .custom_panel b:nth-of-type(15) {clip-path: inset(247px 531px 166px 284px); animation-duration: 2.2s; animation-delay: 0.1s;}
  315. .custom_panel b:nth-of-type(16) {clip-path: inset(255px 433px 163px 387px); animation-duration: 3.0s; animation-delay: 0.3s;}
  316. .custom_panel b:nth-of-type(17) {clip-path: inset(266px 163px 137px 643px); animation-duration: 2.0s; animation-delay: 0.0s;}
  317. .custom_panel b:nth-of-type(18) {clip-path: inset(285px 475px 132px 343px); animation-duration: 1.3s; animation-delay: 1.0s;}
  318. .custom_panel b:nth-of-type(19) {clip-path: inset(295px 414px 125px 408px); animation-duration: 1.2s; animation-delay: 0.6s;}
  319. .custom_panel b:nth-of-type(20) {clip-path: inset(315px 361px 096px 453px); animation-duration: 2.0s; animation-delay: 0.9s;}
  320. .custom_panel b:nth-of-type(21) {clip-path: inset(340px 096px 077px 725px); animation-duration: 1.4s; animation-delay: 0.0s;}
  321. .custom_panel b:nth-of-type(22) {clip-path: inset(354px 646px 066px 176px); animation-duration: 2.2s; animation-delay: 0.5s;}
  322. .custom_panel b:nth-of-type(23) {clip-path: inset(366px 608px 052px 215px); animation-duration: 2.4s; animation-delay: 2.3s;}
  323. .custom_panel b:nth-of-type(24) {clip-path: inset(379px 454px 034px 351px); animation-duration: 2.7s; animation-delay: 1.7s;}
  324. .custom_panel b:nth-of-type(25) {clip-path: inset(379px 420px 041px 402px); animation-duration: 2.7s; animation-delay: 1.4s;}
  325. .custom_panel b:nth-of-type(26) {clip-path: inset(410px 265px 009px 557px); animation-duration: 1.7s; animation-delay: 1.1s;}
  326.  
  327. /* Misc */
  328.  
  329. #pictures_container, #texts_container {
  330.   width: 0;
  331.   height: 0;
  332.   position: absolute;
  333.   top: var(--top-offset);
  334.   left: 50%;
  335. }
  336.  
  337. #equipped-item-details_mask ~ #equipped-item-details_mask, #avatar_menu + div + div {display: none !important;}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement