Subversion Repositories LCARS

Compare Revisions

Last modification

Ignore whitespace Rev 118 → Rev 119

/trunk/styles/lcars22.css
1,4 → 1,6
<?php
namespace de\pointedears\css\least;
 
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
8,6 → 10,8
\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
\header('Content-Type: text/css; charset=UTF-8');
 
require_once 'css/least/Mixins.php';
?>@charset "UTF-8";
 
<?php
18,10 → 22,12
<?php
}
?>
/* FIXME: Does not work */
/* @import url("/styles/lcars-responsive.css"); */
 
body {
margin-top: 12em;
margin-left: 22em;
margin-left: 16.8em;
margin-right: 0.2em;
margin-bottom: 0.2em;
}
235,7 → 241,7
position: fixed;
left: 0;
bottom: 0;
width: 20.8em;
width: 10.4em;
height: 2.4em;
background-color: #000;
z-index: 1701;
245,10 → 251,10
position: absolute;
bottom: 0.2em;
left: 0.2em;
width: 20.6em;
height: 2.4em;
border-bottom-left-radius: 2.4em;
border-bottom-right-radius: 2em;
width: 8em;
height: 2.6em;
border-bottom-left-radius: 0em;
border-bottom-right-radius: 0em;
background-color: #999;
}
 
263,7 → 269,7
bottom: 0.3em;
left: 7.8em;
height: 2.1em;
width: 7.6em;
width: 2.2em;
border-bottom-left-radius: 1.2em;
border-bottom-right-radius: 1em;
background-color: #000;
357,11 → 363,35
top: 5.6em;
}
 
#connectors div {
position: absolute;
}
 
#connectors .top {
top: 0;
height: 1em;
}
 
#connectors .mid {
top: 13.6em;
height: 0.8em;
}
 
#connectors .left {
left: 0;
width: 2em;
}
 
#connectors .right {
left: 2.2em;
width: 0em;
}
 
.multi-display
{
position: fixed;
top: 2.6em;
left: 15.8em;
left: 10.6em;
right: 0;
}
 
429,6 → 459,7
.multi-display .upper .content .analysis table {
border-collapse: collapse;
line-height: 1.2;
max-width: 100%;
}
.multi-display .upper .content .analysis th {
656,7 → 687,7
{
position: fixed;
top: 13.4em;
bottom: 2.8em;
bottom: 0.2em;
width: 5em;
background-color: #fc6;
}
804,4 → 835,117
font-size: 2.4em;
text-transform: uppercase;
line-height: 0.9;
}
}
 
/* Responsive Web Design (TODO: Move to imported stylesheet; but see above) */
 
body {
<?php
Mixins::transition('', 'margin-left 0.5s 0.5s ease');
?>
}
 
#bow #bottom
{
<?php
Mixins::transition('', 'width 0.5s 0.5s ease');
?>
}
 
#bow-bottom {
<?php
Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
Mixins::transition('-delay', '0.5s');
Mixins::transition('-duration', '0.5s');
Mixins::transition('-timing-function', 'ease');
?>
}
 
#bow-bottom .concave {
<?php
Mixins::transition('', 'width 0.5s 0.5s ease');
?>
}
 
#connectors .right {
<?php
Mixins::transition('', 'width 0.5s 0.5s ease');
?>
}
 
.multi-display
{
<?php
Mixins::transition('', 'left 0.5s 0.5s ease');
?>
}
 
.multi-display .lower .bg
{
<?php
/* Wait 1s for bow to become shallower */
Mixins::transition('', 'bottom 2.5s 0.5s ease');
?>
}
 
@media all and (min-width: 1024px) {
body {
margin-left: 22em;
<?php
Mixins::transition('', 'margin-left 0.5s 0.5s ease');
?>
}
 
#bow #bottom
{
width: 20.8em;
<?php
/* Wait 0.5s for multi-display to be reduced in height */
Mixins::transition('', 'width 1.0s 0.5s ease');
?>
}
#bow-bottom {
border-bottom-left-radius: 2.4em;
border-bottom-right-radius: 2em;
height: 2.4em;
width: 20.6em;
<?php
Mixins::transition('-property', 'border-bottom-left-radius, border-bottom-right-radius, height, width');
Mixins::transition('-delay', '1.0s');
Mixins::transition('-duration', '0.5s');
Mixins::transition('-timing-function', 'ease');
?>
}
#bow-bottom .concave {
width: 7.6em;
<?php
Mixins::transition('', 'width 1.0s 0.5s ease');
?>
}
 
#connectors .right {
width: 5em;
<?php
/* Wait 1.0s for multi-display to be moved to right */
Mixins::transition('', 'width 1.0s 0.5s ease');
?>
}
.multi-display
{
left: 15.8em;
<?php
Mixins::transition('', 'left 0.5s 0.5s ease');
?>
}
.multi-display .lower .bg
{
bottom: 2.8em;
<?php
Mixins::transition('', 'bottom 0.5s 0.5s ease');
?>
}
}
/trunk/styles/lcars-ani.css
232,27 → 232,17
Mixins::keyframes('bow-bottom', <<<CSS
from {
bottom: 2.6em;
width: 20.6em;
height: 0em;
border-bottom-right-radius: 0em;
opacity: 0;
}
 
/* 0.64125 s */
83% {
83%, 97% {
bottom: 2.6em;
width: 0em;
height: 0em;
border-bottom-right-radius: 0em;
opacity: 1;
}
 
98% {
bottom: 0.2em;
width: 20.6em;
height: 2.4em;
border-bottom-right-radius: 2em;
}
CSS
);
?>
/trunk/styles/lcars-responsive.css
0,0 → 1,15
<?php
namespace de\pointedears\css\least;
 
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
 
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
 
/* Resource expires in HTTP/1.0 caches 24h after last retrieval */
\header('Expires: ' . gmdate('D, d M Y H:i:s', time() + 86400) . ' GMT');
\header('Content-Type: text/css; charset=UTF-8');
 
require_once 'css/least/Mixins.php';
?>@charset "UTF-8";
Property changes:
Added: svn:mime-type
## -0,0 +1 ##
+text/plain
\ No newline at end of property
Index: index.phtml
===================================================================
--- index.phtml (revision 118)
+++ index.phtml (revision 119)
@@ -353,11 +353,11 @@
</div>
</div>
<div id="connectors">
- <div class="bow" style="position: absolute; top: 0; left: 0; width: 2em; height: 1em">&nbsp;</div>
- <div class="bow" style="position: absolute; top: 0; left: 2.2em; width: 5em; height: 1em">&nbsp;</div>
+ <div class="bow top left">&nbsp;</div>
+ <div class="bow top right">&nbsp;</div>
- <div class="bow" style="position: absolute; top: 13.6em; left: 0; width: 2em; height: 0.8em">&nbsp;</div>
- <div class="bow" style="position: absolute; top: 13.6em; left: 2.2em; width: 5em; height: 0.8em">&nbsp;</div>
+ <div class="bow mid left">&nbsp;</div>
+ <div class="bow mid right">&nbsp;</div>
</div>
<div class="multi-display">
<div class="upper">