[GENERIC viewer] Simplify the styling of the previous/next findbar buttons

The styling of the previous/next-buttons and the findInput, with the elements being "glued" together, was supposed to mimic the styling used in the Firefox *browser* findbar. However, after the most recent re-styling of the Firefox browser UI these elements are now visually separated.
Hence it makes sense, as far as I'm concerned, to try and follow this styling for the findbar used in the GENERIC viewer. One benefit of doing this is that we get more consistent styling, since the buttons now look/behave identically in both the main toolbar and the findbar. Additionally this also simplifies the CSS a bit, since a lot of the existing findbar-specific rules can be removed.

web/viewer.css

@@ -51,7 +51,6 @@
   --field-color: rgba(6, 6, 6, 1);
   --field-bg-color: rgba(255, 255, 255, 1);
   --field-border-color: rgba(187, 187, 188, 1);
-  --findbar-nextprevious-btn-bg-color: rgba(227, 228, 230, 1);
   --treeitem-color: rgba(0, 0, 0, 0.8);
   --treeitem-hover-color: rgba(0, 0, 0, 0.9);
   --treeitem-selected-color: rgba(0, 0, 0, 0.9);
@@ -135,7 +134,6 @@
     --field-color: rgba(250, 250, 250, 1);
     --field-bg-color: rgba(64, 64, 68, 1);
     --field-border-color: rgba(115, 115, 115, 1);
-    --findbar-nextprevious-btn-bg-color: rgba(89, 89, 89, 1);
     --treeitem-color: rgba(255, 255, 255, 0.8);
     --treeitem-hover-color: rgba(255, 255, 255, 0.9);
     --treeitem-selected-color: rgba(255, 255, 255, 0.9);
@@ -444,6 +442,9 @@ select {
 .findbar > div {
   height: 32px;
 }
+.findbar > div#findbarInputContainer {
+  margin-inline-end: 4px;
+}
 .findbar.wrapContainers > div,
 .findbar.wrapContainers > div#findbarMessageContainer > * {
   clear: both;
@@ -452,30 +453,6 @@ select {
   height: auto;
 }
 
-.findbar .splitToolbarButton {
-  margin-top: 3px;
-  margin-inline: 0 5px;
-}
-
-.findbar .splitToolbarButton > .toolbarButton {
-  background-color: var(--findbar-nextprevious-btn-bg-color);
-  border-radius: 0;
-  height: 26px;
-  border-top: 1px solid var(--field-border-color);
-  border-bottom: 1px solid var(--field-border-color);
-}
-
-.findbar .splitToolbarButton > .toolbarButton::before {
-  top: 5px;
-}
-
-.findbar .splitToolbarButton > .findNext {
-  width: 29px;
-  border-start-end-radius: 2px;
-  border-end-end-radius: 2px;
-  border-inline-end: 1px solid var(--field-border-color);
-}
-
 .findbar input[type="checkbox"] {
   pointer-events: none;
 }
@@ -497,8 +474,6 @@ select {
 
 #findInput {
   width: 200px;
-  border-start-end-radius: 0;
-  border-end-end-radius: 0;
 }
 #findInput::-webkit-input-placeholder {
   color: rgba(191, 191, 191, 1);
@@ -686,12 +661,6 @@ select {
   margin: 4px 0;
 }
 
-.findbar .splitToolbarButtonSeparator {
-  background-color: var(--field-border-color);
-  margin: 0;
-  padding: 13px 0;
-}
-
 .toolbarButton,
 .dropdownToolbarButton,
 .secondaryToolbarButton,
@@ -841,11 +810,11 @@ select {
   transform: scaleX(var(--dir-factor));
 }
 
-.toolbarButton.findPrevious::before {
+#findPrevious.toolbarButton::before {
   mask-image: var(--findbarButton-previous-icon);
 }
 
-.toolbarButton.findNext::before {
+#findNext.toolbarButton::before {
   mask-image: var(--findbarButton-next-icon);
 }
 

web/viewer.html

@@ -118,11 +118,11 @@ See https://github.com/adobe-type-tools/cmap-resources
           <div id="findbarInputContainer">
             <input id="findInput" class="toolbarField" title="Find" placeholder="Find in document…" tabindex="91" data-l10n-id="find_input" aria-invalid="false">
             <div class="splitToolbarButton">
-              <button id="findPrevious" class="toolbarButton findPrevious" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="find_previous">
+              <button id="findPrevious" class="toolbarButton" title="Find the previous occurrence of the phrase" tabindex="92" data-l10n-id="find_previous">
                 <span data-l10n-id="find_previous_label">Previous</span>
               </button>
               <div class="splitToolbarButtonSeparator"></div>
-              <button id="findNext" class="toolbarButton findNext" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="find_next">
+              <button id="findNext" class="toolbarButton" title="Find the next occurrence of the phrase" tabindex="93" data-l10n-id="find_next">
                 <span data-l10n-id="find_next_label">Next</span>
               </button>
             </div>