DevTools: do not respect Chrome theme in DevTools, align toolbar items.

Source/devtools/front_end/ui/toolbar.css

 /*
  * Copyright (c) 2014 The Chromium Authors. All rights reserved.
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file.
  */
 
 :host {
     flex: none;
 }
 
@@ skipping 105 matching lines @@
 }
 
 button.toolbar-item {
     width: 30px;
 }
 
 :host-context(.material) button.toolbar-item {
     width: 32px;
 }
 
-.toolbar-item:hover {
+button.toolbar-item:hover,
+.toolbar-item.checkbox:hover,
+.toolbar-counter:hover {
     background-color: rgba(110, 110, 110, 0.1);
 }
 
 button.toolbar-item.toggled-on .glyph {
     background-color: rgb(66, 129, 235) !important;
 }
 
 button.toolbar-item:hover .glyph {
     opacity: 1;
 }
@@ skipping 65 matching lines @@
     line-height: 22px;
 }
 
 .toolbar-item.checkbox {
     padding-right: 5px;
 }
 
 .toolbar-item > .glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
     -webkit-mask-size: 352px 144px;
-    background-color: rgba(0, 0, 0, 0.75);
-    opacity: 0.8;
+    opacity: 0.9;
+    background-color: #595959;
     z-index: 1;
     width: 32px;
     height: 24px;
 }
 
+:host-context(:not(.material)) .toolbar-item > .glyph {
+    position: relative;
+    left: -1px;
+}
+
 
 @media (-webkit-min-device-pixel-ratio: 1.5) {
 .toolbar-item > .glyph {
     -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
 }
 } /* media */
 
 .toolbar-item.emulate-active {
     background-color: rgb(163,163,163);
 }
 
 .toolbar-counter {
     cursor: pointer;
     padding: 0 2px;
-}
-
-.toolbar-counter:hover .toolbar-counter-item {
-    border-bottom: 1px solid rgb(96, 96, 96);
-    margin-bottom: -1px;
+    min-width: 30px;
 }
 
 .toolbar-counter-item {
     margin-left: 6px;
 }
 
 .toolbar-counter-item label {
     cursor: inherit;
 }
 
@@ skipping 99 matching lines @@
 
 .record-toolbar-item .glyph {
     -webkit-mask-position: -288px 0;
 }
 
 button.record-toolbar-item.toggled-on .glyph {
     -webkit-mask-position: -288px -24px;
     background-color: rgb(216, 0, 0) !important;
 }
 
-.record-filmstrip-toolbar-item .glyph {
+.camera-toolbar-item .glyph {
     -webkit-mask-position: -96px -24px;
 }
 
 .last-step-toolbar-item .glyph {
     -webkit-mask-position: 0 -72px;
 }
 
 .first-step-toolbar-item .glyph {
     -webkit-mask-position: 0 -72px;
     transform: rotate(180deg);
@@ skipping 73 matching lines @@
 
 .filter-toolbar-item > .glyph {
     -webkit-mask-position: -32px -48px;
 }
 
 .filter-toolbar-item.toggled-shown .glyph {
     background-color: rgb(66, 129, 235);
 }
 
 .filter-toolbar-item.toggled-shown {
-    background-color: #eee;
+    background-color: #f3f3f3;
 }
 
 .filter-toolbar-item.toggled-active .glyph {
     background-color: rgb(216, 0, 0);
 }
 
 .waterfall-toolbar-item .glyph {
     -webkit-mask-position: -128px -48px;
 }
 
 .pan-toolbar-item .glyph {
     -webkit-mask-position: -98px -120px;
 }
 
 .center-toolbar-item .glyph {
     -webkit-mask-position: -128px -120px;
 }
 
 .rotate-toolbar-item .glyph {
     -webkit-mask-position: -160px -120px;
 }
 
 .pin-toolbar-item .glyph {
     -webkit-mask-position: -256px -120px;
 }
 
 .pin-toolbar-item.toggled-on,
 .animation-toolbar-item.toggled-on {
-    background-color: #eee;
+    background-color: #f3f3f3;
 }
 
 .animation-toolbar-item .glyph {
     -webkit-mask-position: -192px -120px;
 }
 
 .eyedropper-toolbar-item .glyph {
     -webkit-mask-position: -288px -120px;
 }
 
@@ skipping 26 matching lines @@
 }
 
 .playback-rate-button.toggled-on > .toolbar-button-text {
     color: rgb(66, 129, 235);
 }
 
 button.playback-rate-button {
     width: auto;
     margin-right: 10px;
 }