Advertisement
Guest User

Untitled

a guest
May 22nd, 2019
91
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.80 KB | None | 0 0
  1.  
  2.  
  3.  
  4.  
  5.  
  6. @import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
  7.  
  8. /** Полоса доната */
  9. .dg-bar {
  10.   border-radius: 1rem;
  11.   background: rgba(0, 0, 0, 0) !important;
  12.   border: none !important;
  13.   overflow: visible !important;
  14.   box-shadow: none !important;
  15. }
  16.  
  17. /** Контейнер */
  18. .dg-bar-container {
  19.   padding: 10px 0 !important;
  20. }
  21.  
  22. /** Финиш */
  23.  
  24. .dg-bar:after {
  25.   content: '';
  26.   background: url('http://i51.mindmix.ru/46/69/356946/64/8349064/tumblr_n6edbarXGk1snc5kxo1_500.gif') 100% 100% no-repeat;
  27.   background-size: cover;
  28.   width: 4.5rem;
  29.   height: 4.5rem;
  30.   position: absolute;
  31.   z-index: -1;
  32.   top: -0.7rem;
  33.   right: 0.7rem;
  34.   animation: goal 30s infinite linear;
  35. }
  36.  
  37. /** Анимации */
  38. @keyframes rainbow {
  39.   0% {
  40.     background-position-x: 11.5rem;
  41.   }
  42.   100% {
  43.     background-position-x: 0rem;
  44.   }
  45. }
  46.  
  47. @keyframes player {
  48.   0% {
  49.     background-position-y: -0.5rem;
  50.   }
  51.   50% {
  52.     background-position-y: -0.1rem;
  53.   }
  54.   100% {
  55.     background-position-y: -0.5rem;
  56.   }
  57. }
  58.  
  59. @keyframes goal {
  60.   0%, 2%, 4%, 100% {
  61.     margin-top: -0.1rem;
  62.   }
  63.   1%, 3% {
  64.     margin-top: 0.1rem;
  65.   }
  66. }
  67.  
  68. /** Полоса прогресса */
  69. .dg-bar-line {
  70.   background: none !important;
  71.   border: none !important;
  72.   overflow: visible !important;
  73.   margin-top: -0.5rem;
  74.   height: calc(100% + 1rem) !important;
  75. }
  76.  
  77. .dg-bar-line:before {
  78.   content: '';
  79.   background: url('http://klybok.net/streamer/cat.png');
  80.   background-repeat: repeat-x;
  81.   background-size: 11.5rem 2.9rem !important;
  82.  
  83.   position: absolute;
  84.   left: 0;
  85.   right: 0;
  86.   top: 0.2rem;
  87.   bottom: 0;
  88.  
  89.   animation: rainbow 3s infinite linear;
  90. }
  91.  
  92. /** Персонаж */
  93. .dg-bar-line:after {
  94.   content: '';
  95.   background: url('http://www.pngall.com/wp-content/uploads/2016/06/Nyan-Cat-Transparent.png') 100% 100% no-repeat;
  96.   background-size: cover;
  97.   width: 6.4rem;
  98.   height: 4.2rem;
  99.   position: absolute;
  100.   z-index: 3;
  101.   top: -0.4rem;
  102.   right: -2.5rem;
  103.   animation: player 1.3s infinite linear;
  104. }
  105.  
  106. .plain-text {
  107.   color: #fb8527 !important;
  108. }
  109.  
  110. .dg-bar-text {
  111.   color: #fff !important;
  112.   text-shadow: 2px 2px 0 black !important;
  113.   position: absolute;
  114.   z-index: 5;
  115.   margin-bottom: -6rem;
  116. }
  117.  
  118. .dg-title {
  119.   margin-bottom: 0.3rem;
  120. }
  121.  
  122. /** Шрифт */
  123.  
  124. * {
  125.   font-family: 'Press Start 2P', cursive !important;
  126. }
  127.  
  128. .dg-title {
  129.   font-size: 1.1rem !important;
  130.   font-weight: 100 !important;
  131.   word-spacing: -0.6rem !important;
  132. }
  133.  
  134. .dg-bar-text {
  135.   font-size: 1rem !important;
  136.   word-spacing: -0.6rem !important;
  137.   text-align: left !important;
  138.   padding-left: 10px;
  139. }
  140.  
  141. .right.plain-text{
  142.   margin-top: 0.4rem;
  143.   font-size: 0.9rem !important;
  144.   word-spacing: -0.6rem !important;
  145. }
  146.  
  147. .left.plain-text {
  148.   display: none !important;;
  149. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement