Subversion Repositories LCARS

Rev

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

Rev 182 Rev 210
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
body {
109
body {
110
  margin-top: 12em;
110
  margin-top: 12em;
111
  margin-left: 16.8em;
111
  margin-left: 16.8em;
112
  margin-right: 0.2em;
112
  margin-right: 0.2em;
113
  margin-bottom: 0.2em;
113
  margin-bottom: 0.2em;
114
}
114
}
115
115
116
/* HTML5 elements */
116
/* HTML5 elements */
117
117
118
nav
118
nav
119
{
119
{
120
  display: block;
120
  display: block;
121
}
121
}
122
122
123
/* Bow (main) and elbo (multi-view) */
123
/* Bow (main) and elbo (multi-view) */
124
124
125
#LCARS {
125
#LCARS {
126
  position: fixed;
126
  position: fixed;
127
  left: 0;
127
  left: 0;
128
  top: 0;
128
  top: 0;
129
  right: 0;
129
  right: 0;
130
  padding: 0.2em;
130
  padding: 0.2em;
131
  background-color: #000;
131
  background-color: #000;
132
  z-index: 1701;
132
  z-index: 1701;
133
}
133
}
134
134
135
#bow {
135
#bow {
136
  position: absolute;
136
  position: absolute;
137
  left: 0.2em;
137
  left: 0.2em;
138
  top: 0.2em;
138
  top: 0.2em;
139
  right: 0.2em;
139
  right: 0.2em;
140
  height: 2.4em;
140
  height: 2.4em;
141
  padding-bottom: 0.2em;
141
  padding-bottom: 0.2em;
142
  background-color: #000;
142
  background-color: #000;
143
}
143
}
144
144
145
#bow-top {
145
#bow-top {
146
  /* NOTE: position: absolute is needed for animation */
146
  /* NOTE: position: absolute is needed for animation */
147
  position: absolute;
147
  position: absolute;
148
  top: 0;
148
  top: 0;
149
  left: 0;
149
  left: 0;
150
  right: 0;
150
  right: 0;
151
  min-width: 15.4em;
151
  min-width: 15.4em;
152
  height: 2em;
152
  height: 2em;
153
  background-color: #999;
153
  background-color: #999;
154
  border-top-left-radius: 2.4em;
154
  border-top-left-radius: 2.4em;
155
  border-top-right-radius: 1.2em;
155
  border-top-right-radius: 1.2em;
156
  border-bottom-right-radius: 1.2em;
156
  border-bottom-right-radius: 1.2em;
157
  line-height: 0.9;
157
  line-height: 0.9;
158
}
158
}
159
159
160
.empty #bow-top {
160
.empty #bow-top {
161
  border-top-left-radius: 1.2em;
161
  border-top-left-radius: 1.2em;
162
  border-bottom-left-radius: 1.2em;
162
  border-bottom-left-radius: 1.2em;
163
  min-width: 10em;
163
  min-width: 10em;
164
}
164
}
165
165
166
166
167
#bow-top .text {
167
#bow-top .text {
168
  position: absolute;
168
  position: absolute;
169
  margin: 0;
169
  margin: 0;
170
  left: 4.33em;
170
  left: 4.33em;
171
  top: 0;
171
  top: 0;
172
  right: 0.75em;
172
  right: 0.75em;
173
  height: 1em;
173
  height: 1em;
174
  text-align: right;
174
  text-align: right;
175
  color: #fc0;
175
  color: #fc0;
176
  font-size: 2.4em;
176
  font-size: 2.4em;
177
  padding-right: 0.1em;
177
  padding-right: 0.1em;
178
  overflow: hidden;
178
  overflow: hidden;
179
  text-overflow: ellipsis;
179
  text-overflow: ellipsis;
180
}
180
}
181
181
182
.empty #bow-top .text {
182
.empty #bow-top .text {
183
  left: 0.93em;
183
  left: 0.93em;
184
}
184
}
185
185
186
186
187
187
188
#bow-top .text span {
188
#bow-top .text span {
189
  padding-right: 0.1em;
189
  padding-right: 0.1em;
190
  background-color: #000;
190
  background-color: #000;
191
  padding-left: 0.1em;
191
  padding-left: 0.1em;
192
  text-transform: uppercase;
192
  text-transform: uppercase;
193
  white-space: nowrap;
193
  white-space: nowrap;
194
}
194
}
195
195
196
.empty #footer-container {
196
.empty #footer-container {
197
  position: fixed;
197
  position: fixed;
198
  left: 0.2em;
198
  left: 0.2em;
199
  bottom: 0;
199
  bottom: 0;
200
  right: 0.2em;
200
  right: 0.2em;
201
  min-height: 2.4em;
201
  min-height: 2.4em;
