fix tab audio icon

1 files changed, 113 insertions, 90 deletions

diff --git a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
index f69d2b8..1c00ea8 100644
--- a/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
+++ b/arc-firefox-theme/chrome/browser/sass/_browser-sass.scss
@@ -648,6 +648,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
   border-image: url("chrome://browser/skin/custom_images/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,
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
@@ -661,6 +662,12 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
   box-shadow: var(--toolbarbutton-hover-boxshadow);
 }
 
+//:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
+//:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+//  margin-top: 4px;
+//  margin-bottom: 4px;
+//}
+
 #TabsToolbar .toolbarbutton-1[open]:not([disabled=true]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 #TabsToolbar .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
 #TabsToolbar .toolbarbutton-1:not([disabled=true]):not([open]):hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
@@ -671,12 +678,6 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
   background-clip: padding-box;
 }
 
-//:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
-//:-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-//  margin-top: 4px;
-//  margin-bottom: 4px;
-//}
-
 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1:not([open="true"]) > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open="true"]) > .toolbarbutton-icon,
 :-moz-any(#TabsToolbar, #nav-bar) .toolbarbutton-1[open="true"] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
@@ -749,30 +750,41 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
 }
 
 //#back-button > .toolbarbutton-icon {
-//  border-radius: 2px;
+//  border-radius: 10000px;
 //  background-clip: padding-box;
-//  padding: 3px 7px;
+//  padding: 6px;
 //  border: none;
-//  box-shadow: none;
-//  background: none !important;
+//  box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
+//              0 0 0 1px hsla(0,0%,100%,.3) inset,
+//              0 0 0 1px hsla(210,54%,20%,.25),
+//              0 1px 0 hsla(210,54%,20%,.35);
+//  background-image: linear-gradient(hsla(0,0%,100%,.6), hsla(0,0%,100%,.1));
 //  transition-property: background-color, box-shadow;
 //  transition-duration: 250ms;
 //}
 
 //#back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
-//  background-color: transparent;
-//  box-shadow: none;
+//  background-color: hsla(210,48%,96%,.75);
+//  box-shadow: 0 1px 0 hsla(0,0%,100%,.3) inset,
+//              0 0 0 1px hsla(0,0%,100%,.3) inset,
+//              0 0 0 1px hsla(210,54%,20%,.3),
+//              0 1px 0 hsla(210,54%,20%,.4),
+//              0 0 4px hsla(210,54%,20%,.2);
 //}
 
 //#back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
 //#back-button[open="true"] > .toolbarbutton-icon {
-//  background-color: red;
-//  box-shadow: none;
+//  background-color: hsla(210,54%,20%,.15);
+//  box-shadow: 0 1px 1px hsla(210,54%,20%,.1) inset,
+//              0 0 1px hsla(210,54%,20%,.2) inset,
+//              0 0 0 1px hsla(210,54%,20%,.4),
+//              0 1px 0 hsla(210,54%,20%,.2);
 //  transition: none;
 //}
 
 //#main-window:not([customizing]) #back-button[disabled] > .toolbarbutton-icon {
-//  box-shadow: none !important;
+//  box-shadow: 0 0 0 1px hsla(210,54%,20%,.55),
+//              0 1px 0 hsla(210,54%,20%,.65) !important;
 //  transition: none;
 //}
 
@@ -781,26 +793,27 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
 }
 
 #forward-button {
+//  -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
+  padding: 0;
   margin-left: 2px;
   margin-right: 2px;
-  //-moz-box-align: stretch;
-  padding: 0;
 }
 
-#forward-button > .toolbarbutton-icon {
+//#forward-button > .toolbarbutton-icon {
 //  background-clip: padding-box;
-//  padding: 3px 7px;
-//  border: 1px solid transparent;
+//  padding-left: 9px;
+//  padding-right: 3px;
+//  border: 1px solid #9a9a9a;
 //  border-left-style: none;
 //  border-radius: 0;
-}
+//}
 
 //window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
 //  transition: margin-left 150ms ease-out;
 //}
 
 //window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
-//  margin-left: 5px;
+//  margin-left: -30px;
 //}
 
 //window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
@@ -810,7 +823,7 @@ toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-ba
 
 //window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
 //  /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
-//  margin-left: 10px;
+//  margin-left: -30.01px;
 //}
 
 /* tabview menu item */
@@ -1737,7 +1750,7 @@ toolbar[brighttext] #loop-button {
 
 //window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
 //  clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");
-//  -moz-margin-start: -5px;
+//  margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap));
 //}
 
 //window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
@@ -1926,7 +1939,7 @@ toolbar[brighttext] #loop-button {
 }
 
 #notification-popup-box:not([hidden]) + #identity-box {
-  padding-inline-start: 10px;
+  padding-inline-start: 5px;
   border-radius: 0;
 }
 
@@ -2836,10 +2849,10 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   -moz-box-align: center;
 }
 
-#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
-  //margin-top: 3px;
-  //margin-bottom: 3px;
-}
+//#bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
+//  margin-top: 3px;
+//  margin-bottom: 3px;
+//}
 
 #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-icon,
 #bookmarks-menu-button[disabled][cui-areatype="toolbar"] > .toolbarbutton-menu-dropmarker,
@@ -2919,7 +2932,6 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   background-color: Window;
 }
 
