Subversion Repositories LCARS

Rev

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

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