From aaea6c1b2f50cc9e302a938093a23072d8c0368f Mon Sep 17 00:00:00 2001
From: John O'Nolan <john@onolan.org>
Date: Fri, 30 Sep 2016 12:42:07 +0200
Subject: [PATCH] Introduce minor toolbar visual refinements

---
 less/button.less        | 10 +++++-----
 less/contextMenu.less   |  5 +++++
 less/navigationBar.less | 26 ++++++++++++++------------
 less/tabs.less          |  2 +-
 less/variables.less     |  6 +++---
 less/window.less        |  2 +-
 6 files changed, 29 insertions(+), 22 deletions(-)

diff --git a/less/button.less b/less/button.less
index a788abe32be..a9310cf3995 100644
--- a/less/button.less
+++ b/less/button.less
@@ -24,10 +24,10 @@ span.browserButton,
 .browserButton {
   cursor: default;
   display: inline-block;
-  line-height: 30px;
-  width: 30px;
-  height: 28px;
-  font-size: 16px;
+  line-height: 25px;
+  width: 25px;
+  height: 25px;
+  font-size: 15px;
   color: @buttonColor;
   border-radius: @borderRadius;
   margin: 0 3px;
@@ -57,7 +57,7 @@ span.browserButton,
     width: 24px;
     height: 100%;
     opacity: 0.5;
-    background: url('../img/icon_new_frame.svg') 0 0 / contain no-repeat;
+    background: url('../img/icon_new_frame.svg') 50% 20% scroll / 20px no-repeat;
     &:hover {
       opacity: 0.8;
     }
diff --git a/less/contextMenu.less b/less/contextMenu.less
index 08f324eeb1b..e280b85fb77 100644
--- a/less/contextMenu.less
+++ b/less/contextMenu.less
@@ -118,6 +118,11 @@
       &:hover {
         background-color: lighten(@menuSelectionColor, 5%);
         color: white;
+
+        .accelerator,
+        .submenuIndicator {
+          color: #fff;
+        }
       }
     }
   }
diff --git a/less/navigationBar.less b/less/navigationBar.less
index 0a1140f60a0..e29183f811f 100644
--- a/less/navigationBar.less
+++ b/less/navigationBar.less
@@ -568,7 +568,7 @@
       -webkit-app-region: no-drag;
       -webkit-user-select: none;
       color: @buttonColor;
-      border-radius: 50%;
+      border-radius: 4px;
       font-weight: 300;
       opacity: 0.2;
 
@@ -585,7 +585,7 @@
 
     .back,
     .forward {
-      font-size: 35px;
+      font-size: 25px;
       text-align: center;
     }
   }
@@ -595,7 +595,7 @@
   width: 0; // Fixes #4298
   align-items: center;
   justify-content: center;
-  height: 24px;
+  height: 25px;
   padding: 0 10px;
 
   display: flex;
@@ -611,9 +611,9 @@
     content: ' ';
     position: absolute;
     background: #fff;
-    border: 2px solid @focusUrlbarOutline;
+    border: 1px solid @focusUrlbarOutline;
     border-radius: 4px;
-    box-shadow: 0 0 1px @focusUrlbarOutline, inset 0 0 2px @focusUrlbarOutline, inset 0 1px 8px rgba(0, 137, 255, 0.5);
+    box-shadow: 0 0 1px @focusUrlbarOutline, inset 0 0 2px @focusUrlbarOutline, inset 0 1px 8px rgba(0, 137, 255, 0.1);
     color: #333;
     outline: none;
     top: 0;
@@ -626,7 +626,7 @@
   #navigator:not(.titleMode) & {
     background: white;
     border-radius: @borderRadiusURL;
-    box-shadow: inset 0 1px 1px rgba(0,0,0,0.3);
+    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1), inset 0 1px 0 rgba(0,0,0,0.05), inset 0 1px 1px rgba(0,0,0,0.1);
     color: @chromeText;
   }
   @media (max-width: @breakpointNarrowViewport) {
@@ -671,11 +671,15 @@
       display: inline-block;
       background:rgba(243, 243, 243, 0);
       color: @chromeText;
-      font-size: 15px;
+      font-size: 13px;
       max-width: 100%;
       overflow-x: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+
+      strong {
+        font-weight: 600;
+      }
     }
 
     .endButtons {
@@ -691,7 +695,7 @@
 
       &[class*=" fa-"] {
         margin-right: 5px;
-        margin-top: 3px;
+        margin-top: 1px;
         font-size: 14px;
         min-height: 12px;
         color: @chromeText;
@@ -766,7 +770,7 @@
     cursor: text;
     font-size: @defaultFontSize;
     font-weight: normal;
-    margin: 3px 0 0 3px;
+    margin: 2px 0 0 3px;
     outline: none;
     text-overflow: ellipsis;
     flex-grow: 1;
@@ -820,7 +824,5 @@
                                       url(../app/extensions/brave/img/braveBtn2x.png) 2x,
                                       url(../app/extensions/brave/img/braveBtn3x.png) 3x);
   background-repeat: no-repeat;
-  height: 27px;
-  margin-top: 3px;
+  height: 24px;
 }
-
diff --git a/less/tabs.less b/less/tabs.less
index c83aaa02c66..a14851af876 100644
--- a/less/tabs.less
+++ b/less/tabs.less
@@ -250,7 +250,7 @@
   padding-right: 2px;
   .browserButton {
     display: inline-block;
-    line-height: 21px;
+    line-height: 20px;
   }
 }
 
diff --git a/less/variables.less b/less/variables.less
index 16cdeeacf7a..ed7a8885cc8 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -18,7 +18,7 @@
 @chromeTertiary: #c7c7c7;
 @chromeText: #555555;
 
-@tabsBackground: #ccc;
+@tabsBackground: #dcdcdc;
 @navigationBarBackground: @chromeSecondary;
 @navigationBarBackground: white;
 @chromeBorderColor: @chromePrimary;
@@ -71,10 +71,10 @@
 @bookmarksFolderIconSize: 15px;
 
 @navbarButtonSpacing: 4px;
-@navbarButtonWidth: 35px;
+@navbarButtonWidth: 21px;
 @navbarBraveButtonWidth: 23px;
 @navbarBraveButtonMarginLeft: 80px;
-@navbarLeftMarginDarwin: 70px;
+@navbarLeftMarginDarwin: 76px;
 
 @findbarBackground: #F7F7F7;
 
diff --git a/less/window.less b/less/window.less
index 45892ede269..d3e4af6b472 100644
--- a/less/window.less
+++ b/less/window.less
@@ -15,7 +15,7 @@
   }
 }
 :root {
-  --default-font-family: "Arial";
+  --default-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
 }
 
 * {