Advertisement
althindor

Pro for NightSadness

Jul 13th, 2020
2,259
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 13.06 KB | None | 0 0
  1. /* Layout by CD-ARIAx3 */
  2. /* + Code by AlthIndor */
  3.  
  4. html, body {
  5.  background: url('https://i.imgur.com/wUir3HW.jpg') center / cover #000;
  6.  min-height: 960px;
  7. }
  8. html {--amaranth: #D3212D;}
  9.  
  10. body {
  11.  background: url('https://i.imgur.com/aUGAlAj.png') no-repeat calc(50% - 287px) -155px,
  12.    url('https://images2.imgbox.com/a3/40/SQnK0AVE_o.png') no-repeat center -320px;
  13.  background-blend-mode: overlay, normal;
  14. }
  15.  
  16. body a {
  17.  text-decoration: none !important;
  18.  transition: all .5s ease-in-out;
  19. }
  20.  
  21. #gaia_header #header_left, #gaia_header #header_right, #panel-details .bd::before, #panel-details .bd::after,
  22.   #id_contact ul:not(.buttons) li, #id_comments h2 + div, #id_comments h2 ~ p, #id_badges img {background: url('https://images2.imgbox.com/a3/40/SQnK0AVE_o.png') no-repeat;}
  23. #id_comments h2 + div, #id_comments h2 ~ p, #id_badges img {background-position: -150px -170px;}
  24. #gaia_header #header_left {background-position: right -205px;}
  25. #gaia_header #header_right {background-position: left -265px;}
  26. #id_contact ul:not(.buttons) li {background-position-y: -170px;}
  27.  
  28. /* Fonts */
  29.  
  30. @font-face {
  31.  font-family: 'IM Fell DW Pica';
  32.  font-style: normal;
  33.  font-weight: 400;
  34.  src: local('IM FELL DW Pica Roman'), local('IM_FELL_DW_Pica_Roman'), url(https://fonts.gstatic.com/s/imfelldwpica/v9/2sDGZGRQotv9nbn2qSl0TxXVYNwNYwnV.woff2) format('woff2');
  35. }
  36.  
  37. @font-face {
  38.  font-family: 'Work Sans';
  39.  font-style: normal;
  40.  font-weight: 400;
  41.  src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K0nXBi8Jpg.woff2) format('woff2');
  42. }
  43.  
  44. @font-face {
  45.  font-family: 'Work Sans';
  46.  font-style: normal;
  47.  font-weight: 600;
  48.  src: url(https://fonts.gstatic.com/s/worksans/v8/QGY_z_wNahGAdqQ43RhVcIgYT2Xz5u32K5fQBi8Jpg.woff2) format('woff2');
  49. }
  50.  
  51. @font-face {
  52.  font-family: 'Reem Kufi';
  53.  font-style: normal;
  54.  font-weight: 400;
  55.  src: local('Reem Kufi Regular'), local('ReemKufi-Regular'), url(https://fonts.gstatic.com/s/reemkufi/v7/2sDcZGJLip7W2J7v7wQzaGW5.woff2) format('woff2');
  56. }
  57.  
  58. /* Header */
  59.  
  60. #viewer #gaia_header {background: none !important;}
  61. #gaia_header li {filter: drop-shadow(0 0 1px #000);}
  62. #gaia_header li.spacer {display: none !important;}
  63.  
  64. #gaia_header #header_left, #gaia_header #header_right {
  65.  height: 55px !important;
  66.  font: 700 0/32px 'IM Fell DW Pica', serif !important;
  67.  width: calc(50% - 50px) !important;
  68.  min-width: max-content;
  69.  max-width: 1700px;
  70.  box-sizing: border-box !important;
  71. }
  72. #gaia_header #header_left {padding: 0 90px 0 10px !important;}
  73.  
  74. #gaia_header #header_right {
  75.  float: right;
  76.  padding: 0 10px 0 90px !important;
  77. }
  78.  
  79. #gaia_header img {
  80. -webkit-mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  81.  mask: url('https://i.imgur.com/5FTB40o.png') no-repeat 0 3px;
  82.  background: #FFFFFF;
  83.  width: 0 !important;
  84.  padding: 0 36px 0 0;
  85.  transition: background .5s ease-in-out;
  86. }
  87. #header_left li:nth-of-type(2) a:hover img {background: var(--amaranth);}
  88.  
  89. #gaia_header a, #gaia_header a::after, #header_left::after {
  90.  color: #FFFFFF !important;
  91.  font-size: 11px !important;
  92.  letter-spacing: .05em;
  93.  text-transform: uppercase;
  94. }
  95. #gaia_header a:hover {color: var(--amaranth) !important;}
  96.  
  97. #header_left li::after, #header_right li:nth-last-of-type(n+2)::after {
  98.  content: '●';
  99.  color: #B48C68;
  100.  font-size: 13px;
  101.  margin: 0 6px;
  102. }
  103. #header_left::after {content: 'By Aria & Alth';}
  104.  
  105. #header_right a[href*='report'] {font-size: 0 !important;}
  106. #header_right a[href*='report']::after {content: 'Report Profile';}
  107.  
  108. /* Columns */
  109.  
  110. #columns, #column_1, #column_2 {
  111.  float: none;
  112.  margin: 0;
  113.  position: absolute;
  114. }
  115. #column_3 {display: none;}
  116.  
  117. #columns, #column_1 {
  118.  width: 1080px;
  119.  height: 880px;
  120.  top: 0;
  121. }
  122. #columns {left: calc(50% - 540px);}
  123.  
  124. #column_2 {
  125.  width: 340px;
  126.  height: 505px;
  127.  top: 100px;
  128.  left: calc(50% - 170px);
  129. }
  130.  
  131. #columns ::-webkit-scrollbar {width: 0;}
  132. #columns * {scrollbar-width: none;}
  133.  
  134. /* Panels */
  135.  
  136. .panel {
  137.  background: none;
  138.  color: #FFFFFF;
  139.  font: 12px/1.6 'Work Sans', sans-serif;
  140.  text-align: center;
  141.  text-shadow: 0 1px 2px #000;
  142.  padding: 0;
  143.  margin: 0;
  144.  position: absolute;
  145.  box-sizing: border-box;
  146. }
  147. .panel h2 {display: none;}
  148. .panel img {max-width: 100% !important;}
  149.  
  150. .panel a {color: var(--amaranth);}
  151. .panel a:hover {color: inherit;}
  152.  
  153. #column_2 .panel {
  154.  width: 100%;
  155.  height: 100%;
  156.  top: -100%;
  157.  left: 0;
  158.  overflow-x: hidden;
  159.  overflow-y: scroll;
  160. }
  161.  
  162. /* Badges */
  163.  
  164. #id_badges {
  165.  width: 300px;
  166.  height: 380px;
  167.  top: 60px;
  168.  left: 755px;
  169. }
  170. #id_badges li, #id_badges li::after {position: absolute;}
  171. #tooltip-badge_c #tooltip-badge, #badge_display {display: none;}
  172.  
  173. #id_badges li {
  174.  float: none;
  175.  margin: 0;
  176.  text-shadow: 0 0 1px #696363;
  177.  transform-origin: top left;
  178.  transform: rotate(45deg);
  179.  filter: contrast(100%) brightness(100%);
  180.  transition: all .5s ease-in-out;
  181. }
  182. #id_badges li:nth-of-type(n+5) {display: none;}
  183.  
  184. #id_badges li::after {
  185.  display: block;
  186.  width: 120px;
  187.  height: 24px;
  188.  font: 400 12px/26px 'Reem Kufi', sans-serif;
  189.  letter-spacing: .05em;
  190.  top: 0;
  191.  pointer-events: none;
  192. }
  193.  
  194. #id_badges li:nth-of-type(1) {
  195.  top: 0;
  196.  left: 12px;
  197. }
  198. #id_badges li:nth-of-type(1)::after {content: 'ABOUT ME';}
  199.  
  200. #id_badges li:nth-of-type(2) {
  201.  top: 90px;
  202.  left: 102px;
  203. }
  204. #id_badges li:nth-of-type(2)::after {content: 'COMMENT';}
  205.  
  206. #id_badges li:nth-of-type(3) {
  207.  top: 180px;
  208.  left: 192px;
  209. }
  210. #id_badges li:nth-of-type(3)::after {content: 'WISH LIST';}
  211.  
  212. #id_badges li:nth-of-type(4) {
  213.  left: 150px;
  214.  top: 360px;
  215.  transform: rotate(-45deg);
  216. }
  217. #id_badges li:nth-of-type(4)::after {content: 'STALKERS';}
  218.  
  219. #id_badges img {
  220.  width: 0;
  221.  height: 0;
  222.  padding: 24px 120px 0 0;
  223. }
  224.  
  225. #tooltip-badge_c[style*='top: 60px']:first-of-type ~ #columns #id_about {top: 0;}
  226. #tooltip-badge_c[style*='top: 150px']:first-of-type ~ #columns #id_comments {top: 0;}
  227. #tooltip-badge_c[style*='top: 240px']:first-of-type ~ #columns #id_wishlist {top: 0;}
  228. #tooltip-badge_c[style*='top: 335px']:first-of-type ~ #columns #id_footprints {top: 0;}
  229.  
  230. #tooltip-badge_c[style*='top: 60px']:first-of-type ~ #columns #id_badges li:nth-of-type(1),
  231. #tooltip-badge_c[style*='top: 150px']:first-of-type ~ #columns #id_badges li:nth-of-type(2),
  232. #tooltip-badge_c[style*='top: 240px']:first-of-type ~ #columns #id_badges li:nth-of-type(3),
  233. #tooltip-badge_c[style*='top: 335px']:first-of-type ~ #columns #id_badges li:nth-of-type(4),
  234. #id_badges li:hover {
  235.  text-shadow: 0 0 5px #FFFFFF, 0 0 10px #FFFFFF;
  236.  filter: brightness(120%);
  237. }
  238.  
  239. /* Details */
  240.  
  241. #id_details {
  242.  width: 120px;
  243.  height: 150px;
  244.  top: 370px;
  245.  left: 776px;
  246. }
  247. #id_details p:nth-of-type(n+2) {display: none;}
  248. #id_details .forum_userstatus {display: none;}
  249.  
  250. /* Contact */
  251.  
  252. #id_contact {
  253.  top: 740px;
  254.  left: 775px;
  255. }
  256. #id_contact span {display: none;}
  257.  
  258. #id_contact ul:not(.buttons) li {
  259.  float: left;
  260.  height: 22px;
  261.  margin: 0 10px;
  262.  filter: drop-shadow(0 0 5px transparent) drop-shadow(0 0 10px #FFFFFF);
  263.  transition: filter .5s ease-in-out;
  264. }
  265. #id_contact ul:not(.buttons) li:nth-of-type(odd) {width: 22px;}
  266. #id_contact ul:not(.buttons) li:hover {filter: drop-shadow(0 0 5px #FFFFFF) drop-shadow(0 0 15px #FFFFFF);}
  267.  
  268. #id_contact ul:not(.buttons) li:nth-of-type(2) {
  269.  background-position-x: -32px;
  270.  width: 27px;
  271. }
  272. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position-x: -69px;}
  273.  
  274. #id_contact a {
  275.  width: 100%;
  276.  height: 100%;
  277.  font-size: 0;
  278.  position: absolute;
  279.  top: 0;
  280.  left: 0;
  281. }
  282.  
  283. /* Comments */
  284.  
  285. #id_comments {
  286.  display: flex;
  287.  flex-flow: row wrap;
  288.  justify-content: center;
  289. }
  290.  
  291. #id_comments #alerts_banner, #id_comments .dropBox {display: none;}
  292. #id_comments .deletecomment {margin: 0 0 0 10px;}
  293. #id_comments dd {margin: 0 0 15px 0;}
  294. #id_comments dd:last-of-type {margin: 0;}
  295.  
  296. #id_comments dl {
  297.  width: 100%;
  298.  margin-top: 15px;
  299. }
  300.  
  301. #id_comments dt {
  302.  height: auto;
  303.  line-height: inherit;
  304.  text-align: inherit;
  305.  padding: 0 0 5px 0;
  306.  margin: 0 0 5px 0;
  307.  border-bottom: 2px dotted #FFFFFF50;
  308. }
  309. #id_comments .username {float: none;}
  310.  
  311. /* Comments Links */
  312.  
  313. #id_comments h2 + div, #id_comments h2 ~ p {
  314.  display: block;
  315.  width: 120px;
  316.  height: 24px;
  317.  margin: 0 5px;
  318.  box-sizing: border-box;
  319.  transition: filter .5s ease-in-out;
  320. }
  321. #id_comments h2 + div:hover, #id_comments h2 ~ p:hover {filter: contrast(80%) brightness(120%);}
  322. #id_comments h2 + div:hover a, #id_comments h2 ~ p:hover a {text-shadow: 0 0 5px #FFFFFF;}
  323.  
  324. #id_comments h2 + div a, #id_comments h2 ~ p a {
  325.  color: #FFFFFF;
  326.  font-size: 0;
  327. }
  328. #id_comments h2 + div a::after, #id_comments h2 ~ p a::after {font: 400 10px/26px 'Reem Kufi', sans-serif;}
  329. #id_comments h2 + div a::after {content: 'ADD COMMENT';}
  330. #id_comments h2 ~ p a::after {content: 'VIEW MORE';}
  331.  
  332. #id_comments #alert_container, #id_comments h2 ~ p {padding: 0;}
  333.  
  334. #id_comments #alert_container {
  335.  float: none;
  336.  margin: 0;
  337. }
  338.  
  339. /* Wish List */
  340.  
  341. #id_wishlist {
  342.  display: flex;
  343.  flex-flow: row wrap;
  344.  align-content: flex-start;
  345.  justify-content: center;
  346.  scroll-snap-type: y mandatory;
  347. }
  348. #id_wishlist .clear {display: none;}
  349. .premium_sparkle {display: none;}
  350.  
  351. #id_wishlist .item {
  352.  float: none;
  353.  background: #FFFFFF40;
  354.  width: 30px;
  355.  height: 30px;
  356.  padding: 6px;
  357.  margin: 0 5px 9px 4px;
  358.  position: relative;
  359.  border-radius: 10px;
  360.  outline: 1px dotted #000;
  361.  outline-offset: -3px;
  362.  transition: background .5s ease-in-out;
  363.  scroll-snap-align: start;
  364. }
  365. #id_wishlist .item:hover {background: var(--amaranth);}
  366.  
  367. #id_wishlist .item img[src*='thumbnail'] {
  368.  filter: saturate(0%);
  369.  transition: filter .5s ease-in-out;
  370. }
  371. #id_wishlist .item:hover img[src*='thumbnail'] {filter: none;}
  372.  
  373. .owner_checkmark {
  374.  margin: 0;
  375.  bottom: 5px;
  376.  left: calc(50% - 16px);
  377.  filter: hue-rotate(30deg);
  378. }
  379.  
  380. /* Visitors */
  381.  
  382. #id_footprints .item {
  383.  display: grid;
  384.  grid-template-columns: repeat(3, max-content);
  385.  grid-template-rows: 1fr;
  386.  gap: .4em;
  387.  justify-content: center;
  388. }
  389. #id_footprints a {grid-column: 1 / span 1;}
  390.  
  391. #id_footprints .item::after {
  392.  content: 'visited';
  393.  grid-column: 2 / span 1;
  394.  grid-row: 1 / span 1;
  395. }
  396.  
  397. /* Media */
  398.  
  399. .media_panel {
  400.  background: url('https://i.imgur.com/gqTTTvw.png') -21px -6px;
  401.  width: 70px;
  402.  height: 32px !important;
  403.  top: 665px;
  404.  left: 666px;
  405.  opacity: .3;
  406.  overflow: hidden;
  407. }
  408.  
  409. .media_panel iframe {
  410.  width: 400px;
  411.  height: 300px;
  412.  position: absolute;
  413.  bottom: -2px;
  414.  left: -21px;
  415.  opacity: .001;
  416. }
  417.  
  418. /* Misc */
  419.  
  420. #pictures_container, #texts_container {
  421.  width: 1px;
  422.  height: 1px;
  423.  position: absolute;
  424.  top: 0;
  425.  left: 50%;
  426.  overflow: visible;
  427. }
  428.  
  429. /* Enter Button */
  430.  
  431. #texts_container .spoiler-wrapper, #texts_container .spoiler-control {border: none;}
  432. #texts_container .spoiler-control-hide, #texts_container .spoiler-control span {display: none !important;}
  433. #texts_container .spoiler-wrapper {padding: 0;}
  434. #texts_container .spoiler-control {outline: none;}
  435.  
  436. #texts_container .spoiler-control-show {
  437.  background: url('https://i.imgur.com/qMQEiCE.png') no-repeat center, url('https://i.imgur.com/e8U5FHY.gif') no-repeat center / cover #000;
  438.  width: 100%;
  439.  height: 100%;
  440.  position: fixed;
  441.  top: 0;
  442.  left: 0;
  443. }
  444.  
  445. /* Animations */
  446.  
  447. #panel-details {
  448.  top: 0;
  449.  left: 50%;
  450. }
  451. #panel-details .hd {display: none;}
  452.  
  453. #panel-details, #panel-details div, #panel-details div::before, #panel-details div::after {position: absolute;}
  454. #panel-details div::before, #panel-details div::after {content: ''; transform-style: preserve-3d;}
  455.  
  456. @keyframes RotateDiamonds {
  457.  from {transform: rotateY(0);}
  458.  to {transform: rotateY(1turn);}
  459. }
  460.  
  461. #panel-details .bd {
  462.  width: 176px;
  463.  height: 269px;
  464.  top: 568px;
  465.  left: -634px;
  466.  perspective: 500px;
  467.  perspective-origin: center -50px;
  468.  filter: drop-shadow(3px 6px .5px #00000080);
  469. }
  470.  
  471. #panel-details .bd::before {
  472.  background-position: top right;
  473.  width: 109px;
  474.  height: 185px;
  475.  top: 0;
  476.  left: 0;
  477.  animation: RotateDiamonds 10s linear infinite;
  478. }
  479.  
  480. #panel-details .bd::after {
  481.  background-position: -1495px 0;
  482.  width: 86px;
  483.  height: 139px;
  484.  top: 128px;
  485.  left: 89px;
  486.  animation: RotateDiamonds 10s -8s linear infinite;
  487. }
  488.  
  489. @keyframes CandleFlicker {
  490.  from {background-position-x: 0}
  491.  to {background-position-x: -3100px;}
  492. }
  493.  
  494. @keyframes CandleOrb {
  495.  0% {opacity: .75;}
  496.  5% {opacity: .75;}
  497.  10% {opacity: .7;}
  498.  15% {opacity: .8;}
  499.  20% {opacity: .7;}
  500.  25% {opacity: .9;}
  501.  30% {opacity: .8;}
  502.  35% {opacity: 0.7;}
  503.  40% {opacity: .75;}
  504.  45% {opacity: .75;}
  505.  50% {opacity: 0.9;}
  506.  55% {opacity: .75;}
  507.  60% {opacity: .7;}
  508.  65% {opacity: .75;}
  509.  70% {opacity: .85;}
  510.  75% {opacity: .7;}
  511.  80% {opacity: .75;}
  512.  85% {opacity: .9;}
  513.  90% {opacity: .75;}
  514.  95% {opacity: .6;}
  515.  100% {opacity: .75;}
  516. }
  517.  
  518. #panel-details .ft {
  519.  top: 734px;
  520.  left: -156px;
  521. }
  522.  
  523. #panel-details .ft::before {
  524.  background: radial-gradient(circle at center, #FFC00080, #FF800040, transparent 70%);
  525.  width: 150px;
  526.  height: 150px;
  527.  top: -42px;
  528.  left: -65px;
  529.  mix-blend-mode: hard-light;
  530.  animation: CandleOrb 8s linear infinite;
  531. }
  532.  
  533. #panel-details .ft::after {
  534.  background: url('https://i.imgur.com/U2Zrsx5.png');
  535.  width: 100px;
  536.  height: 220px;
  537.  transform-origin: 0 0;
  538.  transform: scale(.2);
  539.  mix-blend-mode: screen;
  540.  animation: CandleFlicker 2s steps(31, start) infinite;
  541. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement