Skip to content

Commit

Permalink
Merge pull request #18595 from timvandermeij/css-secondary-toolbar-pa…
Browse files Browse the repository at this point in the history
…rt-1

Group and scope the secondary toolbar button container/icon rules using CSS nesting
  • Loading branch information
timvandermeij authored Aug 11, 2024
2 parents e44e4db + 97b761d commit efe00cf
Showing 1 changed file with 94 additions and 84 deletions.
178 changes: 94 additions & 84 deletions web/viewer.css
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}
Expand Down Expand Up @@ -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);
}
Expand All @@ -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);
}

Expand All @@ -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);
}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down

0 comments on commit efe00cf

Please sign in to comment.