Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- @import url('https://fonts.googleapis.com/css?family=Press+Start+2P');
- /** Полоса доната */
- .dg-bar {
- border-radius: 1rem;
- background: rgba(0, 0, 0, 0) !important;
- border: none !important;
- overflow: visible !important;
- box-shadow: none !important;
- }
- /** Контейнер */
- .dg-bar-container {
- padding: 10px 0 !important;
- }
- /** Финиш */
- .dg-bar:after {
- content: '';
- background: url('http://i51.mindmix.ru/46/69/356946/64/8349064/tumblr_n6edbarXGk1snc5kxo1_500.gif') 100% 100% no-repeat;
- background-size: cover;
- width: 4rem;
- height: 4rem;
- position: absolute;
- z-index: -1;
- top: -0.3rem;
- right: 0.7rem;
- animation: goal 30s infinite linear;
- }
- /** Анимации */
- @keyframes rainbow {
- 0% {
- background-position-x: 11.5rem;
- }
- 100% {
- background-position-x: 0rem;
- }
- }
- @keyframes player {
- 0% {
- background-position-y: -0.5rem;
- }
- 50% {
- background-position-y: -0.1rem;
- }
- 100% {
- background-position-y: -0.5rem;
- }
- }
- @keyframes goal {
- 0%, 2%, 4%, 100% {
- margin-top: -0.1rem;
- }
- 1%, 3% {
- margin-top: 0.1rem;
- }
- }
- /** Полоса прогресса */
- .dg-bar-line {
- background: none !important;
- border: none !important;
- overflow: visible !important;
- margin-top: -0.5rem;
- height: calc(100% + 1rem) !important;
- }
- .dg-bar-line:before {
- content: '';
- background: url('http://klybok.net/streamer/cat.png');
- background-repeat: repeat-x;
- background-size: 11.5rem 2.9rem !important;
- position: absolute;
- left: 0;
- right: 0;
- top: 0.2rem;
- bottom: 0;
- animation: rainbow 3s infinite linear;
- }
- /** Персонаж */
- .dg-bar-line:after {
- content: '';
- background: url('http://www.pngall.com/wp-content/uploads/2016/06/Nyan-Cat-Transparent.png') 100% 100% no-repeat;
- background-size: cover;
- width: 6.4rem;
- height: 4.2rem;
- position: absolute;
- z-index: 3;
- top: -0.4rem;
- right: -2.5rem;
- animation: player 1.3s infinite linear;
- }
- .plain-text {
- color: #fb8527 !important;
- }
- .dg-bar-text {
- color: #fff !important;
- text-shadow: 2px 2px 0 black !important;
- position: absolute;
- z-index: 5;
- margin-bottom: -6rem;
- }
- .dg-title {
- margin-bottom: 0.3rem;
- }
- /** Шрифт */
- * {
- font-family: 'Press Start 2P', cursive !important;
- }
- .dg-title {
- font-size: 1.1rem !important;
- font-weight: 100 !important;
- word-spacing: -0.6rem !important;
- }
- .dg-bar-text {
- font-size: 1rem !important;
- word-spacing: -0.6rem !important;
- text-align: left !important;
- padding-left: 10px;
- }
- .right.plain-text{
- margin-top: 0.4rem;
- font-size: 0.9rem !important;
- word-spacing: -0.6rem !important;
- }
- .left.plain-text {
- display: none !important;;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement