Subversion Repositories LCARS

Rev

Rev 159 | Rev 169 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

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