From 97b761dfbf1309693fab722262196514f09923ed Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Sun, 11 Aug 2024 13:40:57 +0200 Subject: [PATCH] Group and scope the secondary toolbar button container/icon rules using CSS nesting 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 --- web/viewer.css | 178 ++++++++++++++++++++++++++----------------------- 1 file changed, 94 insertions(+), 84 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index d9a7bdde7460f..9f3c3f9f6c8d8 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -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;