diff --git a/app/renderer/components/styles/tab.js b/app/renderer/components/styles/tab.js index 9f1f0aeeebb..33d33ee869c 100644 --- a/app/renderer/components/styles/tab.js +++ b/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})` } diff --git a/less/bookmarksToolbar.less b/less/bookmarksToolbar.less index 793a8dc8f8a..fff1722ea07 100644 --- a/less/bookmarksToolbar.less +++ b/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; diff --git a/less/button.less b/less/button.less index 21cd0921586..cc5abe41239 100644 --- a/less/button.less +++ b/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; diff --git a/less/navigationBar.less b/less/navigationBar.less index 9c98effafd6..14ec53bfa58 100644 --- a/less/navigationBar.less +++ b/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; } } diff --git a/less/tabs.less b/less/tabs.less index 4776c65af83..f3e169e683d 100644 --- a/less/tabs.less +++ b/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,32 +151,30 @@ } &.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 { @@ -190,52 +182,49 @@ } &.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 { diff --git a/less/variables.less b/less/variables.less index 0a4e0794f63..60ae20920e1 100644 --- a/less/variables.less +++ b/less/variables.less @@ -4,8 +4,8 @@ @linkColor: #0099CC; @highlightBlue: #37A9FD; -@borderRadius: 4px; -@borderRadiusTabs: 4px; +@borderRadius: 2px; +@borderRadiusTabs: 0; @borderRadiusURL: 4px; @borderRadiusUIbox: 8px; @borderRadiusModal: 8px; @@ -20,15 +20,17 @@ @chromeTertiary: #c7c7c7; @chromeText: #555555; -@tabsBackground: #dddddd; +@tabsBackground: #ddd; +@tabsBackgroundInactive: #ddd; @navigationBarBackground: @chromeSecondary; -@navigationBarBackground: white; +@navigationBarBackground: #f7f7f7; +@navigationBarBackgroundActive: #fff; @chromeBorderColor: @chromePrimary; @chromeControlsBackground: #bbb; @chromeControlsWarningBackground: @chromePrimary; //@chromeControlsBackground2: @chromeSecondary; @chromeControlsBackground2: white; -@toolbarBackground: #eee; +@toolbarBackground: #f5f5f5; @toolbarBorderColor: #ccc; @menuSelectionColor: #2F7AFB; @errorTextColor: #999; @@ -46,7 +48,7 @@ @loadTimeColor: @highlightBlue; @activeTabDefaultColor: @chromePrimary; @buttonColor: #5a5a5a; -@braveOrange: rgb(255, 80, 0); +@braveOrange: rgb(255, 85, 0); @braveLightOrange: #FF7A1D; @braveMediumOrange: rgb(232, 72, 0); @braveDarkOrange: #D44600; @@ -74,7 +76,7 @@ @navbarHeight: 36px; @downloadsBarHeight: 50px; -@tabsToolbarHeight: 28px; +@tabsToolbarHeight: 24px; @tabPagesHeight: 9px; @bookmarksToolbarHeight: 24px; @bookmarksToolbarWithFaviconsHeight: 28px; diff --git a/less/window.less b/less/window.less index 56e5663bbbf..b7ee63ae3ed 100644 --- a/less/window.less +++ b/less/window.less @@ -39,13 +39,14 @@ html, } .top { - background: linear-gradient(to bottom, #fbfbfb, #ededed, ); + background: linear-gradient(to bottom, #eaeaea, #f2f2f2, ); } .mainContainer { display: flex; flex-direction: row; flex-grow: 1; + box-shadow: 0 -1px 0 #bbb; width: 100%; .tabContainer {