5 files changed, 84 insertions, 3 deletions

diff --git a/js/code-editor/codemirror-ninja-lib/ninja-simple-hint.js b/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js
index 866e1a8b..866e1a8b 100644
--- a/js/code-editor/codemirror-ninja-lib/ninja-simple-hint.js
+++ b/js/code-editor/codemirror-ninja/lib/ninja-simple-hint.js
diff --git a/js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css b/js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css
new file mode 100644
index 00000000..fa7e8e07
--- /dev/null
+++ b/js/code-editor/codemirror-ninja/theme/lesser-dark-ninja.css
@@ -0,0 +1,45 @@
+/*
+http://lesscss.org/ dark theme
+Ported to CodeMirror by Peter Kroon
+*/
+.CodeMirror{
+  line-height: 15px;
+}
+.cm-s-lesser-dark {
+  font-family: 'Bitstream Vera Sans Mono', 'DejaVu Sans Mono', 'Monaco', Courier, monospace !important;
+  /*font-size:12px;*/
+}
+
+.cm-s-lesser-dark { background: #262626; color: #EBEFE7; text-shadow: 0 -1px 1px #262626; }
+.cm-s-lesser-dark div.CodeMirror-selected {background: #45443B !important;} /* 33322B*/
+.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
+.cm-s-lesser-dark .CodeMirror-lines { margin-left:3px; margin-right:3px; }/*editable code holder*/
+
+div.CodeMirror span.CodeMirror-matchingbracket { color: #7EFC7E; }/*65FC65*/
+
+.cm-s-lesser-dark .CodeMirror-gutter { background: #262626; border-right:1px solid #aaa; padding-right:3px; min-width:2.5em; }
+.cm-s-lesser-dark .CodeMirror-gutter-text { color: #777; }
+
+.cm-s-lesser-dark span.cm-keyword { color: #599eff; }
+.cm-s-lesser-dark span.cm-atom { color: #C2B470; }
+.cm-s-lesser-dark span.cm-number { color: #B35E4D; }
+.cm-s-lesser-dark span.cm-def {color: color: white;}
+.cm-s-lesser-dark span.cm-variable { color:#D9BF8C; }
+.cm-s-lesser-dark span.cm-variable-2 { color: #669199; }
+.cm-s-lesser-dark span.cm-variable-3 { color: white; }
+.cm-s-lesser-dark span.cm-property {color: #92A75C;}
+.cm-s-lesser-dark span.cm-operator {color: #92A75C;}
+.cm-s-lesser-dark span.cm-comment { color: #666; }
+.cm-s-lesser-dark span.cm-string { color: #BCD279; }
+.cm-s-lesser-dark span.cm-string-2 {color: #f50;}
+.cm-s-lesser-dark span.cm-meta { color: #738C73; }
+.cm-s-lesser-dark span.cm-error { color: #9d1e15; }
+.cm-s-lesser-dark span.cm-qualifier {color: #555;}
+.cm-s-lesser-dark span.cm-builtin { color: #ff9e59; }
+.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
+.cm-s-lesser-dark span.cm-tag { color: #669199; }
+.cm-s-lesser-dark span.cm-attribute {color: #00c;}
+.cm-s-lesser-dark span.cm-header {color: #a0a;}
+.cm-s-lesser-dark span.cm-quote {color: #090;}
+.cm-s-lesser-dark span.cm-hr {color: #999;}
+.cm-s-lesser-dark span.cm-link {color: #00c;}
diff --git a/js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css b/js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css
new file mode 100644
index 00000000..b09e4e3e
--- /dev/null
+++ b/js/code-editor/codemirror-ninja/theme/rubyblue-ninja.css
@@ -0,0 +1,22 @@
+.cm-s-rubyblue {
+    font:Trebuchet, Verdana, sans-serif; }      /* - customized editor font - */
+
+.cm-s-rubyblue { background: #112435; color: white; }
+.cm-s-rubyblue div.CodeMirror-selected { background: #38566F !important; }
+.cm-s-rubyblue .CodeMirror-gutter { background: #1F4661; border-right: 7px solid #3E7087; min-width:2.5em; }
+.cm-s-rubyblue .CodeMirror-gutter-text { color: white; }
+.cm-s-rubyblue .CodeMirror-cursor { border-left: 1px solid white !important; }
+
+.cm-s-rubyblue span.cm-comment { color: #999; font-style:italic; line-height: 1em; }
+.cm-s-rubyblue span.cm-atom { color: #F4C20B; }
+.cm-s-rubyblue span.cm-number, .cm-s-rubyblue span.cm-attribute { color: #82C6E0; }
+.cm-s-rubyblue span.cm-keyword { color: #F0F; }
+.cm-s-rubyblue span.cm-string { color: #F08047; }
+.cm-s-rubyblue span.cm-meta { color: #F0F; }
+.cm-s-rubyblue span.cm-variable-2, .cm-s-rubyblue span.cm-tag { color: #7BD827; }
+.cm-s-rubyblue span.cm-variable-3, .cm-s-rubyblue span.cm-def { color: white; }
+.cm-s-rubyblue span.cm-error { color: #AF2018; }
+.cm-s-rubyblue span.cm-bracket { color: #F0F; }
+.cm-s-rubyblue span.cm-link { color: #F4C20B; }
+.cm-s-rubyblue span.CodeMirror-matchingbracket { color:#F0F !important; }
+.cm-s-rubyblue span.cm-builtin, .cm-s-rubyblue span.cm-special { color: #FF9D00; }
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
index ed314fc9..1e3b4ce7 100644
--- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.css
@@ -76,6 +76,7 @@
     white-space: nowrap;
     padding:5px;
     background-color: #313131;
+    width:200px;
 }
 
 .viewOptions .shortKeys .list div{
@@ -88,4 +89,17 @@
 
 .viewOptions .shortKeys .show{
     visibility: visible;
+}
+
+.viewOptions .shortKeys div{
+    padding:2px;
+}
+
+.viewOptions .shortKey{
+    font-style: italic;
+    color: #d1d1d1;
+}
+
+.viewOptions .shortKeyDesc{
+    float:right;
 }
\ No newline at end of file
diff --git a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
index 8a46a0b1..d207ea23 100644
--- a/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
+++ b/js/code-editor/ui/code-editor-view-options.reel/code-editor-view-options.html
@@ -75,9 +75,9 @@
         </div>
         <div id="shortKeys" class="shortKeys">
             <div class="list hide">
-                <div><span>ctrl+space : code hints</span></div>
-                <div><span>ctrl+/ : comment selection</span></div>
-                <div><span>ctrl+shift+/ : uncomment selection</span></div>
+                <div><span class="shortKey">ctrl+space :</span> <span class="shortKeyDesc">code hints</span></div>
+                <div><span class="shortKey">ctrl+/ :</span> <span class="shortKeyDesc">comment selection</span></div>
+                <div><span class="shortKey">ctrl+shift+/ :</span> <span class="shortKeyDesc">uncomment selection</span></div>
             </div>
             <span>ShortKeys</span>
             <span class="dropdownArrow">&#9660</span>