althindor

Pro for Xygnus

Jun 15th, 2021 (edited)
487
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.39 KB | None | 0 0
  1. /* Profile By AlthIndor */
  2.  
  3. :root {
  4.   --color-primary: #00C0FF;
  5.   --color-secndry: #FFFFFF;
  6.   --star-size1: 11px;
  7.   --star-size2: 9px;
  8.   --star-size3: 7px;
  9.   --top-offset: 30vh;
  10. }
  11.  
  12. html, body {overflow: hidden;}
  13.  
  14. body a {
  15.   text-decoration: none !important;
  16.   transition: color .5s ease-in-out;
  17. }
  18.  
  19. ::selection {
  20.   background: var(--color-primary);
  21.   color: var(--color-secndry);
  22. }
  23.  
  24. /* Animated Wallpaper */
  25.  
  26. @keyframes Twinkle {
  27.   from {background-position-x: center, center, 0, 0, 0, 0, center, 0, center;}
  28.   to {background-position-x: center, center, 0, 0, 40px, 40px, center, 0, center;}
  29. }
  30.  
  31. html {
  32.   background:
  33.     url('https://images2.imgbox.com/80/a3/DeXlzZk1_o.png') center bottom fixed repeat-x,
  34.     url('https://images2.imgbox.com/9d/bc/4eYvFW8G_o.png') center / auto 100% fixed no-repeat,
  35.     linear-gradient(to bottom, #00284C00, #00284CFF),
  36.     linear-gradient(to bottom, #00000000, #0080FF80),
  37.     radial-gradient(circle at 33% 33%, #000000FF 20%, #00000000 40%) 0 20px / 40px 40px,
  38.     radial-gradient(circle at 66% 66%, #000000FF 20%, #00000000 40%) 0 20px / 40px 40px,
  39.     url('https://images2.imgbox.com/b9/28/TfW4Z4gg_o.png') center fixed,
  40.     linear-gradient(to bottom, #00000080, #000000D0),
  41.     url('https://images2.imgbox.com/56/5b/WnMC5efr_o.png') center fixed #000;
  42.   background-blend-mode: normal, normal, screen, color, normal, normal, normal, normal, normal;
  43.   animation: Twinkle 3s linear infinite;
  44. }
  45. body {background: none;}
  46.  
  47. /* Fonts */
  48.  
  49. @font-face {
  50.   font-family: 'Open Sans';
  51.   font-style: normal;
  52.   font-weight: 400;
  53.   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  54. }
  55.  
  56. @font-face {
  57.   font-family: 'Open Sans';
  58.   font-style: normal;
  59.   font-weight: 600;
  60.   src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UNirkOUuhp.woff2) format('woff2');
  61. }
  62.  
  63. @font-face {
  64.   font-family: 'Open Sans';
  65.   font-style: normal;
  66.   font-weight: 700;
  67.   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  68. }
  69.  
  70. @font-face {
  71.   font-family: 'Font Awesome 5 Free';
  72.   font-style: normal;
  73.   font-weight: 900;
  74.   font-display: block;
  75.   src: url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-solid-900.woff2') format('woff2'), url('https://ka-f.fontawesome.com/releases/v5.15.2/webfonts/free-fa-solid-900.woff') format('woff');
  76. }
  77.  
  78. /* Header */
  79.  
  80. #gaia_header, #header_left, #header_right {box-sizing: border-box;}
  81. #gaia_header li.spacer {display: none !important;}
  82. #gaia_header li {margin: 0 5px;}
  83.  
  84. #viewer #gaia_header {
  85.   background: #00284CC0;
  86.   height: 32px !important;
  87.   box-shadow: 0 2px 3px #000;
  88.   backdrop-filter: blur(2px);
  89. }
  90.  
  91. #gaia_header #header_left, #gaia_header #header_right {
  92.   background: none !important;
  93.   font: 700 0/32px 'Open Sans', sans-serif !important;
  94.   padding: 0 5px !important;
  95. }
  96. #gaia_header #header_right {float: right;}
  97.  
  98. #gaia_header img {
  99.   background: url('https://i.imgur.com/cGGVY2x.png') no-repeat 0 4px;
  100.   width: 0;
  101.   padding: 0 34px 0 0;
  102.   filter: invert(100%);
  103. }
  104.  
  105. #gaia_header a {
  106.   color: #FFFFFF !important;
  107.   font-size: 10px !important;
  108.   text-transform: uppercase;
  109. }
  110.  
  111. #header_right a[href*='edit'], #header_right a[href*='report'] {font-size: 0 !important;}
  112. #header_right a[href*='edit']::before, #header_right a[href*='report']::before {font-size: 10px;}
  113. #header_right a[href*='edit']::before {content: 'Edit My Profile';}
  114. #header_right a[href*='report']::before {content: 'Report Profile';}
  115.  
  116. /* Columns */
  117.  
  118. #columns, #columns .column {
  119.   float: unset;
  120.   overflow: visible;
  121. }
  122.  
  123. #columns .column {
  124.   display: block;
  125.   font-size: 0;
  126.   margin: 0;
  127.   position: absolute;
  128. }
  129.  
  130. #columns {
  131.   width: 40vh;
  132.   height: 40vh;
  133.   top: var(--top-offset);
  134.   left: calc(50% - 20vh);
  135.   transform: translateZ(0);
  136. }
  137.  
  138. #column_1, #column_2 {
  139.   width: 100%;
  140.   height: 100%;
  141.   top: 0;
  142.   left: 0;
  143. }
  144.  
  145. #column_3 {
  146.   width: 0;
  147.   height: 0;
  148.   right: calc(62.75%);
  149.   bottom: calc(66.25%);
  150.   border-radius: 10px;
  151. }
  152.  
  153. #column_3:hover {
  154.   width: 228px;
  155.   height: 140px;
  156. }
  157.  
  158. /* Constellation Lines */
  159.  
  160. #column_1 {
  161.   background: #FFFFFF;
  162.   clip-path: polygon(
  163.     calc(37.25% + 0.85px) calc(33.75% - 0.85px),
  164.     calc(49.75%) calc(53.5% - 1.5px),
  165.     calc(75.25% - 0.88px) calc(34.25% - 0.88px),
  166.     calc(81.75% - 0.92px) calc(8% - 0.92px),
  167.     calc(88% - 0.77px) calc(.5% - 0.77px),
  168.     calc(88% + 0.77px) calc(.5% + 0.77px),
  169.     calc(81.75% + 0.92px) calc(8% + 0.92px),
  170.     calc(75.25% + 0.88px) calc(34.25% + 0.88px),
  171.     calc(49.75% + 2px) calc(53.5% + .5px),
  172.     calc(69.75% + 0.73px) calc(73.25% - 0.73px),
  173.     calc(92.5% + 0.75px) calc(98.5% - 0.75px),
  174.     calc(92.5% - 0.75px) calc(98.5% + 0.75px),
  175.     calc(69.75% - 0.73px) calc(73.25% + 0.73px),
  176.     calc(49.75%) calc(53.5% + 2px),
  177.     calc(30.5% + 0.64px) calc(77% + 0.64px),
  178.     calc(7.25% + 0.45px) calc(88.75% + 0.45px),
  179.     calc(7.25% - 0.45px) calc(88.75% - 0.45px),
  180.     calc(30.5% - 0.64px) calc(77% - 0.64px),
  181.     calc(49.75% - 2px) calc(53.5%),
  182.     calc(37.25% - 0.85px) calc(33.75% + 0.85px)
  183.   );
  184.   opacity: 0.08;
  185. }
  186.  
  187. /* Scrollbars */
  188.  
  189. #columns ::-webkit-scrollbar {
  190.   background: #000F1E;
  191.   width: 6px;
  192. }
  193. #columns ::-webkit-scrollbar-thumb {background: #FFFFFF40;}
  194.  
  195. .panel {
  196.   scrollbar-color: #FFFFFF40 #000F1E;
  197.   scrollbar-width: thin;
  198. }
  199.  
  200. /* Panels */
  201.  
  202. .panel {
  203.   background: none;
  204.   color: #FFFFFF;
  205.   font: 10px/1.4 'Open Sans', sans-serif;
  206.   padding: 0;
  207.   margin: 0;
  208.   position: absolute;
  209.   box-sizing: border-box;
  210. }
  211. #id_footprints, .media_panel {overflow: hidden;}
  212.  
  213. .panel h2 {display: none;}
  214. .panel p {margin: 0;}
  215.  
  216. .panel a {
  217.   display: block;
  218.   color: var(--color-primary);
  219.   font-weight: 600;
  220. }
  221. .panel a:hover {color: var(--color-secndry);}
  222.  
  223. /* Draw Stars */
  224.  
  225. #id_contact li:nth-of-type(odd), #id_comments h2 + div, .media_panel::before, #column_3::before {position: fixed;}
  226. #column_2 *, #column_2 a::before, .media_panel::before, #column_3::before, #columns::after {border-radius: 50%;}
  227. #column_2 * {font-size: 0;}
  228.  
  229. #column_2 a::before, #id_contact span, #id_comments .clear, .media_panel::before, #column_3::before, #columns::after {
  230.   background: #A0A0A8;
  231.   filter: drop-shadow(0 0 5px #FFFFFF80) drop-shadow(0 0 1px #FFFFFF80);
  232.   transition: all .5s ease-in-out;
  233. }
  234.  
  235. #column_2 a::before {
  236.   content: '';
  237.   display: block;
  238.   width: 100%;
  239.   height: 100%;
  240. }
  241.  
  242. #column_2 a:hover::before, .media_panel:hover::before, #column_3:hover::before {
  243.   background: #FFFFFF;
  244.   filter: drop-shadow(0 0 5px #FFFFFF) drop-shadow(0 0 1px #FFFFFF);
  245. }
  246.  
  247. #column_3::before {
  248.   width: var(--star-size1);
  249.   height: var(--star-size1);
  250. }
  251.  
  252. #id_contact li:nth-of-type(2) *, #id_comments h2 + div *, #columns .media_panel, .media_panel::before, #columns::after {
  253.   width: var(--star-size2);
  254.   height: var(--star-size2);
  255. }
  256.  
  257. #id_comments p a, #id_store a, #id_contact li:nth-of-type(odd) * {
  258.   width: var(--star-size3);
  259.   height: var(--star-size3);
  260. }
  261.  
  262. #columns::after {
  263.   content: '';
  264.   position: absolute;
  265.   top: calc(53.5% - (var(--star-size2) / 2));
  266.   left: calc(49.75% - (var(--star-size2) / 2));
  267. }
  268.  
  269. /* Write Texts */
  270.  
  271. #column_2 a::after, .media_panel::after, #column_3::after {
  272.   width: max-content;
  273.   font: 600 10px/1 'Open Sans', sans-serif;
  274.   text-transform: uppercase;
  275.   opacity: .15;
  276.   transition: opacity .5s ease-in-out;
  277. }
  278. #column_2 a:hover::after, .media_panel:hover::after, #column_3:hover::after {opacity: 1;}
  279. #column_2 a, .media_panel::after, #column_3::after {color: #FFFFFF;}
  280. .media_panel::after, #column_3::after {position: fixed;}
  281.  
  282. #column_2 a::after {
  283.   position: absolute;
  284.   top: 50%;
  285.   transform: translate(0, -50%);
  286. }
  287.  
  288. #id_comments p a::after, #id_comments div a::after, #id_contact li:nth-of-type(1) a::after, #column_3::after {padding-right: 7px;}
  289. #id_comments p a::after, #id_comments div a::after, #id_contact li:nth-of-type(1) a::after {right: calc(100% - 1px);}
  290. #id_contact li:nth-of-type(n+2) a::after, #id_store a::after, .media_panel::after {padding-left: 7px;}
  291. #id_contact li:nth-of-type(n+2) a::after, #id_store a::after {left: calc(100% - 1px);}
  292.  
  293. #id_contact li:nth-of-type(1) a::after {content: 'Add Friend';}
  294. #id_contact li:nth-of-type(2) a::after {content: 'Send PM';}
  295. #id_contact li:nth-of-type(3) a::after {content: 'Open Trade';}
  296. #id_comments p a::after {content: 'View Comments';}
  297. #id_comments div a::after {content: 'Post Comment';}
  298. #id_store a::after {content: 'Visit Store';}
  299.  
  300. #column_3::after {
  301.   content: 'Recent Visitors';
  302.   top: calc(33.75% - 5px);
  303.   right: calc(62.75% + 4px);
  304. }
  305.  
  306. .media_panel::after {
  307.   content: '';
  308.   font: 400 10px/1 'Font Awesome 5 Free', sans-serif;
  309.   margin-top: -1px;
  310.   top: calc(98.5% - 4px);
  311.   left: calc(92.5% + 3px);
  312. }
  313.  
  314. /* Contact */
  315.  
  316. #id_contact {
  317.   top: calc(34.25% - (var(--star-size2) / 2));
  318.   left: calc(75.25% - (var(--star-size2) / 2));
  319. }
  320. #id_contact span {display: block;}
  321.  
  322. #id_contact li:nth-of-type(1) {
  323.   top: calc(8% - (var(--star-size3) / 2));
  324.   left: calc(81.75% - (var(--star-size3) / 2));
  325. }
  326.  
  327. #id_contact li:nth-of-type(3) {
  328.   top: calc(0.5% - (var(--star-size3) / 2));
  329.   left: calc(88% - (var(--star-size3) / 2));
  330. }
  331.  
  332. /* Comments */
  333.  
  334. #id_comments {
  335.   top: calc(88.75% - (var(--star-size3) / 2));
  336.   left: calc(7.25% - (var(--star-size3) / 2));
  337. }
  338. #alerts_banner, #alert_container ~ div, #id_comments dl, #id_comments h2 ~ .clear {display: none;}
  339.  
  340. #alert_container {
  341.   float: none;
  342.   display: block;
  343.   padding: 0;
  344. }
  345.  
  346. #id_comments h2 + div {
  347.   top: calc(77% - (var(--star-size2) / 2));
  348.   left: calc(30.5% - (var(--star-size2) / 2));
  349. }
  350.  
  351. /* Store */
  352.  
  353. #id_store {
  354.   top: calc(73.25% - (var(--star-size3) / 2));
  355.   left: calc(69.75% - (var(--star-size3) / 2));
  356. }
  357. #id_store h3, #id_store div, #id_store p:nth-last-of-type(2) {display: none;}
  358. #id_store h2 ~ :not(p:last-of-type) {display: none;}
  359.  
  360. /* Visitors */
  361.  
  362. #id_footprints {
  363.   background: #000;
  364.   width: 0;
  365.   height: 0;
  366.   text-align: center;
  367.   right: 18px;
  368.   bottom: 10px;
  369.   border: 0 solid transparent;
  370.   border-radius: 5px;
  371.   overflow-y: scroll;
  372.   opacity: 0;
  373.   transition: all 0s .5s linear, opacity .5s 0s ease-in-out;
  374. }
  375.  
  376. #column_3:hover #id_footprints {
  377.   width: 200px;
  378.   height: 120px;
  379.   border-width: 10px;
  380.   opacity: 1;
  381.   transition-delay: 0s, 0s;
  382. }
  383.  
  384. #id_footprints .item {
  385.   display: grid;
  386.   grid-template-columns: max-content max-content;
  387.   justify-content: center;
  388. }
  389. #id_footprints .item:nth-of-type(n+2) {margin-top: 7px;}
  390. #id_footprints .item a {grid-column: span 2;}
  391.  
  392. #id_footprints .item::before {
  393.   content: 'visited ';
  394.   grid-row: 2;
  395.   white-space: pre;
  396. }
  397.  
  398. #column_3::before {
  399.   content: '';
  400.   top: calc(33.75% - (var(--star-size1) / 2));
  401.   left: calc(37.25% - (var(--star-size1) / 2));
  402. }
  403.  
  404. /* Media */
  405.  
  406. .media_panel, .media_panel::before {
  407.   top: calc(98.5% - (var(--star-size2) / 2));
  408.   left: calc(92.5% - (var(--star-size2) / 2));
  409. }
  410.  
  411. .media_panel::before {
  412.   content: '';
  413.   position: fixed;
  414.   pointer-events: none;
  415. }
  416.  
  417. .media_panel iframe {
  418.   width: 300px;
  419.   height: 200px;
  420.   position: absolute;
  421.   bottom: -11px;
  422.   left: -22px;
  423.   border-radius: 0 !important;
  424.   opacity: .01;
  425. }
  426.  
  427. /* Misc */
  428.  
  429. #pictures_container, #texts_container {
  430.   width: 0;
  431.   height: 0;
  432.   position: absolute;
  433.   top: var(--top-offset);
  434.   left: 50%;
  435. }
Add Comment
Please, Sign In to add comment