202
  padding-top: 0.2em;
202
  padding-top: 0.2em;
203
  padding-bottom: 0.2em;
203
  padding-bottom: 0.2em;
204
  background-color: #000;
204
  background-color: #000;
205
}
205
}
206
206
207
207
208
.empty #footer {
208
.empty #footer {
209
  position: absolute;
209
  position: absolute;
210
  bottom: 0;
210
  bottom: 0;
211
  left: 0;
211
  left: 0;
212
  right: 0;
212
  right: 0;
213
  height: 2em;
213
  height: 2em;
214
  min-width: 10em;
214
  min-width: 10em;
215
  margin-bottom: 0.2em;
215
  margin-bottom: 0.2em;
216
  background-color: #999;
216
  background-color: #999;
217
  border-radius: 1.2em;
217
  border-radius: 1.2em;
218
  line-height: 0.9;
218
  line-height: 0.9;
219
}
219
}
220
220
221
.empty #footer .text {
221
.empty #footer .text {
222
  position: absolute;
222
  position: absolute;
223
  margin: 0;
223
  margin: 0;
224
  left: 0.93em;
224
  left: 0.93em;
225
  top: 0;
225
  top: 0;
226
  right: 0.75em;
226
  right: 0.75em;
227
  height: 1em;
227
  height: 1em;
228
  background-color: transparent;
228
  background-color: transparent;
229
  color: #fc0;
229
  color: #fc0;
230
  font-size: 2.4em;
230
  font-size: 2.4em;
231
  padding-right: 0.1em;
231
  padding-right: 0.1em;
232
  overflow: hidden;
232
  overflow: hidden;
233
  text-overflow: ellipsis;
233
  text-overflow: ellipsis;
234
}
234
}
235
235
236
.empty #footer .text span {
236
.empty #footer .text span {
237
  padding-right: 0.1em;
237
  padding-right: 0.1em;
238
  background-color: #000;
238
  background-color: #000;
239
  padding-left: 0.1em;
239
  padding-left: 0.1em;
240
  text-transform: uppercase;
240
  text-transform: uppercase;
241
  white-space: nowrap;
241
  white-space: nowrap;
242
}
242
}
243
243
244
.empty .separator-left {
244
.empty .separator-left {
245
  position: absolute;
245
  position: absolute;
246
  left: 2em;
246
  left: 2em;
247
  height: 2em;
247
  height: 2em;
248
  width: 0.25em;
248
  width: 0.25em;
249
  background-color: #000;
249
  background-color: #000;
250
}
250
}
251
251
252
.empty .separator-right {
252
.empty .separator-right {
253
  position: absolute;
253
  position: absolute;
254
  right: 2em;
254
  right: 2em;
255
  height: 2em;
255
  height: 2em;
256
  width: 0.25em;
256
  width: 0.25em;
257
  background-color: #000;
257
  background-color: #000;
258
}
258
}
259
259
260
.bow {
260
.bow {
261
  background-color: #999;
261
  background-color: #999;
262
}
262
}
263
263
264
#bow-top-left {
264
#bow-top-left {
265
  position: absolute;
265
  position: absolute;
266
  top: 2em;
266
  top: 2em;
267
  left: 0;
267
  left: 0;
268
  right: 0;
268
  right: 0;
269
  height: 4.4em;
269
  height: 4.4em;
270
  width: 9.2em;
270
  width: 9.2em;
271
  background-color: #999;
271
  background-color: #999;
272
  overflow: hidden;
272
  overflow: hidden;
273
}
273
}
274
274
275
.empty #bow-top-left {
275
.empty #bow-top-left {
276
  display: none;
276
  display: none;
277
}
277
}
278
278
279
#bow-top-left .concave {
279
#bow-top-left .concave {
280
  position: absolute;
280
  position: absolute;
281
  top: 0;
281
  top: 0;
282
  left: 8em;
282
  left: 8em;
283
  height: 4.4em;
283
  height: 4.4em;
284
  width: 1.2em;
284
  width: 1.2em;
285
  background-color: #000;
285
  background-color: #000;
286
  border-top-left-radius: 1.2em;
286
  border-top-left-radius: 1.2em;
287
}
287
}
288
288
289
.empty #bow-top-left-concave {
289
.empty #bow-top-left-concave {
290
  display: none;
290
  display: none;
