Subversion Repositories LCARS

Compare Revisions

Last modification

Ignore whitespace Rev 36 → Rev 37

/trunk/styles/lcars22.css
0,0 → 1,738
@CHARSET "UTF-8";
 
/* Basic fonts */
 
@font-face {
font-family: "LCARS";
font-style: normal;
font-weight: normal;
src: local("LCARS"), url(fonts/LCARS.ttf);
}
 
/* EOT font created with WEFT on 2002-03-23 */
@font-face {
font-family: "Downloadable Haettenschweiler";
font-style: normal;
font-weight: normal;
src: url(fonts/HAETTEN0.eot), url(fonts/HAETTENS.ttf);
}
 
/*
@font-face {
font-family:Webdings;
font-style:normal;
font-weight:normal;
src:url(fonts/WEBDING0.eot);
}
*/
 
@font-face {
font-family: "Downloadable Zurich XCn BT";
font-style: normal;
font-weight: normal;
src: url(fonts/ZurichXCn.pfr);
}
 
/* Basic display */
 
* {
font-family: "LCARS",
Haettenschweiler, "Downloadable Haettenschweiler",
"Zurich XCn BT", "Downloadable Zurich XCn BT",
impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
font-weight: normal;
}
 
body {
margin-top: 12em;
margin-left: 22em;
margin-right: 0.2em;
margin-bottom: 0.2em;
 
background-color: #000;
color: #99f;
font-size: 131%;
overflow: auto;
}
 
/* 0.0 to 1.0 s */
@-webkit-keyframes fade-in {
from {
opacity: 0;
}
 
/* at 0.25 s */
25% {
opacity: 0;
}
 
to {
opacity: 1;
}
}
 
body.fade-in {
/* TODO: Step-by-step display instead */
/*-webkit-animation-name: fade-in;*/
/* -webkit-animation-iteration-count: infinite; */
}
 
body.empty {
margin-left: 0.2em;
margin-bottom: 3em;
}
 
body.multi {
/* TODO from lcars21.css, use `em' instead */
}
 
#content {
/* position: relative; */
}
 
a {
text-decoration: none;
}
 
a:link:hover,
a:link:focus
{
background-color:#000;
color: #f90;
}
 
a:link:active {
background-color:#000;
color: #fff;
}
 
a:link {
background-color:#000;
color:#fc9;
}
 
a:visited:hover,
a:visited:focus
{
background-color:#000;
color:#f90;
}
 
a:visited:active {
background-color:black;
color:#fff;
}
 
a:hover,
a:focus,
a:active
{
text-decoration: underline;
}
 
a:visited {
background-color:black;
color:#c9c;
}
 
h2 {
background-color: #000;
color: #fff;
font-size: 136%;
}
 
p {
margin-top: 1em;
margin-bottom: 0;
line-height: 1.5;
text-align: justify;
}
 
li p {
line-height: normal;
}
 
p:first-child {
margin-top: 0;
}
 
.instruction {
background-color: #000;
color: #f90;
font-size: 136%;
}
 
/* Language support */
 
[lang^="x-vulcan-latin"] {
font-family: "URW Chancery L", "Matura MT Script Capitals",
Haettenschweiler, Haettens, "Zurich XCn BT", impact, Verdana,
Geneva, Arial, Helvetica, sans-serif;
}
 
/* Bow (main) and elbo (multi-view) */
 
#LCARS {
position: fixed;
left: 0;
top: 0;
right: 0;
padding: 0.2em;
background-color: #000;
z-index: 1701;
}
 
#bow {
position: absolute;
left: 0.2em;
top: 0.2em;
right: 0.2em;
height: 2.4em;
padding-bottom: 0.2em;
background-color: #000;
}
 
#bow-top {
/* NOTE: position: absolute is needed for animation */
position: absolute;
top: 0;
left: 0;
right: 0;
min-width: 15.4em;
height: 2em;
background-color: #999;
border-top-left-radius: 2.4em;
border-top-right-radius: 1.2em;
border-bottom-right-radius: 1.2em;
line-height: 0.9;
}
 
.empty #bow-top {
border-top-left-radius: 1.2em;
border-bottom-left-radius: 1.2em;
}
 
/* 0.0 to 1.0 s */
@-webkit-keyframes bow-top {
from {
left: 90%;
border-top-left-radius: 0;
}
}
.fade-in #bow-top {
-webkit-animation-name: bow-top;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
}
 
