From f2ec546cbb2e923dd2b7a2469f25ea234afd23ef Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Sun, 29 Nov 2020 15:32:15 +0100 Subject: [PATCH] Use the same SVG images, in the default viewer, regardless of the CSS theme As mentioned in https://github.com/mozilla/pdf.js/wiki/Frequently-Asked-Questions#faq-support, PDF.js version `2.6.347` is the last release with IE 11/Edge support. Hence we should now be able to reduce unnecessary duplication in the default viewer image resources, note the files in the `web/images/` folder with a `-dark` suffix, by using only *one* SVG-image for each icon and letting the `background-color` depend on the CSS theme instead. For the `gulp mozcentral` build-target, the resulting `web/images/` folder is reduced from `43 997` to `28 566` bytes (~35 percent). *Please note:* I don't really know if this implementation is necessarily the *best* solution, but it seems to work well enough in e.g. Firefox Nightly and Google Chrome Beta as far as my testing goes. --- web/images/findbarButton-next-dark.svg | 6 - web/images/findbarButton-previous-dark.svg | 5 - ...yToolbarButton-documentProperties-dark.svg | 16 -- .../secondaryToolbarButton-firstPage-dark.svg | 2 - .../secondaryToolbarButton-handTool-dark.svg | 2 - .../secondaryToolbarButton-lastPage-dark.svg | 2 - .../secondaryToolbarButton-rotateCcw-dark.svg | 2 - .../secondaryToolbarButton-rotateCw-dark.svg | 5 - ...aryToolbarButton-scrollHorizontal-dark.svg | 2 - ...ndaryToolbarButton-scrollVertical-dark.svg | 2 - ...ondaryToolbarButton-scrollWrapped-dark.svg | 2 - ...secondaryToolbarButton-selectTool-dark.svg | 5 - ...secondaryToolbarButton-spreadEven-dark.svg | 2 - ...secondaryToolbarButton-spreadNone-dark.svg | 2 - .../secondaryToolbarButton-spreadOdd-dark.svg | 2 - web/images/toolbarButton-bookmark-dark.svg | 2 - web/images/toolbarButton-download-dark.svg | 5 - web/images/toolbarButton-menuArrow-dark.svg | 1 - web/images/toolbarButton-openFile-dark.svg | 5 - web/images/toolbarButton-pageDown-dark.svg | 8 - web/images/toolbarButton-pageUp-dark.svg | 13 -- .../toolbarButton-presentationMode-dark.svg | 2 - web/images/toolbarButton-print-dark.svg | 5 - web/images/toolbarButton-search-dark.svg | 5 - ...lbarButton-secondaryToolbarToggle-dark.svg | 5 - .../toolbarButton-sidebarToggle-dark.svg | 5 - .../toolbarButton-viewAttachments-dark.svg | 2 - web/images/toolbarButton-viewLayers-dark.svg | 1 - web/images/toolbarButton-viewOutline-dark.svg | 2 - .../toolbarButton-viewThumbnail-dark.svg | 5 - web/images/toolbarButton-zoomIn-dark.svg | 5 - web/images/toolbarButton-zoomOut-dark.svg | 5 - web/images/treeitem-collapsed-dark.svg | 2 - web/images/treeitem-expanded-dark.svg | 2 - web/viewer.css | 153 ++++++++++-------- 35 files changed, 82 insertions(+), 208 deletions(-) delete mode 100644 web/images/findbarButton-next-dark.svg delete mode 100644 web/images/findbarButton-previous-dark.svg delete mode 100644 web/images/secondaryToolbarButton-documentProperties-dark.svg delete mode 100644 web/images/secondaryToolbarButton-firstPage-dark.svg delete mode 100644 web/images/secondaryToolbarButton-handTool-dark.svg delete mode 100644 web/images/secondaryToolbarButton-lastPage-dark.svg delete mode 100644 web/images/secondaryToolbarButton-rotateCcw-dark.svg delete mode 100644 web/images/secondaryToolbarButton-rotateCw-dark.svg delete mode 100644 web/images/secondaryToolbarButton-scrollHorizontal-dark.svg delete mode 100644 web/images/secondaryToolbarButton-scrollVertical-dark.svg delete mode 100644 web/images/secondaryToolbarButton-scrollWrapped-dark.svg delete mode 100644 web/images/secondaryToolbarButton-selectTool-dark.svg delete mode 100644 web/images/secondaryToolbarButton-spreadEven-dark.svg delete mode 100644 web/images/secondaryToolbarButton-spreadNone-dark.svg delete mode 100644 web/images/secondaryToolbarButton-spreadOdd-dark.svg delete mode 100644 web/images/toolbarButton-bookmark-dark.svg delete mode 100644 web/images/toolbarButton-download-dark.svg delete mode 100644 web/images/toolbarButton-menuArrow-dark.svg delete mode 100644 web/images/toolbarButton-openFile-dark.svg delete mode 100644 web/images/toolbarButton-pageDown-dark.svg delete mode 100644 web/images/toolbarButton-pageUp-dark.svg delete mode 100644 web/images/toolbarButton-presentationMode-dark.svg delete mode 100644 web/images/toolbarButton-print-dark.svg delete mode 100644 web/images/toolbarButton-search-dark.svg delete mode 100644 web/images/toolbarButton-secondaryToolbarToggle-dark.svg delete mode 100644 web/images/toolbarButton-sidebarToggle-dark.svg delete mode 100644 web/images/toolbarButton-viewAttachments-dark.svg delete mode 100644 web/images/toolbarButton-viewLayers-dark.svg delete mode 100644 web/images/toolbarButton-viewOutline-dark.svg delete mode 100644 web/images/toolbarButton-viewThumbnail-dark.svg delete mode 100644 web/images/toolbarButton-zoomIn-dark.svg delete mode 100644 web/images/toolbarButton-zoomOut-dark.svg delete mode 100644 web/images/treeitem-collapsed-dark.svg delete mode 100644 web/images/treeitem-expanded-dark.svg diff --git a/web/images/findbarButton-next-dark.svg b/web/images/findbarButton-next-dark.svg deleted file mode 100644 index 80df70bc1..000000000 --- a/web/images/findbarButton-next-dark.svg +++ /dev/null @@ -1,6 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/findbarButton-previous-dark.svg b/web/images/findbarButton-previous-dark.svg deleted file mode 100644 index d304a9b8c..000000000 --- a/web/images/findbarButton-previous-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-documentProperties-dark.svg b/web/images/secondaryToolbarButton-documentProperties-dark.svg deleted file mode 100644 index 306e628d7..000000000 --- a/web/images/secondaryToolbarButton-documentProperties-dark.svg +++ /dev/null @@ -1,16 +0,0 @@ - - - - - - - - - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-firstPage-dark.svg b/web/images/secondaryToolbarButton-firstPage-dark.svg deleted file mode 100644 index c13ff8671..000000000 --- a/web/images/secondaryToolbarButton-firstPage-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-handTool-dark.svg b/web/images/secondaryToolbarButton-handTool-dark.svg deleted file mode 100644 index 834d8b0da..000000000 --- a/web/images/secondaryToolbarButton-handTool-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-lastPage-dark.svg b/web/images/secondaryToolbarButton-lastPage-dark.svg deleted file mode 100644 index 8633e420a..000000000 --- a/web/images/secondaryToolbarButton-lastPage-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-rotateCcw-dark.svg b/web/images/secondaryToolbarButton-rotateCcw-dark.svg deleted file mode 100644 index 1a92f802c..000000000 --- a/web/images/secondaryToolbarButton-rotateCcw-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-rotateCw-dark.svg b/web/images/secondaryToolbarButton-rotateCw-dark.svg deleted file mode 100644 index 2a4ef7385..000000000 --- a/web/images/secondaryToolbarButton-rotateCw-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-scrollHorizontal-dark.svg b/web/images/secondaryToolbarButton-scrollHorizontal-dark.svg deleted file mode 100644 index 337f85ef4..000000000 --- a/web/images/secondaryToolbarButton-scrollHorizontal-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-scrollVertical-dark.svg b/web/images/secondaryToolbarButton-scrollVertical-dark.svg deleted file mode 100644 index 41bdd8f14..000000000 --- a/web/images/secondaryToolbarButton-scrollVertical-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-scrollWrapped-dark.svg b/web/images/secondaryToolbarButton-scrollWrapped-dark.svg deleted file mode 100644 index cd50526ff..000000000 --- a/web/images/secondaryToolbarButton-scrollWrapped-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-selectTool-dark.svg b/web/images/secondaryToolbarButton-selectTool-dark.svg deleted file mode 100644 index 7a95098af..000000000 --- a/web/images/secondaryToolbarButton-selectTool-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-spreadEven-dark.svg b/web/images/secondaryToolbarButton-spreadEven-dark.svg deleted file mode 100644 index 0c9586ed8..000000000 --- a/web/images/secondaryToolbarButton-spreadEven-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-spreadNone-dark.svg b/web/images/secondaryToolbarButton-spreadNone-dark.svg deleted file mode 100644 index 75e1b985d..000000000 --- a/web/images/secondaryToolbarButton-spreadNone-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/secondaryToolbarButton-spreadOdd-dark.svg b/web/images/secondaryToolbarButton-spreadOdd-dark.svg deleted file mode 100644 index 8dff9598e..000000000 --- a/web/images/secondaryToolbarButton-spreadOdd-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/toolbarButton-bookmark-dark.svg b/web/images/toolbarButton-bookmark-dark.svg deleted file mode 100644 index 7bf332972..000000000 --- a/web/images/toolbarButton-bookmark-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/toolbarButton-download-dark.svg b/web/images/toolbarButton-download-dark.svg deleted file mode 100644 index d2a92e5d4..000000000 --- a/web/images/toolbarButton-download-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/toolbarButton-menuArrow-dark.svg b/web/images/toolbarButton-menuArrow-dark.svg deleted file mode 100644 index eb7f50e6d..000000000 --- a/web/images/toolbarButton-menuArrow-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/images/toolbarButton-openFile-dark.svg b/web/images/toolbarButton-openFile-dark.svg deleted file mode 100644 index 0bd612f0e..000000000 --- a/web/images/toolbarButton-openFile-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/toolbarButton-pageDown-dark.svg b/web/images/toolbarButton-pageDown-dark.svg deleted file mode 100644 index c2ca60c8f..000000000 --- a/web/images/toolbarButton-pageDown-dark.svg +++ /dev/null @@ -1,8 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/toolbarButton-pageUp-dark.svg b/web/images/toolbarButton-pageUp-dark.svg deleted file mode 100644 index dddc4ab26..000000000 --- a/web/images/toolbarButton-pageUp-dark.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - \ No newline at end of file diff --git a/web/images/toolbarButton-presentationMode-dark.svg b/web/images/toolbarButton-presentationMode-dark.svg deleted file mode 100644 index 13fa9dc7c..000000000 --- a/web/images/toolbarButton-presentationMode-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/toolbarButton-print-dark.svg b/web/images/toolbarButton-print-dark.svg deleted file mode 100644 index ad37022f0..000000000 --- a/web/images/toolbarButton-print-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/toolbarButton-search-dark.svg b/web/images/toolbarButton-search-dark.svg deleted file mode 100644 index cec8a4206..000000000 --- a/web/images/toolbarButton-search-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/toolbarButton-secondaryToolbarToggle-dark.svg b/web/images/toolbarButton-secondaryToolbarToggle-dark.svg deleted file mode 100644 index 0160c07cd..000000000 --- a/web/images/toolbarButton-secondaryToolbarToggle-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/toolbarButton-sidebarToggle-dark.svg b/web/images/toolbarButton-sidebarToggle-dark.svg deleted file mode 100644 index 0118e41a8..000000000 --- a/web/images/toolbarButton-sidebarToggle-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/toolbarButton-viewAttachments-dark.svg b/web/images/toolbarButton-viewAttachments-dark.svg deleted file mode 100644 index c9714fdea..000000000 --- a/web/images/toolbarButton-viewAttachments-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/toolbarButton-viewLayers-dark.svg b/web/images/toolbarButton-viewLayers-dark.svg deleted file mode 100644 index 76b042a95..000000000 --- a/web/images/toolbarButton-viewLayers-dark.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/web/images/toolbarButton-viewOutline-dark.svg b/web/images/toolbarButton-viewOutline-dark.svg deleted file mode 100644 index 1704d961a..000000000 --- a/web/images/toolbarButton-viewOutline-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/toolbarButton-viewThumbnail-dark.svg b/web/images/toolbarButton-viewThumbnail-dark.svg deleted file mode 100644 index 17c55f7b8..000000000 --- a/web/images/toolbarButton-viewThumbnail-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/toolbarButton-zoomIn-dark.svg b/web/images/toolbarButton-zoomIn-dark.svg deleted file mode 100644 index 9b615541e..000000000 --- a/web/images/toolbarButton-zoomIn-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/toolbarButton-zoomOut-dark.svg b/web/images/toolbarButton-zoomOut-dark.svg deleted file mode 100644 index 0fb3594d1..000000000 --- a/web/images/toolbarButton-zoomOut-dark.svg +++ /dev/null @@ -1,5 +0,0 @@ - - \ No newline at end of file diff --git a/web/images/treeitem-collapsed-dark.svg b/web/images/treeitem-collapsed-dark.svg deleted file mode 100644 index 1fb655162..000000000 --- a/web/images/treeitem-collapsed-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/images/treeitem-expanded-dark.svg b/web/images/treeitem-expanded-dark.svg deleted file mode 100644 index 695b0aa61..000000000 --- a/web/images/treeitem-expanded-dark.svg +++ /dev/null @@ -1,2 +0,0 @@ - \ No newline at end of file diff --git a/web/viewer.css b/web/viewer.css index fef213d9a..b8188a4a2 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -32,6 +32,7 @@ --progressBar-indeterminate-blend-color: rgba(116, 177, 239, 1); --scrollbar-color: auto; --scrollbar-bg-color: auto; + --toolbar-icon-bg-color: rgba(0, 0, 0, 1); --sidebar-bg-color: rgba(245, 246, 247, 1); --toolbar-bg-color: rgba(249, 249, 250, 1); @@ -103,6 +104,7 @@ --progressBar-indeterminate-blend-color: rgba(20, 68, 133, 1); --scrollbar-color: rgba(121, 121, 123, 1); --scrollbar-bg-color: rgba(35, 35, 39, 1); + --toolbar-icon-bg-color: rgba(255, 255, 255, 1); --sidebar-bg-color: rgba(50, 50, 52, 1); --toolbar-bg-color: rgba(56, 56, 61, 1); @@ -127,41 +129,10 @@ --overlay-button-bg-color: rgba(92, 92, 97, 1); --overlay-button-hover-color: rgba(115, 115, 115, 1); + /* This image is used in elements, which unfortunately means that + * the `mask-image` approach used with all of the other images doesn't work + * here; hence why we still have two versions of this particular image. */ --loading-icon: url(images/loading-dark.svg); - --treeitem-expanded-icon: url(images/treeitem-expanded-dark.svg); - --treeitem-collapsed-icon: url(images/treeitem-collapsed-dark.svg); - --toolbarButton-menuArrow-icon: url(images/toolbarButton-menuArrow-dark.svg); - --toolbarButton-sidebarToggle-icon: url(images/toolbarButton-sidebarToggle-dark.svg); - --toolbarButton-secondaryToolbarToggle-icon: url(images/toolbarButton-secondaryToolbarToggle-dark.svg); - --toolbarButton-pageUp-icon: url(images/toolbarButton-pageUp-dark.svg); - --toolbarButton-pageDown-icon: url(images/toolbarButton-pageDown-dark.svg); - --toolbarButton-zoomOut-icon: url(images/toolbarButton-zoomOut-dark.svg); - --toolbarButton-zoomIn-icon: url(images/toolbarButton-zoomIn-dark.svg); - --toolbarButton-presentationMode-icon: url(images/toolbarButton-presentationMode-dark.svg); - --toolbarButton-print-icon: url(images/toolbarButton-print-dark.svg); - --toolbarButton-openFile-icon: url(images/toolbarButton-openFile-dark.svg); - --toolbarButton-download-icon: url(images/toolbarButton-download-dark.svg); - --toolbarButton-bookmark-icon: url(images/toolbarButton-bookmark-dark.svg); - --toolbarButton-viewThumbnail-icon: url(images/toolbarButton-viewThumbnail-dark.svg); - --toolbarButton-viewOutline-icon: url(images/toolbarButton-viewOutline-dark.svg); - --toolbarButton-viewAttachments-icon: url(images/toolbarButton-viewAttachments-dark.svg); - --toolbarButton-viewLayers-icon: url(images/toolbarButton-viewLayers-dark.svg); - --toolbarButton-search-icon: url(images/toolbarButton-search-dark.svg); - --findbarButton-previous-icon: url(images/findbarButton-previous-dark.svg); - --findbarButton-next-icon: url(images/findbarButton-next-dark.svg); - --secondaryToolbarButton-firstPage-icon: url(images/secondaryToolbarButton-firstPage-dark.svg); - --secondaryToolbarButton-lastPage-icon: url(images/secondaryToolbarButton-lastPage-dark.svg); - --secondaryToolbarButton-rotateCcw-icon: url(images/secondaryToolbarButton-rotateCcw-dark.svg); - --secondaryToolbarButton-rotateCw-icon: url(images/secondaryToolbarButton-rotateCw-dark.svg); - --secondaryToolbarButton-selectTool-icon: url(images/secondaryToolbarButton-selectTool-dark.svg); - --secondaryToolbarButton-handTool-icon: url(images/secondaryToolbarButton-handTool-dark.svg); - --secondaryToolbarButton-scrollVertical-icon: url(images/secondaryToolbarButton-scrollVertical-dark.svg); - --secondaryToolbarButton-scrollHorizontal-icon: url(images/secondaryToolbarButton-scrollHorizontal-dark.svg); - --secondaryToolbarButton-scrollWrapped-icon: url(images/secondaryToolbarButton-scrollWrapped-dark.svg); - --secondaryToolbarButton-spreadNone-icon: url(images/secondaryToolbarButton-spreadNone-dark.svg); - --secondaryToolbarButton-spreadOdd-icon: url(images/secondaryToolbarButton-spreadOdd-dark.svg); - --secondaryToolbarButton-spreadEven-icon: url(images/secondaryToolbarButton-spreadEven-dark.svg); - --secondaryToolbarButton-documentProperties-icon: url(images/secondaryToolbarButton-documentProperties-dark.svg); } } @@ -903,12 +874,11 @@ html[dir="rtl"] #toolbarViewerLeft > .toolbarButton:first-child { margin-top: 2px !important; } .dropdownToolbarButton::after { - position: absolute; - display: inline-block; top: 6px; - content: var(--toolbarButton-menuArrow-icon); pointer-events: none; - max-width: 16px; + + -webkit-mask-image: var(--toolbarButton-menuArrow-icon); + mask-image: var(--toolbarButton-menuArrow-icon); } html[dir="ltr"] .dropdownToolbarButton::after { right: 7px; @@ -984,13 +954,23 @@ html[dir="rtl"] #findNext { } .toolbarButton::before, -.secondaryToolbarButton::before { +.secondaryToolbarButton::before, +.dropdownToolbarButton::after { /* All matching images have a size of 16x16 * All relevant containers have a size of 28x28 */ position: absolute; display: inline-block; + width: 16px; + height: 16px; + + content: ""; + background-color: var(--toolbar-icon-bg-color); + -webkit-mask-size: cover; + mask-size: cover; +} +.toolbarButton::before, +.secondaryToolbarButton::before { left: 6px; - max-width: 16px; } html[dir="ltr"] .secondaryToolbarButton::before { @@ -1001,73 +981,85 @@ html[dir="rtl"] .secondaryToolbarButton::before { } .toolbarButton#sidebarToggle::before { - content: var(--toolbarButton-sidebarToggle-icon); + -webkit-mask-image: var(--toolbarButton-sidebarToggle-icon); + mask-image: var(--toolbarButton-sidebarToggle-icon); } html[dir="rtl"] .toolbarButton#sidebarToggle::before { transform: scaleX(-1); } .toolbarButton#secondaryToolbarToggle::before { - content: var(--toolbarButton-secondaryToolbarToggle-icon); + -webkit-mask-image: var(--toolbarButton-secondaryToolbarToggle-icon); + mask-image: var(--toolbarButton-secondaryToolbarToggle-icon); } html[dir="rtl"] .toolbarButton#secondaryToolbarToggle::before { transform: scaleX(-1); } .toolbarButton.findPrevious::before { - content: var(--findbarButton-previous-icon); + -webkit-mask-image: var(--findbarButton-previous-icon); + mask-image: var(--findbarButton-previous-icon); } html[dir="rtl"] .toolbarButton.findPrevious::before { transform: scaleX(-1); } .toolbarButton.findNext::before { - content: var(--findbarButton-next-icon); + -webkit-mask-image: var(--findbarButton-next-icon); + mask-image: var(--findbarButton-next-icon); } html[dir="rtl"] .toolbarButton.findNext::before { transform: scaleX(-1); } .toolbarButton.pageUp::before { - content: var(--toolbarButton-pageUp-icon); + -webkit-mask-image: var(--toolbarButton-pageUp-icon); + mask-image: var(--toolbarButton-pageUp-icon); } html[dir="rtl"] .toolbarButton.pageUp::before { transform: scaleX(-1); } .toolbarButton.pageDown::before { - content: var(--toolbarButton-pageDown-icon); + -webkit-mask-image: var(--toolbarButton-pageDown-icon); + mask-image: var(--toolbarButton-pageDown-icon); } html[dir="rtl"] .toolbarButton.pageDown::before { transform: scaleX(-1); } .toolbarButton.zoomOut::before { - content: var(--toolbarButton-zoomOut-icon); + -webkit-mask-image: var(--toolbarButton-zoomOut-icon); + mask-image: var(--toolbarButton-zoomOut-icon); } .toolbarButton.zoomIn::before { - content: var(--toolbarButton-zoomIn-icon); + -webkit-mask-image: var(--toolbarButton-zoomIn-icon); + mask-image: var(--toolbarButton-zoomIn-icon); } .toolbarButton.presentationMode::before, .secondaryToolbarButton.presentationMode::before { - content: var(--toolbarButton-presentationMode-icon); + -webkit-mask-image: var(--toolbarButton-presentationMode-icon); + mask-image: var(--toolbarButton-presentationMode-icon); } .toolbarButton.print::before, .secondaryToolbarButton.print::before { - content: var(--toolbarButton-print-icon); + -webkit-mask-image: var(--toolbarButton-print-icon); + mask-image: var(--toolbarButton-print-icon); } .toolbarButton.openFile::before, .secondaryToolbarButton.openFile::before { - content: var(--toolbarButton-openFile-icon); + -webkit-mask-image: var(--toolbarButton-openFile-icon); + mask-image: var(--toolbarButton-openFile-icon); } .toolbarButton.download::before, .secondaryToolbarButton.download::before { - content: var(--toolbarButton-download-icon); + -webkit-mask-image: var(--toolbarButton-download-icon); + mask-image: var(--toolbarButton-download-icon); } .secondaryToolbarButton.bookmark { @@ -1082,30 +1074,36 @@ html[dir="rtl"] .toolbarButton.pageDown::before { .toolbarButton.bookmark::before, .secondaryToolbarButton.bookmark::before { - content: var(--toolbarButton-bookmark-icon); + -webkit-mask-image: var(--toolbarButton-bookmark-icon); + mask-image: var(--toolbarButton-bookmark-icon); } #viewThumbnail.toolbarButton::before { - content: var(--toolbarButton-viewThumbnail-icon); + -webkit-mask-image: var(--toolbarButton-viewThumbnail-icon); + mask-image: var(--toolbarButton-viewThumbnail-icon); } #viewOutline.toolbarButton::before { - content: var(--toolbarButton-viewOutline-icon); + -webkit-mask-image: var(--toolbarButton-viewOutline-icon); + mask-image: var(--toolbarButton-viewOutline-icon); } html[dir="rtl"] #viewOutline.toolbarButton::before { transform: scaleX(-1); } #viewAttachments.toolbarButton::before { - content: var(--toolbarButton-viewAttachments-icon); + -webkit-mask-image: var(--toolbarButton-viewAttachments-icon); + mask-image: var(--toolbarButton-viewAttachments-icon); } #viewLayers.toolbarButton::before { - content: var(--toolbarButton-viewLayers-icon); + -webkit-mask-image: var(--toolbarButton-viewLayers-icon); + mask-image: var(--toolbarButton-viewLayers-icon); } #viewFind.toolbarButton::before { - content: var(--toolbarButton-search-icon); + -webkit-mask-image: var(--toolbarButton-search-icon); + mask-image: var(--toolbarButton-search-icon); } .toolbarButton.pdfSidebarNotification::after { @@ -1155,55 +1153,68 @@ html[dir="rtl"] .secondaryToolbarButton > span { } .secondaryToolbarButton.firstPage::before { - content: var(--secondaryToolbarButton-firstPage-icon); + -webkit-mask-image: var(--secondaryToolbarButton-firstPage-icon); + mask-image: var(--secondaryToolbarButton-firstPage-icon); } .secondaryToolbarButton.lastPage::before { - content: var(--secondaryToolbarButton-lastPage-icon); + -webkit-mask-image: var(--secondaryToolbarButton-lastPage-icon); + mask-image: var(--secondaryToolbarButton-lastPage-icon); } .secondaryToolbarButton.rotateCcw::before { - content: var(--secondaryToolbarButton-rotateCcw-icon); + -webkit-mask-image: var(--secondaryToolbarButton-rotateCcw-icon); + mask-image: var(--secondaryToolbarButton-rotateCcw-icon); } .secondaryToolbarButton.rotateCw::before { - content: var(--secondaryToolbarButton-rotateCw-icon); + -webkit-mask-image: var(--secondaryToolbarButton-rotateCw-icon); + mask-image: var(--secondaryToolbarButton-rotateCw-icon); } .secondaryToolbarButton.selectTool::before { - content: var(--secondaryToolbarButton-selectTool-icon); + -webkit-mask-image: var(--secondaryToolbarButton-selectTool-icon); + mask-image: var(--secondaryToolbarButton-selectTool-icon); } .secondaryToolbarButton.handTool::before { - content: var(--secondaryToolbarButton-handTool-icon); + -webkit-mask-image: var(--secondaryToolbarButton-handTool-icon); + mask-image: var(--secondaryToolbarButton-handTool-icon); } .secondaryToolbarButton.scrollVertical::before { - content: var(--secondaryToolbarButton-scrollVertical-icon); + -webkit-mask-image: var(--secondaryToolbarButton-scrollVertical-icon); + mask-image: var(--secondaryToolbarButton-scrollVertical-icon); } .secondaryToolbarButton.scrollHorizontal::before { - content: var(--secondaryToolbarButton-scrollHorizontal-icon); + -webkit-mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); + mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); } .secondaryToolbarButton.scrollWrapped::before { - content: var(--secondaryToolbarButton-scrollWrapped-icon); + -webkit-mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); + mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); } .secondaryToolbarButton.spreadNone::before { - content: var(--secondaryToolbarButton-spreadNone-icon); + -webkit-mask-image: var(--secondaryToolbarButton-spreadNone-icon); + mask-image: var(--secondaryToolbarButton-spreadNone-icon); } .secondaryToolbarButton.spreadOdd::before { - content: var(--secondaryToolbarButton-spreadOdd-icon); + -webkit-mask-image: var(--secondaryToolbarButton-spreadOdd-icon); + mask-image: var(--secondaryToolbarButton-spreadOdd-icon); } .secondaryToolbarButton.spreadEven::before { - content: var(--secondaryToolbarButton-spreadEven-icon); + -webkit-mask-image: var(--secondaryToolbarButton-spreadEven-icon); + mask-image: var(--secondaryToolbarButton-spreadEven-icon); } .secondaryToolbarButton.documentProperties::before { - content: var(--secondaryToolbarButton-documentProperties-icon); + -webkit-mask-image: var(--secondaryToolbarButton-documentProperties-icon); + mask-image: var(--secondaryToolbarButton-documentProperties-icon); } .verticalToolbarSeparator {