From 95cf60656faa9710030246d72c7399d776851fbb Mon Sep 17 00:00:00 2001
From: Sarah McAlear and Shirley Wang <pair+smcalear+swang@pivotal.io>
Date: Fri, 31 Mar 2017 12:26:45 -0400
Subject: [PATCH] Style updates

- moves the writing below the elephant on the starup page to be aligned with the other text
- change borders and greys in sqleditor.
- Style updates to tabs
---
 web/pgadmin/dashboard/static/css/dashboard.css     |   6 +
 web/pgadmin/preferences/static/css/preferences.css |   4 +
 web/pgadmin/static/css/bootstrap.overrides.css     |   3 +-
 web/pgadmin/static/css/webcabin.overrides.css      |  37 +-
 .../tools/sqleditor/static/css/sqleditor.css       | 417 ++++++++++-----------
 5 files changed, 237 insertions(+), 230 deletions(-)

diff --git a/web/pgadmin/dashboard/static/css/dashboard.css b/web/pgadmin/dashboard/static/css/dashboard.css
index cf372e15..735aebf5 100644
--- a/web/pgadmin/dashboard/static/css/dashboard.css
+++ b/web/pgadmin/dashboard/static/css/dashboard.css
@@ -82,3 +82,9 @@
     padding-top: 20px;
     padding-bottom: 40px;
 }
+
+.icon-postgres:before {
+    height: 43px;
+    margin-top: 13px;
+    display: block;
+}
diff --git a/web/pgadmin/preferences/static/css/preferences.css b/web/pgadmin/preferences/static/css/preferences.css
index 9f8de62d..96525fd9 100644
--- a/web/pgadmin/preferences/static/css/preferences.css
+++ b/web/pgadmin/preferences/static/css/preferences.css
@@ -34,6 +34,10 @@ div.pgadmin-preference-body div.ajs-content {
     min-height: 400px !important;
 }
 
+.pgadmin-controls .bootstrap-switch-container {
+  overflow: auto;
+}
+
 @media (min-width: 768px) {
   .pgadmin-preference-body {
     min-width: 600px !important;
diff --git a/web/pgadmin/static/css/bootstrap.overrides.css b/web/pgadmin/static/css/bootstrap.overrides.css
index e19cb574..9d787332 100755
--- a/web/pgadmin/static/css/bootstrap.overrides.css
+++ b/web/pgadmin/static/css/bootstrap.overrides.css
@@ -372,8 +372,7 @@ button.btn:disabled {
 }
 
 .pg-prop-btn-group {
-  background-color: #D2D2D2;
-  border: 2px solid #A9A9A9;
+  background-color: #F2F2F2;
   left: 0px;
   right: 0px;
   padding: 2px;
diff --git a/web/pgadmin/static/css/webcabin.overrides.css b/web/pgadmin/static/css/webcabin.overrides.css
index 91ae2000..6b740b5e 100644
--- a/web/pgadmin/static/css/webcabin.overrides.css
+++ b/web/pgadmin/static/css/webcabin.overrides.css
@@ -26,7 +26,7 @@
   border-bottom: 1px none;
   height: 100%;
   padding-top: 10px;
-  background-color: #E2E2E2;
+  background-color: #f2f2f2;
 }
 
 .wcFrameCenter {
@@ -108,7 +108,7 @@
 }
 
 .wcSplitterBar {
-  border: 1px solid #aaaaaa;
+  border: none;
   background-color: #dddddd;
 }
 
@@ -118,35 +118,34 @@
 }
 
 .wcSplitterBarH {
-  border-top: 3px solid #dddddd;
   width: 100% !important;
 }
 
+.wcTabScroller {
+  border-bottom: 2px solid #DDDDDD;
+  padding-left: 3px;
+}
+
 .wcPanelTab {
-  color: #337ab7;
-  background-color: #e6e6e6;
-  border: 0px;
+  color: #2775b6;
+  border: 1px solid #f2f2f2;
+  border-bottom-width: 0;
   border-radius: 4px 4px 0px 0px;
-  border-bottom: 0px;
-  margin-right: 1px;
-  margin-top: 10px;
+  margin-right: 3px;
+  margin-top: 6px;
   font-size: 13px;
-  padding-left: 8px;
-  padding-right: 8px;
-  padding-top: 4px;
-  padding-bottom: 4px;
+  padding: 4px 8px;
 }
 
 .wcPanelTab:hover {
-  background-color: #eeeeee;
-  padding-bottom: 10px;
+  background-color: #f8f8f8;
 }
 
 .wcPanelTabActive {
   background-color: #ffffff;
-  color: #000000;
-  margin-top: 5px;
-  line-height: 30px;
+  border: 1px solid #2775b6;
+  border-bottom-width: 0;
+  color: #2775b6;
   font-weight: normal;
 }
 
@@ -266,7 +265,7 @@
 }
 
 .wcFrameTitleBar {
-  background-color: #E2E2E2;
+  background-color: #F2F2F2;
   height: 35px;
 }
 
