← Back to branch summary

~xibo-maintainers/xibo/tempel

« back to all changes in this revision

Viewing changes to modules/vendor/flipclock.css

  • Committer: Dan Garner
  • Date: 2016-02-18 16:07:16 UTC
  • mfrom: (454.4.137)
  • Revision ID: git-v1:8867f12675bc9e0e67e7e622c80da7471b9f294a
Merge pull request #139 from dasgarner/feature/nested-display-groups

Feature/nested display groups

Show diffs side-by-side

added added

removed removed

Lines of Context:
modules/vendor/flipclock.css
1
 
/* Get the bourbon mixin from http://bourbon.io */
2
 
/* Reset */
3
 
.flip-clock-wrapper * {
4
 
    -webkit-box-sizing: border-box;
5
 
    -moz-box-sizing: border-box;
6
 
    -ms-box-sizing: border-box;
7
 
    -o-box-sizing: border-box;
8
 
    box-sizing: border-box;
9
 
    -webkit-backface-visibility: hidden;
10
 
    -moz-backface-visibility: hidden;
11
 
    -ms-backface-visibility: hidden;
12
 
    -o-backface-visibility: hidden;
13
 
    backface-visibility: hidden;
14
 
}
15
 
 
16
 
.flip-clock-wrapper a {
17
 
    cursor: pointer;
18
 
    text-decoration: none;
19
 
    color: #ccc; }
20
 
 
21
 
.flip-clock-wrapper a:hover {
22
 
    color: #fff; }
23
 
 
24
 
.flip-clock-wrapper ul {
25
 
    list-style: none; }
26
 
 
27
 
.flip-clock-wrapper.clearfix:before,
28
 
.flip-clock-wrapper.clearfix:after {
29
 
    content: " ";
30
 
    display: table; }
31
 
 
32
 
.flip-clock-wrapper.clearfix:after {
33
 
    clear: both; }
34
 
 
35
 
.flip-clock-wrapper.clearfix {
36
 
    *zoom: 1; }
37
 
 
38
 
/* Main */
39
 
.flip-clock-wrapper {
40
 
    font: normal 11px "Helvetica Neue", Helvetica, sans-serif;
41
 
    -webkit-user-select: none; }
42
 
 
43
 
.flip-clock-meridium {
44
 
    background: none !important;
45
 
    box-shadow: 0 0 0 !important;
46
 
    font-size: 36px !important; }
47
 
 
48
 
.flip-clock-meridium a { color: #313333; }
49
 
 
50
 
.flip-clock-wrapper {
51
 
    text-align: center;
52
 
    position: relative;
53
 
    width: 100%;
54
 
    margin: 1em;
55
 
}
56
 
 
57
 
.flip-clock-wrapper:before,
58
 
.flip-clock-wrapper:after {
59
 
    content: " "; /* 1 */
60
 
    display: table; /* 2 */
61
 
}
62
 
.flip-clock-wrapper:after {
63
 
    clear: both;
64
 
}
65
 
 
66
 
/* Skeleton */
67
 
.flip-clock-wrapper ul {
68
 
    position: relative;
69
 
    float: left;
70
 
    margin: 5px;
71
 
    width: 60px;
72
 
    height: 90px;
73
 
    font-size: 80px;
74
 
    font-weight: bold;
75
 
    line-height: 87px;
76
 
    border-radius: 6px;
77
 
    background: #000;
78
 
}
79
 
 
80
 
.flip-clock-wrapper ul li {
81
 
    z-index: 1;
82
 
    position: absolute;
83
 
    left: 0;
84
 
    top: 0;
85
 
    width: 100%;
86
 
    height: 100%;
87
 
    line-height: 87px;
88
 
    text-decoration: none !important;
89
 
}
90
 
 
91
 
.flip-clock-wrapper ul li:first-child {
92
 
    z-index: 2; }
93
 
 
94
 
.flip-clock-wrapper ul li a {
95
 
    display: block;
96
 
    height: 100%;
97
 
    -webkit-perspective: 200px;
98
 
    -moz-perspective: 200px;
99
 
    perspective: 200px;
100
 
    margin: 0 !important;
101
 
    overflow: visible !important;
102
 
    cursor: default !important; }
103
 
 
104
 
.flip-clock-wrapper ul li a div {
105
 
    z-index: 1;
106
 
    position: absolute;
107
 
    left: 0;
108
 
    width: 100%;
109
 
    height: 50%;
110
 
    font-size: 80px;
111
 
    overflow: hidden;
112
 
    outline: 1px solid transparent; }
113
 
 
114
 
.flip-clock-wrapper ul li a div .shadow {
115
 
    position: absolute;
116
 
    width: 100%;
117
 
    height: 100%;
118
 
    z-index: 2; }
119
 
 
120
 
.flip-clock-wrapper ul li a div.up {
121
 
    -webkit-transform-origin: 50% 100%;
122
 
    -moz-transform-origin: 50% 100%;
123
 
    -ms-transform-origin: 50% 100%;
124
 
    -o-transform-origin: 50% 100%;
125
 
    transform-origin: 50% 100%;
126
 
    top: 0; }
127
 
 
128
 
.flip-clock-wrapper ul li a div.up:after {
129
 
    content: "";
130
 
    position: absolute;
131
 
    top: 44px;
132
 
    left: 0;
133
 
    z-index: 5;
134
 
    width: 100%;
135
 
    height: 3px;
136
 
    background-color: #000;
137
 
    background-color: rgba(0, 0, 0, 0.4); }
138
 
 
139
 
.flip-clock-wrapper ul li a div.down {
140
 
    -webkit-transform-origin: 50% 0;
141
 
    -moz-transform-origin: 50% 0;
142
 
    -ms-transform-origin: 50% 0;
143
 
    -o-transform-origin: 50% 0;
144
 
    transform-origin: 50% 0;
145
 
    bottom: 0;
146
 
    border-bottom-left-radius: 6px;
147
 
    border-bottom-right-radius: 6px;
148
 
}
149
 
 
150
 
.flip-clock-wrapper ul li a div div.inn {
151
 
    position: absolute;
152
 
    left: 0;
153
 
    z-index: 1;
154
 
    width: 100%;
155
 
    height: 200%;
156
 
    color: #ccc;
157
 
    text-shadow: 0 1px 2px #000;
158
 
    text-align: center;
159
 
    background-color: #333;
160
 
    border-radius: 6px;
161
 
    font-size: 70px; }
162
 
 
163
 
.flip-clock-wrapper ul li a div.up div.inn {
164
 
    top: 0; }
165
 
 
166
 
.flip-clock-wrapper ul li a div.down div.inn {
167
 
    bottom: 0; }
168
 
 
169
 
/* PLAY */
170
 
.flip-clock-wrapper ul.play li.flip-clock-before {
171
 
    z-index: 3; }
172
 
 
173
 
.flip-clock-wrapper .flip {   box-shadow: 0 2px 5px rgba(0, 0, 0, 0.7); }
174
 
 
175
 
.flip-clock-wrapper ul.play li.flip-clock-active {
176
 
    -webkit-animation: asd 0.5s 0.5s linear both;
177
 
    -moz-animation: asd 0.5s 0.5s linear both;
178
 
    animation: asd 0.5s 0.5s linear both;
179
 
    z-index: 5; }
180
 
 
181
 
.flip-clock-divider {
182
 
    float: left;
183
 
    display: inline-block;
184
 
    position: relative;
185
 
    width: 20px;
186
 
    height: 100px; }
187
 
 
188
 
.flip-clock-divider:first-child {
189
 
    width: 0; }
190
 
 
191
 
.flip-clock-dot {
192
 
    display: block;
193
 
    background: #323434;
194
 
    width: 10px;
195
 
    height: 10px;
196
 
    position: absolute;
197
 
    border-radius: 50%;
198
 
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
199
 
    left: 5px; }
200
 
 
201
 
.flip-clock-divider .flip-clock-label {
202
 
    position: absolute;
203
 
    top: -1.5em;
204
 
    right: -86px;
205
 
    color: black;
206
 
    text-shadow: none; }
207
 
 
208
 
.flip-clock-divider.minutes .flip-clock-label {
209
 
    right: -88px; }
210
 
 
211
 
.flip-clock-divider.seconds .flip-clock-label {
212
 
    right: -91px; }
213
 
 
214
 
.flip-clock-dot.top {
215
 
    top: 30px; }
216
 
 
217
 
.flip-clock-dot.bottom {
218
 
    bottom: 30px; }
219
 
 
220
 
@-webkit-keyframes asd {
221
 
    0% {
222
 
        z-index: 2; }
223
 
 
224
 
    20% {
225
 
        z-index: 4; }
226
 
 
227
 
    100% {
228
 
        z-index: 4; } }
229
 
 
230
 
@-moz-keyframes asd {
231
 
    0% {
232
 
        z-index: 2; }
233
 
 
234
 
    20% {
235
 
        z-index: 4; }
236
 
 
237
 
    100% {
238
 
        z-index: 4; } }
239
 
 
240
 
@-o-keyframes asd {
241
 
    0% {
242
 
        z-index: 2; }
243
 
 
244
 
    20% {
245
 
        z-index: 4; }
246
 
 
247
 
    100% {
248
 
        z-index: 4; } }
249
 
 
250
 
@keyframes asd {
251
 
    0% {
252
 
        z-index: 2; }
253
 
 
254
 
    20% {
255
 
        z-index: 4; }
256
 
 
257
 
    100% {
258
 
        z-index: 4; } }
259
 
 
260
 
.flip-clock-wrapper ul.play li.flip-clock-active .down {
261
 
    z-index: 2;
262
 
    -webkit-animation: turn 0.5s 0.5s linear both;
263
 
    -moz-animation: turn 0.5s 0.5s linear both;
264
 
    animation: turn 0.5s 0.5s linear both; }
265
 
 
266
 
@-webkit-keyframes turn {
267
 
    0% {
268
 
        -webkit-transform: rotateX(90deg); }
269
 
 
270
 
    100% {
271
 
        -webkit-transform: rotateX(0deg); } }
272
 
 
273
 
@-moz-keyframes turn {
274
 
    0% {
275
 
        -moz-transform: rotateX(90deg); }
276
 
 
277
 
    100% {
278
 
        -moz-transform: rotateX(0deg); } }
279
 
 
280
 
@-o-keyframes turn {
281
 
    0% {
282
 
        -o-transform: rotateX(90deg); }
283
 
 
284
 
    100% {
285
 
        -o-transform: rotateX(0deg); } }
286
 
 
287
 
@keyframes turn {
288
 
    0% {
289
 
        transform: rotateX(90deg); }
290
 
 
291
 
    100% {
292
 
        transform: rotateX(0deg); } }
293
 
 
294
 
.flip-clock-wrapper ul.play li.flip-clock-before .up {
295
 
    z-index: 2;
296
 
    -webkit-animation: turn2 0.5s linear both;
297
 
    -moz-animation: turn2 0.5s linear both;
298
 
    animation: turn2 0.5s linear both; }
299
 
 
300
 
@-webkit-keyframes turn2 {
301
 
    0% {
302
 
        -webkit-transform: rotateX(0deg); }
303
 
 
304
 
    100% {
305
 
        -webkit-transform: rotateX(-90deg); } }
306
 
 
307
 
@-moz-keyframes turn2 {
308
 
    0% {
309
 
        -moz-transform: rotateX(0deg); }
310
 
 
311
 
    100% {
312
 
        -moz-transform: rotateX(-90deg); } }
313
 
 
314
 
@-o-keyframes turn2 {
315
 
    0% {
316
 
        -o-transform: rotateX(0deg); }
317
 
 
318
 
    100% {
319
 
        -o-transform: rotateX(-90deg); } }
320
 
 
321
 
@keyframes turn2 {
322
 
    0% {
323
 
        transform: rotateX(0deg); }
324
 
 
325
 
    100% {
326
 
        transform: rotateX(-90deg); } }
327
 
 
328
 
.flip-clock-wrapper ul li.flip-clock-active {
329
 
    z-index: 3; }
330
 
 
331
 
/* SHADOW */
332
 
.flip-clock-wrapper ul.play li.flip-clock-before .up .shadow {
333
 
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
334
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
335
 
    background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
336
 
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
337
 
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
338
 
    background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
339
 
    -webkit-animation: show 0.5s linear both;
340
 
    -moz-animation: show 0.5s linear both;
341
 
    animation: show 0.5s linear both; }
342
 
 
343
 
.flip-clock-wrapper ul.play li.flip-clock-active .up .shadow {
344
 
    background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
345
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, black));
346
 
    background: linear, top, rgba(0, 0, 0, 0.1) 0%, black 100%;
347
 
    background: -o-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
348
 
    background: -ms-linear-gradient(top, rgba(0, 0, 0, 0.1) 0%, black 100%);
349
 
    background: linear, to bottom, rgba(0, 0, 0, 0.1) 0%, black 100%;
350
 
    -webkit-animation: hide 0.5s 0.3s linear both;
351
 
    -moz-animation: hide 0.5s 0.3s linear both;
352
 
    animation: hide 0.5s 0.3s linear both; }
353
 
 
354
 
/*DOWN*/
355
 
.flip-clock-wrapper ul.play li.flip-clock-before .down .shadow {
356
 
    background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
357
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
358
 
    background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
359
 
    background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
360
 
    background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
361
 
    background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
362
 
    -webkit-animation: show 0.5s linear both;
363
 
    -moz-animation: show 0.5s linear both;
364
 
    animation: show 0.5s linear both; }
365
 
 
366
 
.flip-clock-wrapper ul.play li.flip-clock-active .down .shadow {
367
 
    background: -moz-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
368
 
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, black), color-stop(100%, rgba(0, 0, 0, 0.1)));
369
 
    background: linear, top, black 0%, rgba(0, 0, 0, 0.1) 100%;
