tweak navbar separatorsfirefox-48-beta

7 files changed, 61 insertions, 34 deletions

diff --git a/arc-firefox-theme/chrome/browser/browser.css b/arc-firefox-theme/chrome/browser/browser.css
index b332f67..16e6109 100644
--- a/arc-firefox-theme/chrome/browser/browser.css
+++ b/arc-firefox-theme/chrome/browser/browser.css
@@ -519,8 +519,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
 
 #nav-bar #PanelUI-button,
 #nav-bar[brighttext] #PanelUI-button {
+  margin-top: -3px;
+  margin-bottom: -3px;
   background: none;
-  border-image: url("chrome://browser/skin/custom_images/navbar-separator.png") 0 0 0 2/0 0 0 2px; }
+  border-image: url("chrome://browser/skin/custom_images/light/navbar-separator.png") 0 0 0 2/0 0 0 2px; }
 
 .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover > .toolbarbutton-text,
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
@@ -591,15 +593,17 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
   width: 1px;
   height: 18px;
   -moz-margin-end: -1px;
-  background-image: linear-gradient(currentColor 0, currentColor 100%);
   background-position: center;
   background-repeat: no-repeat;
-  background-size: 1px 18px;
-  opacity: .2; }
+  background-size: 1px 18px; }
 
-:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator,
-:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
-  opacity: .3; }
+#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator,
+#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  background: #dcdfe3; }
+
+#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator,
+#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  background: rgba(82, 93, 118, 0.15); }
 
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   -moz-margin-start: -4px; }
diff --git a/arc-firefox-theme/chrome/browser/custom_images/dark/navbar-separator.png b/arc-firefox-theme/chrome/browser/custom_images/dark/navbar-separator.png
new file mode 100644
index 0000000..355acf7
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/custom_images/dark/navbar-separator.png
diff --git a/arc-firefox-theme/chrome/browser/custom_images/navbar-separator.png b/arc-firefox-theme/chrome/browser/custom_images/light/navbar-separator.png
index 3781790..3781790 100644
--- a/arc-firefox-theme/chrome/browser/custom_images/navbar-separator.png
+++ b/arc-firefox-theme/chrome/browser/custom_images/light/navbar-separator.png
diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
index dd77b4b..554a051 100644
--- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
+++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
@@ -652,8 +652,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
 
 #nav-bar #PanelUI-button,
 #nav-bar[brighttext] #PanelUI-button {
+  margin-top: -3px;
+  margin-bottom: -3px;
   background: none;
-  border-image: url("chrome://browser/skin/custom_images/navbar-separator.png") 0 0 0 2 / 0 0 0 2px;
+  border-image: url("chrome://browser/skin/custom_images/#{$asset_path}/navbar-separator.png") 0 0 0 2 / 0 0 0 2px;
 }
 
 
@@ -736,18 +738,27 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
   width: 1px;
   height: 18px;
   -moz-margin-end: -1px;
-  background-image: linear-gradient(currentColor 0, currentColor 100%);
   background-position: center;
   background-repeat: no-repeat;
   background-size: 1px 18px;
-  opacity: .2;
+  //opacity: .2;
 }
 
-:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator,
-:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
-  opacity: .3;
+#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator,
+#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  background: $borders_color;
 }
 
+#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator,
+#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  background: transparentize($header_fg, 0.65);
+}
+
+//:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator,
+//:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+//  opacity: .3;
+//}
+
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   -moz-margin-start: -4px;
   //margin-top: 3px;
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css
index c27e731..e860708 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css
@@ -519,8 +519,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
 
 #nav-bar #PanelUI-button,
 #nav-bar[brighttext] #PanelUI-button {
+  margin-top: -3px;
+  margin-bottom: -3px;
   background: none;
-  border-image: url("chrome://browser/skin/custom_images/navbar-separator.png") 0 0 0 2/0 0 0 2px; }
+  border-image: url("chrome://browser/skin/custom_images/dark/navbar-separator.png") 0 0 0 2/0 0 0 2px; }
 
 .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover > .toolbarbutton-text,
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
@@ -591,15 +593,17 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
   width: 1px;
   height: 18px;
   -moz-margin-end: -1px;
-  background-image: linear-gradient(currentColor 0, currentColor 100%);
   background-position: center;
   background-repeat: no-repeat;
-  background-size: 1px 18px;
-  opacity: .2; }
+  background-size: 1px 18px; }
 
-:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator,
-:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
-  opacity: .3; }
+#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator,
+#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  background: #2b2e39; }
+
+#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator,
+#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  background: rgba(207, 218, 231, 0.15); }
 
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   -moz-margin-start: -4px; }
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css
index 32f3f94..fde2007 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css
@@ -519,8 +519,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
 
 #nav-bar #PanelUI-button,
 #nav-bar[brighttext] #PanelUI-button {
+  margin-top: -3px;
+  margin-bottom: -3px;
   background: none;
-  border-image: url("chrome://browser/skin/custom_images/navbar-separator.png") 0 0 0 2/0 0 0 2px; }
+  border-image: url("chrome://browser/skin/custom_images/light/navbar-separator.png") 0 0 0 2/0 0 0 2px; }
 
 .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover > .toolbarbutton-text,
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
@@ -591,15 +593,17 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
   width: 1px;
   height: 18px;
   -moz-margin-end: -1px;
-  background-image: linear-gradient(currentColor 0, currentColor 100%);
   background-position: center;
   background-repeat: no-repeat;
-  background-size: 1px 18px;
-  opacity: .2; }
+  background-size: 1px 18px; }
 
-:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator,
-:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
-  opacity: .3; }
+#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator,
+#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  background: #dcdfe3; }
+
+#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator,
+#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  background: rgba(207, 218, 231, 0.15); }
 
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   -moz-margin-start: -4px; }
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css
index b332f67..16e6109 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-light.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css
@@ -519,8 +519,10 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
 
 #nav-bar #PanelUI-button,
 #nav-bar[brighttext] #PanelUI-button {
+  margin-top: -3px;
+  margin-bottom: -3px;
   background: none;
-  border-image: url("chrome://browser/skin/custom_images/navbar-separator.png") 0 0 0 2/0 0 0 2px; }
+  border-image: url("chrome://browser/skin/custom_images/light/navbar-separator.png") 0 0 0 2/0 0 0 2px; }
 
 .findbar-button:not(:-moz-any([checked="true"], [disabled="true"])):hover > .toolbarbutton-text,
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
@@ -591,15 +593,17 @@ menuitem:not([type]):not(.menuitem-tooltip):not(.menuitem-iconic-tooltip) {
   width: 1px;
   height: 18px;
   -moz-margin-end: -1px;
-  background-image: linear-gradient(currentColor 0, currentColor 100%);
   background-position: center;
   background-repeat: no-repeat;
-  background-size: 1px 18px;
-  opacity: .2; }
+  background-size: 1px 18px; }
 
-:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbaritem-combined-buttons > separator,
-:-moz-any(#TabsToolbar, #nav-bar)[brighttext] .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
-  opacity: .3; }
+#nav-bar .toolbaritem-combined-buttons:not(:hover) > separator,
+#nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  background: #dcdfe3; }
+
+#TabsToolbar .toolbaritem-combined-buttons:not(:hover) > separator,
+#TabsToolbar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before {
+  background: rgba(82, 93, 118, 0.15); }
 
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
   -moz-margin-start: -4px; }