Rev 176 | Rev 179 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 176 | Rev 177 | ||
---|---|---|---|
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: 584px) {
|
203 | @media all and (max-width: 584px) {
|
204 | /* 0.5 to 0.5225s */
|
- | |
205 | #connectors { |
- | |
206 | opacity: 0; |
- | |
207 | <?php |
- | |
208 | Mixins::transition('', 'opacity 0s 0.5s linear'); |
- | |
209 | ?>
|
- | |
210 | }
|
- | |
211 | - | ||
212 | #bow-bottom { |
- | |
213 | bottom: 2.6em; |
- | |
214 | height: 0em; |
- | |
215 | opacity: 0; |
- | |
216 | <?php |
- | |
217 | Mixins::transition('', |
- | |
218 | 'bottom 0.0225s 0.5s linear,'
|
- | |
219 | . ' height 0.0225s 0.5s linear,'
|
- | |
220 | . ' opacity 0s 0.5225s linear'); |
- | |
221 | ?>
|
- | |
222 | }
|
- | |
223 | - | ||
224 | #bow #bottom { |
- | |
225 | visibility: hidden; |
- | |
226 | <?php |
- | |
227 | Mixins::transition('', |
- | |
228 | 'visibility 0s 0.5225s linear'); |
204 | <?php require 'lcars-responsive-small.css'; ?> |
229 | ?>
|
- | |
230 | }
|
- | |
231 | - | ||
232 | .menu-container
|
- | |
233 | {
|
- | |
234 | top: 11em; |
- | |
235 | width: 5em; |
- | |
236 | bottom: 0; |
- | |
237 | z-index: 1; |
- | |
238 | background-color: #fc6; |
- | |
239 | <?php |
- | |
240 | Mixins::transition('', |
- | |
241 | 'top 0.5s 0.5s linear,'
|
- | |
242 | . ' width 0.5s 0.5s linear,'
|
- | |
243 | . ' bottom 0.5s 0.5s linear,'
|
- | |
244 | . ' background-color 0s 1s linear'
|
- | |
245 | ); |
- | |
246 | ?>
|
- | |
247 | }
|
- | |
248 | - | ||
249 | .menu { |
- | |
250 | height: 21.8em; |
- | |
251 | <?php |
- | |
252 | Mixins::transition('', 'height 0.5s 0.5s linear'); |
- | |
253 | ?>
|
- | |
254 | }
|
- | |
255 | - | ||
256 | .menu ul:first-child { |
- | |
257 | padding-top: 0; |
- | |
258 | <?php |
- | |
259 | Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
- | |
260 | ?>
|
- | |
261 | }
|
- | |
262 | - | ||
263 | .menu .button |
- | |
264 | {
|
- | |
265 | width: 5em; |
- | |
266 | <?php |
- | |
267 | Mixins::transition('', 'width 0.5s 0.5s linear'); |
- | |
268 | ?>
|
- | |
269 | }
|
- | |
270 | - | ||
271 | /* 0.5225s to 0.6475s */
|
- | |
272 | #bow-top-left { |
- | |
273 | height: 0; |
- | |
274 | <?php |
- | |
275 | Mixins::transition('', 'height 0.125s 0.5225s linear'); |
- | |
276 | ?>
|
- | |
277 | }
|
- | |
278 | - | ||
279 | /* at 0.6475s */
|
- | |
280 | #bow-top .text { |
- | |
281 | opacity: 0; |
- | |
282 | <?php |
- | |
283 | Mixins::transition('-property', 'opacity'); |
- | |
284 | Mixins::transition('-delay', '0.6475s'); |
- | |
285 | Mixins::transition('-timing-function', 'linear'); |
- | |
286 | ?>
|
- | |
287 | }
|
- | |
288 | - | ||
289 | .empty #bow-top .text { |
- | |
290 | opacity: 1; |
- | |
291 | }
|
- | |
292 | - | ||
293 | /* 0.6475s to 1.1475s */
|
- | |
294 | #bow-top { |
- | |
295 | left: 100%; |
- | |
296 | min-width: auto; |
- | |
297 | border-top-left-radius: 0; |
- | |
298 | border-bottom-left-radius: 0; |
- | |
299 | border-top-right-radius: 1.2em; |
- | |
300 | border-bottom-right-radius: 1.2em; |
- | |
301 | opacity: 0; |
- | |
302 | <?php |
- | |
303 | Mixins::transition('', |
- | |
304 | 'left 0.5s 0.6475s linear,'
|
- | |
305 | . ' min-width 0s 0.6475s linear,'
|
- | |
306 | . ' border-top-left-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,'
|
- | |
309 | . ' opacity 0s 1.1475s linear'); |
- | |
310 | ?>
|
- | |
311 | }
|
- | |
312 | - | ||
313 | .empty #bow-top { |
- | |
314 | left: 0%; |
- | |
315 | min-width: 10em; |
- | |
316 | border-top-left-radius: 1.2em; |
- | |
317 | border-bottom-left-radius: 1.2em; |
- | |
318 | border-top-right-radius: 1.2em; |
- | |
319 | border-bottom-right-radius: 1.2em; |
- | |
320 | opacity: 1; |
- | |
321 | }
|
- | |
322 | - | ||
323 | .multi-display
|
- | |
324 | {
|
- | |
325 | top: 0.2em; |
- | |
326 | left: 0.2em; |
- | |
327 | <?php |
- | |
328 | Mixins::transition('', |
- | |
329 | 'top 0.25s 1.1475s linear,'
|
- | |
330 | . ' left 0.25s 1.3975s linear'); |
- | |
331 | ?>
|
- | |
332 | }
|
- | |
333 | - | ||
334 | .menu .bow |
- | |
335 | {
|
- | |
336 | background-color: #fc6; |
- | |
337 | <?php |
- | |
338 | Mixins::transition('', |
- | |
339 | 'width 0.5s 0.5s linear,'
|
- | |
340 | . 'background-color 0s 1.6475s linear'
|
- | |
341 | ); |
- | |
342 | ?>
|
- | |
343 | }
|
- | |
344 | - | ||
345 | .multi-display .lower .bg |
- | |
346 | {
|
- | |
347 | top: 11em; |
- | |
348 | <?php |
- | |
349 | Mixins::transition('', 'top 0.25s 1.1475s linear'); |
- | |
350 | ?>
|
- | |
351 | }
|
- | |
352 | - | ||
353 | body {
|
- | |
354 | margin-top: 9.6em; |
- | |
355 | margin-left: 6.4em; |
- | |
356 | <?php |
- | |
357 | Mixins::transition('', |
- | |
358 | 'margin-top 0.25s 1.1475s linear,'
|
- | |
359 | . ' margin-left 0.25s 1.3975s linear'); |
- | |
360 | ?>
|
- | |
361 | }
|
- | |
362 | - | ||
363 | .multi-display .upper .content #cmd2, |
- | |
364 | .multi-display .upper .content #cmd3 |
- | |
365 | {
|
- | |
366 | display: none; |
- | |
367 | }
|
- | |
368 | - | ||
369 | .multi-display .upper .content #cmd1, |
- | |
370 | .multi-display .upper .content #cmd4 |
- | |
371 | {
|
- | |
372 | right: 0; |
- | |
373 | }
|
- | |
374 | - | ||
375 | .multi-display .upper .content .analysis |
- | |
376 | {
|
- | |
377 | right: 5.2em; |
- | |
378 | }
|
- | |
379 | - | ||
380 | .multi-display .upper .content .commands |
- | |
381 | {
|
- | |
382 | width: 5.2em; |
- | |
383 | }
|
- | |
384 | }
|
205 | }
|
385 | 206 | ||
386 | /* Mobile devices: HTC Sensation & friends */
|
207 | /* Mobile devices: HTC Sensation & friends */
|
387 | @media screen and (max-device-width: 540px) {
|
208 | @media screen and (max-device-width: 540px) {
|
388 | /*
|
209 | /*
|
389 | html,
|
210 | html,
|
390 | #LCARS,
|
211 | #LCARS,
|
391 | .multi-display
|
212 | .multi-display
|
392 | {
|
213 | {
|
393 | max-width: 540px;
|
214 | max-width: 540px;
|
394 | }
|
215 | }
|
395 | */
|
216 | */
|
396 | /* 0.5 to 0.5225s */
|
- | |
397 | #connectors { |
- | |
398 | opacity: 0; |
- | |
399 | <?php |
- | |
400 | Mixins::transition('', 'opacity 0s 0.5s linear'); |
- | |
401 | ?>
|
- | |
402 | }
|
- | |
403 | - | ||
404 | #bow-bottom { |
- | |
405 | bottom: 2.6em; |
- | |
406 | height: 0em; |
- | |
407 | opacity: 0; |
- | |
408 | <?php |
- | |
409 | Mixins::transition('', |
- | |
410 | 'bottom 0.0225s 0.5s linear,'
|
- | |
411 | . ' height 0.0225s 0.5s linear,'
|
- | |
412 | . ' opacity 0s 0.5225s linear'); |
- | |
413 | ?>
|
- | |
414 | }
|
- | |
415 | - | ||
416 | #bow #bottom { |
- | |
417 | visibility: hidden; |
- | |
418 | <?php |
- | |
419 | Mixins::transition('', |
- | |
420 | 'visibility 0s 0.5225s linear'); |
217 | <?php require 'lcars-responsive-small.css'; ?> |
421 | ?>
|
- | |
422 | }
|
- | |
423 | - | ||
424 | .menu-container
|
- | |
425 | {
|
- | |
426 | top: 11em; |
- | |
427 | width: 5em; |
- | |
428 | bottom: 0; |
- | |
429 | z-index: 1; |
- | |
430 | background-color: #fc6; |
- | |
431 | <?php |
- | |
432 | Mixins::transition('', |
- | |
433 | 'top 0.5s 0.5s linear,'
|
- | |
434 | . ' width 0.5s 0.5s linear,'
|
- | |
435 | . ' bottom 0.5s 0.5s linear,'
|
- | |
436 | . ' background-color 0s 1s linear'
|
- | |
437 | ); |
- | |
438 | ?>
|
- | |
439 | }
|
- | |
440 | - | ||
441 | .menu { |
- | |
442 | height: 21.8em; |
- | |
443 | <?php |
- | |
444 | Mixins::transition('', 'height 0.5s 0.5s linear'); |
- | |
445 | ?>
|
- | |
446 | }
|
- | |
447 | - | ||
448 | .menu ul:first-child { |
- | |
449 | padding-top: 0; |
- | |
450 | <?php |
- | |
451 | Mixins::transition('', 'padding-top 0.5s 0.5s linear'); |
- | |
452 | ?>
|
- | |
453 | }
|
- | |
454 | - | ||
455 | .menu .button |
- | |
456 | {
|
- | |
457 | width: 5em; |
- | |
458 | <?php |
- | |
459 | Mixins::transition('', 'width 0.5s 0.5s linear'); |
- | |
460 | ?>
|
- | |
461 | }
|
- | |
462 | - | ||
463 | /* 0.5225s to 0.6475s */
|
- | |
464 | #bow-top-left { |
- | |
465 | height: 0; |
- | |
466 | <?php |
- | |
467 | Mixins::transition('', 'height 0.125s 0.5225s linear'); |
- | |
468 | ?>
|
- | |
469 | }
|
- | |
470 | - | ||
471 | /* at 0.6475s */
|
- | |
472 | #bow-top .text { |
- | |
473 | opacity: 0; |
- | |
474 | <?php |
- | |
475 | Mixins::transition('-property', 'opacity'); |
- | |
476 | Mixins::transition('-delay', '0.6475s'); |
- | |
477 | Mixins::transition('-timing-function', 'linear'); |
- | |
478 | ?>
|
- | |
479 | }
|
- | |
480 | - | ||
481 | .empty #bow-top .text { |
- | |
482 | opacity: 1; |
- | |
483 | }
|
- | |
484 | - | ||
485 | /* 0.6475s to 1.1475s */
|
- | |
486 | #bow-top { |
- | |
487 | left: 100%; |
- | |
488 | min-width: auto; |
- | |
489 | border-top-left-radius: 0; |
- | |
490 | border-bottom-left-radius: 0; |
- | |
491 | border-top-right-radius: 1.2em; |
- | |
492 | border-bottom-right-radius: 1.2em; |
- | |
493 | opacity: 0; |
- | |
494 | <?php |
- | |
495 | Mixins::transition('', |
- | |
496 | 'left 0.5s 0.6475s linear,'
|
- | |
497 | . ' min-width 0s 0.6475s linear,'
|
- | |
498 | . ' border-top-left-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,'
|
- | |
501 | . ' opacity 0s 1.1475s linear'); |
- | |
502 | ?>
|
- | |
503 | }
|
- | |
504 | - | ||
505 | .empty #bow-top { |
- | |
506 | left: 0%; |
- | |
507 | min-width: 10em; |
- | |
508 | border-top-left-radius: 1.2em; |
- | |
509 | border-bottom-left-radius: 1.2em; |
- | |
510 | border-top-right-radius: 1.2em; |
- | |
511 | border-bottom-right-radius: 1.2em; |
- | |
512 | opacity: 1; |
- | |
513 | }
|
- | |
514 | - | ||
515 | .multi-display
|
- | |
516 | {
|
- | |
517 | top: 0.2em; |
- | |
518 | left: 0.2em; |
- | |
519 | <?php |
- | |
520 | Mixins::transition('', |
- | |
521 | 'top 0.25s 1.1475s linear,'
|
- | |
522 | . ' left 0.25s 1.3975s linear'); |
- | |
523 | ?>
|
- | |
524 | }
|
- | |
525 | - | ||
526 | .menu .bow |
- | |
527 | {
|
- | |
528 | background-color: #fc6; |
- | |
529 | <?php |
- | |
530 | Mixins::transition('', |
- | |
531 | 'width 0.5s 0.5s linear,'
|
- | |
532 | . 'background-color 0s 1.6475s linear'
|
- | |
533 | ); |
- | |
534 | ?>
|
- | |
535 | }
|
- | |
536 | - | ||
537 | .multi-display .lower .bg |
- | |
538 | {
|
- | |
539 | top: 11em; |
- | |
540 | <?php |
- | |
541 | Mixins::transition('', 'top 0.25s 1.1475s linear'); |
- | |
542 | ?>
|
- | |
543 | }
|
- | |
544 | - | ||
545 | body {
|
- | |
546 | margin-top: 9.6em; |
- | |
547 | margin-left: 6.4em; |
- | |
548 | <?php |
- | |
549 | Mixins::transition('', |
- | |
550 | 'margin-top 0.25s 1.1475s linear,'
|
- | |
551 | . ' margin-left 0.25s 1.3975s linear'); |
- | |
552 | ?>
|
- | |
553 | }
|
- | |
554 | - | ||
555 | .multi-display .upper .content #cmd2, |
- | |
556 | .multi-display .upper .content #cmd3 |
- | |
557 | {
|
- | |
558 | display: none; |
- | |
559 | }
|
- | |
560 | - | ||
561 | .multi-display .upper .content #cmd1, |
- | |
562 | .multi-display .upper .content #cmd4 |
- | |
563 | {
|
- | |
564 | right: 0; |
- | |
565 | }
|
- | |
566 | - | ||
567 | .multi-display .upper .content .analysis |
- | |
568 | {
|
- | |
569 | right: 5.2em; |
- | |
570 | }
|
- | |
571 | - | ||
572 | .multi-display .upper .content .commands |
- | |
573 | {
|
- | |
574 | width: 5.2em; |
- | |
575 | }
|
- | |
576 | }
|
218 | }
|
577 | 219 |