fix loop and pocket icons

8 files changed, 94 insertions, 0 deletions

diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.css b/arc-firefox-theme/chrome/browser/sass/browser-dark.css
index 1e161fa..af404be 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-dark.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.css
@@ -4588,3 +4588,25 @@ notification.heartbeat {
 
 #userContext-icons[usercontextid="4"] > #userContext-indicator {
   list-style-image: url("chrome://browser/skin/usercontext/shopping.svg"); }
+
+#nav-bar #loop-button, #nav-bar
+toolbar[brighttext] #loop-button {
+  list-style-image: url("chrome://browser/skin/custom_images/dark/loop-toolbar-icons.svg") !important; }
+#TabsToolbar #loop-button, #TabsToolbar
+toolbar[brighttext] #loop-button {
+  list-style-image: url("chrome://browser/skin/custom_images/dark/loop-tabbar-icons.svg") !important; }
+#nav-bar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar
+toolbar[brighttext] #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar
+toolbar[brighttext] #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) {
+  list-style-image: url("chrome://browser/skin/custom_images/loop-toolbar-icons-active.svg") !important; }
+
+#nav-bar #pocket-button, #nav-bar
+toolbar[brighttext] #pocket-button {
+  list-style-image: url("chrome://browser/skin/custom_images/dark/pocket-toolbar-icons.svg") !important; }
+#TabsToolbar #pocket-button, #TabsToolbar
+toolbar[brighttext] #pocket-button {
+  list-style-image: url("chrome://browser/skin/custom_images/dark/pocket-tabbar-icons.svg") !important; }
+#nav-bar #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar
+toolbar[brighttext] #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar
+toolbar[brighttext] #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) {
+  list-style-image: url("chrome://browser/skin/custom_images/pocket-toolbar-icons-active.svg") !important; }
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-dark.scss b/arc-firefox-theme/chrome/browser/sass/browser-dark.scss
index 3c8fe99..cd34869 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-dark.scss
+++ b/arc-firefox-theme/chrome/browser/sass/browser-dark.scss
@@ -5,3 +5,5 @@ $darker: 'false';
 @import "_colors";
 @import "_drawing";
 @import "_browser-sass";
+@import "extensions/_loop.scss";
+@import "extensions/_pocket.scss";
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.css b/arc-firefox-theme/chrome/browser/sass/browser-darker.css
index 9ed1070..2617066 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-darker.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.css
@@ -4588,3 +4588,25 @@ notification.heartbeat {
 
 #userContext-icons[usercontextid="4"] > #userContext-indicator {
   list-style-image: url("chrome://browser/skin/usercontext/shopping.svg"); }
+
+#nav-bar #loop-button, #nav-bar
+toolbar[brighttext] #loop-button {
+  list-style-image: url("chrome://browser/skin/custom_images/light/loop-toolbar-icons.svg") !important; }
+#TabsToolbar #loop-button, #TabsToolbar
+toolbar[brighttext] #loop-button {
+  list-style-image: url("chrome://browser/skin/custom_images/dark/loop-tabbar-icons.svg") !important; }
+#nav-bar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar
+toolbar[brighttext] #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar
+toolbar[brighttext] #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) {
+  list-style-image: url("chrome://browser/skin/custom_images/loop-toolbar-icons-active.svg") !important; }
+
+#nav-bar #pocket-button, #nav-bar
+toolbar[brighttext] #pocket-button {
+  list-style-image: url("chrome://browser/skin/custom_images/light/pocket-toolbar-icons.svg") !important; }
+#TabsToolbar #pocket-button, #TabsToolbar
+toolbar[brighttext] #pocket-button {
+  list-style-image: url("chrome://browser/skin/custom_images/dark/pocket-tabbar-icons.svg") !important; }
+#nav-bar #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar
+toolbar[brighttext] #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar
+toolbar[brighttext] #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) {
+  list-style-image: url("chrome://browser/skin/custom_images/pocket-toolbar-icons-active.svg") !important; }
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-darker.scss b/arc-firefox-theme/chrome/browser/sass/browser-darker.scss
index 1a5a601..ba6de7d 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-darker.scss
+++ b/arc-firefox-theme/chrome/browser/sass/browser-darker.scss
@@ -5,3 +5,5 @@ $darker: 'true';
 @import "_colors";
 @import "_drawing";
 @import "_browser-sass";