-
 /* Findbar */
 .browserContainer > findbar {
   background-color: $bg_color;
@@ -3013,6 +3025,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 
 :root {
   --tab-toolbar-navbar-overlap: 1px;
+  --navbar-tab-toolbar-highlight-overlap: 1px;
   --tab-min-height: 31px;
 }
 #TabsToolbar {
@@ -3101,9 +3114,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 .tab-icon-overlay {
   width: 16px;
   height: 16px;
-  margin-top: 10px;
+  margin-top: -12px;
   -moz-margin-start: -16px;
-  display: none;
+  position: relative;
 }
 
 .tab-icon-overlay[crashed] {
@@ -3121,21 +3134,29 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 }
 
 .tab-icon-overlay[soundplaying] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio-small.svg#tab-audio");
 }
 
 .tab-icon-overlay[muted]:not([crashed]) {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio-small.svg#tab-audio-muted");
 }
 
-#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
+.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[soundplaying] {
+  list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio-small.svg#tab-audio");
 }
 
-#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
+.tabbrowser-tab[visuallyselected=true] .tab-icon-overlay[muted]:not([crashed]) {
+  list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio-small.svg#tab-audio-muted");
 }
 
+//#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
+//  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
+//}
+
+//#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
+//  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
+//}
+
 .tab-throbber[busy] {
   list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
 }
@@ -3163,76 +3184,76 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 }
 
 .tab-icon-sound[soundplaying] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab");
 }
 
 .tab-icon-sound[soundplaying]:hover {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab-hover");
 }
 
 .tab-icon-sound[soundplaying]:hover:active {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab-pressed");
 }
 
 .tab-icon-sound[muted] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab-muted");
 }
 
 .tab-icon-sound[muted]:hover {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
 }
 
 .tab-icon-sound[muted]:hover:active {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
 }
 
 .tab-icon-sound[visuallyselected=true][soundplaying] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio");
 }
 
 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-hover");
 }
 
 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-pressed");
 }
 
 .tab-icon-sound[visuallyselected=true][muted] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-muted");
 }
 
 .tab-icon-sound[visuallyselected=true][muted]:hover {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-muted-hover");
 }
 
 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
+  list-style-image: url("chrome://browser/skin/custom_images/#{$asset_path}/tabs/tab-audio.svg#tab-audio-muted-pressed");
 }
 
-#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
-}
+//#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
+//  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
+//}
 
-#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
-}
+//#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
+//  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
+//}
 
-#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
-}
+//#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
+//  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
+//}
 
-#TabsToolbar[brighttext] .tab-icon-sound[muted] {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
-}
+//#TabsToolbar[brighttext] .tab-icon-sound[muted] {
+//  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
+//}
 
-#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
-}
+//#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
+//  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
+//}
 
-#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
-  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
-}
+//#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
+//  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
+//}
 
 .tab-background,
 .tabs-newtab-button {
@@ -3252,7 +3273,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path_2}/tabs/tab-overflow-indicator.png);
   background-size: 100% 100%;
   width: 14px;
-  margin-bottom: var(--tab-toolbar-navbar-overlap);
+  margin-bottom: var(--navbar-tab-toolbar-highlight-overlap);
   pointer-events: none;
   position: relative;
   z-index: 3; /* the selected tab's z-index + 1 */
@@ -3404,10 +3425,9 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 /* new tab button border and gradient on hover */
 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([visuallyselected=true]),
 .tabs-newtab-button:hover {
-  background-image:
-    url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-start-hover.svg),
-    url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-middle-hover.svg),
-    url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-end-hover.svg);
+  background-image: url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-start-hover.svg),
+                    url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-middle-hover.svg),
+                    url(chrome://browser/skin/custom_images/#{$darker_asset_path}/tabs/tab-end-hover.svg);
   background-position: left bottom, 30px bottom, right bottom;
   background-repeat: no-repeat;
   background-size: 30px 100%, calc(100% - (2 * 30px)) 100%, 30px 100%;
@@ -3442,27 +3462,30 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
   background-size: 85% 100%;
 }
 
-///* Background tab separators (3px wide).
-//   Also show separators beside the selected tab when dragging it. */
+/* Tab separators */
+
+//.tabbrowser-tab::after,
+//.tabbrowser-tab::before {
+//  width: 1px;
+//  -moz-margin-start: -1px;
+//  background-image: linear-gradient(transparent 5px,
+//                                    currentColor 5px,
+//                                    currentColor calc(100% - 4px),
+//                                    transparent calc(100% - 4px));
+//  opacity: 0.2;
+//}
+
+//#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
+//#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
+//  opacity: 0.4;
+//}
+
+/* Also show separators beside the selected tab when dragging it. */
 //#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
 //.tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
 //#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
-//  -moz-margin-start: -1.5px;
-//  -moz-margin-end: -1.5px;
-//  background-image: var(--tab-separator-image);
-//  background-position: left bottom var(--tab-toolbar-navbar-overlap);
-//  background-repeat: no-repeat;
-//  background-size: var(--tab-separator-size);
-//  opacity: var(--tab-separator-opacity);
 //  content: "";
 //  display: -moz-box;
-//  width: 3px;
-//}
-
-//#TabsToolbar[brighttext] {
-//  --tab-separator-image: linear-gradient(transparent 0%, transparent 15%, currentColor 15%, currentColor 90%, transparent 90%);
-//  --tab-separator-size: 1px 100%;
-//  --tab-separator-opacity: 0.4;
 //}
 
 /* New tab button */
@@ -3604,7 +3627,7 @@ richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-
 }
 
 #TabsToolbar .toolbarbutton-1 {
-  margin-bottom: var(--tab-toolbar-navbar-overlap);
+  margin-bottom: var(--navbar-tab-toolbar-highlight-overlap);
 }
 
 #alltabs-button {