291
}
291
}
292
292
293
.menu-container {
293
.menu-container {
294
  position: fixed;
294
  position: fixed;
295
  left: 0.2em;
295
  left: 0.2em;
296
  top: 6.8em;
296
  top: 6.8em;
297
  width: 8em;
297
  width: 8em;
298
  bottom: 2.8em;
298
  bottom: 2.8em;
299
  background-color: #999;
299
  background-color: #999;
300
  overflow: auto;
300
  overflow: auto;
301
  overflow-x: hidden;
301
  overflow-x: hidden;
302
  overflow-y: auto;
302
  overflow-y: auto;
303
}
303
}
304
304
305
.menu
305
.menu
306
{
306
{
307
  height: 23.6em;
307
  height: 23.6em;
308
  background-color: #000;
308
  background-color: #000;
309
}
309
}
310
310
311
.menu ul {
311
.menu ul {
312
  margin: 0 0.2em 0 0;
312
  margin: 0 0.2em 0 0;
313
  padding: 0;
313
  padding: 0;
314
}
314
}
315
315
316
.menu ul:first-child {
316
.menu ul:first-child {
317
  padding-top: 1em;
317
  padding-top: 1em;
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.4em;
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
input,
378
input,
379
select
379
select
380
{
380
{
381
  margin: 0 0.2em 0.2em 0;
381
  margin: 0 0.2em 0.2em 0;
382
  font-size: 1em;
382
  font-size: 1em;
383
}
383
}
384
384
385
input
385
input
386
{
386
{
387
  min-width: 4.875em;
387
  min-width: 4.875em;
388
  border: 1px solid #7d7d7d;
388
  border: 1px solid #7d7d7d;
389
  padding: 0 0.125em;
389
  padding: 0 0.125em;
390
  background-color: #000;
390
  background-color: #000;
391
  color: #fff;
391
  color: #fff;
392
}
392
}
393
393
394
input:focus
394
input:focus
395
{
395
{
396
  border-color: #f90;
396
  border-color: #f90;
397
}
397
}
398
398
399
select
399
select
400
{
400
{
401
  min-width: 5em;
401
  min-width: 5em;
402
  background-color: #7d7d7d;
402
  background-color: #7d7d7d;
403
  color: #000 !important;
403
  color: #000 !important;
404
  border: none;
404
  border: none;
405
}
405
}
406
406
407
select:focus
407
select:focus
408
{
408
{
409
  background-color: #f90;
409
  background-color: #f90;
410
  color: #000;
410
  color: #000;
411
}
411
}
412
412
413
option {
413
option {
414
  background-color: #000;
414
  background-color: #000;
415
  color: #fff;
415
  color: #fff;
416
}
416
}
417
417
418
option:checked {
418
option:checked {
419
  color: #fc6;
419
  color: #fc6;
420
}
420
}
421
421
422
.button:visited,
422
.button:visited,
423
.button
423
.button
424
{
424
{
425
  position: relative;
425
  position: relative;
426
  display: inline-block;
426
  display: inline-block;
427
  margin-right: 0.2em;
427
  margin-right: 0.2em;
428
  margin-bottom: 0.2em;
428
  margin-bottom: 0.2em;
429
  width: 5em;
429
  width: 5em;
430
  height: 2em;
430
  height: 2em;
431
  background-color: #7d7d7d; /* c9c */
431
  background-color: #7d7d7d; /* c9c */
432
  color: #000 !important;
432
  color: #000 !important;
433
  text-decoration: none !important;
433
  text-decoration: none !important;
434
  text-transform: uppercase;
-
 
435
  /* overflow: hidden; */
434
  /* overflow: hidden; */
436
  cursor: pointer !important;
435
  cursor: pointer !important;
437
}
436
}
438
437
439
.button .text {
438
.button .text {
440
  position: absolute;
439
  position: absolute;
441
  bottom: 0;
440
  bottom: 0;
442
  right: 0.5em;
441
  right: 0.5em;
-
 
442
  max-width: 3.5em;
-
 
443
  overflow: hidden;
443
  cursor: pointer !important;
444
  cursor: pointer !important;
-
 
445
  text-overflow: ellipsis;
-
 
446
  text-transform: uppercase;
-
 
447
  white-space: nowrap;
444
}
448
}
445
449
446
.button.command {
450
.button.command {
447
  border-radius: 1.2em;
451
  border-radius: 1.2em;
448
}
452
}
449
453
450
.button.command .text {
454
.button.command .text {
451
  position: absolute;
455
  position: absolute;
452
  bottom: 0;
456
  bottom: 0;
453
  right: 1em;
457
  right: 1em;
454
}
458
}
455
459
456
.button:hover,
460
.button:hover,
457
.button:focus,
461
.button:focus,
458
.button.selected:hover,
462
.button.selected:hover,
459
.button.selected:focus,
463
.button.selected:focus,
460
.group .button:hover,
464
.group .button:hover,
461
.group .button:focus,
465
.group .button:focus,
462
.group .button:visited:hover,
466
.group .button:visited:hover,
463
.group .button:visited:focus
467
.group .button:visited:focus
464
{
468
{
465
  background-color: #f90 !important;
469
  background-color: #f90 !important;
466
  color: #000 !important;
470
  color: #000 !important;
467
}
471
}
468
472
469
.button:active,
473
.button:active,
470
.button.selected:active,
474
.button.selected:active,
471
.group .button:active,
475
.group .button:active,
472
.group .button:visited:active
476
.group .button:visited:active
473
{
477
{
474
  background-color: #fff !important;
478
  background-color: #fff !important;
475
  color: #000 !important;
479
  color: #000 !important;
476
}
480
}
477
481
478
.menu bow {
482
.menu bow {
479
  width: 8em;
483
  width: 8em;
480
}
484
}
481
485
482
.menu .button {
486
.menu .button {
483
  display: block;
487
  display: block;
484
  width: 8em;
488
  width: 8em;
485
  height: 1em;
489
  height: 1em;
486
  line-height: 1;
490
  line-height: 1;
487
  background-color: #9cf;
491
  background-color: #9cf;
488
  color: #000 !important;
492
  color: #000 !important;
489
  text-overflow: ellipsis;
493
  text-overflow: ellipsis;
490
  white-space: nowrap;
494
  white-space: nowrap;
491
}
495
}
492
496
493
#connectors {
497
#connectors {
494
  position: fixed;
498
  position: fixed;
495
  left: 8.4em;
499
  left: 8.4em;
496
  top: 5.6em;
500
  top: 5.6em;
497
}
501
}
498
502
499
#connectors div {
503
#connectors div {
500
  position: absolute;
