From 33ed743c480aa7534c8c6f2d63b062be7d98f126 Mon Sep 17 00:00:00 2001
From: Jonas Jenwald <jonas.jenwald@gmail.com>
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);