remove extra brightness and make drop-shadow use colors set by variables

This commit is contained in:
MrOtherGuy 2021-05-13 09:05:22 +03:00
parent 2e824e3149
commit 0a40706d5e

View file

@ -3,7 +3,12 @@ See the above repository for updates as well as full license text. */
/* Replace the button background-colors with a glow effect */
/* Edit the color choices how you see fit */
:root{
--uc-icon-glow-primary: cyan;
--uc-icon-glow-secondary: cadetblue;
--uc-icon-glow-hover-primary: red;
--uc-icon-glow-hover-secondary: yellow;
}
/* Make backgrounds transparent */
.close-icon,
@ -34,14 +39,14 @@ toolbarbutton#scrollbutton-down{
toolbar .toolbarbutton-1:not([disabled]):hover .toolbarbutton-icon,
#TabsToolbar toolbarbutton:not([disabled]):hover .toolbarbutton-icon,
toolbar #downloads-button:hover #downloads-indicator-anchor,
#identity-box:not(.no-hover):hover,
.identity-box-button:hover,
#tracking-protection-icon:hover,
.findbar-textbox~toolbarbutton:not([disabled]):hover,
toolbarbutton.scrollbutton-up:not([disabled]):hover,
toolbarbutton.scrollbutton-down:not([disabled]):hover,
toolbarbutton#scrollbutton-up:not([disabled]):hover,
toolbarbutton#scrollbutton-down:not([disabled]):hover{
filter: brightness(2) drop-shadow(0 0 2px cyan) drop-shadow(0 0 1px cyan)
filter: drop-shadow(0 0 2px var(--uc-icon-glow-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-primary))
}
/* Active states and close window button hover state */
@ -57,12 +62,12 @@ toolbar toolbarbutton:not([disabled])[open] .toolbarbutton-icon,
#TabsToolbar toolbarbutton:not([disabled]):active .toolbarbutton-icon,
toolbar #downloads-button:active #downloads-indicator-anchor,
toolbar #downloads-button[open] #downloads-indicator-anchor,
#identity-box:not([disabled]):active,
.identity-box-button:active,
#tracking-protection-icon-container[open] #tracking-protection-icon,
.findbar-textbox~toolbarbutton:not([disabled]):active,
toolbarbutton.scrollbutton-up:active,
toolbarbutton.scrollbutton-down:active,
toolbarbutton#scrollbutton-up:active,
toolbarbutton#scrollbutton-down:active{
filter: brightness(2) drop-shadow(0 0 2px red) drop-shadow(0 0 1px yellow)
}
filter: drop-shadow(0 0 2px var(--uc-icon-glow-hover-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-hover-primary))
}