504
  position: absolute;
501
}
505
}
502
506
503
#connectors .top {
507
#connectors .top {
504
  top: 0;
508
  top: 0;
505
  height: 1em;
509
  height: 1em;
506
}
510
}
507
511
508
#connectors .mid {
512
#connectors .mid {
509
  top: 13.6em;
513
  top: 13.6em;
510
  height: 0.8em;
514
  height: 0.8em;
511
}
515
}
512
516
513
#connectors .left {
517
#connectors .left {
514
  left: 0;
518
  left: 0;
515
  width: 2em;
519
  width: 2em;
516
}
520
}
517
521
518
#connectors .right {
522
#connectors .right {
519
  left: 2.2em;
523
  left: 2.2em;
520
  width: 0em;
524
  width: 0em;
521
}
525
}
522
526
523
.multi-display
527
.multi-display
524
{
528
{
525
  position: fixed;
529
  position: fixed;
526
  top: 2.6em;
530
  top: 2.6em;
527
  left: 10.6em;
531
  left: 10.6em;
528
  right: 0;
532
  right: 0;
529
}
533
}
530
534
531
.multi-display .button
535
.multi-display .button
532
{
536
{
533
  width: 5em !important;
537
  width: 5em !important;
534
}
538
}
535
539
536
#content.fixed {
540
#content.fixed {
537
  position: fixed;
541
  position: fixed;
538
  margin-right: 0.2em;
542
  margin-right: 0.2em;
539
  top: 12em;
543
  top: 12em;
540
  right: 0;
544
  right: 0;
541
  bottom: 0.2em;
545
  bottom: 0.2em;
542
  left: 16.8em;
546
  left: 16.8em;
543
  overflow: hidden;
547
  overflow: hidden;
