Open Speravir opened 1 month ago
Thanks for the note. Fixed versions will be part of next update.
I reused similar rules known from appbutton_popup_icons.css
for sidebar_header_icons.css
and sidebar_header_icons_colorized.css
.
Arrgh. I see now my mistake: For testing purposes I had disabled the existing sidebar_header_icons.css
, but this also disabled the active declaration -moz-context-properties: fill
. 😢
But, Aris, the new rules need an addition:
#sidebarMenu-popup menuitem::before {
background-repeat: no-repeat;
}
And for #sidebar-reverse-position
you’ve presumably unintentionally removed the 90 degrees rotation, so it should look like this:
#sidebar-reverse-position::before {
background-image: url("chrome://devtools/skin/images/tool-network.svg") !important;
transfrom: rotate(90deg);
}
generalui/sidebar_header_icons.css
which should add icons to the sidebar panel menu does not work for several Firefox versions now. I recently found in another style collection (FF-Menu-Icon-Plus-CSS) a way to fix this. The rules do not work with this either (and therefore I did not notice this earlier), but adding!important
helps!For me this works without further padding adjustments, I may have set these elsewhere, though. Regarding the last rule: I do not know when the close menu item got its own ID, but apparently it lacked one in past Firefox versions (active version at time of writing is 129), so I‘ve added the older selector declaration.
If one wants to have these icons colored there is an issue:
With this approach using
::before
andcontent
neithercolor
norfill
work. We have to use css filters, instead, and adjusting these to the hex colors is a PITA. However, someone somewhere in StackExchange mentioned https://isotropic.co/tool/hex-color-to-css-filter/ for conversion. Note that this provides unstable results (every run is different), but there is a reliability line at the end. For some of the hex colors the converter found an exact solution (“loss 0.0”), but for one dark mode color (#ff5a5a
) it struggled heavily.For the five panel menu items it looks like this for light mode:
The updated
generalui/sidebar_header_icons_colorized.css
should probably have these updated rules:sidebar_header_icons_colorized.css
```css /* Firefox userChrome.css tweaks ********************************************************/ /* Github: https://github.com/aris-t2/customcssforfx ************************************/ /****************************************************************************************/ /* CSS filters created with https://isotropic.co/tool/hex-color-to-css-filter/ */ /* dark blue */ #sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { color: #336699 !important; fill: #336699 !important; opacity: 1.0 !important; } #sidebar-switcher-bookmarks::before { filter: invert(32%) sepia(75%) saturate(439%) hue-rotate(169deg) brightness(98%) contrast(91%); } :root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { color: #64a3e2 !important; fill: #64a3e2 !important; opacity: 1.0 !important; } :root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-switcher-bookmarks::before { filter: invert(57%) sepia(34%) saturate(633%) hue-rotate(169deg) brightness(101%) contrast(93%); } @media (-moz-content-prefers-color-scheme: dark) { :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewBookmarksSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { color: #64a3e2 !important; fill: #64a3e2 !important; opacity: 1.0 !important; } :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-switcher-bookmarks::before { filter: invert(57%) sepia(34%) saturate(633%) hue-rotate(169deg) brightness(101%) contrast(93%); } } /* purple */ #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { color: #800080 !important; fill: #800080 !important; opacity: 1.0 !important; } #sidebar-switcher-history::before { filter: invert(16%) sepia(34%) saturate(5061%) hue-rotate(282deg) brightness(99%) contrast(129%); } :root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { color: #ff00ff !important; fill: #ff00ff !important; opacity: 1.0 !important; } :root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-switcher-history::before { filter: invert(19%) sepia(52%) saturate(6869%) hue-rotate(293deg) brightness(113%) contrast(125%); } @media (-moz-content-prefers-color-scheme: dark) { :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewHistorySidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { color: #ff00ff !important; fill: #ff00ff !important; opacity: 1.0 !important; } :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-switcher-history::before { filter: invert(19%) sepia(52%) saturate(6869%) hue-rotate(293deg) brightness(113%) contrast(125%); } } /* blue */ #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { color: #4169e1 !important; fill: #4169e1 !important; opacity: 1.0 !important; } #sidebar-switcher-tabs::before, #sidebar-reverse-position::before { filter: invert(40%) sepia(88%) saturate(629%) hue-rotate(193deg) brightness(86%) contrast(107%); } :root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { color: #00d2ff !important; fill: #00d2ff !important; opacity: 1.0 !important; } :root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-switcher-tabs::before, :root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-reverse-position::before { filter: invert(64%) sepia(21%) saturate(6851%) hue-rotate(152deg) brightness(107%) contrast(103%); } @media (-moz-content-prefers-color-scheme: dark) { :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-box[sidebarcommand="viewTabsSidebar"] > #sidebar-header > #sidebar-switcher-target > #sidebar-icon { color: #00d2ff !important; fill: #00d2ff !important; opacity: 1.0 !important; } :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-switcher-tabs::before, :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-reverse-position::before { filter: invert(64%) sepia(21%) saturate(6851%) hue-rotate(152deg) brightness(107%) contrast(103%); } } /* red */ #sidebarMenu-popup menuitem[data-l10n-id="sidebar-menu-close"]::before, #sidebar-menu-close::before { filter: invert(17%) sepia(99%) saturate(7264%) hue-rotate(360deg) brightness(100%) contrast(112%); }/* #ff0000 */ :root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebarMenu-popup menuitem[data-l10n-id="sidebar-menu-close"]::before, :root[lwtheme]:-moz-lwtheme-brighttext:not([style*='--lwt-header-image']) #sidebar-menu-close::before { filter: invert(55%) sepia(29%) saturate(6713%) hue-rotate(327deg) brightness(104%) contrast(105%); }/* #ff5a5a */ @media (-moz-content-prefers-color-scheme: dark) { :root[lwtheme]:not([style*='--lwt-header-image']) #sidebarMenu-popup menuitem[data-l10n-id="sidebar-menu-close"]::before, :root[lwtheme]:not([style*='--lwt-header-image']) #sidebar-menu-close::before { filter: invert(55%) sepia(29%) saturate(6713%) hue-rotate(327deg) brightness(104%) contrast(105%); }/* #ff5a5a */ } ```