althindor

Pro for TechnicalAo

May 26th, 2021
1,119
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. /* Graphics by Cassiel Socks, Coded By AlthIndor */
  2.  
  3. :root {
  4.   --lime-dark: #00B067;
  5.   --lime-lite: #12F0A7;
  6.   --orng-dark: #D66020;
  7.   --orng-lite: #E08858;
  8.   --pink-dark: #D92F84;
  9.   --pink-lite: #FF69B4;
  10.   --purp-dark: #260059;
  11.   --purp-lite: #663399;
  12.   --top-offset: calc(50% - 450px + 35px);
  13. }
  14.  
  15. html, body {
  16.   background: url('https://i.imgur.com/FA57bq5.png') center / cover;
  17.   min-height: 1080px;
  18. }
  19. body {position: relative;}
  20. body a {text-decoration: none !important;}
  21.  
  22. ::selection {
  23.   background: var(--pink-lite);
  24.   color: #FFFFFF;
  25. }
  26.  
  27. /* Fonts */
  28.  
  29. @font-face {
  30.   font-family: 'Font Awesome 5 Free';
  31.   font-style: normal;
  32.   font-weight: 900;
  33.   font-display: block;
  34.   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');
  35. }
  36.  
  37. @font-face {
  38.   font-family: 'Luckiest Guy';
  39.   font-style: normal;
  40.   font-weight: 400;
  41.   src: local('Luckiest Guy'), url(https://fonts.gstatic.com/s/luckiestguy/v11/_gP_1RrxsjcxVyin9l9n_j2hTd52.woff2) format('woff2');
  42. }
  43.  
  44. @font-face {
  45.   font-family: 'Open Sans';
  46.   font-style: normal;
  47.   font-weight: 400;
  48.   src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  49. }
  50.  
  51. @font-face {
  52.   font-family: 'Open Sans';
  53.   font-style: normal;
  54.   font-weight: 700;
  55.   src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  56. }
  57.  
  58. /* Header */
  59.  
  60. #gaia_header, #header_left, #header_right {box-sizing: border-box;}
  61. #gaia_header ul, #gaia_header a {transition: all .5s ease-in-out;}
  62. #gaia_header #header_right {float: right;}
  63. #gaia_header li.spacer {display: none !important;}
  64. #gaia_header li {margin: 0 5px;}
  65.  
  66. #viewer #gaia_header {
  67.   background: none !important;
  68.   padding: 10px !important;
  69. }
  70.  
  71. #viewer #gaia_header ul {
  72.   background: var(--purp-lite);
  73.   width: auto !important;
  74.   height: 36px !important;
  75.   font: 0/29px 'Luckiest Guy', sans-serif !important;
  76.   padding: 0 5px !important;
  77.   border: 3px solid var(--purp-dark);
  78.   border-radius: 5px;
  79.   box-shadow: 0 3px 2px #00008020;
  80. }
  81.  
  82. #viewer #gaia_header ul:hover {
  83.   background: var(--orng-lite);
  84.   border-color: var(--orng-dark);
  85. }
  86.  
  87. #gaia_header img {
  88.  -webkit-mask: url('https://i.imgur.com/5FTB40o.png') 0 4px no-repeat;
  89.   mask: url('https://i.imgur.com/5FTB40o.png') 0 4px no-repeat;
  90.   background: #FFFFFF;
  91.   width: 0;
  92.   padding: 0 37px 0 0;
  93. }
  94.  
  95. #gaia_header a {
  96.  -webkit-text-stroke: 1px var(--purp-lite);
  97.   color: #FFFFFF !important;
  98.   font-size: 15px !important;
  99.   font-weight: 400 !important;
  100.   text-transform: uppercase;
  101. }
  102. #gaia_header ul:hover a {-webkit-text-stroke-color: var(--orng-lite);}
  103.  
  104. #header_right a[href*='report'], #header_right a[href*='edit'] {font-size: 0 !important;}
  105. #header_right a[href*='report']::before, #header_right a[href*='edit']::before {font-size: 15px !important;}
  106. #header_right a[href*='report']::before {content: 'Report Profile';}
  107. #header_right a[href*='edit']::before {content: 'Edit My Profile';}
  108.  
  109. /* Columns */
  110.  
  111. #columns {
  112.   background: url('https://images2.imgbox.com/e4/4c/TVUsUOCO_o.png');
  113.   width: 800px;
  114.   height: 900px;
  115.   top: var(--top-offset);
  116.   left: calc(50% - 400px);
  117.   contain: layout;
  118. }
  119. #columns .column {display: contents;}
  120.  
  121. /* Scrollbars */
  122.  
  123. #columns ::-webkit-scrollbar {width: 0;}
  124. .panel {scrollbar-width: none;}
  125.  
  126. /* Panels */
  127.  
  128. .panel {
  129.   background: none;
  130.   color: #FFFFFF;
  131.   font: 10px/1.6 'Open Sans', sans-serif;
  132.   text-align: center;
  133.   position: absolute;
  134.   padding: 0;
  135.   margin: 0;
  136.   overflow: hidden;
  137. }
  138. .panel h2 {display: none;}
  139.  
  140. .panel a {transition: color .5s ease-in-out;}
  141. .panel a:hover {color: inherit !important;}
  142.  
  143. #id_about a {color: #187084;}
  144. #id_comments a {color: rebeccapurple;}
  145.  
  146. #id_about, #id_comments {
  147.   width: 305px;
  148.   height: 190px;
  149.   left: 40px;
  150.   overflow-y: scroll;
  151.   overscroll-behavior: contain;
  152. }
  153. #id_about {top: 280px;}
  154. #id_comments {top: 520px;}
  155.  
  156. #id_about img, #id_comments .postcontent img {max-width: 100%;}
  157.  
  158. /* Contact, Comments, and Media */
  159.  
  160. #id_contact {
  161.   top: 472px;
  162.   left: 385px;
  163.   overflow: visible;
  164. }
  165.  
  166. #id_contact li, #id_comments h2 + div a, #id_comments h2 ~ p a, .media_panel {
  167.   height: 40px !important;
  168.   border: 3px solid transparent;
  169.   border-radius: 5px;
  170.   box-shadow: 0 3px 2px #00008020;
  171.   transition: all .5s ease-in-out;
  172. }
  173. #id_contact li, #id_comments h2 + div a, #id_comments h2 ~ p a {width: 40px;}
  174.  
  175. #id_contact li *, #id_comments h2 + div a, #id_comments h2 ~ p a {
  176.   color: #FFFFFF;
  177.   font-size: 0;
  178. }
  179.  
  180. #id_contact li {
  181.   float: left;
  182.   margin: 0 10px 0 0;
  183. }
  184.  
  185. #id_contact li, .media_panel:hover {
  186.   background-color: var(--pink-lite);
  187.   border-color: var(--pink-dark);
  188. }
  189.  
  190. .media_panel, #id_contact li:hover {
  191.   background-color: var(--lime-lite);
  192.   border-color: var(--lime-dark);
  193. }
  194.  
  195. #id_comments h2 + div a, #id_comments h2 ~ p a {
  196.   background: var(--orng-lite);
  197.   position: fixed;
  198.   top: 748px;
  199.   border-color: var(--orng-dark);
  200. }
  201. #id_comments h2 + div a {left: 34px;}
  202. #id_comments h2 ~ p a {left: 90px;}
  203.  
  204. #id_comments h2 + div a:hover, #id_comments h2 ~ p a:hover {
  205.   background: var(--purp-lite);
  206.   border-color: var(--purp-dark);
  207. }
  208.  
  209. #id_contact li::before, #id_comments h2 + div a::before, #id_comments h2 ~ p a::before {font: 900 22px/40px 'Font Awesome 5 Free';}
  210. #id_contact li:nth-of-type(1)::before {content: '';}
  211. #id_contact li:nth-of-type(2)::before {content: '';}
  212. #id_contact li:nth-of-type(3)::before {content: '';}
  213. #id_comments h2 + div a::before {content: '';}
  214. #id_comments h2 ~ p a::before {content: '';}
  215.  
  216. /* Comments */
  217.  
  218. #id_comments #alert_container, #id_comments h2 + div, #id_comments h2 ~ p {display: contents;}
  219. #id_comments #alerts_banner, #id_comments .dropBox {display: none;}
  220.  
  221. #id_comments dt {
  222.   height: revert;
  223.   line-height: revert;
  224.   text-align: inherit;
  225.   padding: 0 0 5px 0;
  226.   margin: 0 0 3px 0;
  227.   border-bottom: 1px dotted rebeccapurple;
  228. }
  229. #id_comments .username {float: none;}
  230.  
  231. #id_comments .date a {
  232.   font-weight: 400;
  233.   text-transform: lowercase;
  234. }
  235.  
  236. #id_comments dd {margin: 0 0 20px 0;}
  237. #id_comments dd:last-of-type {margin: 0;}
  238.  
  239. #id_comments .deletecomment {
  240.   display: grid;
  241.   grid-auto-flow: column;
  242.   justify-content: center;
  243.   float: none;
  244.   padding: 0 0 4px 0;
  245.   margin: 0 0 4px 0;
  246.   border-bottom: 1px dotted rebeccapurple;
  247. }
  248. #id_comments .deletecomment a:first-of-type::after {content: ' Comment';}
  249. #id_comments .deletecomment br {display: none;}
  250.  
  251. #id_comments .deletecomment::after {
  252.   content: ' • ';
  253.   white-space: pre;
  254.   grid-column: 2;
  255.   color: rebeccapurple;
  256. }
  257.  
  258. /* Media */
  259.  
  260. .media_panel {
  261.   background-image: url('https://i.imgur.com/gqTTTvw.png');
  262.   background-position: -16px -2px;
  263.   width: 80px;
  264.   left: 65px;
  265.   top: 191px;
  266. }
  267.  
  268. .media_panel iframe {
  269.   width: 320px;
  270.   height: 320px;
  271.   position: absolute;
  272.   bottom: 0;
  273.   left: -9px;
  274.   opacity: .001;
  275. }
  276.  
  277. /* Misc */
  278.  
  279. #pictures_container, #texts_container {
  280.   width: 0;
  281.   height: 0;
  282.   position: absolute;
  283.   top: var(--top-offset);
  284.   left: 50%;
  285. }
RAW Paste Data