diff --git a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
index 6a6f1f8f..cff54a88 100644
--- a/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
+++ b/web/pgadmin/tools/sqleditor/static/css/sqleditor.css
@@ -1,262 +1,261 @@
 #main-editor_panel {
-  height: 100%;
-  width: 100%;
+    height: 100%;
+    width: 100%;
 }
 
 .sql-editor {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top : 0;
-  bottom: 0;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
 }
 
 .sql-editor-busy-fetching {
-  position:absolute;
-  left: 0;
-  top: 41px;
-  bottom: 0;
-  right: 0;
-  margin:0;
-  padding: 0;
-  background: black;
-  opacity: 0.6;
-  z-index: 100;
+    position: absolute;
+    left: 0;
+    top: 41px;
+    bottom: 0;
+    right: 0;
+    margin: 0;
+    padding: 0;
+    background: black;
+    opacity: 0.6;
+    z-index: 100;
 }
 
 #editor-panel {
-  position: absolute;
-  left: 0;
-  right: 0;
-  top : 65px;
-  bottom: 0;
-  z-index: 0;
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 65px;
+    bottom: 0;
+    z-index: 0;
 }
 
 .editor-title {
-  background-color: #2C76B4;
-  padding: 4px 5px;
-  color: white;
-  font-size: 13px;
+    background-color: #f2f2f2;
+    border-top: 2px solid #dddddd;
+    border-bottom: 2px solid #dddddd;
+    padding: 3px 7px;
+    font-size: 12px;
 }
 
 .sql-editor-grid-container {
-  height: 100%;
-  overflow: auto;
+    height: 100%;
+    overflow: auto;
 }
 
 .sql-editor-grid-container.has-no-footer {
-  height: 100%;
+    height: 100%;
 }
 
 .filter-container {
-  position: relative;
-  background-color: white;
-  border: 1px solid black;
-  box-shadow: 0.5px 0.5px 5px #000;
-  padding-bottom: 30px;
-  top: 10px;
-  z-index: 1;
-  margin: auto;
-  width: 60%;
+    position: relative;
+    background-color: white;
+    border: 1px solid black;
+    box-shadow: 0.5px 0.5px 5px #000;
+    padding-bottom: 30px;
+    top: 10px;
+    z-index: 1;
+    margin: auto;
+    width: 60%;
 }
 
 .filter-container .CodeMirror-scroll {
-  min-height: 120px;
+    min-height: 120px;
 }
 
-.filter-container .sql-textarea{
-  box-shadow: 0.1px 0.1px 3px #000;
-  margin-bottom: 5px;
+.filter-container .sql-textarea {
+    box-shadow: 0.1px 0.1px 3px #000;
+    margin-bottom: 5px;
 }
 
 .filter-title {
-  background-color: #2C76B4;
-  padding: 2px;
-  color: white;
-  font-size: 13px;
+    background-color: #2C76B4;
+    padding: 2px;
+    color: white;
+    font-size: 13px;
 }
 
 #filter .btn-group {
-  margin-right: 2px;
-  float: right;
+    margin-right: 2px;
+    float: right;
 }
 
 #filter .btn-group > button {
