@charset "UTF-8"; @import url("/styles/lcars-ani.css"); /* .multi-display .upper .content .analysis tr { } .multi-display .upper .content .analysis:hover tr { } */ /* Blink rate 1 Hz should be safe for people with photosensitive epilepsy */ .multi-display .upper .content .analysis tr:nth-child(1) th, .multi-display .upper .content .analysis tr:nth-child(1) td { } .multi-display .upper .content .analysis tr:nth-child(2) th, .multi-display .upper .content .analysis tr:nth-child(2) td { } .multi-display .upper .content .analysis tr:nth-child(3) th, .multi-display .upper .content .analysis tr:nth-child(3) td { } /* FIXME: Does not work, appended at bottom instead */ /* @import url("/styles/lcars-responsive.css"); */ body { margin-top: 12em; margin-left: 16.8em; margin-right: 0.2em; margin-bottom: 0.2em; } /* HTML5 elements */ nav { display: block; } /* 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; min-width: 10em; } #bow-top .text { position: absolute; margin: 0; left: 4.33em; top: 0; right: 0.75em; height: 1em; text-align: right; color: #fc0; font-size: 2.4em; padding-right: 0.1em; overflow: hidden; text-overflow: ellipsis; } .empty #bow-top .text { left: 0.93em; } #bow-top .text span { padding-right: 0.1em; background-color: #000; padding-left: 0.1em; text-transform: uppercase; white-space: nowrap; } .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; min-width: 10em; margin-bottom: 0.2em; background-color: #999; border-radius: 1.2em; line-height: 0.9; } .empty #footer .text { position: absolute; margin: 0; left: 0.93em; top: 0; right: 0.75em; height: 1em; background-color: transparent; color: #fc0; font-size: 2.4em; padding-right: 0.1em; overflow: hidden; text-overflow: ellipsis; } .empty #footer .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 { background-color: #999; } #bow-top-left { position: absolute; top: 2em; left: 0; right: 0; height: 4.4em; width: 9.2em; background-color: #999; overflow: hidden; } .empty #bow-top-left { display: none; } #bow-top-left .concave { position: absolute; top: 0; left: 8em; height: 4.4em; width: 1.2em; background-color: #000; border-top-left-radius: 1.2em; } .empty #bow-top-left-concave { display: none; } .menu-container { position: fixed; left: 0.2em; top: 6.8em; width: 8em; bottom: 2.8em; background-color: #999; overflow: auto; overflow-x: hidden; overflow-y: auto; } .menu { height: 20em; background-color: #000; } .menu ul { margin: 0 0.2em 0 0; padding: 0; } .menu li { margin: 0; } #bow #bottom { position: fixed; left: 0; bottom: 0; width: 10.4em; height: 2.4em; background-color: #000; z-index: 1701; } #bow-bottom { position: absolute; bottom: 0.2em; left: 0.2em; width: 8em; height: 2.6em; border-bottom-left-radius: 0em; border-bottom-right-radius: 0em; 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: 2.2em; border-bottom-left-radius: 1.2em; border-bottom-right-radius: 1em; background-color: #000; } #bow-bottom .spacer { position: absolute; left: 10.2em; bottom: 0; width: 0.2em; height: 0.5em; background-color: black; } .empty #bow-bottom-left-concave { display: none; } /* Controls */ .button:visited, .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; text-decoration: none !important; text-transform: uppercase; overflow: hidden; cursor: pointer !important; } .button .text { position: absolute; bottom: 0; right: 0.5em; cursor: pointer !important; } .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; } .menu .button { display: block; width: 8em; height: 1em; line-height: 1; background-color: #9cf; color: #000 !important; text-overflow: ellipsis; white-space: nowrap; } #connectors { position: fixed; left: 8.4em; 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: 10.6em; right: 0; } .multi-display .button { width: 5em !important; } .multi-display .upper { position: absolute; top: 0; left: 0; right: 0; height: 7.5em; padding-right: 0.2em; background-color: black; } .multi-display .upper .content { position: absolute; top: 0; left: 6em; bottom: 1.3em; right: 0.2em; background-color: black; color: white; text-align: right; overflow: hidden; text-overflow: ellipsis; } .multi-display .upper .content .title { position: absolute; top: 0; left: 0; height: 1em; right: 0; background-color: black; color: white; font-size: 2.4em; text-transform: uppercase; text-align: right; overflow: hidden; } .multi-display .upper .content .title span { white-space: nowrap; } .multi-display .upper .content .analysis { position: absolute; top: 2.4em; bottom: 0; right: 11em; left: 0; overflow: hidden; text-align: left; cursor: default; } .multi-display .upper .content .analysis table { border-collapse: collapse; line-height: 1.2; max-width: 100%; } .multi-display .upper .content .analysis th { padding: 0 0.4em 0 0.1em; font-weight: normal; text-align: left; text-transform: uppercase; white-space: nowrap; vertical-align: baseline; } .multi-display .upper .content .analysis td { padding: 0 0.1em 0 0.1em; text-overflow: ellipsis; white-space: nowrap; vertical-align: baseline; text-overflow: ellipsis; } .multi-display .upper .content .analysis tr:hover th, .multi-display .upper .content .analysis tr:hover td { color: #f90; } .multi-display .upper .content .analysis td sup { line-height: 1; font-weight: 500; } .multi-display .upper .content .commands { position: absolute; margin: 0; padding: 0; top: 2.4em; right: 0; height: 3.8em; width: 10.2em; list-style: none; } .multi-display .upper .content .commands li { position: absolute; margin: 0; width: 5em; height: 1.8em; } .multi-display .upper .content .commands .button { position: absolute; top: 0; left: 0; margin: 0; height: 1.8em; border-radius: 0.9em; text-transform: none; } .multi-display .upper .content .commands .button .text { right: 1em; } .multi-display .upper .content #cmd1 { top: 0; right: 5.2em; } .multi-display .upper .content #cmd2 { top: 0; right: 0; } .multi-display .upper .content #cmd3 { top: 2em; right: 0; } .multi-display .upper .content #cmd4 { top: 2em; right: 5.2em; } .multi-display .upper .elbo-button { position: absolute; top: 0; left: 0; width: 5em; height: 4em; background-color: #c9c !important; color: #000 !important; cursor: default; } .multi-display .upper .elbo-button .text { position: absolute; bottom: 0; right: 0.2em; max-width: 4em; max-height: 3.6em; text-align: right; overflow: hidden; } .multi-display .upper .elbo { position: absolute; left: 0; top: 4.2em; width: 6em; height: 3.2em; border-bottom-left-radius: 2em; background-color: #9cf; color: #000; } .multi-display .upper .elbo .text { position: absolute; top: 0; right: 1.2em; max-width: 4em; max-height: 2.2em; text-align: right; overflow: hidden; cursor: default; } .elbo [title], .button [title] { border-bottom: none; } .multi-display .upper .elbo .concave { position: absolute; left: 5em; top: 0; width: 1.1em; height: 2.2em; border-bottom-left-radius: 1em; background-color: black; } .multi-display .border { height: 1em; } .multi-display .upper .border { position: absolute; top: 6.4em; left: 6em; right: 0.2em; } .multi-display .border div { position: absolute; top: 0; height: 1em; } .multi-display .upper .border div { background-color: #9cf; } .multi-display .upper .border .left { left: 0; right: 5.2em; height: 1em; } .multi-display .upper .border .right { width: 5em; right: 0; } .multi-display .lower { position: absolute; top: 7.5em; left: 0; height: 0.1em; right: 0; background-color: black; } .multi-display .lower .elbo { position: absolute; top: 0.1em; left: 0; width: 6em; height: 3em; border-top-left-radius: 2em; background-color: #fc6; } .multi-display .lower .elbo .concave { position: absolute; left: 5em; top: 1em; width: 1.1em; height: 2.1em; background-color: black; border-top-left-radius: 1em; } .multi-display .lower .bg { position: fixed; top: 13.4em; bottom: 0.2em; width: 5em; background-color: #fc6; } .multi-display .lower .border-container { position: absolute; top: 0.1em; left: 6em; right: 0; height: 1.2em; background-color: black; } .multi-display .lower .border { position: absolute; left: 0; right: 0.2em; } .multi-display .lower .border div { background-color: #fc6; } .multi-display .lower .border .left { left: 0; right: 5.2em; } .multi-display .lower .border .right { width: 5em; right: 0; } .menu .button.secondary, .multi-display .lower .elbo.secondary, .multi-display .lower .bg.secondary, .multi-display .lower .border.secondary { background-color: #f96; } .menu .button.ancillary, .multi-display .lower .elbo.ancillary, .multi-display .lower .bg.ancillary, .multi-display .lower .border.ancillary { background-color: #c9c; } .menu .button.database, .multi-display .lower .elbo.database, .multi-display .lower .bg.database, .multi-display .lower .border.database { background-color: #c66; } .menu .button .text { position: static; margin: 0 0.25em; } .button.selected { background-color: #fc6 !important; color: #000 !important; } .group { margin: 0 auto; position: relative; width: 7.7em; } .group .separator { float: left; position: absolute; top: 0; left: 0; width: 1.5em; height: 100%; background-color: #c66; color: #000; } .group .separator:after { position: absolute; width: 0.8em; height: 0.5em; bottom: 0.25em; left: 0.25em; background-color: #000; content: "\a0"; } .group ul { margin-left: 1.7em; } .group li { margin-bottom: 0; } .group .button:visited, .group .button { display: block; position: relative; width: 6em; background-color: #99f !important; } .group li:last-child .button { margin-bottom: 0; } .button.right { border-top-right-radius: 1em; border-bottom-right-radius: 1em; } .button.right .text { right: 1em; } .button.left { border-top-left-radius: 1em; border-bottom-left-radius: 1em; } .group .button .key { display: inline-block; position: absolute; left: 0.2em; top: 0; bottom: 0; padding: 0 0.1em; background-color: #000; color: #f90; font-size: 2.4em; text-transform: uppercase; line-height: 0.9; } /* Responsive Web Design (TODO: Move to imported stylesheet; but see above) */ body { } #bow #bottom { } #bow-bottom { } #bow-bottom .concave { } #connectors .right { } .multi-display { } .multi-display .lower .bg { } @media all and (min-width: 1024px) { body { margin-left: 22em; } #bow #bottom { width: 20.8em; } #bow-bottom { border-bottom-left-radius: 2.4em; border-bottom-right-radius: 2em; height: 2.4em; width: 20.6em; } #bow-bottom .concave { width: 7.6em; } #connectors .right { width: 5em; } .multi-display { left: 15.8em; } .multi-display .lower .bg { bottom: 2.8em; } }