create dual_color_tab_attention_indicator.css

This commit is contained in:
MrOtherGuy
2024-04-23 17:33:02 +03:00
parent 1ca25bb300
commit 44e1db76fa
3 changed files with 26 additions and 1 deletions
@@ -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;
}