-  padding: 3px;
+    padding: 3px;
 }
 
 #filter .btn-group .btn-primary {
-  margin: auto !important;
+    margin: auto !important;
 }
 
 .has-select-all table thead tr th:nth-child(1),
 .has-select-all table tbody tr td:nth-child(1) {
-  width: 35px !important;
-  max-width: 35px !important;
-  min-width: 35px !important;
+    width: 35px !important;
+    max-width: 35px !important;
+    min-width: 35px !important;
 }
 
 .sql-editor-message {
-  white-space:pre-wrap;
-  font-family: monospace;
-  padding-top: 5px;
-  padding-left: 10px;
-  overflow: auto;
-  height: 100%;
-  font-size: 0.925em;
-  -webkit-user-select: text;
-  -moz-user-select: text;
-  -ms-user-select: text;
-  user-select: text;
+    white-space: pre-wrap;
+    font-family: monospace;
+    padding-top: 5px;
+    padding-left: 10px;
+    overflow: auto;
+    height: 100%;
+    font-size: 0.925em;
+    -webkit-user-select: text;
+    -moz-user-select: text;
+    -ms-user-select: text;
+    user-select: text;
 }
 
 .limit-enabled {
-  background-color: white;
+    background-color: white;
 }
 
 .sql-editor-history-container {
-  height: 100%;
-  overflow: auto;
+    height: 100%;
+    overflow: auto;
 }
 
 .sql-status-cell {
-  max-width: 30px;
+    max-width: 30px;
 }
 
 .btn-circle {
-  width: 16px;
-  height: 16px;
-  text-align: center;
-  padding: 0;
-  font-size: 10px;
-  line-height: 1.428571429;
-  border-radius: 10px;
-  cursor: auto;
+    width: 16px;
+    height: 16px;
+    text-align: center;
+    padding: 0;
+    font-size: 10px;
+    line-height: 1.428571429;
+    border-radius: 10px;
+    cursor: auto;
 }
 
 .visibility-hidden {
-  visibility: hidden;
+    visibility: hidden;
 }
 
 .sql-editor-mark {
-  border-bottom: 2px dotted red;
+    border-bottom: 2px dotted red;
 }
 
 #editor-panel .CodeMirror-activeline-background {
-  background: #D9EDF7;
+    background: #D9EDF7;
 }
 
 .CodeMirror-foldmarker {
-  color: blue;
-  text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
-  font-family: arial;
-  line-height: .3;
-  cursor: pointer;
+    color: blue;
+    text-shadow: #b9f 1px 1px 2px, #b9f -1px -1px 2px, #b9f 1px -1px 2px, #b9f -1px 1px 2px;
+    font-family: arial;
+    line-height: .3;
+    cursor: pointer;
 }
 
 .CodeMirror {
-  min-height: 100%;
-  height: 100%;
+    min-height: 100%;
+    height: 100%;
 }
 
 #editor-panel .CodeMirror-gutter {
-  min-width: 1em;
+    min-width: 1em;
 }
 
 #output-panel {
-  height: 100% !important;
+    height: 100% !important;
 }
 
 .CodeMirror-foldgutter-open,
 .CodeMirror-foldgutter-folded {
-  cursor: pointer;
+    cursor: pointer;
 }
 
 .CodeMirror-foldgutter-open:after {
-  content: "\25BC";
+    content: "\25BC";
 }
 
 .CodeMirror-foldgutter-folded:after {
-  content: "\25B6";
+    content: "\25B6";
 }
 
