LCARSes-matrixFAQsJSXOpenCV2-CookbookPHPXESWebE

Català-Valencià - Catalan中文 - Chinese (Simplified)中文 - Chinese (Traditional)Česky - CzechDansk - DanishNederlands - DutchEnglish - EnglishSuomi - FinnishFrançais - FrenchDeutsch - Germanעברית - Hebrewहिंदी - HindiMagyar - HungarianBahasa Indonesia - IndonesianItaliano - Italian日本語 - Japanese한국어 - KoreanМакедонски - Macedonianमराठी - MarathiNorsk - NorwegianPolski - PolishPortuguês - PortuguesePortuguês - Portuguese (Brazil)Русский - RussianSlovenčina - SlovakSlovenščina - SlovenianEspañol - SpanishSvenska - SwedishTürkçe - TurkishУкраїнська - UkrainianOëzbekcha - Uzbek

Compare Revisions

• This comparison shows the changes necessary to convert path

  → / @ 174

  → / @ 175

  ↔ Reverse comparison

• Compare Path:	Rev

  With Path:	Rev

Last modification

• Rev 175 2013-06-02 22:47:36
• Author: PointedEars

• Log message:

  * General
    - Fixed #bow-top animation
    - Moved RWD stylesheet to extra file (use PHP include as CSS include does not work)
    - Added RWD (with transitions) for small viewports (TODO: mobile devices)

Ignore whitespace Rev 174 → Rev 175

/trunk/styles/lcars22.css
106,9 → 106,6
?>
}
/* FIXME: Does not work, appended at bottom instead */
/* @import url("/styles/lcars-responsive.css"); */
body {
margin-top: 12em;
margin-left: 16.8em;
316,6 → 313,10
padding: 0;
}
.menu ul:first-child {
padding-top: 1em;
}
.menu li {
margin: 0;
}
430,6 → 431,10
color: #000 !important;
}
.menu bow {
width: 8em;
}
.menu .button {
display: block;
width: 8em;
915,114 → 920,4
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, 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) and (min-height: 364px) {
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;
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');
?>
}
}
<?php require_once 'lcars-responsive.css'; ?>

