kudobox-builder/style.css at master · sery0ga/kudobox-builder · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109

/* Fonts for cards */
@font-face {
  font-family: 'festus';
  src: url('fonts/festus.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'handyboldcyr';
  src: url('fonts/handyboldcyr.ttf');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'marckscript';
  src: url('fonts/marckscript.ttf');
  font-weight: normal;
  font-style: normal;
}


body {
  text-align: center;
  margin: 0 auto;
  background-color: #468AC2;
}

/* Type card */

.festus {
  font-family: 'festus', 'Arial';
}

.handyboldcyr {
  font-family: 'handyboldcyr', 'Arial';
}

.marckscript {
  font-family: 'marckscript', 'Arial';
}

.kudo_preloader {
  margin: 180px auto;
}

.kudo_card {
  background-size: 100% 100%;
  background-repeat: no-repeat;
  line-height: 130%;
  width: 100%;
  outline: 0;
  margin: 0 auto;
  text-align: left;
}

.kudo_preloader {
  width: 60px;
  height: 50px;
  text-align: center;

  > div {
    background-color: #fff;
    height: 100%;
    width: 8px;
    display: inline-block;

    -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
    animation: stretchdelay 1.2s infinite ease-in-out;
  }

  .rect2 {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s;
  }

  .rect3 {
    -webkit-animation-delay: -1.0s;
    animation-delay: -1.0s;
  }

  .rect4 {
    -webkit-animation-delay: -0.9s;
    animation-delay: -0.9s;
  }

  .rect5 {
    -webkit-animation-delay: -0.8s;
    animation-delay: -0.8s;
  }

}

@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
  20% { -webkit-transform: scaleY(1.0) }
}

@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}