370
 
    background: -o-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
371
 
    background: -ms-linear-gradient(top, black 0%, rgba(0, 0, 0, 0.1) 100%);
372
 
    background: linear, to bottom, black 0%, rgba(0, 0, 0, 0.1) 100%;
373
 
    -webkit-animation: hide 0.5s 0.3s linear both;
374
 
    -moz-animation: hide 0.5s 0.3s linear both;
375
 
    animation: hide 0.5s 0.2s linear both; }
376
 
 
377
 
@-webkit-keyframes show {
378
 
    0% {
379
 
        opacity: 0; }
380
 
 
381
 
    100% {
382
 
        opacity: 1; } }
383
 
 
384
 
@-moz-keyframes show {
385
 
    0% {
386
 
        opacity: 0; }
387
 
 
388
 
    100% {
389
 
        opacity: 1; } }
390
 
 
391
 
@-o-keyframes show {
392
 
    0% {
393
 
        opacity: 0; }
394
 
 
395
 
    100% {
396
 
        opacity: 1; } }
397
 
 
398
 
@keyframes show {
399
 
    0% {
400
 
        opacity: 0; }
401
 
 
402
 
    100% {
403
 
        opacity: 1; } }
404
 
 
405
 
@-webkit-keyframes hide {
406
 
    0% {
407
 
        opacity: 1; }
408
 
 
409
 
    100% {
410
 
        opacity: 0; } }
411
 
 
412
 
@-moz-keyframes hide {
413
 
    0% {
414
 
        opacity: 1; }
415
 
 
416
 
    100% {
417
 
        opacity: 0; } }
418
 
 
419
 
@-o-keyframes hide {
420
 
    0% {
421
 
        opacity: 1; }
422
 
 
423
 
    100% {
424
 
        opacity: 0; } }
425
 
 
426
 
@keyframes hide {
427
 
    0% {
428
 
        opacity: 1; }
429
 
 
430
 
    100% {
431
 
        opacity: 0; } }