/trunk/styles/lcars-ani.css
83,6 → 83,7
Mixins::keyframes('bow-top',
'from {
left: 90%;
min-width: auto;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 1.2em;
89,7 → 90,7
border-bottom-right-radius: 1.2em;
}');
?>
.fade-in #bow-top {
<?php
Mixins::animation('-name', 'bow-top');
257,13 → 258,9
/* 0.0 to 0.875s */
<?php
Mixins::keyframes('elbo-bg', <<<CSS
from {
from, 99% {
opacity: 0;
}
99% {
opacity: 0;
}
CSS
);
?>

/trunk/styles/lcars-responsive.css
1,15 → 1,576
<?php
namespace de\pointedears\css\least;
/* Responsive Web Design */
\header('Last-Modified: ' . gmdate('D, d M Y H:i:s', @filemtime(__FILE__)) . ' GMT');
<?php use de\pointedears\css\least\Mixins; ?>
/* Resource expires in HTTP/1.1 caches 24h after last retrieval */
\header('Cache-Control: max-age=86400, s-maxage=86400, must-revalidate, proxy-revalidate');
/* Desktops with medium-size browser viewport (SVGA resolution) */
/* 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');
body {
<?php
Mixins::transition('',
'margin-top 0.25s 0.75s linear,'
. ' margin-left 0.25s 0.5s linear');
?>
}
require_once 'css/least/Mixins.php';
?>@charset "UTF-8";
.multi-display
{
<?php
Mixins::transition('',
'top 0.25s 0.75s linear,'
. ' left 0.25s 0.5s linear');
?>
}
.menu .bow
{
<?php
Mixins::transition('',
'width 0.5s 1s linear,'
. 'background-color 0s 0.75s linear'
);
?>
}
.multi-display .lower .bg
{
<?php
/* Wait 1s for bow to become shallower */
Mixins::transition('',
'top 0.25s 0.75s linear,'
. 'bottom 2.5s 0.5s ease');
?>
}
#bow-top {
<?php
Mixins::transition('',
'left 0.5s 1.0s linear,'
. ' min-width 0s 1.5s linear,'
. ' border-top-left-radius 0.5s 1.0s linear,'
. ' border-top-right-radius 0.5s 1.0s linear,'
. ' border-bottom-right-radius 0.5s 1.0s linear,'
. ' opacity 0s 1.0s linear');
?>
}
#bow-top .text {
<?php
Mixins::transition('-property', 'opacity');
Mixins::transition('-delay', '1.5s');
Mixins::transition('-timing-function', 'linear');
?>
}
#bow-top-left {
<?php
Mixins::transition('-property', 'height');
Mixins::transition('-duration', '0.125s');
Mixins::transition('-delay', '1.5s');
Mixins::transition('-timing-function', 'linear');
?>
}
.menu-container
{
<?php
Mixins::transition('',
'top 0.5s 1s linear,'
. ' width 0.5s 1s linear,'
. ' bottom 0.5s 1s linear,'
. ' z-index 0s 1s linear');
?>
}
.menu {
<?php
Mixins::transition('', 'height 0.5s 1s linear');
?>
}
.menu ul:first-child {
<?php
Mixins::transition('', 'padding-top 0.5s 1s linear');
?>
}
.menu .button
{
<?php
Mixins::transition('', 'width 0.5s 1s linear');
?>
}
#bow #bottom {
<?php
Mixins::transition('', 'visibility 0s 1.625s linear');
?>
}
#bow-bottom {
<?php
Mixins::transition('',
'border-bottom-left-radius 0.5s 0.5s ease,'
. ' border-bottom-right-radius 0.5s 0.5s ease,'
. ' width 0.5s 0.5s ease,'
. ' bottom 0.0225s 1.625s linear,'
. ' height 0.0225s 1.625s linear');
?>
}
#bow-bottom .concave {
<?php
Mixins::transition('', 'width 0.5s 0.5s ease');
?>
}
#connectors {
<?php
Mixins::transition('', 'opacity 0s 1.6475s linear');
?>
}
#connectors .right {
<?php
Mixins::transition('', 'width 0.5s 0.5s ease');
?>
}
/* Desktops with large viewport (XGA resolution and more, or no toolbars) */
@media all and (min-width: 1024px) and (min-height: 364px) {
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;
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,'
. 'top 0.5s 0.5s linear');
?>
}
.multi-display .lower .bg
{
bottom: 2.8em;
<?php
Mixins::transition('', 'bottom 0.5s 0.5s ease');
?>
}
}
/* Desktops with small viewport (VGA resolution and less, or toolbars) */
@media all and (max-width: 640px) {
/* 0.5 to 0.5225s */
#connectors {
opacity: 0;
<?php
Mixins::transition('', 'opacity 0s 0.5s linear');
?>
}
#bow-bottom {
bottom: 2.6em;
height: 0em;
opacity: 0;
<?php
Mixins::transition('',
'bottom 0.0225s 0.5s linear,'
. ' height 0.0225s 0.5s linear,'
. ' opacity 0s 0.5225s linear');
?>
}
#bow #bottom {
visibility: hidden;
<?php
Mixins::transition('',
'visibility 0s 0.5225s linear');
?>
}
.menu-container
{
top: 11em;
width: 5em;
bottom: 0;
z-index: 1;
background-color: #fc6;
<?php
Mixins::transition('',
'top 0.5s 0.5s linear,'
. ' width 0.5s 0.5s linear,'
. ' bottom 0.5s 0.5s linear,'
. ' background-color 0s 1s linear'
);
?>
}
.menu {
height: 21.8em;
<?php
Mixins::transition('', 'height 0.5s 0.5s linear');
?>
}
.menu ul:first-child {
padding-top: 0;
<?php
Mixins::transition('', 'padding-top 0.5s 0.5s linear');
?>
}
.menu .button
{
width: 5em;
<?php
Mixins::transition('', 'width 0.5s 0.5s linear');
?>
}
/* 0.5225s to 0.6475s */
#bow-top-left {
height: 0;
<?php
Mixins::transition('', 'height 0.125s 0.5225s linear');
?>
}
/* at 0.6475s */
#bow-top .text {
opacity: 0;
<?php
Mixins::transition('-property', 'opacity');
Mixins::transition('-delay', '0.6475s');
Mixins::transition('-timing-function', 'linear');
?>
}
.empty #bow-top .text {
opacity: 1;
}
/* 0.6475s to 1.1475s */
#bow-top {
left: 100%;
min-width: auto;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 1.2em;
border-bottom-right-radius: 1.2em;
opacity: 0;
<?php
Mixins::transition('',
'left 0.5s 0.6475s linear,'
. ' min-width 0s 0.6475s linear,'
. ' border-top-left-radius 0.5s 0.6475s linear,'
. ' border-top-right-radius 0.5s 0.6475s linear,'
. ' border-bottom-right-radius 0.5s 0.6475s linear,'
. ' opacity 0s 1.1475s linear');
?>
}
.empty #bow-top {
left: 0%;
min-width: 10em;
border-top-left-radius: 1.2em;
border-bottom-left-radius: 1.2em;
border-top-right-radius: 1.2em;
border-bottom-right-radius: 1.2em;
opacity: 1;
}
.multi-display
{
top: 0.2em;
left: 0.2em;
<?php
Mixins::transition('',
'top 0.25s 1.1475s linear,'
. ' left 0.25s 1.3975s linear');
?>
}
.menu .bow
{
background-color: #fc6;
<?php
Mixins::transition('',
'width 0.5s 0.5s linear,'
. 'background-color 0s 1.6475s linear'
);
?>
}
.multi-display .lower .bg
{
top: 11em;
<?php
Mixins::transition('', 'top 0.25s 1.1475s linear');
?>
}
body {
margin-top: 9.6em;
margin-left: 6.4em;
<?php
Mixins::transition('',
'margin-top 0.25s 1.1475s linear,'
. ' margin-left 0.25s 1.3975s linear');
?>
}
.multi-display .upper .content #cmd2,
.multi-display .upper .content #cmd3
{
display: none;
}
.multi-display .upper .content #cmd1,
.multi-display .upper .content #cmd4
{
right: 0;
}
.multi-display .upper .content .analysis
{
right: 5.2em;
}
.multi-display .upper .content .commands
{
width: 5.2em;
}
}
/* Mobile devices: HTC Sensation & friends */
@media screen and (max-device-width: 540px) {
/*
html,
#LCARS,
.multi-display
{
max-width: 540px;
}
*/
/* 0.5 to 0.5225s */
#connectors {
opacity: 0;
<?php
Mixins::transition('', 'opacity 0s 0.5s linear');
?>
}
#bow-bottom {
bottom: 2.6em;
height: 0em;
opacity: 0;
<?php
Mixins::transition('',
'bottom 0.0225s 0.5s linear,'
. ' height 0.0225s 0.5s linear,'
. ' opacity 0s 0.5225s linear');
?>
}
#bow #bottom {
visibility: hidden;
<?php
Mixins::transition('',
'visibility 0s 0.5225s linear');
?>
}
.menu-container
{
top: 11em;
width: 5em;
bottom: 0;
z-index: 1;
background-color: #fc6;
<?php
Mixins::transition('',
'top 0.5s 0.5s linear,'
. ' width 0.5s 0.5s linear,'
. ' bottom 0.5s 0.5s linear,'
. ' background-color 0s 1s linear'
);
?>
}
.menu {
height: 21.8em;
<?php
Mixins::transition('', 'height 0.5s 0.5s linear');
?>
}
.menu ul:first-child {
padding-top: 0;
<?php
Mixins::transition('', 'padding-top 0.5s 0.5s linear');
?>
}
.menu .button
{
width: 5em;
<?php
Mixins::transition('', 'width 0.5s 0.5s linear');
?>
}
/* 0.5225s to 0.6475s */
#bow-top-left {
height: 0;
<?php
Mixins::transition('', 'height 0.125s 0.5225s linear');
?>
}
/* at 0.6475s */
#bow-top .text {
opacity: 0;
<?php
Mixins::transition('-property', 'opacity');
Mixins::transition('-delay', '0.6475s');
Mixins::transition('-timing-function', 'linear');
?>
}
.empty #bow-top .text {
opacity: 1;
}
/* 0.6475s to 1.1475s */
#bow-top {
left: 100%;
min-width: auto;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 1.2em;
border-bottom-right-radius: 1.2em;
opacity: 0;
<?php
Mixins::transition('',
'left 0.5s 0.6475s linear,'
. ' min-width 0s 0.6475s linear,'
. ' border-top-left-radius 0.5s 0.6475s linear,'
. ' border-top-right-radius 0.5s 0.6475s linear,'
. ' border-bottom-right-radius 0.5s 0.6475s linear,'
. ' opacity 0s 1.1475s linear');
?>
}
.empty #bow-top {
left: 0%;
min-width: 10em;
border-top-left-radius: 1.2em;
border-bottom-left-radius: 1.2em;
border-top-right-radius: 1.2em;
border-bottom-right-radius: 1.2em;
opacity: 1;
}
.multi-display
{
top: 0.2em;
left: 0.2em;
<?php
Mixins::transition('',
'top 0.25s 1.1475s linear,'
. ' left 0.25s 1.3975s linear');
?>
}
.menu .bow
{
background-color: #fc6;
<?php
Mixins::transition('',
'width 0.5s 0.5s linear,'
. 'background-color 0s 1.6475s linear'
);
?>
}
.multi-display .lower .bg
{
top: 11em;
<?php
Mixins::transition('', 'top 0.25s 1.1475s linear');
?>
}
body {
margin-top: 9.6em;
margin-left: 6.4em;
<?php
Mixins::transition('',
'margin-top 0.25s 1.1475s linear,'
. ' margin-left 0.25s 1.3975s linear');
?>
}
.multi-display .upper .content #cmd2,
.multi-display .upper .content #cmd3
{
display: none;
}
.multi-display .upper .content #cmd1,
.multi-display .upper .content #cmd4
{
right: 0;
}
.multi-display .upper .content .analysis
{
right: 5.2em;
}
.multi-display .upper .content .commands
{
width: 5.2em;
}
}

