diff --git a/web/images/findbarButton-next-dark.svg b/web/images/findbarButton-next-dark.svg deleted file mode 100644 index 80df70bc17b436..00000000000000 --- 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 d304a9b8c0b325..00000000000000 --- 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 306e628d7c2046..00000000000000 --- 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 c13ff867156c41..00000000000000 --- 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 834d8b0da20d3f..00000000000000 --- 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 8633e420ab9b93..00000000000000 --- 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 1a92f802c7effc..00000000000000 --- 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 2a4ef7385441d8..00000000000000 --- 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 337f85ef4a57e6..00000000000000 --- 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 41bdd8f147889a..00000000000000 --- 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 cd50526ff2bee6..00000000000000 --- 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 7a95098af0601d..00000000000000 --- 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 0c9586ed85a02d..00000000000000 --- 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 75e1b985d853ce..00000000000000 --- 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 8dff9598e3b06d..00000000000000 --- 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 7bf332972de199..00000000000000 --- 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 d2a92e5d4b6329..00000000000000 --- 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 eb7f50e6d0dfd7..00000000000000 --- 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 0bd612f0efaf4b..00000000000000 --- 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 c2ca60c8f046ac..00000000000000 --- 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 dddc4ab262d293..00000000000000 --- 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 13fa9dc7c644aa..00000000000000 --- 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 ad37022f09c977..00000000000000 --- 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 cec8a42061fb9f..00000000000000 --- 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 0160c07cd0aa07..00000000000000 --- 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 0118e41a86abda..00000000000000 --- 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 c9714fdea76381..00000000000000 --- 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 76b042a952769c..00000000000000 --- 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 1704d961a442d9..00000000000000 --- 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 17c55f7b8d2b91..00000000000000 --- 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 9b615541e2a3c4..00000000000000 --- 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 0fb3594d1921cd..00000000000000 --- 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 1fb655162b00b2..00000000000000 --- 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 695b0aa618a984..00000000000000 --- 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 fef213d9ae77e7..2a35396c5574e1 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); @@ -128,40 +130,6 @@ --overlay-button-hover-color: rgba(115, 115, 115, 1); --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 +871,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 +951,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 +978,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 +1071,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 +1150,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 {