diff --git a/LICENSE b/LICENSE index f9058b0..980d31a 100644 --- a/LICENSE +++ b/LICENSE @@ -1,6 +1,7 @@ The MIT License (MIT) -Copyright (c) 2014 Garrett- +Copyright (c) 2014 Garrett- original edition and some remaining portions. +Copyright (c) 2020 Jörn Weißenborn (joernweissenborn) all other portions. Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal @@ -18,4 +19,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. \ No newline at end of file +SOFTWARE. diff --git a/README.md b/README.md index a755994..3abe6dc 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,31 @@ -LCARS -===== +LCARS (Library Computer Access Retrieval System) +================================================ + +LCARS is a CSS framework like [Bootstrap](http://getbootstrap.com/), [Foundation](http://foundation.zurb.com/), [Topcoat](http://topcoat.io/), [Brick](http://mozilla.github.io/brick/index.html), or [Pure](http://purecss.io/). + +It's purpose is to create websitse inspired by the user interface of a popular sci-fi franchise. + +Lcars is written in [Stylus](http://learnboost.github.io/stylus/). + +## Demo And Documentation + +[See](http://joernweissenborn.github.io/lcars/) + +## Problems Or Feature Requests + +Please file an issue, I am happy to help! + +## Contributing + +Pull requests are very welcome, but please relate it to an issue. + +## Note for users of the original version + +The library has been completly rewritten, dropping things like dividers and menu. If you want to use the old version, checkout the [legacy release](https://github.com/joernweissenborn/lcars/releases/tag/0.1). + +## Thanks + +Thanks to @garrett- for initial development! +Thanks to @jrwarwick for audio and SVG support! +Thanks to @xenziffen for various fixes and CSS enhancements! -Site Repo for the [LCARS Project](https://github.com/Garrett-/lcars) \ No newline at end of file diff --git a/audio/alert.m4a b/audio/alert.m4a new file mode 100644 index 0000000..9a27ddf Binary files /dev/null and b/audio/alert.m4a differ diff --git a/audio/alert.ogg b/audio/alert.ogg new file mode 100644 index 0000000..87dc3a4 Binary files /dev/null and b/audio/alert.ogg differ diff --git a/audio/alert.webm b/audio/alert.webm new file mode 100644 index 0000000..f78f882 Binary files /dev/null and b/audio/alert.webm differ diff --git a/audio/input_ack.wav b/audio/input_ack.wav new file mode 100644 index 0000000..b6c65d8 Binary files /dev/null and b/audio/input_ack.wav differ diff --git a/audio/input_nak.wav b/audio/input_nak.wav new file mode 100644 index 0000000..2c5a99b Binary files /dev/null and b/audio/input_nak.wav differ diff --git a/audio/output_bel.wav b/audio/output_bel.wav new file mode 100644 index 0000000..c0ad3f8 Binary files /dev/null and b/audio/output_bel.wav differ diff --git a/audio/output_soh.wav b/audio/output_soh.wav new file mode 100644 index 0000000..c30582a Binary files /dev/null and b/audio/output_soh.wav differ diff --git a/audio/ready.m4a b/audio/ready.m4a new file mode 100644 index 0000000..ecb3d42 Binary files /dev/null and b/audio/ready.m4a differ diff --git a/audio/ready.ogg b/audio/ready.ogg new file mode 100644 index 0000000..4f9c5b1 Binary files /dev/null and b/audio/ready.ogg differ diff --git a/audio/ready.webm b/audio/ready.webm new file mode 100644 index 0000000..d08b431 Binary files /dev/null and b/audio/ready.webm differ diff --git a/audio/red_alert.m4a b/audio/red_alert.m4a new file mode 100644 index 0000000..e8d41d3 Binary files /dev/null and b/audio/red_alert.m4a differ diff --git a/audio/red_alert.ogg b/audio/red_alert.ogg new file mode 100644 index 0000000..09ca18b Binary files /dev/null and b/audio/red_alert.ogg differ diff --git a/audio/red_alert.webm b/audio/red_alert.webm new file mode 100644 index 0000000..f43c238 Binary files /dev/null and b/audio/red_alert.webm differ diff --git a/audio/src/commopen.wav b/audio/src/commopen.wav new file mode 100644 index 0000000..72b4684 Binary files /dev/null and b/audio/src/commopen.wav differ diff --git a/audio/src/tng_phaser5_clean.mp3 b/audio/src/tng_phaser5_clean.mp3 new file mode 100644 index 0000000..5b0267a Binary files /dev/null and b/audio/src/tng_phaser5_clean.mp3 differ diff --git a/audio/src/tng_red_alert3.mp3 b/audio/src/tng_red_alert3.mp3 new file mode 100644 index 0000000..94974ef Binary files /dev/null and b/audio/src/tng_red_alert3.mp3 differ diff --git a/audio/src/tng_replicator.mp3 b/audio/src/tng_replicator.mp3 new file mode 100644 index 0000000..f4d02c9 Binary files /dev/null and b/audio/src/tng_replicator.mp3 differ diff --git a/audio/src/tng_torpedo_clean.mp3 b/audio/src/tng_torpedo_clean.mp3 new file mode 100644 index 0000000..0a78cd8 Binary files /dev/null and b/audio/src/tng_torpedo_clean.mp3 differ diff --git a/audio/src/tng_transporter2_clean_top.mp3 b/audio/src/tng_transporter2_clean_top.mp3 new file mode 100644 index 0000000..860c216 Binary files /dev/null and b/audio/src/tng_transporter2_clean_top.mp3 differ diff --git a/audio/src/tng_warp5_clean.mp3 b/audio/src/tng_warp5_clean.mp3 new file mode 100644 index 0000000..881ee4a Binary files /dev/null and b/audio/src/tng_warp5_clean.mp3 differ diff --git a/audio/tactinput_acknowledge.m4a b/audio/tactinput_acknowledge.m4a new file mode 100644 index 0000000..e222860 Binary files /dev/null and b/audio/tactinput_acknowledge.m4a differ diff --git a/audio/tactinput_acknowledge.ogg b/audio/tactinput_acknowledge.ogg new file mode 100644 index 0000000..20c06d1 Binary files /dev/null and b/audio/tactinput_acknowledge.ogg differ diff --git a/audio/tactinput_acknowledge.webm b/audio/tactinput_acknowledge.webm new file mode 100644 index 0000000..2c0473f Binary files /dev/null and b/audio/tactinput_acknowledge.webm differ diff --git a/audio/tactinput_alt_acknowledge.m4a b/audio/tactinput_alt_acknowledge.m4a new file mode 100644 index 0000000..d02e5df Binary files /dev/null and b/audio/tactinput_alt_acknowledge.m4a differ diff --git a/audio/tactinput_alt_acknowledge.ogg b/audio/tactinput_alt_acknowledge.ogg new file mode 100644 index 0000000..3fd1950 Binary files /dev/null and b/audio/tactinput_alt_acknowledge.ogg differ diff --git a/audio/tactinput_alt_acknowledge.webm b/audio/tactinput_alt_acknowledge.webm new file mode 100644 index 0000000..66232df Binary files /dev/null and b/audio/tactinput_alt_acknowledge.webm differ diff --git a/audio/tactinput_neg_acknowledge.m4a b/audio/tactinput_neg_acknowledge.m4a new file mode 100644 index 0000000..902bec2 Binary files /dev/null and b/audio/tactinput_neg_acknowledge.m4a differ diff --git a/audio/tactinput_neg_acknowledge.ogg b/audio/tactinput_neg_acknowledge.ogg new file mode 100644 index 0000000..292359d Binary files /dev/null and b/audio/tactinput_neg_acknowledge.ogg differ diff --git a/audio/tactinput_neg_acknowledge.webm b/audio/tactinput_neg_acknowledge.webm new file mode 100644 index 0000000..93a59e1 Binary files /dev/null and b/audio/tactinput_neg_acknowledge.webm differ diff --git a/audio/transcode.sh b/audio/transcode.sh new file mode 100755 index 0000000..8869ba9 --- /dev/null +++ b/audio/transcode.sh @@ -0,0 +1,21 @@ +#!/bin/sh +if [ $# -eq 0 ] ; then + echo ' USAGE: $0 sourceaudiofile.wav' + echo ' bonus tip: for audf in *.wav *.mp3 ; do ./transcode.sh $audf ; done' + exit 0 +fi + +FNAMEBASE=$(echo $1 | cut -f 1 -d '.') + +if (which avconv) ; then + avconv -i $1 -c:a libvorbis $FNAMEBASE.webm + avconv -i $1 -loglevel verbose -strict experimental -c:a aac -ab 64k $FNAMEBASE.m4a + avconv -i $1 -c:a libvorbis $FNAMEBASE.ogg +elif (which ffmpeg) ; then + ffmpeg -i $1 -c:a libvorbis $FNAMEBASE.webm + ffmpeg -i $1 -c:a aac $FNAMEBASE.m4a + ffmpeg -i $1 -c:a libvorbis $FNAMEBASE.ogg +else + echo "could not find supported transcoding program like ffmpeg, sorry." + exit 1 +fi diff --git a/css/lcars.css b/css/lcars.css index 991b6e9..3a31660 100644 --- a/css/lcars.css +++ b/css/lcars.css @@ -1,299 +1,342 @@ -.lcars-gray-bg { - background-color: rgba(34,51,85,0.467) !important; +.lcars-gray-bg.lcars-gray-bg { + background-color: #234; + fill: #234; } -.lcars-white-bg { - background-color: #fff !important; +.lcars-white-bg.lcars-white-bg { + background-color: #fff; + fill: #fff; } -.lcars-black-bg { - background-color: #000 !important; +.lcars-black-bg.lcars-black-bg { + background-color: #000; + fill: #000; +} +.lcars-pale-canary-bg.lcars-pale-canary-bg { + background-color: #ff9; + fill: #ff9; +} +.lcars-golden-tanoi-bg.lcars-golden-tanoi-bg { + background-color: #fc6; + fill: #fc6; } -.lcars-pale-canary-bg { - background-color: #ff9 !important; +.lcars-neon-carrot-bg.lcars-neon-carrot-bg { + background-color: #f93; + fill: #f93; } -.lcars-golden-tanoi-bg { - background-color: #fc6 !important; +.lcars-eggplant-bg.lcars-eggplant-bg { + background-color: #646; + fill: #646; } -.lcars-neon-carrot-bg { - background-color: #f93 !important; +.lcars-lilac-bg.lcars-lilac-bg { + background-color: #c9c; + fill: #c9c; } -.lcars-eggplant-bg { - background-color: #646 !important; +.lcars-anakiwa-bg.lcars-anakiwa-bg { + background-color: #9cf; + fill: #9cf; } -.lcars-lilac-bg { - background-color: #c9c !important; +.lcars-mariner-bg.lcars-mariner-bg { + background-color: #36c; + fill: #36c; } -.lcars-anakiwa-bg { - background-color: #9cf !important; +.lcars-bahama-blue-bg.lcars-bahama-blue-bg { + background-color: #069; + fill: #069; } -.lcars-mariner-bg { - background-color: #36c !important; +.lcars-red-alert-bg.lcars-red-alert-bg { + background-color: #e10; + fill: #e10; } -.lcars-bahama-blue-bg { - background-color: #069 !important; +.lcars-blue-bell-bg.lcars-blue-bell-bg { + background-color: #99c; + fill: #99c; } -.lcars-blue-bell-bg { - background-color: #99c !important; +.lcars-melrose-bg.lcars-melrose-bg { + background-color: #99f; + fill: #99f; } -.lcars-melrose-bg { - background-color: #99f !important; +.lcars-hopbush-bg.lcars-hopbush-bg { + background-color: #c69; + fill: #c69; +} +.lcars-chestnut-rose-bg.lcars-chestnut-rose-bg { + background-color: #c66; + fill: #c66; } -.lcars-hopbush-bg { - background-color: #c69 !important; +.lcars-orange-peel-bg.lcars-orange-peel-bg { + background-color: #f96; + fill: #f96; } -.lcars-chestnut-rose-bg { - background-color: #c66 !important; +.lcars-atomic-tangerine-bg.lcars-atomic-tangerine-bg { + background-color: #f90; + fill: #f90; } -.lcars-orange-peel-bg { - background-color: #f96 !important; +.lcars-danub-bg.lcars-danub-bg { + background-color: #68c; + fill: #68c; } -.lcars-atomic-tangerine-bg { - background-color: #f90 !important; +.lcars-indigo-bg.lcars-indigo-bg { + background-color: #45b; + fill: #45b; } -.lcars-danub-bg { - background-color: #68c !important; +.lcars-lavender-purple-bg.lcars-lavender-purple-bg { + background-color: #97a; + fill: #97a; } -.lcars-indigo-bg { - background-color: #45b !important; +.lcars-cosmic-bg.lcars-cosmic-bg { + background-color: #746; + fill: #746; } -.lcars-lavender-purple-bg { - background-color: #97a !important; +.lcars-red-damask-bg.lcars-red-damask-bg { + background-color: #d64; + fill: #d64; } -.lcars-cosmic-bg { - background-color: #746 !important; +.lcars-medium-carmine-bg.lcars-medium-carmine-bg { + background-color: #a53; + fill: #a53; } -.lcars-red-damask-bg { - background-color: #d64 !important; +.lcars-bourbon-bg.lcars-bourbon-bg { + background-color: #b62; + fill: #b62; } -.lcars-medium-carmine-bg { - background-color: #a53 !important; +.lcars-sandy-brown-bg.lcars-sandy-brown-bg { + background-color: #e95; + fill: #e95; } -.lcars-bourbon-bg { - background-color: #b62 !important; +.lcars-periwinkle-bg.lcars-periwinkle-bg { + background-color: #cdf; + fill: #cdf; } -.lcars-sandy-brown-bg { - background-color: #e95 !important; +.lcars-dodger-blue-bg.lcars-dodger-blue-bg { + background-color: #59f; + fill: #59f; } -.lcars-periwinkle-bg { - background-color: #cdf !important; +.lcars-dodger-blue-alt-bg.lcars-dodger-blue-alt-bg { + background-color: #36f; + fill: #36f; } -.lcars-dodger-blue-bg { - background-color: #59f !important; +.lcars-blue-bg.lcars-blue-bg { + background-color: #01e; + fill: #01e; } -.lcars-dodger-blue-alt-bg { - background-color: #36f !important; +.lcars-navy-blue-bg.lcars-navy-blue-bg { + background-color: #008; + fill: #008; } -.lcars-blue-bg { - background-color: #01e !important; +.lcars-husk-bg.lcars-husk-bg { + background-color: #ba5; + fill: #ba5; } -.lcars-navy-blue-bg { - background-color: #008 !important; +.lcars-rust-bg.lcars-rust-bg { + background-color: #b41; + fill: #b41; } -.lcars-husk-bg { - background-color: #ba5 !important; +.lcars-tamarillo-bg.lcars-tamarillo-bg { + background-color: #821; + fill: #821; } -.lcars-rust-bg { - background-color: #b41 !important; +.lcars-gray-border.lcars-gray-border { + border-color: #234; } -.lcars-tamarillo-bg { - background-color: #821 !important; +.lcars-white-border.lcars-white-border { + border-color: #fff; } -.lcars-gray-border { - border-color: rgba(34,51,85,0.467) !important; +.lcars-black-border.lcars-black-border { + border-color: #000; } -.lcars-white-border { - border-color: #fff !important; +.lcars-pale-canary-border.lcars-pale-canary-border { + border-color: #ff9; } -.lcars-black-border { - border-color: #000 !important; +.lcars-golden-tanoi-border.lcars-golden-tanoi-border { + border-color: #fc6; } -.lcars-pale-canary-border { - border-color: #ff9 !important; +.lcars-neon-carrot-border.lcars-neon-carrot-border { + border-color: #f93; } -.lcars-golden-tanoi-border { - border-color: #fc6 !important; +.lcars-eggplant-border.lcars-eggplant-border { + border-color: #646; } -.lcars-neon-carrot-border { - border-color: #f93 !important; +.lcars-lilac-border.lcars-lilac-border { + border-color: #c9c; } -.lcars-eggplant-border { - border-color: #646 !important; +.lcars-anakiwa-border.lcars-anakiwa-border { + border-color: #9cf; } -.lcars-lilac-border { - border-color: #c9c !important; +.lcars-mariner-border.lcars-mariner-border { + border-color: #36c; } -.lcars-anakiwa-border { - border-color: #9cf !important; +.lcars-bahama-blue-border.lcars-bahama-blue-border { + border-color: #069; } -.lcars-mariner-border { - border-color: #36c !important; +.lcars-red-alert-border.lcars-red-alert-border { + border-color: #e10; } -.lcars-bahama-blue-border { - border-color: #069 !important; +.lcars-blue-bell-border.lcars-blue-bell-border { + border-color: #99c; } -.lcars-blue-bell-border { - border-color: #99c !important; +.lcars-melrose-border.lcars-melrose-border { + border-color: #99f; } -.lcars-melrose-border { - border-color: #99f !important; +.lcars-hopbush-border.lcars-hopbush-border { + border-color: #c69; } -.lcars-hopbush-border { - border-color: #c69 !important; +.lcars-chestnut-rose-border.lcars-chestnut-rose-border { + border-color: #c66; } -.lcars-chestnut-rose-border { - border-color: #c66 !important; +.lcars-orange-peel-border.lcars-orange-peel-border { + border-color: #f96; } -.lcars-orange-peel-border { - border-color: #f96 !important; +.lcars-atomic-tangerine-border.lcars-atomic-tangerine-border { + border-color: #f90; } -.lcars-atomic-tangerine-border { - border-color: #f90 !important; +.lcars-danub-border.lcars-danub-border { + border-color: #68c; } -.lcars-danub-border { - border-color: #68c !important; +.lcars-indigo-border.lcars-indigo-border { + border-color: #45b; } -.lcars-indigo-border { - border-color: #45b !important; +.lcars-lavender-purple-border.lcars-lavender-purple-border { + border-color: #97a; } -.lcars-lavender-purple-border { - border-color: #97a !important; +.lcars-cosmic-border.lcars-cosmic-border { + border-color: #746; } -.lcars-cosmic-border { - border-color: #746 !important; +.lcars-red-damask-border.lcars-red-damask-border { + border-color: #d64; } -.lcars-red-damask-border { - border-color: #d64 !important; +.lcars-medium-carmine-border.lcars-medium-carmine-border { + border-color: #a53; } -.lcars-medium-carmine-border { - border-color: #a53 !important; +.lcars-bourbon-border.lcars-bourbon-border { + border-color: #b62; } -.lcars-bourbon-border { - border-color: #b62 !important; +.lcars-sandy-brown-border.lcars-sandy-brown-border { + border-color: #e95; } -.lcars-sandy-brown-border { - border-color: #e95 !important; +.lcars-periwinkle-border.lcars-periwinkle-border { + border-color: #cdf; } -.lcars-periwinkle-border { - border-color: #cdf !important; +.lcars-dodger-blue-border.lcars-dodger-blue-border { + border-color: #59f; } -.lcars-dodger-blue-border { - border-color: #59f !important; +.lcars-dodger-blue-alt-border.lcars-dodger-blue-alt-border { + border-color: #36f; } -.lcars-dodger-blue-alt-border { - border-color: #36f !important; +.lcars-blue-border.lcars-blue-border { + border-color: #01e; } -.lcars-blue-border { - border-color: #01e !important; +.lcars-navy-blue-border.lcars-navy-blue-border { + border-color: #008; } -.lcars-navy-blue-border { - border-color: #008 !important; +.lcars-husk-border.lcars-husk-border { + border-color: #ba5; } -.lcars-husk-border { - border-color: #ba5 !important; +.lcars-rust-border.lcars-rust-border { + border-color: #b41; } -.lcars-rust-border { - border-color: #b41 !important; +.lcars-tamarillo-border.lcars-tamarillo-border { + border-color: #821; } -.lcars-tamarillo-border { - border-color: #821 !important; +.lcars-gray-color.lcars-gray-color { + color: #234; } -.lcars-gray-color { - color: rgba(34,51,85,0.467) !important; +.lcars-white-color.lcars-white-color { + color: #fff; } -.lcars-white-color { - color: #fff !important; +.lcars-black-color.lcars-black-color { + color: #000; } -.lcars-black-color { - color: #000 !important; +.lcars-pale-canary-color.lcars-pale-canary-color { + color: #ff9; } -.lcars-pale-canary-color { - color: #ff9 !important; +.lcars-golden-tanoi-color.lcars-golden-tanoi-color { + color: #fc6; } -.lcars-golden-tanoi-color { - color: #fc6 !important; +.lcars-neon-carrot-color.lcars-neon-carrot-color { + color: #f93; } -.lcars-neon-carrot-color { - color: #f93 !important; +.lcars-eggplant-color.lcars-eggplant-color { + color: #646; } -.lcars-eggplant-color { - color: #646 !important; +.lcars-lilac-color.lcars-lilac-color { + color: #c9c; } -.lcars-lilac-color { - color: #c9c !important; +.lcars-anakiwa-color.lcars-anakiwa-color { + color: #9cf; } -.lcars-anakiwa-color { - color: #9cf !important; +.lcars-mariner-color.lcars-mariner-color { + color: #36c; } -.lcars-mariner-color { - color: #36c !important; +.lcars-bahama-blue-color.lcars-bahama-blue-color { + color: #069; } -.lcars-bahama-blue-color { - color: #069 !important; +.lcars-red-alert-color.lcars-red-alert-color { + color: #e10; } -.lcars-blue-bell-color { - color: #99c !important; +.lcars-blue-bell-color.lcars-blue-bell-color { + color: #99c; } -.lcars-melrose-color { - color: #99f !important; +.lcars-melrose-color.lcars-melrose-color { + color: #99f; } -.lcars-hopbush-color { - color: #c69 !important; +.lcars-hopbush-color.lcars-hopbush-color { + color: #c69; } -.lcars-chestnut-rose-color { - color: #c66 !important; +.lcars-chestnut-rose-color.lcars-chestnut-rose-color { + color: #c66; } -.lcars-orange-peel-color { - color: #f96 !important; +.lcars-orange-peel-color.lcars-orange-peel-color { + color: #f96; } -.lcars-atomic-tangerine-color { - color: #f90 !important; +.lcars-atomic-tangerine-color.lcars-atomic-tangerine-color { + color: #f90; } -.lcars-danub-color { - color: #68c !important; +.lcars-danub-color.lcars-danub-color { + color: #68c; } -.lcars-indigo-color { - color: #45b !important; +.lcars-indigo-color.lcars-indigo-color { + color: #45b; } -.lcars-lavender-purple-color { - color: #97a !important; +.lcars-lavender-purple-color.lcars-lavender-purple-color { + color: #97a; } -.lcars-cosmic-color { - color: #746 !important; +.lcars-cosmic-color.lcars-cosmic-color { + color: #746; } -.lcars-red-damask-color { - color: #d64 !important; +.lcars-red-damask-color.lcars-red-damask-color { + color: #d64; } -.lcars-medium-carmine-color { - color: #a53 !important; +.lcars-medium-carmine-color.lcars-medium-carmine-color { + color: #a53; } -.lcars-bourbon-color { - color: #b62 !important; +.lcars-bourbon-color.lcars-bourbon-color { + color: #b62; } -.lcars-sandy-brown-color { - color: #e95 !important; +.lcars-sandy-brown-color.lcars-sandy-brown-color { + color: #e95; } -.lcars-periwinkle-color { - color: #cdf !important; +.lcars-periwinkle-color.lcars-periwinkle-color { + color: #cdf; } -.lcars-dodger-blue-color { - color: #59f !important; +.lcars-dodger-blue-color.lcars-dodger-blue-color { + color: #59f; } -.lcars-dodger-blue-alt-color { - color: #36f !important; +.lcars-dodger-blue-alt-color.lcars-dodger-blue-alt-color { + color: #36f; } -.lcars-blue-color { - color: #01e !important; +.lcars-blue-color.lcars-blue-color { + color: #01e; } -.lcars-navy-blue-color { - color: #008 !important; +.lcars-navy-blue-color.lcars-navy-blue-color { + color: #008; } -.lcars-husk-color { - color: #ba5 !important; +.lcars-husk-color.lcars-husk-color { + color: #ba5; } -.lcars-rust-color { - color: #b41 !important; +.lcars-rust-color.lcars-rust-color { + color: #b41; } -.lcars-tamarillo-color { - color: #821 !important; +.lcars-tamarillo-color.lcars-tamarillo-color { + color: #821; } html, body { @@ -640,7 +683,7 @@ h6 { .lcars-element.button { cursor: pointer; } -.lcars-element.button:active { +.lcars-element.button.button:active { background-color: #c69; } .lcars-element .lcars-element-addition { @@ -687,6 +730,9 @@ h6 { left: 0.25rem; right: unset; } +path.button:active { + fill: #c69; +} .lcars-text-box, a.lcars-text-box { background-color: #000; @@ -1713,3 +1759,30 @@ a.lcars-text-box.blink { .lcars-u-16.half { width: 119.875rem; } +a { + text-decoration: none; + display: inline; +} +a:link { + color: #fc6; + font-weight: 400; +} +a:visited { + color: #fc6; + font-weight: normal; +} +a:focus { + color: #fc6; + background-color: #080602; + font-weight: 400; +} +a:hover { + color: #fc6; + background-color: #090703; + font-weight: 400; +} +a:active { + color: #ff9; + font-weight: 500; + background-color: #0c0806; +} diff --git a/css/lcars.devel.css b/css/lcars.devel.css index 05851dd..74ff407 100644 --- a/css/lcars.devel.css +++ b/css/lcars.devel.css @@ -3,302 +3,345 @@ body { background-size: 0.5rem 0.5rem; background-position: 0 0, 0.25rem 0, 0.25rem -0.25rem, 0 -0.25rem; } -.lcars-gray-bg { - background-color: rgba(34,51,85,0.467) !important; +.lcars-gray-bg.lcars-gray-bg { + background-color: #234; + fill: #234; } -.lcars-white-bg { - background-color: #fff !important; +.lcars-white-bg.lcars-white-bg { + background-color: #fff; + fill: #fff; } -.lcars-black-bg { - background-color: #000 !important; +.lcars-black-bg.lcars-black-bg { + background-color: #000; + fill: #000; +} +.lcars-pale-canary-bg.lcars-pale-canary-bg { + background-color: #ff9; + fill: #ff9; +} +.lcars-golden-tanoi-bg.lcars-golden-tanoi-bg { + background-color: #fc6; + fill: #fc6; +} +.lcars-neon-carrot-bg.lcars-neon-carrot-bg { + background-color: #f93; + fill: #f93; } -.lcars-pale-canary-bg { - background-color: #ff9 !important; +.lcars-eggplant-bg.lcars-eggplant-bg { + background-color: #646; + fill: #646; } -.lcars-golden-tanoi-bg { - background-color: #fc6 !important; +.lcars-lilac-bg.lcars-lilac-bg { + background-color: #c9c; + fill: #c9c; } -.lcars-neon-carrot-bg { - background-color: #f93 !important; +.lcars-anakiwa-bg.lcars-anakiwa-bg { + background-color: #9cf; + fill: #9cf; } -.lcars-eggplant-bg { - background-color: #646 !important; +.lcars-mariner-bg.lcars-mariner-bg { + background-color: #36c; + fill: #36c; } -.lcars-lilac-bg { - background-color: #c9c !important; +.lcars-bahama-blue-bg.lcars-bahama-blue-bg { + background-color: #069; + fill: #069; } -.lcars-anakiwa-bg { - background-color: #9cf !important; +.lcars-red-alert-bg.lcars-red-alert-bg { + background-color: #e10; + fill: #e10; } -.lcars-mariner-bg { - background-color: #36c !important; +.lcars-blue-bell-bg.lcars-blue-bell-bg { + background-color: #99c; + fill: #99c; } -.lcars-bahama-blue-bg { - background-color: #069 !important; +.lcars-melrose-bg.lcars-melrose-bg { + background-color: #99f; + fill: #99f; } -.lcars-blue-bell-bg { - background-color: #99c !important; +.lcars-hopbush-bg.lcars-hopbush-bg { + background-color: #c69; + fill: #c69; } -.lcars-melrose-bg { - background-color: #99f !important; +.lcars-chestnut-rose-bg.lcars-chestnut-rose-bg { + background-color: #c66; + fill: #c66; } -.lcars-hopbush-bg { - background-color: #c69 !important; +.lcars-orange-peel-bg.lcars-orange-peel-bg { + background-color: #f96; + fill: #f96; } -.lcars-chestnut-rose-bg { - background-color: #c66 !important; +.lcars-atomic-tangerine-bg.lcars-atomic-tangerine-bg { + background-color: #f90; + fill: #f90; } -.lcars-orange-peel-bg { - background-color: #f96 !important; +.lcars-danub-bg.lcars-danub-bg { + background-color: #68c; + fill: #68c; } -.lcars-atomic-tangerine-bg { - background-color: #f90 !important; +.lcars-indigo-bg.lcars-indigo-bg { + background-color: #45b; + fill: #45b; } -.lcars-danub-bg { - background-color: #68c !important; +.lcars-lavender-purple-bg.lcars-lavender-purple-bg { + background-color: #97a; + fill: #97a; } -.lcars-indigo-bg { - background-color: #45b !important; +.lcars-cosmic-bg.lcars-cosmic-bg { + background-color: #746; + fill: #746; } -.lcars-lavender-purple-bg { - background-color: #97a !important; +.lcars-red-damask-bg.lcars-red-damask-bg { + background-color: #d64; + fill: #d64; } -.lcars-cosmic-bg { - background-color: #746 !important; +.lcars-medium-carmine-bg.lcars-medium-carmine-bg { + background-color: #a53; + fill: #a53; } -.lcars-red-damask-bg { - background-color: #d64 !important; +.lcars-bourbon-bg.lcars-bourbon-bg { + background-color: #b62; + fill: #b62; } -.lcars-medium-carmine-bg { - background-color: #a53 !important; +.lcars-sandy-brown-bg.lcars-sandy-brown-bg { + background-color: #e95; + fill: #e95; } -.lcars-bourbon-bg { - background-color: #b62 !important; +.lcars-periwinkle-bg.lcars-periwinkle-bg { + background-color: #cdf; + fill: #cdf; } -.lcars-sandy-brown-bg { - background-color: #e95 !important; +.lcars-dodger-blue-bg.lcars-dodger-blue-bg { + background-color: #59f; + fill: #59f; } -.lcars-periwinkle-bg { - background-color: #cdf !important; +.lcars-dodger-blue-alt-bg.lcars-dodger-blue-alt-bg { + background-color: #36f; + fill: #36f; } -.lcars-dodger-blue-bg { - background-color: #59f !important; +.lcars-blue-bg.lcars-blue-bg { + background-color: #01e; + fill: #01e; } -.lcars-dodger-blue-alt-bg { - background-color: #36f !important; +.lcars-navy-blue-bg.lcars-navy-blue-bg { + background-color: #008; + fill: #008; } -.lcars-blue-bg { - background-color: #01e !important; +.lcars-husk-bg.lcars-husk-bg { + background-color: #ba5; + fill: #ba5; } -.lcars-navy-blue-bg { - background-color: #008 !important; +.lcars-rust-bg.lcars-rust-bg { + background-color: #b41; + fill: #b41; } -.lcars-husk-bg { - background-color: #ba5 !important; +.lcars-tamarillo-bg.lcars-tamarillo-bg { + background-color: #821; + fill: #821; } -.lcars-rust-bg { - background-color: #b41 !important; +.lcars-gray-border.lcars-gray-border { + border-color: #234; } -.lcars-tamarillo-bg { - background-color: #821 !important; +.lcars-white-border.lcars-white-border { + border-color: #fff; } -.lcars-gray-border { - border-color: rgba(34,51,85,0.467) !important; +.lcars-black-border.lcars-black-border { + border-color: #000; } -.lcars-white-border { - border-color: #fff !important; +.lcars-pale-canary-border.lcars-pale-canary-border { + border-color: #ff9; } -.lcars-black-border { - border-color: #000 !important; +.lcars-golden-tanoi-border.lcars-golden-tanoi-border { + border-color: #fc6; } -.lcars-pale-canary-border { - border-color: #ff9 !important; +.lcars-neon-carrot-border.lcars-neon-carrot-border { + border-color: #f93; } -.lcars-golden-tanoi-border { - border-color: #fc6 !important; +.lcars-eggplant-border.lcars-eggplant-border { + border-color: #646; } -.lcars-neon-carrot-border { - border-color: #f93 !important; +.lcars-lilac-border.lcars-lilac-border { + border-color: #c9c; } -.lcars-eggplant-border { - border-color: #646 !important; +.lcars-anakiwa-border.lcars-anakiwa-border { + border-color: #9cf; } -.lcars-lilac-border { - border-color: #c9c !important; +.lcars-mariner-border.lcars-mariner-border { + border-color: #36c; } -.lcars-anakiwa-border { - border-color: #9cf !important; +.lcars-bahama-blue-border.lcars-bahama-blue-border { + border-color: #069; } -.lcars-mariner-border { - border-color: #36c !important; +.lcars-red-alert-border.lcars-red-alert-border { + border-color: #e10; } -.lcars-bahama-blue-border { - border-color: #069 !important; +.lcars-blue-bell-border.lcars-blue-bell-border { + border-color: #99c; } -.lcars-blue-bell-border { - border-color: #99c !important; +.lcars-melrose-border.lcars-melrose-border { + border-color: #99f; } -.lcars-melrose-border { - border-color: #99f !important; +.lcars-hopbush-border.lcars-hopbush-border { + border-color: #c69; } -.lcars-hopbush-border { - border-color: #c69 !important; +.lcars-chestnut-rose-border.lcars-chestnut-rose-border { + border-color: #c66; } -.lcars-chestnut-rose-border { - border-color: #c66 !important; +.lcars-orange-peel-border.lcars-orange-peel-border { + border-color: #f96; } -.lcars-orange-peel-border { - border-color: #f96 !important; +.lcars-atomic-tangerine-border.lcars-atomic-tangerine-border { + border-color: #f90; } -.lcars-atomic-tangerine-border { - border-color: #f90 !important; +.lcars-danub-border.lcars-danub-border { + border-color: #68c; } -.lcars-danub-border { - border-color: #68c !important; +.lcars-indigo-border.lcars-indigo-border { + border-color: #45b; } -.lcars-indigo-border { - border-color: #45b !important; +.lcars-lavender-purple-border.lcars-lavender-purple-border { + border-color: #97a; } -.lcars-lavender-purple-border { - border-color: #97a !important; +.lcars-cosmic-border.lcars-cosmic-border { + border-color: #746; } -.lcars-cosmic-border { - border-color: #746 !important; +.lcars-red-damask-border.lcars-red-damask-border { + border-color: #d64; } -.lcars-red-damask-border { - border-color: #d64 !important; +.lcars-medium-carmine-border.lcars-medium-carmine-border { + border-color: #a53; } -.lcars-medium-carmine-border { - border-color: #a53 !important; +.lcars-bourbon-border.lcars-bourbon-border { + border-color: #b62; } -.lcars-bourbon-border { - border-color: #b62 !important; +.lcars-sandy-brown-border.lcars-sandy-brown-border { + border-color: #e95; } -.lcars-sandy-brown-border { - border-color: #e95 !important; +.lcars-periwinkle-border.lcars-periwinkle-border { + border-color: #cdf; } -.lcars-periwinkle-border { - border-color: #cdf !important; +.lcars-dodger-blue-border.lcars-dodger-blue-border { + border-color: #59f; } -.lcars-dodger-blue-border { - border-color: #59f !important; +.lcars-dodger-blue-alt-border.lcars-dodger-blue-alt-border { + border-color: #36f; } -.lcars-dodger-blue-alt-border { - border-color: #36f !important; +.lcars-blue-border.lcars-blue-border { + border-color: #01e; } -.lcars-blue-border { - border-color: #01e !important; +.lcars-navy-blue-border.lcars-navy-blue-border { + border-color: #008; } -.lcars-navy-blue-border { - border-color: #008 !important; +.lcars-husk-border.lcars-husk-border { + border-color: #ba5; } -.lcars-husk-border { - border-color: #ba5 !important; +.lcars-rust-border.lcars-rust-border { + border-color: #b41; } -.lcars-rust-border { - border-color: #b41 !important; +.lcars-tamarillo-border.lcars-tamarillo-border { + border-color: #821; } -.lcars-tamarillo-border { - border-color: #821 !important; +.lcars-gray-color.lcars-gray-color { + color: #234; } -.lcars-gray-color { - color: rgba(34,51,85,0.467) !important; +.lcars-white-color.lcars-white-color { + color: #fff; } -.lcars-white-color { - color: #fff !important; +.lcars-black-color.lcars-black-color { + color: #000; } -.lcars-black-color { - color: #000 !important; +.lcars-pale-canary-color.lcars-pale-canary-color { + color: #ff9; } -.lcars-pale-canary-color { - color: #ff9 !important; +.lcars-golden-tanoi-color.lcars-golden-tanoi-color { + color: #fc6; } -.lcars-golden-tanoi-color { - color: #fc6 !important; +.lcars-neon-carrot-color.lcars-neon-carrot-color { + color: #f93; } -.lcars-neon-carrot-color { - color: #f93 !important; +.lcars-eggplant-color.lcars-eggplant-color { + color: #646; } -.lcars-eggplant-color { - color: #646 !important; +.lcars-lilac-color.lcars-lilac-color { + color: #c9c; } -.lcars-lilac-color { - color: #c9c !important; +.lcars-anakiwa-color.lcars-anakiwa-color { + color: #9cf; } -.lcars-anakiwa-color { - color: #9cf !important; +.lcars-mariner-color.lcars-mariner-color { + color: #36c; } -.lcars-mariner-color { - color: #36c !important; +.lcars-bahama-blue-color.lcars-bahama-blue-color { + color: #069; } -.lcars-bahama-blue-color { - color: #069 !important; +.lcars-red-alert-color.lcars-red-alert-color { + color: #e10; } -.lcars-blue-bell-color { - color: #99c !important; +.lcars-blue-bell-color.lcars-blue-bell-color { + color: #99c; } -.lcars-melrose-color { - color: #99f !important; +.lcars-melrose-color.lcars-melrose-color { + color: #99f; } -.lcars-hopbush-color { - color: #c69 !important; +.lcars-hopbush-color.lcars-hopbush-color { + color: #c69; } -.lcars-chestnut-rose-color { - color: #c66 !important; +.lcars-chestnut-rose-color.lcars-chestnut-rose-color { + color: #c66; } -.lcars-orange-peel-color { - color: #f96 !important; +.lcars-orange-peel-color.lcars-orange-peel-color { + color: #f96; } -.lcars-atomic-tangerine-color { - color: #f90 !important; +.lcars-atomic-tangerine-color.lcars-atomic-tangerine-color { + color: #f90; } -.lcars-danub-color { - color: #68c !important; +.lcars-danub-color.lcars-danub-color { + color: #68c; } -.lcars-indigo-color { - color: #45b !important; +.lcars-indigo-color.lcars-indigo-color { + color: #45b; } -.lcars-lavender-purple-color { - color: #97a !important; +.lcars-lavender-purple-color.lcars-lavender-purple-color { + color: #97a; } -.lcars-cosmic-color { - color: #746 !important; +.lcars-cosmic-color.lcars-cosmic-color { + color: #746; } -.lcars-red-damask-color { - color: #d64 !important; +.lcars-red-damask-color.lcars-red-damask-color { + color: #d64; } -.lcars-medium-carmine-color { - color: #a53 !important; +.lcars-medium-carmine-color.lcars-medium-carmine-color { + color: #a53; } -.lcars-bourbon-color { - color: #b62 !important; +.lcars-bourbon-color.lcars-bourbon-color { + color: #b62; } -.lcars-sandy-brown-color { - color: #e95 !important; +.lcars-sandy-brown-color.lcars-sandy-brown-color { + color: #e95; } -.lcars-periwinkle-color { - color: #cdf !important; +.lcars-periwinkle-color.lcars-periwinkle-color { + color: #cdf; } -.lcars-dodger-blue-color { - color: #59f !important; +.lcars-dodger-blue-color.lcars-dodger-blue-color { + color: #59f; } -.lcars-dodger-blue-alt-color { - color: #36f !important; +.lcars-dodger-blue-alt-color.lcars-dodger-blue-alt-color { + color: #36f; } -.lcars-blue-color { - color: #01e !important; +.lcars-blue-color.lcars-blue-color { + color: #01e; } -.lcars-navy-blue-color { - color: #008 !important; +.lcars-navy-blue-color.lcars-navy-blue-color { + color: #008; } -.lcars-husk-color { - color: #ba5 !important; +.lcars-husk-color.lcars-husk-color { + color: #ba5; } -.lcars-rust-color { - color: #b41 !important; +.lcars-rust-color.lcars-rust-color { + color: #b41; } -.lcars-tamarillo-color { - color: #821 !important; +.lcars-tamarillo-color.lcars-tamarillo-color { + color: #821; } html, body { @@ -645,7 +688,7 @@ h6 { .lcars-element.button { cursor: pointer; } -.lcars-element.button:active { +.lcars-element.button.button:active { background-color: #c69; } .lcars-element .lcars-element-addition { @@ -692,6 +735,9 @@ h6 { left: 0.25rem; right: unset; } +path.button:active { + fill: #c69; +} .lcars-bracket { background-color: #fc6; } diff --git a/css/lcars.min.css b/css/lcars.min.css index fc0f1a0..c8d38e6 100644 --- a/css/lcars.min.css +++ b/css/lcars.min.css @@ -1 +1 @@ -.lcars-gray-bg{background-color:rgba(34,51,85,.467)!important}.lcars-white-bg{background-color:#fff!important}.lcars-black-bg{background-color:#000!important}.lcars-pale-canary-bg{background-color:#ff9!important}.lcars-golden-tanoi-bg{background-color:#fc6!important}.lcars-neon-carrot-bg{background-color:#f93!important}.lcars-eggplant-bg{background-color:#646!important}.lcars-lilac-bg{background-color:#c9c!important}.lcars-anakiwa-bg{background-color:#9cf!important}.lcars-mariner-bg{background-color:#36c!important}.lcars-bahama-blue-bg{background-color:#069!important}.lcars-blue-bell-bg{background-color:#99c!important}.lcars-melrose-bg{background-color:#99f!important}.lcars-hopbush-bg{background-color:#c69!important}.lcars-chestnut-rose-bg{background-color:#c66!important}.lcars-orange-peel-bg{background-color:#f96!important}.lcars-atomic-tangerine-bg{background-color:#f90!important}.lcars-danub-bg{background-color:#68c!important}.lcars-indigo-bg{background-color:#45b!important}.lcars-lavender-purple-bg{background-color:#97a!important}.lcars-cosmic-bg{background-color:#746!important}.lcars-red-damask-bg{background-color:#d64!important}.lcars-medium-carmine-bg{background-color:#a53!important}.lcars-bourbon-bg{background-color:#b62!important}.lcars-sandy-brown-bg{background-color:#e95!important}.lcars-periwinkle-bg{background-color:#cdf!important}.lcars-dodger-blue-bg{background-color:#59f!important}.lcars-dodger-blue-alt-bg{background-color:#36f!important}.lcars-blue-bg{background-color:#01e!important}.lcars-navy-blue-bg{background-color:#008!important}.lcars-husk-bg{background-color:#ba5!important}.lcars-rust-bg{background-color:#b41!important}.lcars-tamarillo-bg{background-color:#821!important}.lcars-gray-border{border-color:rgba(34,51,85,.467)!important}.lcars-white-border{border-color:#fff!important}.lcars-black-border{border-color:#000!important}.lcars-pale-canary-border{border-color:#ff9!important}.lcars-golden-tanoi-border{border-color:#fc6!important}.lcars-neon-carrot-border{border-color:#f93!important}.lcars-eggplant-border{border-color:#646!important}.lcars-lilac-border{border-color:#c9c!important}.lcars-anakiwa-border{border-color:#9cf!important}.lcars-mariner-border{border-color:#36c!important}.lcars-bahama-blue-border{border-color:#069!important}.lcars-blue-bell-border{border-color:#99c!important}.lcars-melrose-border{border-color:#99f!important}.lcars-hopbush-border{border-color:#c69!important}.lcars-chestnut-rose-border{border-color:#c66!important}.lcars-orange-peel-border{border-color:#f96!important}.lcars-atomic-tangerine-border{border-color:#f90!important}.lcars-danub-border{border-color:#68c!important}.lcars-indigo-border{border-color:#45b!important}.lcars-lavender-purple-border{border-color:#97a!important}.lcars-cosmic-border{border-color:#746!important}.lcars-red-damask-border{border-color:#d64!important}.lcars-medium-carmine-border{border-color:#a53!important}.lcars-bourbon-border{border-color:#b62!important}.lcars-sandy-brown-border{border-color:#e95!important}.lcars-periwinkle-border{border-color:#cdf!important}.lcars-dodger-blue-border{border-color:#59f!important}.lcars-dodger-blue-alt-border{border-color:#36f!important}.lcars-blue-border{border-color:#01e!important}.lcars-navy-blue-border{border-color:#008!important}.lcars-husk-border{border-color:#ba5!important}.lcars-rust-border{border-color:#b41!important}.lcars-tamarillo-border{border-color:#821!important}.lcars-gray-color{color:rgba(34,51,85,.467)!important}.lcars-white-color{color:#fff!important}.lcars-black-color{color:#000!important}.lcars-pale-canary-color{color:#ff9!important}.lcars-golden-tanoi-color{color:#fc6!important}.lcars-neon-carrot-color{color:#f93!important}.lcars-eggplant-color{color:#646!important}.lcars-lilac-color{color:#c9c!important}.lcars-anakiwa-color{color:#9cf!important}.lcars-mariner-color{color:#36c!important}.lcars-bahama-blue-color{color:#069!important}.lcars-blue-bell-color{color:#99c!important}.lcars-melrose-color{color:#99f!important}.lcars-hopbush-color{color:#c69!important}.lcars-chestnut-rose-color{color:#c66!important}.lcars-orange-peel-color{color:#f96!important}.lcars-atomic-tangerine-color{color:#f90!important}.lcars-danub-color{color:#68c!important}.lcars-indigo-color{color:#45b!important}.lcars-lavender-purple-color{color:#97a!important}.lcars-cosmic-color{color:#746!important}.lcars-red-damask-color{color:#d64!important}.lcars-medium-carmine-color{color:#a53!important}.lcars-bourbon-color{color:#b62!important}.lcars-sandy-brown-color{color:#e95!important}.lcars-periwinkle-color{color:#cdf!important}.lcars-dodger-blue-color{color:#59f!important}.lcars-dodger-blue-alt-color{color:#36f!important}.lcars-blue-color{color:#01e!important}.lcars-navy-blue-color{color:#008!important}.lcars-husk-color{color:#ba5!important}.lcars-rust-color{color:#b41!important}.lcars-tamarillo-color{color:#821!important}body,html{font-family:arial,monospace;color:#fff}h1{font-size:270%;font-weight:700}h2{font-size:240%;font-weight:700}h3{font-size:200%;font-weight:700}h4{font-size:180%;font-weight:700}h5{font-size:160%;font-weight:700}h6{font-size:140%;font-weight:700}.lcars-app-container{display:flex;width:calc(100% - 1rem);height:calc(100% - 1rem);overflow:hidden;margin:.5rem}.lcars-app-container #left-menu{position:fixed;padding-top:4.5rem;height:100%;left:.5rem}.lcars-app-container #header{position:fixed;background-color:#000;width:calc(100% - 1rem);top:0;left:.5rem;padding-top:.5rem;margin-bottom:.25rem;z-index:1}.lcars-app-container #footer{position:fixed;background-color:#000;bottom:0;left:.5rem;padding-bottom:.5rem;width:calc(100% - 1rem);z-index:1}.lcars-app-container #container{margin-top:.25rem;margin-left:.25rem;padding-left:9.5rem;padding-top:4.5rem;padding-bottom:4.5rem;width:100%;height:100%;overflow:auto}.lcars-row{display:inline-flex;flex-direction:row;width:100%}.lcars-row.fill{flex:1}.lcars-row.centered{justify-content:center}.lcars-row.full-centered{justify-content:center;align-items:center}.lcars-row.right{justify-content:flex-end}.lcars-row.right-centered{justify-content:flex-end;align-items:center}.lcars-row.right-bottom{justify-content:flex-end;align-items:flex-end}.lcars-row :last-child{margin-right:0}.lcars-row>*{margin-right:.25rem}.lcars-column{display:inline-flex;flex-direction:column}.lcars-column.fill{flex:1}.lcars-column.centered{justify-content:center}.lcars-column.full-centered{justify-content:center;align-items:center}.lcars-column.centered-right{justify-content:center;align-items:flex-end}.lcars-column.bottom{justify-content:flex-end}.lcars-column.bottom-centered{justify-content:flex-end;align-items:center}.lcars-column :last-child{margin-bottom:0}.lcars-column>*{margin-bottom:.25rem}.lcars-column.left-menu{padding-right:2rem}.lcars-column.right-menu{padding-left:2rem}.lcars-column.start-space{margin-top:.25rem}.lcars-elbow{position:relative;width:9.5rem;min-width:9.5rem;height:4.5rem;min-height:4.5rem;background:#fc6;margin:0}.lcars-elbow a{display:inline-block;position:absolute;color:#000;bottom:0;padding:.25rem}.lcars-elbow:after{content:'';display:block;position:absolute;width:2rem;height:3rem;background:#000}.lcars-elbow.left-bottom{border-top-left-radius:3.75rem}.lcars-elbow.left-bottom a{right:2.25rem}.lcars-elbow.left-bottom:after{right:0;top:1.5rem;border-top-left-radius:1.875rem}.lcars-elbow.left-top{border-bottom-left-radius:3.75rem}.lcars-elbow.left-top a{top:0;right:2.25rem}.lcars-elbow.left-top:after{right:0;bottom:1.5rem;border-bottom-left-radius:3.75rem}.lcars-elbow.right-bottom{border-top-right-radius:3.75rem}.lcars-elbow.right-bottom:after{top:1.5rem;border-top-right-radius:1.875rem}.lcars-elbow.right-bottom a{left:2.25rem}.lcars-elbow.right-top{border-bottom-right-radius:3.75rem}.lcars-elbow.right-top a{display:inline-block;top:0;left:2.25rem}.lcars-elbow.right-top:after{bottom:1.5rem;border-bottom-right-radius:1.875rem}.lcars-bar{position:relative;color:#000;height:100%;width:100%;margin:0;display:inline-block;background-color:#fc6}.lcars-bar:after{content:'';display:block;position:absolute;background:#000}.lcars-bar.spacer{margin:0;padding:0;background-color:transparent;width:.25rem;min-width:.25rem;height:.25rem;min-height:.25rem}.lcars-bar.double-spacer{background-color:transparent;width:.5rem;min-width:.5rem;height:.5rem;min-height:.5rem}.lcars-bar.left-space{margin-left:.25rem}.lcars-bar.left-double-space{margin-left:.5rem}.lcars-bar.right-space{margin-right:.25rem}.lcars-bar.right-double-space{margin-right:.5rem}.lcars-bar.horizontal{height:1.5rem}.lcars-bar.left-end{width:1.5rem;max-width:1.5rem;min-width:1.5rem;border-top-left-radius:.75rem;border-bottom-left-radius:.75rem}.lcars-bar.left-end.decorated:after{right:.25rem;width:.25rem;height:100%;background-color:#000}.lcars-bar.right-end{width:1.5rem;max-width:1.5rem;min-width:1.5rem;border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}.lcars-bar.right-end.decorated:after{left:.25rem;width:.25rem;height:100%;background-color:#000}.lcars-bar.fill{flex:1}.lcars-bar.bottom{align-self:flex-end}.lcars-bar .lcars-title{color:#fff;background-color:#000;text-transform:uppercase;margin:0 0 0 .833333333333335rem;padding-left:.166666666666667rem;padding-right:.166666666666667rem;padding-bottom:.166666666666667rem;display:inline-block;font-size:150%;height:100%}.lcars-bar .lcars-title.right{float:right;margin-right:.833333333333335rem}.lcars-element{position:relative;font-weight:700;color:#000;text-align:right;background:#fc6;height:3rem;width:7.5rem;box-sizing:border-box;padding-left:.75rem;padding-right:.75rem;display:inline-flex;flex-direction:row;justify-content:flex-end;align-items:flex-end}.lcars-element *{margin:0}.lcars-element.left-rounded{border-top-left-radius:1.5rem;border-bottom-left-radius:1.5rem;padding-left:1.5rem}.lcars-element.right-rounded{border-top-right-radius:1.5rem;border-bottom-right-radius:1.5rem;padding-right:1.5rem}.lcars-element.rounded{border-radius:1.5rem;padding-left:1.5rem;padding-right:1.5rem}.lcars-element.button{cursor:pointer}.lcars-element.button:active{background-color:#c69}.lcars-element .lcars-element-addition{display:flex;flex-direction:column;justify-content:flex-end;height:100%;background-color:#000;color:#fff;font-size:2.000000000000001rem;margin-left:.25rem;padding-left:.25rem;padding-right:.25rem}.lcars-element .lcars-element-decorator{display:inline-block;position:absolute;top:0;width:2rem;left:-2.25rem;height:100%;background-color:#fc6;border-top-left-radius:1.5rem;border-bottom-left-radius:1.5rem}.lcars-element .lcars-element-decorator:after{content:'';display:block;position:absolute;right:.25rem;width:.25rem;height:100%;background-color:#000}.lcars-element .lcars-element-decorator.right{right:-2.25rem;left:unset;border-radius:0 1.5rem 1.5rem 0}.lcars-element .lcars-element-decorator.right:after{left:.25rem;right:unset}.lcars-text-box,a.lcars-text-box{background-color:#000;color:#fff;font-weight:700;width:7.5rem;height:3rem;padding-left:.25rem;padding-right:.25rem;box-sizing:border-box;display:inline-flex;flex-direction:row}.lcars-text-box.big,a.lcars-text-box.big{font-size:150%}.lcars-text-box.large,a.lcars-text-box.large{font-size:200%}.lcars-text-box.huge,a.lcars-text-box.huge{font-size:400%;height:6rem}.lcars-text-box.centered,a.lcars-text-box.centered{justify-content:center}.lcars-text-box.right,a.lcars-text-box.right{justify-content:flex-end}.lcars-text-box.full-centered,a.lcars-text-box.full-centered{justify-content:center;align-items:center}.lcars-text-box.centered-right,a.lcars-text-box.centered-right{justify-content:flex-end;align-items:center}.lcars-text-box.bottom,a.lcars-text-box.bottom{align-items:flex-end}.lcars-text-box.bottom-centered,a.lcars-text-box.bottom-centered{justify-content:center;align-items:flex-end}.lcars-text-box.bottom-right,a.lcars-text-box.bottom-right{justify-content:flex-end;align-items:flex-end}.lcars-text-box.blink,a.lcars-text-box.blink{animation:blinker 1s linear infinite}@-moz-keyframes blinker{50%{opacity:.4}}@-webkit-keyframes blinker{50%{opacity:.4}}@-o-keyframes blinker{50%{opacity:.4}}@keyframes blinker{50%{opacity:.4}}.lcars-bracket{background-color:#fc6}.lcars-bracket.left{width:1.5rem;border-top-left-radius:1.5rem;border-bottom-left-radius:1.5rem;border-width:.75rem 0 .75rem .25rem}.lcars-bracket.right{width:1.5rem;border-top-right-radius:1.5rem;border-bottom-right-radius:1.5rem;border-width:.75rem .25rem .75rem 0}.lcars-bracket.top{height:1.5rem;border-top-left-radius:1.5rem;border-top-right-radius:1.5rem;border-width:.25rem .75rem 0}.lcars-bracket.bottom{height:1.5rem;border-bottom-left-radius:1.5rem;border-bottom-right-radius:1.5rem;border-width:0 .75rem .25rem}.lcars-bracket.hollow{background-color:#000;border-style:solid;border-color:#fc6}.lcars-u-1-1{width:7.5rem;min-width:7.5rem;height:3rem;min-height:3rem}.lcars-u-1-2{width:7.5rem;min-width:7.5rem;height:6.25rem;min-height:6.25rem}.lcars-u-1-3{width:7.5rem;min-width:7.5rem;height:9.5rem;min-height:9.5rem}.lcars-u-1-4{width:7.5rem;min-width:7.5rem;height:12.75rem;min-height:12.75rem}.lcars-u-1-5{width:7.5rem;min-width:7.5rem;height:16rem;min-height:16rem}.lcars-u-1-6{width:7.5rem;min-width:7.5rem;height:19.25rem;min-height:19.25rem}.lcars-u-1-7{width:7.5rem;min-width:7.5rem;height:22.5rem;min-height:22.5rem}.lcars-u-1-8{width:7.5rem;min-width:7.5rem;height:25.75rem;min-height:25.75rem}.lcars-u-2-1{width:15.25rem;min-width:15.25rem;height:3rem;min-height:3rem}.lcars-u-2-2{width:15.25rem;min-width:15.25rem;height:6.25rem;min-height:6.25rem}.lcars-u-2-3{width:15.25rem;min-width:15.25rem;height:9.5rem;min-height:9.5rem}.lcars-u-2-4{width:15.25rem;min-width:15.25rem;height:12.75rem;min-height:12.75rem}.lcars-u-2-5{width:15.25rem;min-width:15.25rem;height:16rem;min-height:16rem}.lcars-u-2-6{width:15.25rem;min-width:15.25rem;height:19.25rem;min-height:19.25rem}.lcars-u-2-7{width:15.25rem;min-width:15.25rem;height:22.5rem;min-height:22.5rem}.lcars-u-2-8{width:15.25rem;min-width:15.25rem;height:25.75rem;min-height:25.75rem}.lcars-u-3-1{width:23rem;min-width:23rem;height:3rem;min-height:3rem}.lcars-u-3-2{width:23rem;min-width:23rem;height:6.25rem;min-height:6.25rem}.lcars-u-3-3{width:23rem;min-width:23rem;height:9.5rem;min-height:9.5rem}.lcars-u-3-4{width:23rem;min-width:23rem;height:12.75rem;min-height:12.75rem}.lcars-u-3-5{width:23rem;min-width:23rem;height:16rem;min-height:16rem}.lcars-u-3-6{width:23rem;min-width:23rem;height:19.25rem;min-height:19.25rem}.lcars-u-3-7{width:23rem;min-width:23rem;height:22.5rem;min-height:22.5rem}.lcars-u-3-8{width:23rem;min-width:23rem;height:25.75rem;min-height:25.75rem}.lcars-u-4-1{width:30.75rem;min-width:30.75rem;height:3rem;min-height:3rem}.lcars-u-4-2{width:30.75rem;min-width:30.75rem;height:6.25rem;min-height:6.25rem}.lcars-u-4-3{width:30.75rem;min-width:30.75rem;height:9.5rem;min-height:9.5rem}.lcars-u-4-4{width:30.75rem;min-width:30.75rem;height:12.75rem;min-height:12.75rem}.lcars-u-4-5{width:30.75rem;min-width:30.75rem;height:16rem;min-height:16rem}.lcars-u-4-6{width:30.75rem;min-width:30.75rem;height:19.25rem;min-height:19.25rem}.lcars-u-4-7{width:30.75rem;min-width:30.75rem;height:22.5rem;min-height:22.5rem}.lcars-u-4-8{width:30.75rem;min-width:30.75rem;height:25.75rem;min-height:25.75rem}.lcars-u-5-1{width:38.5rem;min-width:38.5rem;height:3rem;min-height:3rem}.lcars-u-5-2{width:38.5rem;min-width:38.5rem;height:6.25rem;min-height:6.25rem}.lcars-u-5-3{width:38.5rem;min-width:38.5rem;height:9.5rem;min-height:9.5rem}.lcars-u-5-4{width:38.5rem;min-width:38.5rem;height:12.75rem;min-height:12.75rem}.lcars-u-5-5{width:38.5rem;min-width:38.5rem;height:16rem;min-height:16rem}.lcars-u-5-6{width:38.5rem;min-width:38.5rem;height:19.25rem;min-height:19.25rem}.lcars-u-5-7{width:38.5rem;min-width:38.5rem;height:22.5rem;min-height:22.5rem}.lcars-u-5-8{width:38.5rem;min-width:38.5rem;height:25.75rem;min-height:25.75rem}.lcars-u-6-1{width:46.25rem;min-width:46.25rem;height:3rem;min-height:3rem}.lcars-u-6-2{width:46.25rem;min-width:46.25rem;height:6.25rem;min-height:6.25rem}.lcars-u-6-3{width:46.25rem;min-width:46.25rem;height:9.5rem;min-height:9.5rem}.lcars-u-6-4{width:46.25rem;min-width:46.25rem;height:12.75rem;min-height:12.75rem}.lcars-u-6-5{width:46.25rem;min-width:46.25rem;height:16rem;min-height:16rem}.lcars-u-6-6{width:46.25rem;min-width:46.25rem;height:19.25rem;min-height:19.25rem}.lcars-u-6-7{width:46.25rem;min-width:46.25rem;height:22.5rem;min-height:22.5rem}.lcars-u-6-8{width:46.25rem;min-width:46.25rem;height:25.75rem;min-height:25.75rem}.lcars-u-7-1{width:54rem;min-width:54rem;height:3rem;min-height:3rem}.lcars-u-7-2{width:54rem;min-width:54rem;height:6.25rem;min-height:6.25rem}.lcars-u-7-3{width:54rem;min-width:54rem;height:9.5rem;min-height:9.5rem}.lcars-u-7-4{width:54rem;min-width:54rem;height:12.75rem;min-height:12.75rem}.lcars-u-7-5{width:54rem;min-width:54rem;height:16rem;min-height:16rem}.lcars-u-7-6{width:54rem;min-width:54rem;height:19.25rem;min-height:19.25rem}.lcars-u-7-7{width:54rem;min-width:54rem;height:22.5rem;min-height:22.5rem}.lcars-u-7-8{width:54rem;min-width:54rem;height:25.75rem;min-height:25.75rem}.lcars-u-8-1{width:61.75rem;min-width:61.75rem;height:3rem;min-height:3rem}.lcars-u-8-2{width:61.75rem;min-width:61.75rem;height:6.25rem;min-height:6.25rem}.lcars-u-8-3{width:61.75rem;min-width:61.75rem;height:9.5rem;min-height:9.5rem}.lcars-u-8-4{width:61.75rem;min-width:61.75rem;height:12.75rem;min-height:12.75rem}.lcars-u-8-5{width:61.75rem;min-width:61.75rem;height:16rem;min-height:16rem}.lcars-u-8-6{width:61.75rem;min-width:61.75rem;height:19.25rem;min-height:19.25rem}.lcars-u-8-7{width:61.75rem;min-width:61.75rem;height:22.5rem;min-height:22.5rem}.lcars-u-8-8{width:61.75rem;min-width:61.75rem;height:25.75rem;min-height:25.75rem}.lcars-u-9-1{width:69.5rem;min-width:69.5rem;height:3rem;min-height:3rem}.lcars-u-9-2{width:69.5rem;min-width:69.5rem;height:6.25rem;min-height:6.25rem}.lcars-u-9-3{width:69.5rem;min-width:69.5rem;height:9.5rem;min-height:9.5rem}.lcars-u-9-4{width:69.5rem;min-width:69.5rem;height:12.75rem;min-height:12.75rem}.lcars-u-9-5{width:69.5rem;min-width:69.5rem;height:16rem;min-height:16rem}.lcars-u-9-6{width:69.5rem;min-width:69.5rem;height:19.25rem;min-height:19.25rem}.lcars-u-9-7{width:69.5rem;min-width:69.5rem;height:22.5rem;min-height:22.5rem}.lcars-u-9-8{width:69.5rem;min-width:69.5rem;height:25.75rem;min-height:25.75rem}.lcars-u-10-1{width:77.25rem;min-width:77.25rem;height:3rem;min-height:3rem}.lcars-u-10-2{width:77.25rem;min-width:77.25rem;height:6.25rem;min-height:6.25rem}.lcars-u-10-3{width:77.25rem;min-width:77.25rem;height:9.5rem;min-height:9.5rem}.lcars-u-10-4{width:77.25rem;min-width:77.25rem;height:12.75rem;min-height:12.75rem}.lcars-u-10-5{width:77.25rem;min-width:77.25rem;height:16rem;min-height:16rem}.lcars-u-10-6{width:77.25rem;min-width:77.25rem;height:19.25rem;min-height:19.25rem}.lcars-u-10-7{width:77.25rem;min-width:77.25rem;height:22.5rem;min-height:22.5rem}.lcars-u-10-8{width:77.25rem;min-width:77.25rem;height:25.75rem;min-height:25.75rem}.lcars-u-11-1{width:85rem;min-width:85rem;height:3rem;min-height:3rem}.lcars-u-11-2{width:85rem;min-width:85rem;height:6.25rem;min-height:6.25rem}.lcars-u-11-3{width:85rem;min-width:85rem;height:9.5rem;min-height:9.5rem}.lcars-u-11-4{width:85rem;min-width:85rem;height:12.75rem;min-height:12.75rem}.lcars-u-11-5{width:85rem;min-width:85rem;height:16rem;min-height:16rem}.lcars-u-11-6{width:85rem;min-width:85rem;height:19.25rem;min-height:19.25rem}.lcars-u-11-7{width:85rem;min-width:85rem;height:22.5rem;min-height:22.5rem}.lcars-u-11-8{width:85rem;min-width:85rem;height:25.75rem;min-height:25.75rem}.lcars-u-12-1{width:92.75rem;min-width:92.75rem;height:3rem;min-height:3rem}.lcars-u-12-2{width:92.75rem;min-width:92.75rem;height:6.25rem;min-height:6.25rem}.lcars-u-12-3{width:92.75rem;min-width:92.75rem;height:9.5rem;min-height:9.5rem}.lcars-u-12-4{width:92.75rem;min-width:92.75rem;height:12.75rem;min-height:12.75rem}.lcars-u-12-5{width:92.75rem;min-width:92.75rem;height:16rem;min-height:16rem}.lcars-u-12-6{width:92.75rem;min-width:92.75rem;height:19.25rem;min-height:19.25rem}.lcars-u-12-7{width:92.75rem;min-width:92.75rem;height:22.5rem;min-height:22.5rem}.lcars-u-12-8{width:92.75rem;min-width:92.75rem;height:25.75rem;min-height:25.75rem}.lcars-u-13-1{width:100.5rem;min-width:100.5rem;height:3rem;min-height:3rem}.lcars-u-13-2{width:100.5rem;min-width:100.5rem;height:6.25rem;min-height:6.25rem}.lcars-u-13-3{width:100.5rem;min-width:100.5rem;height:9.5rem;min-height:9.5rem}.lcars-u-13-4{width:100.5rem;min-width:100.5rem;height:12.75rem;min-height:12.75rem}.lcars-u-13-5{width:100.5rem;min-width:100.5rem;height:16rem;min-height:16rem}.lcars-u-13-6{width:100.5rem;min-width:100.5rem;height:19.25rem;min-height:19.25rem}.lcars-u-13-7{width:100.5rem;min-width:100.5rem;height:22.5rem;min-height:22.5rem}.lcars-u-13-8{width:100.5rem;min-width:100.5rem;height:25.75rem;min-height:25.75rem}.lcars-u-14-1{width:108.25rem;min-width:108.25rem;height:3rem;min-height:3rem}.lcars-u-14-2{width:108.25rem;min-width:108.25rem;height:6.25rem;min-height:6.25rem}.lcars-u-14-3{width:108.25rem;min-width:108.25rem;height:9.5rem;min-height:9.5rem}.lcars-u-14-4{width:108.25rem;min-width:108.25rem;height:12.75rem;min-height:12.75rem}.lcars-u-14-5{width:108.25rem;min-width:108.25rem;height:16rem;min-height:16rem}.lcars-u-14-6{width:108.25rem;min-width:108.25rem;height:19.25rem;min-height:19.25rem}.lcars-u-14-7{width:108.25rem;min-width:108.25rem;height:22.5rem;min-height:22.5rem}.lcars-u-14-8{width:108.25rem;min-width:108.25rem;height:25.75rem;min-height:25.75rem}.lcars-u-15-1{width:116rem;min-width:116rem;height:3rem;min-height:3rem}.lcars-u-15-2{width:116rem;min-width:116rem;height:6.25rem;min-height:6.25rem}.lcars-u-15-3{width:116rem;min-width:116rem;height:9.5rem;min-height:9.5rem}.lcars-u-15-4{width:116rem;min-width:116rem;height:12.75rem;min-height:12.75rem}.lcars-u-15-5{width:116rem;min-width:116rem;height:16rem;min-height:16rem}.lcars-u-15-6{width:116rem;min-width:116rem;height:19.25rem;min-height:19.25rem}.lcars-u-15-7{width:116rem;min-width:116rem;height:22.5rem;min-height:22.5rem}.lcars-u-15-8{width:116rem;min-width:116rem;height:25.75rem;min-height:25.75rem}.lcars-u-16-1{width:123.75rem;min-width:123.75rem;height:3rem;min-height:3rem}.lcars-u-16-2{width:123.75rem;min-width:123.75rem;height:6.25rem;min-height:6.25rem}.lcars-u-16-3{width:123.75rem;min-width:123.75rem;height:9.5rem;min-height:9.5rem}.lcars-u-16-4{width:123.75rem;min-width:123.75rem;height:12.75rem;min-height:12.75rem}.lcars-u-16-5{width:123.75rem;min-width:123.75rem;height:16rem;min-height:16rem}.lcars-u-16-6{width:123.75rem;min-width:123.75rem;height:19.25rem;min-height:19.25rem}.lcars-u-16-7{width:123.75rem;min-width:123.75rem;height:22.5rem;min-height:22.5rem}.lcars-u-16-8{width:123.75rem;min-width:123.75rem;height:25.75rem;min-height:25.75rem}.lcars-vu-1{height:3rem}.lcars-vu-2{height:6.25rem}.lcars-vu-3{height:9.5rem}.lcars-vu-4{height:12.75rem}.lcars-vu-5{height:16rem}.lcars-vu-6{height:19.25rem}.lcars-vu-7{height:22.5rem}.lcars-vu-8{height:25.75rem}.lcars-vu-9{height:29rem}.lcars-vu-10{height:32.25rem}.lcars-vu-11{height:35.5rem}.lcars-vu-12{height:38.75rem}.lcars-vu-13{height:42rem}.lcars-vu-14{height:45.25rem}.lcars-vu-15{height:48.5rem}.lcars-vu-16{height:51.75rem}.lcars-u-1{width:7.5rem}.lcars-u-1.half{width:3.625rem}.lcars-u-2{width:15.25rem}.lcars-u-2.half{width:11.375rem}.lcars-u-3{width:23rem}.lcars-u-3.half{width:19.125rem}.lcars-u-4{width:30.75rem}.lcars-u-4.half{width:26.875rem}.lcars-u-5{width:38.5rem}.lcars-u-5.half{width:34.625rem}.lcars-u-6{width:46.25rem}.lcars-u-6.half{width:42.375rem}.lcars-u-7{width:54rem}.lcars-u-7.half{width:50.125rem}.lcars-u-8{width:61.75rem}.lcars-u-8.half{width:57.875rem}.lcars-u-9{width:69.5rem}.lcars-u-9.half{width:65.625rem}.lcars-u-10{width:77.25rem}.lcars-u-10.half{width:73.375rem}.lcars-u-11{width:85rem}.lcars-u-11.half{width:81.125rem}.lcars-u-12{width:92.75rem}.lcars-u-12.half{width:88.875rem}.lcars-u-13{width:100.5rem}.lcars-u-13.half{width:96.625rem}.lcars-u-14{width:108.25rem}.lcars-u-14.half{width:104.375rem}.lcars-u-15{width:116rem}.lcars-u-15.half{width:112.125rem}.lcars-u-16{width:123.75rem}.lcars-u-16.half{width:119.875rem} \ No newline at end of file +.lcars-gray-bg.lcars-gray-bg{background-color:#234;fill:#234}.lcars-white-bg.lcars-white-bg{background-color:#fff;fill:#fff}.lcars-black-bg.lcars-black-bg{background-color:#000;fill:#000}.lcars-pale-canary-bg.lcars-pale-canary-bg{background-color:#ff9;fill:#ff9}.lcars-golden-tanoi-bg.lcars-golden-tanoi-bg{background-color:#fc6;fill:#fc6}.lcars-neon-carrot-bg.lcars-neon-carrot-bg{background-color:#f93;fill:#f93}.lcars-eggplant-bg.lcars-eggplant-bg{background-color:#646;fill:#646}.lcars-lilac-bg.lcars-lilac-bg{background-color:#c9c;fill:#c9c}.lcars-anakiwa-bg.lcars-anakiwa-bg{background-color:#9cf;fill:#9cf}.lcars-mariner-bg.lcars-mariner-bg{background-color:#36c;fill:#36c}.lcars-bahama-blue-bg.lcars-bahama-blue-bg{background-color:#069;fill:#069}.lcars-red-alert-bg.lcars-red-alert-bg{background-color:#e10;fill:#e10}.lcars-blue-bell-bg.lcars-blue-bell-bg{background-color:#99c;fill:#99c}.lcars-melrose-bg.lcars-melrose-bg{background-color:#99f;fill:#99f}.lcars-hopbush-bg.lcars-hopbush-bg{background-color:#c69;fill:#c69}.lcars-chestnut-rose-bg.lcars-chestnut-rose-bg{background-color:#c66;fill:#c66}.lcars-orange-peel-bg.lcars-orange-peel-bg{background-color:#f96;fill:#f96}.lcars-atomic-tangerine-bg.lcars-atomic-tangerine-bg{background-color:#f90;fill:#f90}.lcars-danub-bg.lcars-danub-bg{background-color:#68c;fill:#68c}.lcars-indigo-bg.lcars-indigo-bg{background-color:#45b;fill:#45b}.lcars-lavender-purple-bg.lcars-lavender-purple-bg{background-color:#97a;fill:#97a}.lcars-cosmic-bg.lcars-cosmic-bg{background-color:#746;fill:#746}.lcars-red-damask-bg.lcars-red-damask-bg{background-color:#d64;fill:#d64}.lcars-medium-carmine-bg.lcars-medium-carmine-bg{background-color:#a53;fill:#a53}.lcars-bourbon-bg.lcars-bourbon-bg{background-color:#b62;fill:#b62}.lcars-sandy-brown-bg.lcars-sandy-brown-bg{background-color:#e95;fill:#e95}.lcars-periwinkle-bg.lcars-periwinkle-bg{background-color:#cdf;fill:#cdf}.lcars-dodger-blue-bg.lcars-dodger-blue-bg{background-color:#59f;fill:#59f}.lcars-dodger-blue-alt-bg.lcars-dodger-blue-alt-bg{background-color:#36f;fill:#36f}.lcars-blue-bg.lcars-blue-bg{background-color:#01e;fill:#01e}.lcars-navy-blue-bg.lcars-navy-blue-bg{background-color:#008;fill:#008}.lcars-husk-bg.lcars-husk-bg{background-color:#ba5;fill:#ba5}.lcars-rust-bg.lcars-rust-bg{background-color:#b41;fill:#b41}.lcars-tamarillo-bg.lcars-tamarillo-bg{background-color:#821;fill:#821}.lcars-gray-border.lcars-gray-border{border-color:#234}.lcars-white-border.lcars-white-border{border-color:#fff}.lcars-black-border.lcars-black-border{border-color:#000}.lcars-pale-canary-border.lcars-pale-canary-border{border-color:#ff9}.lcars-golden-tanoi-border.lcars-golden-tanoi-border{border-color:#fc6}.lcars-neon-carrot-border.lcars-neon-carrot-border{border-color:#f93}.lcars-eggplant-border.lcars-eggplant-border{border-color:#646}.lcars-lilac-border.lcars-lilac-border{border-color:#c9c}.lcars-anakiwa-border.lcars-anakiwa-border{border-color:#9cf}.lcars-mariner-border.lcars-mariner-border{border-color:#36c}.lcars-bahama-blue-border.lcars-bahama-blue-border{border-color:#069}.lcars-red-alert-border.lcars-red-alert-border{border-color:#e10}.lcars-blue-bell-border.lcars-blue-bell-border{border-color:#99c}.lcars-melrose-border.lcars-melrose-border{border-color:#99f}.lcars-hopbush-border.lcars-hopbush-border{border-color:#c69}.lcars-chestnut-rose-border.lcars-chestnut-rose-border{border-color:#c66}.lcars-orange-peel-border.lcars-orange-peel-border{border-color:#f96}.lcars-atomic-tangerine-border.lcars-atomic-tangerine-border{border-color:#f90}.lcars-danub-border.lcars-danub-border{border-color:#68c}.lcars-indigo-border.lcars-indigo-border{border-color:#45b}.lcars-lavender-purple-border.lcars-lavender-purple-border{border-color:#97a}.lcars-cosmic-border.lcars-cosmic-border{border-color:#746}.lcars-red-damask-border.lcars-red-damask-border{border-color:#d64}.lcars-medium-carmine-border.lcars-medium-carmine-border{border-color:#a53}.lcars-bourbon-border.lcars-bourbon-border{border-color:#b62}.lcars-sandy-brown-border.lcars-sandy-brown-border{border-color:#e95}.lcars-periwinkle-border.lcars-periwinkle-border{border-color:#cdf}.lcars-dodger-blue-border.lcars-dodger-blue-border{border-color:#59f}.lcars-dodger-blue-alt-border.lcars-dodger-blue-alt-border{border-color:#36f}.lcars-blue-border.lcars-blue-border{border-color:#01e}.lcars-navy-blue-border.lcars-navy-blue-border{border-color:#008}.lcars-husk-border.lcars-husk-border{border-color:#ba5}.lcars-rust-border.lcars-rust-border{border-color:#b41}.lcars-tamarillo-border.lcars-tamarillo-border{border-color:#821}.lcars-gray-color.lcars-gray-color{color:#234}.lcars-white-color.lcars-white-color{color:#fff}.lcars-black-color.lcars-black-color{color:#000}.lcars-pale-canary-color.lcars-pale-canary-color{color:#ff9}.lcars-golden-tanoi-color.lcars-golden-tanoi-color{color:#fc6}.lcars-neon-carrot-color.lcars-neon-carrot-color{color:#f93}.lcars-eggplant-color.lcars-eggplant-color{color:#646}.lcars-lilac-color.lcars-lilac-color{color:#c9c}.lcars-anakiwa-color.lcars-anakiwa-color{color:#9cf}.lcars-mariner-color.lcars-mariner-color{color:#36c}.lcars-bahama-blue-color.lcars-bahama-blue-color{color:#069}.lcars-red-alert-color.lcars-red-alert-color{color:#e10}.lcars-blue-bell-color.lcars-blue-bell-color{color:#99c}.lcars-melrose-color.lcars-melrose-color{color:#99f}.lcars-hopbush-color.lcars-hopbush-color{color:#c69}.lcars-chestnut-rose-color.lcars-chestnut-rose-color{color:#c66}.lcars-orange-peel-color.lcars-orange-peel-color{color:#f96}.lcars-atomic-tangerine-color.lcars-atomic-tangerine-color{color:#f90}.lcars-danub-color.lcars-danub-color{color:#68c}.lcars-indigo-color.lcars-indigo-color{color:#45b}.lcars-lavender-purple-color.lcars-lavender-purple-color{color:#97a}.lcars-cosmic-color.lcars-cosmic-color{color:#746}.lcars-red-damask-color.lcars-red-damask-color{color:#d64}.lcars-medium-carmine-color.lcars-medium-carmine-color{color:#a53}.lcars-bourbon-color.lcars-bourbon-color{color:#b62}.lcars-sandy-brown-color.lcars-sandy-brown-color{color:#e95}.lcars-periwinkle-color.lcars-periwinkle-color{color:#cdf}.lcars-dodger-blue-color.lcars-dodger-blue-color{color:#59f}.lcars-dodger-blue-alt-color.lcars-dodger-blue-alt-color{color:#36f}.lcars-blue-color.lcars-blue-color{color:#01e}.lcars-navy-blue-color.lcars-navy-blue-color{color:#008}.lcars-husk-color.lcars-husk-color{color:#ba5}.lcars-rust-color.lcars-rust-color{color:#b41}.lcars-tamarillo-color.lcars-tamarillo-color{color:#821}body,html{font-family:arial,monospace;color:#fff}h1{font-size:270%;font-weight:700}h2{font-size:240%;font-weight:700}h3{font-size:200%;font-weight:700}h4{font-size:180%;font-weight:700}h5{font-size:160%;font-weight:700}h6{font-size:140%;font-weight:700}.lcars-app-container{display:flex;width:calc(100% - 1rem);height:calc(100% - 1rem);overflow:hidden;margin:.5rem}.lcars-app-container #left-menu{position:fixed;padding-top:4.5rem;height:100%;left:.5rem}.lcars-app-container #header{position:fixed;background-color:#000;width:calc(100% - 1rem);top:0;left:.5rem;padding-top:.5rem;margin-bottom:.25rem;z-index:1}.lcars-app-container #footer{position:fixed;background-color:#000;bottom:0;left:.5rem;padding-bottom:.5rem;width:calc(100% - 1rem);z-index:1}.lcars-app-container #container{margin-top:.25rem;margin-left:.25rem;padding-left:9.5rem;padding-top:4.5rem;padding-bottom:4.5rem;width:100%;height:100%;overflow:auto}.lcars-row{display:inline-flex;flex-direction:row;width:100%}.lcars-row.fill{flex:1}.lcars-row.centered{justify-content:center}.lcars-row.full-centered{justify-content:center;align-items:center}.lcars-row.right{justify-content:flex-end}.lcars-row.right-centered{justify-content:flex-end;align-items:center}.lcars-row.right-bottom{justify-content:flex-end;align-items:flex-end}.lcars-row :last-child{margin-right:0}.lcars-row>*{margin-right:.25rem}.lcars-column{display:inline-flex;flex-direction:column}.lcars-column.fill{flex:1}.lcars-column.centered{justify-content:center}.lcars-column.full-centered{justify-content:center;align-items:center}.lcars-column.centered-right{justify-content:center;align-items:flex-end}.lcars-column.bottom{justify-content:flex-end}.lcars-column.bottom-centered{justify-content:flex-end;align-items:center}.lcars-column :last-child{margin-bottom:0}.lcars-column>*{margin-bottom:.25rem}.lcars-column.left-menu{padding-right:2rem}.lcars-column.right-menu{padding-left:2rem}.lcars-column.start-space{margin-top:.25rem}.lcars-elbow{position:relative;width:9.5rem;min-width:9.5rem;height:4.5rem;min-height:4.5rem;background:#fc6;margin:0}.lcars-elbow a{display:inline-block;position:absolute;color:#000;bottom:0;padding:.25rem}.lcars-elbow:after{content:'';display:block;position:absolute;width:2rem;height:3rem;background:#000}.lcars-elbow.left-bottom{border-top-left-radius:3.75rem}.lcars-elbow.left-bottom a{right:2.25rem}.lcars-elbow.left-bottom:after{right:0;top:1.5rem;border-top-left-radius:1.875rem}.lcars-elbow.left-top{border-bottom-left-radius:3.75rem}.lcars-elbow.left-top a{top:0;right:2.25rem}.lcars-elbow.left-top:after{right:0;bottom:1.5rem;border-bottom-left-radius:3.75rem}.lcars-elbow.right-bottom{border-top-right-radius:3.75rem}.lcars-elbow.right-bottom:after{top:1.5rem;border-top-right-radius:1.875rem}.lcars-elbow.right-bottom a{left:2.25rem}.lcars-elbow.right-top{border-bottom-right-radius:3.75rem}.lcars-elbow.right-top a{display:inline-block;top:0;left:2.25rem}.lcars-elbow.right-top:after{bottom:1.5rem;border-bottom-right-radius:1.875rem}.lcars-bar{position:relative;color:#000;height:100%;width:100%;margin:0;display:inline-block;background-color:#fc6}.lcars-bar:after{content:'';display:block;position:absolute;background:#000}.lcars-bar.spacer{margin:0;padding:0;background-color:transparent;width:.25rem;min-width:.25rem;height:.25rem;min-height:.25rem}.lcars-bar.double-spacer{background-color:transparent;width:.5rem;min-width:.5rem;height:.5rem;min-height:.5rem}.lcars-bar.left-space{margin-left:.25rem}.lcars-bar.left-double-space{margin-left:.5rem}.lcars-bar.right-space{margin-right:.25rem}.lcars-bar.right-double-space{margin-right:.5rem}.lcars-bar.horizontal{height:1.5rem}.lcars-bar.left-end{width:1.5rem;max-width:1.5rem;min-width:1.5rem;border-top-left-radius:.75rem;border-bottom-left-radius:.75rem}.lcars-bar.left-end.decorated:after{right:.25rem;width:.25rem;height:100%;background-color:#000}.lcars-bar.right-end{width:1.5rem;max-width:1.5rem;min-width:1.5rem;border-top-right-radius:.75rem;border-bottom-right-radius:.75rem}.lcars-bar.right-end.decorated:after{left:.25rem;width:.25rem;height:100%;background-color:#000}.lcars-bar.fill{flex:1}.lcars-bar.bottom{align-self:flex-end}.lcars-bar .lcars-title{color:#fff;background-color:#000;text-transform:uppercase;margin:0 0 0 .833333333333335rem;padding-left:.166666666666667rem;padding-right:.166666666666667rem;padding-bottom:.166666666666667rem;display:inline-block;font-size:150%;height:100%}.lcars-bar .lcars-title.right{float:right;margin-right:.833333333333335rem}.lcars-element{position:relative;font-weight:700;color:#000;text-align:right;background:#fc6;height:3rem;width:7.5rem;box-sizing:border-box;padding-left:.75rem;padding-right:.75rem;display:inline-flex;flex-direction:row;justify-content:flex-end;align-items:flex-end}.lcars-element *{margin:0}.lcars-element.left-rounded{border-top-left-radius:1.5rem;border-bottom-left-radius:1.5rem;padding-left:1.5rem}.lcars-element.right-rounded{border-top-right-radius:1.5rem;border-bottom-right-radius:1.5rem;padding-right:1.5rem}.lcars-element.rounded{border-radius:1.5rem;padding-left:1.5rem;padding-right:1.5rem}.lcars-element.button{cursor:pointer}.lcars-element.button.button:active{background-color:#c69}.lcars-element .lcars-element-addition{display:flex;flex-direction:column;justify-content:flex-end;height:100%;background-color:#000;color:#fff;font-size:2.000000000000001rem;margin-left:.25rem;padding-left:.25rem;padding-right:.25rem}.lcars-element .lcars-element-decorator{display:inline-block;position:absolute;top:0;width:2rem;left:-2.25rem;height:100%;background-color:#fc6;border-top-left-radius:1.5rem;border-bottom-left-radius:1.5rem}.lcars-element .lcars-element-decorator:after{content:'';display:block;position:absolute;right:.25rem;width:.25rem;height:100%;background-color:#000}.lcars-element .lcars-element-decorator.right{right:-2.25rem;left:unset;border-radius:0 1.5rem 1.5rem 0}.lcars-element .lcars-element-decorator.right:after{left:.25rem;right:unset}path.button:active{fill:#c69}.lcars-text-box,a.lcars-text-box{background-color:#000;color:#fff;font-weight:700;width:7.5rem;height:3rem;padding-left:.25rem;padding-right:.25rem;box-sizing:border-box;display:inline-flex;flex-direction:row}.lcars-text-box.big,a.lcars-text-box.big{font-size:150%}.lcars-text-box.large,a.lcars-text-box.large{font-size:200%}.lcars-text-box.huge,a.lcars-text-box.huge{font-size:400%;height:6rem}.lcars-text-box.centered,a.lcars-text-box.centered{justify-content:center}.lcars-text-box.right,a.lcars-text-box.right{justify-content:flex-end}.lcars-text-box.full-centered,a.lcars-text-box.full-centered{justify-content:center;align-items:center}.lcars-text-box.centered-right,a.lcars-text-box.centered-right{justify-content:flex-end;align-items:center}.lcars-text-box.bottom,a.lcars-text-box.bottom{align-items:flex-end}.lcars-text-box.bottom-centered,a.lcars-text-box.bottom-centered{justify-content:center;align-items:flex-end}.lcars-text-box.bottom-right,a.lcars-text-box.bottom-right{justify-content:flex-end;align-items:flex-end}.lcars-text-box.blink,a.lcars-text-box.blink{animation:blinker 1s linear infinite}@-moz-keyframes blinker{50%{opacity:.4}}@-webkit-keyframes blinker{50%{opacity:.4}}@-o-keyframes blinker{50%{opacity:.4}}@keyframes blinker{50%{opacity:.4}}.lcars-bracket{background-color:#fc6}.lcars-bracket.left{width:1.5rem;border-top-left-radius:1.5rem;border-bottom-left-radius:1.5rem;border-width:.75rem 0 .75rem .25rem}.lcars-bracket.right{width:1.5rem;border-top-right-radius:1.5rem;border-bottom-right-radius:1.5rem;border-width:.75rem .25rem .75rem 0}.lcars-bracket.top{height:1.5rem;border-top-left-radius:1.5rem;border-top-right-radius:1.5rem;border-width:.25rem .75rem 0}.lcars-bracket.bottom{height:1.5rem;border-bottom-left-radius:1.5rem;border-bottom-right-radius:1.5rem;border-width:0 .75rem .25rem}.lcars-bracket.hollow{background-color:#000;border-style:solid;border-color:#fc6}.lcars-u-1-1{width:7.5rem;min-width:7.5rem;height:3rem;min-height:3rem}.lcars-u-1-2{width:7.5rem;min-width:7.5rem;height:6.25rem;min-height:6.25rem}.lcars-u-1-3{width:7.5rem;min-width:7.5rem;height:9.5rem;min-height:9.5rem}.lcars-u-1-4{width:7.5rem;min-width:7.5rem;height:12.75rem;min-height:12.75rem}.lcars-u-1-5{width:7.5rem;min-width:7.5rem;height:16rem;min-height:16rem}.lcars-u-1-6{width:7.5rem;min-width:7.5rem;height:19.25rem;min-height:19.25rem}.lcars-u-1-7{width:7.5rem;min-width:7.5rem;height:22.5rem;min-height:22.5rem}.lcars-u-1-8{width:7.5rem;min-width:7.5rem;height:25.75rem;min-height:25.75rem}.lcars-u-2-1{width:15.25rem;min-width:15.25rem;height:3rem;min-height:3rem}.lcars-u-2-2{width:15.25rem;min-width:15.25rem;height:6.25rem;min-height:6.25rem}.lcars-u-2-3{width:15.25rem;min-width:15.25rem;height:9.5rem;min-height:9.5rem}.lcars-u-2-4{width:15.25rem;min-width:15.25rem;height:12.75rem;min-height:12.75rem}.lcars-u-2-5{width:15.25rem;min-width:15.25rem;height:16rem;min-height:16rem}.lcars-u-2-6{width:15.25rem;min-width:15.25rem;height:19.25rem;min-height:19.25rem}.lcars-u-2-7{width:15.25rem;min-width:15.25rem;height:22.5rem;min-height:22.5rem}.lcars-u-2-8{width:15.25rem;min-width:15.25rem;height:25.75rem;min-height:25.75rem}.lcars-u-3-1{width:23rem;min-width:23rem;height:3rem;min-height:3rem}.lcars-u-3-2{width:23rem;min-width:23rem;height:6.25rem;min-height:6.25rem}.lcars-u-3-3{width:23rem;min-width:23rem;height:9.5rem;min-height:9.5rem}.lcars-u-3-4{width:23rem;min-width:23rem;height:12.75rem;min-height:12.75rem}.lcars-u-3-5{width:23rem;min-width:23rem;height:16rem;min-height:16rem}.lcars-u-3-6{width:23rem;min-width:23rem;height:19.25rem;min-height:19.25rem}.lcars-u-3-7{width:23rem;min-width:23rem;height:22.5rem;min-height:22.5rem}.lcars-u-3-8{width:23rem;min-width:23rem;height:25.75rem;min-height:25.75rem}.lcars-u-4-1{width:30.75rem;min-width:30.75rem;height:3rem;min-height:3rem}.lcars-u-4-2{width:30.75rem;min-width:30.75rem;height:6.25rem;min-height:6.25rem}.lcars-u-4-3{width:30.75rem;min-width:30.75rem;height:9.5rem;min-height:9.5rem}.lcars-u-4-4{width:30.75rem;min-width:30.75rem;height:12.75rem;min-height:12.75rem}.lcars-u-4-5{width:30.75rem;min-width:30.75rem;height:16rem;min-height:16rem}.lcars-u-4-6{width:30.75rem;min-width:30.75rem;height:19.25rem;min-height:19.25rem}.lcars-u-4-7{width:30.75rem;min-width:30.75rem;height:22.5rem;min-height:22.5rem}.lcars-u-4-8{width:30.75rem;min-width:30.75rem;height:25.75rem;min-height:25.75rem}.lcars-u-5-1{width:38.5rem;min-width:38.5rem;height:3rem;min-height:3rem}.lcars-u-5-2{width:38.5rem;min-width:38.5rem;height:6.25rem;min-height:6.25rem}.lcars-u-5-3{width:38.5rem;min-width:38.5rem;height:9.5rem;min-height:9.5rem}.lcars-u-5-4{width:38.5rem;min-width:38.5rem;height:12.75rem;min-height:12.75rem}.lcars-u-5-5{width:38.5rem;min-width:38.5rem;height:16rem;min-height:16rem}.lcars-u-5-6{width:38.5rem;min-width:38.5rem;height:19.25rem;min-height:19.25rem}.lcars-u-5-7{width:38.5rem;min-width:38.5rem;height:22.5rem;min-height:22.5rem}.lcars-u-5-8{width:38.5rem;min-width:38.5rem;height:25.75rem;min-height:25.75rem}.lcars-u-6-1{width:46.25rem;min-width:46.25rem;height:3rem;min-height:3rem}.lcars-u-6-2{width:46.25rem;min-width:46.25rem;height:6.25rem;min-height:6.25rem}.lcars-u-6-3{width:46.25rem;min-width:46.25rem;height:9.5rem;min-height:9.5rem}.lcars-u-6-4{width:46.25rem;min-width:46.25rem;height:12.75rem;min-height:12.75rem}.lcars-u-6-5{width:46.25rem;min-width:46.25rem;height:16rem;min-height:16rem}.lcars-u-6-6{width:46.25rem;min-width:46.25rem;height:19.25rem;min-height:19.25rem}.lcars-u-6-7{width:46.25rem;min-width:46.25rem;height:22.5rem;min-height:22.5rem}.lcars-u-6-8{width:46.25rem;min-width:46.25rem;height:25.75rem;min-height:25.75rem}.lcars-u-7-1{width:54rem;min-width:54rem;height:3rem;min-height:3rem}.lcars-u-7-2{width:54rem;min-width:54rem;height:6.25rem;min-height:6.25rem}.lcars-u-7-3{width:54rem;min-width:54rem;height:9.5rem;min-height:9.5rem}.lcars-u-7-4{width:54rem;min-width:54rem;height:12.75rem;min-height:12.75rem}.lcars-u-7-5{width:54rem;min-width:54rem;height:16rem;min-height:16rem}.lcars-u-7-6{width:54rem;min-width:54rem;height:19.25rem;min-height:19.25rem}.lcars-u-7-7{width:54rem;min-width:54rem;height:22.5rem;min-height:22.5rem}.lcars-u-7-8{width:54rem;min-width:54rem;height:25.75rem;min-height:25.75rem}.lcars-u-8-1{width:61.75rem;min-width:61.75rem;height:3rem;min-height:3rem}.lcars-u-8-2{width:61.75rem;min-width:61.75rem;height:6.25rem;min-height:6.25rem}.lcars-u-8-3{width:61.75rem;min-width:61.75rem;height:9.5rem;min-height:9.5rem}.lcars-u-8-4{width:61.75rem;min-width:61.75rem;height:12.75rem;min-height:12.75rem}.lcars-u-8-5{width:61.75rem;min-width:61.75rem;height:16rem;min-height:16rem}.lcars-u-8-6{width:61.75rem;min-width:61.75rem;height:19.25rem;min-height:19.25rem}.lcars-u-8-7{width:61.75rem;min-width:61.75rem;height:22.5rem;min-height:22.5rem}.lcars-u-8-8{width:61.75rem;min-width:61.75rem;height:25.75rem;min-height:25.75rem}.lcars-u-9-1{width:69.5rem;min-width:69.5rem;height:3rem;min-height:3rem}.lcars-u-9-2{width:69.5rem;min-width:69.5rem;height:6.25rem;min-height:6.25rem}.lcars-u-9-3{width:69.5rem;min-width:69.5rem;height:9.5rem;min-height:9.5rem}.lcars-u-9-4{width:69.5rem;min-width:69.5rem;height:12.75rem;min-height:12.75rem}.lcars-u-9-5{width:69.5rem;min-width:69.5rem;height:16rem;min-height:16rem}.lcars-u-9-6{width:69.5rem;min-width:69.5rem;height:19.25rem;min-height:19.25rem}.lcars-u-9-7{width:69.5rem;min-width:69.5rem;height:22.5rem;min-height:22.5rem}.lcars-u-9-8{width:69.5rem;min-width:69.5rem;height:25.75rem;min-height:25.75rem}.lcars-u-10-1{width:77.25rem;min-width:77.25rem;height:3rem;min-height:3rem}.lcars-u-10-2{width:77.25rem;min-width:77.25rem;height:6.25rem;min-height:6.25rem}.lcars-u-10-3{width:77.25rem;min-width:77.25rem;height:9.5rem;min-height:9.5rem}.lcars-u-10-4{width:77.25rem;min-width:77.25rem;height:12.75rem;min-height:12.75rem}.lcars-u-10-5{width:77.25rem;min-width:77.25rem;height:16rem;min-height:16rem}.lcars-u-10-6{width:77.25rem;min-width:77.25rem;height:19.25rem;min-height:19.25rem}.lcars-u-10-7{width:77.25rem;min-width:77.25rem;height:22.5rem;min-height:22.5rem}.lcars-u-10-8{width:77.25rem;min-width:77.25rem;height:25.75rem;min-height:25.75rem}.lcars-u-11-1{width:85rem;min-width:85rem;height:3rem;min-height:3rem}.lcars-u-11-2{width:85rem;min-width:85rem;height:6.25rem;min-height:6.25rem}.lcars-u-11-3{width:85rem;min-width:85rem;height:9.5rem;min-height:9.5rem}.lcars-u-11-4{width:85rem;min-width:85rem;height:12.75rem;min-height:12.75rem}.lcars-u-11-5{width:85rem;min-width:85rem;height:16rem;min-height:16rem}.lcars-u-11-6{width:85rem;min-width:85rem;height:19.25rem;min-height:19.25rem}.lcars-u-11-7{width:85rem;min-width:85rem;height:22.5rem;min-height:22.5rem}.lcars-u-11-8{width:85rem;min-width:85rem;height:25.75rem;min-height:25.75rem}.lcars-u-12-1{width:92.75rem;min-width:92.75rem;height:3rem;min-height:3rem}.lcars-u-12-2{width:92.75rem;min-width:92.75rem;height:6.25rem;min-height:6.25rem}.lcars-u-12-3{width:92.75rem;min-width:92.75rem;height:9.5rem;min-height:9.5rem}.lcars-u-12-4{width:92.75rem;min-width:92.75rem;height:12.75rem;min-height:12.75rem}.lcars-u-12-5{width:92.75rem;min-width:92.75rem;height:16rem;min-height:16rem}.lcars-u-12-6{width:92.75rem;min-width:92.75rem;height:19.25rem;min-height:19.25rem}.lcars-u-12-7{width:92.75rem;min-width:92.75rem;height:22.5rem;min-height:22.5rem}.lcars-u-12-8{width:92.75rem;min-width:92.75rem;height:25.75rem;min-height:25.75rem}.lcars-u-13-1{width:100.5rem;min-width:100.5rem;height:3rem;min-height:3rem}.lcars-u-13-2{width:100.5rem;min-width:100.5rem;height:6.25rem;min-height:6.25rem}.lcars-u-13-3{width:100.5rem;min-width:100.5rem;height:9.5rem;min-height:9.5rem}.lcars-u-13-4{width:100.5rem;min-width:100.5rem;height:12.75rem;min-height:12.75rem}.lcars-u-13-5{width:100.5rem;min-width:100.5rem;height:16rem;min-height:16rem}.lcars-u-13-6{width:100.5rem;min-width:100.5rem;height:19.25rem;min-height:19.25rem}.lcars-u-13-7{width:100.5rem;min-width:100.5rem;height:22.5rem;min-height:22.5rem}.lcars-u-13-8{width:100.5rem;min-width:100.5rem;height:25.75rem;min-height:25.75rem}.lcars-u-14-1{width:108.25rem;min-width:108.25rem;height:3rem;min-height:3rem}.lcars-u-14-2{width:108.25rem;min-width:108.25rem;height:6.25rem;min-height:6.25rem}.lcars-u-14-3{width:108.25rem;min-width:108.25rem;height:9.5rem;min-height:9.5rem}.lcars-u-14-4{width:108.25rem;min-width:108.25rem;height:12.75rem;min-height:12.75rem}.lcars-u-14-5{width:108.25rem;min-width:108.25rem;height:16rem;min-height:16rem}.lcars-u-14-6{width:108.25rem;min-width:108.25rem;height:19.25rem;min-height:19.25rem}.lcars-u-14-7{width:108.25rem;min-width:108.25rem;height:22.5rem;min-height:22.5rem}.lcars-u-14-8{width:108.25rem;min-width:108.25rem;height:25.75rem;min-height:25.75rem}.lcars-u-15-1{width:116rem;min-width:116rem;height:3rem;min-height:3rem}.lcars-u-15-2{width:116rem;min-width:116rem;height:6.25rem;min-height:6.25rem}.lcars-u-15-3{width:116rem;min-width:116rem;height:9.5rem;min-height:9.5rem}.lcars-u-15-4{width:116rem;min-width:116rem;height:12.75rem;min-height:12.75rem}.lcars-u-15-5{width:116rem;min-width:116rem;height:16rem;min-height:16rem}.lcars-u-15-6{width:116rem;min-width:116rem;height:19.25rem;min-height:19.25rem}.lcars-u-15-7{width:116rem;min-width:116rem;height:22.5rem;min-height:22.5rem}.lcars-u-15-8{width:116rem;min-width:116rem;height:25.75rem;min-height:25.75rem}.lcars-u-16-1{width:123.75rem;min-width:123.75rem;height:3rem;min-height:3rem}.lcars-u-16-2{width:123.75rem;min-width:123.75rem;height:6.25rem;min-height:6.25rem}.lcars-u-16-3{width:123.75rem;min-width:123.75rem;height:9.5rem;min-height:9.5rem}.lcars-u-16-4{width:123.75rem;min-width:123.75rem;height:12.75rem;min-height:12.75rem}.lcars-u-16-5{width:123.75rem;min-width:123.75rem;height:16rem;min-height:16rem}.lcars-u-16-6{width:123.75rem;min-width:123.75rem;height:19.25rem;min-height:19.25rem}.lcars-u-16-7{width:123.75rem;min-width:123.75rem;height:22.5rem;min-height:22.5rem}.lcars-u-16-8{width:123.75rem;min-width:123.75rem;height:25.75rem;min-height:25.75rem}.lcars-vu-1{height:3rem}.lcars-vu-2{height:6.25rem}.lcars-vu-3{height:9.5rem}.lcars-vu-4{height:12.75rem}.lcars-vu-5{height:16rem}.lcars-vu-6{height:19.25rem}.lcars-vu-7{height:22.5rem}.lcars-vu-8{height:25.75rem}.lcars-vu-9{height:29rem}.lcars-vu-10{height:32.25rem}.lcars-vu-11{height:35.5rem}.lcars-vu-12{height:38.75rem}.lcars-vu-13{height:42rem}.lcars-vu-14{height:45.25rem}.lcars-vu-15{height:48.5rem}.lcars-vu-16{height:51.75rem}.lcars-u-1{width:7.5rem}.lcars-u-1.half{width:3.625rem}.lcars-u-2{width:15.25rem}.lcars-u-2.half{width:11.375rem}.lcars-u-3{width:23rem}.lcars-u-3.half{width:19.125rem}.lcars-u-4{width:30.75rem}.lcars-u-4.half{width:26.875rem}.lcars-u-5{width:38.5rem}.lcars-u-5.half{width:34.625rem}.lcars-u-6{width:46.25rem}.lcars-u-6.half{width:42.375rem}.lcars-u-7{width:54rem}.lcars-u-7.half{width:50.125rem}.lcars-u-8{width:61.75rem}.lcars-u-8.half{width:57.875rem}.lcars-u-9{width:69.5rem}.lcars-u-9.half{width:65.625rem}.lcars-u-10{width:77.25rem}.lcars-u-10.half{width:73.375rem}.lcars-u-11{width:85rem}.lcars-u-11.half{width:81.125rem}.lcars-u-12{width:92.75rem}.lcars-u-12.half{width:88.875rem}.lcars-u-13{width:100.5rem}.lcars-u-13.half{width:96.625rem}.lcars-u-14{width:108.25rem}.lcars-u-14.half{width:104.375rem}.lcars-u-15{width:116rem}.lcars-u-15.half{width:112.125rem}.lcars-u-16{width:123.75rem}.lcars-u-16.half{width:119.875rem}a{text-decoration:none;display:inline}a:link,a:visited{color:#fc6;font-weight:400}a:focus{color:#fc6;background-color:#080602;font-weight:400}a:hover{color:#fc6;background-color:#090703;font-weight:400}a:active{color:#ff9;font-weight:500;background-color:#0c0806} \ No newline at end of file diff --git a/css/lcars.svg.colors.fragment.css b/css/lcars.svg.colors.fragment.css new file mode 100644 index 0000000..3f08bfe --- /dev/null +++ b/css/lcars.svg.colors.fragment.css @@ -0,0 +1,99 @@ +.lcars-gray-bg { + fill: rgba(34,51,85,0.467); +} +.lcars-white-bg { + fill: #fff; +} +.lcars-black-bg { + fill: #000; +} +.lcars-pale-canary-bg { + fill: #ff9; +} +.lcars-golden-tanoi-bg { + fill: #fc6; +} +.lcars-neon-carrot-bg { + fill: #f93; +} +.lcars-eggplant-bg { + fill: #646; +} +.lcars-lilac-bg { + fill: #c9c; +} +.lcars-anakiwa-bg { + fill: #9cf; +} +.lcars-mariner-bg { + fill: #36c; +} +.lcars-bahama-blue-bg { + fill: #069; +} +.lcars-blue-bell-bg { + fill: #99c; +} +.lcars-melrose-bg { + fill: #99f; +} +.lcars-hopbush-bg { + fill: #c69; +} +.lcars-chestnut-rose-bg { + fill: #c66; +} +.lcars-orange-peel-bg { + fill: #f96; +} +.lcars-atomic-tangerine-bg { + fill: #f90; +} +.lcars-danub-bg { + fill: #68c; +} +.lcars-indigo-bg { + fill: #45b; +} +.lcars-lavender-purple-bg { + fill: #97a; +} +.lcars-cosmic-bg { + fill: #746; +} +.lcars-red-damask-bg { + fill: #d64; +} +.lcars-medium-carmine-bg { + fill: #a53; +} +.lcars-bourbon-bg { + fill: #b62; +} +.lcars-sandy-brown-bg { + fill: #e95; +} +.lcars-periwinkle-bg { + fill: #cdf; +} +.lcars-dodger-blue-bg { + fill: #59f; +} +.lcars-dodger-blue-alt-bg { + fill: #36f; +} +.lcars-blue-bg { + fill: #01e; +} +.lcars-navy-blue-bg { + fill: #008; +} +.lcars-husk-bg { + fill: #ba5; +} +.lcars-rust-bg { + fill: #b41; +} +.lcars-tamarillo-bg { + fill: #821; +} diff --git a/css/svg_colors_fragment.css b/css/svg_colors_fragment.css new file mode 100644 index 0000000..3f08bfe --- /dev/null +++ b/css/svg_colors_fragment.css @@ -0,0 +1,99 @@ +.lcars-gray-bg { + fill: rgba(34,51,85,0.467); +} +.lcars-white-bg { + fill: #fff; +} +.lcars-black-bg { + fill: #000; +} +.lcars-pale-canary-bg { + fill: #ff9; +} +.lcars-golden-tanoi-bg { + fill: #fc6; +} +.lcars-neon-carrot-bg { + fill: #f93; +} +.lcars-eggplant-bg { + fill: #646; +} +.lcars-lilac-bg { + fill: #c9c; +} +.lcars-anakiwa-bg { + fill: #9cf; +} +.lcars-mariner-bg { + fill: #36c; +} +.lcars-bahama-blue-bg { + fill: #069; +} +.lcars-blue-bell-bg { + fill: #99c; +} +.lcars-melrose-bg { + fill: #99f; +} +.lcars-hopbush-bg { + fill: #c69; +} +.lcars-chestnut-rose-bg { + fill: #c66; +} +.lcars-orange-peel-bg { + fill: #f96; +} +.lcars-atomic-tangerine-bg { + fill: #f90; +} +.lcars-danub-bg { + fill: #68c; +} +.lcars-indigo-bg { + fill: #45b; +} +.lcars-lavender-purple-bg { + fill: #97a; +} +.lcars-cosmic-bg { + fill: #746; +} +.lcars-red-damask-bg { + fill: #d64; +} +.lcars-medium-carmine-bg { + fill: #a53; +} +.lcars-bourbon-bg { + fill: #b62; +} +.lcars-sandy-brown-bg { + fill: #e95; +} +.lcars-periwinkle-bg { + fill: #cdf; +} +.lcars-dodger-blue-bg { + fill: #59f; +} +.lcars-dodger-blue-alt-bg { + fill: #36f; +} +.lcars-blue-bg { + fill: #01e; +} +.lcars-navy-blue-bg { + fill: #008; +} +.lcars-husk-bg { + fill: #ba5; +} +.lcars-rust-bg { + fill: #b41; +} +.lcars-tamarillo-bg { + fill: #821; +} diff --git a/img/Elbow1.png b/img/Elbow1.png new file mode 100644 index 0000000..a44e0c2 Binary files /dev/null and b/img/Elbow1.png differ diff --git a/img/alt_lcars_rectangular_array.svg b/img/alt_lcars_rectangular_array.svg new file mode 100644 index 0000000..81ae7a1 --- /dev/null +++ b/img/alt_lcars_rectangular_array.svg @@ -0,0 +1,154 @@ + + + + + + + lcars_rectangular_array_ctl + + + + image/svg+xml + + lcars_rectangular_array_ctl + + + + + + + + + + + + + + + + + + + + + diff --git a/img/lcars_rectangular_array_optimized.svg b/img/lcars_rectangular_array_optimized.svg new file mode 100644 index 0000000..06de377 --- /dev/null +++ b/img/lcars_rectangular_array_optimized.svg @@ -0,0 +1,33 @@ + + + + lcars_rectangular_array_ctl + + + + image/svg+xml + + lcars_rectangular_array_ctl + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/lcars_xy_circle_widget_optimized.svg b/img/lcars_xy_circle_widget_optimized.svg new file mode 100644 index 0000000..fb62daf --- /dev/null +++ b/img/lcars_xy_circle_widget_optimized.svg @@ -0,0 +1,33 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/lcars_xy_circle_widget_optimized_and_classes.svg b/img/lcars_xy_circle_widget_optimized_and_classes.svg new file mode 100644 index 0000000..31a870e --- /dev/null +++ b/img/lcars_xy_circle_widget_optimized_and_classes.svg @@ -0,0 +1,136 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/img/lcars_xy_circle_widget_semi_optimized_id.svg b/img/lcars_xy_circle_widget_semi_optimized_id.svg new file mode 100644 index 0000000..8279c1a --- /dev/null +++ b/img/lcars_xy_circle_widget_semi_optimized_id.svg @@ -0,0 +1,31 @@ + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/index.html b/index.html index 7417043..f0762c8 100644 --- a/index.html +++ b/index.html @@ -6,16 +6,17 @@ @@ -64,9 +65,10 @@

LCARS

- LCARS is a CCS framework like Bootstrap to create user interfaces similiar as in a popular sci-fi franchise. Enjoy! + LCARS is a CSS framework like Bootstrap to create user interfaces similiar as in a popular sci-fi franchise. Enjoy!

+

Layout

@@ -130,10 +132,11 @@

Colors

golden-tanoi
neon-carrot
eggplant
-
lilac
anakiwa
mariner
bahama-blue
+
red-alert
+
white
@@ -144,7 +147,7 @@

Colors

chestnut-rose
orange-peel
atomic-tangerine
-
pale-canary
+
gray
@@ -171,6 +174,18 @@

Colors

+ + +

Hyperlinks

+ + Class: 
:link :hover :focus :active :visited
(but note that these are pseudo-classes, automatically applied by the web browser) +

+ Hyperlinks are highlighted with an energetic color, and not bluish. + Hyperlinks without an href attribute are a little different: they will highlight only when you hover. + Emphasis but subtlety. +

+ +

Bar

@@ -242,7 +257,7 @@

Element

  • left-rounded
    : rounds the left edge
  • right-rounded
    : rounds the right edge
  • rounded
    : rounds the all edges
    • - 
  • button
    : Add button behaviour
    • + 
  • button
    : Add button behaviour. Optionally can include automatic Audible effect.

    • @@ -318,9 +333,9 @@

    Example

    left-top
    -
    +
    -
    +

    @@ -333,9 +348,9 @@

    Example

    left-bottom
    -
    +
    -
    +

    @@ -392,10 +407,337 @@

    Example

    + +

    Audio

    + + Class: 
    button
     +

    + The button class will also automatically receive a sound-effect event if you include the following at the bottom of the page: +

    + 
    +  <audio id="audDummy"/><!--Just leave this here, just needed to enable automatic query canplay in the initialization code to load compatible media types -->
+  <script src="js/lcars_audio.js"></script>
+
    +

    +

    + To arbitrarily assign sound effects, use your preferred element selector method and call these simple functions from the lcarsAudio javascript module as the callback event handler: + 

    +  lcarsAudio.TactileInputAcknowledge();
+  lcarsAudio.TactileInputNegativeAcknowledge();
+  lcarsAudio.Alert();
+
    + For quick and dirty specific assignments, you can also just assign the funcation call directly to the onClick attribute of any html element like so: + 
    +  <dev id="special_button" onclick="lcarsAduio.TactileInputAcknowledge();">SP BTN</div>
+
    + +

    Example

    +

    + By onclick attribute: +

    SP BTN
    +
    INACTV
    +

    +

    + And again, by CSS class instead: +

    SP BTN
    +
    DISABLD
    +

    + +

    +

    + LCARS clearly has a "grammar" for the audio signals. + As with any fictional canon, there will be contradictions, gaps, and incorrect assumptions on the part of amateurs. + Hopefully users will find the audio framework easily modifiable to suit, but also fairly usable as is. +

    +

    + A couple of simple place-holder sound effects are included for demonstration purposes, + but to gain the full benefit of an authentic sounding LCARS interface, + audio samples that match each of the semantic descriptions could be downloaded from elsewhere + on the web (STdimension media library is an excellent resource) + and renamed to match the Audio Filename Base column shown below, + then transcoded to other audio file formats to provide mult-platform support + (i.e., the major browser vendors do not all agree on what audio file formats should be supported by web browsers, but html5 standards provide fall-back mechanisms to help overcome this). + A trinity of m4a/aac, ogg/vorbis, and webm seems to give excellent platform coverage and should be handled by ffmpeg nicely. +

    +

    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    JS lcarsAudio Module Play Function Element Subclass Audio Filename Base Semantic Description
    TactileInputAcknowledge()lcars-tactinput-acknowledge-audio (or button)tactinput_acknowledgeSmallest unit of input acknowledgement, a single "keypress" received and understood. the Basic Button Beep.
    TactileInputAlternateAcknowledge()lcars-tactinput-alt-acknowledge-audiotactinput_alt_acknowledgeInput "punctuation", delimitation, or compositing/packaging of input acknowledgement. Perhaps analagous to the "hitting the enter key". Basic Button Beep 2, alternate (lower) tone.
    TactileInputNegativeAcknowledge()lcars-tactinput-neg-acknowledge-audiotactinput_neg_acknowledgeKeypress failure/low-level access denied/nonresponse. The antithesis to Ack.
    Alert()lcars-alert-audioalertHard failure/access denied/warning level 1. Distinct from RedAlert.
    RedAlert()lcars-red-alert-audiored_alertEmergency condition, highest level of alert.
    Ready()lcars-ready-audioreadyInterface initialized, ready for input from user.
    + +

    + +

    SVG Special Elements

    + +

    + Some particularly complex geometry such as the classic circular x/y control can be more easily achieved with special prepackaged SVG images. A limited number of particularly recognizable special elements are included. They are totally optional and may be deleted if your project will not utilize them. +

    +

    + These special elements may be inserted with traditional img tags: + +

    +<img id="xy_control_element" src="img/lcars_xy_circle_widget_optimized.svg" />
+
    + +

    +

    +

    + When using SVG files through img tags, CSS becomes less centralized. The SVG file will have to embed a copy of the CSS coloring class definitions directly into the SVG file source in under a style tag within a defs tag. View the source of img/lcars_xy_circle_widget_optimized_and_classes.svg for example. The set of color definitions are availble for easy copying in css/lcars.svg.colors.fragment.css + +

    + + Or, Inline SVG can be used for increased interactivity and customization within the element. SVG embedded like this can make use of standard element id and class attributes for css and DOM node selectors. This method is currently necessary for automatic audio support to apply to the SVG element. +

    +

    + + + + + + + + + image/svg+xml + + + + + + + + + + + + + + + + + + + + + + + + + + + +

    +

    + There are several features built-in to Inkscape, the opensource SVG editor, that could be helpful in building some web-browser based behavior. While that should work fine, to keep this framework simple and consistent, a more basic process used to create the special elements was used: +

      +
    1. Create master edition of the "special element" as a new SVG drawing file, with document sizing to match real world dimensions. This edition of the SVG file will be filled with guides and references, and saved in Inkscape extended SVG. This way, later on, you can more easily modify and regenerate new editions.
      2. +
    2. While creating all the geometry, prefer closed paths instead of a variety of specific shape types for consistency in source layout giving maximum flexibility for editing geometry in the future, as well as query selector consistency when integrating the SVG source.
      3. +
    3. Create an intermediate "publishing" copy of the the SVG drawing: + +
      4. +
    4. Save as "Optimized SVG" with these options: + +
      5. +
    5. Finally, manually edit the XML code of the SVG file to apply class="button" to each important shape/path element that needs to be clickable. These should be easily identifiable as the elements with custom ID attribute values that you populated in Inkscape. It would also be ideal to replace fill properties in style="" attributes with the corresponding lcars-COLORNAME-bg CSS class membership (just add that name in after button, separated by a space).
      6. +
    6. When inserting the SVG XML code directly into an html5 document, exclude the XML doctype declaration from the SVG file.
      7. +
    +

    +

    + To add custom behavior, just use element IDs in selector expressions like any other html5 element; e.g., +

    +document.querySelector("#xy_ctl_up").addEventListener("click", function(){ 
+	yourCustomFunctionHere();
+	console.log("part of the svg element was clicked!"); 
+});
+
    +

    +

    + + + + lcars_rectangular_array_ctl + + + + image/svg+xml + + lcars_rectangular_array_ctl + + + + + + + + + + + + + + + + + + + + + + + + +

    + +