+@import "extensions/_loop.scss";
+@import "extensions/_pocket.scss";
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.css b/arc-firefox-theme/chrome/browser/sass/browser-light.css
index acdd8f6..905c57f 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-light.css
+++ b/arc-firefox-theme/chrome/browser/sass/browser-light.css
@@ -4588,3 +4588,25 @@ notification.heartbeat {
 
 #userContext-icons[usercontextid="4"] > #userContext-indicator {
   list-style-image: url("chrome://browser/skin/usercontext/shopping.svg"); }
+
+#nav-bar #loop-button, #nav-bar
+toolbar[brighttext] #loop-button {
+  list-style-image: url("chrome://browser/skin/custom_images/light/loop-toolbar-icons.svg") !important; }
+#TabsToolbar #loop-button, #TabsToolbar
+toolbar[brighttext] #loop-button {
+  list-style-image: url("chrome://browser/skin/custom_images/light/loop-tabbar-icons.svg") !important; }
+#nav-bar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar
+toolbar[brighttext] #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar
+toolbar[brighttext] #loop-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) {
+  list-style-image: url("chrome://browser/skin/custom_images/loop-toolbar-icons-active.svg") !important; }
+
+#nav-bar #pocket-button, #nav-bar
+toolbar[brighttext] #pocket-button {
+  list-style-image: url("chrome://browser/skin/custom_images/light/pocket-toolbar-icons.svg") !important; }
+#TabsToolbar #pocket-button, #TabsToolbar
+toolbar[brighttext] #pocket-button {
+  list-style-image: url("chrome://browser/skin/custom_images/light/pocket-tabbar-icons.svg") !important; }
+#nav-bar #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #nav-bar
+toolbar[brighttext] #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active), #TabsToolbar
+toolbar[brighttext] #pocket-button:not([disabled=true]):-moz-any([open], [checked], :hover:active) {
+  list-style-image: url("chrome://browser/skin/custom_images/pocket-toolbar-icons-active.svg") !important; }
diff --git a/arc-firefox-theme/chrome/browser/sass/browser-light.scss b/arc-firefox-theme/chrome/browser/sass/browser-light.scss
index 8b87ca0..fefa4f5 100644
--- a/arc-firefox-theme/chrome/browser/sass/browser-light.scss
+++ b/arc-firefox-theme/chrome/browser/sass/browser-light.scss
@@ -5,3 +5,5 @@ $darker: 'false';
 @import "_colors";
 @import "_drawing";
 @import "_browser-sass";
+@import "extensions/_loop.scss";
+@import "extensions/_pocket.scss";
diff --git a/arc-firefox-theme/chrome/browser/sass/extensions/_loop.scss b/arc-firefox-theme/chrome/browser/sass/extensions/_loop.scss
new file mode 100644
index 0000000..f6ca44a
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/sass/extensions/_loop.scss
@@ -0,0 +1,11 @@
+#loop-button,
+toolbar[brighttext] #loop-button {
+  #nav-bar & { list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/loop-toolbar-icons.svg") !important; }
+
+  #TabsToolbar & { list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/loop-tabbar-icons.svg") !important; }
+
+  #nav-bar &:not([disabled=true]):-moz-any([open],[checked],:hover:active),
+  #TabsToolbar &:not([disabled=true]):-moz-any([open],[checked],:hover:active) {
+    list-style-image: url("chrome://browser/skin/custom_images/loop-toolbar-icons-active.svg") !important;
+  }
+}
diff --git a/arc-firefox-theme/chrome/browser/sass/extensions/_pocket.scss b/arc-firefox-theme/chrome/browser/sass/extensions/_pocket.scss
new file mode 100644
index 0000000..e50bd7a
--- /dev/null
+++ b/arc-firefox-theme/chrome/browser/sass/extensions/_pocket.scss
@@ -0,0 +1,11 @@
+#pocket-button,
+toolbar[brighttext] #pocket-button {
+  #nav-bar & { list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/pocket-toolbar-icons.svg") !important; }
+
+  #TabsToolbar & { list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/pocket-tabbar-icons.svg") !important; }
+
+  #nav-bar &:not([disabled=true]):-moz-any([open],[checked],:hover:active),
+  #TabsToolbar &:not([disabled=true]):-moz-any([open],[checked],:hover:active) {
+    list-style-image: url("chrome://browser/skin/custom_images/pocket-toolbar-icons-active.svg") !important;
+  }
+}