-
 .sql-editor-explain {
-  height: 100%;
-  width: 100%;
-  overflow: auto;
+    height: 100%;
+    width: 100%;
+    overflow: auto;
 }
 
 .CodeMirror-hints {
-  position: absolute;
-  z-index: 10;
-  overflow: hidden;
-  list-style: none;
+    position: absolute;
+    z-index: 10;
+    overflow: hidden;
+    list-style: none;
 
-  margin: 0;
-  padding: 2px;
+    margin: 0;
+    padding: 2px;
 
-  -webkit-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-  -moz-box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-  box-shadow: 2px 3px 5px rgba(0,0,0,.2);
-  border-radius: 3px;
-  border: 1px solid silver;
+    -webkit-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+    -moz-box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+    box-shadow: 2px 3px 5px rgba(0, 0, 0, .2);
+    border-radius: 3px;
+    border: 1px solid silver;
 
-  background: white;
-  font-size: 90%;
-  font-family: monospace;
+    background: white;
+    font-size: 90%;
+    font-family: monospace;
 
-  max-height: 20em;
-  overflow-y: auto;
+    max-height: 20em;
+    overflow-y: auto;
 }
 
 .CodeMirror-hint {
-  margin: 0;
-  padding: 0 4px;
-  border-radius: 2px;
-  max-width: 19em;
-  overflow: hidden;
-  white-space: pre;
-  color: black;
-  cursor: pointer;
+    margin: 0;
+    padding: 0 4px;
+    border-radius: 2px;
+    max-width: 19em;
+    overflow: hidden;
+    white-space: pre;
+    color: black;
+    cursor: pointer;
 }
 
 li.CodeMirror-hint-active {
-  background: #08f;
-  color: white;
+    background: #08f;
+    color: white;
 }
 
 .sqleditor-hint {
-  padding-left: 20px;
+    padding-left: 20px;
 }
 
 .CodeMirror-hint .fa::before {
-  padding-right: 7px;
+    padding-right: 7px;
 }
 
 h2 {
-  font-size: 10pt;
-  border-bottom: 1px dotted gray;
+    font-size: 10pt;
+    border-bottom: 1px dotted gray;
 }
 
 ul {
-  margin-left: 0;
-  padding: 0;
-  cursor: default;
+    margin-left: 0;
+    padding: 0;
+    cursor: default;
 }
 
 li {
-  padding: 0 0 0 0px;
-  list-style: none;
-  margin: 0;
+    padding: 0 0 0 0px;
+    list-style: none;
+    margin: 0;
 }
 
 #datagrid {
-  background: white;
-  outline: 0;
-  border: 1px solid gray;
-  font-size: 9pt;
+    background: white;
+    outline: 0;
+    font-size: 9pt;
 }
 
 .slick-header-column.ui-state-default {
@@ -264,139 +263,139 @@ li {
 }
 
 #datagrid .grid-header label {
-  display: inline-block;
-  font-weight: bold;
-  margin: auto auto auto 6px;
+    display: inline-block;
+    font-weight: bold;
+    margin: auto auto auto 6px;
 }
 
 .grid-header .ui-icon {
-  margin: 4px 4px auto 6px;
-  background-color: transparent;
-  border-color: transparent;
+    margin: 4px 4px auto 6px;
+    background-color: transparent;
+    border-color: transparent;
 }
 
 .grid-header .ui-icon.ui-state-hover {
-  background-color: white;
+    background-color: white;
 }
 
 .sc.cell-move-handle {
-  font-weight: bold;
-  text-align: right;
-  border-right: solid gray;
-  background: #efefef;
-  cursor: move;
+    font-weight: bold;
+    text-align: right;
+    border-right: solid gray;
+    background: #efefef;
+    cursor: move;
 }
 
 .cell-move-handle:hover {
-  background: #b6b9bd;
+    background: #b6b9bd;
 }
 
 .sr.selected .cell-move-handle {
-  background: #D5DC8D;
+    background: #D5DC8D;
 }
 
 .sr .cell-actions {
-  text-align: left;
+    text-align: left;
 }
 
 .sr.complete {
-  background-color: #DFD;
-  color: #555;
+    background-color: #DFD;
+    color: #555;
 }
 
 /* Slick.Editors.Text, Slick.Editors.Date */
 #datagrid .slick-header > input.editor-text {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  margin: 0;
-  background: transparent;
-  outline: 0;
-  padding: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    margin: 0;
+    background: transparent;
+    outline: 0;
+    padding: 0;
 }
 
 /* Slick.Editors.Checkbox */
 #datagrid .slick-header > input.editor-checkbox {