#bow-top .text {
position: absolute;
margin: 0;
left: 4.33em;
top: 0;
right: 0.65em;
height: 1em;
text-align: right;
color: #fc0;
font-size: 2.4em;
padding-right: 0.1em;
overflow: hidden;
text-overflow: ellipsis;
}
 
/* 0.0 to 1.0 s */
@-webkit-keyframes bow-top-text {
from {
opacity: 0;
}
/* shortly before 1.0 s */
99% {
opacity: 0;
}
}
 
.fade-in #bow-top .text {
-webkit-animation-name: bow-top-text;
-webkit-animation-duration: 1s;
-webkit-animation-timing-function: linear;
}
 
#bow-top .text span {
padding-right: 0.1em;
background-color: #000;
padding-left: 0.1em;
text-transform: uppercase;
white-space: nowrap;
}
 
.empty .separator-left {
position: absolute;
left: 2em;
height: 2em;
width: 0.25em;
background-color: #000;
}
 
.empty .separator-right {
position: absolute;
right: 2em;
height: 2em;
width: 0.25em;
background-color: #000;
}
 
#bow-top-left {
position: absolute;
top: 2em;
left: 0;
right: 0;
height: 3.2em;
width: 9.2em;
background-color: #999;
}
 
/* 0.0 to 1.25 s */
@-webkit-keyframes bow-top-left {
from {
height: 0;
}
 
/* at 1.0 s */
80% {
height: 0;
}
}
.fade-in #bow-top-left {
-webkit-animation-name: bow-top-left;
-webkit-animation-duration: 1.25s;
-webkit-animation-timing-function: linear;
}
 
.empty #bow-top-left {
display: none;
}
 
#bow-top-left .concave {
position: absolute;
top: 0;
left: 8em;
height: 3.2em;
width: 1.2em;
background-color: #000;
border-top-left-radius: 1.2em;
}
 
.empty #bow-top-left-concave {
display: none;
}
 
#bow .menu
{
position: absolute;
left: 0;
top: 5.4em;
width: 15.4em;
overflow: auto;
}
 
/* 0.0 to 2.25 s */
@-webkit-keyframes bow-menu {
from {
opacity: 0;
height: 0;
overflow: hidden;
}
 
/* at ca. 1.25 s */
55% {
opacity: 0;
}
 
56% {
opacity: 1;
height: 0;
overflow: hidden;
}
to {
height: auto;
}
}
 
.fade-in #bow .menu
{
-webkit-animation-name: bow-menu;
-webkit-animation-duration: 2.25s;
-webkit-animation-timing-function: linear;
}
 
#bow ul {
margin: 0 0.2em 0.5em 0;
padding: 0;
}
 
#bow li {
margin: 0;
}
 
#bow #bottom
{
position: fixed;
left: 0;
bottom: 0;
width: 20.8em;
height: 2.4em;
background-color: #000;
z-index: 1701;
}
 
#bow-bottom {
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;
background-color: #999;
}
 
.empty #bow-bottom {
display: none;
}
 
#bow-bottom .concave {
position: absolute;
margin-left: 0.2em;
margin-bottom: 0.2em;
bottom: 0.3em;
left: 7.8em;
height: 2.1em;
width: 7.6em;
border-bottom-left-radius: 1.2em;
border-bottom-right-radius: 1em;
background-color: #000;
}
 
.empty #bow-bottom-left-concave {
display: none;
}
 
.empty #footer-container {
position: fixed;
left: 0.2em;
bottom: 0;
right: 0.2em;
min-height: 2.4em;
padding-top: 0.2em;
padding-bottom: 0.2em;
background-color: #000;
}
 
.empty #footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2em;
margin-bottom: 0.2em;
background-color: #999;
border-radius: 1.2em;
line-height: 0.8;
}
 
.empty #footer .text {
position: absolute;
bottom: 0;
left: 0.75em;
margin: 0 !important;
background-color: #000;
color: #fc0;
padding-top: 0.1em;
padding-left: 0.1em;
padding-right: 0.1em;
text-transform: uppercase;
font-size: 2.4em;
}
 
/* Controls */
 
.button:visited:hover,
.button:visited,
.button:hover,
.button
{
position: relative;
display: inline-block;
margin-right: 0.2em;
margin-bottom: 0.2em;
width: 5em;
height: 2em;
background-color: #7d7d7d; /* c9c */
color: #000 !important;
font-family: "LCARS",
Haettenschweiler, "Downloadable Haettenschweiler",
"Zurich XCn BT", "Downloadable Zurich XCn BT",
impact, Verdana, Geneva, Arial, Helvetica, sans-serif;
text-decoration: none !important;
text-transform: uppercase;
overflow: hidden;
cursor: pointer;
}
 
