Sakurai/pdf.js
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Remove unnecessary CSS classes when specifying button icons

Browse Source 
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
1 changed files with 42 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
web/viewer.css
View File

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