From 33ed743c480aa7534c8c6f2d63b062be7d98f126 Mon Sep 17 00:00:00 2001 From: Jonas Jenwald Date: Fri, 22 Apr 2022 13:04:12 +0200 Subject: [PATCH] Simplify setting of spacing at the left/right edges of the toolbar(s) Rather than modifying the leading/trailing `margin` on the actual toolbar buttons, to achieve appropriate spacing at the left/right edges of the toolbar(s), it seems much more appropriate (and simpler) to just specify an explicit `padding` for the relevant toolbar containers. Also, for toolbar buttons placed in `splitToolbarButton`-classes we can reduce some complexity around setting the `margin` (since it should always be zero now). With these changes, we're thus able to get rid of a couple more `!important`-rules. --- web/viewer.css | 36 ++++++++++++++---------------------- 1 file changed, 14 insertions(+), 22 deletions(-) diff --git a/web/viewer.css b/web/viewer.css index d00a68628..898bcd2ca 100644 --- a/web/viewer.css +++ b/web/viewer.css @@ -313,13 +313,6 @@ select { 0 1px 0 rgba(0, 0, 0, 0.15), 0 0 1px rgba(0, 0, 0, 0.1); } -#toolbarSidebar .toolbarButton { - margin-inline-end: 2px !important; -} -#toolbarSidebarRight .toolbarButton { - margin-inline-end: 3px !important; -} - #sidebarResizer { position: absolute; top: 0; @@ -580,8 +573,18 @@ select { float: inline-start; } +#toolbarViewerLeft { + padding-inline-start: 1px; +} +#toolbarViewerRight { + padding-inline-end: 1px; +} +#toolbarSidebarRight { + padding-inline-end: 2px; +} + .splitToolbarButton { - margin: 2px 2px 0; + margin: 2px; display: inline-block; } .splitToolbarButton > .toolbarButton { @@ -620,10 +623,6 @@ select { opacity: 0.5; } -.splitToolbarButton.toggled .toolbarButton { - margin: 0; -} - .splitToolbarButton > .toolbarButton:hover, .splitToolbarButton > .toolbarButton:focus-visible, .dropdownToolbarButton:hover, @@ -634,11 +633,11 @@ select { } .splitToolbarButton > .toolbarButton { position: relative; -} -.splitToolbarButton > .toolbarButton:first-child, -.splitToolbarButton > .toolbarButton:last-child { margin: 0; } +#toolbarSidebar .splitToolbarButton > .toolbarButton { + margin-inline-end: 2px; +} .splitToolbarButtonSeparator { float: inline-start; @@ -667,13 +666,6 @@ select { box-sizing: border-box; } -#toolbarViewerLeft > .toolbarButton:first-child { - margin-inline-start: 2px; -} -#toolbarViewerRight > .toolbarButton:last-child { - margin-inline-end: 2px; -} - .toolbarButton:hover, .toolbarButton:focus-visible { background-color: var(--button-hover-color);