-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCSS.css
134 lines (116 loc) · 3.27 KB
/
CSS.css
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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css');
#alert-box {
}
#alert-image-container {
position: absolute;
width: calc({{imageSize}}px * 50);
height: calc({{imageSize}}px * 50);
background-image: url(https://data.whicdn.com/images/252018693/original.gif);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
#bubble-container {
position: absolute;
max-width: calc(100% - ({{imageSize}}px * 50) - 50px);
min-width: 200px;
left: calc( ({{imageSize}}px * 50) + 10px);
top: calc( ( ({{imageSize}}px * 50) / 10) * {{bubbleVAlign}} + (({{imageSize}}px * 50)/2) );
transform: translatey(-50%);
}
#bubble {
background: {{bubbleColor}};
border: {{borderWeight}}px solid {{borderColor}};
border-radius: 15px;
padding: 15px;
}
#bubble:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-right: calc({{tailLength}}px + {{borderWeight}}px) solid {{borderColor}};
border-left: calc({{tailLength}}px + {{borderWeight}}px) solid transparent;
border-top: calc({{tailLength}}px + {{borderWeight}}px) solid {{borderColor}};
border-bottom: calc({{tailLength}}px + {{borderWeight}}px) solid transparent;
left: calc((-2*{{borderWeight}}px) - 2*{{tailLength}}px) ;
top: 20%;
}
#bubble:after {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-right: calc({{borderWeight}}px + {{tailLength}}px) solid {{bubbleColor}};
border-left: calc({{borderWeight}}px + {{tailLength}}px) solid transparent;
border-top: calc({{borderWeight}}px + {{tailLength}}px) solid {{bubbleColor}};
border-bottom: calc({{borderWeight}}px + {{tailLength}}px) solid transparent;
left: calc(-0.5 *{{borderWeight}}px - 2* {{tailLength}}px);
top: calc(20% + calc({{borderWeight}}px * 0.7));
}
#bubble-header {
display: inline-block;
position: absolute;
min-width: 30%;
max-width: 70%;
background:pink;
padding: calc({{headerFontSize}}px/3) calc({{headerFontSize}}px/2) calc({{headerFontSize}}px/5);
border-radius: 15px;
top: calc(10px + 5px + 10px);
left: calc(10px + 5px + 10px);
transform: translatey(-100%);
font-size: 25px;
z-index: 5;
text-align: center;
font-family: {{headerFont}}, sans-serif;
font-size: {{headerFontSize}}px;
color: {{headerFontColor}};
}
#bubble-icon {
background-image: url({{iconURL}});
background-repeat: no-repeat;
background-position: center;
background-size: contain;
width: 50px;
height: 50px;
position: absolute;
right: 0;
top: 0;
transform: translatex(0%) translatey(-25%);
}
#main-text {
font-family: {{mainFont}}, sans-serif;
font-size: {{mainFontSize}}px;
color: {{mainFontColor}};
}
#secondary-text {
font-family: {{subFont}}, sans-serif;
font-size: {{subFontSize}}px;
color: {{subFontColor}};
}
.animated-letter {
animation-duration: 2s;
animation-iteration-count: infinite;
display: inline-block;
animation-fill-mode: both;
color: {{aniColor}};
}
.animated-letter:nth-child(1) {
animation-delay: 0s;
}
.animated-letter:nth-child(2) {
animation-delay: 0.1s;
}
.animated-letter:nth-child(3) {
animation-delay: 0.2s;
}
.animated-letter:nth-child(4) {
animation-delay: 0.3s;
}
.animated-letter:nth-child(5) {
animation-delay: 0.4s;
}
#alert-image-container.debug, #bubble-container.debug{
border: 2px dotted red;
background-color: rgba(0,255,0,0.25);
}