Subversion Repositories LCARS

Rev

Rev 118 | Rev 120 | Go to most recent revision | Show entire file | Regard whitespace | Details | Blame | Last modification | View Log | RSS feed

Rev 118 Rev 119
Line 1... Line 1...
1
<?php
1
<?php
-
 
2
namespace de\pointedears\css\least;
-
 
3
2
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
4
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
3
 
5
 
4
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
6
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
5
\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
7
\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
6
8
7
/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
9
/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
8
\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
10
\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
9
 
11
 
10
\header('Content-Type: text/css; charset=UTF-8');
12
\header('Content-Type: text/css; charset=UTF-8');
-
 
13
-
 
14
require_once 'css/least/Mixins.php';
11
?>@charset "UTF-8";
15
?>@charset "UTF-8";
12
16
13
<?php
17
<?php
14
  if (!isset($_GET['ani']) || $_GET['ani'] !== '0')
18
  if (!isset($_GET['ani']) || $_GET['ani'] !== '0')
15
  {
19
  {
16
?>
20
?>
17
@import url("/styles/lcars-ani.css");
21
@import url("/styles/lcars-ani.css");
18
<?php
22
<?php
19
  }
23
  }
20
?>
24
?>
-
 
25
/* FIXME: Does not work */
-
 
26
/* @import url("/styles/lcars-responsive.css"); */
21
27
22
body {
28
body {
23
  margin-top: 12em;
29
  margin-top: 12em;
24
  margin-left: 22em;
30
  margin-left: 16.8em;
25
  margin-right: 0.2em;
31
  margin-right: 0.2em;
26
  margin-bottom: 0.2em;
32
  margin-bottom: 0.2em;
27
}
33
}
28
34
29
/* HTML5 elements */
35
/* HTML5 elements */
Line 233... Line 239...
233
#bow #bottom
239
#bow #bottom
234
{
240
{
235
  position: fixed;
241
  position: fixed;
236
  left: 0;
242
  left: 0;
237
  bottom: 0;
243
  bottom: 0;
238
  width: 20.8em;
244
  width: 10.4em;
239
  height: 2.4em;
245
  height: 2.4em;
240
  background-color: #000;
246
  background-color: #000;
241
  z-index: 1701;
247
  z-index: 1701;
242
}
248
}
243
249
244
#bow-bottom {
250
#bow-bottom {
245
  position: absolute;
251
  position: absolute;
246
  bottom: 0.2em;
252
  bottom: 0.2em;
247
  left: 0.2em;
253
  left: 0.2em;
248
  width: 20.6em;
254
  width: 8em;
249
  height: 2.4em;
255
  height: 2.6em;
250
  border-bottom-left-radius: 2.4em;
256
  border-bottom-left-radius: 0em;
251
  border-bottom-right-radius: 2em;
257
  border-bottom-right-radius: 0em;
252
  background-color: #999;
258
  background-color: #999;
253
}
259
}
254
260
255
.empty #bow-bottom {
261
.empty #bow-bottom {
256
  display: none;
262
  display: none;
Line 261... Line 267...
261
  margin-left: 0.2em;
267
  margin-left: 0.2em;
262
  margin-bottom: 0.2em;
268
  margin-bottom: 0.2em;
263
  bottom: 0.3em;
269
  bottom: 0.3em;
264
  left: 7.8em;
270
  left: 7.8em;
265
  height: 2.1em;
271
  height: 2.1em;
266
  width: 7.6em;
272
  width: 2.2em;
267
  border-bottom-left-radius: 1.2em;
273
  border-bottom-left-radius: 1.2em;
268
  border-bottom-right-radius: 1em;
274
  border-bottom-right-radius: 1em;
269
  background-color: #000;
275
  background-color: #000;
270
}
276
}
271
277
Line 355... Line 361...
355
  position: fixed;
361
  position: fixed;
356
  left: 8.4em;
362
  left: 8.4em;
357
  top: 5.6em;
363
  top: 5.6em;
358
}
364
}
359
365
-
 
366
#connectors div {
-
 
367
  position: absolute;
-
 
368
}
-
 
369
-
 
370
#connectors .top {
-
 
371
  top: 0;
-
 
372
  height: 1em;
-
 
373
}
-
 
374
-
 
375
#connectors .mid {
-
 
376
  top: 13.6em;
-
 
377
  height: 0.8em;
-
 
378
}
-
 
379
-
 
380
#connectors .left {
-
 
381
  left: 0;
-
 
382
  width: 2em;
-
 
383
}
-
 
384
-
 
385
#connectors .right {
-
 
386
  left: 2.2em;
-
 
387
  width: 0em;
-
 
388
}
-
 
389
360
.multi-display
390
.multi-display
361
{
391
{
362
  position: fixed;
392
  position: fixed;
363
  top: 2.6em;
393
  top: 2.6em;
364
  left: 15.8em;
394
  left: 10.6em;
365
  right: 0;
395
  right: 0;
366
}
396
}
367
397
368
.multi-display .button
398
.multi-display .button
369
{
399
{
Line 427... Line 457...
427
}
457
}
428
458
429
.multi-display .upper .content .analysis table {
459
.multi-display .upper .content .analysis table {
430
  border-collapse: collapse;
460
  border-collapse: collapse;
431
  line-height: 1.2;
461
  line-height: 1.2;
-
 
462
  max-width: 100%;
432
}
463
}
433
 
