althindor

Pro for BrujitaMalvada

May 10th, 2020
385
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.92 KB | None | 0 0
  1. /* Profile by AlthIndor */
  2.  
  3. html, body {background: #000;}
  4. body {overflow: hidden;}
  5. body a {text-decoration: none !important;}
  6.  
  7. html {
  8.  --cyan: #00FFFF;
  9.  --cyan-border: linear-gradient(to bottom, var(--cyan) 2px, transparent 2px, transparent calc(100% - 2px), var(--cyan) calc(100% - 2px)),
  10.      linear-gradient(135deg, var(--cyan) 26px, #002020 26px, #002020 calc(100% - 26px), var(--cyan) calc(100% - 26px));
  11.  --lime: #00FF00;
  12.  --lime-border: linear-gradient(to bottom, var(--lime) 2px, transparent 2px, transparent calc(100% - 2px), var(--lime) calc(100% - 2px)),
  13.      linear-gradient(135deg, var(--lime) 26px, #002000 26px, #002000 calc(100% - 26px), var(--lime) calc(100% - 26px));
  14.  --pink: #FF00FF;
  15.  --pink-border: linear-gradient(to bottom, var(--pink) 2px, transparent 2px, transparent calc(100% - 2px), var(--pink) calc(100% - 2px)),
  16.      linear-gradient(135deg, var(--pink) 26px, #200020 26px, #200020 calc(100% - 26px), var(--pink) calc(100% - 26px));
  17. }
  18.  
  19. ::selection {
  20.  background: var(--pink);
  21.  color: #FFFFFF;
  22. }
  23.  
  24. #gaia_header #header_left, #gaia_header #header_right, #id_store, .media_panel, .custom_panel, #column_2 h2, #id_comments h2 + div, #id_comments h2 ~ p {
  25. -webkit-mask: linear-gradient(135deg, transparent 24px, #000 24px, #000 calc(100% - 24px), transparent calc(100% - 24px));
  26.  mask: linear-gradient(135deg, transparent 24px, #000 24px, #000 calc(100% - 24px), transparent calc(100% - 24px));
  27. }
  28.  
  29. #panel-details, #columns {
  30.  width: 100%;
  31.  height: 100%;
  32.  top: 0;
  33.  left: 0;
  34. }
  35.  
  36. /* Animated Rain */
  37.  
  38. @keyframes RainMove {
  39.  from {background-position: 0 0;}
  40.  to {background-position: 0 464px;}
  41. }
  42.  
  43. #panel-details, #panel-details div {position: absolute;}
  44. #panel-details {background: url('https://i.imgur.com/GK45cDG.jpg') #000 fixed no-repeat center / cover;}
  45.  
  46. #panel-details div {
  47.  background: url('https://i.imgur.com/XYmSLbx.png') 0 0 / auto 464px;
  48.  width: 120%;
  49.  height: 120%;
  50.  top: -10%;
  51.  left: -10%;
  52.  animation: RainMove .5s linear infinite;
  53.  mix-blend-mode: soft-light;
  54.  opacity: .4;
  55. }
  56. #panel-details .ft {transform: rotate(-5deg);}
  57. #panel-details .hd {display: none;}
  58.  
  59. #panel-details .bd {
  60.  background-size: auto 232px;
  61.  background-position-x: -325px;
  62.  animation-delay: -.25s;
  63. }
  64.  
  65. /* Fonts */
  66.  
  67. @font-face {
  68.  font-family: 'Squada One';
  69.  font-style: normal;
  70.  font-weight: 400;
  71.  src: local('Squada One'), local('SquadaOne-Regular'), url(https://fonts.gstatic.com/s/squadaone/v8/BCasqZ8XsOrx4mcOk6Mtaac2WQ.woff2) format('woff2');
  72. }
  73.  
  74. @font-face {
  75.  font-family: 'Oxygen Mono';
  76.  font-style: normal;
  77.  font-weight: 400;
  78.  src: local('Oxygen Mono'), local('OxygenMono-Regular'), url(https://fonts.gstatic.com/s/oxygenmono/v7/h0GsssGg9FxgDgCjLeAd7hjYx-4.woff2) format('woff2');
  79. }
  80.  
  81. @font-face {
  82.  font-family: 'Open Sans';
  83.  font-style: normal;
  84.  font-weight: 400;
  85.  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  86. }
  87.  
  88. @font-face {
  89.  font-family: 'Open Sans';
  90.  font-style: normal;
  91.  font-weight: 700;
  92.  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  93. }
  94.  
  95. /* Header */
  96.  
  97. #viewer #gaia_header {
  98.  background: none !important;
  99.  border: 10px solid transparent;
  100.  border-width: 10px 5px 0 5px;
  101.  box-sizing: border-box;
  102.  filter: drop-shadow(0 2px 3px #00000080);
  103. }
  104. #gaia_header .spacer {display: none !important;}
  105. #gaia_header li {margin: 0 5px;}
  106.  
  107. #gaia_header #header_left, #gaia_header #header_right {
  108.  background: var(--pink-border);
  109.  height: 31px !important;
  110.  width: auto !important;
  111.  font-size: 0 !important;
  112.  padding: 0 35px !important;
  113. }
  114. #gaia_header #header_left:hover, #gaia_header #header_right:hover {background: var(--cyan-border);}
  115. #gaia_header #header_right {float: right;}
  116.  
  117. #gaia_header img {
  118. -webkit-mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  119.  mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  120.  background: #FFFFFF;
  121.  width: 0 !important;
  122.  padding: 0 38px 0 0;
  123. }
  124. #header_left li:nth-of-type(2) a:hover img {background: var(--cyan);}
  125.  
  126. #gaia_header a {
  127.  color: #FFFFFF !important;
  128.  font: 14px/31px 'Squada One', 'Open Sans Condensed', sans-serif;
  129.  text-transform: uppercase;
  130. }
  131. #gaia_header a:hover {color: var(--cyan) !important;}
  132.  
  133. /* Columns */
  134.  
  135. #columns, #column_1, #column_2 {
  136.  float: none;
  137.  margin: 0;
  138. }
  139. #columns {filter: drop-shadow(0 2px 3px #00000080);}
  140. #column_3 {display: none;}
  141.  
  142. #column_1 {
  143.  width: auto;
  144.  right: calc(50% - 345px);
  145. }
  146.  
  147. #column_2 {
  148.  width: 620px;
  149.  height: 320px;
  150.  position: absolute;
  151.  top: calc(50% - 160px);
  152.  left: calc(50% - 310px);
  153. }
  154.  
  155. /* Scrollbars */
  156.  
  157. #columns ::-webkit-scrollbar {
  158.  background: var(--cyan);
  159.  width: 7px;
  160. }
  161.  
  162. #columns ::-webkit-scrollbar-thumb {
  163.  background: #000 content-box;
  164.  border: 1px solid transparent;
  165.  border-width: 1px 1px 1px 0;
  166. }
  167.  
  168. .panel {
  169.  scrollbar-color: #000 var(--cyan);
  170.  scrollbar-width: thin;
  171. }
  172.  
  173. /* Panels */
  174.  
  175. .panel, .panel h2 {
  176.  color: #FFFFFF;
  177.  padding: 0;
  178.  margin: 0;
  179.  box-sizing: border-box;
  180.  overflow: hidden;
  181. }
  182. .panel h2 {display: none;}
  183.  
  184. .panel a {color: var(--pink);}
  185. .panel a:hover {color: var(--cyan);}
  186.  
  187. #id_about, #id_comments, #id_wishlist, #id_footprints {
  188.  background: linear-gradient(to left, cyan 8px, transparent 8px, transparent calc(100% - 8px), cyan calc(100% - 8px)) border-box,
  189.    linear-gradient(-45deg, cyan 20px, cyan 22px, #002020D0 22px, #002020D0 calc(100% - 22px), cyan calc(100% - 22px), cyan calc(100% - 20px)) border-box;
  190.  width: calc(100% - 20px);
  191.  height: calc(100% - 20px);
  192.  font: 11px/1.65 'Open Sans', sans-serif;
  193.  text-align: justify;
  194.  padding-right: 30px;
  195.  position: absolute;
  196.  top: -200%;
  197.  left: 10px;
  198.  border: 20px solid transparent;
  199.  border-width: 22px 0 22px 40px;
  200.  box-shadow: 0 2px 3px 1px #00000080;
  201.  overflow-y: scroll;
  202. }
  203. #id_about img, #id_comments .postcontent img {max-width: 100% !important;}
  204.  
  205. .custom_panel:focus-within + .panel, #column_2 .panel:not(.custom_panel):hover {top: 5px !important;}
  206. .custom_panel:focus-within + .panel h2, #column_2 .panel:not(.custom_panel):hover h2 {display: block !important;}
  207.  
  208. /* Buttons */
  209.  
  210. #column_1, #column_2 h2, .custom_panel {
  211.  position: fixed;
  212.  bottom: 10px;
  213. }
  214. #column_2 h2, .custom_panel {width: 140px;}
  215. .custom_panel {background: var(--pink-border);}
  216.  
  217. #column_1, #column_2 h2, #id_store, .media_panel, .custom_panel {height: 32px !important;}
  218. #column_2 h2::after, #id_store, .custom_panel {font: 400 16px/31px 'Squada One', 'Open Sans Condensed', sans-serif;}
  219. #column_2 h2, #id_store, .custom_panel {text-align: center;}
  220. #column_2 h2, #id_store a {font-size: 0;}
  221.  
  222. #column_2 h2, #id_store:hover, .custom_panel:hover {background: var(--cyan-border);}
  223. #id_store:hover a::after, .custom_panel:hover {color: var(--cyan);}
  224.  
  225. .custom_panel:nth-of-type(1), #id_about h2 {left: calc(50% - 345px);}
  226. .custom_panel:nth-of-type(3), #id_comments h2 {left: calc(50% - 345px + 120px);}
  227. .custom_panel:nth-of-type(5), #id_wishlist h2 {left: calc(50% - 345px + 240px);}
  228. .custom_panel:nth-of-type(7), #id_footprints h2 {left: calc(50% - 345px + 360px);}
  229. .custom_panel:nth-of-type(1)::after, #id_about h2::after {content: 'ABOUT ME';}
  230. .custom_panel:nth-of-type(3)::after, #id_comments h2::after {content: 'COMMENTS';}
  231. .custom_panel:nth-of-type(5)::after, #id_wishlist h2::after {content: 'WISH LIST';}
  232. .custom_panel:nth-of-type(7)::after, #id_footprints h2::after {content: 'VISITORS';}
  233.  
  234. .custom_panel .spoiler-wrapper, .custom_panel .spoiler-control-show {
  235.  padding: 0;
  236.  border: none;
  237.  outline: none;
  238. }
  239. .custom_panel .spoiler-control-hide, .custom_panel .spoiler-control span {display: none !important;}
  240.  
  241. .custom_panel .spoiler-control-show {
  242.  display: block !important;
  243.  background: none;
  244.  width: 100%;
  245.  height: 100%;
  246.  position: absolute;
  247. }
  248.  
  249. /* Comments */
  250.  
  251. #id_comments #alert_container {
  252.  float: none;
  253.  padding: 0;
  254. }
  255.  
  256. #id_comments #alerts_banner {display: none;}
  257. #id_comments .deletecomment {margin: 0 0 0 10px;}
  258. #id_comments dl {margin-top: 45px;}
  259. #id_comments dd {margin: 0 0 15px 0;}
  260. #id_comments dd:last-of-type {margin: 0;}
  261.  
  262. #id_comments dt {
  263.  height: auto;
  264.  line-height: normal;
  265.  padding: 0 0 4px 0;
  266.  margin: 0 0 3px 0;
  267.  border-bottom: 1px solid #FFFFFF60;
  268. }
  269.  
  270. #id_comments .date {
  271.  font: 400 9px 'Oxygen Mono', monospace;
  272.  text-transform: uppercase;
  273. }
  274.  
  275. #id_comments .dropBox {
  276.  background: #FFFFFF60;
  277.  width: 48px;
  278.  height: 58px;
  279.  margin: 6px 10px 0 0;
  280.  border: 2px solid var(--cyan);
  281.  overflow: hidden;
  282. }
  283.  
  284. #id_comments .dropBox img {
  285.  width: 120px;
  286.  height: 150px;
  287.  margin: -30px 0 0 -45px;
  288. }
  289.  
  290. /* Comments Links */
  291.  
  292. #id_comments h2 + div, #id_comments h2 ~ p, #id_comments h2 + div a, #id_comments h2 ~ p a {
  293.  position: absolute;
  294.  width: 275px;
  295.  height: 31px;
  296. }
  297. #id_comments h2 + div a, #id_comments h2 ~ p a {left: 0;}
  298. #id_comments h2 + div a {font-size: 0;}
  299.  
  300. #id_comments h2 + div, #id_comments h2 ~ p {
  301.  background: var(--lime-border);
  302.  text-align: center;
  303. }
  304. #id_comments h2 + div {left: -3px;}
  305. #id_comments h2 ~ p {right: 26px;}
  306.  
  307. #id_comments h2 + div:hover, #id_comments h2 ~ p:hover {background: var(--cyan-border);}
  308. #id_comments h2 + div:hover a::after, #id_comments h2 ~ p:hover a {color: var(--cyan);}
  309.  
  310. #id_comments h2 + div a::after, #id_comments h2 ~ p a {
  311.  color: #FFFFFF;
  312.  font: 400 14px/31px 'Squada One', 'Open Sans Condensed', sans-serif;
  313.  text-transform: uppercase;
  314. }
  315. #id_comments h2 + div a::after {content: 'Leave A Comment';}
  316.  
  317. /* Wish List */
  318.  
  319. #id_wishlist {
  320.  display: grid;
  321.  grid-template-columns: repeat(10, 1fr);
  322.  grid-auto-rows: 40px;
  323.  gap: 14px 10px;
  324. }
  325. .premium_sparkle {display: none;}
  326.  
  327. #id_wishlist .item {
  328.  background: linear-gradient(45deg, var(--pink) 7px, transparent 7px),
  329.      linear-gradient(-135deg, var(--pink) 7px, transparent 7px),
  330.      linear-gradient(to bottom, #FFFFFF 1px, transparent 1px, transparent 39px, #FFFFFF 39px) #FFFFFF40;
  331.  width: 100%;
  332.  height: 40px;
  333.  text-align: center;
  334.  padding: 5px 0;
  335.  position: relative;
  336.  border: 1px solid var(--pink);
  337.  border-width: 0 1px;
  338.  box-sizing: border-box;
  339. }
  340. #id_wishlist .item:hover {background-color: #FFFFFF;}
  341.  
  342. .owner_checkmark {
  343.  margin: 0;
  344.  bottom: 4px;
  345.  right: 3px;
  346.  filter: invert(100%);
  347. }
  348.  
  349. /* Store */
  350.  
  351. #id_store {
  352.  background: var(--lime-border);
  353.  float: left;
  354.  width: 100px;
  355.  margin-right: -20px;
  356. }
  357. #id_store h2 ~ *:nth-last-child(n+2) {display: none;}
  358.  
  359. #id_store a {
  360.  width: 100%;
  361.  height: 100%;
  362.  font-weight: normal;
  363.  position: absolute;
  364.  left: 0;
  365. }
  366.  
  367. #id_store a::after {
  368.  content: 'MP';
  369.  color: #FFFFFF;
  370.  font-size: 24px;
  371.  padding-left: 3px;
  372. }
  373.  
  374. /* Media */
  375.  
  376. .media_panel {
  377.  background: url('https://i.imgur.com/gqTTTvw.png') 11px -6px, var(--lime-border);
  378.  width: 130px !important;
  379. }
  380. .media_panel:hover {background: url('https://i.imgur.com/gqTTTvw.png') 11px -6px, var(--cyan-border);}
  381.  
  382. .media_panel iframe {
  383.  width: 400px;
  384.  height: 300px;
  385.  position: absolute;
  386.  bottom: -1px;
  387.  left: 11px;
  388.  opacity: .01;
  389. }
Add Comment
Please, Sign In to add comment