From f22c7a41d3a00d02168b8c6fba7173747d2cc4c9 Mon Sep 17 00:00:00 2001 From: Tim van der Meij Date: Sun, 11 Aug 2024 15:04:38 +0200 Subject: [PATCH] Remove the `secondaryToolbarButton` CSS class Secondary toolbar buttons are toolbar buttons with some extra rules, mainly to make them wider and have visible labels. However, this similarity is currently not clearly reflected in the implementation because the secondary toolbar buttons use a different CSS class, `secondaryToolbarButton`, compared to the other toolbar buttons that use the `toolbarButton` CSS class. This also causes some duplication in the rules and requires extra care to keep the common bits for the `secondaryToolbarButton` class in sync with the `toolbarButton` class. Fortunately, now that we have a dedicated CSS scope for the secondary toolbar, we can simplify this by giving all secondary toolbar buttons the `toolbarButton` class and explicitly listing the required overrides in the `#secondaryToolbar` scope instead. Doing so removes most of the special-casing for secondary toolbar buttons while explicitly listing the differences in a single place for a better overview. It also lays the foundation for making all toolbar buttons respect the `browser.uidensity` Firefox preference later by reducing differences. Co-authored-by: Calixte Denizet --- web/viewer.css | 104 ++++++++++++++++++++++++------------------------ web/viewer.html | 42 +++++++++---------- 2 files changed, 73 insertions(+), 73 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index 9f3c3f9f6c8d8b..63db712f3eee6e 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -629,7 +629,6 @@ body { } .toolbarButton, -.secondaryToolbarButton, .dialogButton { border: none; background: none; @@ -653,7 +652,7 @@ body { overflow: hidden; } -:is(.toolbarButton, .secondaryToolbarButton, .dialogButton)[disabled] { +:is(.toolbarButton, .dialogButton)[disabled] { opacity: 0.5; } @@ -679,7 +678,6 @@ body { .toolbarButton, .dropdownToolbarButton, -.secondaryToolbarButton, .dialogButton { min-width: 16px; margin: 2px 1px; @@ -697,27 +695,23 @@ body { .toolbarButton:is(:hover, :focus-visible) { background-color: var(--button-hover-color); } -.secondaryToolbarButton:is(:hover, :focus-visible) { - background-color: var(--doorhanger-hover-bg-color); - color: var(--doorhanger-hover-color); -} -:is(.toolbarButton, .secondaryToolbarButton).toggled, +.toolbarButton.toggled, .splitToolbarButton.toggled > .toolbarButton.toggled { background-color: var(--toggled-btn-bg-color); color: var(--toggled-btn-color); } -:is(.toolbarButton, .secondaryToolbarButton).toggled:hover, +.toolbarButton.toggled:hover, .splitToolbarButton.toggled > .toolbarButton.toggled:hover { outline: var(--toggled-hover-btn-outline) !important; } -:is(.toolbarButton, .secondaryToolbarButton).toggled::before { +.toolbarButton.toggled::before { background-color: var(--toggled-btn-color); } -:is(.toolbarButton, .secondaryToolbarButton).toggled:hover:active, +.toolbarButton.toggled:hover:active, .splitToolbarButton.toggled > .toolbarButton.toggled:hover:active { background-color: var(--toggled-hover-active-btn-color); } @@ -765,7 +759,7 @@ body { height: 1px; } -:is(.toolbarButton, .secondaryToolbarButton, .treeItemToggler)::before, +:is(.toolbarButton, .treeItemToggler)::before, .dropdownToolbarButton::after { /* All matching images have a size of 16x16 * All relevant containers have a size of 28x28 */ @@ -789,17 +783,10 @@ body { left: 6px; } -.toolbarButton:is(:hover, :focus-visible)::before, -.secondaryToolbarButton:is(:hover, :focus-visible)::before { +.toolbarButton:is(:hover, :focus-visible)::before { background-color: var(--toolbar-icon-hover-bg-color); } -.secondaryToolbarButton::before { - opacity: var(--doorhanger-icon-opacity); - top: 5px; - inset-inline-start: 12px; -} - #sidebarToggle::before { mask-image: var(--toolbarButton-sidebarToggle-icon); transform: scaleX(var(--dir-factor)); @@ -850,15 +837,6 @@ body { mask-image: var(--toolbarButton-download-icon); } -a.secondaryToolbarButton { - padding-top: 5px; - text-decoration: none; -} -a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { - opacity: 0.5; - pointer-events: none; -} - #viewThumbnail::before { mask-image: var(--toolbarButton-viewThumbnail-icon); } @@ -898,25 +876,6 @@ a:is(.toolbarButton, .secondaryToolbarButton)[href="#"] { border-radius: 50%; } -.secondaryToolbarButton { - position: relative; - margin: 0; - padding: 0 0 1px; - padding-inline-start: 36px; - height: auto; - min-height: 26px; - width: auto; - min-width: 100%; - text-align: start; - white-space: normal; - border-radius: 0; - box-sizing: border-box; - display: inline-block; -} -.secondaryToolbarButton > span { - padding-inline-end: 4px; -} - .verticalToolbarSeparator { display: block; margin: 5px 2px; @@ -1264,6 +1223,47 @@ dialog :link { } #secondaryToolbar { + .toolbarButton { + border-radius: 0; + display: inline-block; + height: auto; + margin: 0; + padding: 0 0 1px; + padding-inline-start: 36px; + position: relative; + min-height: 26px; + min-width: 100%; + text-align: start; + white-space: normal; + width: auto; + + &::before { + inset-inline-start: 12px; + opacity: var(--doorhanger-icon-opacity); + top: 5px; + } + + &:is(:hover, :focus-visible) { + background-color: var(--doorhanger-hover-bg-color); + color: var(--doorhanger-hover-color); + } + + > span { + display: unset; + padding-inline-end: 4px; + } + } + + 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); @@ -1540,7 +1540,7 @@ dialog :link { } .visibleMediumView { - display: none; + display: none !important; } @media all and (max-width: 900px) { @@ -1567,17 +1567,17 @@ dialog :link { --editor-toolbar-base-offset: 40px; } #outerContainer .hiddenMediumView { - display: none; + display: none !important; } #outerContainer .visibleMediumView { - display: inherit; + display: inherit !important; } } @media all and (max-width: 690px) { .hiddenSmallView, .hiddenSmallView * { - display: none; + display: none !important; } .toolbarButtonSpacer { width: 0; diff --git a/web/viewer.html b/web/viewer.html index d88391b8090c9e..423dad49a20177 100644 --- a/web/viewer.html +++ b/web/viewer.html @@ -227,7 +227,7 @@