/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/button_effect_icon_glow.css made available under Mozilla Public License v. 2.0 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, .urlbar-icon, .urlbar-icon-wrapper, toolbar .toolbarbutton-1, #tabbrowser-tabs toolbarbutton, toolbar toolbarbutton > .toolbarbutton-icon, toolbar toolbarbutton > .toolbarbutton-badge-stack, .titlebar-button, #identity-box, .identity-box-button, #tracking-protection-icon-container, .findbar-textbox~toolbarbutton, toolbarbutton.scrollbutton-up, toolbarbutton.scrollbutton-down, toolbarbutton#scrollbutton-up, toolbarbutton#scrollbutton-down{ background-color: transparent !important; border-color: transparent !important; } /* Glow effects on hover */ .close-icon:hover, .urlbar-history-dropmarker:hover, #page-action-buttons > .urlbar-icon:hover, .urlbar-icon-wrapper:hover > .urlbar-icon, toolbar .toolbarbutton-1:not([disabled]):hover .toolbarbutton-icon, #TabsToolbar toolbarbutton:not([disabled]):hover .toolbarbutton-icon, toolbar #downloads-button:hover #downloads-indicator-anchor, .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: 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 */ #titlebar .titlebar-buttonbox > .titlebar-close:hover > .toolbarbutton-icon, .close-icon:active, .urlbar-history-dropmarker:active, #page-action-buttons > .urlbar-icon:active, #page-action-buttons > .urlbar-icon[open], .urlbar-icon-wrapper:active > .urlbar-icon, .urlbar-icon-wrapper[open] > .urlbar-icon, toolbar toolbarbutton:not([disabled]):active .toolbarbutton-icon, 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-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: drop-shadow(0 0 2px var(--uc-icon-glow-hover-secondary)) drop-shadow(0 0 1px var(--uc-icon-glow-hover-primary)) }