Remove unnecessary CSS classes when specifying button icons

Currently we're using *both* ids and classes when specifying the button icons, which seems completely unnecessary and only serves to bloat the CSS code.
In general you always need to be careful about CSS specificity, but in these cases that should not actually be a problem.

Also, while not a button, this patch makes a similar simplification for the `pageNumber`-input.
This commit is contained in:
Jonas Jenwald 2022-04-27 16:13:26 +02:00
parent 4f69d66ab2
commit 1e24fe97f2

View File

@ -772,57 +772,57 @@ select {
inset-inline-start: 12px; inset-inline-start: 12px;
} }
.toolbarButton#sidebarToggle::before { #sidebarToggle::before {
mask-image: var(--toolbarButton-sidebarToggle-icon); mask-image: var(--toolbarButton-sidebarToggle-icon);
transform: scaleX(var(--dir-factor)); transform: scaleX(var(--dir-factor));
} }
.toolbarButton#secondaryToolbarToggle::before { #secondaryToolbarToggle::before {
mask-image: var(--toolbarButton-secondaryToolbarToggle-icon); mask-image: var(--toolbarButton-secondaryToolbarToggle-icon);
transform: scaleX(var(--dir-factor)); transform: scaleX(var(--dir-factor));
} }
#findPrevious.toolbarButton::before { #findPrevious::before {
mask-image: var(--findbarButton-previous-icon); mask-image: var(--findbarButton-previous-icon);
} }
#findNext.toolbarButton::before { #findNext::before {
mask-image: var(--findbarButton-next-icon); mask-image: var(--findbarButton-next-icon);
} }
.toolbarButton#previous::before { #previous::before {
mask-image: var(--toolbarButton-pageUp-icon); mask-image: var(--toolbarButton-pageUp-icon);
} }
.toolbarButton#next::before { #next::before {
mask-image: var(--toolbarButton-pageDown-icon); mask-image: var(--toolbarButton-pageDown-icon);
} }
.toolbarButton#zoomOut::before { #zoomOut::before {
mask-image: var(--toolbarButton-zoomOut-icon); mask-image: var(--toolbarButton-zoomOut-icon);
} }
.toolbarButton#zoomIn::before { #zoomIn::before {
mask-image: var(--toolbarButton-zoomIn-icon); mask-image: var(--toolbarButton-zoomIn-icon);
} }
.toolbarButton#presentationMode::before, #presentationMode::before,
.secondaryToolbarButton#secondaryPresentationMode::before { #secondaryPresentationMode::before {
mask-image: var(--toolbarButton-presentationMode-icon); mask-image: var(--toolbarButton-presentationMode-icon);
} }
.toolbarButton#print::before, #print::before,
.secondaryToolbarButton#secondaryPrint::before { #secondaryPrint::before {
mask-image: var(--toolbarButton-print-icon); mask-image: var(--toolbarButton-print-icon);
} }
.toolbarButton#openFile::before, /* -webkit-non-mozcentral */ #openFile::before, /* -webkit-non-mozcentral */
.secondaryToolbarButton#secondaryOpenFile::before /* -webkit-non-mozcentral */ { #secondaryOpenFile::before /* -webkit-non-mozcentral */ {
mask-image: var(--toolbarButton-openFile-icon); mask-image: var(--toolbarButton-openFile-icon);
} }
.toolbarButton#download::before, #download::before,
.secondaryToolbarButton#secondaryDownload::before { #secondaryDownload::before {
mask-image: var(--toolbarButton-download-icon); mask-image: var(--toolbarButton-download-icon);
} }
@ -836,38 +836,38 @@ a.secondaryToolbarButton[href="#"] {
pointer-events: none; pointer-events: none;
} }
.toolbarButton#viewBookmark::before, #viewBookmark::before,
.secondaryToolbarButton#secondaryViewBookmark::before { #secondaryViewBookmark::before {
mask-image: var(--toolbarButton-bookmark-icon); mask-image: var(--toolbarButton-bookmark-icon);
} }
#viewThumbnail.toolbarButton::before { #viewThumbnail::before {
mask-image: var(--toolbarButton-viewThumbnail-icon); mask-image: var(--toolbarButton-viewThumbnail-icon);
} }
#viewOutline.toolbarButton::before { #viewOutline::before {
mask-image: var(--toolbarButton-viewOutline-icon); mask-image: var(--toolbarButton-viewOutline-icon);
transform: scaleX(var(--dir-factor)); transform: scaleX(var(--dir-factor));
} }
#viewAttachments.toolbarButton::before { #viewAttachments::before {
mask-image: var(--toolbarButton-viewAttachments-icon); mask-image: var(--toolbarButton-viewAttachments-icon);
} }
#viewLayers.toolbarButton::before { #viewLayers::before {
mask-image: var(--toolbarButton-viewLayers-icon); mask-image: var(--toolbarButton-viewLayers-icon);
} }
#currentOutlineItem.toolbarButton::before { #currentOutlineItem::before {
mask-image: var(--toolbarButton-currentOutlineItem-icon); mask-image: var(--toolbarButton-currentOutlineItem-icon);
transform: scaleX(var(--dir-factor)); transform: scaleX(var(--dir-factor));
} }
#viewFind.toolbarButton::before { #viewFind::before {
mask-image: var(--toolbarButton-search-icon); mask-image: var(--toolbarButton-search-icon);
} }
.toolbarButton.pdfSidebarNotification::after { .pdfSidebarNotification::after {
position: absolute; position: absolute;
display: inline-block; display: inline-block;
top: 1px; top: 1px;
@ -898,59 +898,59 @@ a.secondaryToolbarButton[href="#"] {
padding-inline-end: 4px; padding-inline-end: 4px;
} }
.secondaryToolbarButton#firstPage::before { #firstPage::before {
mask-image: var(--secondaryToolbarButton-firstPage-icon); mask-image: var(--secondaryToolbarButton-firstPage-icon);
} }
.secondaryToolbarButton#lastPage::before { #lastPage::before {
mask-image: var(--secondaryToolbarButton-lastPage-icon); mask-image: var(--secondaryToolbarButton-lastPage-icon);
} }
.secondaryToolbarButton#pageRotateCcw::before { #pageRotateCcw::before {
mask-image: var(--secondaryToolbarButton-rotateCcw-icon); mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
} }
.secondaryToolbarButton#pageRotateCw::before { #pageRotateCw::before {
mask-image: var(--secondaryToolbarButton-rotateCw-icon); mask-image: var(--secondaryToolbarButton-rotateCw-icon);
} }
.secondaryToolbarButton#cursorSelectTool::before { #cursorSelectTool::before {
mask-image: var(--secondaryToolbarButton-selectTool-icon); mask-image: var(--secondaryToolbarButton-selectTool-icon);
} }
.secondaryToolbarButton#cursorHandTool::before { #cursorHandTool::before {
mask-image: var(--secondaryToolbarButton-handTool-icon); mask-image: var(--secondaryToolbarButton-handTool-icon);
} }
.secondaryToolbarButton#scrollPage::before { #scrollPage::before {
mask-image: var(--secondaryToolbarButton-scrollPage-icon); mask-image: var(--secondaryToolbarButton-scrollPage-icon);
} }
.secondaryToolbarButton#scrollVertical::before { #scrollVertical::before {
mask-image: var(--secondaryToolbarButton-scrollVertical-icon); mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
} }
.secondaryToolbarButton#scrollHorizontal::before { #scrollHorizontal::before {
mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon); mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
} }
.secondaryToolbarButton#scrollWrapped::before { #scrollWrapped::before {
mask-image: var(--secondaryToolbarButton-scrollWrapped-icon); mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
} }
.secondaryToolbarButton#spreadNone::before { #spreadNone::before {
mask-image: var(--secondaryToolbarButton-spreadNone-icon); mask-image: var(--secondaryToolbarButton-spreadNone-icon);
} }
.secondaryToolbarButton#spreadOdd::before { #spreadOdd::before {
mask-image: var(--secondaryToolbarButton-spreadOdd-icon); mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
} }
.secondaryToolbarButton#spreadEven::before { #spreadEven::before {
mask-image: var(--secondaryToolbarButton-spreadEven-icon); mask-image: var(--secondaryToolbarButton-spreadEven-icon);
} }
.secondaryToolbarButton#documentProperties::before { #documentProperties::before {
mask-image: var(--secondaryToolbarButton-documentProperties-icon); mask-image: var(--secondaryToolbarButton-documentProperties-icon);
} }
@ -991,18 +991,18 @@ a.secondaryToolbarButton[href="#"] {
margin-inline-start: 7px; margin-inline-start: 7px;
} }
.toolbarField#pageNumber { #pageNumber {
-moz-appearance: textfield; /* hides the spinner in moz */ -moz-appearance: textfield; /* hides the spinner in moz */
text-align: right; text-align: right;
width: 40px; width: 40px;
} }
.toolbarField#pageNumber.visiblePageIsLoading { #pageNumber.visiblePageIsLoading {
background-image: var(--loading-icon); background-image: var(--loading-icon);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 3px; background-position: 3px;
} }
.toolbarField#pageNumber::-webkit-inner-spin-button { #pageNumber::-webkit-inner-spin-button {
-webkit-appearance: none; -webkit-appearance: none;
} }