summaryrefslogtreecommitdiff
path: root/frontend/delta/less/web/overlay.less
Unidiff
Diffstat (limited to 'frontend/delta/less/web/overlay.less') (more/less context) (ignore whitespace changes)
-rw-r--r--frontend/delta/less/web/overlay.less157
1 files changed, 157 insertions, 0 deletions
diff --git a/frontend/delta/less/web/overlay.less b/frontend/delta/less/web/overlay.less
new file mode 100644
index 0000000..bac3ca3
--- a/dev/null
+++ b/frontend/delta/less/web/overlay.less
@@ -0,0 +1,157 @@
1@import "mixin";
2
3div.overlay {
4 z-index: 99999;
5 position: fixed;
6 top: 50%;
7 left: 50%;
8 width: 200px;
9 height: 200px;
10 margin-left: -100px;
11 margin-top: -100px;
12 background: rgba(0,0,0,0.8);
13 .border-radius(20px);
14
15 .title {
16 color: #FFF;
17 font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
18 font-weight: bold;
19 text-align: center;
20 display: block;
21 font-size: 26px;
22 position: absolute;
23 bottom: 30px;
24 left: 0;
25 width: 100%;
26 }
27
28 .icon {
29 position: relative;
30 display: inline-block;
31 width: 128px;
32 height: 128px;
33 top: 40%;
34 left: 50%;
35 margin-left: -64px;
36 margin-top: -64px;
37
38 text-align: center;
39 vertical-align: middle;
40
41 .icon-font();
42 font-size: 96pt;
43 color: white;
44 text-shadow: none;
45 }
46
47 &.ios-overlay-show {
48 .animation(ios-overlay-show, 750ms);
49 }
50
51
52 &.ios-overlay-hide {
53 .animation(ios-overlay-hide, 750ms, forwards);
54 }
55
56 //http://37signals.com/svn/posts/2577-loading-spinner-animation-using-css-and-webkit
57 div.spinner {
58 position: relative;
59 width: 100px;
60 height: 100px;
61 left: 50% !important;
62 top: 40% !important;
63
64 margin-left: -50px;
65 margin-top: -50px;
66
67 // display: inline-block;
68 display: block;
69
70 div {
71 width: 12%;
72 height: 26%;
73 background: #ffffff;
74 position: absolute;
75 left: 44.5%;
76 top: 37%;
77 opacity: 0;
78 .animation(fade, 1s, linear, infinite);
79 .border-radius(50px);
80 .box-shadow(0, 0, 3px, rgba(0,0,0,0.2));
81 }
82
83 div.bar01 {.transform( 0deg, 0, -142%); .animation-delay(-0.00000s);}
84 div.bar02 {.transform( 30deg, 0, -142%); .animation-delay(-0.91670s);}
85 div.bar03 {.transform( 60deg, 0, -142%); .animation-delay(-0.83300s);}
86 div.bar04 {.transform( 90deg, 0, -142%); .animation-delay(-0.75000s);}
87 div.bar05 {.transform(120deg, 0, -142%); .animation-delay(-0.66700s);}
88 div.bar06 {.transform(150deg, 0, -142%); .animation-delay(-0.58330s);}
89 div.bar07 {.transform(180deg, 0, -142%); .animation-delay(-0.50000s);}
90 div.bar08 {.transform(210deg, 0, -142%); .animation-delay(-0.41667s);}
91 div.bar09 {.transform(240deg, 0, -142%); .animation-delay(-0.33300s);}
92 div.bar10 {.transform(270deg, 0, -142%); .animation-delay(-0.25000s);}
93 div.bar11 {.transform(300deg, 0, -142%); .animation-delay(-0.16670s);}
94 div.bar12 {.transform(330deg, 0, -142%); .animation-delay(-0.08330s);}
95
96 @-webkit-keyframes fade {
97 from {opacity: 1;}
98 to {opacity: 0.25;}
99 }
100 @-o-keyframes fade {
101 from {opacity: 1;}
102 to {opacity: 0.25;}
103 }
104 @keyframes fade {
105 from {opacity: 1;}
106 to {opacity: 0.25;}
107 }
108 }
109}
110
111//========================================================
112
113@-webkit-keyframes ios-overlay-show {
114 0% { opacity: 0; }
115 100% { opacity: 1; }
116}
117@-moz-keyframes ios-overlay-show {
118 0% { opacity: 0; }
119 100% { opacity: 1; }
120}
121@-ms-keyframes ios-overlay-show {
122 0% { opacity: 0; }
123 100% { opacity: 1; }
124}
125@-o-keyframes ios-overlay-show {
126 0% { opacity: 0; }
127 100% { opacity: 1; }
128}
129@keyframes ios-overlay-show {
130 0% { opacity: 0; }
131 100% { opacity: 1; }
132}
133
134//--------------------------------------------------------
135
136@-webkit-keyframes ios-overlay-hide {
137 0% { opacity: 1; }
138 100% { opacity: 0; }
139}
140@-moz-keyframes ios-overlay-hide {
141 0% { opacity: 1; }
142 100% { opacity: 0; }
143}
144@-ms-keyframes ios-overlay-hide {
145 0% { opacity: 1; }
146 100% { opacity: 0; }
147}
148@-o-keyframes ios-overlay-hide {
149 0% { opacity: 1; }
150 100% { opacity: 0; }
151}
152@keyframes ios-overlay-hide {
153 0% { opacity: 1; }
154 100% { opacity: 0; }
155}
156
157//========================================================