Skip to content

Commit 4dd309b

Browse files
adamschwartzadamschwartz
committed
Merge pull request CodeByZach#69 from kennyglenn/master
added atom theme
2 parents 08cdce5 + df9cff2 commit 4dd309b

File tree

2 files changed

+343
-0
lines changed

2 files changed

+343
-0
lines changed

‎templates/pace-theme-center-atom.tmpl.css‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
.pace.pace-inactive {
2+
display: none;
3+
}
4+
5+
.pace {
6+
-webkit-pointer-events: none;
7+
pointer-events: none;
8+
9+
-webkit-user-select: none;
10+
-moz-user-select: none;
11+
user-select: none;
12+
13+
z-index: 2000;
14+
position: fixed;
15+
height: 60px;
16+
width: 100px;
17+
margin: auto;
18+
top: 0;
19+
left: 0;
20+
right: 0;
21+
bottom: 0;
22+
}
23+
24+
.pace .pace-progress {
25+
z-index: 2000;
26+
position: absolute;
27+
height: 60px;
28+
width: 100px !important;
29+
}
30+
31+
.pace .pace-progress:before {
32+
content: attr(data-progress-text);
33+
text-align: center;
34+
color: #fff;
35+
background: `args.color || "#29d"`;
36+
border-radius: 50%;
37+
font-family: "Helvetica Neue", sans-serif;
38+
font-size: 14px;
39+
font-weight: 100;
40+
line-height: 1;
41+
padding: 20% 0 7px;
42+
width: 50%;
43+
height: 40%;
44+
margin: 10px 0 0 30px;
45+
display: block;
46+
z-index: 999;
47+
position: absolute;
48+
}
49+
50+
.pace .pace-progress:after {
51+
border-radius: 50%;
52+
border: 5px solid `args.color || "#29d"`;
53+
content: ' ';
54+
display: block;
55+
position: absolute;
56+
top: 0;
57+
left: 0;
58+
height: 60px;
59+
width: 100px;
60+
61+
-webkit-transform: rotate(90deg);
62+
-moz-transform: rotate(90deg);
63+
-o-transform: rotate(90deg);
64+
transform: rotate(90deg);
65+
-webkit-animation: spin-3 2s linear infinite;
66+
-moz-animation: spin-3 2s linear infinite;
67+
-o-animation: spin-3 2s linear infinite;
68+
animation: spin-3 2s linear infinite;
69+
}
70+
71+
.pace .pace-activity {
72+
font-size: 15px;
73+
line-height: 1;
74+
z-index: 2000;
75+
position: absolute;
76+
height: 60px;
77+
width: 100px;
78+
79+
display: block;
80+
}
81+
82+
.pace .pace-activity:before {
83+
border-radius: 50%;
84+
border: 5px solid `args.color || "#29d"`;
85+
content: ' ';
86+
display: block;
87+
position: absolute;
88+
top: 0;
89+
left: 0;
90+
height: 60px;
91+
width: 100px;
92+
93+
-webkit-animation: spin-1 2s linear infinite;
94+
-moz-animation: spin-1 2s linear infinite;
95+
-o-animation: spin-1 2s linear infinite;
96+
animation: spin-1 2s linear infinite;
97+
}
98+
99+
.pace .pace-activity:after{
100+
border-radius: 50%;
101+
border: 5px solid `args.color || "#29d"`;
102+
content: ' ';
103+
display: block;
104+
position: absolute;
105+
top: 0;
106+
left: 0;
107+
height: 60px;
108+
width: 100px;
109+
110+
-webkit-transform: rotate(45deg);
111+
-moz-transform: rotate(45deg);
112+
-o-transform: rotate(45deg);
113+
transform: rotate(45deg);
114+
-webkit-animation: spin-2 2s linear infinite;
115+
-moz-animation: spin-2 2s linear infinite;
116+
-o-animation: spin-2 2s linear infinite;
117+
animation: spin-2 2s linear infinite;
118+
119+
}
120+
121+
@-webkit-keyframes spin-1 {
122+
0% { -webkit-transform: rotate(0deg); }
123+
100%{ -webkit-transform: rotate(359deg);}
124+
}
125+
@-moz-keyframes spin-1 {
126+
0% { -moz-transform: rotate(0deg); }
127+
100%{ -moz-transform: rotate(359deg);}
128+
}
129+
@-o-keyframes spin-1 {
130+
0% { -o-transform: rotate(0deg); }
131+
100%{ -o-transform: rotate(359deg);}
132+
}
133+
@keyframes spin-1 {
134+
0% { transform: rotate(0deg); }
135+
100%{ transform: rotate(359deg);}
136+
}
137+
138+
@-webkit-keyframes spin-2 {
139+
0% { -webkit-transform: rotate(59.8deg); }
140+
100%{ -webkit-transform: rotate(418.8deg);}
141+
}
142+
@-moz-keyframes spin-2 {
143+
0% { -moz-transform: rotate(59.8deg); }
144+
100%{ -moz-transform: rotate(418.8deg);}
145+
}
146+
@-o-keyframes spin-2 {
147+
0% { -o-transform: rotate(59.8deg); }
148+
100%{ -o-transform: rotate(418.8deg);}
149+
}
150+
@keyframes spin-2 {
151+
0% { transform: rotate(59.8deg); }
152+
100%{ transform: rotate(418.8deg);}
153+
}
154+
155+
@-webkit-keyframes spin-3 {
156+
0% { -webkit-transform: rotate(119.6deg); }
157+
100%{ -webkit-transform: rotate(478.6deg);}
158+
}
159+
@-moz-keyframes spin-3 {
160+
0% { -moz-transform: rotate(119.6deg); }
161+
100%{ -moz-transform: rotate(478.6deg);}
162+
}
163+
@-o-keyframes spin-3 {
164+
0% { -o-transform: rotate(119.6deg); }
165+
100%{ -o-transform: rotate(478.6deg);}
166+
}
167+
@keyframes spin-3 {
168+
0% { transform: rotate(119.6deg); }
169+
100%{ transform: rotate(478.6deg);}
170+
}
171+