544
}
548
}
545
549
546
.multi-display .upper
550
.multi-display .upper
547
{
551
{
548
  position: absolute;
552
  position: absolute;
549
  top: 0;
553
  top: 0;
550
  left: 0;
554
  left: 0;
551
  right: 0;  
555
  right: 0;  
552
  height: 7.5em;  
556
  height: 7.5em;  
553
  padding-right: 0.2em;
557
  padding-right: 0.2em;
554
  background-color: black;
558
  background-color: black;
555
}
559
}
556
560
557
.multi-display .upper .content
561
.multi-display .upper .content
558
{
562
{
559
  position: absolute;
563
  position: absolute;
560
  top: 0;
564
  top: 0;
561
  left: 6em;
565
  left: 6em;
562
  bottom: 1.3em;
566
  bottom: 1.3em;
563
  right: 0.2em;
567
  right: 0.2em;
564
  background-color: black;
568
  background-color: black;
565
  color: white;
569
  color: white;
566
  text-align: right;
570
  text-align: right;
567
  overflow: hidden;
571
  overflow: hidden;
568
  text-overflow: ellipsis;
572
  text-overflow: ellipsis;
569
}
573
}
570
574
571
.multi-display .upper .content .title
575
.multi-display .upper .content .title
572
{
576
{
573
  position: absolute;
577
  position: absolute;
574
  top: 0;
578
  top: 0;
575
  left: 0;
579
  left: 0;
576
  height: 1em;
580
  height: 1em;
577
  right: 0;
581
  right: 0;
578
  background-color: black;
582
  background-color: black;
579
  color: white;
583
  color: white;
580
  font-size: 2.4em;
584
  font-size: 2.4em;
581
  text-transform: uppercase;
585
  text-transform: uppercase;
582
  text-align: right;
586
  text-align: right;
583
  overflow: hidden;
587
  overflow: hidden;
584
}
588
}
585
589
586
.multi-display .upper .content .title span
590
.multi-display .upper .content .title span
587
{
591
{
588
  white-space: nowrap;
592
  white-space: nowrap;
589
}
593
}
590
594
591
.multi-display .upper .content .analysis {
595
.multi-display .upper .content .analysis {
592
  position: absolute;
596
  position: absolute;
593
  top: 2.4em;
597
  top: 2.4em;
594
  bottom: 0;
598
  bottom: 0;
595
  right: 11em;
599
  right: 11em;
596
  left: 0;
600
  left: 0;
597
  overflow: hidden;
601
  overflow: hidden;
598
  text-align: left;
602
  text-align: left;
599
  cursor: default;
603
  cursor: default;
600
}
604
}
601
605
602
.multi-display .upper .content .analysis table {
606
.multi-display .upper .content .analysis table {
603
  border-collapse: collapse;
607
  border-collapse: collapse;
604
  line-height: 1.2;
608
  line-height: 1.2;
605
  max-width: 100%;
609
  max-width: 100%;
606
}
610
}
607
611
608
.multi-display .upper .content .analysis th {
612
.multi-display .upper .content .analysis th {
609
  padding: 0 0.4em 0 0.1em;
613
  padding: 0 0.4em 0 0.1em;
610
  font-weight: normal;
614
  font-weight: normal;
-
 
615
  background-color: #000;
-
 
616
  color: #fc0;
611
  text-align: left;
617
  text-align: left;
612
  text-transform: uppercase;
618
  text-transform: uppercase;
613
  white-space: nowrap;
619
  white-space: nowrap;
614
  vertical-align: baseline;
620
  vertical-align: baseline;
615
}
621
}
616
622
617
.multi-display .upper .content .analysis th:nth-child(3) {
623
.multi-display .upper .content .analysis th:nth-child(3) {
618
  padding-left: 0.7em;
624
  padding-left: 0.7em;
619
}
625
}
620
626
621
.multi-display .upper .content .analysis td {
627
.multi-display .upper .content .analysis td {
622
  padding: 0 0.1em 0 0.1em;
628
  padding: 0 0.1em 0 0.1em;
623
  text-overflow: ellipsis;
629
  text-overflow: ellipsis;
624
  white-space: nowrap;
630
  white-space: nowrap;
625
  vertical-align: baseline;
631
  vertical-align: baseline;
626
  text-overflow: ellipsis;
632
  text-overflow: ellipsis;
627
}
633
}
628
634
629
.multi-display .upper .content .analysis td sup {
635
.multi-display .upper .content .analysis td sup {
630
  line-height: 1;
636
  line-height: 1;
631
  font-weight: 500;
637
  font-weight: 500;
632
}
638
}
633
639
634
.multi-display .upper .content .commands
640
.multi-display .upper .content .commands
635
{
641
{
636
  position: absolute;
642
  position: absolute;
637
  margin: 0;
643
  margin: 0;
638
  padding: 0;
644
  padding: 0;
639
  top: 2.4em;
645
  top: 2.4em;
640
  right: 0;
646
  right: 0;
641
  height: 3.8em;
647
  height: 3.8em;
642
  width: 10.2em;
648
  width: 10.2em;
643
  list-style: none;
649
  list-style: none;
644
}
650
}
645
651
646
.multi-display .upper .content .commands li
652
.multi-display .upper .content .commands li
647
{
653
{
648
  position: absolute;
654
  position: absolute;
649
  margin: 0;
655
  margin: 0;
650
  width: 5em;
656
  width: 5em;
651
  height: 1.8em;
657
  height: 1.8em;
652
}
658
}
653
659
654
.multi-display .upper .content .commands .button
660
.multi-display .upper .content .commands .button
655
{
661
{
656
  position: absolute;
662
  position: absolute;
657
  top: 0;
663
  top: 0;
658
  left: 0;
664
  left: 0;
659
  margin: 0;
665
  margin: 0;
660
  height: 1.8em;
666
  height: 1.8em;
661
  border-radius: 0.9em;
667
  border-radius: 0.9em;
-
 
668
}
-
 
669
-
 
670
.multi-display .commands .button .text
-
 
671
{
662
  text-transform: none;
672
  text-transform: none !important;
663
}
673
}
664
674
665
.multi-display .upper .content .commands .button .text {
675
.multi-display .upper .content .commands .button .text {
666
  right: 1em;
676
  right: 1em;
667
}
677
}
668
678
669
.multi-display .upper .content #cmd1
679
.multi-display .upper .content #cmd1
670
{
680
{
671
  top: 0;
681
  top: 0;
672
  right: 5.2em;
682
  right: 5.2em;
673
}
683
}
674
684
675
.multi-display .upper .content #cmd2
685
.multi-display .upper .content #cmd2
676
{
686
{
677
  top: 0;
687
  top: 0;
678
  right: 0;
688
  right: 0;
679
}
689
}
680
690
681
.multi-display .upper .content #cmd3
691
.multi-display .upper .content #cmd3
682
{
692
{
683
  top: 2em;
693
  top: 2em;
684
  right: 0;
694
  right: 0;
685
}
695
}
686
696
687
.multi-display .upper .content #cmd4
697
.multi-display .upper .content #cmd4
688
{
698
{
689
  top: 2em;
699
  top: 2em;
690
  right: 5.2em;
700
  right: 5.2em;
691
}
701
}
692
702
693
.multi-display .upper .elbo-button
703
.multi-display .upper .elbo-button
694
{
704
{
695
  position: absolute;
705
  position: absolute;
696
  top: 0;
706
  top: 0;
697
  left: 0;
707
  left: 0;
698
  width: 5em;
708
  width: 5em;
699
  height: 4em;
709
  height: 4em;
700
  background-color: #c9c !important;
710
  background-color: #c9c !important;
701
  color: #000 !important;
711
  color: #000 !important;
702
  cursor: default;
712
  cursor: default;
703
}
713
}
704
714
705
.multi-display .upper .elbo-button .text
715
.multi-display .upper .elbo-button .text
706
{
716
{
707
  position: absolute;
717
  position: absolute;
708
  bottom: 0;
718
  bottom: 0;
709
  right: 0.2em;
719
  right: 0.2em;
710
  max-width: 4em;
720
  max-width: 4em;
711
  max-height: 3.6em;
721
  max-height: 3.6em;
712
  text-align: right;
722
  text-align: right;
713
  overflow: hidden;
723
  overflow: hidden;
714
}
724
}
715
725
716
.multi-display .upper .elbo
726
.multi-display .upper .elbo
717
{
727
{
718
  position: absolute;
728
  position: absolute;
719
  left: 0;
729
  left: 0;
720
  top: 4.2em;
730
  top: 4.2em;
721
  width: 6em;
731
  width: 6em;
722
  height: 3.2em;
732
  height: 3.2em;
723
  border-bottom-left-radius: 2em;
733
  border-bottom-left-radius: 2em;
724
  background-color: #9cf;
734
  background-color: #9cf;
725
  color: #000;
735
  color: #000;
726
}
736
}
727
737
728
.multi-display .upper .elbo .text
738
.multi-display .upper .elbo .text
729
{
739
{
730
  position: absolute;
740
  position: absolute;
731
  top: 0;
741
  top: 0;
732
  right: 1.2em;
742
  right: 1.2em;
733
  max-width: 4em;
743
  max-width: 4em;
734
  max-height: 2.2em;
744
  max-height: 2.2em;
735
  text-align: right;
745
  text-align: right;
736
  overflow: hidden;
746
  overflow: hidden;
737
  cursor: default;
747
  cursor: default;
738
}
748
}
739
749
740
.elbo [title],
750
.elbo [title],
741
.button [title]
751
.button [title]
742
{
752
{
743
  border-bottom: none;
753
  border-bottom: none;
744
}
754
}
745
755
746
.multi-display .upper .elbo .concave
756
.multi-display .upper .elbo .concave
747
{
757
{
748
  position: absolute;
758
  position: absolute;
749
  left: 5em;
759
  left: 5em;
750
  top: 0;
760
  top: 0;
751
  width: 1.1em;
761
  width: 1.1em;
752
  height: 2.2em;
762
  height: 2.2em;
753
  border-bottom-left-radius: 1em;
763
  border-bottom-left-radius: 1em;
754
  background-color: black;
764
  background-color: black;
755
}
765
}
756
766
757
.multi-display .border
767
.multi-display .border
758
{
768
{
759
  height: 1em;
769
  height: 1em;
760
}
770
}
761
771
762
.multi-display .upper .border
772
.multi-display .upper .border
763
{
773
{
764
  position: absolute;
774
  position: absolute;
765
  top: 6.4em;
775
  top: 6.4em;
766
  left: 6em;
776
  left: 6em;
767
  right: 0.2em;
777
  right: 0.2em;
768
}
778
}
769
779
770
.multi-display .border div
780
.multi-display .border div
771
{
781
{
772
  position: absolute;
782
  position: absolute;
773
  top: 0;
783
  top: 0;
774
  height: 1em;
784
  height: 1em;
775
}
785
}
776
786
777
.multi-display .upper .border div
787
.multi-display .upper .border div
778
{
788
{
779
  background-color: #9cf;
789
  background-color: #9cf;
780
}
790
}
781
791
782
.multi-display .upper .border .left
792
.multi-display .upper .border .left
783
{
793
{
784
  left: 0;
794
  left: 0;
785
  right: 5.2em;
795
  right: 5.2em;
786
  height: 1em;
796
  height: 1em;
787
}
797
}
788
 
