From 5300c3ac52759d9e7dce3e846a172a8d153140b8 Mon Sep 17 00:00:00 2001 From: Horst3180 Date: Mon, 1 Aug 2016 17:34:56 +0200 Subject: tweak navbar separators --- arc-firefox-theme/chrome/browser/browser.css | 18 +++++++++------- .../custom_images/dark/navbar-separator.png | Bin 0 -> 138 bytes .../custom_images/light/navbar-separator.png | Bin 0 -> 133 bytes .../browser/custom_images/navbar-separator.png | Bin 133 -> 0 bytes .../chrome/browser/sass/_browser-sass.scss | 23 +++++++++++++++------ .../chrome/browser/sass/browser-dark.css | 18 +++++++++------- .../chrome/browser/sass/browser-darker.css | 18 +++++++++------- .../chrome/browser/sass/browser-light.css | 18 +++++++++------- 8 files changed, 61 insertions(+), 34 deletions(-) create mode 100644 arc-firefox-theme/chrome/browser/custom_images/dark/navbar-separator.png create mode 100644 arc-firefox-theme/chrome/browser/custom_images/light/navbar-separator.png delete mode 100644 arc-firefox-theme/chrome/browser/custom_images/navbar-separator.png 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 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/custom_images/dark/navbar-separator.png differ diff --git a/arc-firefox-theme/chrome/browser/custom_images/light/navbar-separator.png b/arc-firefox-theme/chrome/browser/custom_images/light/navbar-separator.png new file mode 100644 index 0000000..3781790 Binary files /dev/null and b/arc-firefox-theme/chrome/browser/custom_images/light/navbar-separator.png differ diff --git a/arc-firefox-theme/chrome/browser/custom_images/navbar-separator.png b/arc-firefox-theme/chrome/browser/custom_images/navbar-separator.png deleted file mode 100644 index 3781790..0000000 Binary files a/arc-firefox-theme/chrome/browser/custom_images/navbar-separator.png and /dev/null differ 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; } -- cgit v1.2.3