-  margin: 0;
-  height: 100%;
-  padding: 0;
-  border: 0;
+    margin: 0;
+    height: 100%;
+    padding: 0;
+    border: 0;
 }
 
 .cell-selection {
-  border-right-color: silver;
-  border-right-style: solid;
-  background: #f5f5f5;
-  color: gray;
-  text-align: right;
-  font-size: 10px;
+    border-right-color: silver;
+    border-right-style: solid;
+    background: #f5f5f5;
+    color: gray;
+    text-align: right;
+    font-size: 10px;
 }
 
 .sr.selected .cell-selection {
-  background-color: transparent; /* show default selected row background */
+    background-color: transparent; /* show default selected row background */
 }
 
 .sc-cb {
-  background: #f0f0f0;
-  border-right-color: silver;
-  border-right-style: solid;
+    background: #f0f0f0;
+    border-right-color: silver;
+    border-right-style: solid;
 }
 
 #datagrid .slick-header .ui-state-default,
 #datagrid .slick-header .ui-widget-content.ui-state-default,
 #datagrid .slick-header .ui-widget-header .ui-state-default {
-  background: none;
+    background: none;
 }
 
 #datagrid .slick-header .slick-header-columns {
-  background: #2c76b4;
-  height: 40px;
+    background: #2c76b4;
+    height: 40px;
 }
 
 #datagrid .slick-header .slick-header-column.ui-state-default {
- color: #fff;
- padding: 4px 0 4px 6px;
+    color: #fff;
+    padding: 4px 0 4px 6px;
 }
 
 .long_text_editor {
-  margin-left: 5px;
-  font-size: 12px !important;
-  padding: 1px 7px;
+    margin-left: 5px;
+    font-size: 12px !important;
+    padding: 1px 7px;
 }
 
 /* Slick.Editors.Text, Slick.Editors.Date */
 input.editor-text {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  margin: 0;
-  background: transparent;
-  outline: 0;
-  padding: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    margin: 0;
+    background: transparent;
+    outline: 0;
+    padding: 0;
 }
 
 /* Slick.Editors.Text, Slick.Editors.Date */
 textarea.editor-text {
-  width: 100%;
-  height: 100%;
-  border: 0;
-  margin: 0;
-  background: transparent;
-  outline: 0;
-  padding: 0;
+    width: 100%;
+    height: 100%;
+    border: 0;
+    margin: 0;
+    background: transparent;
+    outline: 0;
+    padding: 0;
 }
 
 /* Slick.Editors.Checkbox */
 input.editor-checkbox {
-  margin: 0;
-  height: 100%;
-  padding: 0;
-  border: 0;
+    margin: 0;
+    height: 100%;
+    padding: 0;
+    border: 0;
 }
 
 /* remove outlined border on focus */
 input.editor-checkbox:focus {
-  outline: none;
+    outline: none;
 }
 
 /* Override selected row color */
@@ -406,21 +405,21 @@ input.editor-checkbox:focus {
 
 /* To highlight all newly inserted rows */
 .grid-canvas .new_row {
-  background: #f3f2d8;
+    background: #f3f2d8;
 }
 
 /* To highlight all the updated rows */
 .grid-canvas .updated_row {
-  background: #c1c1c1;
+    background: #c1c1c1;
 }
 
 /* To highlight row at fault */
 .grid-canvas .new_row.error, .grid-canvas .updated_row.error {
-  background: #e46b6b;
+    background: #e46b6b;
 }
 
 #datagrid div.slick-header.ui-state-default {
-  background: #2c76b4;
+    background: #2c76b4;
 }
 
 /*
@@ -429,8 +428,8 @@ input.editor-checkbox:focus {
   Ref: https://github.com/mleibman/SlickGrid/issues/742
 */
 .slickgrid, .slickgrid *, .slick-header-column {
-  box-sizing: content-box;
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
-  -ms-box-sizing: content-box;
+    box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    -webkit-box-sizing: content-box;
+    -ms-box-sizing: content-box;
 }
-- 
2.12.0