search

Aris-t2 / CustomCSSforFx

Custom CSS tweaks for Firefox
GNU General Public License v3.0
1.84k stars 181 forks source link

Files for sidebar icons need update #669

Open Speravir opened 1 month ago

Speravir commented 1 month ago

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!

#sidebar-switcher-bookmarks::before {
  content: url("chrome://browser/skin/bookmark.svg") !important;
}
#sidebar-switcher-history::before {
  content: url("chrome://browser/skin/history.svg") !important;
}
#sidebar-switcher-tabs::before {
  content: url("chrome://browser/skin/tab.svg") !important;
}
#sidebar-reverse-position::before {
  content: url("chrome://devtools/skin/images/tool-network.svg") !important;
  transform: rotate(90deg) !important;
}
#sidebarMenu-popup menuitem[data-l10n-id="sidebar-menu-close"]::before,
#sidebar-menu-close::before {
  content: url("chrome://global/skin/icons/close.svg") !important;
}

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 and content neither color nor fill 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:

#sidebar-switcher-bookmarks::before {
  filter: invert(32%) sepia(75%) saturate(439%) hue-rotate(169deg) brightness(98%) contrast(91%);
}
#sidebar-switcher-history::before {
  filter: invert(16%) sepia(34%) saturate(5061%) hue-rotate(282deg) brightness(99%) contrast(129%);
#sidebar-switcher-tabs::before,
#sidebar-reverse-position::before {
  filter: invert(40%) sepia(88%) saturate(629%) hue-rotate(193deg) brightness(86%) contrast(107%);
}
#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%);
}

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 */ } ```
Aris-t2 commented 4 weeks 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.

Speravir commented 3 weeks ago

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);
}