mirrors/pdf.js
1
0
Fork 0
mirror of https://github.com/mozilla/pdf.js.git synced 2025-04-19 22:58:07 +02:00
Code Activity

Group and scope the secondary toolbar button container/icon rules using CSS nesting

Browse source 
The secondary toolbar CSS rules predate the general availability of CSS
nesting, which makes them more difficult to understand and change
safely. The primary issues are that the rules are spread over the
`viewer.css` file, they share blocks with other elements and the scope
of the rules is sometimes bigger than necessary.

This refactoring groups all CSS rules for the secondary toolbar button
container/icons together, scoped to the top-level `#secondaryToolbar`
element, for improved overview and isolation. Note that this patch only
intends to move the existing rules around and not change any behavior.
Moreover, this patch does not move the rules for the secondary toolbar
itself and the secondary toolbar buttons; those will be part of a
follow-up patch and will be easier once this is in place first.

Co-authored-by: Calixte Denizet <calixte.denizet@gmail.com>
This commit is contained in:
Tim van der Meij 2024-08-11 13:40:57 +02:00
parent e44e4db529
commit 97b761dfbf
No known key found for this signature in database
GPG key ID: 8C3FD2925A5F2762
1 changed files with 94 additions and 84 deletions
Download patch file Download diff file Expand all files Collapse all files

178
web/viewer.css
View file

@ -524,14 +524,6 @@ body {
background-color: white;
}
#secondaryToolbarButtonContainer {
max-width: 220px;
min-height: 26px;
max-height: calc(var(--viewer-container-height) - 40px);
overflow-y: auto;
margin-bottom: -4px;
}
#editorStampParamsToolbar {
inset-inline-end: calc(var(--editor-toolbar-base-offset) + 0px);
}
@ -834,10 +826,6 @@ body {
mask-image: var(--toolbarButton-zoomIn-icon);
}
#presentationMode::before {
mask-image: var(--toolbarButton-presentationMode-icon);
}
#editorFreeText::before {
mask-image: var(--toolbarButton-editorFreeText-icon);
}
@ -854,17 +842,11 @@ body {
mask-image: var(--toolbarButton-editorStamp-icon);
}
:is(#print, #secondaryPrint)::before {
#print::before {
mask-image: var(--toolbarButton-print-icon);
}
/*#if GENERIC*/
#secondaryOpenFile::before {
mask-image: var(--toolbarButton-openFile-icon);
}
/*#endif*/
:is(#download, #secondaryDownload)::before {
#download::before {
mask-image: var(--toolbarButton-download-icon);
}
@ -877,10 +859,6 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
pointer-events: none;
}
#viewBookmark::before {
mask-image: var(--toolbarButton-bookmark-icon);
}
#viewThumbnail::before {
mask-image: var(--toolbarButton-viewThumbnail-icon);
}
@ -939,66 +917,6 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] {
padding-inline-end: 4px;
}
#firstPage::before {
mask-image: var(--secondaryToolbarButton-firstPage-icon);
}
#lastPage::before {
mask-image: var(--secondaryToolbarButton-lastPage-icon);
}
#pageRotateCcw::before {
mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
}
#pageRotateCw::before {
mask-image: var(--secondaryToolbarButton-rotateCw-icon);
}
#cursorSelectTool::before {
mask-image: var(--secondaryToolbarButton-selectTool-icon);
}
#cursorHandTool::before {
mask-image: var(--secondaryToolbarButton-handTool-icon);
}
#scrollPage::before {
mask-image: var(--secondaryToolbarButton-scrollPage-icon);
}
#scrollVertical::before {
mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
}
#scrollHorizontal::before {
mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
}
#scrollWrapped::before {
mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
}
#spreadNone::before {
mask-image: var(--secondaryToolbarButton-spreadNone-icon);
}
#spreadOdd::before {
mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
}
#spreadEven::before {
mask-image: var(--secondaryToolbarButton-spreadEven-icon);
}
#documentProperties::before {
mask-image: var(--secondaryToolbarButton-documentProperties-icon);
}
#imageAltTextSettings::before {
mask-image: var(--secondaryToolbarButton-imageAltTextSettings-icon);
}
.verticalToolbarSeparator {
display: block;
margin: 5px 2px;
@ -1345,6 +1263,98 @@ dialog :link {
z-index: 50000; /* should be higher than anything else in PDF.js! */
}
#secondaryToolbar {
#secondaryToolbarButtonContainer {
margin-bottom: -4px;
max-height: calc(var(--viewer-container-height) - 40px);
max-width: 220px;
min-height: 26px;
overflow-y: auto;
/*#if GENERIC*/
#secondaryOpenFile::before {
mask-image: var(--toolbarButton-openFile-icon);
}
/*#endif*/
#secondaryPrint::before {
mask-image: var(--toolbarButton-print-icon);
}
#secondaryDownload::before {
mask-image: var(--toolbarButton-download-icon);
}
#presentationMode::before {
mask-image: var(--toolbarButton-presentationMode-icon);
}
#viewBookmark::before {
mask-image: var(--toolbarButton-bookmark-icon);
}
#firstPage::before {
mask-image: var(--secondaryToolbarButton-firstPage-icon);
}
#lastPage::before {
mask-image: var(--secondaryToolbarButton-lastPage-icon);
}
#pageRotateCcw::before {
mask-image: var(--secondaryToolbarButton-rotateCcw-icon);
}
#pageRotateCw::before {
mask-image: var(--secondaryToolbarButton-rotateCw-icon);
}
#cursorSelectTool::before {
mask-image: var(--secondaryToolbarButton-selectTool-icon);
}
#cursorHandTool::before {
mask-image: var(--secondaryToolbarButton-handTool-icon);
}
#scrollPage::before {
mask-image: var(--secondaryToolbarButton-scrollPage-icon);
}
#scrollVertical::before {
mask-image: var(--secondaryToolbarButton-scrollVertical-icon);
}
#scrollHorizontal::before {
mask-image: var(--secondaryToolbarButton-scrollHorizontal-icon);
}
#scrollWrapped::before {
mask-image: var(--secondaryToolbarButton-scrollWrapped-icon);
}
#spreadNone::before {
mask-image: var(--secondaryToolbarButton-spreadNone-icon);
}
#spreadOdd::before {
mask-image: var(--secondaryToolbarButton-spreadOdd-icon);
}
#spreadEven::before {
mask-image: var(--secondaryToolbarButton-spreadEven-icon);
}
#imageAltTextSettings::before {
mask-image: var(--secondaryToolbarButton-imageAltTextSettings-icon);
}
#documentProperties::before {
mask-image: var(--secondaryToolbarButton-documentProperties-icon);
}
}
}
#findbar {
background-color: var(--toolbar-bg-color);
cursor: default;