Bug 1367242 - Part 4: Update styling of sidebar header elements. r=dao

MozReview-Commit-ID: 6hbkiE4UlS9

--HG--
extra : rebase_source : 033c87da068192cd035a2c43e5147b62b19cf4b9

browser/themes/shared/sidebar.inc.css

@@ -4,17 +4,11 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 %endif
 
-#sidebar-box {
-  --header-background-color: #F2F2F2;
-  --header-background-color-hover: rgba(204, 204, 204, 0.6);
-}
-
 .sidebar-header,
 #sidebar-header {
   font-size: 1.333em;
   font-weight: lighter;
   padding: 8px;
-  background-color: var(--header-background-color);
   color: -moz-dialogText;
   text-shadow: none;
 }
@@ -75,18 +69,36 @@
   list-style-image: url(chrome://browser/skin/sidebar/close.svg);
   margin: 0;
   padding: 4px;
+  border-radius: 4px;
 }
 
 #sidebar-switcher-target {
   -moz-appearance: none;
-  padding: 4px;
   color: inherit;
+  margin-inline-end: 4px;
+  border-radius: 4px;
+  border: 1px solid transparent;
+  padding: 2px 4px;
 }
 
-#sidebar-box #sidebar-switcher-target:hover,
+#sidebar-switcher-target:hover,
-#sidebar-switcher-target.active,
 #sidebar-close:hover {
-  background: var(--header-background-color-hover);
+  background: hsla(240, 5%, 5%, 0.05);
+}
+
+#sidebar-switcher-target:hover {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+#sidebar-close:hover:active,
+#sidebar-switcher-target:hover:active,
+#sidebar-switcher-target.active {
+  background: hsla(240, 5%, 5%, 0.1);
+}
+
+#sidebar-switcher-target:hover:active,
+#sidebar-switcher-target.active {
+  border-color: rgba(0, 0, 0, 0.25);
 }
 
 #sidebarMenu-popup .subviewbutton {