Rev 118 | Rev 120 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 118 | Rev 119 | ||
---|---|---|---|
1 | <?php |
1 | <?php |
- | 2 | namespace de\pointedears\css\least;
|
|
- | 3 | ||
2 | \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
4 | \header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT'); |
3 | 5 | ||
4 | /* Resource expires in HTTP/1.1 caches 24h after last retrieval */
|
6 | /* Resource expires in HTTP/1.1 caches 24h after last retrieval */
|
5 | \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate'); |
7 | \header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate'); |
6 | 8 | ||
7 | /* Resource expires in HTTP/1.0 caches 24h after last retrieval */
|
9 | /* Resource expires in HTTP/1.0 caches 24h after last retrieval */
|
8 | \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
10 | \header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT'); |
9 | 11 | ||
10 | \header('Content-Type: text/css; charset=UTF-8'); |
12 | \header('Content-Type: text/css; charset=UTF-8'); |
- | 13 | ||
- | 14 | require_once 'css/least/Mixins.php'; |
|
11 | ?>@charset "UTF-8"; |
15 | ?>@charset "UTF-8"; |
12 | 16 | ||
13 | <?php |
17 | <?php |
14 | if (!isset($_GET['ani']) || $_GET['ani'] !== '0') |
18 | if (!isset($_GET['ani']) || $_GET['ani'] !== '0') |
15 | {
|
19 | {
|
16 | ?>
|
20 | ?>
|
17 | @import url("/styles/lcars-ani.css");
|
21 | @import url("/styles/lcars-ani.css");
|
18 | <?php |
22 | <?php |
19 | }
|
23 | }
|
20 | ?>
|
24 | ?>
|
- | 25 | /* FIXME: Does not work */
|
|
- | 26 | /* @import url("/styles/lcars-responsive.css"); */
|
|
21 | 27 | ||
22 | body {
|
28 | body {
|
23 | margin-top: 12em; |
29 | margin-top: 12em; |
24 | margin-left: 22em; |
30 | margin-left: 16.8em; |
25 | margin-right: 0.2em; |
31 | margin-right: 0.2em; |
26 | margin-bottom: 0.2em; |
32 | margin-bottom: 0.2em; |
27 | }
|
33 | }
|
28 | 34 | ||
29 | /* HTML5 elements */
|
35 | /* HTML5 elements */
|
30 | 36 | ||
31 | nav |
37 | nav |
32 | {
|
38 | {
|
33 | display: block; |
39 | display: block; |
34 | }
|
40 | }
|
35 | 41 | ||
36 | /* Bow (main) and elbo (multi-view) */
|
42 | /* Bow (main) and elbo (multi-view) */
|
37 | 43 | ||
38 | #LCARS { |
44 | #LCARS { |
39 | position: fixed; |
45 | position: fixed; |
40 | left: 0; |
46 | left: 0; |
41 | top: 0; |
47 | top: 0; |
42 | right: 0; |
48 | right: 0; |
43 | padding: 0.2em; |
49 | padding: 0.2em; |
44 | background-color: #000; |
50 | background-color: #000; |
45 | z-index: 1701; |
51 | z-index: 1701; |
46 | }
|
52 | }
|
47 | 53 | ||
48 | #bow { |
54 | #bow { |
49 | position: absolute; |
55 | position: absolute; |
50 | left: 0.2em; |
56 | left: 0.2em; |
51 | top: 0.2em; |
57 | top: 0.2em; |
52 | right: 0.2em; |
58 | right: 0.2em; |
53 | height: 2.4em; |
59 | height: 2.4em; |
54 | padding-bottom: 0.2em; |
60 | padding-bottom: 0.2em; |
55 | background-color: #000; |
61 | background-color: #000; |
56 | }
|
62 | }
|
57 | 63 | ||
58 | #bow-top { |
64 | #bow-top { |
59 | /* NOTE: position: absolute is needed for animation */
|
65 | /* NOTE: position: absolute is needed for animation */
|
60 | position: absolute; |
66 | position: absolute; |
61 | top: 0; |
67 | top: 0; |
62 | left: 0; |
68 | left: 0; |
63 | right: 0; |
69 | right: 0; |
64 | min-width: 15.4em; |
70 | min-width: 15.4em; |
65 | height: 2em; |
71 | height: 2em; |
66 | background-color: #999; |
72 | background-color: #999; |
67 | border-top-left-radius: 2.4em; |
73 | border-top-left-radius: 2.4em; |
68 | border-top-right-radius: 1.2em; |
74 | border-top-right-radius: 1.2em; |
69 | border-bottom-right-radius: 1.2em; |
75 | border-bottom-right-radius: 1.2em; |
70 | line-height: 0.9; |
76 | line-height: 0.9; |
71 | }
|
77 | }
|
72 | 78 | ||
73 | .empty #bow-top { |
79 | .empty #bow-top { |
74 | border-top-left-radius: 1.2em; |
80 | border-top-left-radius: 1.2em; |
75 | border-bottom-left-radius: 1.2em; |
81 | border-bottom-left-radius: 1.2em; |
76 | min-width: 10em; |
82 | min-width: 10em; |
77 | }
|
83 | }
|
78 | 84 | ||
79 | 85 | ||
80 | #bow-top .text { |
86 | #bow-top .text { |
81 | position: absolute; |
87 | position: absolute; |
82 | margin: 0; |
88 | margin: 0; |
83 | left: 4.33em; |
89 | left: 4.33em; |
84 | top: 0; |
90 | top: 0; |
85 | right: 0.75em; |
91 | right: 0.75em; |
86 | height: 1em; |
92 | height: 1em; |
87 | text-align: right; |
93 | text-align: right; |
88 | color: #fc0; |
94 | color: #fc0; |
89 | font-size: 2.4em; |
95 | font-size: 2.4em; |
90 | padding-right: 0.1em; |
96 | padding-right: 0.1em; |
91 | overflow: hidden; |
97 | overflow: hidden; |
92 | text-overflow: ellipsis; |
98 | text-overflow: ellipsis; |
93 | }
|
99 | }
|
94 | 100 | ||
95 | .empty #bow-top .text { |
101 | .empty #bow-top .text { |
96 | left: 0.93em; |
102 | left: 0.93em; |
97 | }
|
103 | }
|
98 | 104 | ||
99 | 105 | ||
100 | 106 | ||
101 | #bow-top .text span { |
107 | #bow-top .text span { |
102 | padding-right: 0.1em; |
108 | padding-right: 0.1em; |
103 | background-color: #000; |
109 | background-color: #000; |
104 | padding-left: 0.1em; |
110 | padding-left: 0.1em; |
105 | text-transform: uppercase; |
111 | text-transform: uppercase; |
106 | white-space: nowrap; |
112 | white-space: nowrap; |
107 | }
|
113 | }
|
108 | 114 | ||
109 | .empty #footer-container { |
115 | .empty #footer-container { |
110 | position: fixed; |
116 | position: fixed; |
111 | left: 0.2em; |
117 | left: 0.2em; |
112 | bottom: 0; |
118 | bottom: 0; |
113 | right: 0.2em; |
119 | right: 0.2em; |
114 | min-height: 2.4em; |
120 | min-height: 2.4em; |
115 | padding-top: 0.2em; |
121 | padding-top: 0.2em; |
116 | padding-bottom: 0.2em; |
122 | padding-bottom: 0.2em; |
117 | background-color: #000; |
123 | background-color: #000; |
118 | }
|
124 | }
|
119 | 125 | ||
120 | 126 | ||
121 | .empty #footer { |
127 | .empty #footer { |
122 | position: absolute; |
128 | position: absolute; |
123 | bottom: 0; |
129 | bottom: 0; |
124 | left: 0; |
130 | left: 0; |
125 | right: 0; |
131 | right: 0; |
126 | height: 2em; |
132 | height: 2em; |
127 | min-width: 10em; |
133 | min-width: 10em; |
128 | margin-bottom: 0.2em; |
134 | margin-bottom: 0.2em; |
129 | background-color: #999; |
135 | background-color: #999; |
130 | border-radius: 1.2em; |
136 | border-radius: 1.2em; |
131 | line-height: 0.9; |
137 | line-height: 0.9; |
132 | }
|
138 | }
|
133 | 139 | ||
134 | .empty #footer .text { |
140 | .empty #footer .text { |
135 | position: absolute; |
141 | position: absolute; |
136 | margin: 0; |
142 | margin: 0; |
137 | left: 0.93em; |
143 | left: 0.93em; |
138 | top: 0; |
144 | top: 0; |
139 | right: 0.75em; |
145 | right: 0.75em; |
140 | height: 1em; |
146 | height: 1em; |
141 | background-color: transparent; |
147 | background-color: transparent; |
142 | color: #fc0; |
148 | color: #fc0; |
143 | font-size: 2.4em; |
149 | font-size: 2.4em; |
144 | padding-right: 0.1em; |
150 | padding-right: 0.1em; |
145 | overflow: hidden; |
151 | overflow: hidden; |
146 | text-overflow: ellipsis; |
152 | text-overflow: ellipsis; |
147 | }
|
153 | }
|
148 | 154 | ||
149 | .empty #footer .text span { |
155 | .empty #footer .text span { |
150 | padding-right: 0.1em; |
156 | padding-right: 0.1em; |
151 | background-color: #000; |
157 | background-color: #000; |
152 | padding-left: 0.1em; |
158 | padding-left: 0.1em; |
153 | text-transform: uppercase; |
159 | text-transform: uppercase; |
154 | white-space: nowrap; |
160 | white-space: nowrap; |
155 | }
|
161 | }
|
156 | 162 | ||
157 | .empty .separator-left { |
163 | .empty .separator-left { |
158 | position: absolute; |
164 | position: absolute; |
159 | left: 2em; |
165 | left: 2em; |
160 | height: 2em; |
166 | height: 2em; |
161 | width: 0.25em; |
167 | width: 0.25em; |
162 | background-color: #000; |
168 | background-color: #000; |
163 | }
|
169 | }
|
164 | 170 | ||
165 | .empty .separator-right { |
171 | .empty .separator-right { |
166 | position: absolute; |
172 | position: absolute; |
167 | right: 2em; |
173 | right: 2em; |
168 | height: 2em; |
174 | height: 2em; |
169 | width: 0.25em; |
175 | width: 0.25em; |
170 | background-color: #000; |
176 | background-color: #000; |
171 | }
|
177 | }
|
172 | 178 | ||
173 | .bow { |
179 | .bow { |
174 | background-color: #999; |
180 | background-color: #999; |
175 | }
|
181 | }
|
176 | 182 | ||
177 | #bow-top-left { |
183 | #bow-top-left { |
178 | position: absolute; |
184 | position: absolute; |
179 | top: 2em; |
185 | top: 2em; |
180 | left: 0; |
186 | left: 0; |
181 | right: 0; |
187 | right: 0; |
182 | height: 4.4em; |
188 | height: 4.4em; |
183 | width: 9.2em; |
189 | width: 9.2em; |
184 | background-color: #999; |
190 | background-color: #999; |
185 | overflow: hidden; |
191 | overflow: hidden; |
186 | }
|
192 | }
|
187 | 193 | ||
188 | .empty #bow-top-left { |
194 | .empty #bow-top-left { |
189 | display: none; |
195 | display: none; |
190 | }
|
196 | }
|
191 | 197 | ||
192 | #bow-top-left .concave { |
198 | #bow-top-left .concave { |
193 | position: absolute; |
199 | position: absolute; |
194 | top: 0; |
200 | top: 0; |
195 | left: 8em; |
201 | left: 8em; |
196 | height: 4.4em; |
202 | height: 4.4em; |
197 | width: 1.2em; |
203 | width: 1.2em; |
198 | background-color: #000; |
204 | background-color: #000; |
199 | border-top-left-radius: 1.2em; |
205 | border-top-left-radius: 1.2em; |
200 | }
|
206 | }
|
201 | 207 | ||
202 | .empty #bow-top-left-concave { |
208 | .empty #bow-top-left-concave { |
203 | display: none; |
209 | display: none; |
204 | }
|
210 | }
|
205 | 211 | ||
206 | .menu-container { |
212 | .menu-container { |
207 | position: fixed; |
213 | position: fixed; |
208 | left: 0.2em; |
214 | left: 0.2em; |
209 | top: 6.8em; |
215 | top: 6.8em; |
210 | width: 8em; |
216 | width: 8em; |
211 | bottom: 2.8em; |
217 | bottom: 2.8em; |
212 | background-color: #999; |
218 | background-color: #999; |
213 | overflow: auto; |
219 | overflow: auto; |
214 | overflow-x: hidden; |
220 | overflow-x: hidden; |
215 | overflow-y: auto; |
221 | overflow-y: auto; |
216 | }
|
222 | }
|
217 | 223 | ||
218 | .menu
|
224 | .menu
|
219 | {
|
225 | {
|
220 | height: 20em; |
226 | height: 20em; |
221 | background-color: #000; |
227 | background-color: #000; |
222 | }
|
228 | }
|
223 | 229 | ||
224 | .menu ul { |
230 | .menu ul { |
225 | margin: 0 0.2em 0 0; |
231 | margin: 0 0.2em 0 0; |
226 | padding: 0; |
232 | padding: 0; |
227 | }
|
233 | }
|
228 | 234 | ||
229 | .menu li { |
235 | .menu li { |
230 | margin: 0; |
236 | margin: 0; |
231 | }
|
237 | }
|
232 | 238 | ||
233 | #bow #bottom |
239 | #bow #bottom |
234 | {
|
240 | {
|
235 | position: fixed; |
241 | position: fixed; |
236 | left: 0; |
242 | left: 0; |
237 | bottom: 0; |
243 | bottom: 0; |
238 | width: 20.8em; |
244 | width: 10.4em; |
239 | height: 2.4em; |
245 | height: 2.4em; |
240 | background-color: #000; |
246 | background-color: #000; |
241 | z-index: 1701; |
247 | z-index: 1701; |
242 | }
|
248 | }
|
243 | 249 | ||
244 | #bow-bottom { |
250 | #bow-bottom { |
245 | position: absolute; |
251 | position: absolute; |
246 | bottom: 0.2em; |
252 | bottom: 0.2em; |
247 | left: 0.2em; |
253 | left: 0.2em; |
248 | width: 20.6em; |
254 | width: 8em; |
249 | height: 2.4em; |
255 | height: 2.6em; |
250 | border-bottom-left-radius: 2.4em; |
256 | border-bottom-left-radius: 0em; |
251 | border-bottom-right-radius: 2em; |
257 | border-bottom-right-radius: 0em; |
252 | background-color: #999; |
258 | background-color: #999; |
253 | }
|
259 | }
|
254 | 260 | ||
255 | .empty #bow-bottom { |
261 | .empty #bow-bottom { |
256 | display: none; |
262 | display: none; |
257 | }
|
263 | }
|
258 | 264 | ||
259 | #bow-bottom .concave { |
265 | #bow-bottom .concave { |
260 | position: absolute; |
266 | position: absolute; |
261 | margin-left: 0.2em; |
267 | margin-left: 0.2em; |
262 | margin-bottom: 0.2em; |
268 | margin-bottom: 0.2em; |
263 | bottom: 0.3em; |
269 | bottom: 0.3em; |
264 | left: 7.8em; |
270 | left: 7.8em; |
265 | height: 2.1em; |
271 | height: 2.1em; |
266 | width: 7.6em; |
272 | width: 2.2em; |
267 | border-bottom-left-radius: 1.2em; |
273 | border-bottom-left-radius: 1.2em; |
268 | border-bottom-right-radius: 1em; |
274 | border-bottom-right-radius: 1em; |
269 | background-color: #000; |
275 | background-color: #000; |
270 | }
|
276 | }
|
271 | 277 | ||
272 | #bow-bottom .spacer { |
278 | #bow-bottom .spacer { |
273 | position: absolute; |
279 | position: absolute; |
274 | left: 10.2em; |
280 | left: 10.2em; |
275 | bottom: 0; |
281 | bottom: 0; |
276 | width: 0.2em; |
282 | width: 0.2em; |
277 | height: 0.5em; |
283 | height: 0.5em; |
278 | background-color: black; |
284 | background-color: black; |
279 | }
|
285 | }
|
280 | 286 | ||
281 | .empty #bow-bottom-left-concave { |
287 | .empty #bow-bottom-left-concave { |
282 | display: none; |
288 | display: none; |
283 | }
|
289 | }
|
284 | 290 | ||
285 | /* Controls */
|
291 | /* Controls */
|
286 | 292 | ||
287 | .button:visited, |
293 | .button:visited, |
288 | .button
|
294 | .button
|
289 | {
|
295 | {
|
290 | position: relative; |
296 | position: relative; |
291 | display: inline-block; |
297 | display: inline-block; |
292 | margin-right: 0.2em; |
298 | margin-right: 0.2em; |
293 | margin-bottom: 0.2em; |
299 | margin-bottom: 0.2em; |
294 | width: 5em; |
300 | width: 5em; |
295 | height: 2em; |
301 | height: 2em; |
296 | background-color: #7d7d7d; /* c9c */ |
302 | background-color: #7d7d7d; /* c9c */ |
297 | color: #000 !important; |
303 | color: #000 !important; |
298 | text-decoration: none !important; |
304 | text-decoration: none !important; |
299 | text-transform: uppercase; |
305 | text-transform: uppercase; |
300 | overflow: hidden; |
306 | overflow: hidden; |
301 | cursor: pointer !important; |
307 | cursor: pointer !important; |
302 | }
|
308 | }
|
303 | 309 | ||
304 | .button .text { |
310 | .button .text { |
305 | position: absolute; |
311 | position: absolute; |
306 | bottom: 0; |
312 | bottom: 0; |
307 | right: 0.5em; |
313 | right: 0.5em; |
308 | cursor: pointer !important; |
314 | cursor: pointer !important; |
309 | }
|
315 | }
|
310 | 316 | ||
311 | .button.command { |
317 | .button.command { |
312 | border-radius: 1.2em; |
318 | border-radius: 1.2em; |
313 | }
|
319 | }
|
314 | 320 | ||
315 | .button.command .text { |
321 | .button.command .text { |
316 | position: absolute; |
322 | position: absolute; |
317 | bottom: 0; |
323 | bottom: 0; |
318 | right: 1em; |
324 | right: 1em; |
319 | }
|
325 | }
|
320 | 326 | ||
321 | .button:hover, |
327 | .button:hover, |
322 | .button:focus, |
328 | .button:focus, |
323 | .button.selected:hover, |
329 | .button.selected:hover, |
324 | .button.selected:focus, |
330 | .button.selected:focus, |
325 | .group .button:hover, |
331 | .group .button:hover, |
326 | .group .button:focus, |
332 | .group .button:focus, |
327 | .group .button:visited:hover, |
333 | .group .button:visited:hover, |
328 | .group .button:visited:focus |
334 | .group .button:visited:focus |
329 | {
|
335 | {
|
330 | background-color: #f90 !important; |
336 | background-color: #f90 !important; |
331 | color: #000 !important; |
337 | color: #000 !important; |
332 | }
|
338 | }
|
333 | 339 | ||
334 | .button:active, |
340 | .button:active, |
335 | .button.selected:active, |
341 | .button.selected:active, |
336 | .group .button:active, |
342 | .group .button:active, |
337 | .group .button:visited:active |
343 | .group .button:visited:active |
338 | {
|
344 | {
|
339 | background-color: #fff !important; |
345 | background-color: #fff !important; |
340 | color: #000 !important; |
346 | color: #000 !important; |
341 | }
|
347 | }
|
342 | 348 | ||
343 | .menu .button { |
349 | .menu .button { |
344 | display: block; |
350 | display: block; |
345 | width: 8em; |
351 | width: 8em; |
346 | height: 1em; |
352 | height: 1em; |
347 | line-height: 1; |
353 | line-height: 1; |
348 | background-color: #9cf; |
354 | background-color: #9cf; |
349 | color: #000 !important; |
355 | color: #000 !important; |
350 | text-overflow: ellipsis; |
356 | text-overflow: ellipsis; |
351 | white-space: nowrap; |
357 | white-space: nowrap; |
352 | }
|
358 | }
|
353 | 359 | ||
354 | #connectors { |
360 | #connectors { |
355 | position: fixed; |
361 | position: fixed; |
356 | left: 8.4em; |
362 | left: 8.4em; |
357 | top: 5.6em; |
363 | top: 5.6em; |
358 | }
|
364 | }
|
359 | 365 | ||
- | 366 | #connectors div { |
|
- | 367 | position: absolute; |
|
- | 368 | }
|
|
- | 369 | ||
- | 370 | #connectors .top { |
|
- | 371 | top: 0; |
|
- | 372 | height: 1em; |
|
- | 373 | }
|
|
- | 374 | ||
- | 375 | #connectors .mid { |
|
- | 376 | top: 13.6em; |
|
- | 377 | height: 0.8em; |
|
- | 378 | }
|
|
- | 379 | ||
- | 380 | #connectors .left { |
|
- | 381 | left: 0; |
|
- | 382 | width: 2em; |
|
- | 383 | }
|
|
- | 384 | ||
- | 385 | #connectors .right { |
|
- | 386 | left: 2.2em; |
|
- | 387 | width: 0em; |
|
- | 388 | }
|
|
- | 389 | ||
360 | .multi-display
|
390 | .multi-display
|
361 | {
|
391 | {
|
362 | position: fixed; |
392 | position: fixed; |
363 | top: 2.6em; |
393 | top: 2.6em; |
364 | left: 15.8em; |
394 | left: 10.6em; |
365 | right: 0; |
395 | right: 0; |
366 | }
|
396 | }
|
367 | 397 | ||
368 | .multi-display .button |
398 | .multi-display .button |
369 | {
|
399 | {
|
370 | width: 5em !important; |
400 | width: 5em !important; |
371 | }
|
401 | }
|
372 | 402 | ||
373 | .multi-display .upper |
403 | .multi-display .upper |
374 | {
|
404 | {
|
375 | position: absolute; |
405 | position: absolute; |
376 | top: 0; |
406 | top: 0; |
377 | left: 0; |
407 | left: 0; |
378 | right: 0; |
408 | right: 0; |
379 | height: 7.5em; |
409 | height: 7.5em; |
380 | padding-right: 0.2em; |
410 | padding-right: 0.2em; |
381 | background-color: black; |
411 | background-color: black; |
382 | }
|
412 | }
|
383 | 413 | ||
384 | .multi-display .upper .content |
414 | .multi-display .upper .content |
385 | {
|
415 | {
|
386 | position: absolute; |
416 | position: absolute; |
387 | top: 0; |
417 | top: 0; |
388 | left: 6em; |
418 | left: 6em; |
389 | bottom: 1.3em; |
419 | bottom: 1.3em; |
390 | right: 0.2em; |
420 | right: 0.2em; |
391 | background-color: black; |
421 | background-color: black; |
392 | color: white; |
422 | color: white; |
393 | text-align: right; |
423 | text-align: right; |
394 | overflow: hidden; |
424 | overflow: hidden; |
395 | text-overflow: ellipsis; |
425 | text-overflow: ellipsis; |
396 | }
|
426 | }
|
397 | 427 | ||
398 | .multi-display .upper .content .title |
428 | .multi-display .upper .content .title |
399 | {
|
429 | {
|
400 | position: absolute; |
430 | position: absolute; |
401 | top: 0; |
431 | top: 0; |
402 | left: 0; |
432 | left: 0; |
403 | height: 1em; |
433 | height: 1em; |
404 | right: 0; |
434 | right: 0; |
405 | background-color: black; |
435 | background-color: black; |
406 | color: white; |
436 | color: white; |
407 | font-size: 2.4em; |
437 | font-size: 2.4em; |
408 | text-transform: uppercase; |
438 | text-transform: uppercase; |
409 | text-align: right; |
439 | text-align: right; |
410 | overflow: hidden; |
440 | overflow: hidden; |
411 | }
|
441 | }
|
412 | 442 | ||
413 | .multi-display .upper .content .title span |
443 | .multi-display .upper .content .title span |
414 | {
|
444 | {
|
415 | white-space: nowrap; |
445 | white-space: nowrap; |
416 | }
|
446 | }
|
417 | 447 | ||
418 | .multi-display .upper .content .analysis { |
448 | .multi-display .upper .content .analysis { |
419 | position: absolute; |
449 | position: absolute; |
420 | top: 2.4em; |
450 | top: 2.4em; |
421 | bottom: 0; |
451 | bottom: 0; |
422 | right: 11em; |
452 | right: 11em; |
423 | left: 0; |
453 | left: 0; |
424 | overflow: hidden; |
454 | overflow: hidden; |
425 | text-align: left; |
455 | text-align: left; |
426 | cursor: default; |
456 | cursor: default; |
427 | }
|
457 | }
|
428 | 458 | ||
429 | .multi-display .upper .content .analysis table { |
459 | .multi-display .upper .content .analysis table { |
430 | border-collapse: collapse; |
460 | border-collapse: collapse; |
431 | line-height: 1.2; |
461 | line-height: 1.2; |
- | 462 | max-width: 100%; |
|
432 | }
|
463 | }
|
433 | 464 | ||
434 | .multi-display .upper .content .analysis th { |
465 | .multi-display .upper .content .analysis th { |
435 | padding: 0 0.1em; |
466 | padding: 0 0.1em; |
436 | font-weight: normal; |
467 | font-weight: normal; |
437 | text-align: left; |
468 | text-align: left; |
438 | text-transform: uppercase; |
469 | text-transform: uppercase; |
439 | white-space: nowrap; |
470 | white-space: nowrap; |
440 | vertical-align: baseline; |
471 | vertical-align: baseline; |
441 | }
|
472 | }
|
442 | 473 | ||
443 | .multi-display .upper .content .analysis td { |
474 | .multi-display .upper .content .analysis td { |
444 | padding: 0 0.1em; |
475 | padding: 0 0.1em; |
445 | text-overflow: ellipsis; |
476 | text-overflow: ellipsis; |
446 | white-space: nowrap; |
477 | white-space: nowrap; |
447 | vertical-align: baseline; |
478 | vertical-align: baseline; |
448 | text-overflow: ellipsis; |
479 | text-overflow: ellipsis; |
449 | }
|
480 | }
|
450 | 481 | ||
451 | .multi-display .upper .content .analysis tr:hover th, |
482 | .multi-display .upper .content .analysis tr:hover th, |
452 | .multi-display .upper .content .analysis tr:hover td |
483 | .multi-display .upper .content .analysis tr:hover td |
453 | {
|
484 | {
|
454 | color: #f90; |
485 | color: #f90; |
455 | }
|
486 | }
|
456 | 487 | ||
457 | .multi-display .upper .content .analysis td sup { |
488 | .multi-display .upper .content .analysis td sup { |
458 | line-height: 1; |
489 | line-height: 1; |
459 | font-weight: 500; |
490 | font-weight: 500; |
460 | }
|
491 | }
|
461 | 492 | ||
462 | .multi-display .upper .content .commands |
493 | .multi-display .upper .content .commands |
463 | {
|
494 | {
|
464 | position: absolute; |
495 | position: absolute; |
465 | margin: 0; |
496 | margin: 0; |
466 | padding: 0; |
497 | padding: 0; |
467 | top: 2.4em; |
498 | top: 2.4em; |
468 | right: 0; |
499 | right: 0; |
469 | height: 3.8em; |
500 | height: 3.8em; |
470 | width: 10.2em; |
501 | width: 10.2em; |
471 | list-style: none; |
502 | list-style: none; |
472 | }
|
503 | }
|
473 | 504 | ||
474 | .multi-display .upper .content .commands li |
505 | .multi-display .upper .content .commands li |
475 | {
|
506 | {
|
476 | position: absolute; |
507 | position: absolute; |
477 | margin: 0; |
508 | margin: 0; |
478 | width: 5em; |
509 | width: 5em; |
479 | height: 1.8em; |
510 | height: 1.8em; |
480 | }
|
511 | }
|
481 | 512 | ||
482 | .multi-display .upper .content .commands .button |
513 | .multi-display .upper .content .commands .button |
483 | {
|
514 | {
|
484 | position: absolute; |
515 | position: absolute; |
485 | top: 0; |
516 | top: 0; |
486 | left: 0; |
517 | left: 0; |
487 | margin: 0; |
518 | margin: 0; |
488 | height: 1.8em; |
519 | height: 1.8em; |
489 | border-radius: 0.9em; |
520 | border-radius: 0.9em; |
490 | text-transform: none; |
521 | text-transform: none; |
491 | }
|
522 | }
|
492 | 523 | ||
493 | .multi-display .upper .content .commands .button .text { |
524 | .multi-display .upper .content .commands .button .text { |
494 | right: 1em; |
525 | right: 1em; |
495 | }
|
526 | }
|
496 | 527 | ||
497 | .multi-display .upper .content #cmd1 |
528 | .multi-display .upper .content #cmd1 |
498 | {
|
529 | {
|
499 | top: 0; |
530 | top: 0; |
500 | right: 5.2em; |
531 | right: 5.2em; |
501 | }
|
532 | }
|
502 | 533 | ||
503 | .multi-display .upper .content #cmd2 |
534 | .multi-display .upper .content #cmd2 |
504 | {
|
535 | {
|
505 | top: 0; |
536 | top: 0; |
506 | right: 0; |
537 | right: 0; |
507 | }
|
538 | }
|
508 | 539 | ||
509 | .multi-display .upper .content #cmd3 |
540 | .multi-display .upper .content #cmd3 |
510 | {
|
541 | {
|
511 | top: 2em; |
542 | top: 2em; |
512 | right: 0; |
543 | right: 0; |
513 | }
|
544 | }
|
514 | 545 | ||
515 | .multi-display .upper .content #cmd4 |
546 | .multi-display .upper .content #cmd4 |
516 | {
|
547 | {
|
517 | top: 2em; |
548 | top: 2em; |
518 | right: 5.2em; |
549 | right: 5.2em; |
519 | }
|
550 | }
|
520 | 551 | ||
521 | .multi-display .upper .elbo-button |
552 | .multi-display .upper .elbo-button |
522 | {
|
553 | {
|
523 | position: absolute; |
554 | position: absolute; |
524 | top: 0; |
555 | top: 0; |
525 | left: 0; |
556 | left: 0; |
526 | width: 5em; |
557 | width: 5em; |
527 | height: 4em; |
558 | height: 4em; |
528 | background-color: #c9c !important; |
559 | background-color: #c9c !important; |
529 | color: #000 !important; |
560 | color: #000 !important; |
530 | cursor: default; |
561 | cursor: default; |
531 | }
|
562 | }
|
532 | 563 | ||
533 | .multi-display .upper .elbo-button .text |
564 | .multi-display .upper .elbo-button .text |
534 | {
|
565 | {
|
535 | position: absolute; |
566 | position: absolute; |
536 | bottom: 0; |
567 | bottom: 0; |
537 | right: 0.2em; |
568 | right: 0.2em; |
538 | max-width: 4em; |
569 | max-width: 4em; |
539 | max-height: 3.6em; |
570 | max-height: 3.6em; |
540 | text-align: right; |
571 | text-align: right; |
541 | overflow: hidden; |
572 | overflow: hidden; |
542 | }
|
573 | }
|
543 | 574 | ||
544 | .multi-display .upper .elbo |
575 | .multi-display .upper .elbo |
545 | {
|
576 | {
|
546 | position: absolute; |
577 | position: absolute; |
547 | left: 0; |
578 | left: 0; |
548 | top: 4.2em; |
579 | top: 4.2em; |
549 | width: 6em; |
580 | width: 6em; |
550 | height: 3.2em; |
581 | height: 3.2em; |
551 | border-bottom-left-radius: 2em; |
582 | border-bottom-left-radius: 2em; |
552 | background-color: #9cf; |
583 | background-color: #9cf; |
553 | color: #000; |
584 | color: #000; |
554 | }
|
585 | }
|
555 | 586 | ||
556 | .multi-display .upper .elbo .text |
587 | .multi-display .upper .elbo .text |
557 | {
|
588 | {
|
558 | position: absolute; |
589 | position: absolute; |
559 | top: 0; |
590 | top: 0; |
560 | right: 1.2em; |
591 | right: 1.2em; |
561 | max-width: 4em; |
592 | max-width: 4em; |
562 | max-height: 2.2em; |
593 | max-height: 2.2em; |
563 | text-align: right; |
594 | text-align: right; |
564 | overflow: hidden; |
595 | overflow: hidden; |
565 | cursor: default; |
596 | cursor: default; |
566 | }
|
597 | }
|
567 | 598 | ||
568 | .elbo [title], |
599 | .elbo [title], |
569 | .button [title] |
600 | .button [title] |
570 | {
|
601 | {
|
571 | border-bottom: none; |
602 | border-bottom: none; |
572 | }
|
603 | }
|
573 | 604 | ||
574 | .multi-display .upper .elbo .concave |
605 | .multi-display .upper .elbo .concave |
575 | {
|
606 | {
|
576 | position: absolute; |
607 | position: absolute; |
577 | left: 5em; |
608 | left: 5em; |
578 | top: 0; |
609 | top: 0; |
579 | width: 1.1em; |
610 | width: 1.1em; |
580 | height: 2.2em; |
611 | height: 2.2em; |
581 | border-bottom-left-radius: 1em; |
612 | border-bottom-left-radius: 1em; |
582 | background-color: black; |
613 | background-color: black; |
583 | }
|
614 | }
|
584 | 615 | ||
585 | .multi-display .border |
616 | .multi-display .border |
586 | {
|
617 | {
|
587 | height: 1em; |
618 | height: 1em; |
588 | }
|
619 | }
|
589 | 620 | ||
590 | .multi-display .upper .border |
621 | .multi-display .upper .border |
591 | {
|
622 | {
|
592 | position: absolute; |
623 | position: absolute; |
593 | top: 6.4em; |
624 | top: 6.4em; |
594 | left: 6em; |
625 | left: 6em; |
595 | right: 0.2em; |
626 | right: 0.2em; |
596 | }
|
627 | }
|
597 | 628 | ||
598 | .multi-display .border div |
629 | .multi-display .border div |
599 | {
|
630 | {
|
600 | position: absolute; |
631 | position: absolute; |
601 | top: 0; |
632 | top: 0; |
602 | height: 1em; |
633 | height: 1em; |
603 | }
|
634 | }
|
604 | 635 | ||
605 | .multi-display .upper .border div |
636 | .multi-display .upper .border div |
606 | {
|
637 | {
|
607 | background-color: #9cf; |
638 | background-color: #9cf; |
608 | }
|
639 | }
|
609 | 640 | ||
610 | .multi-display .upper .border .left |
641 | .multi-display .upper .border .left |
611 | {
|
642 | {
|
612 | left: 0; |
643 | left: 0; |
613 | right: 5.2em; |
644 | right: 5.2em; |
614 | height: 1em; |
645 | height: 1em; |
615 | }
|
646 | }
|
616 | 647 | ||
617 | .multi-display .upper .border .right |
648 | .multi-display .upper .border .right |
618 | {
|
649 | {
|
619 | width: 5em; |
650 | width: 5em; |
620 | right: 0; |
651 | right: 0; |
621 | }
|
652 | }
|
622 | 653 | ||
623 | .multi-display .lower |
654 | .multi-display .lower |
624 | {
|
655 | {
|
625 | position: absolute; |
656 | position: absolute; |
626 | top: 7.5em; |
657 | top: 7.5em; |
627 | left: 0; |
658 | left: 0; |
628 | height: 0.1em; |
659 | height: 0.1em; |
629 | right: 0; |
660 | right: 0; |
630 | background-color: black; |
661 | background-color: black; |
631 | }
|
662 | }
|
632 | 663 | ||
633 | .multi-display .lower .elbo |
664 | .multi-display .lower .elbo |
634 | {
|
665 | {
|
635 | position: absolute; |
666 | position: absolute; |
636 | top: 0.1em; |
667 | top: 0.1em; |
637 | left: 0; |
668 | left: 0; |
638 | width: 6em; |
669 | width: 6em; |
639 | height: 3em; |
670 | height: 3em; |
640 | border-top-left-radius: 2em; |
671 | border-top-left-radius: 2em; |
641 | background-color: #fc6; |
672 | background-color: #fc6; |
642 | }
|
673 | }
|
643 | 674 | ||
644 | .multi-display .lower .elbo .concave |
675 | .multi-display .lower .elbo .concave |
645 | {
|
676 | {
|
646 | position: absolute; |
677 | position: absolute; |
647 | left: 5em; |
678 | left: 5em; |
648 | top: 1em; |
679 | top: 1em; |
649 | width: 1.1em; |
680 | width: 1.1em; |
650 | height: 2.1em; |
681 | height: 2.1em; |
651 | background-color: black; |
682 | background-color: black; |
652 | border-top-left-radius: 1em; |
683 | border-top-left-radius: 1em; |
653 | }
|
684 | }
|
654 | 685 | ||
655 | .multi-display .lower .bg |
686 | .multi-display .lower .bg |
656 | {
|
687 | {
|
657 | position: fixed; |
688 | position: fixed; |
658 | top: 13.4em; |
689 | top: 13.4em; |
659 | bottom: 2.8em; |
690 | bottom: 0.2em; |
660 | width: 5em; |
691 | width: 5em; |
661 | background-color: #fc6; |
692 | background-color: #fc6; |
662 | }
|
693 | }
|
663 | 694 | ||
664 | .multi-display .lower .border-container |
695 | .multi-display .lower .border-container |
665 | {
|
696 | {
|
666 | position: absolute; |
697 | position: absolute; |
667 | top: 0.1em; |
698 | top: 0.1em; |
668 | left: 6em; |
699 | left: 6em; |
669 | right: 0; |
700 | right: 0; |
670 | height: 1.2em; |
701 | height: 1.2em; |
671 | background-color: black; |
702 | background-color: black; |
672 | }
|
703 | }
|
673 | 704 | ||
674 | .multi-display .lower .border |
705 | .multi-display .lower .border |
675 | {
|
706 | {
|
676 | position: absolute; |
707 | position: absolute; |
677 | left: 0; |
708 | left: 0; |
678 | right: 0.2em; |
709 | right: 0.2em; |
679 | }
|
710 | }
|
680 | 711 | ||
681 | .multi-display .lower .border div |
712 | .multi-display .lower .border div |
682 | {
|
713 | {
|
683 | background-color: #fc6; |
714 | background-color: #fc6; |
684 | }
|
715 | }
|
685 | 716 | ||
686 | .multi-display .lower .border .left |
717 | .multi-display .lower .border .left |
687 | {
|
718 | {
|
688 | left: 0; |
719 | left: 0; |
689 | right: 5.2em; |
720 | right: 5.2em; |
690 | }
|
721 | }
|
691 | 722 | ||
692 | .multi-display .lower .border .right |
723 | .multi-display .lower .border .right |
693 | {
|
724 | {
|
694 | width: 5em; |
725 | width: 5em; |
695 | right: 0; |
726 | right: 0; |
696 | }
|
727 | }
|
697 | 728 | ||
698 | .menu .button.secondary, |
729 | .menu .button.secondary, |
699 | .multi-display .lower .elbo.secondary, |
730 | .multi-display .lower .elbo.secondary, |
700 | .multi-display .lower .bg.secondary, |
731 | .multi-display .lower .bg.secondary, |
701 | .multi-display .lower .border.secondary |
732 | .multi-display .lower .border.secondary |
702 | {
|
733 | {
|
703 | background-color: #f96; |
734 | background-color: #f96; |
704 | }
|
735 | }
|
705 | 736 | ||
706 | .menu .button.ancillary, |
737 | .menu .button.ancillary, |
707 | .multi-display .lower .elbo.ancillary, |
738 | .multi-display .lower .elbo.ancillary, |
708 | .multi-display .lower .bg.ancillary, |
739 | .multi-display .lower .bg.ancillary, |
709 | .multi-display .lower .border.ancillary |
740 | .multi-display .lower .border.ancillary |
710 | {
|
741 | {
|
711 | background-color: #c9c; |
742 | background-color: #c9c; |
712 | }
|
743 | }
|
713 | 744 | ||
714 | .menu .button.database, |
745 | .menu .button.database, |
715 | .multi-display .lower .elbo.database, |
746 | .multi-display .lower .elbo.database, |
716 | .multi-display .lower .bg.database, |
747 | .multi-display .lower .bg.database, |
717 | .multi-display .lower .border.database |
748 | .multi-display .lower .border.database |
718 | {
|
749 | {
|
719 | background-color: #c66; |
750 | background-color: #c66; |
720 | }
|
751 | }
|
721 | 752 | ||
722 | .menu .button .text { |
753 | .menu .button .text { |
723 | position: static; |
754 | position: static; |
724 | margin: 0 0.25em; |
755 | margin: 0 0.25em; |
725 | }
|
756 | }
|
726 | 757 | ||
727 | .button.selected { |
758 | .button.selected { |
728 | background-color: #fc6 !important; |
759 | background-color: #fc6 !important; |
729 | color: #000 !important; |
760 | color: #000 !important; |
730 | }
|
761 | }
|
731 | 762 | ||
732 | .group { |
763 | .group { |
733 | margin: 0 auto; |
764 | margin: 0 auto; |
734 | position: relative; |
765 | position: relative; |
735 | width: 7.7em; |
766 | width: 7.7em; |
736 | }
|
767 | }
|
737 | 768 | ||
738 | .group .separator { |
769 | .group .separator { |
739 | float: left; |
770 | float: left; |
740 | position: absolute; |
771 | position: absolute; |
741 | top: 0; |
772 | top: 0; |
742 | left: 0; |
773 | left: 0; |
743 | width: 1.5em; |
774 | width: 1.5em; |
744 | height: 100%; |
775 | height: 100%; |
745 | background-color: #c66; |
776 | background-color: #c66; |
746 | color: #000; |
777 | color: #000; |
747 | }
|
778 | }
|
748 | 779 | ||
749 | .group .separator:after { |
780 | .group .separator:after { |
750 | position: absolute; |
781 | position: absolute; |
751 | width: 0.8em; |
782 | width: 0.8em; |
752 | height: 0.5em; |
783 | height: 0.5em; |
753 | bottom: 0.25em; |
784 | bottom: 0.25em; |
754 | left: 0.25em; |
785 | left: 0.25em; |
755 | background-color: #000; |
786 | background-color: #000; |
756 | content: "\a0"; |
787 | content: "\a0"; |
757 | }
|
788 | }
|
758 | 789 | ||
759 | .group ul { |
790 | .group ul { |
760 | margin-left: 1.7em; |
791 | margin-left: 1.7em; |
761 | }
|
792 | }
|
762 | 793 | ||
763 | .group li { |
794 | .group li { |
764 | margin-bottom: 0; |
795 | margin-bottom: 0; |
765 | }
|
796 | }
|
766 | 797 | ||
767 | .group .button:visited, |
798 | .group .button:visited, |
768 | .group .button |
799 | .group .button |
769 | {
|
800 | {
|
770 | display: block; |
801 | display: block; |
771 | position: relative; |
802 | position: relative; |
772 | width: 6em; |
803 | width: 6em; |
773 | background-color: #99f !important; |
804 | background-color: #99f !important; |
774 | }
|
805 | }
|
775 | 806 | ||
776 | .group li:last-child .button |
807 | .group li:last-child .button |
777 | {
|
808 | {
|
778 | margin-bottom: 0; |
809 | margin-bottom: 0; |
779 | }
|
810 | }
|
780 | 811 | ||
781 | .button.right { |
812 | .button.right { |
782 | border-top-right-radius: 1em; |
813 | border-top-right-radius: 1em; |
783 | border-bottom-right-radius: 1em; |
814 | border-bottom-right-radius: 1em; |
784 | }
|
815 | }
|
785 | 816 | ||
786 | .button.right .text { |
817 | .button.right .text { |
787 | right: 1em; |
818 | right: 1em; |
788 | }
|
819 | }
|
789 | 820 | ||
790 | .button.left { |
821 | .button.left { |
791 | border-top-left-radius: 1em; |
822 | border-top-left-radius: 1em; |
792 | border-bottom-left-radius: 1em; |
823 | border-bottom-left-radius: 1em; |
793 | }
|
824 | }
|
794 | 825 | ||
795 | .group .button .key { |
826 | .group .button .key { |
796 | display: inline-block; |
827 | display: inline-block; |
797 | position: absolute; |
828 | position: absolute; |
798 | left: 0.2em; |
829 | left: 0.2em; |
799 | top: 0; |
830 | top: 0; |
800 | bottom: 0; |
831 | bottom: 0; |
801 | padding: 0 0.1em; |
832 | padding: 0 0.1em; |
802 | background-color: #000; |
833 | background-color: #000; |
803 | color: #f90; |
834 | color: #f90; |
804 | font-size: 2.4em; |
835 | font-size: 2.4em; |
805 | text-transform: uppercase; |
836 | text-transform: uppercase; |
806 | line-height: 0.9; |
837 | line-height: 0.9; |
807 | }
|
- | |
808 | 838 | }
|
|
- | 839 | ||
- | 840 | /* Responsive Web Design (TODO: Move to imported stylesheet; but see above) */
|
|
- | 841 | ||
- | 842 | body {
|
|
- | 843 | <?php |
|
- | 844 | Mixins::transition('', 'margin-left 0.5s 0.5s ease'); |
|
- | 845 | ?>
|
|
- | 846 | }
|
|
- | 847 | ||
- | 848 | #bow #bottom |
|
- | 849 | {
|
|
- | 850 | <?php |
|
- | 851 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
|
- | 852 | ?>
|
|
- | 853 | }
|
|
- | 854 | ||
- | 855 | #bow-bottom { |
|
- | 856 | <?php |
|
- | 857 | Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width'); |
|
- | 858 | Mixins::transition('-delay', '0.5s'); |
|
- | 859 | Mixins::transition('-duration', '0.5s'); |
|
- | 860 | Mixins::transition('-timing-function', 'ease'); |
|
- | 861 | ?>
|
|
- | 862 | }
|
|
- | 863 | ||
- | 864 | #bow-bottom .concave { |
|
- | 865 | <?php |
|
- | 866 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
|
- | 867 | ?>
|
|
- | 868 | }
|
|
- | 869 | ||
- | 870 | #connectors .right { |
|
- | 871 | <?php |
|
- | 872 | Mixins::transition('', 'width 0.5s 0.5s ease'); |
|
- | 873 | ?>
|
|
- | 874 | }
|
|
- | 875 | ||
- | 876 | .multi-display
|
|
- | 877 | {
|
|
- | 878 | <?php |
|
- | 879 | Mixins::transition('', 'left 0.5s 0.5s ease'); |
|
- | 880 | ?>
|
|
- | 881 | }
|
|
- | 882 | ||
- | 883 | .multi-display .lower .bg |
|
- | 884 | {
|
|
- | 885 | <?php |
|
- | 886 | /* Wait 1s for bow to become shallower */
|
|
- | 887 | Mixins::transition('', 'bottom 2.5s 0.5s ease'); |
|
- | 888 | ?>
|
|
- | 889 | }
|
|
- | 890 | ||
- | 891 | @media all and (min-width: 1024px) {
|
|
- | 892 | body {
|
|
- | 893 | margin-left: 22em; |
|
- | 894 | <?php |
|
- | 895 | Mixins::transition('', 'margin-left 0.5s 0.5s ease'); |
|
- | 896 | ?>
|
|
- | 897 | }
|
|
- | 898 | ||
- | 899 | #bow #bottom |
|
- | 900 | {
|
|
- | 901 | width: 20.8em; |
|
- | 902 | <?php |
|
- | 903 | /* Wait 0.5s for multi-display to be reduced in height */
|
|
- | 904 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
|
- | 905 | ?>
|
|
- | 906 | }
|
|
- | 907 | ||
- | 908 | #bow-bottom { |
|
- | 909 | border-bottom-left-radius: 2.4em; |
|
- | 910 | border-bottom-right-radius: 2em; |
|
- | 911 | height: 2.4em; |
|
- | 912 | width: 20.6em; |
|
- | 913 | <?php |
|
- | 914 | Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width'); |
|
- | 915 | Mixins::transition('-delay', '1.0s'); |
|
- | 916 | Mixins::transition('-duration', '0.5s'); |
|
- | 917 | Mixins::transition('-timing-function', 'ease'); |
|
- | 918 | ?>
|
|
- | 919 | }
|
|
- | 920 | ||
- | 921 | #bow-bottom .concave { |
|
- | 922 | width: 7.6em; |
|
- | 923 | <?php |
|
- | 924 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
|
- | 925 | ?>
|
|
- | 926 | }
|
|
- | 927 | ||
- | 928 | #connectors .right { |
|
- | 929 | width: 5em; |
|
- | 930 | <?php |
|
- | 931 | /* Wait 1.0s for multi-display to be moved to right */
|
|
- | 932 | Mixins::transition('', 'width 1.0s 0.5s ease'); |
|
- | 933 | ?>
|
|
- | 934 | }
|
|
- | 935 | ||
- | 936 | .multi-display
|
|
- | 937 | {
|
|
- | 938 | left: 15.8em; |
|
- | 939 | <?php |
|
- | 940 | Mixins::transition('', 'left 0.5s 0.5s ease'); |
|
- | 941 | ?>
|
|
- | 942 | }
|
|
- | 943 | ||
- | 944 | .multi-display .lower .bg |
|
- | 945 | {
|
|
- | 946 | bottom: 2.8em; |
|
- | 947 | <?php |
|
- | 948 | Mixins::transition('', 'bottom 0.5s 0.5s ease'); |
|
- | 949 | ?>
|
|
- | 950 | }
|
|
- | 951 | }
|
|
- | 952 |