/trunk/index.phtml
270,7 → 270,7
<div class="menu-container">
<nav class="menu">
<ul style="padding-top: 1em">
<ul>
<?php foreach ($languages as $key => $name): ?>
<li><a href="index.<?php echo $key; ?>?ani=0"
class="button<?php if ($language === $key) { ?> selected<?php } ?>"
277,7 → 277,7
tabindex="2"><span class="text"><?php echo $name; ?></span></a></li>
<?php endforeach; ?>
</ul>
<div class="bow" style="margin-bottom: 0.4em; width: 8em; height: 0.4em">&nbsp;</div>
<div class="bow" style="margin-bottom: 0.4em; height: 0.4em">&nbsp;</div>
<ul style="margin-bottom: 1.2em">
<li><a href="<?php echo $menu['scripts']['path']; ?>" target="_top" class="button"><span class="text"><?php echo $menu['scripts']['text']; ?></span></a></li>
<li><a href="<?php echo $menu['es-matrix']['path']; ?>" target="_top" class="button"
298,7 → 298,7
class="text"><?php echo $menu['ufpdb']['text']; ?></abbr></a></li>
</ul>
<div style="position: relative; margin-bottom: 1.2em">
<div class="bow" style="width: 8em; height: 0.8em">&nbsp;</div>
<div class="bow" style="height: 0.8em">&nbsp;</div>
</div>
<ul>
<li><a href="http://climateapps2.oerc.ox.ac.uk/cpdnboinc/show_user.php?userid=648544"