From 3029b57accbedbf4eb670311982abe66526ceed0 Mon Sep 17 00:00:00 2001 From: Rafael Mardojai CM Date: Sat, 6 Jun 2020 18:53:55 -0500 Subject: [PATCH] icons.css: rework to use SVG context-properies --- theme/parts/icons.css | 154 +++++++++++++----------------------------- 1 file changed, 47 insertions(+), 107 deletions(-) diff --git a/theme/parts/icons.css b/theme/parts/icons.css index 01f4f26..07c6272 100644 --- a/theme/parts/icons.css +++ b/theme/parts/icons.css @@ -2,12 +2,55 @@ @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"; -/* Built-in firefox icons color */ +/* Icons color */ .toolbarbutton-icon, -.protections-popup-category-icon, -.protections-popup-footer-icon { +.protections-popup-category::after, +.protections-popup-footer-icon, +.PanelUI-subView .subviewbutton-nav::after, +#identity-popup-security-expander .button-icon, +.menu-right, +.expander-down > .button-box, +#sidebar-switcher-arrow, +#viewButton .button-menu-dropmarker, +.menulist-label-box:after, +.expander-up > .button-box, +#urlbar:not(.searchButton) > #urlbar-input-container > #identity-box[pageproxystate="invalid"] > #identity-icon, +.searchbar-search-icon, +.textbox-search-sign, +treechildren::-moz-tree-twisty, +#historyTree treechildren::-moz-tree-image, +menuitem[type="checkbox"], +menuitem[type="checkbox"][checked="true"], +menuitem[type="radio"], +menuitem[type="radio"][checked="true"], +.close-icon:not(.tab-close-button), +.identity-popup-permission-remove-button .button-icon, +:root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-close .toolbarbutton-icon, +:root[tabsintitlebar] #titlebar #titlebar-close .toolbarbutton-icon, +:root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-max .toolbarbutton-icon, +:root[tabsintitlebar] #titlebar #titlebar-max .toolbarbutton-icon, +:root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-restore .toolbarbutton-icon, +:root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-min .toolbarbutton-icon, +:root[tabsintitlebar] #titlebar #titlebar-min .toolbarbutton-icon, +:root[tabsintitlebar][inFullscreen] #window-controls #restore-button .toolbarbutton-icon { fill: var(--gnome-toolbar-color) !important; fill-opacity: 1 !important; + -moz-context-properties: fill, fill-opacity; +} +.protections-popup-category::after, +.PanelUI-subView .subviewbutton-nav::after { + fill-opacity: 0.6 !important; +} + +/* Icons active color */ +menu:not([disabled]):hover > .menu-right, +treechildren::-moz-tree-twisty(selected, focus), +treechildren::-moz-tree-twisty(selected, focus, open), +.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-twisty, +.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-twisty(open), +menuitem[type="checkbox"]:not([disabled="true"]):hover .menu-iconic-icon, +menuitem[type="radio"]:not([disabled="true"]):hover .menu-iconic-icon { + fill: #fff !important; } /* Tabs scroll icons */ @@ -52,9 +95,6 @@ menu[disabled] > .menu-right { opacity: 0.3; } -menu:not([disabled]):hover > .menu-right { - filter: invert(100%) brightness(200%); -} /* Arrow down buttons */ .expander-down > .button-box, @@ -98,19 +138,7 @@ treechildren::-moz-tree-twisty { treechildren::-moz-tree-twisty(open) { list-style-image: url("../icons/pan-end-symbolic.svg") !important; } -treechildren::-moz-tree-twisty(selected, focus) { - list-style-image: url("../icons/pan-down-symbolic-light.svg") !important; -} -treechildren::-moz-tree-twisty(selected, focus, open) { - list-style-image: url("../icons/pan-end-symbolic-light.svg") !important; -} -.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-twisty { - list-style-image: url("../icons/pan-down-symbolic-light.svg") !important; -} -.sidebar-panel[lwt-sidebar-brighttext] .sidebar-placesTreechildren::-moz-tree-twisty(open) { - list-style-image: url("../icons/pan-end-symbolic-light.svg") !important; -} /* Sidebar: History: clock icon */ #historyTree treechildren::-moz-tree-image { list-style-image: url("../icons/preferences-system-time-symbolic.svg") !important; @@ -126,9 +154,6 @@ menuitem[type="checkbox"][checked="true"] { menuitem[type="checkbox"][disabled="true"] .menu-iconic-icon { opacity: 0.5; } -menuitem[type="checkbox"]:not([disabled="true"]):hover .menu-iconic-icon { - filter: invert(100%) brightness(200%); -} /* Menu radio */ menuitem[type="radio"] { @@ -140,9 +165,6 @@ menuitem[type="radio"][checked="true"] { menuitem[type="radio"][disabled="true"] .menu-iconic-icon { opacity: 0.5; } -menuitem[type="radio"]:not([disabled="true"]):hover .menu-iconic-icon { - filter: invert(100%) brightness(200%); -} /* Close button */ .close-icon:not(.tab-close-button), @@ -290,90 +312,8 @@ menuitem[type="radio"]:not([disabled="true"]):hover .menu-iconic-icon { } */ -/* Invert icons color in dark variant */ +/* Fix for extensions icons */ @media (prefers-color-scheme: dark) { - .PanelUI-subView .subviewbutton-nav::after, - .protections-popup-category::after, - .identity-popup-content-blocking-category::after, - #identity-popup-security-expander .button-icon, - .subviewbutton-back .toolbarbutton-icon, - - .menu-right, - - #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon, - .searchbar-search-icon, - #search-box .textbox-search-sign, - - .menulist-label-box:after, - .expander-down image, - .expander-up image, - #sidebar-switcher-arrow, - #viewButton .button-menu-dropmarker, - - menuitem[type="checkbox"] .menu-iconic-icon, - menuitem[type="radio"] .menu-iconic-icon, - - .close-icon:not(.tab-close-button) image, - .identity-popup-permission-remove-button .button-icon, - - :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-close .toolbarbutton-icon, - :root[tabsintitlebar] #titlebar #titlebar-close .toolbarbutton-icon, - :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-max .toolbarbutton-icon, - :root[tabsintitlebar] #titlebar #titlebar-max .toolbarbutton-icon, - :root[tabsintitlebar] #titlebar .titlebar-buttonbox .titlebar-min .toolbarbutton-icon, - :root[tabsintitlebar] #titlebar #titlebar-min .toolbarbutton-icon, - :root[tabsintitlebar][inFullscreen] #window-controls #restore-button .toolbarbutton-icon, - - #privatebrowsing-button .toolbarbutton-icon, - #sidebar-button:-moz-locale-dir(ltr):not([positionend]) .toolbarbutton-icon, - #sidebar-button:-moz-locale-dir(rtl)[positionend] .toolbarbutton-icon, - #sidebar-button .toolbarbutton-icon, - #nav-bar #back-button .toolbarbutton-icon, - #context-back .menu-iconic-icon, - #nav-bar #forward-button .toolbarbutton-icon, - #context-forward .menu-iconic-icon, - #PanelUI-menu-button .toolbarbutton-icon, - #new-tab-button .toolbarbutton-icon, - .tabs-newtab-button .toolbarbutton-icon, - #home-button .toolbarbutton-icon, - #preferences-button .toolbarbutton-icon, - #fullscreen-button .toolbarbutton-icon, - #appMenu-fullscreen-button .toolbarbutton-icon, - #zoom-out-button .toolbarbutton-icon, - #appMenu-zoomReduce-button .toolbarbutton-icon, - #zoom-in-button .toolbarbutton-icon, - #appMenu-zoomEnlarge-button .toolbarbutton-icon, - #developer-button .toolbarbutton-icon, - #email-link-button .toolbarbutton-icon, - #print-button .toolbarbutton-icon, - #add-ons-button .toolbarbutton-icon, - #find-button .toolbarbutton-icon, - #new-window-button .toolbarbutton-icon, - #bookmarks-menu-button .toolbarbutton-icon, - #history-panelmenu .toolbarbutton-icon, - #alltabs-button .toolbarbutton-icon, - #cut-button .toolbarbutton-icon, - #appMenu-cut-button .toolbarbutton-icon, - #copy-button .toolbarbutton-icon, - #appMenu-copy-button .toolbarbutton-icon, - #paste-button .toolbarbutton-icon, - #appMenu-paste-button .toolbarbutton-icon, - #nav-bar-overflow-button .toolbarbutton-icon { - filter: invert(100%) brightness(200%); - } - - /* Tree views */ - treechildren::-moz-tree-twisty { - list-style-image: url("../icons/pan-down-symbolic-light.svg") !important; - } - treechildren::-moz-tree-twisty(open) { - list-style-image: url("../icons/pan-end-symbolic-light.svg") !important; - } - #historyTree treechildren::-moz-tree-image { - list-style-image: url("../icons/preferences-system-time-symbolic-light.svg") !important; - } - - /* Fix for extensions icons */ .webextension-browser-action { list-style-image: var(--webextension-menupanel-image-light, inherit) !important; }