Rev 175 | Rev 177 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 175 | Rev 176 | ||
---|---|---|---|
1 | /* Responsive Web Design */
|
1 | /* Responsive Web Design */
|
2 | 2 | ||
3 | <?php use de\pointedears\css\least\Mixins; ?> |
3 | <?php use de\pointedears\css\least\Mixins; ?> |
4 | 4 | ||
5 | /* Desktops with medium-size browser viewport (SVGA resolution) */
|
5 | /* Desktops with medium-size browser viewport (SVGA resolution) */
|
6 | 6 | ||
7 | body {
|
7 | body {
|
8 | <?php |
8 | <?php |
9 | Mixins::transition('', |
9 | Mixins::transition('', |
10 | 'margin-top 0.25s 0.75s linear,'
|
10 | 'margin-top 0.25s 0.75s linear,'
|
11 | . ' margin-left 0.25s 0.5s linear'); |
11 | . ' margin-left 0.25s 0.5s linear'); |
12 | ?>
|
12 | ?>
|
13 | }
|
13 | }
|
14 | 14 | ||
15 | .multi-display
|
15 | .multi-display
|
16 | {
|
16 | {
|
17 | <?php |
17 | <?php |
18 | Mixins::transition('', |
18 | Mixins::transition('', |
19 | 'top 0.25s 0.75s linear,'
|
19 | 'top 0.25s 0.75s linear,'
|
20 | . ' left 0.25s 0.5s linear'); |
20 | . ' left 0.25s 0.5s linear'); |
21 | ?>
|
21 | ?>
|
22 | }
|
22 | }
|
23 | 23 | ||
24 | .menu .bow |
24 | .menu .bow |
25 | {
|
25 | {
|
26 | <?php |
26 | <?php |
27 | Mixins::transition('', |
27 | Mixins::transition('', |
28 | 'width 0.5s 1s linear,'
|
28 | 'width 0.5s 1s linear,'
|
29 | . 'background-color 0s 0.75s linear'
|
29 | . 'background-color 0s 0.75s linear'
|
30 | ); |
30 | ); |
31 | ?>
|
31 | ?>
|
32 | }
|
32 | }
|
33 | 33 | ||
34 | .multi-display .lower .bg |
34 | .multi-display .lower .bg |
35 | {
|
35 | {
|
36 | <?php |
36 | <?php |
37 | /* Wait 1s for bow to become shallower */
|
37 | /* Wait 1s for bow to become shallower */
|
38 | Mixins::transition('', |
38 | Mixins::transition('', |
39 | 'top 0.25s 0.75s linear,'
|
39 | 'top 0.25s 0.75s linear,'
|
40 | . 'bottom 2.5s 0.5s ease'); |
40 | . 'bottom 2.5s 0.5s ease'); |
41 | ?>
|
41 | ?>
|
42 | }
|
42 | }
|
43 | 43 | ||
44 | #bow-top { |
44 | #bow-top { |
45 | <?php |
45 | <?php |
46 | Mixins::transition('', |
46 | Mixins::transition('', |
47 | 'left 0.5s 1.0s linear,'
|
47 | 'left 0.5s 1.0s linear,'
|
48 | . ' min-width 0s 1.5s linear,'
|
48 | . ' min-width 0s 1.5s linear,'
|
49 | . ' border-top-left-radius 0.5s 1.0s linear,'
|
49 | . ' border-top-left-radius 0.5s 1.0s linear,'
|
50 | . ' border-top-right-radius 0.5s 1.0s linear,'
|
50 | . ' border-top-right-radius 0.5s 1.0s linear,'
|
51 | . ' border-bottom-right-radius 0.5s 1.0s linear,'
|
51 | . ' border-bottom-right-radius 0.5s 1.0s linear,'
|
52 | . ' opacity 0s 1.0s linear'); |
52 | . ' opacity 0s 1.0s linear'); |
53 | ?>
|
53 | ?>
|
54 | }
|
54 | }
|
55 | 55 | ||
56 | #bow-top .text { |
56 | #bow-top .text { |
57 | <?php |
57 | <?php |
58 | Mixins::transition('-property', 'opacity'); |
58 | Mixins::transition('-property', 'opacity'); |
59 | Mixins::transition('-delay', '1.5s'); |
59 | Mixins::transition('-delay', '1.5s'); |
60 | Mixins::transition('-timing-function', 'linear'); |
60 | Mixins::transition('-timing-function', 'linear'); |
61 | ?>
|
61 | ?>
|
62 | }
|
62 | }
|
63 | 63 | ||
64 | #bow-top-left { |
64 | #bow-top-left { |
65 | <?php |
65 | <?php |
66 | Mixins::transition('-property', 'height'); |
66 | Mixins::transition('-property', 'height'); |
67 | Mixins::transition('-duration', '0.125s'); |
67 | Mixins::transition('-duration', '0.125s'); |
68 | Mixins::transition('-delay', '1.5s'); |
68 | Mixins::transition('-delay', '1.5s'); |
69 | Mixins::transition('-timing-function', 'linear'); |
69 | Mixins::transition('-timing-function', 'linear'); |
70 | ?>
|
70 | ?>
|
71 | }
|
71 | }
|
72 | 72 | ||
73 | .menu-container
|
73 | .menu-container
|
74 | {
|
74 | {
|
75 | <?php |
75 | <?php |
76 | Mixins::transition('', |
76 | Mixins::transition('', |
77 | 'top 0.5s 1s linear,'
|
77 | 'top 0.5s 1s linear,'
|
78 | . ' width 0.5s 1s linear,'
|
78 | . ' width 0.5s 1s linear,'
|
79 | . ' bottom 0.5s 1s linear,'
|
79 | . ' bottom 0.5s 1s linear,'
|
80 | . ' z-index 0s 1s linear'); |
80 | . ' z-index 0s 1s linear'); |
81 | ?>
|
81 | ?>
|
82 | }
|
82 | }
|
83 | 83 | ||
84 | .menu { |
84 | .menu { |
85 | <?php |
85 | <?php |
86 | Mixins::transition('', 'height 0.5s 1s linear'); |
86 | Mixins::transition('', 'height 0.5s 1s linear'); |
87 | ?>
|
87 | ?>
|
88 | }
|
88 | }
|
89 | 89 | ||
90 | .menu ul:first-child { |
90 | .menu ul:first-child { |
91 | <?php |
91 | <?php |
92 | Mixins::transition('', 'padding-top 0.5s 1s linear'); |
92 | Mixins::transition('', 'padding-top 0.5s 1s linear'); |
93 | ?>
|
93 | ?>
|
94 | }
|
94 | }
|
95 | 95 | ||
96 | .menu .button |
96 | .menu .button |
97 | {
|
97 | {
|
98 | <?php |
98 | <?php |
99 | Mixins::transition('', 'width 0.5s 1s linear'); |
99 | Mixins::transition('', 'width 0.5s 1s linear'); |
100 | ?>
|
100 | ?>
|
101 | }
|
101 | }
|
102 | 102 | ||
103 | #bow #bottom { |
103 | #bow #bottom { |
104 | <?php |
104 | <?php |
105 | Mixins::transition('', 'visibility 0s 1.625s linear'); |
105 | Mixins::transition('', 'visibility 0s 1.625s linear'); |
106 | ?>
|
106 | ?>
|
107 | }
|
107 | }
|
108 | 108 | ||
109 | #bow-bottom { |
109 | #bow-bottom { |
110 | <?php |
110 | <?php |
111 | Mixins::transition('', |
111 | Mixins::transition('', |
112 | 'border-bottom-left-radius 0.5s 0.5s ease,'
|
112 | 'border-bottom-left-radius 0.5s 0.5s ease,'
|
113 | . ' border-bottom-right-radius 0.5s 0.5s ease,'
|
113 | . ' border-bottom-right-radius 0.5s 0.5s ease,'
|
114 | . ' width 0.5s 0.5s ease,'
|
114 | . ' width 0.5s 0.5s ease,'
|
115 | . ' bottom 0.0225s 1.625s linear,'
|
115 | . ' bottom 0.0225s 1.625s linear,'
|
116 | . ' height 0.0225s 1.625s linear'); |
116 | . ' height 0.0225s 1.625s linear'); |
117 | ?>
|
117 | ?>
|
118 | }
|
118 | }
|
119 | 119 | ||
120 | #bow-bottom .concave { |
120 | #bow-bottom .concave { |
121 | <?php |
121 | <?php |
122 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
122 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
123 | ?>
|
123 | ?>
|
124 | }
|
124 | }
|
125 | 125 | ||
126 | #connectors { |
126 | #connectors { |
127 | <?php |
127 | <?php |
128 | Mixins::transition('', 'opacity 0s 1.6475s linear'); |
128 | Mixins::transition('', 'opacity 0s 1.6475s linear'); |
129 | ?>
|
129 | ?>
|
130 | }
|
130 | }
|
131 | 131 | ||
132 | #connectors .right { |
132 | #connectors .right { |
133 | <?php |
133 | <?php |
134 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
134 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
135 | ?>
|
135 | ?>
|
136 | }
|
136 | }
|
137 | 137 | ||
138 | /* Desktops with large viewport (XGA resolution and more, or no toolbars) */
|
138 | /* Desktops with large viewport (XGA resolution and more, or no toolbars) */
|
139 | @media all and (min-width: 1024px) and (min-height: 364px) {
|
139 | @media all and (min-width: 1024px) and (min-height: 364px) {
|
140 | body {
|
140 | body {
|
141 | margin-left: 22em; |
141 | margin-left: 22em; |
142 | <?php |
142 | <?php |
143 | Mixins::transition('', 'margin-left 0.5s 0.5s ease'); |
143 | Mixins::transition('', 'margin-left 0.5s 0.5s ease'); |
144 | ?>
|
144 | ?>
|
145 | }
|
145 | }
|
146 | 146 | ||
147 | #bow #bottom |
147 | #bow #bottom |
148 | {
|
148 | {
|
149 | width: 20.8em; |
149 | width: 20.8em; |
150 | <?php |
150 | <?php |
151 | /* Wait 0.5s for multi-display to be reduced in height */
|
151 | /* Wait 0.5s for multi-display to be reduced in height */
|
152 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
152 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
153 | ?>
|
153 | ?>
|
154 | }
|
154 | }
|
155 | 155 | ||
156 | #bow-bottom { |
156 | #bow-bottom { |
157 | border-bottom-left-radius: 2.4em; |
157 | border-bottom-left-radius: 2.4em; |
158 | border-bottom-right-radius: 2em; |
158 | border-bottom-right-radius: 2em; |
159 | width: 20.6em; |
159 | width: 20.6em; |
160 | <?php |
160 | <?php |
161 | Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width'); |
161 | Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width'); |
162 | Mixins::transition('-delay', '1.0s'); |
162 | Mixins::transition('-delay', '1.0s'); |
163 | Mixins::transition('-duration', '0.5s'); |
163 | Mixins::transition('-duration', '0.5s'); |
164 | Mixins::transition('-timing-function', 'ease'); |
164 | Mixins::transition('-timing-function', 'ease'); |
165 | ?>
|
165 | ?>
|
166 | }
|
166 | }
|
167 | 167 | ||
168 | #bow-bottom .concave { |
168 | #bow-bottom .concave { |
169 | width: 7.6em; |
169 | width: 7.6em; |
170 | <?php |
170 | <?php |
171 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
171 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
172 | ?>
|
172 | ?>
|
173 | }
|
173 | }
|
174 | 174 | ||
175 | #connectors .right { |
175 | #connectors .right { |
176 | width: 5em; |
176 | width: 5em; |
177 | <?php |
177 | <?php |
178 | /* Wait 1.0s for multi-display to be moved to right */
|
178 | /* Wait 1.0s for multi-display to be moved to right */
|
179 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
179 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
180 | ?>
|
180 | ?>
|
181 | }
|
181 | }
|
182 | 182 | ||
183 | .multi-display
|
183 | .multi-display
|
184 | {
|
184 | {
|
185 | left: 15.8em; |
185 | left: 15.8em; |
186 | <?php |
186 | <?php |
187 | Mixins::transition('', |
187 | Mixins::transition('', |
188 | 'left 0.5s 0.5s ease,'
|
188 | 'left 0.5s 0.5s ease,'
|
189 | . 'top 0.5s 0.5s linear'); |
189 | . 'top 0.5s 0.5s linear'); |
190 | ?>
|
190 | ?>
|
191 | }
|
191 | }
|
192 | 192 | ||
193 | .multi-display .lower .bg |
193 | .multi-display .lower .bg |
194 | {
|
194 | {
|
195 | bottom: 2.8em; |
195 | bottom: 2.8em; |
196 | <?php |
196 | <?php |
197 | Mixins::transition('', 'bottom 0.5s 0.5s ease'); |
197 | Mixins::transition('', 'bottom 0.5s 0.5s ease'); |
198 | ?>
|
198 | ?>
|
199 | }
|
199 | }
|
200 | }
|
200 | }
|
201 | 201 | ||
202 | /* Desktops with small viewport (VGA resolution and less, or toolbars) */
|
202 | /* Desktops with small viewport (VGA resolution and less, or toolbars) */
|
203 | @media all and (max-width: 640px) {
|
203 | @media all and (max-width: 584px) {
|
204 | /* 0.5 to 0.5225s */
|
204 | /* 0.5 to 0.5225s */
|
205 | #connectors { |
205 | #connectors { |
206 | opacity: 0; |
206 | opacity: 0; |
207 | <?php |
207 | <?php |
208 | Mixins::transition('', 'opacity 0s 0.5s linear'); |
208 | Mixins::transition('', 'opacity 0s 0.5s linear'); |
209 | ?>
|
209 | ?>
|
210 | }
|
210 | }
|
211 | 211 | ||
212 | #bow-bottom { |
212 | #bow-bottom { |
213 | bottom: 2.6em; |
213 | bottom: 2.6em; |
214 | height: 0em; |
214 | height: 0em; |
215 | opacity: 0; |
215 | opacity: 0; |
216 | <?php |
216 | <?php |
217 | Mixins::transition('', |
217 | Mixins::transition('', |
218 | 'bottom 0.0225s 0.5s linear,'
|
218 | 'bottom 0.0225s 0.5s linear,'
|
219 | . ' height 0.0225s 0.5s linear,'
|
219 | . ' height 0.0225s 0.5s linear,'
|
220 | . ' opacity 0s 0.5225s linear'); |
220 | . ' opacity 0s 0.5225s linear'); |
221 | ?>
|
221 | ?>
|
222 | }
|
222 | }
|
223 | 223 | ||
224 | #bow #bottom { |
224 | #bow #bottom { |
225 | visibility: hidden; |
225 | visibility: hidden; |
226 | <?php |
226 | <?php |
227 | Mixins::transition('', |
227 | Mixins::transition('', |
228 | 'visibility 0s 0.5225s linear'); |
228 | 'visibility 0s 0.5225s linear'); |
229 | ?>
|
229 | ?>
|
230 | }
|
230 | }
|
231 | 231 | ||
232 | .menu-container
|
232 | .menu-container
|
233 | {
|
233 | {
|
234 | top: 11em; |
234 | top: 11em; |
235 | width: 5em; |
235 | width: 5em; |
236 | bottom: 0; |
236 | bottom: 0; |
237 | z-index: 1; |
237 | z-index: 1; |
238 | background-color: #fc6; |
238 | background-color: #fc6; |
239 | <?php |
239 | <?php |
240 | Mixins::transition('', |
240 | Mixins::transition('', |
241 | 'top 0.5s 0.5s linear,'
|
241 | 'top 0.5s 0.5s linear,'
|
242 | . ' width 0.5s 0.5s linear,'
|
242 | . ' width 0.5s 0.5s linear,'
|
243 | . ' bottom 0.5s 0.5s linear,'
|
243 | . ' bottom 0.5s 0.5s linear,'
|
244 | . ' background-color 0s 1s linear'
|
244 | . ' background-color 0s 1s linear'
|
245 | ); |
245 | ); |
246 | ?>
|
246 | ?>
|
247 | }
|
247 | }
|
248 | 248 | ||
249 | .menu { |
249 | .menu { |
250 | height: 21.8em; |
250 | height: 21.8em; |
251 | <?php |
251 | <?php |
252 | Mixins::transition('', 'height 0.5s 0.5s linear'); |
252 | Mixins::transition('', 'height 0.5s 0.5s linear'); |
253 | ?>
|
253 | ?>
|
254 | }
|
254 | }
|
255 | 255 | ||
256 | .menu ul:first-child { |
256 | .menu ul:first-child { |
257 | padding-top: 0; |
257 | padding-top: 0; |
258 | <?php |
258 | <?php |
259 | Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
259 | Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
260 | ?>
|
260 | ?>
|
261 | }
|
261 | }
|
262 | 262 | ||
263 | .menu .button |
263 | .menu .button |
264 | {
|
264 | {
|
265 | width: 5em; |
265 | width: 5em; |
266 | <?php |
266 | <?php |
267 | Mixins::transition('', 'width 0.5s 0.5s linear'); |
267 | Mixins::transition('', 'width 0.5s 0.5s linear'); |
268 | ?>
|
268 | ?>
|
269 | }
|
269 | }
|
270 | 270 | ||
271 | /* 0.5225s to 0.6475s */
|
271 | /* 0.5225s to 0.6475s */
|
272 | #bow-top-left { |
272 | #bow-top-left { |
273 | height: 0; |
273 | height: 0; |
274 | <?php |
274 | <?php |
275 | Mixins::transition('', 'height 0.125s 0.5225s linear'); |
275 | Mixins::transition('', 'height 0.125s 0.5225s linear'); |
276 | ?>
|
276 | ?>
|
277 | }
|
277 | }
|
278 | 278 | ||
279 | /* at 0.6475s */
|
279 | /* at 0.6475s */
|
280 | #bow-top .text { |
280 | #bow-top .text { |
281 | opacity: 0; |
281 | opacity: 0; |
282 | <?php |
282 | <?php |
283 | Mixins::transition('-property', 'opacity'); |
283 | Mixins::transition('-property', 'opacity'); |
284 | Mixins::transition('-delay', '0.6475s'); |
284 | Mixins::transition('-delay', '0.6475s'); |
285 | Mixins::transition('-timing-function', 'linear'); |
285 | Mixins::transition('-timing-function', 'linear'); |
286 | ?>
|
286 | ?>
|
287 | }
|
287 | }
|
288 | 288 | ||
289 | .empty #bow-top .text { |
289 | .empty #bow-top .text { |
290 | opacity: 1; |
290 | opacity: 1; |
291 | }
|
291 | }
|
292 | 292 | ||
293 | /* 0.6475s to 1.1475s */
|
293 | /* 0.6475s to 1.1475s */
|
294 | #bow-top { |
294 | #bow-top { |
295 | left: 100%; |
295 | left: 100%; |
296 | min-width: auto; |
296 | min-width: auto; |
297 | border-top-left-radius: 0; |
297 | border-top-left-radius: 0; |
298 | border-bottom-left-radius: 0; |
298 | border-bottom-left-radius: 0; |
299 | border-top-right-radius: 1.2em; |
299 | border-top-right-radius: 1.2em; |
300 | border-bottom-right-radius: 1.2em; |
300 | border-bottom-right-radius: 1.2em; |
301 | opacity: 0; |
301 | opacity: 0; |
302 | <?php |
302 | <?php |
303 | Mixins::transition('', |
303 | Mixins::transition('', |
304 | 'left 0.5s 0.6475s linear,'
|
304 | 'left 0.5s 0.6475s linear,'
|
305 | . ' min-width 0s 0.6475s linear,'
|
305 | . ' min-width 0s 0.6475s linear,'
|
306 | . ' border-top-left-radius 0.5s 0.6475s linear,'
|
306 | . ' border-top-left-radius 0.5s 0.6475s linear,'
|
307 | . ' border-top-right-radius 0.5s 0.6475s linear,'
|
307 | . ' border-top-right-radius 0.5s 0.6475s linear,'
|
308 | . ' border-bottom-right-radius 0.5s 0.6475s linear,'
|
308 | . ' border-bottom-right-radius 0.5s 0.6475s linear,'
|
309 | . ' opacity 0s 1.1475s linear'); |
309 | . ' opacity 0s 1.1475s linear'); |
310 | ?>
|
310 | ?>
|
311 | }
|
311 | }
|
312 | 312 | ||
313 | .empty #bow-top { |
313 | .empty #bow-top { |
314 | left: 0%; |
314 | left: 0%; |
315 | min-width: 10em; |
315 | min-width: 10em; |
316 | border-top-left-radius: 1.2em; |
316 | border-top-left-radius: 1.2em; |
317 | border-bottom-left-radius: 1.2em; |
317 | border-bottom-left-radius: 1.2em; |
318 | border-top-right-radius: 1.2em; |
318 | border-top-right-radius: 1.2em; |
319 | border-bottom-right-radius: 1.2em; |
319 | border-bottom-right-radius: 1.2em; |
320 | opacity: 1; |
320 | opacity: 1; |
321 | }
|
321 | }
|
322 | 322 | ||
323 | .multi-display
|
323 | .multi-display
|
324 | {
|
324 | {
|
325 | top: 0.2em; |
325 | top: 0.2em; |
326 | left: 0.2em; |
326 | left: 0.2em; |
327 | <?php |
327 | <?php |
328 | Mixins::transition('', |
328 | Mixins::transition('', |
329 | 'top 0.25s 1.1475s linear,'
|
329 | 'top 0.25s 1.1475s linear,'
|
330 | . ' left 0.25s 1.3975s linear'); |
330 | . ' left 0.25s 1.3975s linear'); |
331 | ?>
|
331 | ?>
|
332 | }
|
332 | }
|
333 | 333 | ||
334 | .menu .bow |
334 | .menu .bow |
335 | {
|
335 | {
|
336 | background-color: #fc6; |
336 | background-color: #fc6; |
337 | <?php |
337 | <?php |
338 | Mixins::transition('', |
338 | Mixins::transition('', |
339 | 'width 0.5s 0.5s linear,'
|
339 | 'width 0.5s 0.5s linear,'
|
340 | . 'background-color 0s 1.6475s linear'
|
340 | . 'background-color 0s 1.6475s linear'
|
341 | ); |
341 | ); |
342 | ?>
|
342 | ?>
|
343 | }
|
343 | }
|
344 | 344 | ||
345 | .multi-display .lower .bg |
345 | .multi-display .lower .bg |
346 | {
|
346 | {
|
347 | top: 11em; |
347 | top: 11em; |
348 | <?php |
348 | <?php |
349 | Mixins::transition('', 'top 0.25s 1.1475s linear'); |
349 | Mixins::transition('', 'top 0.25s 1.1475s linear'); |
350 | ?>
|
350 | ?>
|
351 | }
|
351 | }
|
352 | 352 | ||
353 | body {
|
353 | body {
|
354 | margin-top: 9.6em; |
354 | margin-top: 9.6em; |
355 | margin-left: 6.4em; |
355 | margin-left: 6.4em; |
356 | <?php |
356 | <?php |
357 | Mixins::transition('', |
357 | Mixins::transition('', |
358 | 'margin-top 0.25s 1.1475s linear,'
|
358 | 'margin-top 0.25s 1.1475s linear,'
|
359 | . ' margin-left 0.25s 1.3975s linear'); |
359 | . ' margin-left 0.25s 1.3975s linear'); |
360 | ?>
|
360 | ?>
|
361 | }
|
361 | }
|
362 | 362 | ||
363 | .multi-display .upper .content #cmd2, |
363 | .multi-display .upper .content #cmd2, |
364 | .multi-display .upper .content #cmd3 |
364 | .multi-display .upper .content #cmd3 |
365 | {
|
365 | {
|
366 | display: none; |
366 | display: none; |
367 | }
|
367 | }
|
368 | 368 | ||
369 | .multi-display .upper .content #cmd1, |
369 | .multi-display .upper .content #cmd1, |
370 | .multi-display .upper .content #cmd4 |
370 | .multi-display .upper .content #cmd4 |
371 | {
|
371 | {
|
372 | right: 0; |
372 | right: 0; |
373 | }
|
373 | }
|
374 | 374 | ||
375 | .multi-display .upper .content .analysis |
375 | .multi-display .upper .content .analysis |
376 | {
|
376 | {
|
377 | right: 5.2em; |
377 | right: 5.2em; |
378 | }
|
378 | }
|
379 | 379 | ||
380 | .multi-display .upper .content .commands |
380 | .multi-display .upper .content .commands |
381 | {
|
381 | {
|
382 | width: 5.2em; |
382 | width: 5.2em; |
383 | }
|
383 | }
|
384 | }
|
384 | }
|
385 | 385 | ||
386 | /* Mobile devices: HTC Sensation & friends */
|
386 | /* Mobile devices: HTC Sensation & friends */
|
387 | @media screen and (max-device-width: 540px) {
|
387 | @media screen and (max-device-width: 540px) {
|
388 | /*
|
388 | /*
|
389 | html,
|
389 | html,
|
390 | #LCARS,
|
390 | #LCARS,
|
391 | .multi-display
|
391 | .multi-display
|
392 | {
|
392 | {
|
393 | max-width: 540px;
|
393 | max-width: 540px;
|
394 | }
|
394 | }
|
395 | */
|
395 | */
|
396 | /* 0.5 to 0.5225s */
|
396 | /* 0.5 to 0.5225s */
|
397 | #connectors { |
397 | #connectors { |
398 | opacity: 0; |
398 | opacity: 0; |
399 | <?php |
399 | <?php |
400 | Mixins::transition('', 'opacity 0s 0.5s linear'); |
400 | Mixins::transition('', 'opacity 0s 0.5s linear'); |
401 | ?>
|
401 | ?>
|
402 | }
|
402 | }
|
403 | 403 | ||
404 | #bow-bottom { |
404 | #bow-bottom { |
405 | bottom: 2.6em; |
405 | bottom: 2.6em; |
406 | height: 0em; |
406 | height: 0em; |
407 | opacity: 0; |
407 | opacity: 0; |
408 | <?php |
408 | <?php |
409 | Mixins::transition('', |
409 | Mixins::transition('', |
410 | 'bottom 0.0225s 0.5s linear,'
|
410 | 'bottom 0.0225s 0.5s linear,'
|
411 | . ' height 0.0225s 0.5s linear,'
|
411 | . ' height 0.0225s 0.5s linear,'
|
412 | . ' opacity 0s 0.5225s linear'); |
412 | . ' opacity 0s 0.5225s linear'); |
413 | ?>
|
413 | ?>
|
414 | }
|
414 | }
|
415 | 415 | ||
416 | #bow #bottom { |
416 | #bow #bottom { |
417 | visibility: hidden; |
417 | visibility: hidden; |
418 | <?php |
418 | <?php |
419 | Mixins::transition('', |
419 | Mixins::transition('', |
420 | 'visibility 0s 0.5225s linear'); |
420 | 'visibility 0s 0.5225s linear'); |
421 | ?>
|
421 | ?>
|
422 | }
|
422 | }
|
423 | 423 | ||
424 | .menu-container
|
424 | .menu-container
|
425 | {
|
425 | {
|
426 | top: 11em; |
426 | top: 11em; |
427 | width: 5em; |
427 | width: 5em; |
428 | bottom: 0; |
428 | bottom: 0; |
429 | z-index: 1; |
429 | z-index: 1; |
430 | background-color: #fc6; |
430 | background-color: #fc6; |
431 | <?php |
431 | <?php |
432 | Mixins::transition('', |
432 | Mixins::transition('', |
433 | 'top 0.5s 0.5s linear,'
|
433 | 'top 0.5s 0.5s linear,'
|
434 | . ' width 0.5s 0.5s linear,'
|
434 | . ' width 0.5s 0.5s linear,'
|
435 | . ' bottom 0.5s 0.5s linear,'
|
435 | . ' bottom 0.5s 0.5s linear,'
|
436 | . ' background-color 0s 1s linear'
|
436 | . ' background-color 0s 1s linear'
|
437 | ); |
437 | ); |
438 | ?>
|
438 | ?>
|
439 | }
|
439 | }
|
440 | 440 | ||
441 | .menu { |
441 | .menu { |
442 | height: 21.8em; |
442 | height: 21.8em; |
443 | <?php |
443 | <?php |
444 | Mixins::transition('', 'height 0.5s 0.5s linear'); |
444 | Mixins::transition('', 'height 0.5s 0.5s linear'); |
445 | ?>
|
445 | ?>
|
446 | }
|
446 | }
|
447 | 447 | ||
448 | .menu ul:first-child { |
448 | .menu ul:first-child { |
449 | padding-top: 0; |
449 | padding-top: 0; |
450 | <?php |
450 | <?php |
451 | Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
451 | Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
452 | ?>
|
452 | ?>
|
453 | }
|
453 | }
|
454 | 454 | ||
455 | .menu .button |
455 | .menu .button |
456 | {
|
456 | {
|
457 | width: 5em; |
457 | width: 5em; |
458 | <?php |
458 | <?php |
459 | Mixins::transition('', 'width 0.5s 0.5s linear'); |
459 | Mixins::transition('', 'width 0.5s 0.5s linear'); |
460 | ?>
|
460 | ?>
|
461 | }
|
461 | }
|
462 | 462 | ||
463 | /* 0.5225s to 0.6475s */
|
463 | /* 0.5225s to 0.6475s */
|
464 | #bow-top-left { |
464 | #bow-top-left { |
465 | height: 0; |
465 | height: 0; |
466 | <?php |
466 | <?php |
467 | Mixins::transition('', 'height 0.125s 0.5225s linear'); |
467 | Mixins::transition('', 'height 0.125s 0.5225s linear'); |
468 | ?>
|
468 | ?>
|
469 | }
|
469 | }
|
470 | 470 | ||
471 | /* at 0.6475s */
|
471 | /* at 0.6475s */
|
472 | #bow-top .text { |
472 | #bow-top .text { |
473 | opacity: 0; |
473 | opacity: 0; |
474 | <?php |
474 | <?php |
475 | Mixins::transition('-property', 'opacity'); |
475 | Mixins::transition('-property', 'opacity'); |
476 | Mixins::transition('-delay', '0.6475s'); |
476 | Mixins::transition('-delay', '0.6475s'); |
477 | Mixins::transition('-timing-function', 'linear'); |
477 | Mixins::transition('-timing-function', 'linear'); |
478 | ?>
|
478 | ?>
|
479 | }
|
479 | }
|
480 | 480 | ||
481 | .empty #bow-top .text { |
481 | .empty #bow-top .text { |
482 | opacity: 1; |
482 | opacity: 1; |
483 | }
|
483 | }
|
484 | 484 | ||
485 | /* 0.6475s to 1.1475s */
|
485 | /* 0.6475s to 1.1475s */
|
486 | #bow-top { |
486 | #bow-top { |
487 | left: 100%; |
487 | left: 100%; |
488 | min-width: auto; |
488 | min-width: auto; |
489 | border-top-left-radius: 0; |
489 | border-top-left-radius: 0; |
490 | border-bottom-left-radius: 0; |
490 | border-bottom-left-radius: 0; |
491 | border-top-right-radius: 1.2em; |
491 | border-top-right-radius: 1.2em; |
492 | border-bottom-right-radius: 1.2em; |
492 | border-bottom-right-radius: 1.2em; |
493 | opacity: 0; |
493 | opacity: 0; |
494 | <?php |
494 | <?php |
495 | Mixins::transition('', |
495 | Mixins::transition('', |
496 | 'left 0.5s 0.6475s linear,'
|
496 | 'left 0.5s 0.6475s linear,'
|
497 | . ' min-width 0s 0.6475s linear,'
|
497 | . ' min-width 0s 0.6475s linear,'
|
498 | . ' border-top-left-radius 0.5s 0.6475s linear,'
|
498 | . ' border-top-left-radius 0.5s 0.6475s linear,'
|
499 | . ' border-top-right-radius 0.5s 0.6475s linear,'
|
499 | . ' border-top-right-radius 0.5s 0.6475s linear,'
|
500 | . ' border-bottom-right-radius 0.5s 0.6475s linear,'
|
500 | . ' border-bottom-right-radius 0.5s 0.6475s linear,'
|
501 | . ' opacity 0s 1.1475s linear'); |
501 | . ' opacity 0s 1.1475s linear'); |
502 | ?>
|
502 | ?>
|
503 | }
|
503 | }
|
504 | 504 | ||
505 | .empty #bow-top { |
505 | .empty #bow-top { |
506 | left: 0%; |
506 | left: 0%; |
507 | min-width: 10em; |
507 | min-width: 10em; |
508 | border-top-left-radius: 1.2em; |
508 | border-top-left-radius: 1.2em; |
509 | border-bottom-left-radius: 1.2em; |
509 | border-bottom-left-radius: 1.2em; |
510 | border-top-right-radius: 1.2em; |
510 | border-top-right-radius: 1.2em; |
511 | border-bottom-right-radius: 1.2em; |
511 | border-bottom-right-radius: 1.2em; |
512 | opacity: 1; |
512 | opacity: 1; |
513 | }
|
513 | }
|
514 | 514 | ||
515 | .multi-display
|
515 | .multi-display
|
516 | {
|
516 | {
|
517 | top: 0.2em; |
517 | top: 0.2em; |
518 | left: 0.2em; |
518 | left: 0.2em; |
519 | <?php |
519 | <?php |
520 | Mixins::transition('', |
520 | Mixins::transition('', |
521 | 'top 0.25s 1.1475s linear,'
|
521 | 'top 0.25s 1.1475s linear,'
|
522 | . ' left 0.25s 1.3975s linear'); |
522 | . ' left 0.25s 1.3975s linear'); |
523 | ?>
|
523 | ?>
|
524 | }
|
524 | }
|
525 | 525 | ||
526 | .menu .bow |
526 | .menu .bow |
527 | {
|
527 | {
|
528 | background-color: #fc6; |
528 | background-color: #fc6; |
529 | <?php |
529 | <?php |
530 | Mixins::transition('', |
530 | Mixins::transition('', |
531 | 'width 0.5s 0.5s linear,'
|
531 | 'width 0.5s 0.5s linear,'
|
532 | . 'background-color 0s 1.6475s linear'
|
532 | . 'background-color 0s 1.6475s linear'
|
533 | ); |
533 | ); |
534 | ?>
|
534 | ?>
|
535 | }
|
535 | }
|
536 | 536 | ||
537 | .multi-display .lower .bg |
537 | .multi-display .lower .bg |
538 | {
|
538 | {
|
539 | top: 11em; |
539 | top: 11em; |
540 | <?php |
540 | <?php |
541 | Mixins::transition('', 'top 0.25s 1.1475s linear'); |
541 | Mixins::transition('', 'top 0.25s 1.1475s linear'); |
542 | ?>
|
542 | ?>
|
543 | }
|
543 | }
|
544 | 544 | ||
545 | body {
|
545 | body {
|
546 | margin-top: 9.6em; |
546 | margin-top: 9.6em; |
547 | margin-left: 6.4em; |
547 | margin-left: 6.4em; |
548 | <?php |
548 | <?php |
549 | Mixins::transition('', |
549 | Mixins::transition('', |
550 | 'margin-top 0.25s 1.1475s linear,'
|
550 | 'margin-top 0.25s 1.1475s linear,'
|
551 | . ' margin-left 0.25s 1.3975s linear'); |
551 | . ' margin-left 0.25s 1.3975s linear'); |
552 | ?>
|
552 | ?>
|
553 | }
|
553 | }
|
554 | 554 | ||
555 | .multi-display .upper .content #cmd2, |
555 | .multi-display .upper .content #cmd2, |
556 | .multi-display .upper .content #cmd3 |
556 | .multi-display .upper .content #cmd3 |
557 | {
|
557 | {
|
558 | display: none; |
558 | display: none; |
559 | }
|
559 | }
|
560 | 560 | ||
561 | .multi-display .upper .content #cmd1, |
561 | .multi-display .upper .content #cmd1, |
562 | .multi-display .upper .content #cmd4 |
562 | .multi-display .upper .content #cmd4 |
563 | {
|
563 | {
|
564 | right: 0; |
564 | right: 0; |
565 | }
|
565 | }
|
566 | 566 | ||
567 | .multi-display .upper .content .analysis |
567 | .multi-display .upper .content .analysis |
568 | {
|
568 | {
|
569 | right: 5.2em; |
569 | right: 5.2em; |
570 | }
|
570 | }
|
571 | 571 | ||
572 | .multi-display .upper .content .commands |
572 | .multi-display .upper .content .commands |
573 | {
|
573 | {
|
574 | width: 5.2em; |
574 | width: 5.2em; |
575 | }
|
575 | }
|
576 | }
|
576 | }
|