From 2a982e71edf0108d32b1729ec1998b84986a2ea2 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Mon, 12 Aug 2024 19:51:22 +0200 Subject: [PATCH 1/3] Merge the duplicate `.editorParamsToolbar` CSS blocks Now that we have dedicated CSS scopes for the findbar and the secondary toolbar we have ended up with two CSS blocks with identical selectors, so now we can combine them for simplicity and to remove some rules in the first block that were always overridden by the second block. Co-authored-by: Calixte Denizet --- web/viewer.css | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index c12cd44307a9e..f4c9feba62260 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -446,11 +446,13 @@ body { } .editorParamsToolbar { + background-color: var(--doorhanger-bg-color); top: var(--toolbar-height); position: absolute; z-index: 30000; height: auto; - padding: 0 4px; + inset-inline-end: 4px; + padding: 6px 0 10px; margin: 4px 2px; font: message-box; font-size: 12px; @@ -459,13 +461,6 @@ body { cursor: default; } -.editorParamsToolbar { - padding: 6px 0 10px; - inset-inline-end: 4px; - height: auto; - background-color: var(--doorhanger-bg-color); -} - .editorParamsToolbarContainer { width: 220px; margin-bottom: -4px; From 68bda90777418a938adbb6996765a762abffac72 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Mon, 12 Aug 2024 19:47:46 +0200 Subject: [PATCH 2/3] Improve grouping of the secondary toolbar button CSS rules Using the `:is(a)` selector we can move the previously separate rules into the main `.toolbarButton` override rules. Co-authored-by: Calixte Denizet --- web/viewer.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index f4c9feba62260..48c31ce811d11 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -1247,6 +1247,16 @@ dialog :link { white-space: normal; width: auto; + &:is(a) { + padding-top: 5px; + text-decoration: none; + + &[href="#"] { + opacity: 0.5; + pointer-events: none; + } + } + &::before { inset-inline-start: 12px; opacity: var(--doorhanger-icon-opacity); @@ -1264,16 +1274,6 @@ dialog :link { } } - a.toolbarButton { - padding-top: 5px; - text-decoration: none; - - &[href="#"] { - opacity: 0.5; - pointer-events: none; - } - } - #secondaryToolbarButtonContainer { margin-bottom: -4px; max-height: calc(var(--viewer-container-height) - 40px); From 9fd23d808270639695e91131be71f7ab7bcdfdee Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Mon, 12 Aug 2024 20:01:19 +0200 Subject: [PATCH 3/3] Generalize the CSS rules for labeled toolbar buttons This commit fixes a regression from #18596 where the "Add image" button styles broke because it's a labeled toolbar button but the labeled toolbar button CSS rules were only scoped to the secondary toolbar. However, nowadays labeled toolbar buttons are also used in e.g. the editor parameters toolbar, and this highlighted that we didn't clearly encode the concept of labeled toolbar buttons in the CSS so far. This patch extracts the CSS rules for labeled toolbar buttons that were previously limited to the secondary toolbar into a dedicated generic class that can be applied on top of any unlabeled toolbar button to convert it to a labeled toolbar button, regardless of its position in the DOM. This also makes the distinction clearer in the HTML, and the new CSS scope for the toolbar buttons lays the foundation for combining the other toolbar buttons rules in there later on. Co-authored-by: Calixte Denizet --- web/viewer.css | 44 +++++++++++++++++++++++--------------------- web/viewer.html | 42 +++++++++++++++++++++--------------------- 2 files changed, 44 insertions(+), 42 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 48c31ce811d11..b2ce01f33d684 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -1213,27 +1213,8 @@ dialog :link { z-index: 50000; /* should be higher than anything else in PDF.js! */ } -#secondaryToolbar { - background-color: var(--doorhanger-bg-color); - cursor: default; - font: message-box; - font-size: 12px; - height: auto; - inset-inline-end: 4px; - line-height: 14px; - margin: 4px 2px; - padding: 6px 0 10px; - position: absolute; - text-align: left; - top: var(--toolbar-height); - z-index: 30000; - - :is(button, a) { - font: message-box; - outline: none; - } - - .toolbarButton { +.toolbarButton { + &.labeled { border-radius: 0; display: inline-block; height: auto; @@ -1273,6 +1254,27 @@ dialog :link { padding-inline-end: 4px; } } +} + +#secondaryToolbar { + background-color: var(--doorhanger-bg-color); + cursor: default; + font: message-box; + font-size: 12px; + height: auto; + inset-inline-end: 4px; + line-height: 14px; + margin: 4px 2px; + padding: 6px 0 10px; + position: absolute; + text-align: left; + top: var(--toolbar-height); + z-index: 30000; + + :is(button, a) { + font: message-box; + outline: none; + } #secondaryToolbarButtonContainer { margin-bottom: -4px; diff --git a/web/viewer.html b/web/viewer.html index 423dad49a2017..fdfc12d5b4db1 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -227,7 +227,7 @@