DevTools: Freshen up popover styles.

Source/devtools/front_end/spectrum.css

Index: Source/devtools/front_end/spectrum.css
diff --git a/Source/devtools/front_end/spectrum.css b/Source/devtools/front_end/spectrum.css
index b9331fb3132192ddffe9036af5c100dd452e1dd3..51e3079247c782c42687a41f7f1eb5d29cf8ed32 100644
--- a/Source/devtools/front_end/spectrum.css
+++ b/Source/devtools/front_end/spectrum.css
@@ -1,14 +1,7 @@
 /* https://github.com/bgrins/spectrum */
 .spectrum-container {
-    position: absolute;
-    top: 0;
-    left: 0;
-    display: inline-block;
-    background: rgba(230, 230, 230, 1) !important;
-    border: 1px solid #646464;
-    padding: 10px;
-    width: 220px;
-    z-index: 10;
+    width: 205px;
+    height: 220px;
     -webkit-user-select: none;
 }
 
@@ -20,25 +13,25 @@
 
 .spectrum-color {
     position: absolute;
-    top: 0;
-    left: 0;
-    bottom: 0;
-    right: 40px;
+    top: 5px;
+    left: 5px;
+    width: 158px;
+    height: 158px;
+    outline: 1px solid #bbb;
 }
 
 .spectrum-display-value {
     -webkit-user-select: text;
-    position: relative;
-    left: 2px;
-    top: -6px;
+    display: inline-block;
+    padding-left: 2px;
 }
 
 .spectrum-hue {
     position: absolute;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 170px;
+    top: 5px;
+    right: 5px;
+    width: 28px;
+    height: 158px;
     -webkit-box-reflect: right -28px;
 }
 
@@ -48,8 +41,19 @@
 }
 
 .spectrum-range-container {
-    position: relative;
-    padding-bottom: 5px;
+    position: absolute;
+    bottom: 28px;
+    left: 5px;
+    display: flex;
+    align-items: center;
+}
+
+.spectrum-text {
+    position: absolute;
+    bottom: 5px;
+    left: 5px;
+    display: flex;
+    align-items: center;
 }
 
 .spectrum-range-container * {
@@ -62,13 +66,6 @@
     padding-right: 4px;
 }
 
-.spectrum-range-container input {
-    position: absolute;
-    left: 15px;
-    right: 40px;
-    margin: 3px 0 0 0;
-}
-
 .spectrum-dragger,
 .spectrum-slider {
     -webkit-user-select: none;