Highlight border on favicons
-
By default, at least on macOS, favicons have a white border around them while using a dark theme. However, that border was too thick for my liking, so I adjusted it and even decided to add a faint dark border while using light themes, particularly useful of the accent color is identical to the favicon's color (e.g. twitter).
The mod gives slightly different borders to tabs depending on whether they are active, non-active, hibernated.
In the code I provided, at lest for the dark theme, active tabs have a thicker border than non-active and hibernated tabs.
/* Alter border around favicon (light theme) */ /* Border for active favicon */ .theme-light .tab-position .tab.active .tab-header .favicon { filter: drop-shadow(1px 0 0 rgba(9, 9, 9, 0.1)) drop-shadow(-1px 0 0 rgba(9, 9, 9, 0.1)) drop-shadow(0 1px 0 rgba(9, 9, 9, 0.1)) drop-shadow(0 -1px 0 rgba(9, 9, 9, 0.1)); transition: filter 0.4s; } /* Border for non-active favicon */ .theme-light .tab-position .tab .tab-header .favicon { filter: drop-shadow(1px 0 0 rgba(9, 9, 9, 0.1)) drop-shadow(-1px 0 0 rgba(9, 9, 9, 0.1)) drop-shadow(0 1px 0 rgba(9, 9, 9, 0.1)) drop-shadow(0 -1px 0 rgba(9, 9, 9, 0.1)); transition: filter 0.4s; } /* Border for hibernated favicon */ .theme-light #tabs-container .tab.isdiscarded .favicon { filter: grayscale(70%) drop-shadow(1px 0 0 rgba(9, 9, 9, 0.1)) drop-shadow(-1px 0 0 rgba(9, 9, 9, 0.1)) drop-shadow(0 1px 0 rgba(9, 9, 9, 0.1)) drop-shadow(0 -1px 0 rgba(9, 9, 9, 0.1)); transition: filter 0.4s; } /* Border for hibernated (hover) favicon */ .theme-light #tabs-container .tab.isdiscarded:hover .favicon { filter: grayscale(0) drop-shadow(1px 0 0 rgba(9, 9, 9, 0.1)) drop-shadow(-1px 0 0 rgba(9, 9, 9, 0.1)) drop-shadow(0 1px 0 rgba(9, 9, 9, 0.1)) drop-shadow(0 -1px 0 rgba(9, 9, 9, 0.1)); transition: filter 0.4s; } /* Alter border around favicon (dark theme) */ /* Border for active favicon */ .theme-dark .tab-position .tab.active .tab-header .favicon { filter: drop-shadow(1px 0 0 rgba(246, 246, 246, 0.5)) drop-shadow(-1px 0 0 rgba(246, 246, 246, 0.25)) drop-shadow(0 1px 0 rgba(246, 246, 246, 0.5)) drop-shadow(0 -1px 0 rgba(246, 246, 246, 0.25)); transition: filter 0.4s; } /* Border for non-active favicon */ .theme-dark .tab-position .tab .tab-header .favicon { filter: drop-shadow(1px 0 0 rgba(246, 246, 246, 0.25)) drop-shadow(-1px 0 0 rgba(246, 246, 246, 0.125)) drop-shadow(0 1px 0 rgba(246, 246, 246, 0.25)) drop-shadow(0 -1px 0 rgba(246, 246, 246, 0.125)); transition: filter 0.4s; } /* Border for hibernated favicon */ .theme-dark #tabs-container .tab.isdiscarded .favicon { filter: grayscale(70%) drop-shadow(1px 0 0 rgba(246, 246, 246, 0.25)) drop-shadow(-1px 0 0 rgba(246, 246, 246, 0.125)) drop-shadow(0 1px 0 rgba(246, 246, 246, 0.25)) drop-shadow(0 -1px 0 rgba(246, 246, 246, 0.125)); transition: filter 0.4s; } /* Border for hibernated (hover) favicon */ .theme-dark #tabs-container .tab.isdiscarded:hover .favicon { filter: grayscale(0) drop-shadow(1px 0 0 rgba(246, 246, 246, 0.25)) drop-shadow(-1px 0 0 rgba(246, 246, 246, 0.125)) drop-shadow(0 1px 0 rgba(246, 246, 246, 0.25)) drop-shadow(0 -1px 0 rgba(246, 246, 246, 0.125)); transition: filter 0.4s; }
If you wish to use the same border on both light and dark themes, then remove either
.theme-light
or.theme-dark
Furthermore, this can also be applied to favicons in web panels. This also removes the white background that appears while using a dark theme.
/* Light */ #switch button:focus:not(.active), .theme-light #switch button.webviewbtn img { background: transparent; filter: drop-shadow(1px 0 0 rgba(9, 9, 9, 0.1)) drop-shadow(0 1px 0 rgba(9, 9, 9, 0.1)); transition: filter 0.4s; } /* Prevents border from being applied to built in panels */ #switch button:focus:not(.active), .theme-light #switch button.webviewbtn svg { filter: none; } /* Dark */ #switch button:focus:not(.active), .theme-dark #switch button.webviewbtn img { background: transparent; filter: drop-shadow(1px 0 0 rgba(246, 246, 246, 0.5)) drop-shadow(0 1px 0 rgba(246, 246, 246, 0.5)); transition: filter 0.4s; } /* Prevents border from being applied to built in panels */ #switch button:focus:not(.active), .theme-dark #switch button.webviewbtn svg { filter: none; }
-