Merge pull request #827 from brave/new-ui

New ui

less/bookmarksToolbar.less

@@ -5,13 +5,15 @@
 @import "variables.less";
 
 .bookmarksToolbar {
-  background: darken(@tabsBackground, 3%);
-  border-bottom: 1px solid darken(@tabsBackground, 5%);
-  box-sizing: border-box;
-  display: flex;
-  flex: 1;
-  padding: 3px 10px;
-  height: 20px;
+    background: #EEEEEE;
+    border-bottom: 1px solid #BBBBBB;
+    border-top: 1px solid #FFFFFF;
+    box-sizing: border-box;
+    display: flex;
+    flex: 1;
+    padding: 3px 10px;
+    height: 23px;
+
 
   .bookmarkToolbarButton {
     border-radius: @borderRadius;

less/button.less

@@ -10,10 +10,10 @@ span.browserButton {
   line-height: 28px;
   width: 30px;
   height: 30px;
-  font-size: 20px;
+  font-size: 17px;
   color: @buttonColor;
   border-radius: 30px;
-  margin: 0 3px;
+  margin: 0 4px;
   text-align: center;
   transition: .1s opacity, .1s background;
   user-select: none;

less/navigationBar.less

@@ -13,7 +13,7 @@
   display: flex;
   justify-content: space-between;
   padding-left: 70px;
-  border-bottom: 1px solid @chromeTertiary;
+  border-bottom: 1px solid #bbb;
 }
 
 .urlbarForm {
@@ -48,20 +48,13 @@
     }
     #titleBar {
       display: inline-block;
-      background: @chromePrimary;
+      background:rgba(243, 243, 243, 0);
       color: @chromeText;
       font-size: 15px;
       max-width: 100%;
       overflow-x: hidden;
       text-overflow: ellipsis;
       margin-top: 5px;
-      /*
-      &:focus {
-        -webkit-user-select: none;
-        background: @chromePrimary;
-        color: @chromeText;
-      }
-      */
     }
     .startButtons {
       display: none;
@@ -73,10 +66,10 @@
 
     .urlbarIcon {
       display: inline-block;
-      opacity: 0.6;
+      opacity: 0.4;
       position: relative;
-      left: 0px;
-      top: -3px;
+      left: 2px;
+      top: -2px;
       min-width: 0;
 
       &[class*=" fa-"] {
@@ -105,7 +98,7 @@
     position: absolute;
     right: 10px;
     text-align: right;
-    top: 7px;
+    top: 8px;
   }
 
   /* Disable selection of button text */
@@ -122,6 +115,7 @@
     border: none;
     border-radius: @borderRadiusURL;
     box-sizing: border-box;
+    box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
     color: @chromeText;
     font-size: @defaultFontSize;
     font-weight: normal;

less/tabs.less

@@ -45,21 +45,25 @@
   justify-content: center;
 
   &:not(.isPinned) {
-    background: @chromeTertiary;
+   border-radius: @borderRadiusTabs @borderRadiusTabs 0px 0px;
+   border-width: 1px 1px 0;
+   background: #DEDEDE;
+   border: 1px solid @chromeTertiary;
+   border-bottom: 1px;
   }
 
   .tabTitle {
     -webkit-user-select: none;
     box-sizing: border-box;
     display: inline-block;
-    font-size: 12px;
+    font-size: 11.5px;
     overflow: hidden;
     text-overflow: ellipsis;
     line-height: 16px;
     white-space: nowrap;
     vertical-align: middle;
     width: calc(~'100% - 40px');
-    height: 14px;
+    height: 15px;
   }
   .tabIcon {
     background-position: center;
@@ -100,8 +104,10 @@
   }
 
   &.active {
-    background: @activeTabDefaultColor;
-              height: 28px;
+      background: linear-gradient(to bottom, white, @chromePrimary, );
+      height: 28px;
+      box-shadow: inset 1px 1px 2px 0px white;
+      box-shadow: 0px -1px 4px 0px rgba(51, 51, 51, 0.12);
       border: 1px solid #bbb;
       border-bottom: 1px;
   }
@@ -247,6 +253,7 @@
   align-items: center;
   background-color: #aaaaaa;
   border-radius: @borderRadius;
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
   box-sizing: border-box;
   display: inline-block;
   margin: auto 2.5px;
@@ -255,7 +262,8 @@
   vertical-align: middle;
 
   &:hover {
-    background-color: lighten(@chromeControlsBackground2, 10%);
+    background-color: @chromePrimary;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.0);
   }
 
   &.audioPlaybackActive {
@@ -264,6 +272,7 @@
 
   &.active {
     background-color: @chromePrimary;
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.0);
 
   }
 }

less/window.less

@@ -27,7 +27,8 @@ html,
 }
 
 .top {
-  background: @chromePrimary;
+//  background: @chromePrimary;
+    background: linear-gradient(to bottom, white, @chromeSecondary, );
 
   .backforward {
     display: flex;