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:
parent
4f69d66ab2
commit
1e24fe97f2
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user