diff --git a/src/plugins/console/public/css/sense.less b/src/plugins/console/public/css/sense.less index 7905af96154e84..42204bc509dbfb 100644 --- a/src/plugins/console/public/css/sense.less +++ b/src/plugins/console/public/css/sense.less @@ -1,4 +1,3 @@ -@import "./sense.light.css"; @import (reference) "~ui/styles/variables"; nav.navbar .logo.hidden-sm { @@ -6,10 +5,31 @@ nav.navbar .logo.hidden-sm { } #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/src/plugins/console/public/css/sense.light.css b/src/plugins/console/public/css/sense.light.less similarity index 50% rename from src/plugins/console/public/css/sense.light.css rename to src/plugins/console/public/css/sense.light.less index 3c3b4487c4bc66..cb6963043cb7be 100644 --- a/src/plugins/console/public/css/sense.light.css +++ b/src/plugins/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 index 79cbc4a9cb1696..80ad485d95053c 100644 --- 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) {