fixed shadowing, colors, alignments on mac

brave · Oct 18, 2016 · a8c3d3f · a8c3d3f
1 parent 0df2f61
commit a8c3d3f
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 15 deletions.
diff --git a/less/button.less b/less/button.less
@@ -56,7 +56,7 @@ span.browserButton,
     font-size: 0px;
     width: 24px;
     height: 100%;
-    opacity: 0.5;
+    opacity: 0.65;
     background: url('../img/icon_new_frame.svg') 50% 20% scroll / 20px no-repeat;
     &:hover {
       opacity: 0.8;

diff --git a/less/navigationBar.less b/less/navigationBar.less
@@ -337,7 +337,7 @@
 // Styles had to be reworked to properly position the new caption buttons for Windows
 .navbarCaptionButtonContainer {
   display: flex;
-  border-bottom: 1px solid #aaaaaa;
+  border-bottom: 1px solid #bbb;
 
   &.allowDragging {
     -webkit-app-region: drag;

diff --git a/less/tabs.less b/less/tabs.less
@@ -12,6 +12,7 @@
   overflow: auto;
   padding: 0 4px 0 0;
   height: @tabsToolbarHeight;
+  margin-top: 2px;
   position: relative;
   white-space: nowrap;
   z-index: @zindexTabs;
@@ -42,22 +43,23 @@
 }
 
 .tab {
-  background: rgba(222, 222, 222, 0.6);
+  // background: rgba(222, 222, 222, 0.6);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1));
   border-radius: @borderRadiusTabs @borderRadiusTabs 0px 0px;
   border-width: 1px 1px 0;
   box-sizing: border-box;
   color: #3B3B3B;
   display: flex;
   height: 22px;
-  margin: 0;
+  margin-top: 2px;
   transition: transform 200ms ease;
   left: 0;
   opacity: 1.0;
   padding: 0;
   width: 100%;
   align-items: center;
   justify-content: center;
-  border: 1px solid @chromeTertiary;
+  border: 1px solid rgba(0, 0, 0, 0.0);
   border-bottom: 1px;
 
   .tabTitle {
@@ -115,7 +117,7 @@
   &.active {
       background: linear-gradient(to bottom, white, @chromePrimary, );
       height: 24px;
-      margin-top: -1px;
+      margin-top: 1px;
       box-shadow: inset 1px 1px 2px 0px white;
       box-shadow: 0px -1px 4px 0px rgba(51, 51, 51, 0.12);
       border: 1px solid #bbb;
@@ -141,7 +143,7 @@
   }
 
   &:not(.active):hover {
-    background: linear-gradient(to bottom, white, @chromePrimary);
+    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), rgba(250, 250, 250, 0.4), );
     &.private {
       background: lighten(@privateTabBackground, 20%);
     }
@@ -176,7 +178,7 @@
 .tabArea {
   box-sizing: border-box;
   display: inline-block;
-  padding: 0 2px 0 0;
+  padding: 0 4px 0 0;
   position: relative;
   vertical-align: top;
   overflow: hidden;
@@ -242,6 +244,7 @@
   background: @tabsBackground;
   display: flex;
   height: @tabsToolbarHeight;
+//  margin-top: 2px;
   -webkit-user-select: none;
 }
 
@@ -250,7 +253,7 @@
   padding-right: 2px;
   .browserButton {
     display: inline-block;
-    line-height: 20px;
+    line-height: 26px;
   }
 }
 
@@ -270,11 +273,12 @@
   }
 
   &.singlePage {
-    height: 3px;
+    height: 1px;
   }
 
   >div {
     display: flex
+//    margin-top: 4px;
   }
 }
 
@@ -286,6 +290,7 @@
   box-sizing: border-box;
   display: inline-block;
   margin: auto 2.5px;
+  margin-top: 3px;
   height: 6px;
   width: 36px;
   vertical-align: middle;
@@ -313,7 +318,7 @@
     color: #a0a0a0;
     font-size: 21px !important;
     height: 20px;
-    line-height: 17px !important;
+    line-height: 19px !important;
     text-align: center;
     vertical-align: top;
     margin-top: 2px;
@@ -346,6 +351,7 @@
 
 .pinnedTabs {
   margin-left: 9px;
+  margin-top: 2px;
 }
 
 .segmentedControl {

diff --git a/less/variables.less b/less/variables.less
@@ -18,7 +18,7 @@
 @chromeTertiary: #c7c7c7;
 @chromeText: #555555;
 
-@tabsBackground: #dcdcdc;
+@tabsBackground: #dddddd;
 @navigationBarBackground: @chromeSecondary;
 @navigationBarBackground: white;
 @chromeBorderColor: @chromePrimary;
@@ -64,8 +64,8 @@
 
 @navbarHeight: 36px;
 @downloadsBarHeight: 50px;
-@tabsToolbarHeight: 23px;
-@tabPagesHeight: 12px;
+@tabsToolbarHeight: 26px;
+@tabPagesHeight: 9px;
 @bookmarksToolbarHeight: 24px;
 @bookmarksToolbarWithFaviconsHeight: 28px;
 @bookmarksFileIconSize: 13px;

diff --git a/less/window.less b/less/window.less
@@ -47,7 +47,7 @@ html,
 }
 
 .top {
-    background: linear-gradient(to bottom, white, @chromeSecondary, );
+    background: linear-gradient(to bottom, #fbfbfb, #ededed, );
 }
 
 .mainContainer {
-Original file line number
+Diff line change
@@ Expand Up / @@ -47,7 +47,7 @@ html, @@
     }
     .top {
-        background: linear-gradient(to bottom, white, @chromeSecondary, );
+        background: linear-gradient(to bottom, #fbfbfb, #ededed, );
     }
     .mainContainer {
@@ Expand Down @@