Merge pull request #9560 from adobe/larz/v1-ui-audit

Brackets V1 UI Polish

Author: redmunds

src/extensions/default/RecentProjects/styles/styles.less

@@ -47,7 +47,7 @@
 #project-dropdown-toggle {
     display: inline-block;
     /* adjust margins to keep position #project-title position stable after extension is loaded */
-    margin: -3px 0px -2px -6px;
+    margin: -3px 5px -2px -6px;
     overflow: hidden;
     padding: 0 5px;
     white-space: nowrap;

src/styles/brackets.less

@@ -323,19 +323,9 @@ a, img {
     position: relative;
 
     /* Placeholder shown when there is no editor open */
-    .not-editor {
-        height: 100%;
-        .vbox;
-        .box-pack(center);
-        .box-align(center);
-        background: @bc-menu-bg url('images/no_content_bg.svg') no-repeat center 45%;
-
-        .dark & {
-            background: @dark-bc-menu-bg url('images/no_content_bg_dark.svg') no-repeat center 45%;
-        }
-    }
 
     .view-pane {
+        opacity: 0.7; // quieten inactive pane
         display: block;
         margin: 0;
         overflow: hidden;
@@ -491,19 +481,19 @@ a, img {
         box-sizing: border-box;
         border-bottom:  1px solid rgba(0, 0, 0, 0.05);
         padding: 5px 10px;
-        color: @bc-text-thin-quiet;
         background-color: @background;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
 
         .dark & {
-            color: @dark-bc-text-quiet;
             background-color: #1d1f21; // not using a variable on purpose.
             border-bottom-color: rgba(255, 255, 255, 0.05);
         }
     }
     .active-pane {
+        opacity: 1;
+        
         .pane-header {
             color: @bc-menu-text;
 
@@ -514,6 +504,19 @@ a, img {
     }
 }
 
+// moved this out of #editor-holder because we need to lower the specificity so theme authors can override the background color
+.not-editor {
+    height: 100%;
+    .vbox;
+    .box-pack(center);
+    .box-align(center);
+    background: #f8f8f8 url('images/no_content_bg.svg') no-repeat center 45%;
+
+    .dark & {
+        background: #1d1f21 url('images/no_content_bg_dark.svg') no-repeat center 45%;
+    }
+}
+
 // Split View Separator Styles
 .split-vertical #second-pane {
     border-left: 1px solid rgba(0, 0, 0, 0.17);
@@ -716,6 +719,12 @@ a, img {
     text-shadow: none;
     overflow: hidden;
 
+    > span {
+        background: @bc-sidebar-bg;
+        position: relative;
+        z-index: 9;
+    }
+    
     > div {
         background-color: @dark-bc-sidebar-bg;
         opacity: 1;
@@ -791,6 +800,14 @@ a, img {
     font-size: 13px;
     color: @project-panel-text-2;
     overflow: hidden;
+    
+    .btn-alt-quiet {
+        background-color: #47484b;
+        
+        // relative positioning plus z-index make sure that the splitview button flows under the left aligned buttons in the project pane when there are no working set files
+        position: relative;
+        z-index: 9; 
+    }
 }
 
 .open-files-container {

src/styles/brackets_patterns_override.less

@@ -43,7 +43,12 @@ a {
 }
 
 a:hover {
+    color: @bc-text-link;
     text-decoration: underline;
+    
+    .dark & {
+        color: @dark-bc-text-link;
+    }
 }
 
 a:focus {
@@ -281,6 +286,10 @@ a:focus {
     -webkit-transform-origin: 0 0;
     border: none;
     border-radius: @bc-border-radius;
+
+    .dark & {
+        border: 1px solid rgba(255, 255, 255, 0.09) !important;
+    }
 }
 
 @-webkit-keyframes dropdown {

src/styles/images/no_content_bg.svg

@@ -73,7 +73,8 @@ li.jstree-closed > ul { display:none; }
 
 .jstree-brackets li {
     vertical-align: baseline;
-    a {
+    a,
+    a:hover {
         color: @project-panel-text-1;
         font-size: 13px;
         cursor: default;