‎themes/pace-theme-center-atom.css‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
/* This is a compiled file, you should be editing the file in the templates directory */
2+
.pace.pace-inactive {
3+
display: none;
4+
}
5+
6+
.pace {
7+
-webkit-pointer-events: none;
8+
pointer-events: none;
9+
10+
-webkit-user-select: none;
11+
-moz-user-select: none;
12+
user-select: none;
13+
14+
z-index: 2000;
15+
position: fixed;
16+
height: 60px;
17+
width: 100px;
18+
margin: auto;
19+
top: 0;
20+
left: 0;
21+
right: 0;
22+
bottom: 0;
23+
}
24+
25+
.pace .pace-progress {
26+
z-index: 2000;
27+
position: absolute;
28+
height: 60px;
29+
width: 100px !important;
30+
}
31+
32+
.pace .pace-progress:before {
33+
content: attr(data-progress-text);
34+
text-align: center;
35+
color: #fff;
36+
background: #29d;
37+
border-radius: 50%;
38+
font-family: "Helvetica Neue", sans-serif;
39+
font-size: 14px;
40+
font-weight: 100;
41+
line-height: 1;
42+
padding: 20% 0 7px;
43+
width: 50%;
44+
height: 40%;
45+
margin: 10px 0 0 30px;
46+
display: block;
47+
z-index: 999;
48+
position: absolute;
49+
}
50+
51+
.pace .pace-progress:after {
52+
border-radius: 50%;
53+
border: 5px solid #29d;
54+
content: ' ';
55+
display: block;
56+
position: absolute;
57+
top: 0;
58+
left: 0;
59+
height: 60px;
60+
width: 100px;
61+
62+
-webkit-transform: rotate(90deg);
63+
-moz-transform: rotate(90deg);
64+
-o-transform: rotate(90deg);
65+
transform: rotate(90deg);
66+
-webkit-animation: spin-3 2s linear infinite;
67+
-moz-animation: spin-3 2s linear infinite;
68+
-o-animation: spin-3 2s linear infinite;
69+
animation: spin-3 2s linear infinite;
70+
}
71+
72+
.pace .pace-activity {
73+
font-size: 15px;
74+
line-height: 1;
75+
z-index: 2000;
76+
position: absolute;
77+
height: 60px;
78+
width: 100px;
79+
80+
display: block;
81+
}
82+
83+
.pace .pace-activity:before {
84+
border-radius: 50%;
85+
border: 5px solid #29d;
86+
content: ' ';
87+
display: block;
88+
position: absolute;
89+
top: 0;
90+
left: 0;
91+
height: 60px;
92+
width: 100px;
93+
94+
-webkit-animation: spin-1 2s linear infinite;
95+
-moz-animation: spin-1 2s linear infinite;
96+
-o-animation: spin-1 2s linear infinite;
97+
animation: spin-1 2s linear infinite;
98+
}
99+
100+
.pace .pace-activity:after{
101+
border-radius: 50%;
102+
border: 5px solid #29d;
103+
content: ' ';
104+
display: block;
105+
position: absolute;
106+
top: 0;
107+
left: 0;
108+
height: 60px;
109+
width: 100px;
110+
111+
-webkit-transform: rotate(45deg);
112+
-moz-transform: rotate(45deg);
113+
-o-transform: rotate(45deg);
114+
transform: rotate(45deg);
115+
-webkit-animation: spin-2 2s linear infinite;
116+
-moz-animation: spin-2 2s linear infinite;
117+
-o-animation: spin-2 2s linear infinite;
118+
animation: spin-2 2s linear infinite;
119+
120+
}
121+
122+
@-webkit-keyframes spin-1 {
123+
0% { -webkit-transform: rotate(0deg); }
124+
100%{ -webkit-transform: rotate(359deg);}
125+
}
126+
@-moz-keyframes spin-1 {
127+
0% { -moz-transform: rotate(0deg); }
128+
100%{ -moz-transform: rotate(359deg);}
129+
}
130+
@-o-keyframes spin-1 {
131+
0% { -o-transform: rotate(0deg); }
132+
100%{ -o-transform: rotate(359deg);}
133+
}
134+
@keyframes spin-1 {
135+
0% { transform: rotate(0deg); }
136+
100%{ transform: rotate(359deg);}
137+
}
138+
139+
@-webkit-keyframes spin-2 {
140+
0% { -webkit-transform: rotate(59.8deg); }
141+
100%{ -webkit-transform: rotate(418.8deg);}
142+
}
143+
@-moz-keyframes spin-2 {
144+
0% { -moz-transform: rotate(59.8deg); }
145+
100%{ -moz-transform: rotate(418.8deg);}
146+
}
147+
@-o-keyframes spin-2 {
148+
0% { -o-transform: rotate(59.8deg); }
149+
100%{ -o-transform: rotate(418.8deg);}
150+
}
151+
@keyframes spin-2 {
152+
0% { transform: rotate(59.8deg); }
153+
100%{ transform: rotate(418.8deg);}
154+
}
155+
156+
@-webkit-keyframes spin-3 {
157+
0% { -webkit-transform: rotate(119.6deg); }
158+
100%{ -webkit-transform: rotate(478.6deg);}
159+
}
160+
@-moz-keyframes spin-3 {
161+
0% { -moz-transform: rotate(119.6deg); }
162+
100%{ -moz-transform: rotate(478.6deg);}
163+
}
164+
@-o-keyframes spin-3 {
165+
0% { -o-transform: rotate(119.6deg); }
166+
100%{ -o-transform: rotate(478.6deg);}
167+
}
168+
@keyframes spin-3 {
169+
0% { transform: rotate(119.6deg); }
170+
100%{ transform: rotate(478.6deg);}
171+
}
172+

0 commit comments

Comments
 (0)