diff --git a/.assets/sidebery.png b/.assets/sidebery.png new file mode 100644 index 0000000..cd827a6 Binary files /dev/null and b/.assets/sidebery.png differ diff --git a/README.md b/README.md index a59fa7b..d06ef46 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # MSFX -Fork of [the MSFX Firefox userChrome](https://github.com/WinClassic/MSFX). +Partially opinionated fork of [the MSFX Firefox userChrome](https://github.com/WinClassic/MSFX) for non-ESR versions. ![Screenshot of MSFX](.assets/screenshot.png) @@ -21,11 +21,17 @@ Fork of [the MSFX Firefox userChrome](https://github.com/WinClassic/MSFX). - Properly styled address bar dropdown - Proper hover/active states for menu bar items - Scrollbar dithering + - Sidebar + - Correct close button positioning + - Support for "Move sidebar to right" - Internet status bar widget is its own component - Empty boxes have been removed in favor of putting extensions on the status bar - Address bar is no longer forced to the Address toolbar (configurable, enabled by default) - Works with Firefox 117+ (fixes developed for on 122.0b3) - A lot of legacy styling was removed to where the `appearance` property does nothing, everything that used this to achieve the classic style has been accurately recreated as best as possible. +- Find bar text entry visibility fixes +- Polyfill for missing legacy colors for scrollbars and grabber (125+) +- Optional polyfill for missing legacy colors everywhere (useful for extensions, see `addons` folder) (125+) ## What's missing? diff --git a/addons/README.md b/addons/README.md new file mode 100644 index 0000000..d7a27db --- /dev/null +++ b/addons/README.md @@ -0,0 +1,9 @@ +# Custom CSS for various extensions + +Requires "Optional polyfill for missing legacy colors everywhere" userchrome JS (`msfx-expose_legacy_colors.uc.js`) + +## [Sidebery](https://addons.mozilla.org/en-US/firefox/addon/sidebery/) + +Paste CSS file into "Styles Editor" in Sidebery's config page + +![Sidebery preview](../.assets/sidebery.png) diff --git a/addons/sidebery.css b/addons/sidebery.css new file mode 100644 index 0000000..73b8ce3 --- /dev/null +++ b/addons/sidebery.css @@ -0,0 +1,668 @@ +:root { + --ImageListMinus: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAASSURBVBhXY6At+I8F0wYwMAAA8uYE/KrnMfcAAAAASUVORK5CYIIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + --ImageListPlus: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAcAAAAHCAYAAADEUlfTAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAgSURBVBhXYyAF/IfSWAFWSZAgOsYAWAVhAK8kEmBgAACBdAj4lkLGzQAAAABJRU5ErkJgggAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="); + --ImageFavicon: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAABgUExURYaGhv///5mZmVVVVf/78ABmzDMzMwAAgDNm//Hx8czMzHd3d2aZmZnMzDMzzGb//+rq6pmZZv//mQDM/+fn1v/MmcyZZjNmzF9fXwAzmcDAwABmmYCAADMzZgQEBAAAANSdJEsAAAAgdFJOU/////////////////////////////////////////8AXFwb7QAAAAlwSFlzAAAOwwAADsMBx2+oZAAAAIpJREFUKFNNjFsWgyAMREUIRGhTbOlLW7P/XRoD2t6Tj8w9k3TM3O3IzipMpbeHcEpvxOwCwDnrvVcRQHA4xD7ZTYTTmegCg8tRvnQcxqvU6QZDLnET6Y7bCUAuKtLjidKQg1Ibr/GNOE2Ec2t86EsoSG4/iJdlnjVXwZRMliDTBKd40IT9oeIP5hU1fA8vue4FsgAAAABJRU5ErkJggg=="); +} + +#root.root { + --tabs-pinned-width: 16px; + --tabs-pinned-height: 16px; + --tabs-height: 16px; + --frame-bg: var(--ThreeDFace) !important; + --frame-fg: var(--WindowText) !important; + --tabs-indent: 19px; +} + +.Tab { + height: 16px !important; + padding-bottom: 0 !important; + margin: 0 !important; + width: 100% !important; +} +.Tab .t-box { + mask: none !important; +} +.Tab .title { + font-size: 8pt !important; + font-family: system-ui !important; + line-height: 16px; +} +.Tab[data-active="true"] .title { + background-color: var(--Highlight); + color: var(--HighlightText); + width: min-content; +} +.Tab .fav { + margin: 0 !important; + margin-right: 3px !important; + z-index: 50 !important; + transform: translateZ(10px) !important; + background-color: var(--ThreeDFace); +} +.Tab .body { + border-radius: 0 !important; + height: 16px !important; +} + +.Tab { + z-index: 20; +} +.Tab + .Tab { + z-index: 21; +} + +.Tab[data-active="true"] .body, +.Tab:hover .body::before { + background: transparent !important; + box-shadow: none !important; +} +.Tab .body::after { + opacity: 1 !important; +} +.Tab .body::before { + opacity: 1 !important; + border-radius: 0 !important; +} +.PinnedTabsBar { + padding-bottom: 2px !important; +} +.PinnedTabsBar::after { + opacity: 1 !important; + background-image: none !important; + height: 2px !important; + box-shadow: inset 0 -1px 0 0 var(--ThreeDHighlight), + inset 0 -2px 0 0 var(--ThreeDShadow); + left: 0 !important; + width: 100% !important; + bottom: 0 !important; +} + +.Tab .close { + display: none !important; +} +.Tab .child-count { + right: -1px !important; + bottom: -1px !important; +} + +#root[data-tabs-tree-lvl-marks="true"] { + &[data-frame-color-scheme="light"] { + .AnimatedTabList:has(> .Tab[data-lvl="1"]) + > .Tab[data-pin="false"][data-lvl="0"]:has(+ .Tab[data-lvl="0"]) + .body:after, + .AnimatedTabList:has(> .Tab[data-lvl="1"]) + > .Tab[data-pin="false"][data-lvl="0"] + + .Tab[data-lvl="0"] + .body:after, + .AnimatedTabList:has(> .Tab[data-lvl="1"]) + > .Tab[data-pin="false"][data-lvl="0"]:has(+ .tab-space-filler) + .body:after, + .AnimatedTabList:has(> .Tab[data-lvl="0"] .child-count) + > .Tab[data-pin="false"][data-lvl="0"]:has(+ .Tab[data-lvl="0"]) + .body:after, + .AnimatedTabList:has(> .Tab[data-lvl="0"] .child-count) + > .Tab[data-pin="false"][data-lvl="0"] + + .Tab[data-lvl="0"] + .body:after, + .AnimatedTabList:has(> .Tab[data-lvl="0"] .child-count) + > .Tab[data-pin="false"][data-lvl="0"]:has(+ .tab-space-filler) + .body:after, + .Tab[data-pin="false"]:not([data-lvl="0"]) .body:after { + --line-color: var(--ThreeDShadow) !important; + } + } + + .AnimatedTabList:has(> .Tab[data-lvl="1"]), + .AnimatedTabList:has(> .Tab[data-lvl="0"] .child-count) { + & > .Tab[data-lvl="0"] { + padding-left: 19px; + } + .Tab[data-lvl]:not([data-lvl="0"]) { + margin-left: 19px !important; + } + } + + /* css crimes ahead */ + .AnimatedTabList:has(> .Tab[data-lvl="1"]) + > .Tab[data-pin="false"][data-lvl="0"]:has(+ .Tab[data-lvl="0"]) + .body:after, + .AnimatedTabList:has(> .Tab[data-lvl="1"]) + > .Tab[data-pin="false"][data-lvl="0"] + + .Tab[data-lvl="0"] + .body:after, + .AnimatedTabList:has(> .Tab[data-lvl="1"]) + > .Tab[data-pin="false"][data-lvl="0"]:has(+ .tab-space-filler) + .body:after, + .AnimatedTabList:has(> .Tab[data-lvl="0"] .child-count) + > .Tab[data-pin="false"][data-lvl="0"]:has(+ .Tab[data-lvl="0"]) + .body:after, + .AnimatedTabList:has(> .Tab[data-lvl="0"] .child-count) + > .Tab[data-pin="false"][data-lvl="0"] + + .Tab[data-lvl="0"] + .body:after, + .AnimatedTabList:has(> .Tab[data-lvl="0"] .child-count) + > .Tab[data-pin="false"][data-lvl="0"]:has(+ .tab-space-filler) + .body:after, + .Tab[data-pin="false"]:not([data-lvl="0"]) .body:after { + --line-color: var(--ThreeDHighlight); + top: 0; + left: -11px; + height: 16px; + display: block; + box-shadow: calc((19px * -1) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -1) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -1) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -1) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -1) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -1) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -1) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -1) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -1) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -1) 21px 0 0 var(--frame-bg), + calc(19px * -1) 20px 0 0 var(--line-color), + calc(19px * -1) 19px 0 0 var(--frame-bg), + calc(19px * -1) 18px 0 0 var(--line-color), + calc(19px * -1) 17px 0 0 var(--frame-bg), + calc(19px * -1) 16px 0 0 var(--line-color), + calc(19px * -1) 15px 0 0 var(--frame-bg), + calc(19px * -1) 14px 0 0 var(--line-color), + calc(19px * -1) 13px 0 0 var(--frame-bg), + calc(19px * -1) 12px 0 0 var(--line-color), + calc(19px * -1) 11px 0 0 var(--frame-bg), + calc(19px * -1) 10px 0 0 var(--line-color), + calc(19px * -1) 9px 0 0 var(--frame-bg), + calc(19px * -1) 8px 0 0 var(--line-color), + calc(19px * -1) 7px 0 0 var(--frame-bg), + calc(19px * -1) 6px 0 0 var(--line-color), + calc(19px * -1) 5px 0 0 var(--frame-bg), + calc(19px * -1) 4px 0 0 var(--line-color), + calc((19px * -2) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -2) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -2) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -2) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -2) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -2) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -2) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -2) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -2) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -2) 21px 0 0 var(--frame-bg), + calc(19px * -2) 20px 0 0 var(--line-color), + calc(19px * -2) 19px 0 0 var(--frame-bg), + calc(19px * -2) 18px 0 0 var(--line-color), + calc(19px * -2) 17px 0 0 var(--frame-bg), + calc(19px * -2) 16px 0 0 var(--line-color), + calc(19px * -2) 15px 0 0 var(--frame-bg), + calc(19px * -2) 14px 0 0 var(--line-color), + calc(19px * -2) 13px 0 0 var(--frame-bg), + calc(19px * -2) 12px 0 0 var(--line-color), + calc(19px * -2) 11px 0 0 var(--frame-bg), + calc(19px * -2) 10px 0 0 var(--line-color), + calc(19px * -2) 9px 0 0 var(--frame-bg), + calc(19px * -2) 8px 0 0 var(--line-color), + calc(19px * -2) 7px 0 0 var(--frame-bg), + calc(19px * -2) 6px 0 0 var(--line-color), + calc(19px * -2) 5px 0 0 var(--frame-bg), + calc(19px * -2) 4px 0 0 var(--line-color), + calc((19px * -3) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -3) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -3) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -3) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -3) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -3) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -3) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -3) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -3) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -3) 21px 0 0 var(--frame-bg), + calc(19px * -3) 20px 0 0 var(--line-color), + calc(19px * -3) 19px 0 0 var(--frame-bg), + calc(19px * -3) 18px 0 0 var(--line-color), + calc(19px * -3) 17px 0 0 var(--frame-bg), + calc(19px * -3) 16px 0 0 var(--line-color), + calc(19px * -3) 15px 0 0 var(--frame-bg), + calc(19px * -3) 14px 0 0 var(--line-color), + calc(19px * -3) 13px 0 0 var(--frame-bg), + calc(19px * -3) 12px 0 0 var(--line-color), + calc(19px * -3) 11px 0 0 var(--frame-bg), + calc(19px * -3) 10px 0 0 var(--line-color), + calc(19px * -3) 9px 0 0 var(--frame-bg), + calc(19px * -3) 8px 0 0 var(--line-color), + calc(19px * -3) 7px 0 0 var(--frame-bg), + calc(19px * -3) 6px 0 0 var(--line-color), + calc(19px * -3) 5px 0 0 var(--frame-bg), + calc(19px * -3) 4px 0 0 var(--line-color), + calc((19px * -4) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -4) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -4) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -4) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -4) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -4) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -4) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -4) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -4) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -4) 21px 0 0 var(--frame-bg), + calc(19px * -4) 20px 0 0 var(--line-color), + calc(19px * -4) 19px 0 0 var(--frame-bg), + calc(19px * -4) 18px 0 0 var(--line-color), + calc(19px * -4) 17px 0 0 var(--frame-bg), + calc(19px * -4) 16px 0 0 var(--line-color), + calc(19px * -4) 15px 0 0 var(--frame-bg), + calc(19px * -4) 14px 0 0 var(--line-color), + calc(19px * -4) 13px 0 0 var(--frame-bg), + calc(19px * -4) 12px 0 0 var(--line-color), + calc(19px * -4) 11px 0 0 var(--frame-bg), + calc(19px * -4) 10px 0 0 var(--line-color), + calc(19px * -4) 9px 0 0 var(--frame-bg), + calc(19px * -4) 8px 0 0 var(--line-color), + calc(19px * -4) 7px 0 0 var(--frame-bg), + calc(19px * -4) 6px 0 0 var(--line-color), + calc(19px * -4) 5px 0 0 var(--frame-bg), + calc(19px * -4) 4px 0 0 var(--line-color), + calc((19px * -5) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -5) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -5) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -5) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -5) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -5) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -5) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -5) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -5) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -5) 21px 0 0 var(--frame-bg), + calc(19px * -5) 20px 0 0 var(--line-color), + calc(19px * -5) 19px 0 0 var(--frame-bg), + calc(19px * -5) 18px 0 0 var(--line-color), + calc(19px * -5) 17px 0 0 var(--frame-bg), + calc(19px * -5) 16px 0 0 var(--line-color), + calc(19px * -5) 15px 0 0 var(--frame-bg), + calc(19px * -5) 14px 0 0 var(--line-color), + calc(19px * -5) 13px 0 0 var(--frame-bg), + calc(19px * -5) 12px 0 0 var(--line-color), + calc(19px * -5) 11px 0 0 var(--frame-bg), + calc(19px * -5) 10px 0 0 var(--line-color), + calc(19px * -5) 9px 0 0 var(--frame-bg), + calc(19px * -5) 8px 0 0 var(--line-color), + calc(19px * -5) 7px 0 0 var(--frame-bg), + calc(19px * -5) 6px 0 0 var(--line-color), + calc(19px * -5) 5px 0 0 var(--frame-bg), + calc(19px * -5) 4px 0 0 var(--line-color), + calc((19px * -6) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -6) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -6) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -6) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -6) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -6) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -6) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -6) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -6) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -6) 21px 0 0 var(--frame-bg), + calc(19px * -6) 20px 0 0 var(--line-color), + calc(19px * -6) 19px 0 0 var(--frame-bg), + calc(19px * -6) 18px 0 0 var(--line-color), + calc(19px * -6) 17px 0 0 var(--frame-bg), + calc(19px * -6) 16px 0 0 var(--line-color), + calc(19px * -6) 15px 0 0 var(--frame-bg), + calc(19px * -6) 14px 0 0 var(--line-color), + calc(19px * -6) 13px 0 0 var(--frame-bg), + calc(19px * -6) 12px 0 0 var(--line-color), + calc(19px * -6) 11px 0 0 var(--frame-bg), + calc(19px * -6) 10px 0 0 var(--line-color), + calc(19px * -6) 9px 0 0 var(--frame-bg), + calc(19px * -6) 8px 0 0 var(--line-color), + calc(19px * -6) 7px 0 0 var(--frame-bg), + calc(19px * -6) 6px 0 0 var(--line-color), + calc(19px * -6) 5px 0 0 var(--frame-bg), + calc(19px * -6) 4px 0 0 var(--line-color), + calc((19px * -7) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -7) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -7) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -7) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -7) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -7) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -7) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -7) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -7) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -7) 21px 0 0 var(--frame-bg), + calc(19px * -7) 20px 0 0 var(--line-color), + calc(19px * -7) 19px 0 0 var(--frame-bg), + calc(19px * -7) 18px 0 0 var(--line-color), + calc(19px * -7) 17px 0 0 var(--frame-bg), + calc(19px * -7) 16px 0 0 var(--line-color), + calc(19px * -7) 15px 0 0 var(--frame-bg), + calc(19px * -7) 14px 0 0 var(--line-color), + calc(19px * -7) 13px 0 0 var(--frame-bg), + calc(19px * -7) 12px 0 0 var(--line-color), + calc(19px * -7) 11px 0 0 var(--frame-bg), + calc(19px * -7) 10px 0 0 var(--line-color), + calc(19px * -7) 9px 0 0 var(--frame-bg), + calc(19px * -7) 8px 0 0 var(--line-color), + calc(19px * -7) 7px 0 0 var(--frame-bg), + calc(19px * -7) 6px 0 0 var(--line-color), + calc(19px * -7) 5px 0 0 var(--frame-bg), + calc(19px * -7) 4px 0 0 var(--line-color), + calc((19px * -8) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -8) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -8) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -8) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -8) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -8) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -8) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -8) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -8) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -8) 21px 0 0 var(--frame-bg), + calc(19px * -8) 20px 0 0 var(--line-color), + calc(19px * -8) 19px 0 0 var(--frame-bg), + calc(19px * -8) 18px 0 0 var(--line-color), + calc(19px * -8) 17px 0 0 var(--frame-bg), + calc(19px * -8) 16px 0 0 var(--line-color), + calc(19px * -8) 15px 0 0 var(--frame-bg), + calc(19px * -8) 14px 0 0 var(--line-color), + calc(19px * -8) 13px 0 0 var(--frame-bg), + calc(19px * -8) 12px 0 0 var(--line-color), + calc(19px * -8) 11px 0 0 var(--frame-bg), + calc(19px * -8) 10px 0 0 var(--line-color), + calc(19px * -8) 9px 0 0 var(--frame-bg), + calc(19px * -8) 8px 0 0 var(--line-color), + calc(19px * -8) 7px 0 0 var(--frame-bg), + calc(19px * -8) 6px 0 0 var(--line-color), + calc(19px * -8) 5px 0 0 var(--frame-bg), + calc(19px * -8) 4px 0 0 var(--line-color), + calc((19px * -9) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -9) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -9) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -9) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -9) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -9) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -9) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -9) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -9) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -9) 21px 0 0 var(--frame-bg), + calc(19px * -9) 20px 0 0 var(--line-color), + calc(19px * -9) 19px 0 0 var(--frame-bg), + calc(19px * -9) 18px 0 0 var(--line-color), + calc(19px * -9) 17px 0 0 var(--frame-bg), + calc(19px * -9) 16px 0 0 var(--line-color), + calc(19px * -9) 15px 0 0 var(--frame-bg), + calc(19px * -9) 14px 0 0 var(--line-color), + calc(19px * -9) 13px 0 0 var(--frame-bg), + calc(19px * -9) 12px 0 0 var(--line-color), + calc(19px * -9) 11px 0 0 var(--frame-bg), + calc(19px * -9) 10px 0 0 var(--line-color), + calc(19px * -9) 9px 0 0 var(--frame-bg), + calc(19px * -9) 8px 0 0 var(--line-color), + calc(19px * -9) 7px 0 0 var(--frame-bg), + calc(19px * -9) 6px 0 0 var(--line-color), + calc(19px * -9) 5px 0 0 var(--frame-bg), + calc(19px * -9) 4px 0 0 var(--line-color), + calc((19px * -10) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -10) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -10) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -10) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -10) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -10) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -10) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -10) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -10) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -10) 21px 0 0 var(--frame-bg), + calc(19px * -10) 20px 0 0 var(--line-color), + calc(19px * -10) 19px 0 0 var(--frame-bg), + calc(19px * -10) 18px 0 0 var(--line-color), + calc(19px * -10) 17px 0 0 var(--frame-bg), + calc(19px * -10) 16px 0 0 var(--line-color), + calc(19px * -10) 15px 0 0 var(--frame-bg), + calc(19px * -10) 14px 0 0 var(--line-color), + calc(19px * -10) 13px 0 0 var(--frame-bg), + calc(19px * -10) 12px 0 0 var(--line-color), + calc(19px * -10) 11px 0 0 var(--frame-bg), + calc(19px * -10) 10px 0 0 var(--line-color), + calc(19px * -10) 9px 0 0 var(--frame-bg), + calc(19px * -10) 8px 0 0 var(--line-color), + calc(19px * -10) 7px 0 0 var(--frame-bg), + calc(19px * -10) 6px 0 0 var(--line-color), + calc(19px * -10) 5px 0 0 var(--frame-bg), + calc(19px * -10) 4px 0 0 var(--line-color), + calc((19px * -11) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -11) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -11) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -11) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -11) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -11) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -11) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -11) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -11) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -11) 21px 0 0 var(--frame-bg), + calc(19px * -11) 20px 0 0 var(--line-color), + calc(19px * -11) 19px 0 0 var(--frame-bg), + calc(19px * -11) 18px 0 0 var(--line-color), + calc(19px * -11) 17px 0 0 var(--frame-bg), + calc(19px * -11) 16px 0 0 var(--line-color), + calc(19px * -11) 15px 0 0 var(--frame-bg), + calc(19px * -11) 14px 0 0 var(--line-color), + calc(19px * -11) 13px 0 0 var(--frame-bg), + calc(19px * -11) 12px 0 0 var(--line-color), + calc(19px * -11) 11px 0 0 var(--frame-bg), + calc(19px * -11) 10px 0 0 var(--line-color), + calc(19px * -11) 9px 0 0 var(--frame-bg), + calc(19px * -11) 8px 0 0 var(--line-color), + calc(19px * -11) 7px 0 0 var(--frame-bg), + calc(19px * -11) 6px 0 0 var(--line-color), + calc(19px * -11) 5px 0 0 var(--frame-bg), + calc(19px * -11) 4px 0 0 var(--line-color), + calc((19px * -12) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -12) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -12) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -12) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -12) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -12) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -12) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -12) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -12) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -12) 21px 0 0 var(--frame-bg), + calc(19px * -12) 20px 0 0 var(--line-color), + calc(19px * -12) 19px 0 0 var(--frame-bg), + calc(19px * -12) 18px 0 0 var(--line-color), + calc(19px * -12) 17px 0 0 var(--frame-bg), + calc(19px * -12) 16px 0 0 var(--line-color), + calc(19px * -12) 15px 0 0 var(--frame-bg), + calc(19px * -12) 14px 0 0 var(--line-color), + calc(19px * -12) 13px 0 0 var(--frame-bg), + calc(19px * -12) 12px 0 0 var(--line-color), + calc(19px * -12) 11px 0 0 var(--frame-bg), + calc(19px * -12) 10px 0 0 var(--line-color), + calc(19px * -12) 9px 0 0 var(--frame-bg), + calc(19px * -12) 8px 0 0 var(--line-color), + calc(19px * -12) 7px 0 0 var(--frame-bg), + calc(19px * -12) 6px 0 0 var(--line-color), + calc(19px * -12) 5px 0 0 var(--frame-bg), + calc(19px * -12) 4px 0 0 var(--line-color), + calc((19px * -13) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -13) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -13) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -13) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -13) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -13) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -13) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -13) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -13) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -13) 21px 0 0 var(--frame-bg), + calc(19px * -13) 20px 0 0 var(--line-color), + calc(19px * -13) 19px 0 0 var(--frame-bg), + calc(19px * -13) 18px 0 0 var(--line-color), + calc(19px * -13) 17px 0 0 var(--frame-bg), + calc(19px * -13) 16px 0 0 var(--line-color), + calc(19px * -13) 15px 0 0 var(--frame-bg), + calc(19px * -13) 14px 0 0 var(--line-color), + calc(19px * -13) 13px 0 0 var(--frame-bg), + calc(19px * -13) 12px 0 0 var(--line-color), + calc(19px * -13) 11px 0 0 var(--frame-bg), + calc(19px * -13) 10px 0 0 var(--line-color), + calc(19px * -13) 9px 0 0 var(--frame-bg), + calc(19px * -13) 8px 0 0 var(--line-color), + calc(19px * -13) 7px 0 0 var(--frame-bg), + calc(19px * -13) 6px 0 0 var(--line-color), + calc(19px * -13) 5px 0 0 var(--frame-bg), + calc(19px * -13) 4px 0 0 var(--line-color), + calc((19px * -14) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -14) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -14) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -14) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -14) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -14) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -14) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -14) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -14) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -14) 21px 0 0 var(--frame-bg), + calc(19px * -14) 20px 0 0 var(--line-color), + calc(19px * -14) 19px 0 0 var(--frame-bg), + calc(19px * -14) 18px 0 0 var(--line-color), + calc(19px * -14) 17px 0 0 var(--frame-bg), + calc(19px * -14) 16px 0 0 var(--line-color), + calc(19px * -14) 15px 0 0 var(--frame-bg), + calc(19px * -14) 14px 0 0 var(--line-color), + calc(19px * -14) 13px 0 0 var(--frame-bg), + calc(19px * -14) 12px 0 0 var(--line-color), + calc(19px * -14) 11px 0 0 var(--frame-bg), + calc(19px * -14) 10px 0 0 var(--line-color), + calc(19px * -14) 9px 0 0 var(--frame-bg), + calc(19px * -14) 8px 0 0 var(--line-color), + calc(19px * -14) 7px 0 0 var(--frame-bg), + calc(19px * -14) 6px 0 0 var(--line-color), + calc(19px * -14) 5px 0 0 var(--frame-bg), + calc(19px * -14) 4px 0 0 var(--line-color), + calc((19px * -15) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -15) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -15) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -15) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -15) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -15) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -15) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -15) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -15) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -15) 21px 0 0 var(--frame-bg), + calc(19px * -15) 20px 0 0 var(--line-color), + calc(19px * -15) 19px 0 0 var(--frame-bg), + calc(19px * -15) 18px 0 0 var(--line-color), + calc(19px * -15) 17px 0 0 var(--frame-bg), + calc(19px * -15) 16px 0 0 var(--line-color), + calc(19px * -15) 15px 0 0 var(--frame-bg), + calc(19px * -15) 14px 0 0 var(--line-color), + calc(19px * -15) 13px 0 0 var(--frame-bg), + calc(19px * -15) 12px 0 0 var(--line-color), + calc(19px * -15) 11px 0 0 var(--frame-bg), + calc(19px * -15) 10px 0 0 var(--line-color), + calc(19px * -15) 9px 0 0 var(--frame-bg), + calc(19px * -15) 8px 0 0 var(--line-color), + calc(19px * -15) 7px 0 0 var(--frame-bg), + calc(19px * -15) 6px 0 0 var(--line-color), + calc(19px * -15) 5px 0 0 var(--frame-bg), + calc(19px * -15) 4px 0 0 var(--line-color), + calc((19px * -16) + 1px) 4px 0 0 var(--frame-bg), + calc((19px * -16) + 1px) 6px 0 0 var(--frame-bg), + calc((19px * -16) + 1px) 8px 0 0 var(--frame-bg), + calc((19px * -16) + 1px) 10px 0 0 var(--frame-bg), + calc((19px * -16) + 1px) 12px 0 0 var(--frame-bg), + calc((19px * -16) + 1px) 14px 0 0 var(--frame-bg), + calc((19px * -16) + 1px) 16px 0 0 var(--frame-bg), + calc((19px * -16) + 1px) 18px 0 0 var(--frame-bg), + calc((19px * -16) + 1px) 20px 0 0 var(--frame-bg), + calc(19px * -16) 21px 0 0 var(--frame-bg), + calc(19px * -16) 20px 0 0 var(--line-color), + calc(19px * -16) 19px 0 0 var(--frame-bg), + calc(19px * -16) 18px 0 0 var(--line-color), + calc(19px * -16) 17px 0 0 var(--frame-bg), + calc(19px * -16) 16px 0 0 var(--line-color), + calc(19px * -16) 15px 0 0 var(--frame-bg), + calc(19px * -16) 14px 0 0 var(--line-color), + calc(19px * -16) 13px 0 0 var(--frame-bg), + calc(19px * -16) 12px 0 0 var(--line-color), + calc(19px * -16) 11px 0 0 var(--frame-bg), + calc(19px * -16) 10px 0 0 var(--line-color), + calc(19px * -16) 9px 0 0 var(--frame-bg), + calc(19px * -16) 8px 0 0 var(--line-color), + calc(19px * -16) 7px 0 0 var(--frame-bg), + calc(19px * -16) 6px 0 0 var(--line-color), + calc(19px * -16) 5px 0 0 var(--frame-bg), + calc(19px * -16) 4px 0 0 var(--line-color); + + content: ""; + background-color: transparent !important; + background-image: none !important; + height: 14px; + width: 11px; + border-left: 1px dotted; + border-bottom: 1px dotted; + border-color: var(--line-color); + position: absolute; + top: -6px; + left: -11px; + transform: translateZ(-9999px) !important; + z-index: -9999; + display: block !important; + } + + .AnimatedTabList:has(> .Tab[data-lvl="1"]) + > .Tab[data-lvl="0"]:first-child + .body:after, + .AnimatedTabList:has(> .Tab[data-lvl="0"] .child-count) + > .Tab[data-lvl="0"]:first-child + .body:after { + height: 1px !important; + top: 7px !important; + box-shadow: none !important; + } +} + +.Tab .fav > .exp { + width: 9px !important; + height: 9px !important; + top: 4px !important; + left: -15px !important; + opacity: 1 !important; + background-color: var(--ThreeDFace); + border: 1px solid var(--ThreeDHighlight); +} +.Tab .fav > .exp > .exp-icon { + top: 0 !important; + left: 0 !important; + width: 7px !important; + height: 7px !important; + opacity: 1 !important; + background-color: var(--WindowText); + mask-image: var(--ImageListMinus); + mask-repeat: no-repeat; + mask-position: center; + -webkit-mask-image: var(--ImageListMinus); + -webkit-mask-repeat: no-repeat; + -webkit-mask-position: center; +} +.Tab[data-folded="true"] .fav > .exp > .exp-icon { + mask-image: var(--ImageListPlus) !important; + -webkit-mask-image: var(--ImageListPlus) !important; +} +.Tab .fav > .exp > .exp-icon > * { + display: none; +} + +.Tab .fav > svg.fav-icon { + opacity: 1 !important; + background-image: var(--ImageFavicon); +} +.Tab .fav > svg.fav-icon > * { + display: none; +} + +.central-box { + margin-top: 0 !important; +} + +.Tab[data-pin="false"] .audio { + left: 19px !important; + width: 16px !important; +} + +* { + transition: none !important; + animation: none !important; +} + +.BottomBar { + display: none; +} diff --git a/chrome/msfx-expose_legacy_colors.uc.js b/chrome/msfx-expose_legacy_colors.uc.js new file mode 100644 index 0000000..d30623c --- /dev/null +++ b/chrome/msfx-expose_legacy_colors.uc.js @@ -0,0 +1,62 @@ +(() => { + const colorKeys = [ + "ActiveBorder", + "ActiveCaption", + "AppWorkspace", + "Background", + "ButtonFace", + "ButtonHighlight", + "ButtonShadow", + "ButtonText", + "CaptionText", + "GrayText", + "Highlight", + "HighlightText", + "InactiveBorder", + "InactiveCaption", + "InactiveCaptionText", + "InfoBackground", + "InfoText", + "Menu", + "MenuText", + "Scrollbar", + "ThreeDDarkShadow", + "ThreeDFace", + "ThreeDHighlight", + "ThreeDLightShadow", + "ThreeDShadow", + "Window", + "WindowFrame", + "WindowText", + ]; + const colors = (() => { + const colors = {}; + + const elem = document.createElement("div"); + document.body.appendChild(elem); + + for (const key of colorKeys) { + elem.style.color = key; + colors[key] = window.getComputedStyle(elem).color; + } + + document.body.removeChild(elem); + + return colors; + })(); + + const css = `:root { + ${Object.entries(colors) + .map(([key, val]) => `--${key}: ${val};`) + .join("\n ")} + }`; + + const sss = Cc["@mozilla.org/content/style-sheet-service;1"].getService( + Ci.nsIStyleSheetService, + ); + const uri = Services.io.newURI( + "data:text/css;charset=UTF=8," + encodeURIComponent(css), + ); + + sss.loadAndRegisterSheet(uri, sss.AGENT_SHEET); +})(); diff --git a/chrome/msfx/msfx.css b/chrome/msfx/msfx.css index dba91c8..52b4fdd 100644 --- a/chrome/msfx/msfx.css +++ b/chrome/msfx/msfx.css @@ -1451,9 +1451,17 @@ hbox[anonid="findbar-textbox-wrapper"]::after { } #sidebar-box { - margin-right: 4px; - appearance: groupbox !important; + margin-right: 3px; background-color: ThreeDFace !important; + padding: 2px; + box-shadow: inset -1px -1px 0 0 ThreeDHighlight, + inset -2px -2px 0 0 ThreeDShadow, inset 1px 1px 0 0 ThreeDShadow, + inset 2px 2px 0 0 ThreeDHighlight; + + &[positionend="true"] { + margin-right: 0 !important; + margin-left: 3px !important; + } } #historyTree, @@ -1464,14 +1472,14 @@ hbox[anonid="findbar-textbox-wrapper"]::after { treecol, treecolpicker { - border: 0 !important; + border: none !important; } #sidebar-search-container, #sidebar-header { font: Menu !important; - box-shadow: inset 0 -1px ThreeDShadow !important; - border-bottom: 1px solid ThreeDHighlight !important; + box-shadow: inset 0 -1px 0 0 ThreeDHighlight, inset 0 -2px 0 0 ThreeDShadow !important; + border: none !important; } #sidebar-icon { @@ -1481,7 +1489,10 @@ treecolpicker { } #sidebar-header { - padding: 1px !important; + height: 22px !important; + padding-top: 0px !important; + padding-left: 1px !important; + padding-right: 2px !important; padding-bottom: 2px !important; } @@ -1493,6 +1504,7 @@ treecolpicker { padding: 0 !important; list-style-image: none !important; border-radius: 0 !important; + margin-top: -3px !important; } #sidebar-close .toolbarbutton-icon { @@ -1915,12 +1927,14 @@ toolbar .toolbarbutton-1 > .toolbarbutton-icon { top: 0px; position: absolute !important; right: 0 !important; + -moz-context-properties: fill, fill-opacity; + fill: currentColor; background-color: -moz-Dialog !important; box-shadow: inset -1px -1px 0 ThreeDDarkShadow, inset 1px 1px 0 ThreeDLightShadow, inset -2px -2px 0 ThreeDShadow, inset 2px 2px 0 ThreeDHighlight !important; background-repeat: no-repeat !important; - background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTUiIHdpZHRoPSIxNSIgdmlld0JveD0iMCAwIDE1IDE1Ij4KICA8cmVjdCBoZWlnaHQ9IjEiIHdpZHRoPSI3IiB4PSIzIiB5PSI1IiBmaWxsPSJDYW52YXNUZXh0Ii8+PHJlY3QgaGVpZ2h0PSIxIiB3aWR0aD0iNSIgeT0iNiIgeD0iNCIgZmlsbD0iQ2FudmFzVGV4dCIvPjxyZWN0IGhlaWdodD0iMSIgd2lkdGg9IjMiIHg9IjUiIHk9IjciIGZpbGw9IkNhbnZhc1RleHQiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4PSI2IiB5PSI4IiBmaWxsPSJDYW52YXNUZXh0Ii8+CiAgCiAgCjwvc3ZnPg==") !important; + background-image: url("data:image/svg+xml;base64,PHN2ZyBoZWlnaHQ9IjE1IiB3aWR0aD0iMTUiIHZlcnNpb249IjEuMSIgZmlsbD0iY29udGV4dC1maWxsIiBmaWxsLW9wYWNpdHk9ImNvbnRleHQtZmlsbC1vcGFjaXR5IiB2aWV3Qm94PSIwIDAgMTUgMTUiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3QgaGVpZ2h0PSIxIiB3aWR0aD0iNyIgeD0iMyIgeT0iNSIvPjxyZWN0IGhlaWdodD0iMSIgd2lkdGg9IjUiIHk9IjYiIHg9IjQiLz48cmVjdCBoZWlnaHQ9IjEiIHdpZHRoPSIzIiB4PSI1IiB5PSI3Ii8+PHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgeD0iNiIgeT0iOCIvPjwvc3ZnPg==") !important; background-position: center center !important; pointer-events: none; } @@ -2407,18 +2421,29 @@ menupopup > menuitem, padding-block: 0 !important; padding-inline-start: 20px !important; - &:has(> .menu-iconic-left[checked="true"]), &.menuitem-with-favicon, &.privatetab-icon, &.context-menu-add-engine, + &.webextension-menuitem, &[id="userChromejs_openChromeFolder"], &[id="userChromejs_restartApp"], &[data-usercontextid]:not([data-usercontextid="0"]), + &[id*="_-menuitem-"][image], &[image^="moz-extension://"], &[image^="jar:file://"], &[image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABaUlEQVQ4y6WTW0sCQRiG/SEpVBDUVVfphbAEhWAlqYhrLWUlER2IIgrqYkEp6SBmudWiFf0SiSCwpAI7bJnprq6H/sTbGhJiEyt28fAN7zfz8DHDaABo/oPqBpovX7j4T1gOS6dNCcYiZbhOSrCHi2hugqNCwskVYNmXbxoSuPkCN3NWhCdahLLGKCfDcSBjOJiHeTeHPr8EyifCwGb9RMF0RIaHl+E+zoMJ5+AM5WALSBjaEWHayqLXm4GR/YB+Iw2iYIKTMB6WwIRE0EER9r0s+r1pGNZT6F55ReeigPb5F7TOPpMFTDCDkUAGA753GFYFdC08QedJEvkR2DbfzuntFBz+1K2ZFdCz9Ii2qQfo3Pck2MoZpVI/AqtXQAXjchIdk3fQMok/Ib6CaS0Z1c8pdlc8pqXjUOF7AqVSxDvQOq7RKERBi/UKdbDVnK3vkQWWS9Si1vstGIyxCqiBquZUXc429BfU+AL9Tqy8Q2Za8AAAAABJRU5ErkJggg=="] { padding-inline-start: 0px !important; + + & > .menu-iconic-left { + width: 16px !important; + margin-inline-start: 2px !important; + margin-inline-end: 2px !important; + } } + &:has(> .menu-iconic-left[checked="true"]) { + padding-inline-start: 0px !important; + } + & > .menu-iconic-left { margin-inline-end: 0 !important; &[checked="true"] { @@ -2428,28 +2453,13 @@ menupopup > menuitem, fill-opacity: 1 !important; } } - &.menuitem-with-favicon, - &.privatetab-icon, - &.context-menu-add-engine, - &[id="userChromejs_openChromeFolder"], - &[id="userChromejs_restartApp"], - &[data-usercontextid]:not([data-usercontextid="0"]), - &[image^="moz-extension://"], - &[image^="jar:file://"], - &[image="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABaUlEQVQ4y6WTW0sCQRiG/SEpVBDUVVfphbAEhWAlqYhrLWUlER2IIgrqYkEp6SBmudWiFf0SiSCwpAI7bJnprq6H/sTbGhJiEyt28fAN7zfz8DHDaABo/oPqBpovX7j4T1gOS6dNCcYiZbhOSrCHi2hugqNCwskVYNmXbxoSuPkCN3NWhCdahLLGKCfDcSBjOJiHeTeHPr8EyifCwGb9RMF0RIaHl+E+zoMJ5+AM5WALSBjaEWHayqLXm4GR/YB+Iw2iYIKTMB6WwIRE0EER9r0s+r1pGNZT6F55ReeigPb5F7TOPpMFTDCDkUAGA753GFYFdC08QedJEvkR2DbfzuntFBz+1K2ZFdCz9Ii2qQfo3Pck2MoZpVI/AqtXQAXjchIdk3fQMok/Ib6CaS0Z1c8pdlc8pqXjUOF7AqVSxDvQOq7RKERBi/UKdbDVnK3vkQWWS9Si1vstGIyxCqiBquZUXc429BfU+AL9Tqy8Q2Za8AAAAABJRU5ErkJggg=="] { - & > .menu-iconic-left { - width: 16px !important; - margin-inline-start: 2px !important; - margin-inline-end: 2px !important; - } - } &[_moz-menuactive] { background-color: Highlight !important; color: HighlightText !important; } & > .menu-right { margin-inline-end: 0 !important; - list-style-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSI3IiB5PSIzIiB4PSI2IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSI1IiB5PSI0IiB4PSI3IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIzIiB5PSI1IiB4PSI4IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB5PSI2IiB4PSI5IiBmaWxsPSJjdXJyZW50Q29sb3IiLz48L3N2Zz4=") !important; + list-style-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTYiIGhlaWdodD0iMTYiIHZlcnNpb249IjEuMSIgZmlsbD0iY29udGV4dC1maWxsIiBmaWxsLW9wYWNpdHk9ImNvbnRleHQtZmlsbC1vcGFjaXR5IiB2aWV3Qm94PSIwIDAgMTYgMTYiIHhtbDpzcGFjZT0icHJlc2VydmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iNyIgeT0iMyIgeD0iNiIvPjxyZWN0IHdpZHRoPSIxIiBoZWlnaHQ9IjUiIHk9IjQiIHg9IjciLz48cmVjdCB3aWR0aD0iMSIgaGVpZ2h0PSIzIiB5PSI1IiB4PSI4Ii8+PHJlY3Qgd2lkdGg9IjEiIGhlaWdodD0iMSIgeT0iNiIgeD0iOSIvPjwvc3ZnPg==") !important; fill-opacity: 1 !important; } &[disabled="true"], @@ -2503,3 +2513,16 @@ tooltip { list-style-image: url("go.png") !important; width: 18px !important; } + +.menupopup-arrowscrollbox[scrolledtoend="true"][scrolledtostart="true"] { + padding: 0 !important; +} + +.menu-accel, +.menu-iconic-accel { + margin-inline: 24px 21px !important; +} + +.bookmark-item > menupopup > .openintabs-menuitem > .menu-text { + line-height: 18px !important; +}