464
 
434
.multi-display .upper .content .analysis th {
465
.multi-display .upper .content .analysis th {
435
  padding: 0 0.1em;
466
  padding: 0 0.1em;
436
  font-weight: normal;
467
  font-weight: normal;
Line 654... Line 685...
654
685
655
.multi-display .lower .bg
686
.multi-display .lower .bg
656
{
687
{
657
  position: fixed;
688
  position: fixed;
658
  top: 13.4em;
689
  top: 13.4em;
659
  bottom: 2.8em;
690
  bottom: 0.2em;
660
  width: 5em;
691
  width: 5em;
661
  background-color: #fc6;
692
  background-color: #fc6;
662
}
693
}
663
694
664
.multi-display .lower .border-container
695
.multi-display .lower .border-container
Line 803... Line 834...
803
  color: #f90;
834
  color: #f90;
804
  font-size: 2.4em;
835
  font-size: 2.4em;
805
  text-transform: uppercase;
836
  text-transform: uppercase;
806
  line-height: 0.9;
837
  line-height: 0.9;
807
}
838
}
808
839
-
 
840
/* Responsive Web Design (TODO: Move to imported stylesheet; but see above) */
-
 
841
-
 
842
body {
-
 
843
  <?php
-
 
844
    Mixins::transition('', 'margin-left 0.5s 0.5s ease');
-
 
845
  ?>
-
 
846
}
-
 
847
-
 
848
#bow #bottom
-
 
849
{
-
 
850
  <?php
-
 
851
    Mixins::transition('', 'width 0.5s 0.5s ease');
-
 
852
  ?>
-
 
853
}
-
 
854
-
 
855
#bow-bottom {
-
 
856
  <?php
-
 
857
    Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
-
 
858
    Mixins::transition('-delay', '0.5s');
-
 
859
    Mixins::transition('-duration', '0.5s');
-
 
860
    Mixins::transition('-timing-function', 'ease');
-
 
861
  ?>
-
 
862
}
-
 
863
-
 
864
#bow-bottom .concave {
-
 
865
  <?php
-
 
866
    Mixins::transition('', 'width 0.5s 0.5s ease');
-
 
867
  ?>
-
 
868
}
-
 
869
-
 
870
#connectors .right {
-
 
871
  <?php
-
 
872
    Mixins::transition('', 'width 0.5s 0.5s ease');
-
 
873
  ?>
-
 
874
}
-
 
875
-
 
876
.multi-display
-
 
877
{
-
 
878
  <?php
-
 
879
    Mixins::transition('', 'left 0.5s 0.5s ease');
-
 
880
  ?>
-
 
881
}
-
 
882
-
 
883
.multi-display .lower .bg
-
 
884
{
-
 
885
  <?php
-
 
886
    /* Wait 1s for bow to become shallower */
-
 
887
    Mixins::transition('', 'bottom 2.5s 0.5s ease');
-
 
888
  ?>
-
 
889
}
-
 
890
-
 
891
@media all and (min-width: 1024px) {
-
 
892
  body {
-
 
893
    margin-left: 22em;
-
 
894
  <?php
-
 
895
    Mixins::transition('', 'margin-left 0.5s 0.5s ease');
-
 
896
  ?>
-
 
897
  }
-
 
898
-
 
899
  #bow #bottom
-
 
900
  {
-
 
901
    width: 20.8em;
-
 
902
  <?php
-
 
903
    /* Wait 0.5s for multi-display to be reduced in height */
-
 
904
    Mixins::transition('', 'width 1.0s 0.5s ease');
-
 
905
  ?>
-
 
906
  }
-
 
907
   
-
 
908
  #bow-bottom {
-
 
909
    border-bottom-left-radius: 2.4em;
-
 
910
    border-bottom-right-radius: 2em;
-
 
911
    height: 2.4em;
-
 
912
    width: 20.6em;
-
 
913
  <?php
-
 
914
    Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
-
 
915
    Mixins::transition('-delay', '1.0s');
-
 
916
    Mixins::transition('-duration', '0.5s');
-
 
917
    Mixins::transition('-timing-function', 'ease');
-
 
918
  ?>
-
 
919
  }
-
 
920
 
-
 
921
  #bow-bottom .concave {
-
 
922
    width: 7.6em;
-
 
923
  <?php
-
 
924
    Mixins::transition('', 'width 1.0s 0.5s ease');
-
 
925
  ?>
-
 
926
  }
-
 
927
-
 
928
  #connectors .right {
-
 
929
    width: 5em;
-
 
930
    <?php
-
 
931
      /* Wait 1.0s for multi-display to be moved to right */
-
 
932
      Mixins::transition('', 'width 1.0s 0.5s ease');
-
 
933
    ?>
-
 
934
  }
-
 
935
 
-
 
936
  .multi-display
-
 
937
  {
-
 
938
    left: 15.8em;
-
 
939
  <?php
-
 
940
    Mixins::transition('', 'left 0.5s 0.5s ease');
-
 
941
  ?>
-
 
942
  }
-
 
943
 
-
 
944
  .multi-display .lower .bg
-
 
945
  {
-
 
946
    bottom: 2.8em;
-
 
947
    <?php
-
 
948
      Mixins::transition('', 'bottom 0.5s 0.5s ease');
-
 
949
    ?>
-
 
950
  }  
-
 
951
}
-
 
952