source: main/trunk/model-interfaces-dev/heritage-nz/iframe/heritage-nz-dl_files/misc.css@ 32796

Last change on this file since 32796 was 32796, checked in by davidb, 5 years ago

Initial set of files to provide look and feel of Heritage NZ site, plus SVN clickable map in an iframe
  • Property svn:executable set to *
File size: 10.8 KB
Line 
1
2/* Search and clear icons in text areas */
3
4span.icon-wrap
5{
6 position: relative;
7 overflow: visible;
8 clear: both;
9 -ms-zoom: 1;
10 zoom: 1;
11}
12
13 span.icon-wrap > span.icon
14 {
15 position: absolute;
16 top: 0; bottom: 0;
17 margin: auto;
18 right: 1em;
19 z-index: 999999;
20 display: block;
21 width: 24px;
22 height: 24px;
23 opacity: 0.5;
24 filter: alpha(opacity=50);
25 -ms-zoom: 1;
26 zoom: 1;
27 }
28
29 span.icon-wrap span.icon.search
30 {
31 background: url("../images/glyphicons-halflings.png") no-repeat -44px 5px;
32 }
33
34 span.icon-wrap span.icon.clear
35 {
36 background: url("../images/glyphicons-halflings.png") no-repeat -44px -91px;;
37 cursor: pointer;
38 }
39
40 span.icon-wrap span.icon.clear:hover, span.icon-wrap span.icon.clear:active
41 {
42 opacity: 1;
43 filter: alpha(opacity=100);
44 }
45
46/*
47 Allow angular.js to be loaded in body, hiding cloaked elements until
48 templates compile. The !important is important given that there may be
49 other selectors that are more specific or come later and might alter display.
50 */
51[ng\:cloak], [ng-cloak], [data-ng-cloak], .ng-cloak, .data-ng-cloak
52{
53 display: none !important;
54}
55
56
57.windows8
58{
59 position: relative;
60 width: 50px;
61 height: 50px;
62 margin: 0 auto;
63}
64
65.windows8.large
66{
67 width: 100px;
68 height: 100px;
69}
70
71.windows8.small
72{
73 width: 15px;
74 height: 15px;
75}
76
77 .windows8 .wBall
78 {
79 position: absolute;
80 width: 48px;
81 height: 48px;
82 opacity: 0;
83 -moz-transform: rotate(225deg);
84 -moz-animation: orbit 3.8499999999999996s infinite;
85 -webkit-transform: rotate(225deg);
86 -webkit-animation: orbit 3.8499999999999996s infinite;
87 -ms-transform: rotate(225deg);
88 -ms-animation: orbit 3.8499999999999996s infinite;
89 -o-transform: rotate(225deg);
90 -o-animation: orbit 3.8499999999999996s infinite;
91 transform: rotate(225deg);
92 animation: orbit 3.8499999999999996s infinite;
93 }
94
95 .windows8.large .wBall
96 {
97 width: 95px;
98 height: 95px;
99 }
100
101 .windows8.small .wBall
102 {
103 width: 14px;
104 height: 14px;
105 }
106
107 .windows8 .wBall .wInnerBall
108 {
109 position: absolute;
110 width: 6px;
111 height: 6px;
112 background: #660000;
113 left: 0px;
114 top: 0px;
115 -moz-border-radius: 6px;
116 -webkit-border-radius: 6px;
117 -ms-border-radius: 6px;
118 -o-border-radius: 6px;
119 border-radius: 6px;
120 }
121
122 .windows8.large .wBall .wInnerBall
123 {
124 width: 13px;
125 height: 13px;
126 -moz-border-radius: 13px;
127 -webkit-border-radius: 13px;
128 -o-border-radius: 13px;
129 -ms-border-radius: 13px;
130 border-radius: 13px;
131 }
132
133 .windows8.small .wBall .wInnerBall
134 {
135 width: 2px;
136 height: 2px;
137 -moz-border-radius: 2px;
138 -webkit-border-radius: 2px;
139 -o-border-radius: 2px;
140 -ms-border-radius: 2px;
141 border-radius: 2px;
142 }
143
144 .windows8 #wBall_1
145 {
146 -moz-animation-delay: 0.84s;
147 -webkit-animation-delay: 0.84s;
148 -ms-animation-delay: 0.84s;
149 -o-animation-delay: 0.84s;
150 animation-delay: 0.84s;
151 }
152
153 .windows8 #wBall_2
154 {
155 -moz-animation-delay: 0.17s;
156 -webkit-animation-delay: 0.17s;
157 -ms-animation-delay: 0.17s;
158 -o-animation-delay: 0.17s;
159 animation-delay: 0.17s;
160 }
161
162 .windows8 #wBall_3
163 {
164 -moz-animation-delay: 0.34s;
165 -webkit-animation-delay: 0.34s;
166 -ms-animation-delay: 0.34s;
167 -o-animation-delay: 0.34s;
168 animation-delay: 0.34s;
169 }
170
171 .windows8 #wBall_4
172 {
173 -moz-animation-delay: 0.5s;
174 -webkit-animation-delay: 0.5s;
175 -ms-animation-delay: 0.5s;
176 -o-animation-delay: 0.5s;
177 animation-delay: 0.5s;
178 }
179
180 .windows8 #wBall_5
181 {
182 -moz-animation-delay: 0.67s;
183 -webkit-animation-delay: 0.67s;
184 -ms-animation-delay: 0.67s;
185 -o-animation-delay: 0.67s;
186 animation-delay: 0.67s;
187 }
188
189@-moz-keyframes orbit
190{
191 0%
192 {
193 opacity: 1;
194 z-index: 99;
195 -moz-transform: rotate(180deg);
196 -moz-animation-timing-function: ease-out;
197 }
198
199 7%
200 {
201 opacity: 1;
202 -moz-transform: rotate(300deg);
203 -moz-animation-timing-function: linear;
204 -moz-origin: 0%;
205 }
206
207 30%
208 {
209 opacity: 1;
210 -moz-transform: rotate(410deg);
211 -moz-animation-timing-function: ease-in-out;
212 -moz-origin: 7%;
213 }
214
215 39%
216 {
217 opacity: 1;
218 -moz-transform: rotate(645deg);
219 -moz-animation-timing-function: linear;
220 -moz-origin: 30%;
221 }
222
223 70%
224 {
225 opacity: 1;
226 -moz-transform: rotate(770deg);
227 -moz-animation-timing-function: ease-out;
228 -moz-origin: 39%;
229 }
230
231 75%
232 {
233 opacity: 1;
234 -moz-transform: rotate(900deg);
235 -moz-animation-timing-function: ease-out;
236 -moz-origin: 70%;
237 }
238
239 76%
240 {
241 opacity: 0;
242 -moz-transform: rotate(900deg);
243 }
244
245 100%
246 {
247 opacity: 0;
248 -moz-transform: rotate(900deg);
249 }
250}
251
252@-webkit-keyframes orbit
253{
254 0%
255 {
256 opacity: 1;
257 z-index: 99;
258 -webkit-transform: rotate(180deg);
259 -webkit-animation-timing-function: ease-out;
260 }
261
262 7%
263 {
264 opacity: 1;
265 -webkit-transform: rotate(300deg);
266 -webkit-animation-timing-function: linear;
267 -webkit-origin: 0%;
268 }
269
270 30%
271 {
272 opacity: 1;
273 -webkit-transform: rotate(410deg);
274 -webkit-animation-timing-function: ease-in-out;
275 -webkit-origin: 7%;
276 }
277
278 39%
279 {
280 opacity: 1;
281 -webkit-transform: rotate(645deg);
282 -webkit-animation-timing-function: linear;
283 -webkit-origin: 30%;
284 }
285
286 70%
287 {
288 opacity: 1;
289 -webkit-transform: rotate(770deg);
290 -webkit-animation-timing-function: ease-out;
291 -webkit-origin: 39%;
292 }
293
294 75%
295 {
296 opacity: 1;
297 -webkit-transform: rotate(900deg);
298 -webkit-animation-timing-function: ease-out;
299 -webkit-origin: 70%;
300 }
301
302 76%
303 {
304 opacity: 0;
305 -webkit-transform: rotate(900deg);
306 }
307
308 100%
309 {
310 opacity: 0;
311 -webkit-transform: rotate(900deg);
312 }
313}
314
315@-ms-keyframes orbit
316{
317 0%
318 {
319 opacity: 1;
320 z-index: 99;
321 -ms-transform: rotate(180deg);
322 -ms-animation-timing-function: ease-out;
323 }
324
325 7%
326 {
327 opacity: 1;
328 -ms-transform: rotate(300deg);
329 -ms-animation-timing-function: linear;
330 -ms-origin: 0%;
331 }
332
333 30%
334 {
335 opacity: 1;
336 -ms-transform: rotate(410deg);
337 -ms-animation-timing-function: ease-in-out;
338 -ms-origin: 7%;
339 }
340
341 39%
342 {
343 opacity: 1;
344 -ms-transform: rotate(645deg);
345 -ms-animation-timing-function: linear;
346 -ms-origin: 30%;
347 }
348
349 70%
350 {
351 opacity: 1;
352 -ms-transform: rotate(770deg);
353 -ms-animation-timing-function: ease-out;
354 -ms-origin: 39%;
355 }
356
357 75%
358 {
359 opacity: 1;
360 -ms-transform: rotate(900deg);
361 -ms-animation-timing-function: ease-out;
362 -ms-origin: 70%;
363 }
364
365 76%
366 {
367 opacity: 0;
368 -ms-transform: rotate(900deg);
369 }
370
371 100%
372 {
373 opacity: 0;
374 -ms-transform: rotate(900deg);
375 }
376}
377
378@-o-keyframes orbit
379{
380 0%
381 {
382 opacity: 1;
383 z-index: 99;
384 -o-transform: rotate(180deg);
385 -o-animation-timing-function: ease-out;
386 }
387
388 7%
389 {
390 opacity: 1;
391 -o-transform: rotate(300deg);
392 -o-animation-timing-function: linear;
393 -o-origin: 0%;
394 }
395
396 30%
397 {
398 opacity: 1;
399 -o-transform: rotate(410deg);
400 -o-animation-timing-function: ease-in-out;
401 -o-origin: 7%;
402 }
403
404 39%
405 {
406 opacity: 1;
407 -o-transform: rotate(645deg);
408 -o-animation-timing-function: linear;
409 -o-origin: 30%;
410 }
411
412 70%
413 {
414 opacity: 1;
415 -o-transform: rotate(770deg);
416 -o-animation-timing-function: ease-out;
417 -o-origin: 39%;
418 }
419
420 75%
421 {
422 opacity: 1;
423 -o-transform: rotate(900deg);
424 -o-animation-timing-function: ease-out;
425 -o-origin: 70%;
426 }
427
428 76%
429 {
430 opacity: 0;
431 -o-transform: rotate(900deg);
432 }
433
434 100%
435 {
436 opacity: 0;
437 -o-transform: rotate(900deg);
438 }
439}
440
441@keyframes orbit
442{
443 0%
444 {
445 opacity: 1;
446 z-index: 99;
447 -moz-transform: rotate(180deg);
448 -ms-transform: rotate(180deg);
449 -o-transform: rotate(180deg);
450 -webkit-transform: rotate(180deg);
451 transform: rotate(180deg);
452 -moz-animation-timing-function: ease-out;
453 -o-animation-timing-function: ease-out;
454 -webkit-animation-timing-function: ease-out;
455 animation-timing-function: ease-out;
456 }
457
458 7%
459 {
460 opacity: 1;
461 -moz-transform: rotate(300deg);
462 -ms-transform: rotate(300deg);
463 -o-transform: rotate(300deg);
464 -webkit-transform: rotate(300deg);
465 transform: rotate(300deg);
466 -moz-animation-timing-function: linear;
467 -o-animation-timing-function: linear;
468 -webkit-animation-timing-function: linear;
469 animation-timing-function: linear;
470 origin: 0%;
471 }
472
473 30%
474 {
475 opacity: 1;
476 -moz-transform: rotate(410deg);
477 -ms-transform: rotate(410deg);
478 -o-transform: rotate(410deg);
479 -webkit-transform: rotate(410deg);
480 transform: rotate(410deg);
481 -moz-animation-timing-function: ease-in-out;
482 -o-animation-timing-function: ease-in-out;
483 -webkit-animation-timing-function: ease-in-out;
484 animation-timing-function: ease-in-out;
485 origin: 7%;
486 }
487
488 39%
489 {
490 opacity: 1;
491 -moz-transform: rotate(645deg);
492 -ms-transform: rotate(645deg);
493 -o-transform: rotate(645deg);
494 -webkit-transform: rotate(645deg);
495 transform: rotate(645deg);
496 -moz-animation-timing-function: linear;
497 -o-animation-timing-function: linear;
498 -webkit-animation-timing-function: linear;
499 animation-timing-function: linear;
500 origin: 30%;
501 }
502
503 70%
504 {
505 opacity: 1;
506 -moz-transform: rotate(770deg);
507 -ms-transform: rotate(770deg);
508 -o-transform: rotate(770deg);
509 -webkit-transform: rotate(770deg);
510 transform: rotate(770deg);
511 -moz-animation-timing-function: ease-out;
512 -o-animation-timing-function: ease-out;
513 -webkit-animation-timing-function: ease-out;
514 animation-timing-function: ease-out;
515 origin: 39%;
516 }
517
518 75%
519 {
520 opacity: 1;
521 -moz-transform: rotate(900deg);
522 -ms-transform: rotate(900deg);
523 -o-transform: rotate(900deg);
524 -webkit-transform: rotate(900deg);
525 transform: rotate(900deg);
526 -moz-animation-timing-function: ease-out;
527 -o-animation-timing-function: ease-out;
528 -webkit-animation-timing-function: ease-out;
529 animation-timing-function: ease-out;
530 origin: 70%;
531 }
532
533 76%
534 {
535 opacity: 0;
536 -moz-transform: rotate(900deg);
537 -ms-transform: rotate(900deg);
538 -o-transform: rotate(900deg);
539 -webkit-transform: rotate(900deg);
540 transform: rotate(900deg);
541 }
542
543 100%
544 {
545 opacity: 0;
546 -moz-transform: rotate(900deg);
547 -ms-transform: rotate(900deg);
548 -o-transform: rotate(900deg);
549 -webkit-transform: rotate(900deg);
550 transform: rotate(900deg);
551 }
552}
Note: See TracBrowser for help on using the repository browser.