798
 
789
.multi-display .upper .border .right
799
.multi-display .upper .border .right
790
{
800
{
791
  width: 5em;
801
  width: 5em;
792
  right: 0;
802
  right: 0;
793
}
803
}
794
 
804
 
795
.multi-display .lower
805
.multi-display .lower
796
{
806
{
797
  position: absolute;
807
  position: absolute;
798
  top: 7.5em;
808
  top: 7.5em;
799
  left: 0;
809
  left: 0;
800
  height: 0.1em;
810
  height: 0.1em;
801
  right: 0;
811
  right: 0;
802
  background-color: black;
812
  background-color: black;
803
}
813
}
804
814
805
.multi-display .lower .elbo
815
.multi-display .lower .elbo
806
{
816
{
807
  position: absolute;
817
  position: absolute;
808
  top: 0.1em;
818
  top: 0.1em;
809
  left: 0;
819
  left: 0;
810
  width: 6em;
820
  width: 6em;
811
  height: 3em;
821
  height: 3em;
812
  border-top-left-radius: 2em;
822
  border-top-left-radius: 2em;
813
  background-color: #fc6;
823
  background-color: #fc6;
814
}
824
}
815
825
816
.multi-display .lower .elbo .concave
826
.multi-display .lower .elbo .concave
817
{
827
{
818
  position: absolute;
828
  position: absolute;
819
  left: 5em;
829
  left: 5em;
820
  top: 1em;
830
  top: 1em;
821
  width: 1.1em;
831
  width: 1.1em;
822
  height: 2.1em;
832
  height: 2.1em;
823
  background-color: black;
833
  background-color: black;
824
  border-top-left-radius: 1em;
834
  border-top-left-radius: 1em;
825
}
835
}
826
836
827
.multi-display .lower .bg
837
.multi-display .lower .bg
828
{
838
{
829
  position: fixed;
839
  position: fixed;
830
  top: 13.4em;
840
  top: 13.4em;
831
  bottom: 0.2em;
841
  bottom: 0.2em;
832
  width: 5em;
842
  width: 5em;
833
  background-color: #fc6;
843
  background-color: #fc6;
834
}
844
}
835
845
836
.multi-display .lower .border-container
846
.multi-display .lower .border-container
837
{
847
{
838
  position: absolute;
848
  position: absolute;
839
  top: 0.1em;
849
  top: 0.1em;
840
  left: 6em;
850
  left: 6em;
841
  right: 0;
851
  right: 0;
842
  height: 1.2em;
852
  height: 1.2em;
843
  background-color: black;
853
  background-color: black;
844
}
854
}
845
855
846
.multi-display .lower .border
856
.multi-display .lower .border
847
{
857
{
848
  position: absolute;
858
  position: absolute;
849
  left: 0;
859
  left: 0;
850
  right: 0.2em;
860
  right: 0.2em;
851
}
861
}
852
862
853
.multi-display .lower .border div
863
.multi-display .lower .border div
854
{
864
{
855
  background-color: #fc6;
865
  background-color: #fc6;
856
}
866
}
857
867
858
.multi-display .lower .border .left
868
.multi-display .lower .border .left
859
{
869
{
860
  left: 0;
870
  left: 0;
861
  right: 5.2em;
871
  right: 5.2em;
862
}
872
}
863
873
864
.multi-display .lower .border .right
874
.multi-display .lower .border .right
865
{
875
{
866
  width: 5em;
876
  width: 5em;
867
  right: 0;
877
  right: 0;
868
}
878
}
869
879
870
.menu .button.secondary,
880
.menu .button.secondary,
871
.multi-display .lower .elbo.secondary,
881
.multi-display .lower .elbo.secondary,
872
.multi-display .lower .bg.secondary,
882
.multi-display .lower .bg.secondary,
873
.multi-display .lower .border.secondary
883
.multi-display .lower .border.secondary
874
{
884
{
875
  background-color: #f96;
885
  background-color: #f96;
876
}
886
}
877
887
878
.menu .button.ancillary,
888
.menu .button.ancillary,
879
.multi-display .lower .elbo.ancillary,
889
.multi-display .lower .elbo.ancillary,
880
.multi-display .lower .bg.ancillary,
890
.multi-display .lower .bg.ancillary,
881
.multi-display .lower .border.ancillary
891
.multi-display .lower .border.ancillary
882
{
892
{
883
  background-color: #c9c;
893
  background-color: #c9c;
884
}
894
}
885
895
886
.menu .button.database,
896
.menu .button.database,
887
.multi-display .lower .elbo.database,
897
.multi-display .lower .elbo.database,
888
.multi-display .lower .bg.database,
898
.multi-display .lower .bg.database,
889
.multi-display .lower .border.database
899
.multi-display .lower .border.database
890
{
900
{
891
  background-color: #c66;
901
  background-color: #c66;
892
}
902
}
893
903
894
.menu .button .text {
904
.menu .button .text {
895
  position: static;
905
  position: static;
896
  margin: 0 0.25em;
906
  margin: 0 0.25em;
897
}
907
}
898
908
899
.button.selected {
909
.button.selected {
900
  background-color: #fc6 !important;
910
  background-color: #fc6 !important;
901
  color: #000 !important;  
911
  color: #000 !important;  
902
}
912
}
903
913
904
.group {
914
.group {
905
  margin: 0 auto;
915
  margin: 0 auto;
906
  position: relative;
916
  position: relative;
907
  width: 7.7em;
917
  width: 7.7em;
908
}
918
}
909
919
910
.group .separator {
920
.group .separator {
911
  float: left;
921
  float: left;
912
  position: absolute;
922
  position: absolute;
913
  top: 0;
923
  top: 0;
914
  left: 0;
924
  left: 0;
915
  width: 1.5em;
925
  width: 1.5em;
916
  height: 100%;
926
  height: 100%;
917
  background-color: #c66;
927
  background-color: #c66;
918
  color: #000;
928
  color: #000;
919
}
929
}
920
930
921
.group .separator:after {
931
.group .separator:after {
922
  position: absolute;
932
  position: absolute;
923
  width: 0.8em;
933
  width: 0.8em;
924
  height: 0.5em;
934
  height: 0.5em;
925
  bottom: 0.25em;
935
  bottom: 0.25em;
926
  left: 0.25em;
936
  left: 0.25em;
927
  background-color: #000;
937
  background-color: #000;
928
  content: "\a0";
938
  content: "\a0";
929
}
939
}
930
940
931
.group ul {
941
.group ul {
932
  margin-left: 1.7em;
942
  margin-left: 1.7em;
933
}
943
}
934
944
935
.group li {
945
.group li {
936
  margin-bottom: 0;
946
  margin-bottom: 0;
937
}
947
}
938
948
939
.group .button:visited,
949
.group .button:visited,
940
.group .button
950
.group .button
941
{
951
{
942
  display: block;
952
  display: block;
943
  position: relative;
953
  position: relative;
944
  width: 6em;
954
  width: 6em;
945
  background-color: #99f !important;
955
  background-color: #99f !important;
946
}
956
}
947
957
948
.group li:last-child .button
958
.group li:last-child .button
949
{
959
{
950
  margin-bottom: 0;
960
  margin-bottom: 0;
951
}
961
}
952
962
953
.button.right {
963
.button.right {
954
  border-top-right-radius: 1em;
964
  border-top-right-radius: 1em;
955
  border-bottom-right-radius: 1em;
965
  border-bottom-right-radius: 1em;
956
}
966
}
957
967
958
.button.right .text {
968
.button.right .text {
959
  right: 1em;
969
  right: 1em;
960
}
970
}
961
971
962
.button.left {
972
.button.left {
963
  border-top-left-radius: 1em;
973
  border-top-left-radius: 1em;
964
  border-bottom-left-radius: 1em;
974
  border-bottom-left-radius: 1em;
965
}
975
}
966
976
967
.group .button .key {
977
.group .button .key {
968
  display: inline-block;
978
  display: inline-block;
969
  position: absolute;
979
  position: absolute;
970
  left: 0.2em;
980
  left: 0.2em;
971
  top: 0;
981
  top: 0;
972
  bottom: 0;
982
  bottom: 0;
973
  padding: 0 0.1em;
983
  padding: 0 0.1em;
974
  background-color: #000;
984
  background-color: #000;
975
  color: #f90;
985
  color: #f90;
976
  font-size: 2.4em;
986
  font-size: 2.4em;
977
  text-transform: uppercase;
987
  text-transform: uppercase;
978
  line-height: 0.9;
988
  line-height: 0.9;
979
}
989
}
980
990
981
<?php require_once 'lcars-responsive.css'; ?>
991
<?php require_once 'lcars-responsive.css'; ?>