create dual_color_tab_attention_indicator.css

chrome/dual_color_tab_attention_indicator.css

@@ -0,0 +1,23 @@
+/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/dual_color_tab_attention_indicator.css made available under Mozilla Public License v. 2.0
+See the above repository for updates as well as full license text. */
+
+/* Makes tab attention indicator use two separate colors - by default main color is the toolbar text color, and secondary is accent color of your OS. */
+
+#navigator-toolbox{
+  --uc-attention-primary-color: currentColor;
+  --uc-attention-secondary-color: AccentColor;
+  --uc-attention-indicator-radius: 2.5px;
+}
+.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
+.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
+#firefox-view-button[attention]{
+  background-image: radial-gradient(circle,
+    var(--uc-attention-primary-color) var(--uc-attention-indicator-radius),
+    transparent var(--uc-attention-indicator-radius),
+    var(--uc-attention-secondary-color) calc(var(--uc-attention-indicator-radius) + 2px),
+    transparent calc(var(--uc-attention-indicator-radius) + 2px)
+  ) !important;
+  background-position: center bottom calc(1px + var(--uc-attention-indicator-radius) + var(--tabs-navbar-shadow-size)) !important;
+  background-size: calc(2 * (var(--uc-attention-indicator-radius) + 2px)) calc(2 * (var(--uc-attention-indicator-radius) + 2px)) !important;
+  background-repeat: no-repeat;
+}

html_resources/tagmap.json

@@ -167,5 +167,6 @@
 "window_control_placeholder_support.css":["window-control","patch"],
 "vertical_tabs.css":["tabs","hack"],
 "bookmarks_below_content.css":["bookmarks","toolbars"],
-"overlay_fullscreen_toolbars.css":["toolbars","fullscreen"]
+"overlay_fullscreen_toolbars.css":["toolbars","fullscreen"],
+"dual_color_tab_attention_indicator.css":["tab","colors"]
 }

tags.csv

@@ -167,3 +167,4 @@ window_control_placeholder_support.css,window-control,patch
 vertical_tabs.css,tabs,hack
 bookmarks_below_content.css,bookmarks,toolbars
 overlay_fullscreen_toolbars.css,toolbars,fullscreen
+dual_color_tab_attention_indicator.css,tab,colors