fix #7546 - styling for flat interface

app/renderer/components/styles/tab.js

@@ -12,16 +12,14 @@ const styles = StyleSheet.create({
   },
 
   tab: {
-    background: 'linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.1))',
-    borderRadius: `${globalStyles.radius.borderRadiusTabs} ${globalStyles.radius.borderRadiusTabs} 0 0`,
-    borderWidth: '1px 1px 0',
+    borderWidth: '0 1px 0 0',
     borderStyle: 'solid',
-    borderColor: 'transparent',
+    borderColor: '#bbb',
     boxSizing: 'border-box',
-    color: '#3B3B3B',
+    color: '#5a5a5a',
     display: 'flex',
-    height: '23px',
-    marginTop: '2px',
+    height: '24px',
+    marginTop: '0',
     transition: `transform 200ms ease, ${globalStyles.transition.tabBackgroundTransition}`,
     left: '0',
     opacity: '1',
@@ -91,14 +89,13 @@ const styles = StyleSheet.create({
   },
 
   active: {
-    background: `linear-gradient(to bottom, #fff, ${globalStyles.color.chromePrimary})`,
-    height: '25px',
-    marginTop: '1px',
-    boxShadow: '0 -1px 4px 0 rgba(51, 51, 51, 0.12)',
-    borderWidth: '1px 1px 0',
+    background: `rgba(255, 255, 255, 1.0)`,
+    height: '24px',
+    marginTop: '0',
+    borderWidth: '0 1px 0 0',
     borderStyle: 'solid',
     borderColor: '#bbb',
-
+    color: '#000',
     ':hover': {
       background: `linear-gradient(to bottom, #fff, ${globalStyles.color.chromePrimary})`
     }

less/bookmarksToolbar.less

@@ -14,9 +14,7 @@
 }
 
 .bookmarksToolbar {
-  background: @toolbarBackground;
-  border-bottom: 1px solid #aaaaaa;
-  border-top: 1px solid #FFFFFF;
+  margin-bottom: 5px;
   box-sizing: border-box;
   display: flex;
   flex: 1;

less/button.less

@@ -23,7 +23,7 @@ span.buttonSeparator {
   display: inline-block;
   width: 20px;
   height: 13px;
-  margin: 9px 4px 0 0;
+  margin: 6px 2px 0 0;
   cursor: default;
   -webkit-mask-image: url('../img/toolbar/menu_btn.svg');
   -webkit-mask-repeat: no-repeat;

less/navigationBar.less

@@ -354,7 +354,7 @@
 // Styles had to be reworked to properly position the new caption buttons for Windows
 .navbarCaptionButtonContainer {
   display: flex;
-  border-bottom: 1px solid #bbb;
+  //border-bottom: 1px solid #bbb;
 
   &.allowDragging {
     -webkit-app-region: drag;
@@ -659,7 +659,7 @@
   justify-content: center;
   height: @urlbarFormHeight;
   padding: 0 10px 0 3px;
-
+  background: @navigationBarBackgroundActive;
   display: flex;
   flex-grow: 1;
   min-width: 0%; // allow the navigator to shrink
@@ -671,7 +671,7 @@
   input:focus + legend:before {
     content: ' ';
     position: absolute;
-    background: #fff;
+    background: @navigationBarBackgroundActive;
     border-radius: 4px;
     box-shadow: 0 0 1px @focusUrlbarOutline, inset 0 0 2px @focusUrlbarOutline, inset 0 1px 8px rgba(0, 137, 255, 0.1);
     color: #333;
@@ -684,11 +684,11 @@
   }
 
   #navigator:not(.titleMode) & {
-    background: white;
+    background: @navigationBarBackgroundActive;
     border-radius: @borderRadiusURL;
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
-    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);
+    box-shadow: inset 0 0 0 1px rgba(187, 187, 187, 1.0);
     color: @chromeText;
   }
   @media (max-width: @breakpointNarrowViewport) {
@@ -739,8 +739,8 @@
     // Create 25x25 squares and place the buttons at the center of each container
     .bookmarkButtonContainer,
     .addPublisherButtonContainer {
-      border: 1px solid #CBCBCB;
-      border-radius: @borderRadius;
+      border: 1px solid #bbb;
+      border-radius: @borderRadiusURL;
       box-sizing: border-box;
       display: flex;
       align-items: center;
@@ -776,13 +776,19 @@
   &.titleMode {
     &:extend(#navigator:not(.titleMode).urlbarForm);
     animation: fadeIn 1.2s;
+    background: none;
+    // border-radius: @borderRadiusURL;
+    // box-shadow: inset 0 0 0 1px rgba(187, 187, 187, 1.0);
+
+    .urlbarForm {
+      background: none;
+    }
 
     input {
       display: none;
     }
     #titleBar {
       display: inline-block;
-      background:rgba(243, 243, 243, 0);
       color: @chromeText;
       font-size: 13px;
       max-width: 100%;
@@ -828,12 +834,13 @@
   .urlbarForm {
     .loadTime {
       color: @loadTimeColor;
-      background: @navigationBarBackground;
+      // background: @navigationBarBackground;
       font-size: 12px;
       text-align: right;
       cursor: default;
 
       &.onFocus {
+        background: @navigationBarBackgroundActive;
         display: none;
       }
     }
@@ -849,7 +856,7 @@
     }
 
     .inputbar-wrapper {
-      background: white;
+      //background: white;
       display: flex;
       flex: 1 1 0;
       border-radius: 4px;
@@ -858,7 +865,7 @@
     }
 
     input {
-      background: @navigationBarBackground;
+      background: @navigationBarBackgroundActive;
       border: none;
       box-sizing: border-box;
       color: @chromeText;
@@ -871,7 +878,7 @@
       min-width: 0%; // allow the navigator to shrink
 
       &:hover {
-        background: @chromeControlsBackground2;
+        background: @navigationBarBackgroundActive;
       }
 
       &.private {
@@ -880,6 +887,7 @@
       }
 
       &:focus {
+        background: @navigationBarBackgroundActive;
         margin-right: 3px;
       }
     }

less/tabs.less

@@ -6,13 +6,11 @@
 
 .tabs {
   box-sizing: border-box;
-  background: none;
   display: flex;
   flex: 1;
   overflow: auto;
-  padding: 0 4px 0 0;
+  padding: 0;
   height: @tabsToolbarHeight;
-  margin-top: 2px;
   position: relative;
   white-space: nowrap;
   z-index: @zindexTabs;
@@ -41,13 +39,13 @@
   .newFrameButton {
     background: @buttonColor;
     min-width: 25px;
-    min-height: 25px;
+    min-height: 26px;
+    line-height: 26px;
     -webkit-mask-image: url('../img/toolbar/newtab_btn.svg');
     -webkit-mask-repeat: no-repeat;
     -webkit-mask-position: center;
     -webkit-mask-size: 12px 12px;
     -webkit-mask-origin: border;
-    border: 3px solid @tabsBackground;
     &:hover {
       opacity: 1.0;
       background-color: black;
@@ -58,7 +56,6 @@
 .tabArea {
   box-sizing: border-box;
   display: inline-block;
-  padding: 0 4px 0 0;
   position: relative;
   vertical-align: top;
   overflow: hidden;
@@ -71,14 +68,11 @@
   &:not(.isPinned) {
     flex: 1;
     &:first-child {
-      padding-left: 6px;
+      //padding-left: 6px;
     }
   }
 
   &.isPinned {
-    &:last-child {
-      padding-right: 6px;
-    }
     .tabIcon {
       margin: 0;
       padding: 0 4px;
@@ -128,12 +122,11 @@
   background: @tabsBackground;
   display: flex;
   height: @tabsToolbarHeight;
-//  margin-top: 2px;
+  border-top: 1px solid #bbb;
   -webkit-user-select: none;
 }
 
 .tabsToolbarButtons {
-  background: @tabsBackground;
   padding-right: 2px;
   .browserButton {
     display: inline-block;
@@ -142,9 +135,10 @@
 }
 
 .tabPages {
-  background: @tabsBackground;
+  background: none;
   display: flex;
   height: @tabPagesHeight;
+  margin-bottom: 5px;
   justify-content: center;
   position: relative;
   text-align: center;
@@ -157,85 +151,80 @@
   }
 
   &.singlePage {
-    height: 1px;
+    height: 0;
+    margin-bottom: 2px;
   }
 
   >div {
     display: flex
-//    margin-top: 4px;
   }
 }
 
 .tabPage {
   align-items: center;
-  background-color: #aaaaaa;
+  background-color: #fff;
   border-radius: @borderRadius;
-  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.2);
+  border: 1px solid #bbb;
   box-sizing: border-box;
   display: inline-block;
   margin: auto 2.5px;
-  margin-top: 3px;
-  height: 6px;
-  width: 36px;
+  height: 7px;
+  width: 35px;
   vertical-align: middle;
 
   &:hover {
-    background-color: #f0f0f0;
-    border: 2px solid white;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.0);
+    background-color: #fff;
+    border: 1px solid @braveOrange;
   }
 
   &.audioPlaybackActive {
     border: 1px solid @audioColor;
   }
 
   &.active {
-    background-color: @chromePrimary;
-    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.0);
-
+    background-color: @braveOrange;
+    border-width: 0;
   }
 }
 
 .prevTab,
 .nextTab {
     display: none;
-    color: #a0a0a0;
+    color: @buttonColor;
     font-size: 21px !important;
-    height: 20px;
-    line-height: 19px !important;
+    height: 26px;
+    line-height: 26px !important;
     text-align: center;
     vertical-align: top;
-    margin-top: 4px;
-    margin-left: -5px;
-    margin-right: -5px;
-    width: 30px;
+    margin-top: 0;
+    margin-left: 0;
+    margin-right: 0;
+    width: 22px;
 
   &:not([disabled]) {
     display: block;
-    background: @tabsBackground;
 
     &:hover {
-  //    background: lighten(#eeeeee, 10%);
-            color: white;
+      color: black;
     }
   }
 }
 
 .prevTab {
-  background: linear-gradient(to right, @chromeControlsBackground2, @tabsBackground);
-  border-bottom-left-radius: 0;
-  border-top-left-radius: @borderRadius;
+  border-radius: 0;
+  border-right: 1px solid #bbb;
+  padding-right: 2px;
 }
 
 .nextTab {
-  background: linear-gradient(to left, #afb0b4, #cccccc);
-  border-bottom-right-radius: 0;
-  border-top-right-radius: @borderRadius;
+  border-radius: 0;
+  padding-left: 2px;
 }
 
 .pinnedTabs {
-  margin-left: 9px;
-  margin-top: 2px;
+  margin-left: 0;
+  margin-top: 0;
+  background: @tabsBackgroundInactive;
 }
 
 .segmentedControl {