DevTools: unify theming for checkbox components.

Source/devtools/front_end/ui/checkboxTextLabel.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 {
     padding: 0;
     margin: 0;
     display: inline-flex;
     flex-shrink: 0;
     align-items: center !important;
 }
 
-input.dt-checkbox-button {
+input {
     height: 12px;
     width: 12px;
     flex-shrink: 0;
 }
 
-input.dt-checkbox-colored {
+input.dt-checkbox-themed {
     -webkit-appearance: none;
-    border: 1px solid;
+    margin: 0 5px auto 2px;
+    border: 1px solid rgb(45, 45, 45);
     border-radius: 3px;
+    background-color: rgb(102, 102, 102);
+    position: relative;
+    top: 1px;
 }
 
-input.dt-checkbox-colored:checked {
-    background-image: url(Images/toolbarButtonGlyphs.png);
-    background-size: 352px 144px;
-    background-position: -128px -110px;
+input.dt-checkbox-themed:after {
+    content: '';
+    line-height: 10px;
+    position: absolute;
+    cursor: pointer;
+    width: 12px;
+    height: 12px;
+    background: none;
 }
+
+input.dt-checkbox-themed:checked:after {
+    background-color: #333;
+}
+
+input.dt-checkbox-themed:after {
+    -webkit-mask-image: url(Images/toolbarButtonGlyphs.png);
+    -webkit-mask-size: 352px 144px;
+    -webkit-mask-position: -128px -110px;
+}
+
+@media (-webkit-min-device-pixel-ratio: 1.5) {
+input.dt-checkbox-themed:after {
+    -webkit-mask-image: url(Images/toolbarButtonGlyphs_2x.png);
+}
+
+} /* media */