Advertisement
althindor

Pro for bzztbzzt

Oct 27th, 2019
455
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 11.22 KB | None | 0 0
  1. /* Graphics by Cassiel Socks, Code by AlthIndor */
  2.  
  3. :root {
  4.  --border-color: #340000;
  5.  --purple-dark: #381634;
  6.  --purple-lite: #6A2A64;
  7.  --pink-dark: #A01038;
  8.  --pink-lite: #E47484;
  9. }
  10. ::selection {background: #A0B8C0;}
  11.  
  12. html, body {
  13.  background: radial-gradient(circle at center, transparent 25vw, #000 60vw) fixed, url('https://i.imgur.com/CRgDwGU.png') fixed bottom center / cover, url('https://i.imgur.com/nbcldhT.png') fixed center #000;
  14.  background-blend-mode: normal, luminosity, normal;
  15. }
  16. body a {text-decoration: none !important;}
  17.  
  18. #columns, #column_1 b, #column_1 i, #column_2 h2 {background: url('https://images2.imgbox.com/89/22/RAGCCmsZ_o.png');}
  19.  
  20. /* Fonts */
  21.  
  22. @font-face {
  23.  font-family: 'Pirata One';
  24.  font-style: normal;
  25.  font-weight: 400;
  26.  src: local('Pirata One'), local('PirataOne-Regular'), url(https://fonts.gstatic.com/s/pirataone/v8/I_urMpiDvgLdLh0fAtofhi-Org.woff2) format('woff2');
  27. }
  28.  
  29. @font-face {
  30.  font-family: 'Open Sans';
  31.  font-style: normal;
  32.  font-weight: 400;
  33.  src: local('Open Sans Regular'), local('OpenSans-Regular'), url(https://fonts.gstatic.com/s/opensans/v17/mem8YaGs126MiZpBA-UFVZ0b.woff2) format('woff2');
  34. }
  35.  
  36. @font-face {
  37.  font-family: 'Open Sans';
  38.  font-style: normal;
  39.  font-weight: 700;
  40.  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(https://fonts.gstatic.com/s/opensans/v17/mem5YaGs126MiZpBA-UN7rgOUuhp.woff2) format('woff2');
  41. }
  42.  
  43. /* Header */
  44.  
  45. #viewer #gaia_header {
  46.  background: #000 !important;
  47.  height: 29px !important;
  48.  position: absolute !important;
  49.  border-bottom: 1px solid var(--purple-dark);
  50.  box-shadow: 0 1px 5px #000;
  51.  overflow: hidden;
  52. }
  53.  
  54. #gaia_header #header_left, #gaia_header #header_right {
  55.  background: none !important;
  56.  height: 100% !important;
  57.  font-size: 0 !important;
  58.  box-sizing: border-box;
  59. }
  60. #gaia_header #header_right {float: right;}
  61.  
  62. #gaia_header ul li, #gaia_header ul a {
  63.  display: inline-block !important;
  64.  height: 100% !important;
  65. }
  66. #gaia_header li.spacer {display: none !important;}
  67. #gaia_header li img {display: none !important;}
  68.  
  69. #header_left li:nth-of-type(2) a {
  70.  background: url('https://i.imgur.com/5FTB40o.png') center no-repeat;
  71.  width: 37px;
  72. }
  73.  
  74. #gaia_header ul a {
  75.  color: #FFFFFF !important;
  76.  font: 400 16px/1.8 'Pirata One', serif !important;
  77.  padding: 0 5px;
  78.  vertical-align: text-bottom !important;
  79.  transition: background-color .5s ease-in-out;
  80. }
  81. #gaia_header a:hover {background-color: var(--purple-lite) !important;}
  82.  
  83. /* Columns */
  84.  
  85. #columns, #column_1, #column_2 {
  86.  display: block;
  87.  float: none;
  88.  margin: 0;
  89.  position: absolute;
  90. }
  91. #column_3 {display: none;}
  92.  
  93. #columns {
  94.  width: 1240px;
  95.  height: 740px;
  96.  position: relative;
  97.  margin: 0 auto;
  98. }
  99.  
  100. #column_1 {
  101.  width: 100%;
  102.  height: 100%;
  103. }
  104.  
  105. #column_2 {
  106.  width: 445px;
  107.  height: 530px;
  108.  top: 40px;
  109.  left: 550px;
  110.  transform: translateZ(0);
  111. }
  112.  
  113. /* Scrollbars */
  114.  
  115. #columns ::-webkit-scrollbar {
  116.  background: #00000080;
  117.  width: 8px;
  118.  border-radius: 4px;
  119. }
  120.  
  121. #columns ::-webkit-scrollbar-thumb {
  122.  background: #DDA0DD80 content-box;
  123.  border: 1px solid transparent;
  124.  border-radius: 3px;
  125. }
  126.  
  127. .panel {
  128.  scrollbar-color: #DDA0DD80 #00000080;
  129.  scrollbar-width: thin;
  130. }
  131.  
  132. /* Panels */
  133.  
  134. .panel, .panel h2 {
  135.  color: #FFFFFF;
  136.  padding: 0;
  137.  margin: 0;
  138.  position: absolute;
  139.  box-sizing: border-box;
  140. }
  141. .panel {background: none;}
  142. .panel img {max-width: 100% !important;}
  143. #column_1 h2 {display: none;}
  144.  
  145. .panel a {
  146.  color: var(--pink-dark);
  147.  transition: color .5s ease-in-out;
  148. }
  149. .panel a:hover {color: var(--pink-lite);}
  150.  
  151. #column_2 .panel {
  152.  width: 100%;
  153.  height: calc(100% - 130px);
  154.  font: 11px/1.7 'Open Sans', sans-serif;
  155.  text-align: center;
  156.  bottom: 0;
  157.  overflow: hidden scroll;
  158.  transition: right .5s ease-in-out;
  159. }
  160. #id_about, #id_comments {padding-right: 10px;}
  161. #column_2 .panel:hover, #column_2 #id_about {transition-delay: .5s;}
  162. #column_2 .panel:hover {right: 0;}
  163.  
  164. #id_comments, #id_wishlist, #column_2 .panel:hover ~ #id_about {right: -100%;}
  165. #id_about, #id_comments:hover, #id_wishlist:hover {right: 0;}
  166. #column_2 .panel:hover ~ #id_about {transition-delay: 0s}
  167.  
  168. /* Headers */
  169.  
  170. #column_2 h2 {
  171.  font: 24px/90px 'Pirata One', serif;
  172.  text-align: center;
  173.  position: fixed;
  174.  transition: all .5s ease-in-out;
  175. }
  176.  
  177. #id_about h2, #column_2 .panel:hover h2 {filter: invert(100%);}
  178. #column_2 .panel:hover ~ #id_about h2 {filter: none;}
  179.  
  180. #id_comments h2, #id_wishlist h2 {
  181.  height: 88px;
  182.  top: 11px;
  183. }
  184.  
  185. #column_2 #id_about h2 {
  186.  background-position: -164px bottom;
  187.  width: 135px;
  188.  height: 80px;
  189.  line-height: 75px;
  190.  left: 147px;
  191.  top: 0;
  192. }
  193.  
  194. #column_2 #id_comments h2 {
  195.  background-position: left -31px bottom -1px;
  196.  width: 133px;
  197.  left: 0;
  198.  text-shadow: -1px -1px 1px #000, 1px 1px 1px #000;
  199. }
  200.  
  201. #column_2 #id_wishlist h2 {
  202.  background-position: -299px bottom;
  203.  width: 134px;
  204.  left: 296px;
  205.  text-shadow: -1px 1px 1px #000, 1px -1px 1px #000;
  206. }
  207.  
  208. #column_2 h2::after {
  209.  content: '';
  210.  display: none;
  211.  width: 100%;
  212.  position: absolute;
  213.  top: 80px;
  214.  left: 0;
  215. }
  216. #id_about h2::after {height: 51px;}
  217. #id_comments h2::after, #id_wishlist h2::after {height: 40px;}
  218. #column_2 .panel:hover h2::after {display: block;}
  219.  
  220. /* Contact Buttons */
  221.  
  222. #id_contact {
  223.  bottom: 75px;
  224.  left: 156px;
  225. }
  226. #id_contact li span {display: none;}
  227.  
  228. #id_contact ul:not(.buttons) li {
  229.  float: left;
  230.  background: url('https://i.imgur.com/R9wla40.png') #340000;
  231.  background-origin: content-box;
  232.  width: 40px;
  233.  height: 40px;
  234.  margin: 0 10px 0 0;
  235.  border: 3px solid #080000;
  236.  position: relative;
  237.  border-radius: 50%;
  238.  box-shadow: 0 0 10px plum;
  239.  transition: all .5s ease-in-out;
  240. }
  241. #id_contact ul:not(.buttons) li:nth-of-type(1) {background-position: 0 -40px;}
  242. #id_contact ul:not(.buttons) li:nth-of-type(2) {background-position: 0 -80px;}
  243. #id_contact ul:not(.buttons) li:nth-of-type(3) {background-position: 0 -120px;}
  244.  
  245. #id_contact ul:not(.buttons) li:hover {
  246.  background-color: peru;
  247.  border-color: #340000;
  248. }
  249.  
  250. #id_contact li a {
  251.  display: block;
  252.  width: 100%;
  253.  height: 100%;
  254.  font-size: 0;
  255.  position: absolute;
  256.  top: 0;
  257.  left: 0;
  258. }
  259.  
  260. /* Comments */
  261.  
  262. #id_comments {
  263.  display: flex;
  264.  flex-flow: row wrap;
  265.  justify-content: center;
  266. }
  267.  
  268. #id_comments #alerts_banner {display: none;}
  269. #id_comments #alert_container {padding: 0;}
  270. #id_comments .dropBox {display: none;}
  271. #id_comments dd {margin: 0 0 15px 0;}
  272. #id_comments dd:last-of-type {margin: 0;}
  273.  
  274. #id_comments h2 + div a, #id_comments h2 ~ p a {
  275.  font: 400 16px/1 'Pirata One', sans-serif;
  276.  text-transform: uppercase;
  277.  margin: 0 5px;
  278. }
  279. #id_comments h2 + div {float: left;}
  280.  
  281. #id_comments dt {
  282.  display: flex;
  283.  flex-flow: column;
  284.  height: auto;
  285.  line-height: 1.4;
  286.  text-align: inherit;
  287.  border: none;
  288. }
  289. #id_comments .username {float: none;}
  290.  
  291. #id_comments .date {
  292.  align-self: center;
  293.  display: block;
  294.  width: max-content;
  295.  text-indent: -5px;
  296.  text-transform: uppercase;
  297.  margin-bottom: 2px;
  298.  overflow: hidden;
  299. }
  300. #id_comments .date a {display: none;}
  301.  
  302. #id_comments dt::after {
  303.  content: '• • •';
  304.  line-height: 10px;
  305.  opacity: .5;
  306. }
  307.  
  308. /* Wish List */
  309.  
  310. #id_wishlist {
  311.  display: flex;
  312.  flex-flow: row wrap;
  313.  align-content: flex-start;
  314.  justify-content: center;
  315. }
  316. #id_wishlist .premium_sparkle {display: none;}
  317.  
  318. .owner_checkmark {
  319.  margin: 0;
  320.  right: 4px;
  321.  bottom: 3px;
  322. }
  323.  
  324. #id_wishlist .item {
  325.  background: #000;
  326.  width: 30px;
  327.  height: 30px;
  328.  padding: 2px;
  329.  margin: 6px;
  330.  position: relative;
  331.  border: 2px solid #000;
  332.  border-radius: 7px;
  333.  box-shadow: 0 0 5px #DDA0DDA0;
  334.  transition: all .5s ease-in-out;
  335. }
  336.  
  337. #id_wishlist .item:hover {
  338.  background: peru;
  339.  border-color: #340000;
  340. }
  341.  
  342. /* Animations */
  343.  
  344. @keyframes CandleFlicker {
  345.  from {background-position-x: 0}
  346.  to {background-position-x: -3100px;}
  347. }
  348.  
  349. @keyframes CandleFloat {
  350.  from {margin-top: -10px;}
  351.  to {margin-top: 10px;}
  352. }
  353.  
  354. @keyframes CandleOrb {
  355.  0% {opacity: .75;}
  356.  5% {opacity: .75;}
  357.  10% {opacity: .7;}
  358.  15% {opacity: .8;}
  359.  20% {opacity: .7;}
  360.  25% {opacity: .9;}
  361.  30% {opacity: .8;}
  362.  35% {opacity: 0.7;}
  363.  40% {opacity: .75;}
  364.  45% {opacity: .75;}
  365.  50% {opacity: 0.9;}
  366.  55% {opacity: .75;}
  367.  60% {opacity: .7;}
  368.  65% {opacity: .75;}
  369.  70% {opacity: .85;}
  370.  75% {opacity: .7;}
  371.  80% {opacity: .75;}
  372.  85% {opacity: .9;}
  373.  90% {opacity: .75;}
  374.  95% {opacity: .6;}
  375.  100% {opacity: .75;}
  376. }
  377.  
  378. @keyframes HeartBeat {
  379.  0% {transform: scale(.5);}
  380.  5% {transform: scale(.575);}
  381.  10% {transform: scale(.6);}
  382.  15% {transform: scale(.525);}
  383.  20% {transform: scale(.5);}
  384.  25% {transform: scale(.575);}
  385.  30% {transform: scale(.6);}
  386.  35% {transform: scale(.525);}
  387.  40% {transform: scale(.5);}
  388.  100% {transform: scale(.5);}
  389. }
  390.  
  391. #column_1 div:first-of-type {
  392.  width: 100%;
  393.  height: 100%;
  394. }
  395. #column_1 .custom_panel {pointer-events: none;}
  396.  
  397. #column_1 b, #column_1 b::before, #column_1 b::after, #column_1 i {
  398.  content: '';
  399.  display: block;
  400.  position: absolute;
  401. }
  402.  
  403. #column_1 b:first-of-type {
  404.  top: 290px;
  405.  left: 270px;
  406. }
  407.  
  408. #column_1 b:nth-of-type(n+2) {
  409.  background-position: bottom left;
  410.  width: 31px;
  411.  height: 68px;
  412.  animation: CandleFloat 4s ease-in-out infinite alternate;
  413. }
  414.  
  415. #column_1 b:nth-of-type(2) {
  416.  top: 115px;
  417.  right: 152px;
  418. }
  419.  
  420. #column_1 b:nth-of-type(3) {
  421.  top: 305px;
  422.  right: 83px;
  423.  animation-delay: -1s;
  424. }
  425.  
  426. #column_1 b:nth-of-type(4) {
  427.  top: 515px;
  428.  right: 122px;
  429.  animation-delay: -2s;
  430. }
  431.  
  432. #column_1 b:nth-of-type(5) {
  433.  top: 608px;
  434.  right: 332px;
  435.  animation-delay: -3s;
  436. }
  437.  
  438. #column_1 b::before {
  439.  background: radial-gradient(circle at center, #FFC00080, #FF800040, transparent 70%);
  440.  animation: CandleOrb 8s linear infinite;
  441. }
  442.  
  443. #column_1 b:first-of-type::before {
  444.  width: 300px;
  445.  height: 300px;
  446.  transform: translate(-50%, -55%);
  447.  mix-blend-mode: hard-light;
  448. }
  449.  
  450. #column_1 b:nth-of-type(n+2)::before {
  451.  width: 150px;
  452.  height: 150px;
  453.  transform: translate(-39%, -53%);
  454. }
  455. #column_1 b:nth-of-type(3)::before {animation-delay: -2s;}
  456. #column_1 b:nth-of-type(4)::before {animation-delay: -4s;}
  457. #column_1 b:nth-of-type(5)::before {animation-delay: -6s;}
  458.  
  459. #column_1 b::after {
  460.  width: 100px;
  461.  transform-origin: bottom center;
  462.  mix-blend-mode: screen;
  463.  animation: CandleFlicker 2s steps(31, start) infinite;
  464. }
  465.  
  466. #column_1 b:first-of-type::after {
  467.  background: url('https://i.imgur.com/n0bIc5H.png');
  468.  height: 240px;
  469.  transform: scale(.7, .5) translate(-72%, -185%);
  470. }
  471.  
  472. #column_1 b:nth-of-type(n+2)::after {
  473.  background: url('https://i.imgur.com/U2Zrsx5.png');
  474.  height: 220px;
  475.  transform: translate(-33px, -95%) scale(.3, .2);
  476.  opacity: .9;
  477. }
  478. #column_1 b:nth-of-type(2)::after {animation-delay: -.25s;}
  479. #column_1 b:nth-of-type(3)::after {animation-delay: -.75s;}
  480. #column_1 b:nth-of-type(4)::after {animation-delay: -.5s;}
  481.  
  482. #column_1 i {
  483.  width: 206px;
  484.  height: 201px;
  485.  top: 314px;
  486.  left: 318px;
  487.  transform: scale(.5);
  488.  animation: HeartBeat 1.5s linear infinite;
  489. }
  490. #column_1 i:nth-of-type(1) {background-position: bottom right; mix-blend-mode: screen;}
  491. #column_1 i:nth-of-type(2) {background-position: bottom right -206px;}
  492.  
  493. /* Misc */
  494.  
  495. #pictures_container, #texts_container {
  496.  width: 1px;
  497.  height: 1px;
  498.  position: absolute;
  499.  left: 50%;
  500. }
  501.  
  502. /* Flex Rules */
  503.  
  504. #columns, #pictures_container, #texts_container {top: 45px;}
  505. @media screen and (min-height: 820px) {#columns, #pictures_container, #texts_container {top: calc(50% - 370px + 5px);}}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement