Fresh design

static/css/app.css

@@ -8,8 +8,7 @@
   left: 250px;
   right: 0;
   height: 50px;
-  box-shadow: inset 0 -1px 0 0 #b8b7b5;
+  background: #79589f;
-  background: #d8d7d6;
 }
 
 #nav ul {
@@ -27,7 +26,7 @@
   line-height: 49px;
   font-size: 13px;
   padding: 0px 14px;
-  color: #6c6b6b;
+  color: #d6cce2;
   font-weight: 500;
   margin: 0 1px;
   cursor: pointer;
@@ -41,15 +40,13 @@
 }
 
 #nav ul li:hover {
-  color: rgba(0,0,0,0.9);
+  color: #fff;
 }
 
 #nav ul li.selected {
   position: relative;
   background: #fff;
   color: #000;
-  border-right: 1px solid #b8b7b5;
-  border-left: 1px solid #b8b7b5;
   margin: 0;
 }
 
@@ -73,8 +70,8 @@
   left: 0px;
   top: 0px;
   bottom: 0px;
-  border-right: 1px solid #d4d4d4;
   box-sizing: border-box;
+  background: #f9f9f9;
 }
 
 #sidebar .title {
@@ -85,16 +82,17 @@
   height: 33px;
   padding: 0px 8px;
   padding-left: 12px;
-  color: #000;
+  color: #555;
   font-weight: bold;
-  background: #f6f6f6;
+  font-size: 13px;
 }
 
 #sidebar .title.main {
   line-height: 50px;
   height: 50px;
-  border-bottom: 1px solid #d4d4d4;
+  background: #79589f;
-  background: #f1f1f1;
+  color: #fff;
+  font-size: 14px;
 }
 
 #sidebar div.tables-list {
@@ -104,7 +102,6 @@
   left: 0px;
   bottom: 130px;
   overflow: auto;
-  background: #f6f6f6;
 }
 
 #sidebar div.tables-list .wrap {
@@ -124,14 +121,10 @@
   float: right;
   margin-right: 4px;
   cursor: pointer;
-  color: #aaa;
+  color: #fff;
   display: none;
 }
 
-#sidebar div.tables-list .title span.refresh:hover {
-  color: #555;
-}
-
 #sidebar div.tables-list #tables, #sequences {
   padding: 50px 0 0;
   font-size: 12px;
@@ -143,9 +136,8 @@
   left: 0px;
   height: 130px;
   bottom: 0px;
-  background: #f6f6f6;
+  /*border-top: 1px solid #d4d4d4;*/
-  border-top: 1px solid #d4d4d4;
+  /*border-right: 1px solid #d4d4d4;*/
-  border-right: 1px solid #d4d4d4;
   box-sizing: border-box;
 }
 
@@ -155,7 +147,7 @@
 }
 
 #sidebar div.table-information .title {
-  background: #f6f6f6;
+  /*background: #f6f6f6;*/
 }
 
 #sidebar div.table-information ul {
@@ -237,8 +229,7 @@
   background: #fff;
   padding: 10px;
   height: 50px;
-  border-top: solid 1px #e1e2e3;
+  border-bottom: solid 1px #ddd;
-  border-bottom: solid 1px #b8b7b5;
 }
 
 #input .actions .btn {
@@ -307,7 +298,6 @@
 
 #results tr:nth-child(even) > td {
   border: none;
-  background: #fafafa;
 }
 
 #results tr:nth-child(odd) > td {
@@ -316,18 +306,17 @@
 }
 
 #results th {
-  background: #f3f3f3;
   border-top: none;
   border-bottom: 1px solid #eae9e9;
   padding: 3px 9px;
   line-height: 24px;
-  color: #6a6a6a;
+  color: #333;
   font-weight: bold;
   -webkit-font-smoothing: antialiased;
 }
 
 #results th.active {
-  background: #e3e3e3;
+  background: #f3f3f3;
 }
 
 #results[data-mode="browse"] th:hover {
@@ -388,7 +377,8 @@
 }
 
 #custom_query {
-  height: 205px;
+  height: 193px;
+  margin: 6px 0px;
 }
 
 #connection_window {
@@ -458,3 +448,16 @@
   display: none;
   z-index: 1000;
 }
+
+/* -------------------------------------------------------------------------- */
+/* Ace Customizations */
+/* -------------------------------------------------------------------------- */
+
+.ace_gutter, .ace_gutter-cell {
+  background: #fff !important;
+  color: #888;
+}
+
+.ace_active-line {
+  background: #f9f9f9 !important;
+}

static/index.html

@@ -29,7 +29,7 @@
         <li id="table_connection">Connection</li>
       </ul>
 
-      <a href="#" id="edit_connection" class="btn btn-primary btn-sm"><i class="fa fa-gear"></i> Edit Connection</a>
+      <a href="#" id="edit_connection" class="btn btn-default btn-sm"><i class="fa fa-globe"></i> Edit Connection</a>
     </div>
     <div id="sidebar">
       <div class="tables-list">

static/js/app.js

@@ -394,6 +394,7 @@ function initEditor() {
 
   editor.setFontSize(13);
   editor.setTheme("ace/theme/tomorrow");
+  editor.setShowPrintMargin(false);
   editor.getSession().setMode("ace/mode/pgsql");
   editor.getSession().setTabSize(2);
   editor.getSession().setUseSoftTabs(true);