Merge pull request #4400 from JohnONolan/visual-refinements

Minor toolbar visual refinement suggestions
brave · Oct 4, 2016 · 0c6cbab · 0c6cbab
2 parents 17b083c + aaea6c1
commit 0c6cbab
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 22 deletions.
diff --git 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
@@ -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
@@ -583,7 +583,7 @@
       -webkit-app-region: no-drag;
       -webkit-user-select: none;
       color: @buttonColor;
-      border-radius: 50%;
+      border-radius: 4px;
       font-weight: 300;
       opacity: 0.2;
 
@@ -600,7 +600,7 @@
 
     .back,
     .forward {
-      font-size: 35px;
+      font-size: 25px;
       text-align: center;
     }
   }
@@ -610,7 +610,7 @@
   width: 0; // Fixes #4298
   align-items: center;
   justify-content: center;
-  height: 24px;
+  height: 25px;
   padding: 0 10px;
 
   display: flex;
@@ -626,9 +626,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;
@@ -641,7 +641,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) {
@@ -686,11 +686,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 {
@@ -706,7 +710,7 @@
 
       &[class*=" fa-"] {
         margin-right: 5px;
-        margin-top: 3px;
+        margin-top: 1px;
         font-size: 14px;
         min-height: 12px;
         color: @chromeText;
@@ -781,7 +785,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;
@@ -835,7 +839,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
@@ -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
@@ -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
@@ -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;
 }
 
 * {