icons.css: rework to use SVG context-properies
This commit is contained in:
Rafael Mardojai CM
parent
f91dec103d
commit
3029b57acc
|
|
@ -2,12 +2,55 @@
|
||||||
|
|
||||||
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
@namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
|
||||||
|
|
||||||
/* Built-in firefox icons color */
|
/* Icons color */
|
||||||
.toolbarbutton-icon,
|
.toolbarbutton-icon,
|
||||||
.protections-popup-category-icon,
|
.protections-popup-category::after,
|
||||||
.protections-popup-footer-icon {
|
.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: var(--gnome-toolbar-color) !important;
|
||||||
fill-opacity: 1 !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 */
|
/* Tabs scroll icons */
|
||||||
|
|
@ -52,9 +95,6 @@
|
||||||
menu[disabled] > .menu-right {
|
menu[disabled] > .menu-right {
|
||||||
opacity: 0.3;
|
opacity: 0.3;
|
||||||
}
|
}
|
||||||
menu:not([disabled]):hover > .menu-right {
|
|
||||||
filter: invert(100%) brightness(200%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Arrow down buttons */
|
/* Arrow down buttons */
|
||||||
.expander-down > .button-box,
|
.expander-down > .button-box,
|
||||||
|
|
@ -98,19 +138,7 @@ treechildren::-moz-tree-twisty {
|
||||||
treechildren::-moz-tree-twisty(open) {
|
treechildren::-moz-tree-twisty(open) {
|
||||||
list-style-image: url("../icons/pan-end-symbolic.svg") !important;
|
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 */
|
/* Sidebar: History: clock icon */
|
||||||
#historyTree treechildren::-moz-tree-image {
|
#historyTree treechildren::-moz-tree-image {
|
||||||
list-style-image: url("../icons/preferences-system-time-symbolic.svg") !important;
|
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 {
|
menuitem[type="checkbox"][disabled="true"] .menu-iconic-icon {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
menuitem[type="checkbox"]:not([disabled="true"]):hover .menu-iconic-icon {
|
|
||||||
filter: invert(100%) brightness(200%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Menu radio */
|
/* Menu radio */
|
||||||
menuitem[type="radio"] {
|
menuitem[type="radio"] {
|
||||||
|
|
@ -140,9 +165,6 @@ menuitem[type="radio"][checked="true"] {
|
||||||
menuitem[type="radio"][disabled="true"] .menu-iconic-icon {
|
menuitem[type="radio"][disabled="true"] .menu-iconic-icon {
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
menuitem[type="radio"]:not([disabled="true"]):hover .menu-iconic-icon {
|
|
||||||
filter: invert(100%) brightness(200%);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Close button */
|
/* Close button */
|
||||||
.close-icon:not(.tab-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) {
|
@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 {
|
.webextension-browser-action {
|
||||||
list-style-image: var(--webextension-menupanel-image-light, inherit) !important;
|
list-style-image: var(--webextension-menupanel-image-light, inherit) !important;
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue