JS web: use/import to Himera style web REPL.

1 files changed, 280 insertions, 0 deletions

diff --git a/js/web/himera.css b/js/web/himera.css
new file mode 100644
index 0000000..139588d
--- /dev/null
+++ b/js/web/himera.css
@@ -0,0 +1,280 @@
+/* Additional Classes  --------------------------------------------- */
+
+.source {
+  font-family: "ExoRegular";
+  font-size: 18px;
+  height: 31px;
+  margin-top: 20px;
+  text-align: right;
+}
+
+.source img {
+  margin-left: 5px;
+  vertical-align: sub;
+}
+
+.source a {
+  text-decoration: none;
+}
+
+.rule {
+  background: url(bg-rule.png);
+  height: 12px;
+  clear: both;
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.cheat-box-container {
+  background-color: rgba(213,207,180,0.4);
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  margin-top: 20px;
+}
+
+.cheat-box {
+  padding: 20px;
+}
+
+table {
+  font-family: monospace;
+  margin-top: 20px;
+  width: 100%;
+}
+
+td {
+  padding: 3px;
+}
+
+.row-one {
+  background-color: #f2efe4;
+}
+
+.row-label {
+  color: #666;
+  font-family: "ExoBold";
+  text-transform: uppercase;
+}
+
+.footer-logo {
+  font-size: 18px;
+  font-family: "ExoBlack";
+  text-transform: uppercase;
+  color: #8f4732;
+}
+
+ul.footer-links {
+  float: right;
+}
+
+.footer-links li {
+  font-family: "ExoRegular";
+  font-size: 14px;
+  display: inline;
+  list-style-type: none;
+  margin-left: 10px;
+  text-transform: uppercase;
+}
+
+.footer-links li a {
+  color: #327a8e;
+  text-decoration: none;
+}
+
+.footer-links li a:hover {
+  color: #333;
+}
+
+.tiny-note {
+  font-size: small;
+}
+
+/* Editor ---------------------------------------------- */
+
+.CodeMirror {
+  position: relative;
+  height: 320px;
+  background: #fbfbf8;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  border: 1px solid #d5ceb4;
+}
+
+/* Console --------------------------------------------- */
+
+#console {
+  position: relative;
+  height: 220px;
+  background: #fbfbf8;
+  border-radius: 5px;
+  -moz-border-radius: 5px;
+  border: 1px solid #d5ceb4;
+}
+
+/* Console --------------------------------------------- */
+/* The console container element */
+#console {
+  position: relative;
+  height: 320px;
+  background-color:#fbfbf8;;
+}
+/* The inner console element. */
+.jqconsole {
+    background: #fbfbf8;
+    border-radius: 5px;
+    -moz-border-radius: 5px;
+    border: 1px solid #d5ceb4;
+    padding: 10px;
+
+    white-space: pre-wrap;
+    word-wrap: break-word;
+}
+/* The cursor. */
+.jqconsole-cursor {
+    font-weight: normal;
+    font-family:monospace;
+    background-color: #000;
+}
+/* The cursor color when the console looses focus. */
+.jqconsole-blurred .jqconsole-cursor {
+    font-weight: normal;
+    font-family:monospace;
+    background-color: #7F7F7F;
+}
+/* The current prompt text color */
+.jqconsole-prompt {
+    font-weight: normal;
+    font-family:monospace;
+    color: #000;
+}
+/* The command history */
+.jqconsole-old-prompt {
+    font-weight: normal;
+    font-family:monospace;
+    color: #000;
+}
+/* The text color when in input mode. */
+.jqconsole-input {
+    font-weight: normal;
+    font-family:monospace;
+    color: #000;
+}
+/* Previously entered input. */
+.jqconsole-old-input {
+    color: #000;
+    font-weight: normal;
+    font-family:monospace;
+}
+/* The text color of the output. */
+.jqconsole-output {
+  font-weight: normal;
+  font-family:monospace;
+  color: #000;
+}
+
+.jqconsole-inner { 
+  /*width:580px;*/
+  height:200px; 
+  margin: 10px 10px;
+  overflow:auto; 
+  text-align:left;
+}
+
+.jqconsole-message-value {
+  color:#333; 
+  font-family:monospace;
+  padding:0.1em; 
+}
+
+.jqconsole-prompt-box {
+  color:#444; font-family:monospace; 
+}
+
+.jqconsole-focus span.jquery-console-cursor {
+  background:#333; color:#eee; font-weight:bold;
+}
+
+.jqconsole-message-error {
+  font-family:sans-serif;
+  font-weight:bold;
+  padding:0.1em; 
+  color:#ef0505;
+}
+
+.jqconsole-message-success {
+  color:#187718; font-family:monospace;
+  padding:0.1em; 
+}
+
+
+.ebnf {
+  color:#444; font-family:monospace;
+  text-transform: uppercase;
+}
+
+.doc-link {
+  font-size: 0.65em;
+  text-decoration: none;
+}
+
+/* Synonym Styles */
+
+#himera-synonym h1 {
+    margin-left: 10px;
+}
+
+#himera-synonym h1 div {
+    font-size: 16px;
+    color: black;
+}
+
+#himera-synonym h4,
+#himera-synonym h5 {
+    margin-left: 10px;
+}
+
+#himera-synonym .cheat-box-container {
+    margin-top: 0px;
+    background-color: rgb(255, 250, 240);
+    border: 1px solid #ccc;
+    box-sizing: border-box;
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+    -moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+    -o-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+    -ms-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, .1);
+}
+
+#himera-synonym pre {
+    font-size: 13px;
+    font-family: monospace;
+}
+
+.syn-section {
+    clear: both;
+    float: left;
+    margin-bottom: 20px;
+}
+
+#himera-synonym table {
+    margin: 0;
+    padding: 0;
+}
+
+#himera-synonym .container {
+    margin: 0;
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+}
+
+h1 a {
+    text-decoration: none;
+    color: inherit;
+}
+
+h1 a:visited {
+    text-decoration: none;
+    color: inherit;
+}