.button .text {
position: absolute;
bottom: 0;
right: 0.5em;
}
 
.button.command {
border-radius: 1.2em;
}
 
.button.command .text {
position: absolute;
bottom: 0;
right: 1em;
}
 
.button:hover,
.button:focus,
.button.selected:hover,
.button.selected:focus,
.group .button:hover,
.group .button:focus,
.group .button:visited:hover,
.group .button:visited:focus
{
background-color: #f90 !important;
color: #000 !important;
}
 
.button:active,
.button.selected:active,
.group .button:active,
.group .button:visited:active
{
background-color: #fff !important;
color: #000 !important;
}
 
#bow .button {
display: block;
width: 8em;
height: 1em;
line-height: 1;
background-color: #9cf;
color: #000 !important;
}
 
.multi-display
{
position: fixed;
top: 2.8em;
left: 15.8em;
right: 0em;
}
 
.multi-display .button
{
width: 5em !important;
}
 
.multi-display .upper
{
position: absolute;
top: 0;
left: 0;
right: 0;
height: 7.2em;
padding-bottom: 0.2em;
padding-right: 0.2em;
background-color: black;
}
 
.multi-display .upper .button
{
height: 3.8em;
background-color: #c9c !important;
}
 
.multi-display .upper .elbo
{
position: absolute;
left: 0;
top: 4em;
width: 6em;
height: 3.2em;
border-bottom-left-radius: 2em;
background-color: #9cf;
}
 
.multi-display .upper .elbo .concave
{
position: absolute;
left: 5em;
top: 0;
width: 1em;
height: 2.2em;
border-bottom-left-radius: 1em;
background-color: black;
}
 
.multi-display .upper .border
{
position: fixed;
top: 9em;
left: 21.8em;
right: 0.2em;
height: 1em;
background-color: #9cf;
}
.multi-display .lower
{
position: absolute;
top: 7.3em;
left: 0;
padding-top: 0.1em;
background-color: black;
}
 
.multi-display .lower .elbo
{
position: relative;
width: 6em;
height: 3em;
border-top-left-radius: 2em;
background-color: #fc6;
}
 
.multi-display .lower .elbo.database,
.multi-display .lower .bg.database,
.multi-display .lower .border
{
background-color: #c66;
}
 
.multi-display .lower .elbo .concave
{
position: absolute;
left: 5em;
top: 1em;
width: 1em;
height: 2em;
background-color: black;
border-top-left-radius: 1em;
}
 
.multi-display .lower .bg
{
position: fixed;
top: 13.4em;
bottom: 2.8em;
width: 5em;
background-color: #fc6;
}
 
.multi-display .lower .border-container
{
position: fixed;
top: 10.2em;
left: 21.8em;
right: 0em;
height: 1.2em;
background-color: black;
}
 
.multi-display .lower .border
{
position: absolute;
top: 0;
left: 0;
right: 0.2em;
height: 1em;
background-color: #fc6;
}
 
#bow .button.database {
background-color: #c66;
}
 
#bow .button .text {
position: static;
margin: 0 0.25em;
}
 
.button.selected {
background-color: #fc6 !important;
color: #000 !important;
}
 
.group {
margin: 0 auto;
position: relative;
width: 9em;
}
 
.group .separator {
float: left;
position: absolute;
margin-left: 14px;
width: 29px;
height: 100%;
background-color: #c66;
color: #000;
}
 
.group .separator:after {
position: absolute;
width: 18px;
height: 9px;
bottom: 3px;
left: 3px;
background-color: #000;
content: "\a0";
}
 
.group ul {
margin-left: 35px;
}
 
.group li {
margin-bottom: 4px;
}
 
.group .button:visited:hover,
.group .button:visited,
.group .button
{
position: relative;
background-color: #99f !important;
}
 
.group .button.right {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
 
.group .button.left {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
 
.group .button .key {
display: inline-block;
position: absolute;
left: 0.25em;
top: 0;
bottom: 0;
padding: 0 1px;
background-color: #000;
color: #f90;
font-size: 222%;
text-transform: uppercase;
}
Property changes:
Added: svn:mime-type
## -0,0 +1 ##
+text/plain
\ No newline at end of property