[console] update style to match comps

elastic · Mar 24, 2016 · 78d0039 · 78d0039
1 parent c8b5ab5
commit 78d0039
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 33 deletions.
diff --git a/src/plugins/console/public/css/sense.less b/src/plugins/console/public/css/sense.less
@@ -1,15 +1,35 @@
-@import "./sense.light.css";
 @import (reference) "~ui/styles/variables";
 
 nav.navbar .logo.hidden-sm {
   display: block !important;
 }
 
 #editor_output_container {
+  @import "./sense.light.less";
+
   display: flex;
   flex: 1 1 auto;
   position: relative;
   padding: 10px;
+  font-size: 16px;
+
+  .ace-tm .ace_gutter {
+    background: @white;
+    color: #A0A0A0;
+  }
+
+  .ace-tm .ace_gutter-active-line {
+    background-color: #e6e6e8;
+  }
+
+  .ace-tm .ace_marker-layer .ace_active-line {
+    background-color: #dbdcdd;
+  }
+
+  .ace_snippet-marker {
+    background-color: #e8e8e8;
+    border: 0;
+  }
 }
 
 #editor_container {
@@ -36,15 +56,16 @@ nav.navbar .logo.hidden-sm {
   display: flex;
   flex: 0 0 13px;
   cursor: ew-resize;
-  background-color: transparent;
+  background-color: #e4e4e4;
   align-items: center;
+  margin: -10px 0;
 
   &:hover {
-    background-color: #DCDCDC;
+    background-color: darken(#e4e4e4, 10%);
   }
 
   &.active {
-    background-color: rgba(194, 193, 208, 100);
+    background-color: darken(#e4e4e4, 40%);;
   }
 }
 
@@ -82,10 +103,6 @@ nav.navbar .logo.hidden-sm {
   }
 }
 
-.ace_gutter {
-  margin-top: 1px;
-}
-
 #autocomplete {
   visibility: hidden;
   position: absolute;

diff --git a/...lugins/console/public/css/sense.light.css → ...ugins/console/public/css/sense.light.less b/...lugins/console/public/css/sense.light.css → ...ugins/console/public/css/sense.light.less
@@ -1,35 +1,21 @@
-
-body {
-  background-color: #f7f7f7;
-}
-
-#editor, #output {
-  outline: 1px solid #ccc;
-  border-top: 1px solid #ffffff;
+.ace_method {
+  color: #E64A3A;
 }
 
 .ace_url {
-  color: #0088cc;
-}
-
-.ace_url.ace_param {
-  color: rgb(49, 132, 149);
+  color: #40B0D3;
 }
 
-.ace_url.ace_value {
-  color: rgb(3, 106, 7);
+.ace_variable {
+  color: #006E8A;
 }
 
-.ace-tm .ace_gutter {
-  background: transparent;
+.ace_string {
+  color: #166555;
 }
 
 .ace_scroller {
-  border-left: 1px solid #ccc;
-}
-
-.ace_method {
-  color: rgb(197, 6, 11);
+  border-left: 1px solid #CCC;
 }
 
 .ace_snippet-marker {
@@ -39,10 +25,9 @@ body {
   margin-top: -1px; /* compensate for background */
 }
 
-
 .ui-menu {
   background-color: white;
-  border: 1px solid #CCC
+  border: 1px solid #CCC;
 }
 
 .ui-state-focus {

diff --git a/src/plugins/console/public/src/settings.js b/src/plugins/console/public/src/settings.js
@@ -3,7 +3,7 @@ let es = require('./es');
 const storage = require('./storage');
 
 function getFontSize() {
-  return storage.get('font_size', 12);
+  return storage.get('font_size', 14);
 }
 
 function setFontSize(size) {